mirror of https://github.com/apache/superset.git
fix: make sure that gsheets db connection form loads properly (#22361)
This commit is contained in:
parent
861001251d
commit
368e7e6b08
|
@ -16,7 +16,7 @@
|
||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { FormEvent, useEffect } from 'react';
|
import React, { FormEvent } from 'react';
|
||||||
import { SupersetTheme, JsonObject } from '@superset-ui/core';
|
import { SupersetTheme, JsonObject } from '@superset-ui/core';
|
||||||
import { InputProps } from 'antd/lib/input';
|
import { InputProps } from 'antd/lib/input';
|
||||||
import { Form } from 'src/components/Form';
|
import { Form } from 'src/components/Form';
|
||||||
|
@ -103,24 +103,7 @@ const FORM_FIELD_MAP = {
|
||||||
account: validatedInputField,
|
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;
|
isEditMode?: boolean;
|
||||||
sslForced: boolean;
|
sslForced: boolean;
|
||||||
editNewDb?: boolean;
|
editNewDb?: boolean;
|
||||||
|
@ -146,52 +129,64 @@ const DatabaseConnectionForm = ({
|
||||||
validationErrors: JsonObject | null;
|
validationErrors: JsonObject | null;
|
||||||
getValidation: () => void;
|
getValidation: () => void;
|
||||||
getPlaceholder?: (field: string) => string | undefined;
|
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 const FormFieldMap = FORM_FIELD_MAP;
|
||||||
|
|
||||||
export default DatabaseConnectionForm;
|
export default DatabaseConnectionForm;
|
||||||
|
|
|
@ -1786,4 +1786,34 @@ describe('dbReducer', () => {
|
||||||
catalog: [],
|
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',
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -135,7 +135,6 @@ export enum ActionType {
|
||||||
addTableCatalogSheet,
|
addTableCatalogSheet,
|
||||||
configMethodChange,
|
configMethodChange,
|
||||||
dbSelected,
|
dbSelected,
|
||||||
driverChange,
|
|
||||||
editorChange,
|
editorChange,
|
||||||
extraEditorChange,
|
extraEditorChange,
|
||||||
extraInputChange,
|
extraInputChange,
|
||||||
|
@ -180,6 +179,7 @@ export type DBReducerActionType =
|
||||||
engine?: string;
|
engine?: string;
|
||||||
configuration_method: CONFIGURATION_METHOD;
|
configuration_method: CONFIGURATION_METHOD;
|
||||||
engine_information?: {};
|
engine_information?: {};
|
||||||
|
driver?: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
|
@ -198,10 +198,6 @@ export type DBReducerActionType =
|
||||||
engine?: string;
|
engine?: string;
|
||||||
configuration_method: CONFIGURATION_METHOD;
|
configuration_method: CONFIGURATION_METHOD;
|
||||||
};
|
};
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType.driverChange;
|
|
||||||
payload: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const StyledBtns = styled.div`
|
const StyledBtns = styled.div`
|
||||||
|
@ -426,12 +422,6 @@ export function dbReducer(
|
||||||
...action.payload,
|
...action.payload,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ActionType.driverChange:
|
|
||||||
return {
|
|
||||||
...trimmedState,
|
|
||||||
driver: action.payload,
|
|
||||||
};
|
|
||||||
|
|
||||||
case ActionType.reset:
|
case ActionType.reset:
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
|
@ -753,7 +743,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
const selectedDbModel = availableDbs?.databases.filter(
|
const selectedDbModel = availableDbs?.databases.filter(
|
||||||
(db: DatabaseObject) => db.name === database_name,
|
(db: DatabaseObject) => db.name === database_name,
|
||||||
)[0];
|
)[0];
|
||||||
const { engine, parameters, engine_information } = selectedDbModel;
|
const { engine, parameters, engine_information, default_driver } =
|
||||||
|
selectedDbModel;
|
||||||
const isDynamic = parameters !== undefined;
|
const isDynamic = parameters !== undefined;
|
||||||
setDB({
|
setDB({
|
||||||
type: ActionType.dbSelected,
|
type: ActionType.dbSelected,
|
||||||
|
@ -764,6 +755,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
? CONFIGURATION_METHOD.DYNAMIC_FORM
|
? CONFIGURATION_METHOD.DYNAMIC_FORM
|
||||||
: CONFIGURATION_METHOD.SQLALCHEMY_URI,
|
: CONFIGURATION_METHOD.SQLALCHEMY_URI,
|
||||||
engine_information,
|
engine_information,
|
||||||
|
driver: default_driver,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1292,9 +1284,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
sslForced={sslForced}
|
sslForced={sslForced}
|
||||||
dbModel={dbModel}
|
dbModel={dbModel}
|
||||||
db={db as DatabaseObject}
|
db={db as DatabaseObject}
|
||||||
setDatabaseDriver={(driver: string) => {
|
|
||||||
onChange(ActionType.driverChange, driver);
|
|
||||||
}}
|
|
||||||
onParametersChange={({ target }: { target: HTMLInputElement }) =>
|
onParametersChange={({ target }: { target: HTMLInputElement }) =>
|
||||||
onChange(ActionType.parametersChange, {
|
onChange(ActionType.parametersChange, {
|
||||||
type: target.type,
|
type: target.type,
|
||||||
|
@ -1466,9 +1455,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
sslForced={sslForced}
|
sslForced={sslForced}
|
||||||
dbModel={dbModel}
|
dbModel={dbModel}
|
||||||
db={db as DatabaseObject}
|
db={db as DatabaseObject}
|
||||||
setDatabaseDriver={(driver: string) => {
|
|
||||||
onChange(ActionType.driverChange, driver);
|
|
||||||
}}
|
|
||||||
onParametersChange={({ target }: { target: HTMLInputElement }) =>
|
onParametersChange={({ target }: { target: HTMLInputElement }) =>
|
||||||
onChange(ActionType.parametersChange, {
|
onChange(ActionType.parametersChange, {
|
||||||
type: target.type,
|
type: target.type,
|
||||||
|
@ -1660,9 +1646,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
db={db}
|
db={db}
|
||||||
sslForced={sslForced}
|
sslForced={sslForced}
|
||||||
dbModel={dbModel}
|
dbModel={dbModel}
|
||||||
setDatabaseDriver={(driver: string) => {
|
|
||||||
onChange(ActionType.driverChange, driver);
|
|
||||||
}}
|
|
||||||
onAddTableCatalog={() => {
|
onAddTableCatalog={() => {
|
||||||
setDB({ type: ActionType.addTableCatalogSheet });
|
setDB({ type: ActionType.addTableCatalogSheet });
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in New Issue