From fbcbb0e74cae7808c31ae38451245e1b5d707bca Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 28 Aug 2020 11:18:28 -0700
Subject: [PATCH 01/20] Add test connection button

---
 .../CRUD/data/database/DatabaseModal.tsx      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index de73614a07c95..254a83a38f4f9 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -16,13 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import Icon from 'src/components/Icon';
 import Modal from 'src/common/components/Modal';
 import Tabs from 'src/common/components/Tabs';
 import { DatabaseObject } from './types';
+import Button from 'src/components/Button';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -70,6 +71,10 @@ const StyledInputContainer = styled.div`
       flex: 0 1 auto;
       width: 40%;
     }
+
+    &[name='uri'] {
+      margin-right: ${({ theme }) => theme.gridUnit * 3}px;
+    }
   }
 `;
 
@@ -81,9 +86,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   show,
   database = null,
 }) => {
-  // const [disableSave, setDisableSave] = useState(true);
-  const [disableSave] = useState<boolean>(true);
-  const [db, setDB] = useState<Partial<DatabaseObject> | null>(null);
+  const [disableSave, setDisableSave] = useState<boolean>(true);
+  const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   // Functions
@@ -113,6 +117,14 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setDB(data);
   };
 
+  const validate = () => {
+    if (db && db.name.length && db.uri.length) {
+      setDisableSave(false);
+    } else {
+      setDisableSave(true);
+    }
+  };
+
   const isEditMode = database !== null;
 
   // Initialize
@@ -128,6 +140,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     });
   }
 
