FIX: Detect installed themes using URLs instead of names (#12201)

Context: https://meta.discourse.org/t/not-all-installed-theme-components-listed-as-installed/179756?u=osama

app/assets/javascripts/admin/addon/controllers/admin-customize-themes.js

@@ -15,8 +15,8 @@ export default Controller.extend({
     return themes.filter((t) => t.get("component"));
   },
 
-  @discourseComputed("model", "model.@each.component")
-  installedThemes(themes) {
-    return themes.map((t) => t.name);
+  @discourseComputed("model.content")
+  installedThemes(content) {
+    return content || [];
   },
 });

app/assets/javascripts/admin/addon/controllers/modals/admin-install-theme.js

@@ -44,7 +44,9 @@ export default Controller.extend(ModalFunctionality, {
   @discourseComputed("themesController.installedThemes")
   themes(installedThemes) {
     return POPULAR_THEMES.map((t) => {
-      if (installedThemes.includes(t.name)) {
+      if (
+        installedThemes.some((theme) => this.themeHasSameUrl(theme, t.value))
+      ) {
         set(t, "installed", true);
       }
       return t;

app/assets/javascripts/admin/tests/admin/acceptance/admin-install-theme-modal-test.js

@@ -1,6 +1,7 @@
 import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
 import { click, fillIn, visit } from "@ember/test-helpers";
 import { test } from "qunit";
+import I18n from "I18n";
 
 acceptance("Admin - Themes - Install modal", function (needs) {
   needs.user();
@@ -50,4 +51,29 @@ acceptance("Admin - Themes - Install modal", function (needs) {
       "repo url is visible"
     );
   });
+
+  test("installed themes are matched with the popular list by URL", async function (assert) {
+    await visit("/admin/customize/themes");
+    await click(".create-actions .btn-primary");
+
+    assert.notOk(
+      query(
+        '.popular-theme-item[data-name="Graceful"] .popular-theme-buttons button'
+      ),
+      "no install button is shown for installed themes"
+    );
+    assert.equal(
+      query(
+        '.popular-theme-item[data-name="Graceful"] .popular-theme-buttons'
+      ).textContent.trim(),
+      I18n.t("admin.customize.theme.installed")
+    );
+
+    assert.ok(
+      query(
+        '.popular-theme-item[data-name="Minima"] .popular-theme-buttons button'
+      ),
+      "install button is shown for not installed themes"
+    );
+  });
 });

app/assets/javascripts/discourse/tests/helpers/create-pretender.js

@@ -690,7 +690,18 @@ export function applyDefaultHandlers(pretender) {
   });
 
   pretender.get("/admin/themes", () => {
-    return response(200, { themes: [], extras: {} });
+    return response(200, {
+      themes: [
+        {
+          id: 1,
+          name: "Graceful Renamed",
+          remote_theme: {
+            remote_url: "https://github.com/discourse/graceful.git",
+          },
+        },
+      ],
+      extras: {},
+    });
   });
 
   pretender.post("/admin/themes/generate_key_pair", () => {