From a6850d96914f40eed4c7c3035caace198506e724 Mon Sep 17 00:00:00 2001
From: Osama Sayegh <asooomaasoooma90@gmail.com>
Date: Thu, 25 Feb 2021 00:10:17 +0300
Subject: [PATCH] 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
---
 .../controllers/admin-customize-themes.js     |  6 ++---
 .../controllers/modals/admin-install-theme.js |  4 ++-
 .../admin-install-theme-modal-test.js         | 26 +++++++++++++++++++
 .../tests/helpers/create-pretender.js         | 13 +++++++++-
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes.js b/app/assets/javascripts/admin/addon/controllers/admin-customize-themes.js
index 17dda660401..a598ade6f5c 100644
--- a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes.js
+++ b/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 || [];
   },
 });
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-install-theme.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-install-theme.js
index 66f87c52e22..fbef0029c60 100644
--- a/app/assets/javascripts/admin/addon/controllers/modals/admin-install-theme.js
+++ b/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;
diff --git a/app/assets/javascripts/admin/tests/admin/acceptance/admin-install-theme-modal-test.js b/app/assets/javascripts/admin/tests/admin/acceptance/admin-install-theme-modal-test.js
index bbafc25c4f2..f2fdfbe7a57 100644
--- a/app/assets/javascripts/admin/tests/admin/acceptance/admin-install-theme-modal-test.js
+++ b/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"
+    );
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js b/app/assets/javascripts/discourse/tests/helpers/create-pretender.js
index 210b5e4fac5..08fbde994ec 100644
--- a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js
+++ b/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", () => {