feat: add Close/Finish buttons to DBModal on Edit (#15199)

apache · Jun 16, 2021 · 1a954ff · 1a954ff
1 parent 7089580
commit 1a954ff
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -63,7 +63,7 @@ interface FieldPropTypes {
   db?: DatabaseObject;
   isEditMode?: boolean;
   sslForced?: boolean;
-  name?: string;
+  defaultDBName?: string;
 }
 
 const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
@@ -258,13 +258,13 @@ const displayField = ({
   getValidation,
   validationErrors,
   db,
-  name,
+  defaultDBName,
 }: FieldPropTypes) => (
   <ValidatedInput
     id="database_name"
     name="database_name"
     required={required}
-    value={db?.database_name || name}
+    value={db?.database_name || defaultDBName}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.database_name}
     placeholder=""
@@ -337,7 +337,7 @@ const FORM_FIELD_MAP = {
 };
 
 const DatabaseConnectionForm = ({
-  dbModel: { name, parameters },
+  dbModel: { name: defaultDBName, parameters },
   onParametersChange,
   onChange,
   onParametersUploadFileChange,
@@ -384,7 +384,7 @@ const DatabaseConnectionForm = ({
               onChange,
               onParametersUploadFileChange,
             },
-            name,
+            defaultDBName,
             validationErrors,
             getValidation,
             db,

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -541,6 +541,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         ]
       : [];
 
+  const renderEditModalFooter = () => (
+    <>
+      <StyledFooterButton key="close" onClick={onClose}>
+        Close
+      </StyledFooterButton>
+      <StyledFooterButton key="submit" buttonStyle="primary" onClick={onSave}>
+        Finish
+      </StyledFooterButton>
+    </>
+  );
   useEffect(() => {
     if (show) {
       setTabKey(DEFAULT_TAB_KEY);
@@ -593,7 +603,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       title={
         <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
       }
-      footer={renderModalFooter()}
+      footer={isEditMode ? renderEditModalFooter() : renderModalFooter()}
     >
       <TabHeader>
         <ModalHeader

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -32,6 +32,10 @@ export const no_margin_bottom = css`
   margin-bottom: 0;
 `;
 
+export const marginBottom = (theme: SupersetTheme) => css`
+  margin-bottom: ${theme.gridUnit * 4}px;
+`;
+
 export const StyledFormHeader = styled.header`
   border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid
     ${theme.colors.grayscale.light2};`}
@@ -137,7 +141,8 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
 export const antDAlertStyles = (theme: SupersetTheme) => css`
   border: 1px solid ${theme.colors.info.base};
   padding: ${theme.gridUnit * 4}px;
-  margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 3}px 0;
+  margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 3}px
+    ${theme.gridUnit * 4}px;
   .ant-alert-message {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;