FEATURE: Add Data Explorer Params to the URL for group queries (#298)

We have introduced a URL param mechanism for data explorer queries for administrators
in https://github.com/discourse/discourse-data-explorer/pull/128/
However, for data explorer queries in group page, URL params are not yet introduced.

This PR introduces this missing piece.

Related meta topic: https://meta.discourse.org/t/populate-data-explorer-params-with-url-params/169404/8

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

@@ -15,14 +15,21 @@ import { bind } from "discourse-common/utils/decorators";
 export default class GroupReportsShowController extends Controller {
   @service currentUser;
   @service modal;
+  @service router;
 
   @tracked showResults = false;
   @tracked loading = false;
   @tracked results = this.model.results;
   @tracked queryGroupBookmark = this.queryGroup?.bookmark;
 
+  queryParams = ["params"];
+
   explain = false;
 
+  get parsedParams() {
+    return this.params ? JSON.parse(this.params) : null;
+  }
+
   get hasParams() {
     return this.model.param_info.length > 0;
   }
@@ -52,12 +59,18 @@ export default class GroupReportsShowController extends Controller {
     this.showResults = false;
 
     try {
+      const stringifiedParams = JSON.stringify(this.model.params);
+      this.router.transitionTo({
+        queryParams: {
+          params: this.model.params ? stringifiedParams : null,
+        },
+      });
       const response = await ajax(
         `/g/${this.get("group.name")}/reports/${this.model.id}/run`,
         {
           type: "POST",
           data: {
-            params: JSON.stringify(this.model.params),
+            params: stringifiedParams,
             explain: this.explain,
           },
         }

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

@@ -6,6 +6,7 @@
     <ParamInputsWrapper
       @hasParams={{this.hasParams}}
       @params={{this.model.params}}
+      @initialValues={{this.parsedParams}}
       @paramInfo={{this.model.param_info}}
       @updateParams={{this.updateParams}}
     />

test/javascripts/acceptance/param-input-test.js

@@ -304,7 +304,18 @@ acceptance("Data Explorer Plugin | Param Input", function (needs) {
     await fillIn(".query-params input", monthsAgoValue);
     await click("form.query-run button");
 
-    const searchParams = new URLSearchParams(currentURL());
+    const searchParams = new URLSearchParams(currentURL().split("?")[1]);
+    const monthsAgoParam = JSON.parse(searchParams.get("params")).months_ago;
+    assert.equal(monthsAgoParam, monthsAgoValue);
+  });
+
+  test("it puts params for the query into the url for group reports", async function (assert) {
+    await visit("/g/discourse/reports/-8");
+    const monthsAgoValue = "2";
+    await fillIn(".query-params input", monthsAgoValue);
+    await click("form.query-run button");
+
+    const searchParams = new URLSearchParams(currentURL().split("?")[1]);
     const monthsAgoParam = JSON.parse(searchParams.get("params")).months_ago;
     assert.equal(monthsAgoParam, monthsAgoValue);
   });
@@ -315,6 +326,12 @@ acceptance("Data Explorer Plugin | Param Input", function (needs) {
     assert.ok(exists(".query-run .btn.btn-primary"));
   });
 
+  test("it loads the page if one of the parameter is null for group reports", async function (assert) {
+    await visit('/g/discourse/reports/-8?params={"months_ago":null}');
+    assert.ok(exists(".query-params input"));
+    assert.ok(exists(".query-run .btn.btn-primary"));
+  });
+
   test("it applies params when running a report", async function (assert) {
     await visit("/g/discourse/reports/-8");
     const monthsAgoValue = "2";