fix: DB connection modal connect bug (#21299)

apache · Sep 2, 2022 · 99a4f05 · 99a4f05
1 parent fbe9807
commit 99a4f05
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx
@@ -271,6 +271,7 @@ describe('DatabaseModal', () => {
         hidden: true,
       });
 
+      const footer = document.getElementsByClassName('ant-modal-footer');
       // ---------- TODO (lyndsiWilliams): Selector options, can't seem to get these to render properly.
 
       // renderAvailableSelector() => <Alert> - Supported databases alert
@@ -312,6 +313,8 @@ describe('DatabaseModal', () => {
       visibleComponents.forEach(component => {
         expect(component).toBeVisible();
       });
+      // there should be a footer but it should not have any buttons in it
+      expect(footer[0]).toBeEmptyDOMElement();
       // This is how many preferred databases are rendered
       expect(preferredDbIcon).toHaveLength(4);
     });

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -847,7 +847,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   const renderModalFooter = () => {
     if (db) {
-      // if db show back + connenct
+      // if db show back + connect
       if (!hasConnectedDb || editNewDb) {
         return (
           <>
@@ -901,7 +901,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       );
     }
 
-    return [];
+    return <></>;
   };
 
   const renderEditModalFooter = (db: Partial<DatabaseObject> | null) => (
@@ -1302,7 +1302,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       </Modal>
     );
   }
-
+  const modalFooter = isEditMode
+    ? renderEditModalFooter(db)
+    : renderModalFooter();
   return useTabLayout ? (
     <Modal
       css={(theme: SupersetTheme) => [
@@ -1323,7 +1325,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       title={
         <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
       }
-      footer={isEditMode ? renderEditModalFooter(db) : renderModalFooter()}
+      footer={modalFooter}
     >
       <StyledStickyHeader>
         <TabHeader>

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -24,6 +24,7 @@ import Button from 'src/components/Button';
 const CTAS_CVAS_SCHEMA_FORM_HEIGHT = 108;
 const EXPOSE_IN_SQLLAB_FORM_HEIGHT = CTAS_CVAS_SCHEMA_FORM_HEIGHT + 153;
 const EXPOSE_ALL_FORM_HEIGHT = EXPOSE_IN_SQLLAB_FORM_HEIGHT + 102;
+const MODAL_BODY_HEIGHT = 180.5;
 
 const anticonHeight = 12;
 
@@ -156,7 +157,7 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
   }
 
   .ant-modal-body {
-    height: ${theme.gridUnit * 180.5}px;
+    height: ${theme.gridUnit * MODAL_BODY_HEIGHT}px;
   }
 
   .ant-modal-footer {