DEV: Convert theme-change modal to component-based API (#22964)

# Before
<img width="575" alt="Screenshot 2023-08-03 at 1 35 47 PM" src="https://github.com/discourse/discourse/assets/50783505/b4ae1487-bef8-40d4-8949-902e36303d43">

# After
<img width="897" alt="Screenshot 2023-08-03 at 1 41 21 PM" src="https://github.com/discourse/discourse/assets/50783505/a37c5fe1-eee5-4e0a-8b0a-66aebbaf2342">

This modal could still use some design love. I will raise this internally.

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

@@ -0,0 +1,13 @@
+<DModal
+  @title={{i18n "admin.logs.staff_actions.modal_title"}}
+  @closeModal={{@closeModal}}
+  @bodyClass="theme-change-modal-body"
+  class="history-modal"
+>
+  <:body>
+    {{html-safe this.diff}}
+  </:body>
+  <:footer>
+    <DButton class="btn-primary" @action={{@closeModal}} @label="close" />
+  </:footer>
+</DModal>

app/assets/javascripts/admin/addon/components/modal/theme-change.js

@@ -0,0 +1,21 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+
+export default class AdminThemeChangeComponent extends Component {
+  @tracked diff;
+
+  constructor() {
+    super(...arguments);
+    this.loadDiff();
+  }
+
+  @action
+  async loadDiff() {
+    const diff = await ajax(
+      `/admin/logs/staff_action_logs/${this.args.model.staffActionLog.id}/diff`
+    );
+    this.diff = diff.side_by_side;
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js

@@ -6,8 +6,13 @@ import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 import { scheduleOnce } from "@ember/runloop";
 import showModal from "discourse/lib/show-modal";
+import { inject as service } from "@ember/service";
+import ThemeChangeModal from "../components/modal/theme-change";
 
 export default class AdminLogsStaffActionLogsController extends Controller {
+  @service modal;
+  @service store;
+
   queryParams = ["filters"];
   model = null;
   filters = null;
@@ -161,11 +166,6 @@ export default class AdminLogsStaffActionLogsController extends Controller {
   @action
   showCustomDetailsModal(model, event) {
     event?.preventDefault();
-    let modal = showModal("admin-theme-change", {
+    this.modal.show(ThemeChangeModal, { model: { staffActionLog: model } });
-      model,
-      admin: true,
-      modalClass: "history-modal",
-    });
-    modal.loadDiff();
   }
 }

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

@@ -1,17 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { ajax } from "discourse/lib/ajax";
-
-export default class AdminThemeChangeController extends Controller.extend(
-  ModalFunctionality
-) {
-  loadDiff() {
-    this.set("loading", true);
-    ajax(
-      "/admin/logs/staff_action_logs/" + this.get("model.id") + "/diff"
-    ).then((diff) => {
-      this.set("loading", false);
-      this.set("diff", diff.side_by_side);
-    });
-  }
-}

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

@@ -1,12 +0,0 @@
-<div>
-  <DModalBody @title="admin.logs.staff_actions.modal_title">
-    {{html-safe this.diff}}
-  </DModalBody>
-  <div class="modal-footer">
-    <DButton
-      @class="btn-primary"
-      @action={{route-action "closeModal"}}
-      @label="close"
-    />
-  </div>
-</div>

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

@@ -49,7 +49,6 @@ const KNOWN_LEGACY_MODALS = [
   "topic-summary",
   "user-status",
   "admin-penalize-user",
-  "admin-theme-change",
   "site-setting-default-categories",
   "admin-badge-preview",
   "admin-edit-badge-groupings",

app/assets/stylesheets/common/base/history.scss

@@ -1,7 +1,7 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
 .modal.history-modal {
-  .modal-body {
+  .modal-body:not(.theme-change-modal-body) {
     max-height: 70vh;
   }