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">

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", {
+    return this.modal.show(FormTemplateValidationOptionsModal);
-      admin: true,
-    });
   }
 
   @action

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>

app/assets/javascripts/admin/addon/components/modal/form-template-validation-options.js

@@ -1,16 +1,13 @@
-import Controller from "@ember/controller";
+import Component from "@glimmer/component";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
 import I18n from "I18n";
 
-export default class AdminFormTemplateValidationOptions extends Controller.extend(
+const TABLE_HEADER_KEYS = ["key", "type", "description"];
-  ModalFunctionality
+const VALIDATION_KEYS = ["required", "minimum", "maximum", "pattern", "type"];
-) {
-  TABLE_HEADER_KEYS = ["key", "type", "description"];
-  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`),

app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs

@@ -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>

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",
 ];