FEATURE: Popup to copy shareable links to reports (#41)

* FEATURE: Popup to copy shareable links to reports

* Only show created_at if it is non-empty

* remove unneeded dependencies in share-report

* Use Discourse.BaseUrl and i18n some text

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

@@ -0,0 +1,86 @@
+import {
+  default as computed,
+  on
+} from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  classNames: ["share-report"],
+
+  group: null,
+  query: null,
+  visible: false,
+
+  @computed("group", "query")
+  link() {
+    return (
+      Discourse.BaseUrl +
+      "/g/" +
+      this.group +
+      "/reports/" +
+      this.query.id
+    );
+  },
+
+  _mouseDownHandler(event) {
+    if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    if ($(this.element).has(event.target).length !== 0) {
+      return;
+    }
+
+    this.send("close");
+
+    return true;
+  },
+
+  _keydownHandler(event) {
+    if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    if (event.keyCode === 27) {
+      this.send("close");
+    }
+  },
+
+  @on("init")
+  _setupHandlers() {
+    this._boundMouseDownHandler = Ember.run.bind(this, this._mouseDownHandler);
+    this._boundKeydownHandler = Ember.run.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(e) {
+      this.set("visible", true);
+      window.setTimeout(
+        () =>
+          $(this.element)
+            .find("input")
+            .select()
+            .focus(),
+        160
+      );
+    },
+
+    close(e) {
+      this.set("visible", false);
+    }
+  }
+});

assets/javascripts/discourse/routes/admin-plugins-explorer.js.es6

@@ -24,8 +24,6 @@ export default Discourse.Route.extend({
                 "group_names",
                 (query.group_ids || [])
                   .map(id => groupNames[id])
-                  .filter(n => n)
-                  .join(", ")
               );
             });
             return { model, schema, groups };

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

@@ -206,16 +206,16 @@
                   {{/if}}
                 </td>
                 <td class="query-group-names">
-                  {{#if query.group_names}}
+                  {{#each query.group_names as |group|}}
-                    <medium>{{query.group_names}}</medium>
+                    {{share-report group=group query=query}}
-                  {{/if}}
+                  {{/each}}
                 </td>
                 <td class="query-created-at">
                   {{#if query.last_run_at}}
                     <medium>
                       {{bound-date query.last_run_at}}
                     </medium>
-                  {{else}}
+                  {{else if query.created_at}}
                     <medium>
                       {{bound-date query.created_at}}
                     </medium>

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

@@ -0,0 +1,13 @@
+<div onclick={{action "open"}}>
+  {{d-icon "link"}}
+  {{group}}
+</div>
+{{#if visible}}
+  <div class='popup'>
+    <label>{{i18n "explorer.link"}} {{group}}</label>
+    <input value={{link}}/>
+    <span onclick={{action "close"}}>
+      {{d-icon "times"}}
+    </span>
+  </div>
+{{/if}}

assets/stylesheets/explorer.scss

@@ -360,7 +360,10 @@ table.group-reports {
       color: $primary-high;
     }
     .query-group-names {
-      color: $primary-high;
+      color: $tertiary;
+      a {
+        display: inline;
+      }
     }
     .query-created-at {
       color: $primary-medium;
@@ -398,3 +401,22 @@ table.group-reports {
 .explorer-pad-bottom {
   margin-bottom: 200px;
 }
+
+.share-report {
+  cursor: pointer;
+
+  label {
+    color: $primary-high;
+  }
+  input {
+    margin-right: 4px;
+  }
+  .popup {
+    background: white;
+    position: absolute;
+    box-shadow: shadow("card");
+    padding: 12px;
+    z-index: 1;
+  }
+}
+

config/locales/client.en.yml

@@ -60,6 +60,7 @@ en:
         other: "Showing top %{count} results."
       query_name: "Query"
       query_groups: "Groups"
+      link: "Link for"
       report_name: "Report"
       query_description: "Description"
       query_time: "Last run"