From ad706d2c8ad528e274586291ef50011da80ac93c Mon Sep 17 00:00:00 2001
From: "Hugh A. Miles II" <hughmil3s@gmail.com>
Date: Mon, 14 Jun 2021 13:11:58 -0400
Subject: [PATCH] fix(db-connection-ui): Additional Query Parameters render
 (#15150)

* working query params

* move condition out before update or create

* fix type script issues
---
 .../data/database/DatabaseModal/index.tsx     | 26 ++++++++++++++++++-
 .../src/views/CRUD/data/database/types.ts     |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index e35020065974d..388dce9259a73 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -130,6 +130,7 @@ function dbReducer(
   const trimmedState = {
     ...(state || {}),
   };
+  let query = '';
 
   switch (action.type) {
     case ActionType.inputChange:
@@ -169,10 +170,20 @@ function dbReducer(
         [action.payload.name]: action.payload.value,
       };
     case ActionType.fetched:
+      if (action.payload?.parameters?.query) {
+        // convert query into URI params string
+        query = new URLSearchParams(
+          action.payload.parameters.query as string,
+        ).toString();
+      }
       return {
         engine: trimmedState.engine,
         configuration_method: trimmedState.configuration_method,
         ...action.payload,
+        parameters: {
+          ...action.payload.parameters,
+          query,
+        },
       };
     case ActionType.dbSelected:
       return {
@@ -265,6 +276,19 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const onSave = async () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { id, ...update } = db || {};
+
+    if (update?.parameters?.query) {
+      // convert query params into dictionary
+      update.parameters.query = JSON.parse(
+        `{"${decodeURI((update?.parameters?.query as string) || '')
+          .replace(/"/g, '\\"')
+          .replace(/&/g, '","')
+          .replace(/=/g, '":"')}"}`,
+      );
+    } else if (update.parameters) {
+      update.parameters.query = {};
+    }
+
     if (db?.id) {
       const result = await updateResource(
         db.id as number,
@@ -287,7 +311,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       if (update?.parameters?.query) {
         // convert query params into dictionary
         update.parameters.query = JSON.parse(
-          `{"${decodeURI(db.parameters?.query || '')
+          `{"${decodeURI((db.parameters?.query as string) || '')
             .replace(/"/g, '\\"')
             .replace(/&/g, '","')
             .replace(/=/g, '":"')}"}`,
diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
index 8c0264116da17..ca87797bf45ab 100644
--- a/superset-frontend/src/views/CRUD/data/database/types.ts
+++ b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -38,7 +38,7 @@ export type DatabaseObject = {
     username?: string;
     password?: string;
     encryption?: boolean;
-    query?: string;
+    query?: string | object;
   };
   configuration_method: CONFIGURATION_METHOD;
   engine?: string;