DEV: Update discourse-local-dates to new Modal API (#23560)

plugins/chat/assets/javascripts/discourse/components/chat-composer.js

@@ -5,7 +5,6 @@ import { tracked } from "@glimmer/tracking";
 import { cancel, next } from "@ember/runloop";
 import { cloneJSON } from "discourse-common/lib/object";
 import { chatComposerButtons } from "discourse/plugins/chat/discourse/lib/chat-composer-buttons";
-import showModal from "discourse/lib/show-modal";
 import TextareaInteractor from "discourse/plugins/chat/discourse/lib/textarea-interactor";
 import { getOwner } from "discourse-common/lib/get-owner";
 import userSearch from "discourse/lib/user-search";
@@ -166,7 +165,12 @@ export default class ChatComposer extends Component {
 
   @action
   insertDiscourseLocalDate() {
-    showModal("discourse-local-dates-create-modal").setProperties({
+    // JIT import because local-dates isn't necessarily enabled
+    const LocalDatesCreateModal =
+      require("discourse/plugins/discourse-local-dates/discourse/components/modal/local-dates-create").default;
+
+    this.modal.show(LocalDatesCreateModal, {
+      model: {
         insertDate: (markup) => {
           this.composer.textarea.addText(
             this.composer.textarea.getSelected(),
@@ -174,6 +178,7 @@ export default class ChatComposer extends Component {
           );
           this.composer.focus();
         },
+      },
     });
   }
 

plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.hbs

@@ -0,0 +1,200 @@
+<DModal
+  @title={{i18n "discourse_local_dates.title"}}
+  @closeModal={{@closeModal}}
+  class="discourse-local-dates-create-modal"
+>
+  <:body>
+    <div class="form">
+      {{#if this.isValid}}
+        {{#if this.timezoneIsDifferentFromUserTimezone}}
+          <div class="preview alert alert-info">
+            {{i18n "discourse_local_dates.create.form.current_timezone"}}
+            <b>{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
+          </div>
+        {{/if}}
+      {{else}}
+        <div class="validation-error alert alert-error">
+          {{i18n "discourse_local_dates.create.form.invalid_date"}}
+        </div>
+      {{/if}}
+
+      {{this.computeDate}}
+
+      <div class="date-time-configuration">
+        <div class="inputs-panel">
+          <div
+            class="date-time-control from
+              {{if this.fromSelected 'is-selected'}}
+              {{if this.fromFilled 'is-filled'}}"
+          >
+            {{d-icon "calendar-alt"}}
+            <DButton
+              @action={{this.focusFrom}}
+              @translatedLabel={{this.formattedFrom}}
+              id="from-date-time"
+              class="date-time"
+              autofocus
+            />
+          </div>
+
+          <div
+            class="date-time-control to
+              {{if this.toSelected 'is-selected'}}
+              {{if this.toFilled 'is-filled'}}"
+          >
+            {{d-icon "calendar-alt"}}
+            <DButton
+              @action={{this.focusTo}}
+              @translatedLabel={{this.formattedTo}}
+              class="date-time"
+            />
+            {{#if this.toFilled}}
+              <DButton
+                @action={{this.eraseToDateTime}}
+                @icon="times"
+                class="delete-to-date"
+              />
+            {{/if}}
+          </div>
+
+          {{#unless this.site.mobileView}}
+            <TimezoneInput
+              @options={{hash icon="globe"}}
+              @value={{this.timezone}}
+              @onChange={{action (mut this.timezone)}}
+            />
+          {{/unless}}
+        </div>
+
+        <div class="picker-panel">
+          <CalendarDateTimeInput
+            @datePickerId="local-date-create-form"
+            @date={{this.selectedDate}}
+            @time={{this.selectedTime}}
+            @minDate={{this.minDate}}
+            @timeFormat={{this.timeFormat}}
+            @dateFormat={{this.dateFormat}}
+            @onChangeDate={{action this.changeSelectedDate}}
+            @onChangeTime={{action this.changeSelectedTime}}
+          />
+        </div>
+
+        {{#if this.site.mobileView}}
+          <TimezoneInput
+            @value={{this.timezone}}
+            @options={{hash icon="globe"}}
+            @onChange={{action (mut this.timezone)}}
+          />
+        {{/if}}
+      </div>
+
+      {{#if this.advancedMode}}
+        <div class="advanced-options">
+          {{#unless this.isRange}}
+            <div class="control-group recurrence">
+              <label class="control-label">
+                {{i18n "discourse_local_dates.create.form.recurring_title"}}
+              </label>
+              <p>{{html-safe
+                  (i18n
+                    "discourse_local_dates.create.form.recurring_description"
+                  )
+                }}</p>
+              <div class="controls">
+                <ComboBox
+                  @content={{this.recurringOptions}}
+                  @class="recurrence-input"
+                  @value={{this.recurring}}
+                  @onChange={{action (mut this.recurring)}}
+                  @options={{hash
+                    none="discourse_local_dates.create.form.recurring_none"
+                  }}
+                />
+              </div>
+            </div>
+          {{/unless}}
+
+          <div class="control-group timezones">
+            <label>{{i18n
+                "discourse_local_dates.create.form.timezones_title"
+              }}</label>
+            <p>{{i18n
+                "discourse_local_dates.create.form.timezones_description"
+              }}</p>
+            <div class="controls">
+              <MultiSelect
+                @valueProperty={{null}}
+                @nameProperty={{null}}
+                @class="timezones-input"
+                @content={{this.allTimezones}}
+                @value={{this.timezones}}
+                @options={{hash allowAny=false maximum=5}}
+              />
+            </div>
+          </div>
+
+          <div class="control-group format">
+            <label>{{i18n
+                "discourse_local_dates.create.form.format_title"
+              }}</label>
+            <p>
+              {{i18n "discourse_local_dates.create.form.format_description"}}
+              <a
+                target="_blank"
+                href="https://momentjs.com/docs/#/parsing/string-format/"
+                rel="noopener noreferrer"
+              >
+                {{d-icon "question-circle"}}
+              </a>
+            </p>
+            <div class="controls">
+              <TextField @value={{this.format}} @class="format-input" />
+            </div>
+          </div>
+          <div class="control-group">
+            <ul class="formats">
+              {{#each this.previewedFormats as |previewedFormat|}}
+                <li class="format">
+                  <a
+                    class="moment-format"
+                    href
+                    {{on "click" (fn this.updateFormat previewedFormat.format)}}
+                  >
+                    {{previewedFormat.format}}
+                  </a>
+                  <span class="previewed-format">
+                    {{previewedFormat.preview}}
+                  </span>
+                </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+      {{/if}}
+    </div>
+  </:body>
+
+  <:footer>
+
+    {{#if this.isValid}}
+      <DButton
+        @action={{this.save}}
+        @label="discourse_local_dates.create.form.insert"
+        class="btn-primary"
+      />
+    {{/if}}
+
+    <DButton
+      @action={{this.cancel}}
+      @translatedLabel={{i18n "cancel"}}
+      class="btn-flat"
+    />
+
+    <DButton
+      @action={{this.toggleAdvancedMode}}
+      @icon="cog"
+      @label={{this.toggleModeBtnLabel}}
+      class="btn-default advanced-mode-btn"
+    />
+  </:footer>
+</DModal>

plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js

@@ -10,7 +10,6 @@ import { cookAsync } from "discourse/lib/text";
 import { notEmpty } from "@ember/object/computed";
 import { propertyNotEqual } from "discourse/lib/computed";
 import { schedule } from "@ember/runloop";
-import { getOwner } from "discourse-common/lib/get-owner";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
 
@@ -369,17 +368,13 @@ export default Component.extend({
     const markup = this.markup;
 
     if (markup) {
-      this._closeModal();
+      this.closeModal();
-      this.insertDate(markup);
+      this.model.insertDate(markup);
     }
   },
 
   @action
   cancel() {
-    this._closeModal();
+    this.closeModal();
-  },
-
-  _closeModal() {
-    getOwner(this).lookup("service:modal").close();
   },
 });

plugins/discourse-local-dates/assets/javascripts/discourse/controllers/discourse-local-dates-create-modal.js

@@ -1,21 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { schedule } from "@ember/runloop";
-
-export default Controller.extend(ModalFunctionality, {
-  onShow() {
-    schedule("afterRender", () => {
-      const fromButton = document.getElementById("from-date-time");
-      fromButton && fromButton.focus();
-    });
-  },
-
-  onClose() {
-    schedule("afterRender", () => {
-      const localDatesBtn = document.querySelector(
-        ".d-editor-button-bar .local-dates.btn"
-      );
-      localDatesBtn && localDatesBtn.focus();
-    });
-  },
-});

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -1,194 +0,0 @@
-<DModalBody
-  @title="discourse_local_dates.title"
-  @class="discourse-local-dates-create-modal"
-  @style="overflow: auto"
->
-  <div class="form">
-    {{#if this.isValid}}
-      {{#if this.timezoneIsDifferentFromUserTimezone}}
-        <div class="preview alert alert-info">
-          {{i18n "discourse_local_dates.create.form.current_timezone"}}
-          <b>{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
-        </div>
-      {{/if}}
-    {{else}}
-      <div class="validation-error alert alert-error">
-        {{i18n "discourse_local_dates.create.form.invalid_date"}}
-      </div>
-    {{/if}}
-
-    {{this.computeDate}}
-
-    <div class="date-time-configuration">
-      <div class="inputs-panel">
-        <div
-          class="date-time-control from
-            {{if this.fromSelected 'is-selected'}}
-            {{if this.fromFilled 'is-filled'}}"
-        >
-          {{d-icon "calendar-alt"}}
-          <DButton
-            @action={{this.focusFrom}}
-            @translatedLabel={{this.formattedFrom}}
-            id="from-date-time"
-            class="date-time"
-          />
-        </div>
-
-        <div
-          class="date-time-control to
-            {{if this.toSelected 'is-selected'}}
-            {{if this.toFilled 'is-filled'}}"
-        >
-          {{d-icon "calendar-alt"}}
-          <DButton
-            @action={{this.focusTo}}
-            @translatedLabel={{this.formattedTo}}
-            class="date-time"
-          />
-          {{#if this.toFilled}}
-            <DButton
-              @action={{this.eraseToDateTime}}
-              @icon="times"
-              class="delete-to-date"
-            />
-          {{/if}}
-        </div>
-
-        {{#unless this.site.mobileView}}
-          <TimezoneInput
-            @options={{hash icon="globe"}}
-            @value={{this.timezone}}
-            @onChange={{action (mut this.timezone)}}
-          />
-        {{/unless}}
-      </div>
-
-      <div class="picker-panel">
-        <CalendarDateTimeInput
-          @datePickerId="local-date-create-form"
-          @date={{this.selectedDate}}
-          @time={{this.selectedTime}}
-          @minDate={{this.minDate}}
-          @timeFormat={{this.timeFormat}}
-          @dateFormat={{this.dateFormat}}
-          @onChangeDate={{action this.changeSelectedDate}}
-          @onChangeTime={{action this.changeSelectedTime}}
-        />
-      </div>
-
-      {{#if this.site.mobileView}}
-        <TimezoneInput
-          @value={{this.timezone}}
-          @options={{hash icon="globe"}}
-          @onChange={{action (mut this.timezone)}}
-        />
-      {{/if}}
-    </div>
-
-    {{#if this.advancedMode}}
-      <div class="advanced-options">
-        {{#unless this.isRange}}
-          <div class="control-group recurrence">
-            <label class="control-label">
-              {{i18n "discourse_local_dates.create.form.recurring_title"}}
-            </label>
-            <p>{{html-safe
-                (i18n "discourse_local_dates.create.form.recurring_description")
-              }}</p>
-            <div class="controls">
-              <ComboBox
-                @content={{this.recurringOptions}}
-                @class="recurrence-input"
-                @value={{this.recurring}}
-                @onChange={{action (mut this.recurring)}}
-                @options={{hash
-                  none="discourse_local_dates.create.form.recurring_none"
-                }}
-              />
-            </div>
-          </div>
-        {{/unless}}
-
-        <div class="control-group timezones">
-          <label>{{i18n
-              "discourse_local_dates.create.form.timezones_title"
-            }}</label>
-          <p>{{i18n
-              "discourse_local_dates.create.form.timezones_description"
-            }}</p>
-          <div class="controls">
-            <MultiSelect
-              @valueProperty={{null}}
-              @nameProperty={{null}}
-              @class="timezones-input"
-              @content={{this.allTimezones}}
-              @value={{this.timezones}}
-              @options={{hash allowAny=false maximum=5}}
-            />
-          </div>
-        </div>
-
-        <div class="control-group format">
-          <label>{{i18n
-              "discourse_local_dates.create.form.format_title"
-            }}</label>
-          <p>
-            {{i18n "discourse_local_dates.create.form.format_description"}}
-            <a
-              target="_blank"
-              href="https://momentjs.com/docs/#/parsing/string-format/"
-              rel="noopener noreferrer"
-            >
-              {{d-icon "question-circle"}}
-            </a>
-          </p>
-          <div class="controls">
-            <TextField @value={{this.format}} @class="format-input" />
-          </div>
-        </div>
-        <div class="control-group">
-          <ul class="formats">
-            {{#each this.previewedFormats as |previewedFormat|}}
-              <li class="format">
-                <a
-                  class="moment-format"
-                  href
-                  {{on "click" (fn this.updateFormat previewedFormat.format)}}
-                >
-                  {{previewedFormat.format}}
-                </a>
-                <span class="previewed-format">
-                  {{previewedFormat.preview}}
-                </span>
-              </li>
-            {{/each}}
-          </ul>
-        </div>
-      </div>
-    {{/if}}
-  </div>
-</DModalBody>
-
-<div class="modal-footer discourse-local-dates-create-modal-footer">
-  {{#if this.isValid}}
-    <DButton
-      @action={{this.save}}
-      @label="discourse_local_dates.create.form.insert"
-      class="btn-primary"
-    />
-  {{/if}}
-
-  <DButton
-    @action={{this.cancel}}
-    @translatedLabel={{i18n "cancel"}}
-    class="btn-flat"
-  />
-
-  <DButton
-    @action={{this.toggleAdvancedMode}}
-    @icon="cog"
-    @label={{this.toggleModeBtnLabel}}
-    class="btn-default advanced-mode-btn"
-  />
-</div>

plugins/discourse-local-dates/assets/javascripts/discourse/templates/modal/discourse-local-dates-create-modal.hbs

@@ -1,4 +0,0 @@
-<DiscourseLocalDatesCreateForm
-  @config={{this.config}}
-  @insertDate={{this.insertDate}}
-/>

plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js

@@ -2,7 +2,7 @@ import deprecated from "discourse-common/lib/deprecated";
 import { getOwner } from "discourse-common/lib/get-owner";
 import LocalDateBuilder from "../lib/local-date-builder";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import showModal from "discourse/lib/show-modal";
+import LocalDatesCreateModal from "../discourse/components/modal/local-dates-create";
 import { downloadCalendar } from "discourse/lib/download-calendar";
 import { renderIcon } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
@@ -12,6 +12,7 @@ import {
   addTextDecorateCallback,
 } from "discourse/lib/to-markdown";
 import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
+import { inject as service } from "@ember/service";
 
 // Import applyLocalDates from discourse/lib/local-dates instead
 export function applyLocalDates(dates, siteSettings) {
@@ -173,13 +174,16 @@ function initializeDiscourseLocalDates(api) {
   });
 
   api.modifyClass("component:d-editor", {
+    modal: service(),
     pluginId: "discourse-local-dates",
     actions: {
       insertDiscourseLocalDate(toolbarEvent) {
-        showModal("discourse-local-dates-create-modal").setProperties({
+        this.modal.show(LocalDatesCreateModal, {
+          model: {
             insertDate: (markup) => {
               toolbarEvent.addText(markup);
             },
+          },
         });
       },
     },

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -48,7 +48,7 @@ div[data-tippy-root] {
   }
 }
 
-.discourse-local-dates-create-modal-footer {
+.discourse-local-dates-create-modal .modal-footer {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -69,6 +69,7 @@ div[data-tippy-root] {
   display: flex;
   flex-direction: row;
   padding: 0.5em;
+  overflow: auto;
 
   .form {
     flex: 1 0 0px;