fix(db-connection-ui): Allow Dynamic Big Query Edits (#15185)

* working big query edits * fix big stoping users from moving to next step * fix default * save defaults * fix tslint * remove object * fix styling
apache · Jun 16, 2021 · f452789 · f452789
1 parent 1a954ff
commit f452789
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 34 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -66,32 +66,43 @@ interface FieldPropTypes {
   defaultDBName?: string;
 }
 
-const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<number>(0);
+const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
+  const [uploadOption, setUploadOption] = useState<number>(
+    CredentialInfoOptions.copyPaste.valueOf(),
+  );
   const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
     null,
   );
   return (
     <CredentialInfoForm>
-      <span className="label-select">
-        How do you want to enter service account credentials?
-      </span>
-      <Select
-        defaultValue={CredentialInfoOptions.jsonUpload}
-        style={{ width: '100%' }}
-        onChange={option => setUploadOption(option)}
-      >
-        <Select.Option value={CredentialInfoOptions.jsonUpload}>
-          Upload JSON file
-        </Select.Option>
-        <Select.Option value={CredentialInfoOptions.copyPaste}>
-          Copy and Paste JSON credentials
-        </Select.Option>
-      </Select>
+      {!isEditMode && (
+        <>
+          <span className="label-select">
+            How do you want to enter service account credentials?
+          </span>
+          <Select
+            defaultValue={uploadOption}
+            style={{ width: '100%' }}
+            onChange={option => setUploadOption(option)}
+          >
+            <Select.Option value={CredentialInfoOptions.jsonUpload}>
+              Upload JSON file
+            </Select.Option>
+
+            <Select.Option value={CredentialInfoOptions.copyPaste}>
+              Copy and Paste JSON credentials
+            </Select.Option>
+          </Select>
+        </>
+      )}
       {uploadOption === CredentialInfoOptions.copyPaste ? (
         <div className="input-container" onChange={changeMethods.onChange}>
           <span className="label-select">Service Account</span>
-          <textarea className="input-form" name="encrypted_extra" />
+          <textarea
+            className="input-form"
+            name="encrypted_extra"
+            value={db?.parameters?.credentials_info}
+          />
           <span className="label-paste">
             Copy and paste the entire service account .json file here
           </span>

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -211,17 +211,21 @@ function dbReducer(
     case ActionType.fetched:
       // convert all the keys in this payload into strings
       // eslint-disable-next-line no-case-declarations
-      let extra_json = {
-        ...JSON.parse(action.payload.extra || ''),
-      };
-      extra_json = {
-        ...extra_json,
-        metadata_params: JSON.stringify(extra_json.metadata_params),
-        engine_params: JSON.stringify(extra_json.engine_params),
-        schemas_allowed_for_csv_upload: JSON.stringify(
-          extra_json.schemas_allowed_for_csv_upload,
-        ),
-      };
+      let deserializeExtraJSON = {};
+      if (action.payload.extra) {
+        const extra_json = {
+          ...JSON.parse(action.payload.extra || ''),
+        } as DatabaseObject['extra_json'];
+
+        deserializeExtraJSON = {
+          ...JSON.parse(action.payload.extra || ''),
+          metadata_params: JSON.stringify(extra_json?.metadata_params),
+          engine_params: JSON.stringify(extra_json?.engine_params),
+          schemas_allowed_for_csv_upload: JSON.stringify(
+            extra_json?.schemas_allowed_for_csv_upload,
+          ),
+        };
+      }
 
       if (action.payload?.parameters?.query) {
         // convert query into URI params string
@@ -230,11 +234,18 @@ function dbReducer(
         ).toString();
       }
 
+      if (action.payload?.parameters?.credentials_info) {
+        // deserialize credentials info for big query editting
+        action.payload.parameters.credentials_info = JSON.stringify(
+          action.payload?.parameters.credentials_info,
+        );
+      }
+
       return {
         ...action.payload,
         engine: trimmedState.engine,
         configuration_method: trimmedState.configuration_method,
-        extra_json,
+        extra_json: deserializeExtraJSON,
         parameters: {
           ...action.payload.parameters,
           query,
@@ -300,7 +311,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     availableDbs?.databases?.find(
       (available: { engine: string | undefined }) =>
         // TODO: we need a centralized engine in one place
-        available.engine === db?.engine || db?.backend,
+        available.engine === (isEditMode ? db?.backend : db?.engine),
     ) || {};
 
   // Test Connection logic
@@ -443,7 +454,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const setDatabaseModel = (engine: string) => {
     const isDynamic =
       availableDbs?.databases.filter(
-        (db: DatabaseObject) => db.engine === engine,
+        (db: DatabaseObject) => db.engine || db.backend === engine,
       )[0].parameters !== undefined;
     setDB({
       type: ActionType.dbSelected,
@@ -463,7 +474,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       </h4>
       <div className="control-label">Supported databases</div>
       <Select
-        style={{ width: '100%' }}
+        className="available-select"
         onChange={setDatabaseModel}
         placeholder="Choose a database..."
       >

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -442,6 +442,9 @@ export const SelectDatabaseStyles = styled.div`
       font-weight: bold;
       margin: ${({ theme }) => theme.gridUnit * 6}px 0;
     }
+    .available-select {
+      width: 100%;
+    }
   }
 
   .label-available-select {

diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -38,6 +38,7 @@ export type DatabaseObject = {
     username?: string;
     password?: string;
     encryption?: boolean;
+    credentials_info?: string;
     query?: string | object;
   };
   configuration_method: CONFIGURATION_METHOD;
@@ -112,6 +113,11 @@ export type DatabaseForm = {
         nullable: boolean;
         type: string;
       };
+      credentials_info: {
+        description: string;
+        nullable: boolean;
+        type: string;
+      };
     };
     required: string[];
     type: string;

diff --git a/superset/db_engine_specs/bigquery.py b/superset/db_engine_specs/bigquery.py
@@ -49,7 +49,7 @@
 
 class BigQueryParametersSchema(Schema):
     credentials_info = EncryptedField(
-        required=True, description="Contents of BigQuery JSON credentials.",
+        required=False, description="Contents of BigQuery JSON credentials.",
     )