Improve UI for home page

.rubocop.yml

@@ -10,3 +10,4 @@ RSpec/DescribeClass:
   Exclude:
     - spec/i18n_spec.rb
     - "spec/system/**/*"
+    - "spec/lib/**/*"

app/controllers/concerns/decidim/term_customizer/admin/filterable.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Decidim
+  module TermCustomizer
+    module Admin
+      module Filterable
+        extend ActiveSupport::Concern
+
+        included do
+          include Decidim::Admin::Filterable
+
+          private
+
+          def base_query
+            Decidim::TermCustomizer::TranslationSet.joins(:constraints).where(
+              decidim_term_customizer_constraints: {
+                decidim_organization_id: current_organization.id
+              }
+            ).distinct
+          end
+
+          def search_field_predicate
+            :search_text_or_translations_key_cont
+          end
+        end
+      end
+    end
+  end
+end

app/controllers/decidim/term_customizer/admin/translation_sets_controller.rb

@@ -4,13 +4,14 @@ module Decidim
   module TermCustomizer
     module Admin
       class TranslationSetsController < TermCustomizer::Admin::ApplicationController
+        include Decidim::TermCustomizer::Admin::Filterable
         include TranslatableAttributes
 
         helper_method :collection, :subject_manifests, :blank_constraint
 
         def index
           enforce_permission_to :read, :translation_set
-          @sets = collection
+          @sets = filtered_collection
         end
 
         def new

app/models/decidim/term_customizer/translation.rb

@@ -18,6 +18,10 @@ def available_locales
           Translation.select("DISTINCT locale").to_a.map { |t| t.locale.to_sym }
         end
       end
+
+      def self.ransackable_attributes(_auth_object = nil)
+        %w(key)
+      end
     end
   end
 end

app/models/decidim/term_customizer/translation_set.rb

@@ -3,6 +3,8 @@
 module Decidim
   module TermCustomizer
     class TranslationSet < TermCustomizer::ApplicationRecord
+      include Decidim::FilterableResource
+
       self.table_name = "decidim_term_customizer_translation_sets"
 
       has_many :translations,
@@ -12,6 +14,18 @@ class TranslationSet < TermCustomizer::ApplicationRecord
       has_many :constraints,
                class_name: "Decidim::TermCustomizer::Constraint",
                dependent: :destroy
+
+      # Create i18n ransackers for :name.
+      # Create the :search_text ransacker alias for searching from this attribute.
+      ransacker_i18n_multi :search_text, [:name]
+
+      def self.ransackable_attributes(_auth_object = nil)
+        %w(search_text)
+      end
+
+      def self.ransackable_associations(_auth_object = nil)
+        %w(translations)
+      end
     end
   end
 end

app/views/decidim/term_customizer/admin/translation_sets/_form.html.erb

@@ -9,6 +9,7 @@
     <div class="card-section">
       <div class="row column">
         <%= form.translated :text_field, :name, autofocus: true %>
+        <span class="help-text"><%= t(".name_help_text") %></span>
       </div>
     </div>
   </div>

app/views/decidim/term_customizer/admin/translation_sets/_search.html.erb

@@ -0,0 +1,22 @@
+<div class="filters__section">
+<div class="fcell search">
+  <%= search_form_for(query, url: url_for) do |form| %>
+    <%= applied_filters_hidden_field_tags %>
+    <div class="input-group">
+      <%= form.search_field(
+            search_field_predicate,
+            class: "input-group-field",
+            label: false,
+            placeholder: t(search_field_predicate,
+                            collection: collection_name,
+                            scope: "decidim.admin.filters.search_placeholder")
+        ) %>
+        <div class="input-group-button">
+          <button type="submit" class="text-secondary" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
+            <%= icon "search-line", class: "fill-secondary w-4 h-4" %>
+          </button>
+        </div>
+    </div>
+  <% end %>
+</div>
+</div>

app/views/decidim/term_customizer/admin/translation_sets/edit.html.erb

@@ -11,6 +11,10 @@
           <%= t("actions.help", scope: "decidim.term_customizer.admin") %>
         </button>
       </div>
+      <%= link_to translation_sets_path, class: "button button__sm button__transparent-secondary" do %>
+        <%= icon "arrow-go-back-line" %>
+        <%= t(".back") %>
+      <% end %>
     </h1>
   </div>
   <div class="item__edit item__edit-1col">

app/views/decidim/term_customizer/admin/translation_sets/index.html.erb

@@ -15,12 +15,18 @@
     </h1>
   </div>
 
