From f3b7351ff6a96d33e565bcc87f43365c14d6891e Mon Sep 17 00:00:00 2001 From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Date: Wed, 26 Jul 2023 12:46:02 -0500 Subject: [PATCH] DEV: Convert `theme-upload` modal to component-based API (#22699) --- .../addon/components/theme-upload-add.hbs | 47 ++++++ .../addon/components/theme-upload-add.js | 112 ++++++++++++++ .../admin-customize-themes-show.js | 10 +- .../controllers/modals/admin-add-upload.js | 146 ------------------ .../templates/modal/admin-add-upload.hbs | 37 ----- .../discourse/app/services/modal.js | 1 - 6 files changed, 167 insertions(+), 186 deletions(-) create mode 100644 app/assets/javascripts/admin/addon/components/theme-upload-add.hbs create mode 100644 app/assets/javascripts/admin/addon/components/theme-upload-add.js delete mode 100644 app/assets/javascripts/admin/addon/controllers/modals/admin-add-upload.js delete mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs diff --git a/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs b/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs new file mode 100644 index 00000000000..08ee5addf15 --- /dev/null +++ b/app/assets/javascripts/admin/addon/components/theme-upload-add.hbs @@ -0,0 +1,47 @@ + + <:body> +
+
+ + +
+
+ + +
+ {{#if this.fileSelected}} + {{#if this.errorMessage}} + {{this.errorMessage}} + {{/if}} + {{/if}} +
+ + <:footer> + + + + \ No newline at end of file diff --git a/app/assets/javascripts/admin/addon/components/theme-upload-add.js b/app/assets/javascripts/admin/addon/components/theme-upload-add.js new file mode 100644 index 00000000000..5a8a359f130 --- /dev/null +++ b/app/assets/javascripts/admin/addon/components/theme-upload-add.js @@ -0,0 +1,112 @@ +import Component from "@glimmer/component"; +import { action } from "@ember/object"; +import { tracked } from "@glimmer/tracking"; +import I18n from "I18n"; +import { ajax } from "discourse/lib/ajax"; +import { isEmpty } from "@ember/utils"; + +const THEME_FIELD_VARIABLE_TYPE_IDS = [2, 3, 4]; +const SCSS_VARIABLE_NAMES = [ + // common/foundation/colors.scss + "primary", + "secondary", + "tertiary", + "quaternary", + "header_background", + "header_primary", + "highlight", + "danger", + "success", + "love", + // common/foundation/math.scss + "E", + "PI", + "LN2", + "SQRT2", + // common/foundation/variables.scss + "small-width", + "medium-width", + "large-width", + "google", + "instagram", + "facebook", + "cas", + "twitter", + "github", + "base-font-size", + "base-line-height", + "base-font-family", + "primary-low", + "primary-medium", + "secondary-low", + "secondary-medium", + "tertiary-low", + "quaternary-low", + "highlight-low", + "highlight-medium", + "danger-low", + "danger-medium", + "success-low", + "love-low", +]; + +export default class ThemeUploadAdd extends Component { + @tracked name; + @tracked fileSelected = false; + @tracked flash; + + get disabled() { + return this.errorMessage && this.fileSelected; + } + + get errorMessage() { + if (!this.name) { + return; + } else if (!this.name.match(/^[a-z_][a-z0-9_-]*$/i)) { + return I18n.t("admin.customize.theme.variable_name_error.invalid_syntax"); + } else if (SCSS_VARIABLE_NAMES.includes(name.toLowerCase())) { + return I18n.t("admin.customize.theme.variable_name_error.no_overwrite"); + } else if ( + this.args.model.themeFields.some( + (tf) => + THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && + this.name === tf.name + ) + ) { + return I18n.t("admin.customize.theme.variable_name_error.must_be_unique"); + } + } + + @action + updateName(e) { + if (isEmpty(this.name)) { + this.name = e.target.files[0].name.split(".")[0]; + } + this.fileSelected = e.target.files[0]; + } + + @action + async upload() { + const file = document.getElementById("file-input").files[0]; + const options = { + type: "POST", + processData: false, + contentType: false, + data: new FormData(), + }; + options.data.append("file", file); + + try { + const result = await ajax("/admin/themes/upload_asset", options); + const upload = { + upload_id: result.upload_id, + name: this.name, + original_filename: file.name, + }; + this.args.model.addUpload(upload); + this.args.closeModal(); + } catch (e) { + this.flash = e.jqXHR.responseJSON.errors.join(". "); + } + } +} diff --git a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-show.js b/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-show.js index 9fce34e678c..93f8c56db4b 100644 --- a/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-show.js +++ b/app/assets/javascripts/admin/addon/controllers/admin-customize-themes-show.js @@ -14,14 +14,15 @@ import ThemeSettings from "admin/models/theme-settings"; import discourseComputed from "discourse-common/utils/decorators"; import { makeArray } from "discourse-common/lib/helpers"; import { popupAjaxError } from "discourse/lib/ajax-error"; -import showModal from "discourse/lib/show-modal"; import { url } from "discourse/lib/computed"; +import ThemeUploadAddModal from "../components/theme-upload-add"; const THEME_UPLOAD_VAR = 2; export default class AdminCustomizeThemesShowController extends Controller { @service dialog; @service router; + @service modal; editRouteName = "adminCustomizeThemes.edit"; @@ -274,7 +275,12 @@ export default class AdminCustomizeThemesShowController extends Controller { @action addUploadModal() { - showModal("admin-add-upload", { admin: true, name: "" }); + this.modal.show(ThemeUploadAddModal, { + model: { + themeFields: this.model.theme_fields, + addUpload: this.addUpload, + }, + }); } @action diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-add-upload.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-add-upload.js deleted file mode 100644 index f1adac356a4..00000000000 --- a/app/assets/javascripts/admin/addon/controllers/modals/admin-add-upload.js +++ /dev/null @@ -1,146 +0,0 @@ -import { action } from "@ember/object"; -import { and, not } from "@ember/object/computed"; -import Controller, { inject as controller } from "@ember/controller"; -import discourseComputed from "discourse-common/utils/decorators"; -import { observes } from "@ember-decorators/object"; -import I18n from "I18n"; -import ModalFunctionality from "discourse/mixins/modal-functionality"; -import { ajax } from "discourse/lib/ajax"; -import { isEmpty } from "@ember/utils"; -import { popupAjaxError } from "discourse/lib/ajax-error"; - -const THEME_FIELD_VARIABLE_TYPE_IDS = [2, 3, 4]; - -const SCSS_VARIABLE_NAMES = [ - // common/foundation/colors.scss - "primary", - "secondary", - "tertiary", - "quaternary", - "header_background", - "header_primary", - "highlight", - "danger", - "success", - "love", - // common/foundation/math.scss - "E", - "PI", - "LN2", - "SQRT2", - // common/foundation/variables.scss - "small-width", - "medium-width", - "large-width", - "google", - "instagram", - "facebook", - "cas", - "twitter", - "github", - "base-font-size", - "base-line-height", - "base-font-family", - "primary-low", - "primary-medium", - "secondary-low", - "secondary-medium", - "tertiary-low", - "quaternary-low", - "highlight-low", - "highlight-medium", - "danger-low", - "danger-medium", - "success-low", - "love-low", -]; - -export default class AdminAddUploadController extends Controller.extend( - ModalFunctionality -) { - @controller adminCustomizeThemesShow; - - uploadUrl = "/admin/themes/upload_asset"; - - @and("nameValid", "fileSelected") enabled; - @not("enabled") disabled; - - onShow() { - this.set("name", null); - this.set("fileSelected", false); - } - - @discourseComputed("name", "adminCustomizeThemesShow.model.theme_fields") - errorMessage(name, themeFields) { - if (name) { - if (!name.match(/^[a-z_][a-z0-9_-]*$/i)) { - return I18n.t( - "admin.customize.theme.variable_name_error.invalid_syntax" - ); - } else if (SCSS_VARIABLE_NAMES.includes(name.toLowerCase())) { - return I18n.t("admin.customize.theme.variable_name_error.no_overwrite"); - } else if ( - themeFields.some( - (tf) => - THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && - name === tf.name - ) - ) { - return I18n.t( - "admin.customize.theme.variable_name_error.must_be_unique" - ); - } - } - - return null; - } - - @discourseComputed("errorMessage") - nameValid(errorMessage) { - return null === errorMessage; - } - - @observes("name") - uploadChanged() { - const file = $("#file-input")[0]; - this.set("fileSelected", file && file.files[0]); - } - - @action - updateName() { - let name = this.name; - if (isEmpty(name)) { - name = $("#file-input")[0].files[0].name; - this.set("name", name.split(".")[0]); - } - this.uploadChanged(); - } - - @action - upload() { - const file = $("#file-input")[0].files[0]; - - const options = { - type: "POST", - processData: false, - contentType: false, - data: new FormData(), - }; - - options.data.append("file", file); - - ajax(this.uploadUrl, options) - .then((result) => { - const upload = { - upload_id: result.upload_id, - name: this.name, - original_filename: file.name, - }; - this.adminCustomizeThemesShow.send("addUpload", upload); - this.send("closeModal"); - }) - .catch((e) => { - popupAjaxError(e); - }); - } -} diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs deleted file mode 100644 index 2cb57fdf1e8..00000000000 --- a/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs +++ /dev/null @@ -1,37 +0,0 @@ - -
-
- - -
-
- - -
- {{#if this.fileSelected}} - {{#if this.errorMessage}} - {{this.errorMessage}} - {{/if}} - {{/if}} -
- - -
- - -
\ 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 6b25397d620..f9874aaeba4 100644 --- a/app/assets/javascripts/discourse/app/services/modal.js +++ b/app/assets/javascripts/discourse/app/services/modal.js @@ -54,7 +54,6 @@ const KNOWN_LEGACY_MODALS = [ "tag-upload", "topic-summary", "user-status", - "admin-add-upload", "admin-merge-users-prompt", "admin-start-backup", "admin-watched-word-test",