DEV: Convert `download-calendar` modal to component-based API (#22837)

app/assets/javascripts/discourse/app/components/modal/download-calendar.hbs

@@ -1,14 +1,18 @@
-<div>
-  <DModalBody @title="download_calendar.title">
+<DModal
+  @title={{i18n "download_calendar.title"}}
+  class="download-calendar-modal"
+  @closeModal={{@closeModal}}
+>
+  <:body>
     <div class="control-group">
       <div class="ics">
         <label class="radio" for="ics">
           <RadioButton
+            id="ics"
             @name="select-calendar"
-            @id="ics"
             @value="ics"
             @selection={{this.selectedCalendar}}
-            @onChange={{action (mut this.selectedCalendar)}}
+            @onChange={{fn this.selectCalendar "ics"}}
           />
           {{i18n "download_calendar.save_ics"}}
         </label>
@@ -16,11 +20,11 @@
       <div class="google">
         <label class="radio" for="google">
           <RadioButton
+            id="google"
             @name="select-calendar"
-            @id="google"
             @value="google"
             @selection={{this.selectedCalendar}}
-            @onChange={{action (mut this.selectedCalendar)}}
+            @onChange={{fn this.selectCalendar "google"}}
           />
           {{i18n "download_calendar.save_google"}}
         </label>
@@ -34,13 +38,17 @@
       </label>
       <span>{{i18n "download_calendar.remember_explanation"}}</span>
     </div>
-  </DModalBody>
-  <div class="modal-footer">
+  </:body>
+  <:footer>
     <DButton
-      @class="btn-primary"
-      @action={{action "downloadCalendar"}}
+      class="btn-primary"
+      @action={{this.downloadCalendar}}
       @label="download_calendar.download"
     />
-    <DModalCancel @close={{route-action "closeModal"}} />
-  </div>
-</div>
+    <DButton
+      class="btn-flat d-modal-cancel"
+      @action={{@closeModal}}
+      @label="cancel"
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/download-calendar.js

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { downloadGoogle, downloadIcs } from "discourse/lib/download-calendar";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+
+export default class downloadCalendar extends Component {
+  @service currentUser;
+
+  @tracked selectedCalendar = "ics";
+  @tracked remember = false;
+
+  @action
+  downloadCalendar() {
+    if (this.remember) {
+      this.currentUser.set(
+        "user_option.default_calendar",
+        this.selectedCalendar
+      );
+      this.currentUser.save(["default_calendar"]);
+    }
+    if (this.selectedCalendar === "ics") {
+      downloadIcs(
+        this.args.model.calendar.title,
+        this.args.model.calendar.dates
+      );
+    } else {
+      downloadGoogle(
+        this.args.model.calendar.title,
+        this.args.model.calendar.dates
+      );
+    }
+    this.args.closeModal();
+  }
+
+  @action
+  selectCalendar(calendar) {
+    this.selectedCalendar = calendar;
+  }
+}

app/assets/javascripts/discourse/app/controllers/download-calendar.js

@@ -1,26 +0,0 @@
-import { action } from "@ember/object";
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { downloadGoogle, downloadIcs } from "discourse/lib/download-calendar";
-
-export default Controller.extend(ModalFunctionality, {
-  selectedCalendar: "ics",
-  remember: false,
-
-  @action
-  downloadCalendar() {
-    if (this.remember) {
-      this.currentUser.user_option.set(
-        "default_calendar",
-        this.selectedCalendar
-      );
-      this.currentUser.save(["default_calendar"]);
-    }
-    if (this.selectedCalendar === "ics") {
-      downloadIcs(this.model.title, this.model.dates);
-    } else {
-      downloadGoogle(this.model.title, this.model.dates);
-    }
-    this.send("closeModal");
-  },
-});

app/assets/javascripts/discourse/app/lib/download-calendar.js

@@ -1,6 +1,7 @@
 import User from "discourse/models/user";
-import showModal from "discourse/lib/show-modal";
 import getURL from "discourse-common/lib/get-url";
+import { getOwner } from "discourse-common/lib/get-owner";
+import downloadCalendarModal from "discourse/components/modal/download-calendar";
 
 export function downloadCalendar(title, dates) {
   const currentUser = User.current();
@@ -80,7 +81,8 @@ export function generateIcsData(title, dates) {
 }
 
 function _displayModal(title, dates) {
-  showModal("download-calendar", { model: { title, dates } });
+  const modal = getOwner(this).lookup("service:modal");
+  modal.show(downloadCalendarModal, { model: { calendar: { title, dates } } });
 }
 
 function _formatDateForGoogleApi(date) {

app/assets/javascripts/discourse/app/services/modal.js

@@ -23,7 +23,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-account",
   "create-invite-bulk",
   "create-invite",
-  "download-calendar",
   "edit-topic-timer",
   "edit-user-directory-columns",
   "explain-reviewable",