FEATURE: Warn admins when installing a theme that's already installed (#11651)

Installing multiple copies of the same theme/component is possible, but you rarely need to actually have multiple copies installed. We've seen many times new admins installing duplicates of components because they were unaware it was already installed. This PR makes the theme installer modal loop through the existing themes when you click on 'install', and if there is a theme with a URL that matches the URL you entered, a warning will show up and you will need to click 'install' again to proceed.

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

@@ -125,6 +125,19 @@ export default Controller.extend(ModalFunctionality, {
     return privateChecked && checkPrivate && publicKey;
   },
 
+  onClose() {
+    this.set("duplicateRemoteThemeWarning", null);
+  },
+
+  themeHasSameUrl(theme, url) {
+    const themeUrl = theme.remote_theme && theme.remote_theme.remote_url;
+    return (
+      themeUrl &&
+      url &&
+      url.replace(/\.git$/, "") === themeUrl.replace(/\.git$/, "")
+    );
+  },
+
   actions: {
     uploadLocaleFile() {
       this.set("localFile", $("#file-input")[0].files[0]);
@@ -167,6 +180,17 @@ export default Controller.extend(ModalFunctionality, {
       }
 
       if (this.remote || this.popular) {
+        const duplicate = this.themesController.model.content.find((theme) =>
+          this.themeHasSameUrl(theme, this.uploadUrl)
+        );
+        if (duplicate && !this.duplicateRemoteThemeWarning) {
+          const warning = I18n.t(
+            "admin.customize.theme.duplicate_remote_theme",
+            { name: duplicate.name }
+          );
+          this.set("duplicateRemoteThemeWarning", warning);
+          return;
+        }
         options.data = {
           remote: this.uploadUrl,
           branch: this.branch,

app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs

@@ -103,6 +103,11 @@
 
 {{#unless popular}}
   <div class="modal-footer">
+    {{#if duplicateRemoteThemeWarning}}
+      <div class="install-theme-warning">
+        ⚠️ {{duplicateRemoteThemeWarning}}
+      </div>
+    {{/if}}
     {{d-button action=(action "installTheme") disabled=installDisabled class="btn btn-primary" label=submitLabel}}
     {{d-modal-cancel close=(route-action "closeModal")}}
   </div>

app/assets/stylesheets/common/admin/customize-install-theme.scss

@@ -126,3 +126,7 @@
     }
   }
 }
+
+.install-theme-warning {
+  margin-bottom: 10px;
+}

config/locales/client.en.yml

@@ -4088,6 +4088,7 @@ en:
           install_upload: "From your device"
           install_git_repo: "From a git repository"
           install_create: "Create new"
+          duplicate_remote_theme: "The theme component “%{name}” is already installed, are you sure you want to install another copy?"
           about_theme: "About"
           license: "License"
           version: "Version:"