Upgrade share-report to Octane (#195)

* Upgrade share-report to Octane

* add requested changes

assets/javascripts/discourse/components/share-report.hbs

@@ -0,0 +1,25 @@
+<div class="share-report">
+  <a href="#" {{on "click" this.open}} class="share-report-button">
+    {{d-icon "link"}}
+    {{@group}}
+  </a>
+
+  {{#if this.visible}}
+    <div
+      class="popup"
+      {{did-insert this.registerListeners}}
+      {{will-destroy this.unregisterListeners}}
+    >
+      <label>{{i18n "explorer.link"}} {{@group}}</label>
+      <input type="text" value={{this.link}} {{did-insert this.focusInput}} />
+
+      <DButton
+        @action={{this.close}}
+        @class="btn-flat close"
+        @icon="times"
+        @aria-label="share.close"
+        @title="share.close"
+      />
+    </div>
+  {{/if}}
+</div>

assets/javascripts/discourse/components/share-report.js

@@ -1,76 +1,63 @@
-import Component from "@ember/component";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import Component from "@glimmer/component";
 import getURL from "discourse-common/lib/get-url";
-import { bind } from "@ember/runloop";
+import { bind } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
 
-export default Component.extend({
-  classNames: ["share-report"],
+export default class ShareReport extends Component {
+  @tracked visible = false;
+  element;
 
-  group: null,
-  query: null,
-  visible: false,
+  get link() {
+    return getURL(`/g/${this.args.group}/reports/${this.args.query.id}`);
+  }
 
-  @discourseComputed("group", "query")
-  link() {
-    return getURL(`/g/${this.group}/reports/${this.query.id}`);
-  },
-
-  _mouseDownHandler(event) {
-    if (!this.element || this.isDestroying || this.isDestroyed) {
-      return;
+  @bind
+  mouseDownHandler(e) {
+    if (!this.element.contains(e.target)) {
+      this.close();
     }
-    if ($(this.element).has(event.target).length !== 0) {
+  }
+
+  @bind
+  keyDownHandler(e) {
+    if (e.keyCode === 27) {
+      this.close();
+    }
+  }
+
+  @action
+  registerListeners(element) {
+    if (!element || this.isDestroying || this.isDestroyed) {
       return;
     }
 
-    this.send("close");
+    this.element = element;
+    document.addEventListener("mousedown", this.mouseDownHandler);
+    element.addEventListener("keydown", this.keyDownHandler);
+  }
 
-    return true;
-  },
+  @action
+  unregisterListeners(element) {
+    this.element = element;
+    document.removeEventListener("mousedown", this.mouseDownHandler);
+    element.removeEventListener("keydown", this.keyDownHandler);
+  }
 
-  _keydownHandler(event) {
-    if (!this.element || this.isDestroying || this.isDestroyed) {
-      return;
-    }
+  @action
+  focusInput(e) {
+    e.select();
+    e.focus();
+  }
 
-    if (event.keyCode === 27) {
-      this.send("close");
-    }
-  },
+  @action
+  open(e) {
+    e.preventDefault();
+    this.visible = true;
+  }
 
-  @on("init")
-  _setupHandlers() {
-    this._boundMouseDownHandler = bind(this, this._mouseDownHandler);
-    this._boundKeydownHandler = bind(this, this._keydownHandler);
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    $("html")
-      .on("mousedown.outside-share-link", this._boundMouseDownHandler)
-      .on("keydown.share-view", this._boundKeydownHandler);
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-
-    $("html")
-      .off("mousedown.outside-share-link", this._boundMouseDownHandler)
-      .off("keydown.share-view", this._boundKeydownHandler);
-  },
-
-  actions: {
-    open() {
-      this.set("visible", true);
-      window.setTimeout(
-        () => $(this.element).find("input").select().focus(),
-        160
-      );
-    },
-
-    close() {
-      this.set("visible", false);
-    },
-  },
-});
+  @action
+  close() {
+    this.visible = false;
+  }
+}

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -45,7 +45,7 @@
 
     {{#if model.length}}
       {{#unless selectedItem.fake}}
-        <div class="query-edit {{if editName "editing"}}">
+        <div class="query-edit {{if editName 'editing'}}">
           {{#if selectedItem}}
             {{#if editing}}
               <div class="name">
@@ -108,10 +108,14 @@
 
             {{! the SQL editor will show the first time you }}
             {{#if everEditing}}
-              <div class="query-editor {{if hideSchema "no-schema"}}">
+              <div class="query-editor {{if hideSchema 'no-schema'}}">
                 <div class="panels-flex">
                   <div class="editor-panel">
-                    {{ace-editor content=selectedItem.sql mode="sql" disabled=selectedItem.destroyed}}
+                    {{ace-editor
+                      content=selectedItem.sql
+                      mode="sql"
+                      disabled=selectedItem.destroyed
+                    }}
                   </div>
 
                   <div class="right-panel">
@@ -252,7 +256,7 @@
           </label>
         </form>
 
-        <hr>
+        <hr />
       {{/unless}}
 
       {{conditional-loading-spinner condition=loading}}
@@ -347,7 +351,7 @@
                   </td>
                   <td class="query-group-names">
                     {{#each query.group_names as |group|}}
-                      {{share-report group=group query=query}}
+                      <ShareReport @group={{group}} @query={{query}} />
                     {{/each}}
                   </td>
                   <td class="query-created-at">
@@ -363,7 +367,7 @@
                   </td>
                 </tr>
               {{else}}
-                <br>
+                <br />
                 <em class="no-search-results">
                   {{i18n "explorer.no_search_results"}}
                 </em>

assets/javascripts/discourse/templates/components/share-report.hbs

@@ -1,19 +0,0 @@
-<div role="button" onclick={{action "open"}}>
-  {{d-icon "link"}}
-  {{group}}
-</div>
-
-{{#if visible}}
-  <div class="popup">
-    <label>{{i18n "explorer.link"}} {{group}}</label>
-    <input type="text" value={{link}}>
-
-    {{d-button
-      action="close"
-      class="btn-flat close"
-      icon="times"
-      aria-label="share.close"
-      title="share.close"
-    }}
-  </div>
-{{/if}}