+  // Validation
+  useEffect(() => {
+    validate();
+  });
+
   // Show/hide
   if (isHidden && show) {
     setIsHidden(false);
@@ -187,6 +204,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 placeholder={t('SQLAlchemy URI')}
                 onChange={onInputChange}
               />
+              <Button className="supersetButton primary">
+                {t('Test Connection')}
+              </Button>
             </div>
             <div className="helper">
               {t('Refer to the ')}

From fed1592d4fa0d9bb8ce0b6a7330ae6b7682b555d Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 28 Aug 2020 12:15:37 -0700
Subject: [PATCH 02/20] performance tab

---
 .../CRUD/data/database/DatabaseModal.tsx      | 54 +++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 254a83a38f4f9..951209ba7830b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -24,6 +24,7 @@ import Modal from 'src/common/components/Modal';
 import Tabs from 'src/common/components/Tabs';
 import { DatabaseObject } from './types';
 import Button from 'src/components/Button';
+import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -46,7 +47,7 @@ const StyledInputContainer = styled.div`
     display: block;
     padding: ${({ theme }) => theme.gridUnit}px 0;
     color: ${({ theme }) => theme.colors.grayscale.light1};
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+    font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
     text-align: left;
 
     .required {
@@ -57,10 +58,20 @@ const StyledInputContainer = styled.div`
 
   .input-container {
     display: flex;
+    align-items: center;
+
+    label {
+      display: flex;
+      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+    }
   }
 
-  input[type='text'] {
+  input {
     flex: 1 1 auto;
+  }
+
+  input[type='text'],
+  input[type='number'] {
     padding: ${({ theme }) => theme.gridUnit * 1.5}px
       ${({ theme }) => theme.gridUnit * 2}px;
     border-style: none;
@@ -90,6 +101,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
+  console.log('db', db);
+
   // Functions
   const hide = () => {
     setIsHidden(true);
@@ -112,7 +125,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       ...db,
     };
 
-    data[target.name] = target.value;
+    if (target.type === 'checkbox') {
+      data[target.name] = target.checked;
+    } else {
+      data[target.name] = target.value;
+    }
 
     setDB(data);
   };
@@ -222,7 +239,36 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Performance')}</span>} key="2">
-          Performance Form Data
+          <StyledInputContainer>
+            <div className="label">{t('Chart Cache Timeout')}</div>
+            <div className="input-container">
+              <input
+                type="number"
+                name="chartCacheTimeout"
+                value={db ? db.chartCacheTimeout || '' : ''}
+                placeholder={t('Chart Cache Timeout')}
+                onChange={onInputChange}
+              />
+            </div>
+            <div className="helper">
+              {t(
+                'Duration (in seconds) of the caching timeout for charts of this database.',
+              )}
+              {t(' A timeout of 0 indicates that the cache never expires.')}
+              {t(' Note this defaults to the global timeout if undefined.')}
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="asynchronousQueryExecution"
+                indeterminate={false}
+                checked={db ? !!db.asynchronousQueryExecution : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Asynchronous Query Execution')}</div>
+            </div>
+          </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
           SQL Lab Settings Form Data

From 70feb8dc44382fc650d601b3453a58ffa36192a8 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 28 Aug 2020 14:59:48 -0700
Subject: [PATCH 03/20] sql lab, security and extra tabs

---
 .../CRUD/data/database/DatabaseModal.tsx      | 286 +++++++++++++++++-
 1 file changed, 282 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 951209ba7830b..5e42aba1492ce 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -25,6 +25,7 @@ import Tabs from 'src/common/components/Tabs';
 import { DatabaseObject } from './types';
 import Button from 'src/components/Button';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -64,12 +65,23 @@ const StyledInputContainer = styled.div`
       display: flex;
       margin-right: ${({ theme }) => theme.gridUnit * 2}px;
     }
+
+    i {
+      margin: 0 ${({ theme }) => theme.gridUnit}px;
+    }
   }
 
-  input {
+  input,
+  textarea {
     flex: 1 1 auto;
   }
 
+  textarea {
+    height: 160px;
+    resize: none;
+  }
+
+  textarea,
   input[type='text'],
   input[type='number'] {
     padding: ${({ theme }) => theme.gridUnit * 1.5}px
@@ -134,6 +146,18 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setDB(data);
   };
 
+  const onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const target = event.target;
+    const data = {
+      name: db ? db.name : '',
+      uri: db ? db.uri : '',
+      ...db,
+    };
+
+    data[target.name] = target.value;
+    setDB(data);
+  };
+
   const validate = () => {
     if (db && db.name.length && db.uri.length) {
       setDisableSave(false);
@@ -267,17 +291,271 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 onChange={onInputChange}
               />
               <div>{t('Asynchronous Query Execution')}</div>
+              <InfoTooltipWithTrigger
+                label="aqe"
+                tooltip={
+                  t(
+                    'Operate the database in asynchronous mode, meaning that the queries ',
+                  ) +
+                  t(
+                    'are executed on remote workers as opposed to on the web server itself. ',
+                  ) +
+                  t(
+                    'This assumes that you have a Celery worker setup as well as a results ',
+                  ) +
+                  t(
+                    'backend. Refer to the installation docs for more information.',
+                  )
+                }
+              />
             </div>
           </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
-          SQL Lab Settings Form Data
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="sqlExpose"
+                indeterminate={false}
+                checked={db ? !!db.sqlExpose : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Expose in SQL Lab')}</div>
+              <InfoTooltipWithTrigger
+                label="sql-expose"
+                tooltip={t('Expose this DB in SQL Lab')}
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allowCTA"
+                indeterminate={false}
+                checked={db ? !!db.allowCTA : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Allow CREATE TABLE AS')}</div>
+              <InfoTooltipWithTrigger
+                label="allow-cta"
+                tooltip={t('Allow CREATE TABLE AS option in SQL Lab')}
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allowCVA"
+                indeterminate={false}
+                checked={db ? !!db.allowCVA : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Allow CREATE VIEW AS')}</div>
+              <InfoTooltipWithTrigger
+                label="allow-cva"
+                tooltip={t('Allow CREATE VIEW AS option in SQL Lab')}
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allowDML"
+                indeterminate={false}
+                checked={db ? !!db.allowDML : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Allow DML')}</div>
+              <InfoTooltipWithTrigger
+                label="allow-dml"
+                tooltip={t(
+                  'Allow users to run non-SELECT statements (UPDATE, DELETE, CREATE, ...)',
+                )}
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allowMSMF"
+                indeterminate={false}
+                checked={db ? !!db.allowMSMF : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Allow Multi Schema Metadata Fetch')}</div>
+              <InfoTooltipWithTrigger
+                label="allow-msmf"
+                tooltip={
+                  t(
+                    'Allow SQL Lab to fetch a list of all tables and all views across all database ',
+                  ) +
+                  t(
+                    'schemas. For large data warehouse with thousands of tables, this can be ',
+                  ) +
+                  t('expensive and put strain on the system.')
+                }
+              />
+            </div>
+          </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Security')}</span>} key="4">
-          Security Form Data
+          <StyledInputContainer>
+            <div className="label">{t('Secure Extra')}</div>
+            <div className="input-container">
+              <textarea
+                name="secureExtra"
+                value={db ? db.secureExtra || '' : ''}
+                placeholder={t('Secure Extra')}
+                onChange={onTextChange}
+              />
+            </div>
+            <div className="helper">
+              <div>
+                {t(
+                  'JSON string containing additional connection configuration.',
+                )}
+              </div>
+              <div>
+                {t(
+                  'This is used to provide connection information for systems like Hive, ',
+                ) +
+                  t(
+                    'Presto, and BigQuery, which do not conform to the username:password syntax ',
+                  ) +
+                  t('normally used by SQLAlchemy.')}
+              </div>
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="label">{t('Root Certificate')}</div>
+            <div className="input-container">
+              <textarea
+                name="rootCertificate"
+                value={db ? db.rootCertificate || '' : ''}
+                placeholder={t('Root Certificate')}
+                onChange={onTextChange}
+              />
+            </div>
+            <div className="helper">
+              {t(
+                'Optional CA_BUNDLE contents to validate HTTPS requests. Only available on ',
+              ) + t('certain database engines.')}
+            </div>
+          </StyledInputContainer>
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Extra')}</span>} key="5">
-          Extra Form Data
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="impersonateUser"
+                indeterminate={false}
+                checked={db ? !!db.impersonateUser : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Impersonate Logged In User (Presto & Hive')}</div>
+              <InfoTooltipWithTrigger
+                label="impersonate"
+                tooltip={
+                  t(
+                    'If Presto, all the queries in SQL Lab are going to be executed as the ',
+                  ) +
+                  t(
+                    'currently logged on user who must have permission to run them. If Hive ',
+                  ) +
+                  t(
+                    'and hive.server2.enable.doAs is enabled, will run the queries as ',
+                  ) +
+                  t(
+                    'service account, but impersonate the currently logged on user via ',
+                  ) +
+                  t('hive.server2.proxy.user property.')
+                }
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="input-container">
+              <IndeterminateCheckbox
+                id="allowCSV"
+                indeterminate={false}
+                checked={db ? !!db.allowCSV : false}
+                onChange={onInputChange}
+              />
+              <div>{t('Allow CSV Upload')}</div>
+              <InfoTooltipWithTrigger
+                label="allow-csv"
+                tooltip={t(
+                  'If selected, please set the schemas allowed for csv upload in Extra.',
+                )}
+              />
+            </div>
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <div className="label">{t('Extra')}</div>
+            <div className="input-container">
+              <textarea
+                name="extra"
+                value={db ? db.extra || '' : ''}
+                placeholder={
+                  '{\n  "metadata_params": {},\n  "engine_params": {},' +
+                  '\n  "metadata_cache_timeout": {},\n  "schemas_allowed_for_csv_upload": [] \n}'
+                }
+                onChange={onTextChange}
+              />
+            </div>
+            <div className="helper">
+              <div>
+                {t('JSON string containing extra configuration elements.')}
+              </div>
+              <div>
+                {t(
+                  '1. The engine_params object gets unpacked into the sqlalchemy.create_engine ',
+                ) +
+                  t(
+                    'call, while the metadata_params gets unpacked into the sqlalchemy.MetaData ',
+                  ) +
+                  t('call.')}
+              </div>
+              <div>
+                {t(
+                  '2. The metadata_cache_timeout is a cache timeout setting in seconds for ',
+                ) +
+                  t(
+                    'metadata fetch of this database. Specify it as "metadata_cache_timeout": ',
+                  ) +
+                  t(
+                    '{"schema_cache_timeout": 600, "table_cache_timeout": 600}. If unset, cache ',
+                  ) +
+                  t(
+                    'will not be enabled for the functionality. A timeout of 0 indicates that ',
+                  ) +
+                  t('the cache never expires.')}
+              </div>
+              <div>
+                {t(
+                  '3. The schemas_allowed_for_csv_upload is a comma separated list of schemas ',
+                ) +
+                  t('that CSVs are allowed to upload to. Specify it as ') +
+                  t(
+                    '{"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ',
+                  ) +
+                  t(
+                    'flavor does not support schema or any schema is allowed to be accessed, ',
+                  ) +
+                  t('just leave the list empty.')}
+              </div>
+              <div>
+                {t(
+                  "4. The version field is a string specifying this db's version. This ",
+                ) + t('be used with Presto DBs so that the syntax is correct.')}
+              </div>
+              <div>
+                {t(
+                  '5. The allows_virtual_table_explore field is a boolean specifying whether ',
+                ) + t('or not the Explore button in SQL Lab results is shown.')}
+              </div>
+            </div>
+          </StyledInputContainer>
         </Tabs.TabPane>
       </Tabs>
     </Modal>

From df61a5c42152493eb89e085853f2520f1790d85e Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 31 Aug 2020 10:59:43 -0700
Subject: [PATCH 04/20] styling tweaks

---
 superset-frontend/src/common/components/Tabs.tsx             | 1 +
 .../src/views/CRUD/data/database/DatabaseModal.tsx           | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/superset-frontend/src/common/components/Tabs.tsx b/superset-frontend/src/common/components/Tabs.tsx
index a02401581feb8..932e444b1d3ca 100644
--- a/superset-frontend/src/common/components/Tabs.tsx
+++ b/superset-frontend/src/common/components/Tabs.tsx
@@ -40,6 +40,7 @@ const StyledTabs = styled(AntdTabs)`
     font-size: ${({ theme }) => theme.typography.sizes.s}px;
     text-align: center;
     text-transform: uppercase;
+    user-select: none;
 
     .required {
       margin-left: ${({ theme }) => theme.gridUnit / 2}px;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 5e42aba1492ce..904ae17e8208b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -81,6 +81,11 @@ const StyledInputContainer = styled.div`
     resize: none;
   }
 
+  input::placeholder,
+  textarea::placeholder {
+      color: ${({ theme }) => theme.colors.grayscale.light1};
+  }
+
   textarea,
   input[type='text'],
   input[type='number'] {

From 03fe951f3ed89ee9353e13c7463b8d281e8850b9 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 31 Aug 2020 14:18:17 -0700
Subject: [PATCH 05/20] fix buttons

---
 superset-frontend/src/common/components/Modal.tsx           | 4 +++-
 .../src/views/CRUD/data/database/DatabaseModal.tsx          | 6 ++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/common/components/Modal.tsx b/superset-frontend/src/common/components/Modal.tsx
index 5895c405870ea..9e97f6f2d8fea 100644
--- a/superset-frontend/src/common/components/Modal.tsx
+++ b/superset-frontend/src/common/components/Modal.tsx
@@ -107,13 +107,15 @@ export default function Modal({
         </span>
       }
       footer={[
-        <Button key="back" onClick={onHide}>
+        <Button key="back" onClick={onHide} cta>
           {t('Cancel')}
         </Button>,
         <Button
           key="submit"
+          buttonStyle={primaryButtonType}
           disabled={disablePrimaryButton}
           onClick={onHandledPrimaryAction}
+          cta
         >
           {primaryButtonName}
         </Button>,
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 904ae17e8208b..6e5363ad141f1 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -83,7 +83,7 @@ const StyledInputContainer = styled.div`
 
   input::placeholder,
   textarea::placeholder {
-      color: ${({ theme }) => theme.colors.grayscale.light1};
+    color: ${({ theme }) => theme.colors.grayscale.light1};
   }
 
   textarea,
@@ -250,9 +250,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 placeholder={t('SQLAlchemy URI')}
                 onChange={onInputChange}
               />
-              <Button className="supersetButton primary">
-                {t('Test Connection')}
-              </Button>
+              <Button buttonStyle="primary">{t('Test Connection')}</Button>
             </div>
             <div className="helper">
               {t('Refer to the ')}

From 3756d03085cff994c405eeaf2868a617203787a7 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 31 Aug 2020 14:36:44 -0700
Subject: [PATCH 06/20] rm console statement

---
 .../src/views/CRUD/data/database/DatabaseModal.tsx              | 2 --
 1 file changed, 2 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 6e5363ad141f1..ee4ed8651aaba 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -118,8 +118,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
-  console.log('db', db);
-
   // Functions
   const hide = () => {
     setIsHidden(true);

From c07e8da6f6bc826e34bb6e1db1335e6a4912e5e1 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 31 Aug 2020 17:05:28 -0700
Subject: [PATCH 07/20] add CTAS Schema input

---
 .../CRUD/data/database/DatabaseModal.tsx      | 179 ++++++++++--------
 1 file changed, 101 insertions(+), 78 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index ee4ed8651aaba..355548958e375 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -314,88 +314,108 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('SQL Lab Settings')}</span>} key="3">
           <StyledInputContainer>
-            <div className="input-container">
-              <IndeterminateCheckbox
-                id="sqlExpose"
-                indeterminate={false}
-                checked={db ? !!db.sqlExpose : false}
-                onChange={onInputChange}
-              />
-              <div>{t('Expose in SQL Lab')}</div>
-              <InfoTooltipWithTrigger
-                label="sql-expose"
-                tooltip={t('Expose this DB in SQL Lab')}
-              />
-            </div>
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <div className="input-container">
-              <IndeterminateCheckbox
-                id="allowCTA"
-                indeterminate={false}
-                checked={db ? !!db.allowCTA : false}
-                onChange={onInputChange}
-              />
-              <div>{t('Allow CREATE TABLE AS')}</div>
-              <InfoTooltipWithTrigger
-                label="allow-cta"
-                tooltip={t('Allow CREATE TABLE AS option in SQL Lab')}
-              />
-            </div>
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <div className="input-container">
-              <IndeterminateCheckbox
-                id="allowCVA"
-                indeterminate={false}
-                checked={db ? !!db.allowCVA : false}
-                onChange={onInputChange}
-              />
-              <div>{t('Allow CREATE VIEW AS')}</div>
-              <InfoTooltipWithTrigger
-                label="allow-cva"
-                tooltip={t('Allow CREATE VIEW AS option in SQL Lab')}
-              />
-            </div>
+            <StyledInputContainer>
+              <div className="input-container">
+                <IndeterminateCheckbox
+                  id="sqlExpose"
+                  indeterminate={false}
+                  checked={db ? !!db.sqlExpose : false}
+                  onChange={onInputChange}
+                />
+                <div>{t('Expose in SQL Lab')}</div>
+                <InfoTooltipWithTrigger
+                  label="sql-expose"
+                  tooltip={t('Expose this DB in SQL Lab')}
+                />
+              </div>
+            </StyledInputContainer>
+            <StyledInputContainer>
+              <div className="input-container">
+                <IndeterminateCheckbox
+                  id="allowCTA"
+                  indeterminate={false}
+                  checked={db ? !!db.allowCTA : false}
+                  onChange={onInputChange}
+                />
+                <div>{t('Allow CREATE TABLE AS')}</div>
+                <InfoTooltipWithTrigger
+                  label="allow-cta"
+                  tooltip={t('Allow CREATE TABLE AS option in SQL Lab')}
+                />
+              </div>
+            </StyledInputContainer>
+            <StyledInputContainer>
+              <div className="input-container">
+                <IndeterminateCheckbox
+                  id="allowCVA"
+                  indeterminate={false}
+                  checked={db ? !!db.allowCVA : false}
+                  onChange={onInputChange}
+                />
+                <div>{t('Allow CREATE VIEW AS')}</div>
+                <InfoTooltipWithTrigger
+                  label="allow-cva"
+                  tooltip={t('Allow CREATE VIEW AS option in SQL Lab')}
+                />
+              </div>
+            </StyledInputContainer>
+            <StyledInputContainer>
+              <div className="input-container">
+                <IndeterminateCheckbox
+                  id="allowDML"
+                  indeterminate={false}
+                  checked={db ? !!db.allowDML : false}
+                  onChange={onInputChange}
+                />
+                <div>{t('Allow DML')}</div>
+                <InfoTooltipWithTrigger
+                  label="allow-dml"
+                  tooltip={t(
+                    'Allow users to run non-SELECT statements (UPDATE, DELETE, CREATE, ...)',
+                  )}
+                />
+              </div>
+            </StyledInputContainer>
+            <StyledInputContainer>
+              <div className="input-container">
+                <IndeterminateCheckbox
+                  id="allowMSMF"
+                  indeterminate={false}
+                  checked={db ? !!db.allowMSMF : false}
+                  onChange={onInputChange}
+                />
+                <div>{t('Allow Multi Schema Metadata Fetch')}</div>
+                <InfoTooltipWithTrigger
+                  label="allow-msmf"
+                  tooltip={
+                    t(
+                      'Allow SQL Lab to fetch a list of all tables and all views across all database ',
+                    ) +
+                    t(
+                      'schemas. For large data warehouse with thousands of tables, this can be ',
+                    ) +
+                    t('expensive and put strain on the system.')
+                  }
+                />
+              </div>
+            </StyledInputContainer>
           </StyledInputContainer>
           <StyledInputContainer>
+            <div className="label">{t('CTAS Schema')}</div>
             <div className="input-container">
-              <IndeterminateCheckbox
-                id="allowDML"
-                indeterminate={false}
-                checked={db ? !!db.allowDML : false}
+              <input
+                type="number"
+                name="forceCTASSchema"
+                value={db ? db.forceCTASSchema || '' : ''}
+                placeholder={t('CTAS Schema')}
                 onChange={onInputChange}
               />
-              <div>{t('Allow DML')}</div>
-              <InfoTooltipWithTrigger
-                label="allow-dml"
-                tooltip={t(
-                  'Allow users to run non-SELECT statements (UPDATE, DELETE, CREATE, ...)',
-                )}
-              />
             </div>
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <div className="input-container">
-              <IndeterminateCheckbox
-                id="allowMSMF"
-                indeterminate={false}
-                checked={db ? !!db.allowMSMF : false}
-                onChange={onInputChange}
-              />
-              <div>{t('Allow Multi Schema Metadata Fetch')}</div>
-              <InfoTooltipWithTrigger
-                label="allow-msmf"
-                tooltip={
-                  t(
-                    'Allow SQL Lab to fetch a list of all tables and all views across all database ',
-                  ) +
-                  t(
-                    'schemas. For large data warehouse with thousands of tables, this can be ',
-                  ) +
-                  t('expensive and put strain on the system.')
-                }
-              />
+            <div className="helper">
+              {t(
+                'When allowing CREATE TABLE AS option in SQL Lab, this option ',
+              )}{' '}
+              +{t('forces the table to be created in this schema')}
             </div>
           </StyledInputContainer>
         </Tabs.TabPane>
@@ -538,7 +558,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 ) +
                   t('that CSVs are allowed to upload to. Specify it as ') +
                   t(
-                    '{"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ',
+                    '"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ',
                   ) +
                   t(
                     'flavor does not support schema or any schema is allowed to be accessed, ',
@@ -548,7 +568,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <div>
                 {t(
                   "4. The version field is a string specifying this db's version. This ",
-                ) + t('be used with Presto DBs so that the syntax is correct.')}
+                ) +
+                  t(
+                    'should be used with Presto DBs so that the syntax is correct.',
+                  )}
               </div>
               <div>
                 {t(

From 88369c962d93ed4237d6c0890270f3de9f9dd959 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 31 Aug 2020 17:18:21 -0700
Subject: [PATCH 08/20] update db props

---
 .../CRUD/data/database/DatabaseModal.tsx      | 68 +++++++++----------
 .../src/views/CRUD/data/database/types.ts     | 30 ++++++--
 2 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 355548958e375..81e4cd4c13d21 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -100,7 +100,7 @@ const StyledInputContainer = styled.div`
       width: 40%;
     }
 
-    &[name='uri'] {
+    &[name='sqlalchemy_uri'] {
       margin-right: ${({ theme }) => theme.gridUnit * 3}px;
     }
   }
@@ -136,7 +136,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     const target = event.target;
     const data = {
       database_name: db ? db.database_name : '',
-      uri: db ? db.uri : '',
+      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
       ...db,
     };
 
@@ -152,8 +152,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const target = event.target;
     const data = {
-      name: db ? db.name : '',
-      uri: db ? db.uri : '',
+      database_name: db ? db.database_name : '',
+      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
       ...db,
     };
 
@@ -162,7 +162,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   const validate = () => {
-    if (db && db.name.length && db.uri.length) {
+    if (db && db.database_name.length && db.sqlalchemy_uri.length) {
       setDisableSave(false);
     } else {
       setDisableSave(true);
@@ -180,7 +180,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   } else if (!isEditMode && (!db || db.id || (isHidden && show))) {
     setDB({
       database_name: '',
-      uri: '',
+      sqlalchemy_uri: '',
     });
   }
 
@@ -228,7 +228,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <input
                 type="text"
-                name="name"
+                name="database_name"
                 value={db ? db.database_name : ''}
                 placeholder={t('Name your datasource')}
                 onChange={onInputChange}
@@ -243,8 +243,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <input
                 type="text"
-                name="uri"
-                value={db ? db.uri : ''}
+                name="sqlalchemy_uri"
+                value={db ? db.sqlalchemy_uri : ''}
                 placeholder={t('SQLAlchemy URI')}
                 onChange={onInputChange}
               />
@@ -269,8 +269,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <input
                 type="number"
-                name="chartCacheTimeout"
-                value={db ? db.chartCacheTimeout || '' : ''}
+                name="cache_timeout"
+                value={db ? db.cache_timeout || '' : ''}
                 placeholder={t('Chart Cache Timeout')}
                 onChange={onInputChange}
               />
@@ -286,9 +286,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           <StyledInputContainer>
             <div className="input-container">
               <IndeterminateCheckbox
-                id="asynchronousQueryExecution"
+                id="allow_run_async"
                 indeterminate={false}
-                checked={db ? !!db.asynchronousQueryExecution : false}
+                checked={db ? !!db.allow_run_async : false}
                 onChange={onInputChange}
               />
               <div>{t('Asynchronous Query Execution')}</div>
@@ -317,9 +317,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <StyledInputContainer>
               <div className="input-container">
                 <IndeterminateCheckbox
-                  id="sqlExpose"
+                  id="expose_in_sqllab"
                   indeterminate={false}
-                  checked={db ? !!db.sqlExpose : false}
+                  checked={db ? !!db.expose_in_sqllab : false}
                   onChange={onInputChange}
                 />
                 <div>{t('Expose in SQL Lab')}</div>
@@ -332,9 +332,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <StyledInputContainer>
               <div className="input-container">
                 <IndeterminateCheckbox
-                  id="allowCTA"
+                  id="allow_ctas"
                   indeterminate={false}
-                  checked={db ? !!db.allowCTA : false}
+                  checked={db ? !!db.allow_ctas : false}
                   onChange={onInputChange}
                 />
                 <div>{t('Allow CREATE TABLE AS')}</div>
@@ -347,9 +347,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <StyledInputContainer>
               <div className="input-container">
                 <IndeterminateCheckbox
-                  id="allowCVA"
+                  id="allow_cvas"
                   indeterminate={false}
-                  checked={db ? !!db.allowCVA : false}
+                  checked={db ? !!db.allow_cvas : false}
                   onChange={onInputChange}
                 />
                 <div>{t('Allow CREATE VIEW AS')}</div>
@@ -362,9 +362,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <StyledInputContainer>
               <div className="input-container">
                 <IndeterminateCheckbox
-                  id="allowDML"
+                  id="allow_dml"
                   indeterminate={false}
-                  checked={db ? !!db.allowDML : false}
+                  checked={db ? !!db.allow_dml : false}
                   onChange={onInputChange}
                 />
                 <div>{t('Allow DML')}</div>
@@ -379,9 +379,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <StyledInputContainer>
               <div className="input-container">
                 <IndeterminateCheckbox
-                  id="allowMSMF"
+                  id="allow_multi_schema_metadata_fetch"
                   indeterminate={false}
-                  checked={db ? !!db.allowMSMF : false}
+                  checked={db ? !!db.allow_multi_schema_metadata_fetch : false}
                   onChange={onInputChange}
                 />
                 <div>{t('Allow Multi Schema Metadata Fetch')}</div>
@@ -404,9 +404,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="label">{t('CTAS Schema')}</div>
             <div className="input-container">
               <input
-                type="number"
-                name="forceCTASSchema"
-                value={db ? db.forceCTASSchema || '' : ''}
+                type="name"
+                name="force_ctas_schema"
+                value={db ? db.force_ctas_schema || '' : ''}
                 placeholder={t('CTAS Schema')}
                 onChange={onInputChange}
               />
@@ -424,8 +424,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="label">{t('Secure Extra')}</div>
             <div className="input-container">
               <textarea
-                name="secureExtra"
-                value={db ? db.secureExtra || '' : ''}
+                name="encrypted_extra"
+                value={db ? db.encrypted_extra || '' : ''}
                 placeholder={t('Secure Extra')}
                 onChange={onTextChange}
               />
@@ -451,8 +451,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="label">{t('Root Certificate')}</div>
             <div className="input-container">
               <textarea
-                name="rootCertificate"
-                value={db ? db.rootCertificate || '' : ''}
+                name="server_cert"
+                value={db ? db.server_cert || '' : ''}
                 placeholder={t('Root Certificate')}
                 onChange={onTextChange}
               />
@@ -468,9 +468,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           <StyledInputContainer>
             <div className="input-container">
               <IndeterminateCheckbox
-                id="impersonateUser"
+                id="impersonate_user"
                 indeterminate={false}
-                checked={db ? !!db.impersonateUser : false}
+                checked={db ? !!db.impersonate_user : false}
                 onChange={onInputChange}
               />
               <div>{t('Impersonate Logged In User (Presto & Hive')}</div>
@@ -497,9 +497,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           <StyledInputContainer>
             <div className="input-container">
               <IndeterminateCheckbox
-                id="allowCSV"
+                id="allow_csv_upload"
                 indeterminate={false}
-                checked={db ? !!db.allowCSV : false}
+                checked={db ? !!db.allow_csv_upload : false}
                 onChange={onInputChange}
               />
               <div>{t('Allow CSV Upload')}</div>
diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
index ab6b1499f4238..1914162031cb4 100644
--- a/superset-frontend/src/views/CRUD/data/database/types.ts
+++ b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -22,17 +22,33 @@ type DatabaseUser = {
 };
 
 export type DatabaseObject = {
-  id: number;
+  // Connection + general
+  id?: number;
   database_name: string;
+  sqlalchemy_uri: string;
   backend: string;
-  allow_run_async: boolean;
-  allow_dml: boolean;
-  allow_csv_upload: boolean;
-  expose_in_sqllab: boolean;
   created_by: null | DatabaseUser;
   changed_on_delta_humanized: string;
   changed_on: string;
 
-  uri: string;
-  // TODO: add more props
+  // Performance
+  cache_timeout?: string;
+  allow_run_async?: boolean;
+
+  // SQL Lab
+  expose_in_sqllab?: boolean;
+  allow_ctas?: boolean;
+  allow_cvas?: boolean;
+  allow_dml?: boolean;
+  allow_multi_schema_metadata_fetch?: boolean;
+  force_ctas_schema?: string;
+
+  // Security
+  encrypted_extra?: string;
+  server_cert?: string;
+
+  // Extra
+  impersonate_user?: boolean;
+  allow_csv_upload?: boolean;
+  extra?: string;
 };

From c65f2593762f70e7805ce8032adb090b0a7213c4 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Tue, 1 Sep 2020 12:45:54 -0700
Subject: [PATCH 09/20] add more tests

---
 .../CRUD/data/database/DatabaseModal_spec.jsx | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
index 8b8e29b98943e..1651d437bfb54 100644
--- a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
@@ -23,13 +23,28 @@ import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
 import Modal from 'src/common/components/Modal';
+import Tabs from 'src/common/components/Tabs';
 
 // store needed for withToasts(DatabaseModal)
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const mockedProps = {
+  show: true,
+};
+
+const dbProps = {
+  show: true,
+  database: {
+    id: 10,
+    database_name: 'test',
+    sqlalchemy_uri: 'sqllite:///user:pw/test',
+  },
+};
+
 describe('DatabaseModal', () => {
-  const wrapper = mount(<DatabaseModal />, { context: { store } });
+  const wrapper = mount(<DatabaseModal {...mockedProps} />, { context: { store } });
+  const editWrapper = mount(<DatabaseModal {...dbProps} />, { context: { store } });
 
   it('renders', () => {
     expect(wrapper.find(DatabaseModal)).toExist();
@@ -37,5 +52,23 @@ describe('DatabaseModal', () => {
 
   it('renders a Modal', () => {
     expect(wrapper.find(Modal)).toExist();
+    console.log( 'header text', wrapper.find('h4').text() );
+  });
+
+  it('renders "Add Database" header when no database is included', () => {
+    expect(wrapper.find('h4').text()).toEqual('Add Database');
+  });
+
+  it('renders "Edit Database" header when database prop is included', () => {
+    expect(editWrapper.find('h4').text()).toEqual('Edit Database');
+  });
+
+  it('renders a Tabs menu', () => {
+    expect(wrapper.find(Tabs)).toExist();
+  });
+
+  it('renders five TabPanes', () => {
+    expect(wrapper.find(Tabs.TabPane)).toExist();
+    expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
   });
 });

From 2aefc4cf2196f33eafc3dd59e570161da4cb215a Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Tue, 1 Sep 2020 16:00:20 -0700
Subject: [PATCH 10/20] more tests

---
 .../views/CRUD/data/database/DatabaseModal_spec.jsx         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
index 1651d437bfb54..b4b1b2e3bf06d 100644
--- a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
@@ -52,7 +52,6 @@ describe('DatabaseModal', () => {
 
   it('renders a Modal', () => {
     expect(wrapper.find(Modal)).toExist();
-    console.log( 'header text', wrapper.find('h4').text() );
   });
 
   it('renders "Add Database" header when no database is included', () => {
@@ -71,4 +70,9 @@ describe('DatabaseModal', () => {
     expect(wrapper.find(Tabs.TabPane)).toExist();
     expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
   });
+
+  it('renders input elements for Connection section', () => {
+    expect(wrapper.find('input[name="database_name"]')).toExist();
+    expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
+  });
 });

From 88fecfa776c4440d6d2d8fc1c5019b8f0b7c105d Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Tue, 1 Sep 2020 16:13:47 -0700
Subject: [PATCH 11/20] fix lint

---
 .../views/CRUD/data/database/DatabaseModal_spec.jsx       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
index b4b1b2e3bf06d..e4c16fd6457bc 100644
--- a/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
@@ -43,8 +43,12 @@ const dbProps = {
 };
 
 describe('DatabaseModal', () => {
-  const wrapper = mount(<DatabaseModal {...mockedProps} />, { context: { store } });
-  const editWrapper = mount(<DatabaseModal {...dbProps} />, { context: { store } });
+  const wrapper = mount(<DatabaseModal {...mockedProps} />, {
+    context: { store },
+  });
+  const editWrapper = mount(<DatabaseModal {...dbProps} />, {
+    context: { store },
+  });
 
   it('renders', () => {
     expect(wrapper.find(DatabaseModal)).toExist();

From a48eb40a0bf56d6830e82536f31f78229755e7fe Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Wed, 2 Sep 2020 16:45:27 -0700
Subject: [PATCH 12/20] add edit action to list, fetch db on edit modal open

---
 .../views/CRUD/data/database/DatabaseList.tsx | 26 ++++-
 .../CRUD/data/database/DatabaseModal.tsx      | 32 ++++++-
 .../src/views/CRUD/data/database/types.ts     | 10 +-
 superset-frontend/src/views/CRUD/hooks.ts     | 95 +++++++++++++++++++
 4 files changed, 152 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 7917cdca5a720..e5014ada4eae3 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -107,7 +107,14 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
     );
   }
 
+  function handleDatabaseEdit(database: DatabaseObject) {
+    // Set database and open modal
+    setCurrentDatabase(database);
+    setDatabaseModalOpen(true);
+  }
+
   const canCreate = hasPerm('can_add');
+  const canEdit = hasPerm('can_edit');
   const canDelete = hasPerm('can_delete');
 
   const menuData: SubMenuProps = {
@@ -224,12 +231,29 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       },
       {
         Cell: ({ row: { original } }: any) => {
+          const handleEdit = () => handleDatabaseEdit(original);
           const handleDelete = () => openDatabaseDeleteModal(original);
-          if (!canDelete) {
+          if (!canEdit && !canDelete) {
             return null;
           }
           return (
             <span className="actions">
+              {canEdit && (
+                <TooltipWrapper
+                  label="edit-action"
+                  tooltip={t('Edit')}
+                  placement="bottom"
+                >
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    className="action-button"
+                    onClick={handleEdit}
+                  >
+                    <Icon name="pencil" />
+                  </span>
+                </TooltipWrapper>
+              )}
               {canDelete && (
                 <span
                   role="button"
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 81e4cd4c13d21..2be5a51ecf66b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -18,14 +18,15 @@
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import Icon from 'src/components/Icon';
 import Modal from 'src/common/components/Modal';
 import Tabs from 'src/common/components/Tabs';
-import { DatabaseObject } from './types';
 import Button from 'src/components/Button';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { DatabaseObject } from './types';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -118,6 +119,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
+  // Database fetch logic
+  const {
+    state: { loading: dbLoading, resource: dbFetched },
+    fetchData,
+  } = useSingleViewResource<DatabaseObject>(
+    'database',
+    t('database'),
+    addDangerToast,
+  );
+
   // Functions
   const hide = () => {
     setIsHidden(true);
@@ -162,7 +173,12 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   const validate = () => {
-    if (db && db.database_name.length && db.sqlalchemy_uri.length) {
+    if (
+      db &&
+      db.database_name.length &&
+      db.sqlalchemy_uri &&
+      db.sqlalchemy_uri.length
+    ) {
       setDisableSave(false);
     } else {
       setDisableSave(true);
@@ -176,7 +192,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     isEditMode &&
     (!db || !db.id || (database && database.id !== db.id) || (isHidden && show))
   ) {
-    setDB(database);
+    if (database && database.id !== null && !dbLoading) {
+      const id = database.id || 0;
+
+      fetchData(id).then(() => {
+        setDB(dbFetched);
+      });
+    }
   } else if (!isEditMode && (!db || db.id || (isHidden && show))) {
     setDB({
       database_name: '',
@@ -404,7 +426,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="label">{t('CTAS Schema')}</div>
             <div className="input-container">
               <input
-                type="name"
+                type="text"
                 name="force_ctas_schema"
                 value={db ? db.force_ctas_schema || '' : ''}
                 placeholder={t('CTAS Schema')}
diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
index 1914162031cb4..d0e6f5114d43f 100644
--- a/superset-frontend/src/views/CRUD/data/database/types.ts
+++ b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -25,11 +25,11 @@ export type DatabaseObject = {
   // Connection + general
   id?: number;
   database_name: string;
-  sqlalchemy_uri: string;
-  backend: string;
-  created_by: null | DatabaseUser;
-  changed_on_delta_humanized: string;
-  changed_on: string;
+  sqlalchemy_uri?: string;
+  backend?: string;
+  created_by?: null | DatabaseUser;
+  changed_on_delta_humanized?: string;
+  changed_on?: string;
 
   // Performance
   cache_timeout?: string;
diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
index 4cf05953adf68..60ce262fae0f6 100644
--- a/superset-frontend/src/views/CRUD/hooks.ts
+++ b/superset-frontend/src/views/CRUD/hooks.ts
@@ -167,6 +167,101 @@ export function useListViewResource<D extends object = any>(
   };
 }
 
+// In the same vein as above, a hook for viewing a single instance of a resource (given id)
+interface SingleViewResourceState<D extends object = any> {
+  loading: boolean;
+  resource: D | null;
+  permissions: string[];
+}
+
+export function useSingleViewResource<D extends object = any>(
+  resource: string,
+  resourceLabel: string, // resourceLabel for translations
+  handleErrorMsg: (errorMsg: string) => void,
+) {
+  const [state, setState] = useState<SingleViewResourceState<D>>({
+    loading: false,
+    resource: null,
+    permissions: [],
+  });
+
+  function updateState(update: Partial<SingleViewResourceState<D>>) {
+    setState(currentState => ({ ...currentState, ...update }));
+  }
+
+  useEffect(() => {
+    SupersetClient.get({
+      endpoint: `/api/v1/${resource}/_info`,
+    }).then(
+      ({ json: infoJson = {} }) => {
+        updateState({
+          permissions: infoJson.permissions,
+        });
+      },
+      createErrorHandler(errMsg =>
+        handleErrorMsg(
+          t(
+            'An error occurred while fetching %ss info: %s',
+            resourceLabel,
+            errMsg,
+          ),
+        ),
+      ),
+    );
+  }, []);
+
+  function hasPerm(perm: string) {
+    if (!state.permissions.length) {
+      return false;
+    }
+
+    return Boolean(state.permissions.find(p => p === perm));
+  }
+
+  const fetchData = useCallback((resourceID: number) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.get({
+      endpoint: `/api/v1/${resource}/${resourceID}`,
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  return {
+    state: {
+      loading: state.loading,
+      resource: state.resource,
+    },
+    setResource: (update: D) =>
+      updateState({
+        resource: update,
+      }),
+    hasPerm,
+    fetchData,
+  };
+}
+
 // the hooks api has some known limitations around stale state in closures.
 // See https://github.com/reactjs/rfcs/blob/master/text/0068-react-hooks.md#drawbacks
 // the useRef hook is a way of getting around these limitations by having a consistent ref

From 20b860d2b7c684882a9135ae298df4ba277c4ce0 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Thu, 3 Sep 2020 11:47:57 -0700
Subject: [PATCH 13/20] add/edit functionality

---
 .../views/CRUD/data/database/DatabaseList.tsx |  2 +-
 .../CRUD/data/database/DatabaseModal.tsx      | 55 ++++++++++++--
 superset-frontend/src/views/CRUD/hooks.ts     | 76 +++++++++++++++++--
 3 files changed, 119 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index e5014ada4eae3..6e5c8773ba0ac 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -332,7 +332,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         show={databaseModalOpen}
         onHide={() => setDatabaseModalOpen(false)}
         onDatabaseAdd={() => {
-          /* TODO: add database logic here */
+          refreshData();
         }}
       />
       {databaseCurrentlyDeleting && (
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 2be5a51ecf66b..d694fa8f90385 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -119,10 +119,14 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
+  const isEditMode = database !== null;
+
   // Database fetch logic
   const {
     state: { loading: dbLoading, resource: dbFetched },
-    fetchData,
+    fetchResource,
+    createResource,
+    updateResource,
   } = useSingleViewResource<DatabaseObject>(
     'database',
     t('database'),
@@ -136,11 +140,48 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   const onSave = () => {
-    if (onDatabaseAdd) {
-      onDatabaseAdd();
-    }
+    if (isEditMode) {
+      // Edit
+      const update: DatabaseObject = {
+        ...db,
+      };
+
+      // Need to clean update object
+      delete update.id;
+
+      if (!update.cache_timeout) {
+        update.cache_timeout = '0';
+      }
+
+      if (!update.encrypted_extra) {
+        update.encrypted_extra = '';
+      }
+
+      if (!update.force_ctas_schema) {
+        update.force_ctas_schema = '';
+      }
 
-    hide();
+      if (!update.server_cert) {
+        update.server_cert = '';
+      }
+
+      updateResource(db.id, update).then(() => {
+        if (onDatabaseAdd) {
+          onDatabaseAdd();
+        }
+
+        hide();
+      });
+    } else {
+      // Create
+      createResource(db).then(() => {
+        if (onDatabaseAdd) {
+          onDatabaseAdd();
+        }
+
+        hide();
+      });
+    }
   };
 
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -185,8 +226,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     }
   };
 
-  const isEditMode = database !== null;
-
   // Initialize
   if (
     isEditMode &&
@@ -195,7 +234,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (database && database.id !== null && !dbLoading) {
       const id = database.id || 0;
 
-      fetchData(id).then(() => {
+      fetchResource(id).then(() => {
         setDB(dbFetched);
       });
     }
diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
index 60ce262fae0f6..4cd8978cd3609 100644
--- a/superset-frontend/src/views/CRUD/hooks.ts
+++ b/superset-frontend/src/views/CRUD/hooks.ts
@@ -175,7 +175,7 @@ interface SingleViewResourceState<D extends object = any> {
 }
 
 export function useSingleViewResource<D extends object = any>(
-  resource: string,
+  resourceName: string,
   resourceLabel: string, // resourceLabel for translations
   handleErrorMsg: (errorMsg: string) => void,
 ) {
@@ -191,7 +191,7 @@ export function useSingleViewResource<D extends object = any>(
 
   useEffect(() => {
     SupersetClient.get({
-      endpoint: `/api/v1/${resource}/_info`,
+      endpoint: `/api/v1/${resourceName}/_info`,
     }).then(
       ({ json: infoJson = {} }) => {
         updateState({
@@ -218,14 +218,78 @@ export function useSingleViewResource<D extends object = any>(
     return Boolean(state.permissions.find(p => p === perm));
   }
 
-  const fetchData = useCallback((resourceID: number) => {
+  const fetchResource = useCallback((resourceID: number) => {
     // Set loading state
     updateState({
       loading: true,
     });
 
     return SupersetClient.get({
-      endpoint: `/api/v1/${resource}/${resourceID}`,
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const createResource = useCallback((resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.post({
+      endpoint: `/api/v1/${resourceName}/`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(
+        ({ json = {} }) => {
+          updateState({
+            resource: json.result,
+          });
+        },
+        createErrorHandler(errMsg =>
+          handleErrorMsg(
+            t(
+              'An error occurred while fetching %ss: %s',
+              resourceLabel,
+              errMsg,
+            ),
+          ),
+        ),
+      )
+      .finally(() => {
+        updateState({ loading: false });
+      });
+  }, []);
+
+  const updateResource = useCallback((resourceID: number, resource: D) => {
+    // Set loading state
+    updateState({
+      loading: true,
+    });
+
+    return SupersetClient.put({
+      endpoint: `/api/v1/${resourceName}/${resourceID}`,
+      body: JSON.stringify(resource),
+      headers: { 'Content-Type': 'application/json' },
     })
       .then(
         ({ json = {} }) => {
@@ -258,7 +322,9 @@ export function useSingleViewResource<D extends object = any>(
         resource: update,
       }),
     hasPerm,
-    fetchData,
+    fetchResource,
+    createResource,
+    updateResource,
   };
 }
 

From 706e555bf4565c1ec19cd710f9bb71abde6f737c Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Thu, 3 Sep 2020 14:43:07 -0700
Subject: [PATCH 14/20] fix ts

---
 .../CRUD/data/database/DatabaseModal.tsx      | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index d694fa8f90385..da32d8c2a72e6 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -143,11 +143,15 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (isEditMode) {
       // Edit
       const update: DatabaseObject = {
+        database_name: db ? db.database_name : '',
+        sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
         ...db,
       };
 
       // Need to clean update object
-      delete update.id;
+      if (update.id) {
+        delete update.id;
+      }
 
       if (!update.cache_timeout) {
         update.cache_timeout = '0';
@@ -165,14 +169,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         update.server_cert = '';
       }
 
-      updateResource(db.id, update).then(() => {
-        if (onDatabaseAdd) {
-          onDatabaseAdd();
-        }
+      if (db && db.id) {
+        updateResource(db.id, update).then(() => {
+          if (onDatabaseAdd) {
+            onDatabaseAdd();
+          }
 
-        hide();
-      });
-    } else {
+          hide();
+        });
+      }
+    } else if (db) {
       // Create
       createResource(db).then(() => {
         if (onDatabaseAdd) {

From e7cf58819c606f3d99fdb9bd5f42e1cabb1d4986 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 4 Sep 2020 11:51:27 -0700
Subject: [PATCH 15/20] fix test connection styling + other tweaks

---
 .../CRUD/data/database/DatabaseModal.tsx      | 147 +++++++-----------
 1 file changed, 60 insertions(+), 87 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index da32d8c2a72e6..da75b71c00a3c 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -70,6 +70,11 @@ const StyledInputContainer = styled.div`
     i {
       margin: 0 ${({ theme }) => theme.gridUnit}px;
     }
+
+    .btn-primary {
+      height: 36px;
+      font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
+    }
   }
 
   input,
@@ -254,7 +259,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   // Validation
   useEffect(() => {
     validate();
-  });
+  }, [db ? db.database_name : null, db ? db.sqlalchemy_uri : null]);
 
   // Show/hide
   if (isHidden && show) {
@@ -315,7 +320,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 placeholder={t('SQLAlchemy URI')}
                 onChange={onInputChange}
               />
-              <Button buttonStyle="primary">{t('Test Connection')}</Button>
+              <Button buttonStyle="primary" cta>
+                {t('Test Connection')}
+              </Button>
             </div>
             <div className="helper">
               {t('Refer to the ')}
@@ -344,10 +351,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             </div>
             <div className="helper">
               {t(
-                'Duration (in seconds) of the caching timeout for charts of this database.',
+                'Duration (in seconds) of the caching timeout for charts of this database.' +
+                  ' A timeout of 0 indicates that the cache never expires.' +
+                  ' Note this defaults to the global timeout if undefined.',
               )}
-              {t(' A timeout of 0 indicates that the cache never expires.')}
-              {t(' Note this defaults to the global timeout if undefined.')}
             </div>
           </StyledInputContainer>
           <StyledInputContainer>
@@ -361,20 +368,12 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <div>{t('Asynchronous Query Execution')}</div>
               <InfoTooltipWithTrigger
                 label="aqe"
-                tooltip={
-                  t(
-                    'Operate the database in asynchronous mode, meaning that the queries ',
-                  ) +
-                  t(
-                    'are executed on remote workers as opposed to on the web server itself. ',
-                  ) +
-                  t(
-                    'This assumes that you have a Celery worker setup as well as a results ',
-                  ) +
-                  t(
+                tooltip={t(
+                  'Operate the database in asynchronous mode, meaning that the queries ' +
+                    'are executed on remote workers as opposed to on the web server itself. ' +
+                    'This assumes that you have a Celery worker setup as well as a results ' +
                     'backend. Refer to the installation docs for more information.',
-                  )
-                }
+                )}
               />
             </div>
           </StyledInputContainer>
@@ -454,15 +453,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 <div>{t('Allow Multi Schema Metadata Fetch')}</div>
                 <InfoTooltipWithTrigger
                   label="allow-msmf"
-                  tooltip={
-                    t(
-                      'Allow SQL Lab to fetch a list of all tables and all views across all database ',
-                    ) +
-                    t(
-                      'schemas. For large data warehouse with thousands of tables, this can be ',
-                    ) +
-                    t('expensive and put strain on the system.')
-                  }
+                  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>
@@ -480,9 +475,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             </div>
             <div className="helper">
               {t(
-                'When allowing CREATE TABLE AS option in SQL Lab, this option ',
-              )}{' '}
-              +{t('forces the table to be created in this schema')}
+                'When allowing CREATE TABLE AS option in SQL Lab, this option ' +
+                  'forces the table to be created in this schema.',
+              )}
             </div>
           </StyledInputContainer>
         </Tabs.TabPane>
