DEV: Convert install-theme modal to component-based API (#22939)

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

@@ -0,0 +1,198 @@
+<DModal
+  @bodyClass="install-theme"
+  class="admin-install-theme-modal"
+  @title={{i18n "admin.customize.theme.install"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    {{#unless this.directRepoInstall}}
+      <div class="install-theme-items">
+        <InstallThemeItem
+          @value="popular"
+          @selection={{this.selection}}
+          @label="admin.customize.theme.install_popular"
+        />
+        <InstallThemeItem
+          @value="local"
+          @selection={{this.selection}}
+          @label="admin.customize.theme.install_upload"
+        />
+        <InstallThemeItem
+          @value="remote"
+          @selection={{this.selection}}
+          @label="admin.customize.theme.install_git_repo"
+        />
+        <InstallThemeItem
+          @value="create"
+          @selection={{this.selection}}
+          @label="admin.customize.theme.install_create"
+          @showIcon={{true}}
+        />
+      </div>
+    {{/unless}}
+    <div class="install-theme-content">
+      {{#if this.popular}}
+        <div class="popular-theme-items">
+          {{#each this.themes as |theme|}}
+            <div class="popular-theme-item" data-name={{theme.name}}>
+              <div class="popular-theme-name">
+                <a
+                  href={{theme.meta_url}}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  {{#if theme.component}}
+                    {{d-icon
+                      "puzzle-piece"
+                      title="admin.customize.theme.component"
+                    }}
+                  {{/if}}
+                  {{theme.name}}
+                </a>
+                <div class="popular-theme-description">
+                  {{theme.description}}
+                </div>
+              </div>
+
+              <div class="popular-theme-buttons">
+                {{#if theme.installed}}
+                  <span>{{i18n "admin.customize.theme.installed"}}</span>
+                {{else}}
+                  <DButton
+                    class="btn-small"
+                    @label="admin.customize.theme.install"
+                    @disabled={{this.installDisabled}}
+                    @icon="upload"
+                    @action={{fn this.installThemeFromList theme.value}}
+                  />
+
+                  {{#if theme.preview}}
+                    <a
+                      href={{theme.preview}}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {{d-icon "desktop"}}
+                      {{i18n "admin.customize.theme.preview"}}
+                    </a>
+                  {{/if}}
+                {{/if}}
+              </div>
+            </div>
+          {{/each}}
+        </div>
+      {{/if}}
+      {{#if this.local}}
+        <div class="inputs">
+          <input
+            {{on "change" this.uploadLocaleFile}}
+            type="file"
+            id="file-input"
+            accept=".dcstyle.json,application/json,.tar.gz,application/x-gzip,.zip,application/zip"
+          />
+          <br />
+          <span class="description">
+            {{i18n "admin.customize.theme.import_file_tip"}}
+          </span>
+        </div>
+      {{/if}}
+      {{#if this.remote}}
+        <div class="inputs">
+          <div class="repo">
+            <div class="label">
+              {{i18n "admin.customize.theme.import_web_tip"}}
+            </div>
+            <Input
+              @value={{this.uploadUrl}}
+              placeholder={{this.urlPlaceholder}}
+            />
+          </div>
+          <DButton
+            class="btn-small advanced-repo"
+            @action={{this.toggleAdvanced}}
+            @label="admin.customize.theme.import_web_advanced"
+          />
+          {{#if this.advancedVisible}}
+            <div class="branch">
+              <div class="label">
+                {{i18n "admin.customize.theme.remote_branch"}}
+              </div>
+              <Input @value={{this.branch}} placeholder="main" />
+            </div>
+          {{/if}}
+          {{#if this.showPublicKey}}
+            <div class="public-key">
+              <div class="label">
+                {{i18n "admin.customize.theme.public_key"}}
+              </div>
+              <div class="public-key-text-wrapper">
+                <Textarea
+                  class="public-key-value"
+                  readonly={{true}}
+                  @value={{this.publicKey}}
+                  {{did-insert this.generatePublicKey}}
+                />
+                <CopyButton @selector="textarea.public-key-value" />
+              </div>
+            </div>
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if this.create}}
+        <div class="inputs">
+          <div class="label">{{i18n "admin.customize.theme.create_name"}}</div>
+          <Input @value={{this.name}} placeholder={{this.placeholder}} />
+          <div class="label">{{i18n "admin.customize.theme.create_type"}}</div>
+          <ComboBox
+            @valueProperty="value"
+            @content={{this.createTypes}}
+            @value={{this.selectedType}}
+            @onChange={{this.updateSelectedType}}
+          />
+        </div>
+      {{/if}}
+      {{#if this.directRepoInstall}}
+        <div class="repo">
+          <div class="label">
+            {{html-safe
+              (i18n
+                "admin.customize.theme.direct_install_tip" name=this.uploadName
+              )
+            }}
+          </div>
+          <pre><code>{{this.uploadUrl}}</code></pre>
+        </div>
+      {{/if}}
+    </div>
+  </:body>
+  <:footer>
+    {{#unless this.popular}}
+      <div class="modal-footer">
+        {{#if this.duplicateRemoteThemeWarning}}
+          <div class="install-theme-warning">
+            ⚠️
+            {{this.duplicateRemoteThemeWarning}}
+          </div>
+        {{/if}}
+        {{#if this.themeCannotBeInstalled}}
+          <div class="install-theme-warning">
+            ⚠️
+            {{this.themeCannotBeInstalled}}
+          </div>
+        {{/if}}
+        <DButton
+          @action={{this.installTheme}}
+          @disabled={{this.installDisabled}}
+          class="btn
+            {{if this.themeCannotBeInstalled 'btn-danger' 'btn-primary'}}"
+          @label={{this.submitLabel}}
+        />
+        <DButton
+          class="btn-flat d-modal-cancel"
+          @action={{@closeModal}}
+          @label="cancel"
+        />
+      </div>
+    {{/unless}}
+  </:footer>
+</DModal>