DEV: Upgrade `group-reports` to Octane (#218)

assets/javascripts/discourse/controllers/group-reports-index.js

@@ -1,6 +1,3 @@
 import Controller from "@ember/controller";
-import { alias } from "@ember/object/computed";
 
-export default Controller.extend({
-  queries: alias("model.queries"),
-});
+export default class GroupReportsIndexController extends Controller {}

assets/javascripts/discourse/controllers/group-reports-show.js

@@ -1,61 +1,95 @@
 import Controller from "@ember/controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { ajax } from "discourse/lib/ajax";
-import Bookmark, {
+import {
   NO_REMINDER_ICON,
   WITH_REMINDER_ICON,
 } from "discourse/models/bookmark";
 import { openBookmarkModal } from "discourse/controllers/bookmark";
-import discourseComputed from "discourse-common/utils/decorators";
-import { alias, gt } from "@ember/object/computed";
+import { action } from "@ember/object";
+import { bind } from "discourse-common/utils/decorators";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  showResults: false,
-  explain: false,
-  loading: false,
-  results: alias("model.results"),
-  hasParams: gt("model.param_info.length", 0),
+export default class GroupReportsShowController extends Controller {
+  @service currentUser;
 
-  actions: {
-    run() {
-      this.setProperties({ loading: true, showResults: false });
-      ajax(`/g/${this.get("group.name")}/reports/${this.model.id}/run`, {
+  @tracked showResults = false;
+  @tracked loading = false;
+  @tracked results = this.model.results;
+  @tracked queryGroupBookmark = this.queryGroup?.bookmark;
+
+  explain = false;
+
+  get hasParams() {
+    return this.model.param_info.length > 0;
+  }
+
+  get bookmarkLabel() {
+    return this.queryGroupBookmark
+      ? "bookmarked.edit_bookmark"
+      : "bookmarked.title";
+  }
+
+  get bookmarkIcon() {
+    if (this.queryGroupBookmark && this.queryGroupBookmark.reminder_at) {
+      return WITH_REMINDER_ICON;
+    }
+    return NO_REMINDER_ICON;
+  }
+
+  get bookmarkClassName() {
+    return this.queryGroupBookmark
+      ? ["query-group-bookmark", "bookmarked"].join(" ")
+      : "query-group-bookmark";
+  }
+
+  @bind
+  async run() {
+    this.loading = true;
+    this.showResults = false;
+
+    try {
+      const response = await ajax(
+        `/g/${this.get("group.name")}/reports/${this.model.id}/run`,
+        {
           type: "POST",
           data: {
             params: JSON.stringify(this.model.params),
             explain: this.explain,
           },
-      })
-        .then((result) => {
-          this.set("results", result);
-          if (!result.success) {
+        }
+      );
+
+      this.results = response;
+      if (!response.success) {
         return;
       }
-
-          this.set("showResults", true);
-        })
-        .catch((err) => {
-          if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) {
-            this.set("results", err.jqXHR.responseJSON);
+      this.showResults = true;
+    } catch (error) {
+      if (error.jqXHR?.status === 422 && error.jqXHR.responseJSON) {
+        this.results = error.jqXHR.responseJSON;
       } else {
-            popupAjaxError(err);
+        popupAjaxError(error);
+      }
+    } finally {
+      this.loading = false;
+    }
   }
-        })
-        .finally(() => this.set("loading", false));
-    },
 
+  @action
   toggleBookmark() {
     return openBookmarkModal(
-        this.queryGroup.bookmark ||
-          Bookmark.create({
+      this.queryGroupBookmark ||
+        this.store.createRecord("bookmark", {
           bookmarkable_type: "DataExplorer::QueryGroup",
           bookmarkable_id: this.queryGroup.id,
           user_id: this.currentUser.id,
         }),
       {
         onAfterSave: (savedData) => {
-            const bookmark = Bookmark.create(savedData);
-            this.set("queryGroup.bookmark", bookmark);
+          const bookmark = this.store.createRecord("bookmark", savedData);
+          this.queryGroupBookmark = bookmark;
           this.appEvents.trigger(
             "bookmarks:changed",
             savedData,
@@ -63,36 +97,16 @@ export default Controller.extend({
           );
         },
         onAfterDelete: () => {
-            this.set("queryGroup.bookmark", null);
+          this.queryGroupBookmark = null;
         },
       }
     );
-    },
+  }
 
   // This is necessary with glimmer's one way data stream to get the child's
   // changes of 'params' to bubble up.
+  @action
   updateParams(identifier, value) {
     this.set(`model.params.${identifier}`, value);
-    },
-  }, // actions
-
-  @discourseComputed("queryGroup.bookmark")
-  bookmarkLabel(bookmark) {
-    return bookmark ? "bookmarked.edit_bookmark" : "bookmarked.title";
-  },
-
-  @discourseComputed("queryGroup.bookmark")
-  bookmarkIcon(bookmark) {
-    if (bookmark && bookmark.reminder_at) {
-      return WITH_REMINDER_ICON;
   }
-    return NO_REMINDER_ICON;
-  },
-
-  @discourseComputed("queryGroup.bookmark")
-  bookmarkClassName(bookmark) {
-    return bookmark
-      ? ["query-group-bookmark", "bookmarked"].join(" ")
-      : "query-group-bookmark";
-  },
-});
+}

assets/javascripts/discourse/routes/group-reports-index.js

@@ -2,9 +2,7 @@ import { ajax } from "discourse/lib/ajax";
 import DiscourseRoute from "discourse/routes/discourse";
 import { action } from "@ember/object";
 
-export default DiscourseRoute.extend({
-  controllerName: "group-reports-index",
-
+export default class GroupReportsIndexRoute extends DiscourseRoute {
   model() {
     const group = this.modelFor("group");
     return ajax(`/g/${group.name}/reports`)
@@ -15,7 +13,7 @@ export default DiscourseRoute.extend({
         };
       })
       .catch(() => this.transitionTo("group.members", group));
-  },
+  }
 
   afterModel(model) {
     if (
@@ -24,15 +22,15 @@ export default DiscourseRoute.extend({
     ) {
       this.transitionTo("group.members", model.group);
     }
-  },
+  }
 
   setupController(controller, model) {
     controller.setProperties(model);
-  },
+  }
 
   @action
   refreshModel() {
     this.refresh();
     return false;
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/group-reports-show.js

@@ -2,18 +2,15 @@ import { ajax } from "discourse/lib/ajax";
 import DiscourseRoute from "discourse/routes/discourse";
 import { action } from "@ember/object";
 
-export default DiscourseRoute.extend({
-  controllerName: "group-reports-show",
-
+export default class GroupReportsShowRoute extends DiscourseRoute {
   model(params) {
     const group = this.modelFor("group");
     return ajax(`/g/${group.name}/reports/${params.query_id}`)
       .then((response) => {
-        let query = response.query;
-        let queryGroup = response.query_group;
+        const query = response.query;
+        const queryGroup = response.query_group;
 
         const queryParamInfo = query.param_info;
-
         const queryParams = queryParamInfo.reduce((acc, param) => {
           acc[param.identifier] = param.default;
           return acc;
@@ -28,15 +25,15 @@ export default DiscourseRoute.extend({
       .catch(() => {
         this.transitionTo("group.members", group);
       });
-  },
+  }
 
   setupController(controller, model) {
     controller.setProperties(model);
-  },
+  }
 
   @action
   refreshModel() {
     this.refresh();
     return false;
-  },
-});
+  }
+}

assets/javascripts/discourse/templates/group-reports-index.hbs

@@ -12,12 +12,15 @@
       </th>
     </thead>
     <tbody>
-      {{#each queries as |query|}}
+      {{#each this.model.queries as |query|}}
         <tr>
           <td>
-            {{#link-to "group.reports.show" group.name query.id}}
+            <LinkTo
+              @route={{"group.reports.show"}}
+              @models={{array group.name query.id}}
+            >
               {{query.name}}
-            {{/link-to}}
+            </LinkTo>
           </td>
           <td>{{query.description}}</td>
           <td>

assets/javascripts/discourse/templates/group-reports-show.hbs

@@ -1,39 +1,43 @@
 <section class="user-content">
-  <h1>{{model.name}}</h1>
-  <p>{{model.description}}</p>
+  <h1>{{this.model.name}}</h1>
+  <p>{{this.model.description}}</p>
 
-  <form class="query-run" {{action "run" on="submit"}}>
+  <form class="query-run" {{on "submit" this.run}}>
     <ParamInputsWrapper
-      @hasParams={{hasParams}}
-      @params={{model.params}}
-      @paramInfo={{model.param_info}}
-      @updateParams={{action "updateParams"}}
+      @hasParams={{this.hasParams}}
+      @params={{this.model.params}}
+      @paramInfo={{this.model.param_info}}
+      @updateParams={{this.updateParams}}
     />
 
-    {{d-button
-      action=(action "run")
-      icon="play"
-      label="explorer.run"
-      class="btn-primary"
-      type="submit"
-    }}
+    <DButton
+      @action={{this.run}}
+      @icon="play"
+      @label="explorer.run"
+      @class="btn-primary"
+      @type="submit"
+    />
 
-    {{d-button
-      action=(action "toggleBookmark")
-      label=bookmarkLabel
-      icon=bookmarkIcon
-      class=bookmarkClassName
-    }}
+    <DButton
+      @action={{this.toggleBookmark}}
+      @label={{this.bookmarkLabel}}
+      @icon={{this.bookmarkIcon}}
+      @class={{this.bookmarkClassName}}
+    />
   </form>
 
-  {{conditional-loading-spinner condition=loading}}
+  <ConditionalLoadingSpinner @condition={{this.loading}} />
 
-  {{#if results}}
+  {{#if this.results}}
     <div class="query-results">
-      {{#if showResults}}
-        <QueryResult @query={{model}} @content={{results}} @group={{group}} />
+      {{#if this.showResults}}
+        <QueryResult
+          @query={{this.model}}
+          @content={{this.results}}
+          @group={{this.group}}
+        />
       {{else}}
-        {{#each results.errors as |err|}}
+        {{#each this.results.errors as |err|}}
           <pre class="query-error"><code>{{~err}}</code></pre>
         {{/each}}
       {{/if}}