Skip to content

Commit

Permalink
added back button to create modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@AAfghahi
AAfghahi committed Jun 22, 2021
1 parent bddb335 commit aa22011
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 104 deletions.
15 changes: 12 additions & 3 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const ModalHeader = ({
db,
dbName,
dbModel,
editNewDb,
}: {
isLoading: boolean;
isEditMode: boolean;
Expand All @@ -58,6 +59,7 @@ const ModalHeader = ({
db: Partial<DatabaseObject> | null;
dbName: string;
dbModel: DatabaseForm;
editNewDb?: boolean;
}) => {
const isEditHeader = (
<>
Expand Down Expand Up @@ -102,7 +104,14 @@ const ModalHeader = ({
<p className="helper"> Step 2 of 3 </p>
<h4>Enter the required {dbModel.name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {dbModel.name}.
Need help? Learn more about{' '}
<a
href={documentationLink(db?.engine)}
target="_blank"
rel="noopener noreferrer"
>
connecting to {dbModel.name}.
</a>
</p>
</StyledFormHeader>
);
Expand All @@ -122,10 +131,10 @@ const ModalHeader = ({
if (useSqlAlchemyForm) {
return useSqlAlchemyFormHeader;
}
if (hasConnectedDb) {
if (hasConnectedDb && !editNewDb) {
return hasConnectedDbHeader;
}
if (db) {
if (db || editNewDb) {
return hasDbHeader;
}
return noDbHeader;
Expand Down
213 changes: 112 additions & 101 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
if (onDatabaseAdd) {
onDatabaseAdd();
}
onClose();
if (!editNewDb) {
onClose();
}
}
} else if (db) {
// Create
Expand Down Expand Up @@ -440,8 +442,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
}
}
}
setLoading(false);
setEditNewDb(false);
setLoading(false);
};

const onChange = (type: any, payload: any) => {
Expand Down Expand Up @@ -544,45 +546,51 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
if (dbFetched) {
fetchResource(dbFetched.id as number);
}
}
setEditNewDb(true);
};

const renderModalFooter = () =>
db // if db show back + connect
? [
!hasConnectedDb ? (
<>
<StyledFooterButton
key="back"
onClick={() => {
setDB({ type: ActionType.reset });
}}
>
Back
</StyledFooterButton>
<StyledFooterButton
key="submit"
buttonStyle="primary"
onClick={onSave}
>
Connect
</StyledFooterButton>
</>
) : (
<>
<StyledFooterButton key="back" onClick={() => setEditNewDb(true)}>
Back
</StyledFooterButton>
<StyledFooterButton
key="submit"
buttonStyle="primary"
onClick={onClose}
>
Finish
</StyledFooterButton>
</>
),
]
: [];
const renderModalFooter = () => {
if (db) {
// if db show back + connenct
if (!hasConnectedDb || editNewDb) {
return (
<>
<StyledFooterButton
key="back"
onClick={() => {
setDB({ type: ActionType.reset });
}}
>
Back
</StyledFooterButton>
<StyledFooterButton
key="submit"
buttonStyle="primary"
onClick={onSave}
>
Connect
</StyledFooterButton>
</>
);
}

return (
<>
<StyledFooterButton key="back" onClick={handleBackButton}>
Back
</StyledFooterButton>
<StyledFooterButton
key="submit"
buttonStyle="primary"
onClick={onClose}
>
Finish
</StyledFooterButton>
</>
);
}
return [];
};

const renderEditModalFooter = () => (
<>
Expand Down Expand Up @@ -627,6 +635,68 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
setTabKey(key);
};

const renderExtraOptions = () => {
if (!editNewDb) {
return (
<ExtraOptions
db={db as DatabaseObject}
onInputChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.inputChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
onEditorChange={(payload: { name: string; json: any }) =>
onChange(ActionType.editorChange, payload)
}
onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
onChange(ActionType.extraInputChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
});
}}
onExtraEditorChange={(payload: { name: string; json: any }) =>
onChange(ActionType.extraEditorChange, payload)
}
/>
);
}
return (
<DatabaseConnectionForm
isEditMode
sslForced={sslForced}
dbModel={dbModel}
db={dbFetched as DatabaseObject}
onParametersChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.parametersChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
getValidation={() => getValidation(db)}
validationErrors={validationErrors}
/>
);
};

const isDynamic = (engine: string | undefined) =>
availableDbs?.databases.filter(
(DB: DatabaseObject) => DB.backend === engine || DB.engine === engine,
Expand Down Expand Up @@ -821,68 +891,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
db={db}
dbName={dbName}
dbModel={dbModel}
editNewDb={editNewDb}
/>
{!editNewDb && (
<ExtraOptions
db={db as DatabaseObject}
onInputChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.inputChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
onEditorChange={(payload: { name: string; json: any }) =>
onChange(ActionType.editorChange, payload)
}
onExtraInputChange={({
target,
}: {
target: HTMLInputElement;
}) => {
onChange(ActionType.extraInputChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
});
}}
onExtraEditorChange={(payload: { name: string; json: any }) =>
onChange(ActionType.extraEditorChange, payload)
}
/>
)}
{editNewDb && (
<DatabaseConnectionForm
isEditMode
sslForced={sslForced}
dbModel={dbModel}
db={dbFetched as DatabaseObject}
onParametersChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.parametersChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
getValidation={() => getValidation(db)}
validationErrors={validationErrors}
/>
)}
{renderExtraOptions()}
</>
) : (
<>
Expand Down

0 comments on commit aa22011

Please sign in to comment.