From c22e2de2d8f3003917f98ff86bc8a7c106f104fb Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Fri, 25 Aug 2023 07:02:54 -0500
Subject: [PATCH] DEV: Convert `form-template-validation-options` modal to
 component-based API (#23236)

<img width="794" alt="Screenshot 2023-08-25 at 6 38 21 AM" src="https://github.com/discourse/discourse/assets/50783505/f5cf6fa0-7a2f-4e38-93e2-657fb01f6703">
---
 .../addon/components/form-template/form.js    |  9 ++++---
 .../form-template-validation-options.hbs      | 26 +++++++++++++++++++
 .../form-template-validation-options.js}      | 15 +++++------
 ...admin-form-template-validation-options.hbs | 23 ----------------
 .../discourse/app/services/modal.js           |  1 -
 5 files changed, 37 insertions(+), 37 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.hbs
 rename app/assets/javascripts/admin/addon/{controllers/modals/admin-form-template-validation-options.js => components/modal/form-template-validation-options.js} (58%)
 delete mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs

diff --git a/app/assets/javascripts/admin/addon/components/form-template/form.js b/app/assets/javascripts/admin/addon/components/form-template/form.js
index 0666eb26e14..242568826d0 100644
--- a/app/assets/javascripts/admin/addon/components/form-template/form.js
+++ b/app/assets/javascripts/admin/addon/components/form-template/form.js
@@ -6,15 +6,18 @@ import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { templateFormFields } from "admin/lib/template-form-fields";
 import FormTemplate from "admin/models/form-template";
-import showModal from "discourse/lib/show-modal";
+import FormTemplateValidationOptionsModal from "admin/components/modal/form-template-validation-options";
 
 export default class FormTemplateForm extends Component {
   @service router;
   @service dialog;
+  @service modal;
+
   @tracked formSubmitted = false;
   @tracked templateContent = this.args.model?.template || "";
   @tracked templateName = this.args.model?.name || "";
   @tracked showFormTemplateFormPreview;
+
   isEditing = this.args.model?.id ? true : false;
   quickInsertFields = [
     {
@@ -112,9 +115,7 @@ export default class FormTemplateForm extends Component {
 
   @action
   showValidationOptionsModal() {
-    return showModal("admin-form-template-validation-options", {
-      admin: true,
-    });
+    return this.modal.show(FormTemplateValidationOptionsModal);
   }
 
   @action
diff --git a/app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.hbs b/app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.hbs
new file mode 100644
index 00000000000..5bd60b89110
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.hbs
@@ -0,0 +1,26 @@
+<DModal
+  class="form-templates__validation-options admin-form-template-validation-options-modal"
+  @title={{i18n "admin.form_templates.validations_modal.modal_title"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <table>
+      <thead>
+        <tr>
+          {{#each this.tableHeaders as |header|}}
+            <th>{{header}}</th>
+          {{/each}}
+        </tr>
+      </thead>
+      <tbody>
+        {{#each this.validations as |item|}}
+          <tr>
+            <td><pre>{{item.key}}</pre></td>
+            <td>{{item.type}}</td>
+            <td>{{item.description}}</td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </:body>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js b/app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.js
similarity index 58%
rename from app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js
rename to app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.js
index 0b8457b16a4..de4e76be51b 100644
--- a/app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js
+++ b/app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.js
@@ -1,16 +1,13 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
+import Component from "@glimmer/component";
 import I18n from "I18n";
 
-export default class AdminFormTemplateValidationOptions extends Controller.extend(
-  ModalFunctionality
-) {
-  TABLE_HEADER_KEYS = ["key", "type", "description"];
-  VALIDATION_KEYS = ["required", "minimum", "maximum", "pattern", "type"];
+const TABLE_HEADER_KEYS = ["key", "type", "description"];
+const VALIDATION_KEYS = ["required", "minimum", "maximum", "pattern", "type"];
 
+export default class FormTemplateValidationOptions extends Component {
   get tableHeaders() {
     const translatedHeaders = [];
-    this.TABLE_HEADER_KEYS.forEach((header) => {
+    TABLE_HEADER_KEYS.forEach((header) => {
       translatedHeaders.push(
         I18n.t(`admin.form_templates.validations_modal.table_headers.${header}`)
       );
@@ -22,7 +19,7 @@ export default class AdminFormTemplateValidationOptions extends Controller.exten
   get validations() {
     const translatedValidations = [];
     const prefix = "admin.form_templates.validations_modal.validations";
-    this.VALIDATION_KEYS.forEach((validation) => {
+    VALIDATION_KEYS.forEach((validation) => {
       translatedValidations.push({
         key: I18n.t(`${prefix}.${validation}.key`),
         type: I18n.t(`${prefix}.${validation}.type`),
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs
deleted file mode 100644
index 330dd1cebdc..00000000000
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-<DModalBody
-  @class="form-templates__validation-options"
-  @title="admin.form_templates.validations_modal.modal_title"
->
-  <table>
-    <thead>
-      <tr>
-        {{#each this.tableHeaders as |header|}}
-          <th>{{header}}</th>
-        {{/each}}
-      </tr>
-    </thead>
-    <tbody>
-      {{#each this.validations as |item|}}
-        <tr>
-          <td><pre>{{item.key}}</pre></td>
-          <td>{{item.type}}</td>
-          <td>{{item.description}}</td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</DModalBody>
\ 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 7af846700e0..497f8b5d57e 100644
--- a/app/assets/javascripts/discourse/app/services/modal.js
+++ b/app/assets/javascripts/discourse/app/services/modal.js
@@ -37,7 +37,6 @@ const KNOWN_LEGACY_MODALS = [
   "share-and-invite",
   "tag-upload",
   "admin-reseed",
-  "admin-form-template-validation-options",
   "admin-uploaded-image-list",
 ];