From e0bfa66f5ff9fbf777e5c61a5ab80b1d962e9ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E5=BF=83?=
 <41134017+Lhcfl@users.noreply.github.com>
Date: Mon, 5 Aug 2024 15:58:51 +0800
Subject: [PATCH] FIX: Create parameter input boxes after save (#303)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

What does this fix?
===================

When creating a data explorer query that includes parameters, the
parameter input boxes don’t display until the page is refreshed.

After this commit, when the query is saved, the input boxes will appear.

ref: t/113297
---
 assets/javascripts/discourse/models/query.js  |  2 +
 .../templates/admin/plugins-explorer.hbs      |  2 +
 .../acceptance/param-input-test.js            | 68 +++++++++++++++++++
 3 files changed, 72 insertions(+)

diff --git a/assets/javascripts/discourse/models/query.js b/assets/javascripts/discourse/models/query.js
index 127ee69..7d7407d 100644
--- a/assets/javascripts/discourse/models/query.js
+++ b/assets/javascripts/discourse/models/query.js
@@ -1,3 +1,4 @@
+import { computed } from "@ember/object";
 import RestModel from "discourse/models/rest";
 import getURL from "discourse-common/lib/get-url";
 
@@ -23,6 +24,7 @@ export default class Query extends RestModel {
     return getURL(`/admin/plugins/explorer/queries/${this.id}.json?export=1`);
   }
 
+  @computed("param_info")
   get hasParams() {
     return this.param_info.length;
   }
diff --git a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
index f629aee..61a0f41 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
@@ -170,6 +170,7 @@
           <div class="pull-left left-buttons">
             {{#if this.editingQuery}}
               <DButton
+                class="btn-save-query"
                 @action={{this.save}}
                 @label="explorer.save"
                 @disabled={{this.saveDisabled}}
@@ -177,6 +178,7 @@
             {{else}}
               {{#unless this.editDisabled}}
                 <DButton
+                  class="btn-edit-query"
                   @action={{this.editQuery}}
                   @label="explorer.edit"
                   @icon="pencil-alt"
diff --git a/test/javascripts/acceptance/param-input-test.js b/test/javascripts/acceptance/param-input-test.js
index cd586f3..eef0611 100644
--- a/test/javascripts/acceptance/param-input-test.js
+++ b/test/javascripts/acceptance/param-input-test.js
@@ -134,6 +134,19 @@ acceptance("Data Explorer Plugin | Param Input", function (needs) {
             hidden: false,
             user_id: 1,
           },
+          {
+            id: 3,
+            sql: "SELECT 1",
+            name: "Params test",
+            description: "test for params.",
+            param_info: [],
+            created_at: "2021-02-02T12:21:11.449Z",
+            username: "system",
+            group_ids: [41],
+            last_run_at: "2021-02-11T08:29:59.337Z",
+            hidden: false,
+            user_id: -1,
+          },
         ],
       });
     });
@@ -296,6 +309,48 @@ acceptance("Data Explorer Plugin | Param Input", function (needs) {
         ],
       });
     });
+
+    server.get("/admin/plugins/explorer/queries/3", () => {
+      return helper.response({
+        query: {
+          id: 3,
+          sql: "SELECT 1",
+          name: "Params test",
+          description: "test for params.",
+          param_info: [],
+          created_at: "2021-02-02T12:21:11.449Z",
+          username: "system",
+          group_ids: [41],
+          last_run_at: "2021-02-11T08:29:59.337Z",
+          hidden: false,
+          user_id: -1,
+        },
+      });
+    });
+    server.put("/admin/plugins/explorer/queries/3", () => {
+      return helper.response({
+        query: {
+          id: 3,
+          sql: "-- [params]\n-- int :months_ago = 1\n\nSELECT 1",
+          name: "Params test",
+          description: "test for params.",
+          param_info: [
+            {
+              identifier: "months_ago",
+              type: "int",
+              default: "1",
+              nullable: false,
+            },
+          ],
+          created_at: "2021-02-02T12:21:11.449Z",
+          username: "system",
+          group_ids: [41],
+          last_run_at: "2021-02-11T08:29:59.337Z",
+          hidden: false,
+          user_id: -1,
+        },
+      });
+    });
   });
 
   test("it puts params for the query into the url", async function (assert) {
@@ -339,4 +394,17 @@ acceptance("Data Explorer Plugin | Param Input", function (needs) {
     await click("form.query-run button");
     assert.equal(query(".query-params input").value, monthsAgoValue);
   });
+
+  test("it creates input boxes if has parameters when save", async function (assert) {
+    await visit("/admin/plugins/explorer?id=3");
+    assert.notOk(exists(".query-params input"));
+    await click(".query-edit .btn-edit-query");
+    await click(".query-editor .ace_text-input");
+    await fillIn(
+      ".query-editor .ace_text-input",
+      "-- [params]\n-- int :months_ago = 1\n\nSELECT 1"
+    );
+    await click(".query-edit .btn-save-query");
+    assert.ok(exists(".query-params input"));
+  });
 });