refactor: move CTAS/CVAS field II (#13877)

Co-authored-by: lyndsiWilliams <kcatgirl@gmail.com>

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

@@ -43,6 +43,9 @@ interface DatabaseModalProps {
 }
 
 const DEFAULT_TAB_KEY = '1';
+const EXPOSE_SQLLAB_FORM_HEIGHT = '270px';
+const CTAS_CVAS_SCHEMA_FORM_HEIGHT = '94px';
+
 const StyledIcon = styled(Icon)`
   margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
 `;
@@ -54,6 +57,17 @@ const StyledInputContainer = styled.div`
     padding-top: 8px;
   }
 
+  &.expandable {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.25s;
+    margin-left: ${({ theme }) => theme.gridUnit * 8}px;
+    padding: 0;
+    &.open {
+      height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT};
+    }
+  }
+
   .helper {
     display: block;
     padding: ${({ theme }) => theme.gridUnit}px 0;
@@ -69,11 +83,14 @@ const StyledInputContainer = styled.div`
 
   .input-container {
     display: flex;
-    align-items: center;
+    align-items: top;
 
     label {
       display: flex;
-      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+      margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+      margin-top: ${({ theme }) => theme.gridUnit * 0.75}px;
+      font-family: ${({ theme }) => theme.typography.families.sansSerif};
+      font-size: ${({ theme }) => theme.typography.sizes.m}px;
     }
 
     i {
@@ -122,6 +139,23 @@ const StyledJsonEditor = styled(JsonEditor)`
   border-radius: ${({ theme }) => theme.gridUnit}px;
 `;
 
+const StyledExpandableForm = styled.div`
+  padding-top: ${({ theme }) => theme.gridUnit}px;
+  .input-container {
+    padding-top: ${({ theme }) => theme.gridUnit}px;
+    padding-bottom: ${({ theme }) => theme.gridUnit}px;
+  }
+  &.expandable {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.25s;
+    margin-left: ${({ theme }) => theme.gridUnit * 7}px;
+    &.open {
+      height: ${EXPOSE_SQLLAB_FORM_HEIGHT};
+    }
+  }
+`;
+
 const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   addDangerToast,
   addSuccessToast,
@@ -221,16 +255,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = event;
+    const { checked, name, value, type } = target;
     const data = {
-      database_name: db ? db.database_name : '',
-      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+      database_name: db?.database_name || '',
+      sqlalchemy_uri: db?.sqlalchemy_uri || '',
       ...db,
     };
 
-    if (target.type === 'checkbox') {
-      data[target.name] = target.checked;
+    if (type === 'checkbox') {
+      data[name] = checked;
     } else {
-      data[target.name] = target.value;
+      data[name] = value;
     }
 
     setDB(data);
@@ -238,20 +273,21 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   const onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { target } = event;
+    const { name, value } = target;
     const data = {
-      database_name: db ? db.database_name : '',
-      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+      database_name: db?.database_name || '',
+      sqlalchemy_uri: db?.sqlalchemy_uri || '',
       ...db,
     };
 
-    data[target.name] = target.value;
+    data[name] = value;
     setDB(data);
   };
 
   const onEditorChange = (json: string, name: string) => {
     const data = {
-      database_name: db ? db.database_name : '',
-      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+      database_name: db?.database_name || '',
+      sqlalchemy_uri: db?.sqlalchemy_uri || '',
       ...db,
     };
 
@@ -275,9 +311,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   // Initialize
   if (
     isEditMode &&
-    (!db || !db.id || (database && database.id !== db.id) || (isHidden && show))
+    (!db || !db.id || database?.id !== db.id || (isHidden && show))
   ) {
-    if (database && database.id !== null && !dbLoading) {
+    if (database?.id && !dbLoading) {
       const id = database.id || 0;
       setTabKey(DEFAULT_TAB_KEY);
 
@@ -285,11 +321,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         .then(() => {
           setDB(dbFetched);
         })
-        .catch(errMsg =>
+        .catch(e =>
           addDangerToast(
             t(
               'Sorry there was an error fetching database information: %s',
-              errMsg.message,
+              e.message,
             ),
           ),
         );
@@ -305,7 +341,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   // Validation
   useEffect(() => {
     validate();
-  }, [db ? db.database_name : null, db ? db.sqlalchemy_uri : null]);
+  }, [db?.database_name || null, db?.sqlalchemy_uri || null]);
 
   // Show/hide
   if (isHidden && show) {
@@ -316,6 +352,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
+  const expandableModalIsOpen = !!db?.expose_in_sqllab;
+  const createAsOpen = !!(db?.allow_ctas || db?.allow_cvas);
+
   return (
     <Modal
       name="database"
@@ -356,7 +395,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <input
                 type="text"
                 name="database_name"
-                value={db ? db.database_name : ''}
+                value={db?.database_name || ''}
                 placeholder={t('Name your dataset')}
                 onChange={onInputChange}
               />
@@ -371,7 +410,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <input
                 type="text"
                 name="sqlalchemy_uri"
-                value={db ? db.sqlalchemy_uri : ''}
+                value={db?.sqlalchemy_uri || ''}
                 autoComplete="off"
                 placeholder={t(
                   'dialect+driver://username:password@host:port/database',
@@ -402,7 +441,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <input
                 type="number"
                 name="cache_timeout"
-                value={db ? db.cache_timeout || '' : ''}
+                value={db?.cache_timeout || ''}
                 placeholder={t('Chart cache timeout')}
                 onChange={onInputChange}
               />
@@ -420,10 +459,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <IndeterminateCheckbox
                 id="allow_run_async"
                 indeterminate={false}
-                checked={db ? !!db.allow_run_async : false}
+                checked={!!db?.allow_run_async}
                 onChange={onInputChange}
+                labelText={t('Asynchronous query execution')}
               />
-              <div>{t('Asynchronous query execution')}</div>
               <InfoTooltip
                 tooltip={t(
                   'Operate the database in asynchronous mode, meaning that the queries ' +
@@ -442,95 +481,107 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 <IndeterminateCheckbox
                   id="expose_in_sqllab"
                   indeterminate={false}
-                  checked={db ? !!db.expose_in_sqllab : false}
+                  checked={!!db?.expose_in_sqllab}
                   onChange={onInputChange}
+                  labelText={t('Expose in SQL Lab')}
                 />
-                <div>{t('Expose in SQL Lab')}</div>
                 <InfoTooltip
                   tooltip={t('Allow this database to be queried in SQL Lab')}
                 />
               </div>
+              <StyledExpandableForm
+                className={`expandable ${expandableModalIsOpen ? 'open' : ''}`}
+              >
+                <StyledInputContainer>
+                  <div className="input-container">
+                    <IndeterminateCheckbox
+                      id="allow_ctas"
+                      indeterminate={false}
+                      checked={!!db?.allow_ctas}
+                      onChange={onInputChange}
+                      labelText={t('Allow CREATE TABLE AS')}
+                    />
+                    <InfoTooltip
+                      tooltip={t(
+                        'Allow creation of new tables based on queries',
+                      )}
+                    />
+                  </div>
+                </StyledInputContainer>
+                <StyledInputContainer>
+                  <div className="input-container">
+                    <IndeterminateCheckbox
+                      id="allow_cvas"
+                      indeterminate={false}
+                      checked={!!db?.allow_cvas}
+                      onChange={onInputChange}
+                      labelText={t('Allow CREATE VIEW AS')}
+                    />
+                    <InfoTooltip
+                      tooltip={t(
+                        'Allow creation of new views based on queries',
+                      )}
+                    />
+                  </div>
+                  <StyledInputContainer
+                    className={`expandable ${createAsOpen ? 'open' : ''}`}
+                  >
+                    <div className="control-label">
+                      {t('CTAS & CVAS SCHEMA')}
+                    </div>
+                    <div className="input-container">
+                      <input
+                        type="text"
+                        name="force_ctas_schema"
+                        value={db?.force_ctas_schema || ''}
+                        placeholder={t('Search or select schema')}
+                        onChange={onInputChange}
+                      />
+                    </div>
+                    <div className="helper">
+                      {t(
+                        'When allowing CREATE TABLE AS option in SQL Lab, this option ' +
+                          'forces the table to be created in this schema.',
+                      )}
+                    </div>
+                  </StyledInputContainer>
+                </StyledInputContainer>
+                <StyledInputContainer>
+                  <div className="input-container">
+                    <IndeterminateCheckbox
+                      id="allow_dml"
+                      indeterminate={false}
+                      checked={!!db?.allow_dml}
+                      onChange={onInputChange}
+                      labelText={t('Allow DML')}
+                    />
+                    <InfoTooltip
+                      tooltip={t(
+                        'Allow manipulation of the database using non-SELECT statements such as UPDATE, DELETE, CREATE, etc.',
+                      )}
+                    />
+                  </div>
+                </StyledInputContainer>
+                <StyledInputContainer>
+                  <div className="input-container">
+                    <IndeterminateCheckbox
+                      id="allow_multi_schema_metadata_fetch"
+                      indeterminate={false}
+                      checked={!!db?.allow_multi_schema_metadata_fetch}
+                      onChange={onInputChange}
+                      labelText={t('Allow multi schema metadata fetch')}
+                    />
+                    <InfoTooltip
+                      tooltip={t(
+                        'Allow SQL Lab to fetch a list of all tables and all views across all database ' +
+                          'schemas. For large data warehouse with thousands of tables, this can be ' +
+                          'expensive and put strain on the system.',
+                      )}
+                    />
+                  </div>
+                </StyledInputContainer>
+              </StyledExpandableForm>
             </StyledInputContainer>
-            <StyledInputContainer>
-              <div className="input-container">
-                <IndeterminateCheckbox
-                  id="allow_ctas"
-                  indeterminate={false}
-                  checked={db ? !!db.allow_ctas : false}
-                  onChange={onInputChange}
-                />
-                <div>{t('Allow CREATE TABLE AS')}</div>
-                <InfoTooltip
-                  tooltip={t('Allow creation of new tables based on queries')}
-                />
-              </div>
-            </StyledInputContainer>
-            <StyledInputContainer>
-              <div className="input-container">
-                <IndeterminateCheckbox
-                  id="allow_cvas"
-                  indeterminate={false}
-                  checked={db ? !!db.allow_cvas : false}
-                  onChange={onInputChange}
-                />
-                <div>{t('Allow CREATE VIEW AS')}</div>
-                <InfoTooltip
-                  tooltip={t('Allow creation of new views based on queries')}
-                />
-              </div>
-            </StyledInputContainer>
-            <StyledInputContainer>
-              <div className="input-container">
-                <IndeterminateCheckbox
-                  id="allow_dml"
-                  indeterminate={false}
-                  checked={db ? !!db.allow_dml : false}
-                  onChange={onInputChange}
-                />
-                <div>{t('Allow DML')}</div>
-                <InfoTooltip
-                  tooltip={t(
-                    'Allow manipulation of the database using non-SELECT statements such as UPDATE, DELETE, CREATE, etc.',
-                  )}
-                />
-              </div>
-            </StyledInputContainer>
-            <StyledInputContainer>
-              <div className="input-container">
-                <IndeterminateCheckbox
-                  id="allow_multi_schema_metadata_fetch"
-                  indeterminate={false}
-                  checked={db ? !!db.allow_multi_schema_metadata_fetch : false}
-                  onChange={onInputChange}
-                />
-                <div>{t('Allow multi schema metadata fetch')}</div>
-                <InfoTooltip
-                  tooltip={t(
-                    'Allow SQL Lab to fetch a list of all tables and all views across all database ' +
-                      'schemas. For large data warehouse with thousands of tables, this can be ' +
-                      'expensive and put strain on the system.',
-                  )}
-                />
-              </div>
-            </StyledInputContainer>
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <div className="control-label">{t('CTAS schema')}</div>
-            <div className="input-container">
-              <input
-                type="text"
-                name="force_ctas_schema"
-                value={db ? db.force_ctas_schema || '' : ''}
-                placeholder={t('CTAS schema')}
-                onChange={onInputChange}
-              />
-            </div>
-            <div className="helper">
-              {t(
-                'When allowing CREATE TABLE AS option in SQL Lab, this option ' +
-                  'forces the table to be created in this schema.',
-              )}
-            </div>
           </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Security')}</span>} key="4">
@@ -539,7 +590,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <StyledJsonEditor
                 name="encrypted_extra"
-                value={db ? db.encrypted_extra || '' : ''}
+                value={db?.encrypted_extra || ''}
                 placeholder={t('Secure extra')}
                 onChange={(json: string) =>
                   onEditorChange(json, 'encrypted_extra')
@@ -568,7 +619,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <textarea
                 name="server_cert"
-                value={db ? db.server_cert || '' : ''}
+                value={db?.server_cert || ''}
                 placeholder={t('Root certificate')}
                 onChange={onTextChange}
               />
@@ -587,10 +638,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <IndeterminateCheckbox
                 id="impersonate_user"
                 indeterminate={false}
-                checked={db ? !!db.impersonate_user : false}
+                checked={!!db?.impersonate_user}
                 onChange={onInputChange}
+                labelText={t('Impersonate Logged In User (Presto & Hive)')}
               />
-              <div>{t('Impersonate Logged In User (Presto & Hive)')}</div>
               <InfoTooltip
                 tooltip={t(
                   'If Presto, all the queries in SQL Lab are going to be executed as the ' +
@@ -607,10 +658,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <IndeterminateCheckbox
                 id="allow_csv_upload"
                 indeterminate={false}
-                checked={db ? !!db.allow_csv_upload : false}
+                checked={!!db?.allow_csv_upload}
                 onChange={onInputChange}
+                labelText={t('Allow data upload')}
               />
-              <div>{t('Allow data upload')}</div>
               <InfoTooltip
                 tooltip={t(
                   'If selected, please set the schemas allowed for data upload in Extra.',
@@ -623,7 +674,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <StyledJsonEditor
                 name="extra"
-                value={(db && db.extra) ?? defaultExtra}
+                value={db?.extra ?? defaultExtra}
                 placeholder={t('Secure extra')}
                 onChange={(json: string) => onEditorChange(json, 'extra')}
                 width="100%"