DEV: Convert form template modals to new component-based API (#22196)

app/assets/javascripts/admin/addon/components/form-template/form.hbs

@@ -68,4 +68,11 @@
       />
     {{/if}}
   </div>
-</div>
+</div>
+
+{{#if this.showFormTemplateFormPreview}}
+  <Modal::FormTemplateFormPreview
+    @closeModal={{fn (mut this.showFormTemplateFormPreview) false}}
+    @content={{this.templateContent}}
+  />
+{{/if}}

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

@@ -14,6 +14,7 @@ export default class FormTemplateForm extends Component {
   @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 = [
     {
@@ -129,11 +130,7 @@ export default class FormTemplateForm extends Component {
 
     FormTemplate.validateTemplate(data)
       .then(() => {
-        return showModal("form-template-form-preview", {
-          model: {
-            content: this.templateContent,
-          },
-        });
+        this.showFormTemplateFormPreview = true;
       })
       .catch(popupAjaxError);
   }

app/assets/javascripts/admin/addon/components/form-template/row-item.hbs

@@ -10,7 +10,7 @@
       @title="admin.form_templates.list_table.actions.view"
       @icon="far-eye"
       @class="btn-view-template"
-      @action={{this.viewTemplate}}
+      @action={{fn (mut this.showViewTemplateModal) true}}
     />
     <DButton
       @title="admin.form_templates.list_table.actions.edit"
@@ -25,4 +25,12 @@
       @action={{this.deleteTemplate}}
     />
   </td>
-</tr>
+</tr>
+
+{{#if this.showViewTemplateModal}}
+  <Modal::CustomizeFormTemplateView
+    @closeModal={{fn (mut this.showViewTemplateModal) false}}
+    @model={{@template}}
+    @refreshModel={{@refreshModel}}
+  />
+{{/if}}

app/assets/javascripts/admin/addon/components/form-template/row-item.js

@@ -1,6 +1,5 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
-import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -17,14 +16,6 @@ export default class FormTemplateRowItem extends Component {
     );
   }
 
-  @action
-  viewTemplate() {
-    showModal("customize-form-template-view", {
-      model: this.args.template,
-      refreshModel: this.args.refreshModel,
-    });
-  }
-
   @action
   editTemplate() {
     this.router.transitionTo(

app/assets/javascripts/discourse/app/components/modal/customize-form-template-view.hbs

@@ -0,0 +1,37 @@
+<DModal
+  @title={{@model.name}}
+  @closeModal={{@closeModal}}
+  class="customize-form-template-view-modal"
+>
+  <:body>
+    <div class="control-group">
+      <DToggleSwitch
+        class="form-templates__preview-toggle"
+        @state={{this.showPreview}}
+        @label="admin.form_templates.view_template.toggle_preview"
+        {{on "click" this.togglePreview}}
+      />
+    </div>
+    {{#if this.showPreview}}
+      <FormTemplateField::Wrapper @id={{@model.id}} />
+    {{else}}
+      <HighlightedCode @lang="yaml" @code={{@model.template}} />
+    {{/if}}
+  </:body>
+
+  <:footer>
+    <DButton
+      class="btn-primary"
+      @action={{this.editTemplate}}
+      @icon="pencil-alt"
+      @label="admin.form_templates.view_template.edit"
+    />
+    <DModalCancel @close={{@closeModal}} />
+    <DButton
+      class="btn-danger"
+      @action={{this.deleteTemplate}}
+      @icon="trash-alt"
+      @label="admin.form_templates.view_template.delete"
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/customize-form-template-view.js

@@ -1,5 +1,4 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
+import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import I18n from "I18n";
@@ -7,9 +6,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import { ajax } from "discourse/lib/ajax";
 import { tracked } from "@glimmer/tracking";
 
-export default class AdminCustomizeFormTemplateView extends Controller.extend(
-  ModalFunctionality
-) {
+export default class CustomizeFormTemplateViewModal extends Component {
   @service router;
   @service dialog;
   @tracked showPreview = false;
@@ -35,7 +32,7 @@ export default class AdminCustomizeFormTemplateView extends Controller.extend(
           type: "DELETE",
         })
           .then(() => {
-            this.refreshModel();
+            this.args.refreshModel();
           })
           .catch(popupAjaxError);
       },

app/assets/javascripts/discourse/app/components/modal/form-template-form-preview.hbs

@@ -0,0 +1,9 @@
+<DModal
+  @closeModal={{@closeModal}}
+  @title={{i18n "admin.form_templates.preview_modal.title"}}
+  class="form-template-form-preview-modal"
+>
+  <:body>
+    <FormTemplateField::Wrapper @content={{@content}} />
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/controllers/form-template-form-preview.js

@@ -1,6 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default class AdminFormTemplateValidationOptions extends Controller.extend(
-  ModalFunctionality
-) {}

app/assets/javascripts/discourse/app/templates/modal/customize-form-template-view.hbs

@@ -1,33 +0,0 @@
-<DModalBody @rawTitle={{this.model.name}}>
-  <div class="control-group">
-    <DToggleSwitch
-      class="form-templates__preview-toggle"
-      @state={{this.showPreview}}
-      @label="admin.form_templates.view_template.toggle_preview"
-      {{on "click" this.togglePreview}}
-    />
-  </div>
-  {{#if this.showPreview}}
-    <FormTemplateField::Wrapper @id={{this.model.id}} />
-  {{else}}
-    <HighlightedCode @lang="yaml" @code={{this.model.template}} />
-  {{/if}}
-</DModalBody>
-<div class="modal-footer">
-  <DButton
-    class="btn-primary"
-    @action={{this.editTemplate}}
-    @icon="pencil-alt"
-    @label="admin.form_templates.view_template.edit"
-  />
-  <DButton
-    @action={{route-action "closeModal"}}
-    @label="admin.form_templates.view_template.close"
-  />
-  <DButton
-    class="btn-danger"
-    @action={{this.deleteTemplate}}
-    @icon="trash-alt"
-    @label="admin.form_templates.view_template.delete"
-  />
-</div>

app/assets/javascripts/discourse/app/templates/modal/form-template-form-preview.hbs

@@ -1,6 +0,0 @@
-<DModalBody
-  @class="form-templates__validation-options"
-  @title="admin.form_templates.preview_modal.title"
->
-  <FormTemplateField::Wrapper @content={{this.model.content}} />
-</DModalBody>