@@ -505,12 +500,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               </div>
               <div>
                 {t(
-                  'This is used to provide connection information for systems like Hive, ',
-                ) +
-                  t(
-                    'Presto, and BigQuery, which do not conform to the username:password syntax ',
-                  ) +
-                  t('normally used by SQLAlchemy.')}
+                  'This is used to provide connection information for systems like Hive, ' +
+                    'Presto, and BigQuery, which do not conform to the username:password syntax ' +
+                    'normally used by SQLAlchemy.',
+                )}
               </div>
             </div>
           </StyledInputContainer>
@@ -526,8 +519,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             </div>
             <div className="helper">
               {t(
-                'Optional CA_BUNDLE contents to validate HTTPS requests. Only available on ',
-              ) + t('certain database engines.')}
+                'Optional CA_BUNDLE contents to validate HTTPS requests. Only available on ' +
+                  'certain database engines.',
+              )}
             </div>
           </StyledInputContainer>
         </Tabs.TabPane>
@@ -543,21 +537,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <div>{t('Impersonate Logged In User (Presto & Hive')}</div>
               <InfoTooltipWithTrigger
                 label="impersonate"
-                tooltip={
-                  t(
-                    'If Presto, all the queries in SQL Lab are going to be executed as the ',
-                  ) +
-                  t(
-                    'currently logged on user who must have permission to run them. If Hive ',
-                  ) +
-                  t(
-                    'and hive.server2.enable.doAs is enabled, will run the queries as ',
-                  ) +
-                  t(
-                    'service account, but impersonate the currently logged on user via ',
-                  ) +
-                  t('hive.server2.proxy.user property.')
-                }
+                tooltip={t(
+                  'If Presto, all the queries in SQL Lab are going to be executed as the ' +
+                    'currently logged on user who must have permission to run them. If Hive ' +
+                    'and hive.server2.enable.doAs is enabled, will run the queries as ' +
+                    'service account, but impersonate the currently logged on user via ' +
+                    'hive.server2.proxy.user property.',
+                )}
               />
             </div>
           </StyledInputContainer>
