DEV: Update modal to Component API (#20)

- update modal to component API
- add updated linting rules

<img width="701" alt="Screenshot 2023-12-12 at 2 49 13 PM" src="https://github.com/discourse/discourse-jitsi/assets/50783505/7fca0d4a-5579-412a-844c-9b6c4bf1e0e5">

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint");

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.js

@@ -1,4 +1 @@
-module.exports = {
-  plugins: ["ember-template-lint-plugin-discourse"],
-  extends: "discourse:recommended",
-};
+module.exports = require("@discourse/lint-configs/template-lint");

javascripts/discourse/components/modal/insert-jitsi.gjs

@@ -0,0 +1,102 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import TextField from "discourse/components/text-field";
+import themePrefix from "discourse/helpers/theme-prefix";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class InsertJitsi extends Component {
+  @tracked mobileIframe = true;
+  @tracked desktopIframe = true;
+  @tracked jitsiRoom = "";
+  @tracked buttonText = "";
+
+  keyDown(e) {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
+
+  randomID() {
+    return Math.random().toString(36).slice(-8);
+  }
+
+  @action
+  insert() {
+    const btnTxt = this.buttonText ? ` label="${this.buttonText}"` : "";
+    const roomID = this.jitsiRoom || this.randomID();
+    const text = `[wrap=discourse-jitsi room="${roomID}"${btnTxt} mobileIframe="${this.mobileIframe}" desktopIframe="${this.desktopIframe}"][/wrap]`;
+    this.args.model.toolbarEvent.addText(text);
+
+    this.args.closeModal();
+  }
+
+  @action
+  cancel() {
+    this.args.closeModal();
+  }
+
+  <template>
+    <DModal
+      @title={{i18n (themePrefix "modal.title")}}
+      class="insert-jitsi"
+      @closeModal={{@closeModal}}
+    >
+      <:body>
+        <div class="insert-jitsi-form">
+          <div class="insert-jitsi-input">
+            <label>
+              {{i18n (themePrefix "room_label")}}
+            </label>
+            <TextField
+              @value={{this.jitsiRoom}}
+              @autofocus="autofocus"
+              @autocomplete="off"
+            />
+            <div class="desc">{{i18n
+                (themePrefix "modal.room_field_description")
+              }}</div>
+          </div>
+
+          <div class="insert-jitsi-input">
+            <label>
+              {{i18n (themePrefix "button_text_label")}}
+            </label>
+            <TextField
+              @value={{this.buttonText}}
+              @placeholderKey={{themePrefix "launch_jitsi"}}
+            />
+          </div>
+
+          <div class="insert-jitsi-input">
+            <label class="checkbox-label">
+              <Input @type="checkbox" @checked={{this.mobileIframe}} />
+              {{i18n (themePrefix "modal.mobile_iframe")}}
+            </label>
+          </div>
+
+          <div class="insert-bbb-input">
+            <label class="checkbox-label">
+              <Input @type="checkbox" @checked={{this.desktopIframe}} />
+              {{i18n (themePrefix "modal.desktop_iframe")}}
+            </label>
+          </div>
+        </div>
+
+      </:body>
+      <:footer>
+        <DButton
+          class="btn-primary"
+          @disabled={{this.insertDisabled}}
+          @label={{themePrefix "modal.insert"}}
+          @action={{this.insert}}
+        />
+      </:footer>
+    </DModal>
+  </template>
+}

javascripts/discourse/initializers/insert-jitsi.js

@@ -1,10 +1,13 @@
 /* global JitsiMeetExternalAPI */
-import { withPluginApi } from "discourse/lib/plugin-api";
-import showModal from "discourse/lib/show-modal";
+import themePrefix from "discourse/helpers/theme-prefix";
 import loadScript from "discourse/lib/load-script";
+import { withPluginApi } from "discourse/lib/plugin-api";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
+import InsertJitsi from "../components/modal/insert-jitsi";
 
+/* eslint-disable */
+// prettier-ignore
 function launchJitsi($elem, user, site) {
   const data = $elem.data();
   const domain = settings.meet_jitsi_domain;
@@ -63,49 +66,43 @@ function attachJitsi($elem, helper) {
     });
   }
 }
+/* eslint-enable */
 
 export default {
   name: "insert-jitsi",
 
   initialize() {
     withPluginApi("0.8.31", (api) => {
-      let currentUser = api.getCurrentUser();
+      const currentUser = api.getCurrentUser();
+      const modal = api.container.lookup("service:modal");
+      const settings = api.container.lookup("site-settings:main");
 
       if (settings.show_in_options_dropdown) {
-        if (
-          settings.only_available_to_staff &&
-          currentUser &&
-          !currentUser.staff
-        ) {
-          // do nothing if limited to staff
-        } else {
+        if (settings.only_available_to_staff && currentUser?.staff) {
           api.addComposerToolbarPopupMenuOption({
             icon: settings.button_icon,
             label: themePrefix("composer_title"),
             action: (toolbarEvent) => {
-              showModal("insert-jitsi").setProperties({
-                toolbarEvent,
-              });
+              modal.show(InsertJitsi, { model: { toolbarEvent } });
             },
           });
         }
       } else {
+        if (
+          settings.only_available_to_staff &&
+          currentUser &&
+          !currentUser.staff
+        ) {
+          return;
+        }
         api.onToolbarCreate((toolbar) => {
-          if (
-            settings.only_available_to_staff &&
-            currentUser &&
-            !currentUser.staff
-          ) {
-            return;
-          }
-
           toolbar.addButton({
             title: themePrefix("composer_title"),
             id: "insertJitsi",
             group: "insertions",
             icon: settings.button_icon,
-            perform: (e) =>
-              showModal("insert-jitsi").setProperties({ toolbarEvent: e }),
+            perform: (toolbarEvent) =>
+              modal.show(InsertJitsi, { model: { toolbarEvent } }),
           });
         });
       }

package.json

@@ -5,6 +5,9 @@
   "author": "Discourse",
   "license": "MIT",
   "devDependencies": {
-    "eslint-config-discourse": "^3.2.0"
+    "@discourse/lint-configs": "^1.2.0",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.54.0",
+    "prettier": "^2.8.8"
   }
 }