From d2502c9a798bb3c540f22b58947e452b0d700d1e Mon Sep 17 00:00:00 2001 From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Date: Thu, 3 Aug 2023 15:01:40 -0500 Subject: [PATCH] DEV: Convert `theme-change` modal to component-based API (#22964) # Before Screenshot 2023-08-03 at 1 35 47 PM # After Screenshot 2023-08-03 at 1 41 21 PM This modal could still use some design love. I will raise this internally. --- .../addon/components/modal/theme-change.hbs | 13 ++++++++++++ .../addon/components/modal/theme-change.js | 21 +++++++++++++++++++ .../admin-logs-staff-action-logs.js | 12 +++++------ .../controllers/modals/admin-theme-change.js | 17 --------------- .../templates/modal/admin-theme-change.hbs | 12 ----------- .../discourse/app/services/modal.js | 1 - .../stylesheets/common/base/history.scss | 2 +- 7 files changed, 41 insertions(+), 37 deletions(-) create mode 100644 app/assets/javascripts/admin/addon/components/modal/theme-change.hbs create mode 100644 app/assets/javascripts/admin/addon/components/modal/theme-change.js delete mode 100644 app/assets/javascripts/admin/addon/controllers/modals/admin-theme-change.js delete mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs diff --git a/app/assets/javascripts/admin/addon/components/modal/theme-change.hbs b/app/assets/javascripts/admin/addon/components/modal/theme-change.hbs new file mode 100644 index 00000000000..46039b6db6b --- /dev/null +++ b/app/assets/javascripts/admin/addon/components/modal/theme-change.hbs @@ -0,0 +1,13 @@ + + <:body> + {{html-safe this.diff}} + + <:footer> + + + \ No newline at end of file diff --git a/app/assets/javascripts/admin/addon/components/modal/theme-change.js b/app/assets/javascripts/admin/addon/components/modal/theme-change.js new file mode 100644 index 00000000000..ff54a362ff2 --- /dev/null +++ b/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; + } +} diff --git a/app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js b/app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js index 5b8727aa115..b11d92e0f65 100644 --- a/app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js +++ b/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", { - model, - admin: true, - modalClass: "history-modal", - }); - modal.loadDiff(); + this.modal.show(ThemeChangeModal, { model: { staffActionLog: model } }); } } diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-theme-change.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-theme-change.js deleted file mode 100644 index 56e85076019..00000000000 --- a/app/assets/javascripts/admin/addon/controllers/modals/admin-theme-change.js +++ /dev/null @@ -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); - }); - } -} diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs deleted file mode 100644 index ef49e660d4e..00000000000 --- a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs +++ /dev/null @@ -1,12 +0,0 @@ -
- - {{html-safe this.diff}} - -
- -
-
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/services/modal.js b/app/assets/javascripts/discourse/app/services/modal.js index cb2b12bd0ac..5892e3fbb43 100644 --- a/app/assets/javascripts/discourse/app/services/modal.js +++ b/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", diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss index da398a2f761..e665781972d 100644 --- a/app/assets/stylesheets/common/base/history.scss +++ b/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; }