pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Elizabeth Thompson 2022-12-09 17:28:15 -08:00 committed by GitHub
parent 861001251d
commit 368e7e6b08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 = ({
dbModel: { parameters, default_driver },
db,
editNewDb,
getPlaceholder,
getValidation,
isEditMode = false,
onAddTableCatalog,
onChange,
onExtraInputChange,
onParametersChange,
onParametersUploadFileChange,
onQueryChange,
onRemoveTableCatalog,
setDatabaseDriver,
sslForced,
validationErrors,
}: {
interface DatabaseConnectionFormProps {
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(() => {
setDatabaseDriver(default_driver);
}, [default_driver]);
return (
<Form>
<div
// @ts-ignore
css={(theme: SupersetTheme) => [
formScrollableStyles,
validatedFormStyles(theme),
]}
>
{parameters &&
FormFieldOrder.filter(
(key: string) =>
Object.keys(parameters.properties).includes(key) ||
key === 'database_name',
).map(field =>
FORM_FIELD_MAP[field]({
required: parameters.required?.includes(field),
changeMethods: {
onParametersChange,
onChange,
onQueryChange,
onParametersUploadFileChange,
onAddTableCatalog,
onRemoveTableCatalog,
onExtraInputChange,
},
validationErrors,
getValidation,
db,
key: field,
field,
isEditMode,
sslForced,
editNewDb,
placeholder: getPlaceholder ? getPlaceholder(field) : undefined,
}),
)}
</div>
</Form>
);
};
}
const DatabaseConnectionForm = ({
dbModel: { parameters },
db,
editNewDb,
getPlaceholder,
getValidation,
isEditMode = false,
onAddTableCatalog,
onChange,
onExtraInputChange,
onParametersChange,
onParametersUploadFileChange,
onQueryChange,
onRemoveTableCatalog,
sslForced,
validationErrors,
}: DatabaseConnectionFormProps) => (
<Form>
<div
// @ts-ignore
css={(theme: SupersetTheme) => [
formScrollableStyles,
validatedFormStyles(theme),
]}
>
{parameters &&
FormFieldOrder.filter(
(key: string) =>
Object.keys(parameters.properties).includes(key) ||
key === 'database_name',
).map(field =>
FORM_FIELD_MAP[field]({
required: parameters.required?.includes(field),
changeMethods: {
onParametersChange,
onChange,
onQueryChange,
onParametersUploadFileChange,
onAddTableCatalog,
onRemoveTableCatalog,
onExtraInputChange,
},
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;

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

@ -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',
});
});
});

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

@ -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 });
}}