fix: make sure that gsheets db connection form loads properly (#22361)

superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FormEvent, useEffect } from 'react';
+import React, { FormEvent } from 'react';
 import { SupersetTheme, JsonObject } from '@superset-ui/core';
 import { InputProps } from 'antd/lib/input';
 import { Form } from 'src/components/Form';
@@ -103,24 +103,7 @@ const FORM_FIELD_MAP = {
   account: validatedInputField,
 };
 
-const DatabaseConnectionForm = ({
+interface DatabaseConnectionFormProps {
-  dbModel: { parameters, default_driver },
-  db,
-  editNewDb,
-  getPlaceholder,
-  getValidation,
-  isEditMode = false,
-  onAddTableCatalog,
-  onChange,
-  onExtraInputChange,
-  onParametersChange,
-  onParametersUploadFileChange,
-  onQueryChange,
-  onRemoveTableCatalog,
-  setDatabaseDriver,
-  sslForced,
-  validationErrors,
-}: {
   isEditMode?: boolean;
   sslForced: boolean;
   editNewDb?: boolean;
@@ -146,52 +129,64 @@ const DatabaseConnectionForm = ({
   validationErrors: JsonObject | null;
   getValidation: () => void;
   getPlaceholder?: (field: string) => string | undefined;
-  setDatabaseDriver: (driver: string) => void;
+}
-}) => {
+
-  useEffect(() => {
+const DatabaseConnectionForm = ({
-    setDatabaseDriver(default_driver);
+  dbModel: { parameters },
-  }, [default_driver]);
+  db,
-  return (
+  editNewDb,
-    <Form>
+  getPlaceholder,
-      <div
+  getValidation,
-        // @ts-ignore
+  isEditMode = false,
-        css={(theme: SupersetTheme) => [
+  onAddTableCatalog,
-          formScrollableStyles,
+  onChange,
-          validatedFormStyles(theme),
+  onExtraInputChange,
-        ]}
+  onParametersChange,
-      >
+  onParametersUploadFileChange,
-        {parameters &&
+  onQueryChange,
-          FormFieldOrder.filter(
+  onRemoveTableCatalog,
-            (key: string) =>
+  sslForced,
-              Object.keys(parameters.properties).includes(key) ||
+  validationErrors,
-              key === 'database_name',
+}: DatabaseConnectionFormProps) => (
-          ).map(field =>
+  <Form>
-            FORM_FIELD_MAP[field]({
+    <div
-              required: parameters.required?.includes(field),
+      // @ts-ignore
-              changeMethods: {
+      css={(theme: SupersetTheme) => [
-                onParametersChange,
+        formScrollableStyles,
-                onChange,
+        validatedFormStyles(theme),
-                onQueryChange,
+      ]}
-                onParametersUploadFileChange,
+    >
-                onAddTableCatalog,
+      {parameters &&
-                onRemoveTableCatalog,
+        FormFieldOrder.filter(
-                onExtraInputChange,
+          (key: string) =>
-              },
+            Object.keys(parameters.properties).includes(key) ||
-              validationErrors,
+            key === 'database_name',
-              getValidation,
+        ).map(field =>
-              db,
+          FORM_FIELD_MAP[field]({
-              key: field,
+            required: parameters.required?.includes(field),
-              field,
+            changeMethods: {
-              isEditMode,
+              onParametersChange,
-              sslForced,
+              onChange,
-              editNewDb,
+              onQueryChange,
-              placeholder: getPlaceholder ? getPlaceholder(field) : undefined,
+              onParametersUploadFileChange,
-            }),
+              onAddTableCatalog,
-          )}
+              onRemoveTableCatalog,
-      </div>
+              onExtraInputChange,
-    </Form>
+            },
-  );
+            validationErrors,
-};
+            getValidation,
+            db,
+            key: field,
+            field,
+            isEditMode,
+            sslForced,
+            editNewDb,
+            placeholder: getPlaceholder ? getPlaceholder(field) : undefined,
+          }),
+        )}
+    </div>
+  </Form>
+);
 export const FormFieldMap = FORM_FIELD_MAP;
 
 export default DatabaseConnectionForm;

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx

@@ -1786,4 +1786,34 @@ describe('dbReducer', () => {
       catalog: [],
     });
   });
