This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch pexdax/db-connection-ui
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/pexdax/db-connection-ui by
this push:
new 9cecb8b feat: Added Dynamic form link to SQL Alchemy Form (#15208)
9cecb8b is described below
commit 9cecb8b5c1af3d1885f9cd14eee95cad686c8a1e
Author: AAfghahi <[email protected]>
AuthorDate: Wed Jun 16 21:07:38 2021 -0400
feat: Added Dynamic form link to SQL Alchemy Form (#15208)
* fix: add icons (#15122)
* added alerts
* revisions
* added icon
* added dynamic form link
---
.../data/database/DatabaseModal/SqlAlchemyForm.tsx | 4 +-
.../CRUD/data/database/DatabaseModal/index.tsx | 61 +++++++++++++++++-----
.../CRUD/data/database/DatabaseModal/styles.ts | 7 +++
3 files changed, 57 insertions(+), 15 deletions(-)
diff --git
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
index 57105eb..786aeac 100644
---
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
+++
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -28,11 +28,13 @@ const SqlAlchemyTab = ({
onInputChange,
testConnection,
conf,
+ isEditMode = false,
}: {
db: DatabaseObject | null;
onInputChange: EventHandler<ChangeEvent<HTMLInputElement>>;
testConnection: EventHandler<MouseEvent<HTMLElement>>;
conf: { SQLALCHEMY_DOCS_URL: string; SQLALCHEMY_DISPLAY_TEXT: string };
+ isEditMode?: boolean;
}) => (
<>
<StyledInputContainer>
@@ -45,7 +47,7 @@ const SqlAlchemyTab = ({
type="text"
name="database_name"
data-test="database-name-input"
- value={db?.database_name || ''}
+ value={isEditMode ? db?.database_name : ''}
placeholder={t('Name your database')}
onChange={onInputChange}
/>
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 f1b8662..a2f3145 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -58,6 +58,7 @@ import {
antDModalStyles,
antDTabsStyles,
buttonLinkStyles,
+ alchemyButtonLinkStyles,
TabHeader,
formHelperStyles,
formStyles,
@@ -126,7 +127,11 @@ type DBReducerActionType =
}
| {
type: ActionType.configMethodChange;
- payload: { configuration_method: CONFIGURATION_METHOD };
+ payload: {
+ database_name?: string;
+ engine?: string;
+ configuration_method: CONFIGURATION_METHOD;
+ };
};
function dbReducer(
@@ -594,6 +599,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps>
= ({
setTabKey(key);
};
+ const isDynamic = (engine: string | undefined) =>
+ availableDbs?.databases.filter(
+ (DB: DatabaseObject) => DB.engine === engine,
+ )[0].parameters !== undefined;
+
return useTabLayout ? (
<Modal
css={(theme: SupersetTheme) => [
@@ -635,19 +645,40 @@ const DatabaseModal:
FunctionComponent<DatabaseModalProps> = ({
>
<StyledBasicTab tab={<span>{t('Basic')}</span>} key="1">
{useSqlAlchemyForm ? (
- <SqlAlchemyForm
- db={db as DatabaseObject}
- onInputChange={({ target }: { target: HTMLInputElement }) =>
- onChange(ActionType.inputChange, {
- type: target.type,
- name: target.name,
- checked: target.checked,
- value: target.value,
- })
- }
- conf={conf}
- testConnection={testConnection}
- />
+ <>
+ <SqlAlchemyForm
+ db={db as DatabaseObject}
+ onInputChange={({ target }: { target: HTMLInputElement }) =>
+ onChange(ActionType.inputChange, {
+ type: target.type,
+ name: target.name,
+ checked: target.checked,
+ value: target.value,
+ })
+ }
+ conf={conf}
+ testConnection={testConnection}
+ isEditMode={isEditMode}
+ />
+ {isDynamic(db?.engine) && (
+ <Button
+ buttonStyle="link"
+ onClick={() =>
+ setDB({
+ type: ActionType.configMethodChange,
+ payload: {
+ database_name: db?.database_name,
+ configuration_method:
CONFIGURATION_METHOD.DYNAMIC_FORM,
+ engine: db?.engine,
+ },
+ })
+ }
+ css={theme => alchemyButtonLinkStyles(theme)}
+ >
+ Connect this database using the dynamic form instead
+ </Button>
+ )}
+ </>
) : (
<DatabaseConnectionForm
isEditMode
@@ -863,8 +894,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps>
= ({
setDB({
type: ActionType.configMethodChange,
payload: {
+ engine: db.engine,
configuration_method:
CONFIGURATION_METHOD.SQLALCHEMY_URI,
+ database_name: db.database_name,
},
})
}
diff --git
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index d293b74..082cd82 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -339,6 +339,13 @@ export const buttonLinkStyles = css`
text-transform: initial;
`;
+export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css`
+ font-weight: 400;
+ text-transform: initial;
+ padding: ${theme.gridUnit * 8}px 0 0;
+ margin-left: 0px;
+`;
+
export const TabHeader = styled.div`
display: flex;
flex-direction: column;
