DEV: Update keyboard shortcuts to glimmer and new modal api (#22422)

app/assets/javascripts/discourse/app/components/modal/keyboard-shortcuts-help.hbs

@@ -0,0 +1,27 @@
+<DModal
+  @title={{i18n "keyboard_shortcuts_help.title"}}
+  @closeModal={{@closeModal}}
+  class="keyboard-shortcuts-modal"
+>
+  <:body>
+    <div id="keyboard-shortcuts-help">
+      <div class="keyboard-shortcuts-help__container">
+        {{#each-in this.shortcuts as |category shortcutCategory|}}
+          <section
+            class="shortcut-category span-{{shortcutCategory.count}}
+              shortcut-category-{{category}}"
+          >
+            <h4>{{i18n
+                (concat "keyboard_shortcuts_help." category ".title")
+              }}</h4>
+            <ul>
+              {{#each-in shortcutCategory.shortcuts as |name shortcut|}}
+                <li>{{html-safe shortcut}}</li>
+              {{/each-in}}
+            </ul>
+          </section>
+        {{/each-in}}
+      </div>
+    </div>
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/keyboard-shortcuts-help.js

@@ -1,8 +1,8 @@
-import Controller from "@ember/controller";
+import Component from "@glimmer/component";
 import I18n from "I18n";
 import { translateModKey } from "discourse/lib/utilities";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { extraKeyboardShortcutsHelp } from "discourse/lib/keyboard-shortcuts";
+import { inject as service } from "@ember/service";
 
 const KEY = "keyboard_shortcuts_help";
 const SHIFT = I18n.t("shortcut_modifier_key.shift");
@@ -59,17 +59,10 @@ function buildShortcut(
   return I18n.t(`${KEY}.${key}`, context);
 }
 
-export default Controller.extend(ModalFunctionality, {
-  onShow() {
-    this.set("modal.modalClass", "keyboard-shortcuts-modal");
-    this._defineShortcuts();
-  },
+export default class KeyboardShortcutsHelp extends Component {
+  @service currentUser;
 
-  onClose() {
-    this.set("shortcuts", null);
-  },
-
-  _defineShortcuts() {
+  get shortcuts() {
     let shortcuts = {
       jump_to: { shortcuts: this._buildJumpToSection() },
       application: {
@@ -248,8 +241,8 @@ export default Controller.extend(ModalFunctionality, {
     };
     this._buildExtraShortcuts(shortcuts);
     this._addCountsToShortcutCategories(shortcuts);
-    this.set("shortcuts", shortcuts);
-  },
+    return shortcuts;
+  }
 
   _buildExtraShortcuts(shortcuts) {
     for (const [category, helps] of Object.entries(
@@ -270,7 +263,7 @@ export default Controller.extend(ModalFunctionality, {
         );
       });
     }
-  },
+  }
 
   _addCountsToShortcutCategories(shortcuts) {
     for (const [category, shortcutCategory] of Object.entries(shortcuts)) {
@@ -278,7 +271,7 @@ export default Controller.extend(ModalFunctionality, {
         shortcutCategory.shortcuts
       ).length;
     }
-  },
+  }
 
   _transformExtraDefinition(definition) {
     if (definition.keys1) {
@@ -300,7 +293,7 @@ export default Controller.extend(ModalFunctionality, {
       );
     }
     return definition;
-  },
+  }
 
   _translateKeys(string) {
     for (const [matcher, replacement] of Object.entries(
@@ -309,7 +302,7 @@ export default Controller.extend(ModalFunctionality, {
       string = string.replace(matcher, replacement);
     }
     return string;
-  },
+  }
 
   _buildJumpToSection() {
     const shortcuts = {
@@ -333,5 +326,5 @@ export default Controller.extend(ModalFunctionality, {
       previous: buildShortcut("jump_to.previous", { keys1: ["g", "k"] }),
     });
     return shortcuts;
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/routes/application.js

@@ -13,6 +13,7 @@ import mobile from "discourse/lib/mobile";
 import { inject as service } from "@ember/service";
 import { setting } from "discourse/lib/computed";
 import showModal from "discourse/lib/show-modal";
+import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
 
 function unlessReadOnly(method, message) {
   return function () {
@@ -146,9 +147,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     },
 
     showKeyboardShortcutsHelp() {
-      showModal("keyboard-shortcuts-help", {
-        title: "keyboard_shortcuts_help.title",
-      });
+      this.modal.show(KeyboardShortcutsHelp);
     },
 
     // Close the current modal, and destroy its state.

app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs

@@ -1,17 +0,0 @@
-<DModalBody @id="keyboard-shortcuts-help">
-  <div class="keyboard-shortcuts-help__container">
-    {{#each-in this.shortcuts as |category shortcutCategory|}}
-      <section
-        class="shortcut-category span-{{shortcutCategory.count}}
-          shortcut-category-{{category}}"
-      >
-        <h4>{{i18n (concat "keyboard_shortcuts_help." category ".title")}}</h4>
-        <ul>
-          {{#each-in shortcutCategory.shortcuts as |name shortcut|}}
-            <li>{{html-safe shortcut}}</li>
-          {{/each-in}}
-        </ul>
-      </section>
-    {{/each-in}}
-  </div>
-</DModalBody>