+  <div class="card">
+    <%= render "search" %>
+  </div>
+
   <div class="table-scroll mt-16">
     <% if @sets.count > 0 %>
       <table class="table-list">
         <thead>
           <tr>
             <th><%= t("models.translation_sets.fields.name", scope: "decidim.term_customizer.admin") %></th>
+            <th><%= t("models.translation_sets.fields.keys", scope: "decidim.term_customizer.admin") %></th>
+            <th><%= t("models.translation_sets.fields.total", scope: "decidim.term_customizer.admin") %></th>
             <th class="actions"><%= t("actions.title", scope: "decidim.term_customizer.admin") %></th>
           </tr>
         </thead>
@@ -34,6 +40,11 @@
                     <%= translated_attribute(set.name) %>
                   <% end %>
                 </td>
+                <td>
+                  <% preview_keys = set.translations.limit(4).pluck(:key) %>
+                  <%= preview_keys.first(3).join(", ") %><%= "..." if preview_keys.size > 3 %>
+                </td>
+                <td><%= set.translations.count %></td>
                 <td class="table-list__actions large-3">
                   <% if allowed_to? :read, :translation %>
                     <%= icon_link_to "eye-line", translation_set_translations_path(set), t("actions.view", scope: "decidim.term_customizer.admin"), class: "action-icon--show" %>

app/views/decidim/term_customizer/admin/translation_sets/new.html.erb

@@ -11,6 +11,10 @@
           <%= t("actions.help", scope: "decidim.term_customizer.admin") %>
         </button>
       </div>
+      <%= link_to translation_sets_path, class: "button button__sm button__transparent-secondary" do %>
+        <%= icon "arrow-go-back-line" %>
+        <%= t(".back") %>
+      <% end %>
     </h1>
   </div>
   <div class="item__edit item__edit-1col">

app/views/decidim/term_customizer/admin/translations/edit.html.erb

@@ -13,6 +13,10 @@
           <%= t("actions.help", scope: "decidim.term_customizer.admin") %>
         </button>
       </div>
+      <%= link_to translation_set_translations_path, class: "button button__sm button__transparent-secondary" do %>
+        <%= icon "arrow-go-back-line" %>
+        <%= t(".back") %>
+      <% end %>
     </h1>
   </div>
   <div class="item__edit item__edit-1col">

app/views/decidim/term_customizer/admin/translations/index.html.erb

@@ -10,6 +10,7 @@
       </div>
 
       <div class="flex items-center gap-x-4">
+
         <%= render partial: "decidim/term_customizer/admin/translations/bulk_actions/dropdown" %>
         <% if allowed_to? :create, :translation %>
           <%= link_to t("actions.add_multiple_translations", scope: "decidim.term_customizer.admin"), translation_set_add_translations_path(set), class: "button button__sm button__secondary" %>
@@ -21,6 +22,13 @@
         <% if set.translations.count > 0 && allowed_to?(:export, :translation_set, translation_set: set) %>
           <%= render partial: "export_dropdown" %>
         <% end %>
+        <% if allowed_to? :update, :organization %>
+          <%= link_to t("actions.clear_cache", scope: "decidim.term_customizer.admin"), clear_caches_path, method: :delete, class: "imports-example tiny button button__sm button__secondary button--simple mr-2", data: { confirm: t("actions.confirm_destroy", scope: "decidim.admin") } %>
+        <% end %>
+        <%= link_to translation_sets_path, class: "button button__sm button__transparent-secondary" do %>
+          <%= icon "arrow-go-back-line" %>
+          <%= t(".back") %>
+        <% end %>
       </div>
 
       <%= render partial: "decidim/term_customizer/admin/translations/bulk_actions/destroy" %>

config/locales/en.yml

@@ -20,18 +20,22 @@ en:
             file:
               invalid_mime_type: 'Invalid file type. Accepted formats are: %{valid_mime_types}'
   decidim:
+    admin:
+      filters:
+        search_placeholder:
+          search_text_or_translations_key_cont: Search translation sets by name or translations by key
     term_customizer:
       admin:
         actions:
           add_multiple_translations: Add multiple
           back: Back
           cancel: Cancel
-          clear_cache: Clear cache
+          clear_cache: Apply translations
           confirm_duplicate: Are you sure you want to duplicate this set?
           duplicate: Duplicate
           help: Help
           import: Import
-          new_translation: New translation
+          new_translation: Manual translation
           new_translation_set: New translation set
           title: Actions
           view: View
@@ -50,11 +54,13 @@ en:
             search: Search
         caches:
           clear:
-            success: Cache cleared successfully
+            success: Translations applied successfully
         models:
           translation_sets:
             fields:
+              keys: Keys
               name: Name
+              total: Total translations
           translations:
             fields:
               key: Translation key
@@ -78,6 +84,7 @@ en:
             error: Error duplicating translation set.
             success: Translation set successfully duplicated.
           edit:
+            back: Back
             save: Save
             title: Translation set
           form:
@@ -102,13 +109,15 @@ en:
               processes, you can create separate translation sets for both processes
               and apply the set to those processes using the constraints.</p>
             help_title: What is a translation set?
+            name_help_text: Enter a descriptive title for the translation set.
             title: Translation set
           index:
-            no_records_html: <p class="ml-2">No translation sets available.</p> <p class="ml-2 mb-4">Start by adding
-              a translation set from the "<a href="%{new_set_link}" class="text-blue-600 underline hover:text-blue-800">
-              %{button_name}
+            no_records_html: <p class="ml-2">No translation sets available.</p> <p
+              class="ml-2 mb-4">Start by adding a translation set from the "<a href="%{new_set_link}"
+              class="text-blue-600 underline hover:text-blue-800"> %{button_name}
               </a>" button.</p>
           new:
+            back: Back
             create: Create
             title: Translation sets
           update:
@@ -121,33 +130,34 @@ en:
           destroy:
             success: Translation successfully deleted.
           edit:
-            help_title: What is translation key?
-            save: Save
-            title: Translation
+            back: Back
             help_html: <p>A translation key is a technical reference to the translation
               to be translatated. This is not the term you want to change but the
               technical key that refers to that translation.</p> <p>For example, if
               you want to change the term <em>"Processes"</em> in the top menu, you
               would use the key <em>"decidim.menu.processes"</em>.</p> <p><a href="https://guides.rubyonrails.org/i18n.html"
               target="_blank"> Read more about Rails Internationalization</a>.</p>
+            help_title: What is translation key?
+            save: Save
             term_help_html: "<p>The customized term is the final word you want to
               appear in the UI instead of the original term. Obviously, the customized
               term can differ for each enabled language.</p>"
             term_help_title: What is customized term?
+            title: Translation
           import:
             error: Error importing translations
             success: Translations successfully imported.
           index:
             actions: Actions
-            no_records_html: <p class="ml-2">No translations available in this set.</p> <p class="ml-2 mb-4">Start
-              by adding translations to this set. The easiest way is to use the "<a
-              href="%{add_multiple_link}" class="text-blue-600 underline hover:text-blue-800">
-              %{button_name}
-              </a>" button where you can search translations with the same terms that you see in the UI.</p>
+            back: Back
+            no_records_html: <p class="ml-2">No translations available in this set.</p>
+              <p class="ml-2 mb-4">Start by adding translations to this set. The easiest
+              way is to use the "<a href="%{add_multiple_link}" class="text-blue-600
+              underline hover:text-blue-800"> %{button_name} </a>" button where you
+              can search translations with the same terms that you see in the UI.</p>
             selected: selected
           new:
             create: Create
-            title: Translations
             help_html: <p>A translation key is a technical reference to the translation
               to be translatated. This is not the term you want to change but the
               technical key that refers to that translation.</p> <p>For example, if
@@ -179,7 +189,8 @@ en:
             success: Translations successfully deleted.
           new:
             destroy: Delete
+            no_records_html: <p class="ml-2 mb-4">No translations available in this
+              set.</p>
             title: Delete translations
-            no_records_html: <p class="ml-2 mb-4">No translations available in this set.</p>
       menu:
         term_customizer: Term customizer

lib/decidim/term_customizer.rb

@@ -37,7 +37,13 @@ module TermCustomizer
     end
 
     class << self
-      attr_accessor :loader
+      def loader
+        Thread.current.thread_variable_get(:term_customizer_loader)
+      end
+
+      def loader=(loader)
+        Thread.current.thread_variable_set(:term_customizer_loader, loader)
+      end
     end
   end
 end

lib/decidim/term_customizer/i18n_backend.rb

@@ -30,7 +30,6 @@ def reload!
         end
 
         def translations
-          return @translations if @translations
           return {} unless TermCustomizer.loader
 
           @translations = TermCustomizer.loader.translations_hash

spec/controllers/decidim/term_customizer/admin/add_translations_controller_spec.rb

@@ -66,7 +66,7 @@ module TermCustomizer
             expect(response).to have_http_status(:ok)
 
             json = response.parsed_body
-            expect(json.length).to eq(80)
+            expect(json.length).to eq(87)
           end
         end
       end