+
+  test('it will add db information when one is selected', () => {
+    const { backend, ...db } = databaseFixture;
+    const action: DBReducerActionType = {
+      type: ActionType.dbSelected,
+      payload: {
+        engine_information: {
+          supports_file_upload: true,
+        },
+        ...db,
+        driver: db.driver,
+        engine: backend,
+      },
+    };
+    const currentState = dbReducer({}, action);
+
+    expect(currentState).toEqual({
+      database_name: db.database_name,
+      engine: backend,
+      configuration_method: db.configuration_method,
+      engine_information: {
+        supports_file_upload: true,
+      },
+      driver: db.driver,
+      expose_in_sqllab: true,
+      extra: '{"allows_virtual_table_explore":true}',
+      is_managed_externally: false,
+      name: 'PostgresDB',
+    });
+  });
 });

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -135,7 +135,6 @@ export enum ActionType {
   addTableCatalogSheet,
   configMethodChange,
   dbSelected,
-  driverChange,
   editorChange,
   extraEditorChange,
   extraInputChange,
@@ -180,6 +179,7 @@ export type DBReducerActionType =
         engine?: string;
         configuration_method: CONFIGURATION_METHOD;
         engine_information?: {};
+        driver?: string;
       };
     }
   | {
@@ -198,10 +198,6 @@ export type DBReducerActionType =
         engine?: string;
         configuration_method: CONFIGURATION_METHOD;
       };
-    }
-  | {
-      type: ActionType.driverChange;
-      payload: string;
     };
 
 const StyledBtns = styled.div`
@@ -426,12 +422,6 @@ export function dbReducer(
         ...action.payload,
       };
 
-    case ActionType.driverChange:
-      return {
-        ...trimmedState,
-        driver: action.payload,
-      };
-
     case ActionType.reset:
     default:
       return null;
@@ -753,7 +743,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       const selectedDbModel = availableDbs?.databases.filter(
         (db: DatabaseObject) => db.name === database_name,
       )[0];
-      const { engine, parameters, engine_information } = selectedDbModel;
+      const { engine, parameters, engine_information, default_driver } =
+        selectedDbModel;
       const isDynamic = parameters !== undefined;
       setDB({
         type: ActionType.dbSelected,
@@ -764,6 +755,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             ? CONFIGURATION_METHOD.DYNAMIC_FORM
             : CONFIGURATION_METHOD.SQLALCHEMY_URI,
           engine_information,
+          driver: default_driver,
         },
       });
 
@@ -1292,9 +1284,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         sslForced={sslForced}
         dbModel={dbModel}
         db={db as DatabaseObject}
-        setDatabaseDriver={(driver: string) => {
-          onChange(ActionType.driverChange, driver);
-        }}
         onParametersChange={({ target }: { target: HTMLInputElement }) =>
           onChange(ActionType.parametersChange, {
             type: target.type,
@@ -1466,9 +1455,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               sslForced={sslForced}
               dbModel={dbModel}
               db={db as DatabaseObject}
-              setDatabaseDriver={(driver: string) => {
-                onChange(ActionType.driverChange, driver);
-              }}
               onParametersChange={({ target }: { target: HTMLInputElement }) =>
                 onChange(ActionType.parametersChange, {
                   type: target.type,
@@ -1660,9 +1646,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   db={db}
                   sslForced={sslForced}
                   dbModel={dbModel}
-                  setDatabaseDriver={(driver: string) => {
-                    onChange(ActionType.driverChange, driver);
-                  }}
                   onAddTableCatalog={() => {
                     setDB({ type: ActionType.addTableCatalogSheet });
                   }}