@@ -597,53 +583,40 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               </div>
               <div>
                 {t(
-                  '1. The engine_params object gets unpacked into the sqlalchemy.create_engine ',
-                ) +
-                  t(
-                    'call, while the metadata_params gets unpacked into the sqlalchemy.MetaData ',
-                  ) +
-                  t('call.')}
+                  '1. The engine_params object gets unpacked into the sqlalchemy.create_engine ' +
+                    'call, while the metadata_params gets unpacked into the sqlalchemy.MetaData ' +
+                    'call.',
+                )}
               </div>
               <div>
                 {t(
-                  '2. The metadata_cache_timeout is a cache timeout setting in seconds for ',
-                ) +
-                  t(
-                    'metadata fetch of this database. Specify it as "metadata_cache_timeout": ',
-                  ) +
-                  t(
-                    '{"schema_cache_timeout": 600, "table_cache_timeout": 600}. If unset, cache ',
-                  ) +
-                  t(
-                    'will not be enabled for the functionality. A timeout of 0 indicates that ',
-                  ) +
-                  t('the cache never expires.')}
+                  '2. The metadata_cache_timeout is a cache timeout setting in seconds for ' +
+                    'metadata fetch of this database. Specify it as "metadata_cache_timeout": ' +
+                    '{"schema_cache_timeout": 600, "table_cache_timeout": 600}. If unset, cache ' +
+                    'will not be enabled for the functionality. A timeout of 0 indicates that ' +
+                    'the cache never expires.',
+                )}
               </div>
               <div>
                 {t(
-                  '3. The schemas_allowed_for_csv_upload is a comma separated list of schemas ',
-                ) +
-                  t('that CSVs are allowed to upload to. Specify it as ') +
-                  t(
-                    '"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ',
-                  ) +
-                  t(
-                    'flavor does not support schema or any schema is allowed to be accessed, ',
-                  ) +
-                  t('just leave the list empty.')}
+                  '3. The schemas_allowed_for_csv_upload is a comma separated list of schemas ' +
+                    'that CSVs are allowed to upload to. Specify it as ' +
+                    '"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ' +
+                    'flavor does not support schema or any schema is allowed to be accessed, ' +
+                    'just leave the list empty.',
+                )}
               </div>
               <div>
                 {t(
-                  "4. The version field is a string specifying this db's version. This ",
-                ) +
-                  t(
+                  "4. The version field is a string specifying this db's version. This " +
                     'should be used with Presto DBs so that the syntax is correct.',
-                  )}
+                )}
               </div>
               <div>
                 {t(
-                  '5. The allows_virtual_table_explore field is a boolean specifying whether ',
-                ) + t('or not the Explore button in SQL Lab results is shown.')}
+                  '5. The allows_virtual_table_explore field is a boolean specifying whether ' +
+                    'or not the Explore button in SQL Lab results is shown.',
+                )}
               </div>
             </div>
           </StyledInputContainer>

