FIX: Do not show themes list filter unless there are 10+ items (#25202)

Followup to be841e666ec0aee601143e26d3612eb0850faa08,
this commit does not show the themes/components list filter
if there are < 10 items in the list. This brings parity
with the search input, which does the same. If you only have
a few themes/components, then this extra UI is just unnecessary.

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/admin/addon/components/themes-list.hbs

@@ -16,7 +16,7 @@
   />
 </div>
 
-{{#if this.showSearch}}
+{{#if this.showSearchAndFilter}}
   <div class="themes-list-search">
     <Input
       class="themes-list-search__input"
@@ -27,17 +27,17 @@
     />
     {{d-icon "search"}}
   </div>
-{{/if}}
+  <div class="themes-list-filter">
-<div class="themes-list-filter">
     <div class="themes-list-filter__label">
       {{i18n "admin.customize.theme.filter_by"}}
     </div>
     <ComboBox
       @content={{this.selectableFilters}}
       @value={{this.filter}}
-    @class="themes-list-filter__input"
+      class="themes-list-filter__input"
     />
-</div>
+  </div>
+{{/if}}
 <div class="themes-list-container">
   {{#if this.hasThemes}}
     {{#if (and this.hasActiveThemes (not this.inactiveFilter))}}

app/assets/javascripts/admin/addon/components/themes-list.js

@@ -68,7 +68,7 @@ export default class ThemesList extends Component {
 
   @gt("inactiveThemes.length", 0) hasInactiveThemes;
 
-  @gte("themesList.length", 10) showSearch;
+  @gte("themesList.length", 10) showSearchAndFilter;
 
   @equal("currentTab", THEMES) themesTabActive;
 
@@ -210,7 +210,7 @@ export default class ThemesList extends Component {
       this.set("selectInactiveMode", false);
       this.set("currentTab", newTab);
       this.set("filter", ALL_FILTER);
-      if (!this.showSearch) {
+      if (!this.showSearchAndFilter) {
         this.set("searchTerm", null);
       }
     }

app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js

@@ -211,56 +211,57 @@ module("Integration | Component | themes-list", function (hooks) {
         },
       }),
     ];
+
+    // This is to make the filter show, it only shows if there are 10+ themes or components.
+    const otherThemes = createThemes(8, (n) => {
+      return {
+        name: `OtherTheme ${n}${n}`,
+        component: true,
+        parent_themes: [1],
+        enabled: true,
+      };
+    });
+
     this.setProperties({
-      themes,
+      themes: themes.concat(otherThemes),
       currentTab: THEMES,
     });
 
+    function themeNames() {
+      return [...queryAll(".themes-list-container__item .info .name")]
+        .map((node) => node.textContent.trim())
+        .filter((name) => !name.includes("OtherTheme"));
+    }
+
     await render(
       hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />`
     );
 
     assert.ok(exists(".themes-list-filter__input"));
-    assert.deepEqual(
+    assert.deepEqual(themeNames(), [
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      [
       "Theme enabled 1",
       "Theme enabled 2",
       "Theme disabled 1",
       "Theme disabled 2",
-      ]
+    ]);
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("active");
     assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
+      themeNames(),
-        node.textContent.trim()
+
-      ),
       ["Theme enabled 1", "Theme enabled 2"]
     );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
-    assert.deepEqual(
+    assert.deepEqual(themeNames(), ["Theme disabled 1", "Theme disabled 2"]);
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Theme disabled 1", "Theme disabled 2"]
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue(
       "updates_available"
     );
-    assert.deepEqual(
+    assert.deepEqual(themeNames(), ["Theme disabled 2"]);
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Theme disabled 2"]
-    );
   });
 
   test("components filter", async function (assert) {
@@ -300,8 +301,19 @@ module("Integration | Component | themes-list", function (hooks) {
         },
       }),
     ];
+
+    // This is to make the filter show, it only shows if there are 10+ themes or components.
+    const otherComponents = createThemes(8, (n) => {
+      return {
+        name: `OtherComponent ${n}${n}`,
+        component: true,
+        parent_themes: [1],
+        enabled: true,
+      };
+    });
+
     this.setProperties({
-      components,
+      components: components.concat(otherComponents),
       currentTab: COMPONENTS,
     });
 
@@ -309,65 +321,51 @@ module("Integration | Component | themes-list", function (hooks) {
       hbs`<ThemesList @themes={{(array)}} @components={{this.components}} @currentTab={{this.currentTab}} />`
     );
 
+    function componentNames() {
+      return [...queryAll(".themes-list-container__item .info .name")]
+        .map((node) => node.textContent.trim())
+        .filter((name) => !name.includes("OtherComponent"));
+    }
+
     assert.ok(exists(".themes-list-filter__input"));
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), [
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      [
       "Component used 1",
       "Component used 2",
       "Component unused 1",
       "Component unused and disabled 1",
-      ]
+    ]);
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("active");
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), [
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
+      "Component used 1",
-        node.textContent.trim()
+      "Component used 2",
-      ),
+    ]);
-      ["Component used 1", "Component used 2"]
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), [
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
+      "Component unused 1",
-        node.textContent.trim()
+      "Component unused and disabled 1",
-      ),
+    ]);
-      ["Component unused 1", "Component unused and disabled 1"]
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("enabled");
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), [
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
+      "Component used 1",
-        node.textContent.trim()
+      "Component used 2",
-      ),
+      "Component unused 1",
-      ["Component used 1", "Component used 2", "Component unused 1"]
+    ]);
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("disabled");
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), ["Component unused and disabled 1"]);
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component unused and disabled 1"]
-    );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue(
       "updates_available"
     );
-    assert.deepEqual(
+    assert.deepEqual(componentNames(), ["Component unused and disabled 1"]);
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component unused and disabled 1"]
-    );
   });
 
   test("switching between themes and components tabs keeps the search visible only if both tabs have at least 10 items", async function (assert) {