FIX: don't preview color scheme if it's not current user's profile. (#17855)

app/assets/javascripts/discourse/app/controllers/preferences/interface.js

@@ -13,6 +13,7 @@ import { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { reload } from "discourse/helpers/page-reloader";
+import { propertyEqual } from "discourse/lib/computed";
 
 const USER_HOMES = {
   1: "latest",
@@ -33,6 +34,7 @@ export default Controller.extend({
   selectedDarkColorSchemeId: null,
   preferencesController: controller("preferences"),
   makeColorSchemeDefault: true,
+  canPreviewColorScheme: propertyEqual("model.id", "currentUser.id"),
 
   init() {
     this._super(...arguments);
@@ -352,9 +354,13 @@ export default Controller.extend({
     loadColorScheme(colorSchemeId) {
       this.setProperties({
         selectedColorSchemeId: colorSchemeId,
-        previewingColorScheme: true,
+        previewingColorScheme: this.canPreviewColorScheme,
       });
 
+      if (!this.canPreviewColorScheme) {
+        return;
+      }
+
       if (colorSchemeId < 0) {
         const defaultTheme = this.userSelectableThemes.findBy(
           "id",
@@ -375,9 +381,13 @@ export default Controller.extend({
     loadDarkColorScheme(colorSchemeId) {
       this.setProperties({
         selectedDarkColorSchemeId: colorSchemeId,
-        previewingColorScheme: true,
+        previewingColorScheme: this.canPreviewColorScheme,
       });
 
+      if (!this.canPreviewColorScheme) {
+        return;
+      }
+
       if (colorSchemeId === -1) {
         // load preview of regular scheme when dark scheme is disabled
         loadColorSchemeStylesheet(

app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js

@@ -11,6 +11,7 @@ import Session from "discourse/models/session";
 import Site from "discourse/models/site";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { test } from "qunit";
+import userFixtures from "discourse/tests/fixtures/user-fixtures";
 
 acceptance("User Preferences - Interface", function (needs) {
   needs.user();
@@ -147,6 +148,14 @@ acceptance(
           success: "OK",
         });
       });
+      server.get("/color-scheme-stylesheet/3.json", () => {
+        return helper.response({
+          new_href: "3.css",
+        });
+      });
+      server.get("/u/charlie.json", () => {
+        return helper.response(userFixtures["/u/charlie.json"]);
+      });
     });
 
     test("show option to disable dark mode", async function (assert) {
@@ -310,5 +319,37 @@ acceptance(
         "resets dark scheme dropdown"
       );
     });
+
+    test("preview the color scheme only in current user's profile", async function (assert) {
+      let site = Site.current();
+
+      site.set("default_dark_color_scheme", { id: 1, name: "Dark" });
+      site.set("user_color_schemes", [
+        { id: 2, name: "Cool Breeze" },
+        { id: 3, name: "Dark Night", is_dark: true },
+      ]);
+
+      await visit("/u/eviltrout/preferences/interface");
+
+      await selectKit(".light-color-scheme .combobox").expand();
+      await selectKit(".light-color-scheme .combobox").selectRowByValue(3);
+
+      assert.ok(
+        document.querySelector("link#cs-preview-light").href.endsWith("/3.css"),
+        "correct stylesheet loaded"
+      );
+
+      document.querySelector("link#cs-preview-light").remove();
+
+      await visit("/u/charlie/preferences/interface");
+
+      await selectKit(".light-color-scheme .combobox").expand();
+      await selectKit(".light-color-scheme .combobox").selectRowByValue(3);
+
+      assert.notOk(
+        document.querySelector("link#cs-preview-light"),
+        "stylesheet not loaded"
+      );
+    });
   }
 );