FIX: Do not display the color scheme ID in interface dropdown (#14066)

When a theme's default color scheme is not marked as user selectable, we were outputting the numeric ID in the UI. This outputs "Theme default" instead.
This commit is contained in:
Penar Musaraj 2021-08-17 15:05:17 -04:00 committed by GitHub
parent 08a3aa546b
commit 40f7edd276
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 1 deletions

View File

@ -238,7 +238,25 @@ export default Controller.extend({
return value;
},
get() {
return this.session.userColorSchemeId;
if (!this.session.userColorSchemeId) {
return;
}
const defaultTheme = this.site.user_themes?.findBy("default", true);
// we don't want to display the numeric ID of a scheme
// when it is set by the theme but not marked as user selectable
if (
defaultTheme?.color_scheme_id === this.session.userColorSchemeId &&
!this.userSelectableColorSchemes.findBy(
"id",
this.session.userColorSchemeId
)
) {
return;
} else {
return this.session.userColorSchemeId;
}
},
}),

View File

@ -189,6 +189,35 @@ acceptance(
);
});
test("display 'Theme default' when default color scheme is not marked as selectable", async function (assert) {
let meta = document.createElement("meta");
meta.name = "discourse_theme_id";
meta.content = "1";
document.getElementsByTagName("head")[0].appendChild(meta);
let site = Site.current();
site.set("user_themes", [
{ theme_id: 1, name: "A Theme", color_scheme_id: 2, default: true },
]);
site.set("user_color_schemes", [{ id: 3, name: "A Color Scheme" }]);
await visit("/u/eviltrout/preferences/interface");
assert.ok(exists(".light-color-scheme"), "has regular dropdown");
const dropdownObject = selectKit(".light-color-scheme .select-kit");
assert.equal(dropdownObject.header().value(), null);
assert.equal(
dropdownObject.header().label(),
I18n.t("user.color_schemes.default_description")
);
await dropdownObject.expand();
assert.equal(dropdownObject.rows().length, 1);
document.querySelector("meta[name='discourse_theme_id']").remove();
});
test("light and dark color scheme pickers", async function (assert) {
let site = Site.current();
let session = Session.current();