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

2023-02-06 11:20:03 -06:00 · 2023-02-06 11:20:03 -06:00 · 332ae394e8
parent d6b94706a0
commit 332ae394e8
6 changed files with 142 additions and 129 deletions
--- a/assets/javascripts/discourse/controllers/group-reports-index.js
+++ b/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 {}
--- a/assets/javascripts/discourse/controllers/group-reports-show.js
+++ b/assets/javascripts/discourse/controllers/group-reports-show.js
@ -1,98 +1,112 @@
 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`, {
-        type: "POST",
-        data: {
-          params: JSON.stringify(this.model.params),
-          explain: this.explain,
-        },
-      })
-        .then((result) => {
-          this.set("results", result);
-          if (!result.success) {
-            return;
-          }
+  @tracked showResults = false;
+  @tracked loading = false;
+  @tracked results = this.model.results;
+  @tracked queryGroupBookmark = this.queryGroup?.bookmark;

-          this.set("showResults", true);
-        })
-        .catch((err) => {
-          if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) {
-            this.set("results", err.jqXHR.responseJSON);
-          } else {
-            popupAjaxError(err);
-          }
-        })
-        .finally(() => this.set("loading", false));
-    },
+  explain = false;

-    toggleBookmark() {
-      return openBookmarkModal(
-        this.queryGroup.bookmark ||
-          Bookmark.create({
-            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);
-            this.appEvents.trigger(
-              "bookmarks:changed",
-              savedData,
-              bookmark.attachedTo()
-            );
-          },
-          onAfterDelete: () => {
-            this.set("queryGroup.bookmark", null);
-          },
-        }
-      );
-    },
+  get hasParams() {
+    return this.model.param_info.length > 0;
+  }

-    // This is necessary with glimmer's one way data stream to get the child's
-    // changes of 'params' to bubble up.
-    updateParams(identifier, value) {
-      this.set(`model.params.${identifier}`, value);
-    },
-  }, // actions
+  get bookmarkLabel() {
+    return this.queryGroupBookmark
+      ? "bookmarked.edit_bookmark"
+      : "bookmarked.title";
+  }

-  @discourseComputed("queryGroup.bookmark")
-  bookmarkLabel(bookmark) {
-    return bookmark ? "bookmarked.edit_bookmark" : "bookmarked.title";
-  },
-
-  @discourseComputed("queryGroup.bookmark")
-  bookmarkIcon(bookmark) {
-    if (bookmark && bookmark.reminder_at) {
+  get bookmarkIcon() {
+    if (this.queryGroupBookmark && this.queryGroupBookmark.reminder_at) {
      return WITH_REMINDER_ICON;
    }
    return NO_REMINDER_ICON;
-  },
+  }

-  @discourseComputed("queryGroup.bookmark")
-  bookmarkClassName(bookmark) {
-    return bookmark
+  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,
+          },
+        }
+      );
+
+      this.results = response;
+      if (!response.success) {
+        return;
+      }
+      this.showResults = true;
+    } catch (error) {
+      if (error.jqXHR?.status === 422 && error.jqXHR.responseJSON) {
+        this.results = error.jqXHR.responseJSON;
+      } else {
+        popupAjaxError(error);
+      }
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  @action
+  toggleBookmark() {
+    return openBookmarkModal(
+      this.queryGroupBookmark ||
+        this.store.createRecord("bookmark", {
+          bookmarkable_type: "DataExplorer::QueryGroup",
+          bookmarkable_id: this.queryGroup.id,
+          user_id: this.currentUser.id,
+        }),
+      {
+        onAfterSave: (savedData) => {
+          const bookmark = this.store.createRecord("bookmark", savedData);
+          this.queryGroupBookmark = bookmark;
+          this.appEvents.trigger(
+            "bookmarks:changed",
+            savedData,
+            bookmark.attachedTo()
+          );
+        },
+        onAfterDelete: () => {
+          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);
+  }
+}
--- a/assets/javascripts/discourse/routes/group-reports-index.js
+++ b/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;
-  },
-});
+  }
+}
--- a/assets/javascripts/discourse/routes/group-reports-show.js
+++ b/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;
-  },
-});
+  }
+}
--- a/assets/javascripts/discourse/templates/group-reports-index.hbs
+++ b/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>
--- a/assets/javascripts/discourse/templates/group-reports-show.hbs
+++ b/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}}