chore: update text for dbconn modal (#20773)

* chore: update text for dbconn modal

* fix text and close opts for adddataset modal

* update loading state, add state change for cta btns, and styling

* remove space

superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx

@@ -108,19 +108,10 @@ const ModalHeader = ({
     <StyledStickyHeader>
       <StyledFormHeader>
         <p className="helper-top"> STEP 3 OF 3 </p>
-        <h4 className="step-3-text">
-          Your database was successfully connected! Create a dataset to begin
-          visualizing your data as a chart or go to SQL Lab to query your data.
-        </h4>
-        <p className="helper-bottom">
-          Need help? Learn more about{' '}
-          <a
-            href={documentationLink(db?.engine)}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            connecting to {dbModel.name}.
-          </a>
+        <h4 className="step-3-text">Database connected</h4>
+        <p className="subheader-text">
+          Create a dataset to begin visualizing your data as a chart or go to
+          SQL Lab to query your data.
         </p>
       </StyledFormHeader>
     </StyledStickyHeader>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -445,6 +445,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [validationErrors, getValidation, setValidationErrors] =
     useDatabaseValidation();
   const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false);
+  const [showCTAbtns, setShowCTAbtns] = useState(false);
   const [dbName, setDbName] = useState('');
   const [editNewDb, setEditNewDb] = useState<boolean>(false);
   const [isLoading, setLoading] = useState<boolean>(false);
@@ -666,6 +667,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
     }
 
+    setShowCTAbtns(true);
     setEditNewDb(false);
     setLoading(false);
   };
@@ -808,6 +810,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (dbFetched) {
       fetchResource(dbFetched.id as number);
     }
+    setShowCTAbtns(false);
     setEditNewDb(true);
   };
 
@@ -1156,24 +1159,25 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     <StyledBtns>
       <Button
         // eslint-disable-next-line no-return-assign
-        buttonStyle="default"
+        buttonStyle="secondary"
         onClick={() => {
+          setLoading(true);
           fetchAndSetDB();
-          window.location.href = '/tablemodelview/list';
+          window.location.href = '/tablemodelview/list#create';
         }}
       >
-        {' '}
-        {t('CREATE A DATASET')}{' '}
+        {t('CREATE DATASET')}
       </Button>
       <Button
-        buttonStyle="default"
+        buttonStyle="secondary"
         // eslint-disable-next-line no-return-assign
         onClick={() => {
+          setLoading(true);
           fetchAndSetDB();
           window.location.href = `/superset/sqllab/?db=true`;
         }}
       >
-        {t('QUERY DATA IN SQL LAB')}{' '}
+        {t('QUERY DATA IN SQL LAB')}
       </Button>
     </StyledBtns>
   );
@@ -1498,7 +1502,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       title={<h4>{t('Connect a database')}</h4>}
       footer={renderModalFooter()}
     >
-      {hasConnectedDb ? (
+      {!isLoading && hasConnectedDb ? (
         <>
           <ModalHeader
             isLoading={isLoading}
@@ -1510,7 +1514,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             dbModel={dbModel}
             editNewDb={editNewDb}
           />
-          {renderCTABtns()}
+          {showCTAbtns && renderCTABtns()}
           {renderFinishState()}
         </>
       ) : (

superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts

@@ -51,6 +51,10 @@ export const StyledFormHeader = styled.header`
     margin: 0;
   }
 
+  .subheader-text {
+    line-height: ${({ theme }) => theme.gridUnit * 4.25}px;
+  }
+
   .helper-bottom {
     padding-top: 0;
     color: ${({ theme }) => theme.colors.grayscale.base};