DEV: Convert `color-scheme-select-base` modal to component-based API (#23234)

<img width="560" alt="Screenshot 2023-08-24 at 2 12 38 PM" src="https://github.com/discourse/discourse/assets/50783505/9180f090-2142-4818-bb40-78cf7c25e9fe">

app/assets/javascripts/admin/addon/components/modal/color-scheme-select-base.hbs

@@ -1,20 +1,22 @@
-<div>
-  <DModalBody @title="admin.customize.colors.select_base.title">
+<DModal
+  @title={{i18n "admin.customize.colors.select_base.title"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
     {{i18n "admin.customize.colors.select_base.description"}}
     <ComboBox
-      @content={{this.model}}
+      @content={{@model.baseColorSchemes}}
       @value={{this.selectedBaseThemeId}}
       @onChange={{action (mut this.selectedBaseThemeId)}}
       @valueProperty="base_scheme_id"
     />
-  </DModalBody>
-
-  <div class="modal-footer">
+  </:body>
+  <:footer>
     <DButton
-      @class="btn-primary"
-      @action={{action "selectBase"}}
+      class="btn-primary"
+      @action={{this.selectBase}}
       @icon="plus"
       @label="admin.customize.new"
     />
-  </div>
-</div>
+  </:footer>
+</DModal>

app/assets/javascripts/admin/addon/components/modal/color-scheme-select-base.js

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class ColorSchemeSelectBase extends Component {
+  @tracked
+  selectedBaseThemeId = this.args.model.baseColorSchemes?.[0]?.base_scheme_id;
+
+  @action
+  selectBase() {
+    this.args.model.newColorSchemeWithBase(this.selectedBaseThemeId);
+    this.args.closeModal();
+  }
+}

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

@@ -2,11 +2,12 @@ import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
-import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
+import ColorSchemeSelectBaseModal from "admin/components/modal/color-scheme-select-base";
 
 export default class AdminCustomizeColorsController extends Controller {
   @service router;
+  @service modal;
 
   @discourseComputed("model.@each.id")
   baseColorScheme() {
@@ -44,9 +45,11 @@ export default class AdminCustomizeColorsController extends Controller {
 
   @action
   newColorScheme() {
-    showModal("admin-color-scheme-select-base", {
-      model: this.baseColorSchemes,
-      admin: true,
+    this.modal.show(ColorSchemeSelectBaseModal, {
+      model: {
+        baseColorSchemes: this.baseColorSchemes,
+        newColorSchemeWithBase: this.newColorSchemeWithBase,
+      },
     });
   }
 }

app/assets/javascripts/admin/addon/controllers/modals/admin-color-scheme-select-base.js

@@ -1,29 +0,0 @@
-import { action } from "@ember/object";
-import Controller, { inject as controller } from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default class AdminColorSchemeSelectBaseController extends Controller.extend(
-  ModalFunctionality
-) {
-  @controller adminCustomizeColors;
-
-  selectedBaseThemeId = null;
-
-  init() {
-    super.init(...arguments);
-
-    const defaultScheme = this.get(
-      "adminCustomizeColors.baseColorSchemes.0.base_scheme_id"
-    );
-    this.set("selectedBaseThemeId", defaultScheme);
-  }
-
-  @action
-  selectBase() {
-    this.adminCustomizeColors.send(
-      "newColorSchemeWithBase",
-      this.selectedBaseThemeId
-    );
-    this.send("closeModal");
-  }
-}

app/assets/javascripts/discourse/app/services/modal.js

@@ -37,8 +37,6 @@ const KNOWN_LEGACY_MODALS = [
   "share-and-invite",
   "tag-upload",
   "admin-reseed",
-  "admin-color-scheme-select-base",
-  "admin-form-template-validation-options",
   "admin-staff-action-log-details",
   "admin-uploaded-image-list",
 ];