From 358cfdd7285d83b0ab672e760ba9884136be325e Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Tue, 8 Sep 2020 09:26:08 -0700
Subject: [PATCH 16/20] add test connection prep + rm permissions check from
 hook

---
 .../CRUD/data/database/DatabaseModal.tsx      | 36 +++++++++++++++++--
 superset-frontend/src/views/CRUD/hooks.ts     | 32 -----------------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index da75b71c00a3c..cb7f20510525b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -18,6 +18,7 @@
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
+import { SupersetClient } from '@superset-ui/connection';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -125,6 +126,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const isEditMode = database !== null;
+  const testEndpointEnabled = false; // TODO: temporary flag until new test connection endpoint is up
 
   // Database fetch logic
   const {
@@ -138,6 +140,35 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     addDangerToast,
   );
 
+  // Test Connection logic
+  const testConnection = () => {
+    if (!db || !testEndpointEnabled) {
+      return;
+    }
+
+    if (!db.sqlalchemy_uri || !db.sqlalchemy_uri.length) {
+      addDangerToast(t('Please enter a SQLAlchemy URI to test'));
+      return;
+    }
+
+    const connection = {
+      sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
+      database_name:
+        db && db.database_name.length ? db.database_name : undefined,
+      impersonate_user: db ? db.impersonate_user : undefined,
+      extra: db ? db.extra : undefined,
+      encrypted_extra: db ? db.encrypted_extra : undefined,
+      server_cert: db ? db.server_cert : undefined,
+    };
+
+    // TODO: add response logic once endpoint is up
+    SupersetClient.post({
+      endpoint: '/api/v1/database/test_connection/',
+      body: JSON.stringify(connection),
+      headers: { 'Content-Type': 'application/json' },
+    }).then();
+  };
+
   // Functions
   const hide = () => {
     setIsHidden(true);
@@ -206,7 +237,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (target.type === 'checkbox') {
       data[target.name] = target.checked;
     } else {
-      data[target.name] = target.value;
+      data[target.name] =
+        typeof target.value === 'string' ? target.value.trim() : target.value;
     }
 
     setDB(data);
@@ -320,7 +352,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 placeholder={t('SQLAlchemy URI')}
                 onChange={onInputChange}
               />
-              <Button buttonStyle="primary" cta>
+              <Button buttonStyle="primary" onClick={testConnection} cta>
                 {t('Test Connection')}
               </Button>
             </div>
diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
index 4cd8978cd3609..2430f69be5185 100644
--- a/superset-frontend/src/views/CRUD/hooks.ts
+++ b/superset-frontend/src/views/CRUD/hooks.ts
@@ -171,7 +171,6 @@ export function useListViewResource<D extends object = any>(
 interface SingleViewResourceState<D extends object = any> {
   loading: boolean;
   resource: D | null;
-  permissions: string[];
 }
 
 export function useSingleViewResource<D extends object = any>(
@@ -182,42 +181,12 @@ export function useSingleViewResource<D extends object = any>(
   const [state, setState] = useState<SingleViewResourceState<D>>({
     loading: false,
     resource: null,
-    permissions: [],
   });
 
   function updateState(update: Partial<SingleViewResourceState<D>>) {
     setState(currentState => ({ ...currentState, ...update }));
   }
 
-  useEffect(() => {
-    SupersetClient.get({
-      endpoint: `/api/v1/${resourceName}/_info`,
-    }).then(
-      ({ json: infoJson = {} }) => {
-        updateState({
-          permissions: infoJson.permissions,
-        });
-      },
-      createErrorHandler(errMsg =>
-        handleErrorMsg(
-          t(
-            'An error occurred while fetching %ss info: %s',
-            resourceLabel,
-            errMsg,
-          ),
-        ),
-      ),
-    );
-  }, []);
-
-  function hasPerm(perm: string) {
-    if (!state.permissions.length) {
-      return false;
-    }
-
-    return Boolean(state.permissions.find(p => p === perm));
-  }
-
   const fetchResource = useCallback((resourceID: number) => {
     // Set loading state
     updateState({
@@ -321,7 +290,6 @@ export function useSingleViewResource<D extends object = any>(
       updateState({
         resource: update,
       }),
-    hasPerm,
     fetchResource,
     createResource,
     updateResource,

From 42e90a3e12019146632972c8d78fab87accf9c20 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Wed, 9 Sep 2020 10:56:39 -0700
Subject: [PATCH 17/20] fix delete modal close + rm extra db props on save

---
 .../views/CRUD/data/database/DatabaseList.tsx    |  3 +++
 .../views/CRUD/data/database/DatabaseModal.tsx   | 16 ----------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 6e5c8773ba0ac..be1e0acded49b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -100,6 +100,9 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       () => {
         refreshData();
         addSuccessToast(t('Deleted: %s', dbName));
+
+        // Close delete modal
+        setDatabaseCurrentlyDeleting(null);
       },
       createErrorHandler(errMsg =>
         addDangerToast(t('There was an issue deleting %s: %s', dbName, errMsg)),
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index cb7f20510525b..962548e8c1aab 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -189,22 +189,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         delete update.id;
       }
 
-      if (!update.cache_timeout) {
-        update.cache_timeout = '0';
-      }
-
-      if (!update.encrypted_extra) {
-        update.encrypted_extra = '';
-      }
-
-      if (!update.force_ctas_schema) {
-        update.force_ctas_schema = '';
-      }
-
-      if (!update.server_cert) {
-        update.server_cert = '';
-      }
-
       if (db && db.id) {
         updateResource(db.id, update).then(() => {
           if (onDatabaseAdd) {

From 5183cd5af3d79ef437ccf04a3e8566b239f384da Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Wed, 9 Sep 2020 18:41:21 -0700
Subject: [PATCH 18/20] hook up to test_connection api

---
 .../CRUD/data/database/DatabaseModal.tsx      | 30 ++++++++++---------
 .../databases/commands/test_connection.py     |  1 +
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 962548e8c1aab..2bc69b81fd4f1 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -17,8 +17,7 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
-import { styled, t } from '@superset-ui/core';
-import { SupersetClient } from '@superset-ui/connection';
+import { styled, t, SupersetClient } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -126,7 +125,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const isEditMode = database !== null;
-  const testEndpointEnabled = false; // TODO: temporary flag until new test connection endpoint is up
 
   // Database fetch logic
   const {
@@ -142,11 +140,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   // Test Connection logic
   const testConnection = () => {
-    if (!db || !testEndpointEnabled) {
-      return;
-    }
-
-    if (!db.sqlalchemy_uri || !db.sqlalchemy_uri.length) {
+    if (!db || !db.sqlalchemy_uri || !db.sqlalchemy_uri.length) {
       addDangerToast(t('Please enter a SQLAlchemy URI to test'));
       return;
     }
@@ -155,18 +149,26 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
       database_name:
         db && db.database_name.length ? db.database_name : undefined,
-      impersonate_user: db ? db.impersonate_user : undefined,
-      extra: db ? db.extra : undefined,
-      encrypted_extra: db ? db.encrypted_extra : undefined,
-      server_cert: db ? db.server_cert : undefined,
+      impersonate_user: db ? db.impersonate_user || undefined : undefined,
+      extra: db && db.extra && db.extra.length ? db.extra : undefined,
+      encrypted_extra: db ? db.encrypted_extra || undefined : undefined,
+      server_cert: db ? db.server_cert || undefined : undefined,
     };
 
     // TODO: add response logic once endpoint is up
     SupersetClient.post({
-      endpoint: '/api/v1/database/test_connection/',
+      endpoint: 'api/v1/database/test_connection',
       body: JSON.stringify(connection),
       headers: { 'Content-Type': 'application/json' },
-    }).then();
+    })
+      .then(() => {
+        addSuccessToast(t('Connection looks good!'));
+      })
+      .catch(() => {
+        addDangerToast(
+          t('ERROR: Connection failed, please check your connection settings'),
+        );
+      });
   };
 
   // Functions
diff --git a/superset/databases/commands/test_connection.py b/superset/databases/commands/test_connection.py
index 99e6f98721705..e3f7e72cf0536 100644
--- a/superset/databases/commands/test_connection.py
+++ b/superset/databases/commands/test_connection.py
@@ -49,6 +49,7 @@ def run(self) -> None:
                 impersonate_user=self._properties.get("impersonate_user", False),
                 encrypted_extra=self._properties.get("encrypted_extra", "{}"),
             )
+
             if database is not None:
                 database.set_sqlalchemy_uri(uri)
                 database.db_engine_spec.mutate_db_for_connection_test(database)

From f4669240c7dc8c892844297fccda049863265f2d Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Thu, 10 Sep 2020 14:26:18 -0700
Subject: [PATCH 19/20] rm extra new line

---
 superset/databases/commands/test_connection.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset/databases/commands/test_connection.py b/superset/databases/commands/test_connection.py
index e3f7e72cf0536..99e6f98721705 100644
--- a/superset/databases/commands/test_connection.py
+++ b/superset/databases/commands/test_connection.py
@@ -49,7 +49,6 @@ def run(self) -> None:
                 impersonate_user=self._properties.get("impersonate_user", False),
                 encrypted_extra=self._properties.get("encrypted_extra", "{}"),
             )
-
             if database is not None:
                 database.set_sqlalchemy_uri(uri)
                 database.db_engine_spec.mutate_db_for_connection_test(database)

From 56f5ba7490a492cb34cea3f657d475b819c0710c Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Thu, 10 Sep 2020 14:52:51 -0700
Subject: [PATCH 20/20] address comment

---
 .../src/views/CRUD/data/database/DatabaseModal.tsx            | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 2bc69b81fd4f1..3000ee8e2f36e 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -155,11 +155,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       server_cert: db ? db.server_cert || undefined : undefined,
     };
 
-    // TODO: add response logic once endpoint is up
     SupersetClient.post({
       endpoint: 'api/v1/database/test_connection',
-      body: JSON.stringify(connection),
-      headers: { 'Content-Type': 'application/json' },
+      postPayload: JSON.stringify(connection),
     })
       .then(() => {
         addSuccessToast(t('Connection looks good!'));