Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Followup to be841e666e,
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>
This commit is contained in:
Martin Brennan 2024-01-11 09:38:08 +10:00 committed by GitHub
parent b2dfc22498
commit a5c46c197c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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__label">
{{i18n "admin.customize.theme.filter_by"}}
<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"
/>
</div>
<ComboBox
@content={{this.selectableFilters}}
@value={{this.filter}}
@class="themes-list-filter__input"
/>
</div>
{{/if}}
<div class="themes-list-container">
{{#if this.hasThemes}}
{{#if (and this.hasActiveThemes (not this.inactiveFilter))}}

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

@ -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);
}
}

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

@ -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(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
[
"Theme enabled 1",
"Theme enabled 2",
"Theme disabled 1",
"Theme disabled 2",
]
);
assert.deepEqual(themeNames(), [
"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) =>
node.textContent.trim()
),
themeNames(),
["Theme enabled 1", "Theme enabled 2"]
);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Theme disabled 1", "Theme disabled 2"]
);
assert.deepEqual(themeNames(), ["Theme disabled 1", "Theme disabled 2"]);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue(
"updates_available"
);
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Theme disabled 2"]
);
assert.deepEqual(themeNames(), ["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(
[...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",
]
);
assert.deepEqual(componentNames(), [
"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(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Component used 1", "Component used 2"]
);
assert.deepEqual(componentNames(), [
"Component used 1",
"Component used 2",
]);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Component unused 1", "Component unused and disabled 1"]
);
assert.deepEqual(componentNames(), [
"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(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Component used 1", "Component used 2", "Component unused 1"]
);
assert.deepEqual(componentNames(), [
"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(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Component unused and disabled 1"]
);
assert.deepEqual(componentNames(), ["Component unused and disabled 1"]);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue(
"updates_available"
);
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
),
["Component unused and disabled 1"]
);
assert.deepEqual(componentNames(), ["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) {