From 62774d2028ab09ba228369300967293e573d4dc0 Mon Sep 17 00:00:00 2001
From: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Date: Thu, 30 Sep 2021 12:14:31 -0400
Subject: [PATCH] refactor(DB Connections): Build Snowflake Dynamic Form
 (#16875)

* moved all non-BasicParameters into own field

* refactored DB Connection Form made ValidatedInput
---
 setup.cfg                                     |   2 +-
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 668 ------------------
 .../CommonParameters.tsx                      | 207 ++++++
 .../DatabaseConnectionForm/EncryptedField.tsx | 198 ++++++
 .../DatabaseConnectionForm/TableCatalog.tsx   | 104 +++
 .../ValidatedInputField.tsx                   |  62 ++
 .../DatabaseConnectionForm/index.tsx          | 172 +++++
 superset/datasets/dao.py                      |   2 +-
 superset/db_engine_specs/snowflake.py         |  56 +-
 superset/models/core.py                       |   2 +-
 10 files changed, 779 insertions(+), 694 deletions(-)
 delete mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/ValidatedInputField.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx

diff --git a/setup.cfg b/setup.cfg
index 20bf9082a28b7..9a108f76a480e 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -30,7 +30,7 @@ combine_as_imports = true
 include_trailing_comma = true
 line_length = 88
 known_first_party = superset
-known_third_party =alembic,apispec,babel,backoff,bleach,cachelib,celery,click,colorama,cron_descriptor,croniter,cryptography,dateutil,deprecation,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_jwt_extended,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,graphlib,holidays,humanize,isodate,jinja2,jwt,markdown,markupsafe,marshmallow,marshmallow_enum,msgpack,numpy,pandas,parameterized,parsedatetime,pgsanity,pkg_resources,polyline,prison,progress,pyarrow,pyhive,pyparsing,pytest,pytest_mock,pytz,redis,requests,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,typing_extensions,urllib3,werkzeug,wtforms,wtforms_json,yaml
+known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,cron_descriptor,croniter,cryptography,dateutil,deprecation,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_jwt_extended,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,graphlib,holidays,humanize,isodate,jinja2,jwt,markdown,markupsafe,marshmallow,marshmallow_enum,msgpack,numpy,pandas,parameterized,parsedatetime,pgsanity,pkg_resources,polyline,prison,progress,pyarrow,pyhive,pyparsing,pytest,pytest_mock,pytz,redis,requests,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,typing_extensions,urllib3,werkzeug,wtforms,wtforms_json,yaml
 multi_line_output = 3
 order_by_type = false
 
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
deleted file mode 100644
index a188126f4a50c..0000000000000
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ /dev/null
@@ -1,668 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React, { FormEvent, useState } from 'react';
-import { SupersetTheme, JsonObject, t } from '@superset-ui/core';
-import { InputProps } from 'antd/lib/input';
-import { Switch, Select, Button } from 'src/common/components';
-import InfoTooltip from 'src/components/InfoTooltip';
-import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
-import FormLabel from 'src/components/Form/FormLabel';
-import { DeleteFilled, CloseOutlined } from '@ant-design/icons';
-import {
-  formScrollableStyles,
-  validatedFormStyles,
-  CredentialInfoForm,
-  toggleStyle,
-  infoTooltip,
-  StyledFooterButton,
-  StyledCatalogTable,
-  labelMarginBotton,
-} from './styles';
-import { CatalogObject, DatabaseForm, DatabaseObject } from '../types';
-
-// These are the columns that are going to be added to encrypted extra, they differ in name based
-// on the engine, however we want to use the same component for each of them. Make sure to add the
-// the engine specific name here.
-export const encryptedCredentialsMap = {
-  gsheets: 'service_account_info',
-  bigquery: 'credentials_info',
-};
-
-enum CredentialInfoOptions {
-  jsonUpload,
-  copyPaste,
-}
-
-const castStringToBoolean = (optionValue: string) => optionValue === 'true';
-
-export const FormFieldOrder = [
-  'host',
-  'port',
-  'database',
-  'username',
-  'password',
-  'database_name',
-  'credentials_info',
-  'service_account_info',
-  'catalog',
-  'query',
-  'encryption',
-  'account',
-  'warehouse',
-  'role',
-];
-
-interface FieldPropTypes {
-  required: boolean;
-  hasTooltip?: boolean;
-  tooltipText?: (value: any) => string;
-  onParametersChange: (value: any) => string;
-  onParametersUploadFileChange: (value: any) => string;
-  changeMethods: { onParametersChange: (value: any) => string } & {
-    onChange: (value: any) => string;
-  } & {
-    onQueryChange: (value: any) => string;
-  } & { onParametersUploadFileChange: (value: any) => string } & {
-    onAddTableCatalog: () => void;
-    onRemoveTableCatalog: (idx: number) => void;
-  };
-  validationErrors: JsonObject | null;
-  getValidation: () => void;
-  db?: DatabaseObject;
-  isEditMode?: boolean;
-  sslForced?: boolean;
-  defaultDBName?: string;
-  editNewDb?: boolean;
-}
-
-const CredentialsInfo = ({
-  changeMethods,
-  isEditMode,
-  db,
-  editNewDb,
-}: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<number>(
-    CredentialInfoOptions.jsonUpload.valueOf(),
-  );
-  const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
-    null,
-  );
-  const [isPublic, setIsPublic] = useState<boolean>(true);
-  const showCredentialsInfo =
-    db?.engine === 'gsheets' ? !isEditMode && !isPublic : !isEditMode;
-  // a database that has an optional encrypted field has an encrypted_extra that is an empty object, this checks for that.
-  const isEncrypted = isEditMode && db?.encrypted_extra !== '{}';
-  const encryptedField = db?.engine && encryptedCredentialsMap[db.engine];
-  const encryptedValue =
-    typeof db?.parameters?.[encryptedField] === 'object'
-      ? JSON.stringify(db?.parameters?.[encryptedField])
-      : db?.parameters?.[encryptedField];
-  return (
-    <CredentialInfoForm>
-      {db?.engine === 'gsheets' && (
-        <div className="catalog-type-select">
-          <FormLabel
-            css={(theme: SupersetTheme) => labelMarginBotton(theme)}
-            required
-          >
-            {t('Type of Google Sheets allowed')}
-          </FormLabel>
-          <Select
-            style={{ width: '100%' }}
-            defaultValue={isEncrypted ? 'false' : 'true'}
-            onChange={(value: string) =>
-              setIsPublic(castStringToBoolean(value))
-            }
-          >
-            <Select.Option value="true" key={1}>
-              {t('Publicly shared sheets only')}
-            </Select.Option>
-            <Select.Option value="false" key={2}>
-              {t('Public and privately shared sheets')}
-            </Select.Option>
-          </Select>
-        </div>
-      )}
-      {showCredentialsInfo && (
-        <>
-          <FormLabel required>
-            {t('How∂ do you want to enter service account credentials?')}
-          </FormLabel>
-          <Select
-            defaultValue={uploadOption}
-            style={{ width: '100%' }}
-            onChange={option => setUploadOption(option)}
-          >
-            <Select.Option value={CredentialInfoOptions.jsonUpload}>
-              {t('Upload JSON file')}
-            </Select.Option>
-
-            <Select.Option value={CredentialInfoOptions.copyPaste}>
-              {t('Copy and Paste JSON credentials')}
-            </Select.Option>
-          </Select>
-        </>
-      )}
-      {uploadOption === CredentialInfoOptions.copyPaste ||
-      isEditMode ||
-      editNewDb ? (
-        <div className="input-container">
-          <FormLabel required>{t('Service Account')}</FormLabel>
-          <textarea
-            className="input-form"
-            name={encryptedField}
-            value={encryptedValue}
-            onChange={changeMethods.onParametersChange}
-            placeholder="Paste content of service credentials JSON file here"
-          />
-          <span className="label-paste">
-            {t('Copy and paste the entire service account .json file here')}
-          </span>
-        </div>
-      ) : (
-        showCredentialsInfo && (
-          <div
-            className="input-container"
-            css={(theme: SupersetTheme) => infoTooltip(theme)}
-          >
-            <div css={{ display: 'flex', alignItems: 'center' }}>
-              <FormLabel required>{t('Upload Credentials')}</FormLabel>
-              <InfoTooltip
-                tooltip={t(
-                  'Use the JSON file you automatically downloaded when creating your service account.',
-                )}
-                viewBox="0 0 24 24"
-              />
-            </div>
-
-            {!fileToUpload && (
-              <Button
-                className="input-upload-btn"
-                onClick={() =>
-                  document?.getElementById('selectedFile')?.click()
-                }
-              >
-                {t('Choose File')}
-              </Button>
-            )}
-            {fileToUpload && (
-              <div className="input-upload-current">
-                {fileToUpload}
-                <DeleteFilled
-                  onClick={() => {
-                    setFileToUpload(null);
-                    changeMethods.onParametersChange({
-                      target: {
-                        name: encryptedField,
-                        value: '',
-                      },
-                    });
-                  }}
-                />
-              </div>
-            )}
-
-            <input
-              id="selectedFile"
-              className="input-upload"
-              type="file"
-              onChange={async event => {
-                let file;
-                if (event.target.files) {
-                  file = event.target.files[0];
-                }
-                setFileToUpload(file?.name);
-                changeMethods.onParametersChange({
-                  target: {
-                    type: null,
-                    name: encryptedField,
-                    value: await file?.text(),
-                    checked: false,
-                  },
-                });
-                (document.getElementById(
-                  'selectedFile',
-                ) as HTMLInputElement).value = null as any;
-              }}
-            />
-          </div>
-        )
-      )}
-    </CredentialInfoForm>
-  );
-};
-
-const TableCatalog = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => {
-  const tableCatalog = db?.catalog || [];
-  const catalogError = validationErrors || {};
-
-  return (
-    <StyledCatalogTable>
-      <h4 className="gsheet-title">
-        {t('Connect Google Sheets as tables to this database')}
-      </h4>
-      <div>
-        {tableCatalog?.map((sheet: CatalogObject, idx: number) => (
-          <>
-            <FormLabel className="catalog-label" required>
-              {t('Google Sheet Name and URL')}
-            </FormLabel>
-            <div className="catalog-name">
-              <ValidatedInput
-                className="catalog-name-input"
-                required={required}
-                validationMethods={{ onBlur: getValidation }}
-                errorMessage={catalogError[idx]?.name}
-                placeholder={t('Enter a name for this sheet')}
-                onChange={(e: { target: { value: any } }) => {
-                  changeMethods.onParametersChange({
-                    target: {
-                      type: `catalog-${idx}`,
-                      name: 'name',
-                      value: e.target.value,
-                    },
-                  });
-                }}
-                value={sheet.name}
-              />
-              {tableCatalog?.length > 1 && (
-                <CloseOutlined
-                  className="catalog-delete"
-                  onClick={() => changeMethods.onRemoveTableCatalog(idx)}
-                />
-              )}
-            </div>
-            <ValidatedInput
-              className="catalog-name-url"
-              required={required}
-              validationMethods={{ onBlur: getValidation }}
-              errorMessage={catalogError[idx]?.url}
-              placeholder={t('Paste the shareable Google Sheet URL here')}
-              onChange={(e: { target: { value: any } }) =>
-                changeMethods.onParametersChange({
-                  target: {
-                    type: `catalog-${idx}`,
-                    name: 'value',
-                    value: e.target.value,
-                  },
-                })
-              }
-              value={sheet.value}
-            />
-          </>
-        ))}
-        <StyledFooterButton
-          className="catalog-add-btn"
-          onClick={() => {
-            changeMethods.onAddTableCatalog();
-          }}
-        >
-          + {t('Add sheet')}
-        </StyledFooterButton>
-      </div>
-    </StyledCatalogTable>
-  );
-};
-
-const hostField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="host"
-    name="host"
-    value={db?.parameters?.host}
-    required={required}
-    hasTooltip
-    tooltipText={t(
-      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
-    )}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.host}
-    placeholder="e.g. 127.0.0.1"
-    className="form-group-w-50"
-    label="Host"
-    onChange={changeMethods.onParametersChange}
-  />
-);
-const portField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <>
-    <ValidatedInput
-      id="port"
-      name="port"
-      type="number"
-      required={required}
-      value={db?.parameters?.port as number}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.port}
-      placeholder="e.g. 5432"
-      className="form-group-w-50"
-      label="Port"
-      onChange={changeMethods.onParametersChange}
-    />
-  </>
-);
-const databaseField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="database"
-    name="database"
-    required={required}
-    value={db?.parameters?.database}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.database}
-    placeholder="e.g. world_population"
-    label="Database name"
-    onChange={changeMethods.onParametersChange}
-    helpText={t('Copy the name of the  database you are trying to connect to.')}
-  />
-);
-const usernameField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="username"
-    name="username"
-    required={required}
-    value={db?.parameters?.username}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.username}
-    placeholder="e.g. Analytics"
-    label="Username"
-    onChange={changeMethods.onParametersChange}
-  />
-);
-const passwordField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-  isEditMode,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="password"
-    name="password"
-    required={required}
-    type={isEditMode && 'password'}
-    value={db?.parameters?.password}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.password}
-    placeholder="e.g. ********"
-    label="Password"
-    onChange={changeMethods.onParametersChange}
-  />
-);
-const displayField = ({
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <>
-    <ValidatedInput
-      id="database_name"
-      name="database_name"
-      required
-      value={db?.database_name}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.database_name}
-      placeholder=""
-      label={t('Display Name')}
-      onChange={changeMethods.onChange}
-      helpText={t(
-        'Pick a nickname for this database to display as in Superset.',
-      )}
-    />
-  </>
-);
-
-const queryField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="query_input"
-    name="query_input"
-    required={required}
-    value={db?.query_input || ''}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.query}
-    placeholder="e.g. param1=value1&param2=value2"
-    label="Additional Parameters"
-    onChange={changeMethods.onQueryChange}
-    helpText={t('Add additional custom parameters')}
-  />
-);
-
-const warehouseField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="warehouse"
-    name="warehouse"
-    required={required}
-    value={db?.parameters?.warehouse}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.warehouse}
-    placeholder="e.g. compute_wh"
-    label="Warehouse"
-    onChange={changeMethods.onParametersChange}
-    className="form-group-w-50"
-  />
-);
-
-const roleField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="role"
-    name="role"
-    required={required}
-    value={db?.parameters?.role}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.role}
-    placeholder="e.g. AccountAdmin"
-    label="Role"
-    onChange={changeMethods.onParametersChange}
-    className="form-group-w-50"
-  />
-);
-
-const accountField = ({
-  required,
-  changeMethods,
-  getValidation,
-  validationErrors,
-  db,
-}: FieldPropTypes) => (
-  <ValidatedInput
-    id="account"
-    name="account"
-    required={required}
-    value={db?.parameters?.account}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.account}
-    placeholder="e.g. world_population"
-    label="Account"
-    onChange={changeMethods.onParametersChange}
-    helpText={t(
-      'Copy the account name of that database you are trying to connect to.',
-    )}
-  />
-);
-
-const forceSSLField = ({
-  isEditMode,
-  changeMethods,
-  db,
-  sslForced,
-}: FieldPropTypes) => (
-  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
-    <Switch
-      disabled={sslForced && !isEditMode}
-      checked={db?.parameters?.encryption || sslForced}
-      onChange={changed => {
-        changeMethods.onParametersChange({
-          target: {
-            type: 'toggle',
-            name: 'encryption',
-            checked: true,
-            value: changed,
-          },
-        });
-      }}
-    />
-    <span css={toggleStyle}>SSL</span>
-    <InfoTooltip
-      tooltip={t('SSL Mode "require" will be used.')}
-      placement="right"
-      viewBox="0 -5 24 24"
-    />
-  </div>
-);
-
-const FORM_FIELD_MAP = {
-  host: hostField,
-  port: portField,
-  database: databaseField,
-  username: usernameField,
-  password: passwordField,
-  database_name: displayField,
-  query: queryField,
-  encryption: forceSSLField,
-  credentials_info: CredentialsInfo,
-  service_account_info: CredentialsInfo,
-  catalog: TableCatalog,
-  warehouse: warehouseField,
-  role: roleField,
-  account: accountField,
-};
-
-const DatabaseConnectionForm = ({
-  dbModel: { parameters },
-  onParametersChange,
-  onChange,
-  onQueryChange,
-  onParametersUploadFileChange,
-  onAddTableCatalog,
-  onRemoveTableCatalog,
-  validationErrors,
-  getValidation,
-  db,
-  isEditMode = false,
-  sslForced,
-  editNewDb,
-}: {
-  isEditMode?: boolean;
-  sslForced: boolean;
-  editNewDb?: boolean;
-  dbModel: DatabaseForm;
-  db: Partial<DatabaseObject> | null;
-  onParametersChange: (
-    event: FormEvent<InputProps> | { target: HTMLInputElement },
-  ) => void;
-  onChange: (
-    event: FormEvent<InputProps> | { target: HTMLInputElement },
-  ) => void;
-  onQueryChange: (
-    event: FormEvent<InputProps> | { target: HTMLInputElement },
-  ) => void;
-  onParametersUploadFileChange?: (
-    event: FormEvent<InputProps> | { target: HTMLInputElement },
-  ) => void;
-  onAddTableCatalog: () => void;
-  onRemoveTableCatalog: (idx: number) => void;
-  validationErrors: JsonObject | null;
-  getValidation: () => void;
-}) => (
-  <>
-    <div
-      // @ts-ignore
-      css={(theme: SupersetTheme) => [
-        formScrollableStyles,
-        validatedFormStyles(theme),
-      ]}
-    >
-      {parameters &&
-        FormFieldOrder.filter(
-          (key: string) =>
-            Object.keys(parameters.properties).includes(key) ||
-            key === 'database_name',
-        ).map(field =>
-          FORM_FIELD_MAP[field]({
-            required: parameters.required?.includes(field),
-            changeMethods: {
-              onParametersChange,
-              onChange,
-              onQueryChange,
-              onParametersUploadFileChange,
-              onAddTableCatalog,
-              onRemoveTableCatalog,
-            },
-            validationErrors,
-            getValidation,
-            db,
-            key: field,
-            isEditMode,
-            sslForced,
-            editNewDb,
-          }),
-        )}
-    </div>
-  </>
-);
-export const FormFieldMap = FORM_FIELD_MAP;
-
-export default DatabaseConnectionForm;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
new file mode 100644
index 0000000000000..e1ea9fef5f8d7
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
@@ -0,0 +1,207 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { SupersetTheme, t } from '@superset-ui/core';
+import { Switch } from 'src/common/components';
+import InfoTooltip from 'src/components/InfoTooltip';
+import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import { FieldPropTypes } from '.';
+import { toggleStyle, infoTooltip } from '../styles';
+
+export const hostField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="host"
+    name="host"
+    value={db?.parameters?.host}
+    required={required}
+    hasTooltip
+    tooltipText={t(
+      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+    )}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.host}
+    placeholder="e.g. 127.0.0.1"
+    className="form-group-w-50"
+    label="Host"
+    onChange={changeMethods.onParametersChange}
+  />
+);
+export const portField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <>
+    <ValidatedInput
+      id="port"
+      name="port"
+      type="number"
+      required={required}
+      value={db?.parameters?.port as number}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.port}
+      placeholder="e.g. 5432"
+      className="form-group-w-50"
+      label="Port"
+      onChange={changeMethods.onParametersChange}
+    />
+  </>
+);
+export const databaseField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="database"
+    name="database"
+    required={required}
+    value={db?.parameters?.database}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.database}
+    placeholder="e.g. world_population"
+    label="Database name"
+    onChange={changeMethods.onParametersChange}
+    helpText={t('Copy the name of the  database you are trying to connect to.')}
+  />
+);
+export const usernameField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="username"
+    name="username"
+    required={required}
+    value={db?.parameters?.username}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.username}
+    placeholder="e.g. Analytics"
+    label="Username"
+    onChange={changeMethods.onParametersChange}
+  />
+);
+export const passwordField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+  isEditMode,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="password"
+    name="password"
+    required={required}
+    type={isEditMode && 'password'}
+    value={db?.parameters?.password}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.password}
+    placeholder="e.g. ********"
+    label="Password"
+    onChange={changeMethods.onParametersChange}
+  />
+);
+export const displayField = ({
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <>
+    <ValidatedInput
+      id="database_name"
+      name="database_name"
+      required
+      value={db?.database_name}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.database_name}
+      placeholder=""
+      label={t('Display Name')}
+      onChange={changeMethods.onChange}
+      helpText={t(
+        'Pick a nickname for this database to display as in Superset.',
+      )}
+    />
+  </>
+);
+
+export const queryField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="query_input"
+    name="query_input"
+    required={required}
+    value={db?.query_input || ''}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.query}
+    placeholder="e.g. param1=value1&param2=value2"
+    label="Additional Parameters"
+    onChange={changeMethods.onQueryChange}
+    helpText={t('Add additional custom parameters')}
+  />
+);
+
+export const forceSSLField = ({
+  isEditMode,
+  changeMethods,
+  db,
+  sslForced,
+}: FieldPropTypes) => (
+  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+    <Switch
+      disabled={sslForced && !isEditMode}
+      checked={db?.parameters?.encryption || sslForced}
+      onChange={changed => {
+        changeMethods.onParametersChange({
+          target: {
+            type: 'toggle',
+            name: 'encryption',
+            checked: true,
+            value: changed,
+          },
+        });
+      }}
+    />
+    <span css={toggleStyle}>SSL</span>
+    <InfoTooltip
+      tooltip={t('SSL Mode "require" will be used.')}
+      placement="right"
+      viewBox="0 -5 24 24"
+    />
+  </div>
+);
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
new file mode 100644
index 0000000000000..74672bd4eb8bf
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
@@ -0,0 +1,198 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from 'react';
+import { SupersetTheme, t } from '@superset-ui/core';
+import { Select, Button } from 'src/common/components';
+import InfoTooltip from 'src/components/InfoTooltip';
+import FormLabel from 'src/components/Form/FormLabel';
+import { DeleteFilled } from '@ant-design/icons';
+import { FieldPropTypes } from '.';
+import { infoTooltip, labelMarginBotton, CredentialInfoForm } from '../styles';
+
+enum CredentialInfoOptions {
+  jsonUpload,
+  copyPaste,
+}
+
+// These are the columns that are going to be added to encrypted extra, they differ in name based
+// on the engine, however we want to use the same component for each of them. Make sure to add the
+// the engine specific name here.
+export const encryptedCredentialsMap = {
+  gsheets: 'service_account_info',
+  bigquery: 'credentials_info',
+};
+
+const castStringToBoolean = (optionValue: string) => optionValue === 'true';
+
+export const EncryptedField = ({
+  changeMethods,
+  isEditMode,
+  db,
+  editNewDb,
+}: FieldPropTypes) => {
+  const [uploadOption, setUploadOption] = useState<number>(
+    CredentialInfoOptions.jsonUpload.valueOf(),
+  );
+  const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
+    null,
+  );
+  const [isPublic, setIsPublic] = useState<boolean>(true);
+  const showCredentialsInfo =
+    db?.engine === 'gsheets' ? !isEditMode && !isPublic : !isEditMode;
+  // a database that has an optional encrypted field has an encrypted_extra that is an empty object, this checks for that.
+  const isEncrypted = isEditMode && db?.encrypted_extra !== '{}';
+  const encryptedField = db?.engine && encryptedCredentialsMap[db.engine];
+  const encryptedValue =
+    typeof db?.parameters?.[encryptedField] === 'object'
+      ? JSON.stringify(db?.parameters?.[encryptedField])
+      : db?.parameters?.[encryptedField];
+  return (
+    <CredentialInfoForm>
+      {db?.engine === 'gsheets' && (
+        <div className="catalog-type-select">
+          <FormLabel
+            css={(theme: SupersetTheme) => labelMarginBotton(theme)}
+            required
+          >
+            {t('Type of Google Sheets allowed')}
+          </FormLabel>
+          <Select
+            style={{ width: '100%' }}
+            defaultValue={isEncrypted ? 'false' : 'true'}
+            onChange={(value: string) =>
+              setIsPublic(castStringToBoolean(value))
+            }
+          >
+            <Select.Option value="true" key={1}>
+              {t('Publicly shared sheets only')}
+            </Select.Option>
+            <Select.Option value="false" key={2}>
+              {t('Public and privately shared sheets')}
+            </Select.Option>
+          </Select>
+        </div>
+      )}
+      {showCredentialsInfo && (
+        <>
+          <FormLabel required>
+            {t('How∂ do you want to enter service account credentials?')}
+          </FormLabel>
+          <Select
+            defaultValue={uploadOption}
+            style={{ width: '100%' }}
+            onChange={option => setUploadOption(option)}
+          >
+            <Select.Option value={CredentialInfoOptions.jsonUpload}>
+              {t('Upload JSON file')}
+            </Select.Option>
+
+            <Select.Option value={CredentialInfoOptions.copyPaste}>
+              {t('Copy and Paste JSON credentials')}
+            </Select.Option>
+          </Select>
+        </>
+      )}
+      {uploadOption === CredentialInfoOptions.copyPaste ||
+      isEditMode ||
+      editNewDb ? (
+        <div className="input-container">
+          <FormLabel required>{t('Service Account')}</FormLabel>
+          <textarea
+            className="input-form"
+            name={encryptedField}
+            value={encryptedValue}
+            onChange={changeMethods.onParametersChange}
+            placeholder="Paste content of service credentials JSON file here"
+          />
+          <span className="label-paste">
+            {t('Copy and paste the entire service account .json file here')}
+          </span>
+        </div>
+      ) : (
+        showCredentialsInfo && (
+          <div
+            className="input-container"
+            css={(theme: SupersetTheme) => infoTooltip(theme)}
+          >
+            <div css={{ display: 'flex', alignItems: 'center' }}>
+              <FormLabel required>{t('Upload Credentials')}</FormLabel>
+              <InfoTooltip
+                tooltip={t(
+                  'Use the JSON file you automatically downloaded when creating your service account.',
+                )}
+                viewBox="0 0 24 24"
+              />
+            </div>
+
+            {!fileToUpload && (
+              <Button
+                className="input-upload-btn"
+                onClick={() =>
+                  document?.getElementById('selectedFile')?.click()
+                }
+              >
+                {t('Choose File')}
+              </Button>
+            )}
+            {fileToUpload && (
+              <div className="input-upload-current">
+                {fileToUpload}
+                <DeleteFilled
+                  onClick={() => {
+                    setFileToUpload(null);
+                    changeMethods.onParametersChange({
+                      target: {
+                        name: encryptedField,
+                        value: '',
+                      },
+                    });
+                  }}
+                />
+              </div>
+            )}
+
+            <input
+              id="selectedFile"
+              className="input-upload"
+              type="file"
+              onChange={async event => {
+                let file;
+                if (event.target.files) {
+                  file = event.target.files[0];
+                }
+                setFileToUpload(file?.name);
+                changeMethods.onParametersChange({
+                  target: {
+                    type: null,
+                    name: encryptedField,
+                    value: await file?.text(),
+                    checked: false,
+                  },
+                });
+                (document.getElementById(
+                  'selectedFile',
+                ) as HTMLInputElement).value = null as any;
+              }}
+            />
+          </div>
+        )
+      )}
+    </CredentialInfoForm>
+  );
+};
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
new file mode 100644
index 0000000000000..bc8cb40c161c7
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
@@ -0,0 +1,104 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { t } from '@superset-ui/core';
+import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import FormLabel from 'src/components/Form/FormLabel';
+import { CloseOutlined } from '@ant-design/icons';
+import { FieldPropTypes } from '.';
+import { StyledFooterButton, StyledCatalogTable } from '../styles';
+import { CatalogObject } from '../../types';
+
+export const TableCatalog = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => {
+  const tableCatalog = db?.catalog || [];
+  const catalogError = validationErrors || {};
+
+  return (
+    <StyledCatalogTable>
+      <h4 className="gsheet-title">
+        {t('Connect Google Sheets as tables to this database')}
+      </h4>
+      <div>
+        {tableCatalog?.map((sheet: CatalogObject, idx: number) => (
+          <>
+            <FormLabel className="catalog-label" required>
+              {t('Google Sheet Name and URL')}
+            </FormLabel>
+            <div className="catalog-name">
+              <ValidatedInput
+                className="catalog-name-input"
+                required={required}
+                validationMethods={{ onBlur: getValidation }}
+                errorMessage={catalogError[idx]?.name}
+                placeholder={t('Enter a name for this sheet')}
+                onChange={(e: { target: { value: any } }) => {
+                  changeMethods.onParametersChange({
+                    target: {
+                      type: `catalog-${idx}`,
+                      name: 'name',
+                      value: e.target.value,
+                    },
+                  });
+                }}
+                value={sheet.name}
+              />
+              {tableCatalog?.length > 1 && (
+                <CloseOutlined
+                  className="catalog-delete"
+                  onClick={() => changeMethods.onRemoveTableCatalog(idx)}
+                />
+              )}
+            </div>
+            <ValidatedInput
+              className="catalog-name-url"
+              required={required}
+              validationMethods={{ onBlur: getValidation }}
+              errorMessage={catalogError[idx]?.url}
+              placeholder={t('Paste the shareable Google Sheet URL here')}
+              onChange={(e: { target: { value: any } }) =>
+                changeMethods.onParametersChange({
+                  target: {
+                    type: `catalog-${idx}`,
+                    name: 'value',
+                    value: e.target.value,
+                  },
+                })
+              }
+              value={sheet.value}
+            />
+          </>
+        ))}
+        <StyledFooterButton
+          className="catalog-add-btn"
+          onClick={() => {
+            changeMethods.onAddTableCatalog();
+          }}
+        >
+          + {t('Add sheet')}
+        </StyledFooterButton>
+      </div>
+    </StyledCatalogTable>
+  );
+};
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/ValidatedInputField.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/ValidatedInputField.tsx
new file mode 100644
index 0000000000000..b7b8b3dc9cdcf
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/ValidatedInputField.tsx
@@ -0,0 +1,62 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { t } from '@superset-ui/core';
+import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import { FieldPropTypes } from '.';
+
+const FIELD_TEXT_MAP = {
+  account: {
+    helpText: t(
+      'Copy the account name of that database you are trying to connect to.',
+    ),
+    placeholder: 'e.g. world_population',
+  },
+  warehouse: {
+    placeholder: 'e.g. compute_wh',
+    className: 'form-group-w-50',
+  },
+  role: {
+    placeholder: 'e.g. AccountAdmin',
+    className: 'form-group-w-50',
+  },
+};
+
+export const validatedInputField = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+  field,
+}: FieldPropTypes) => (
+  <ValidatedInput
+    id="role"
+    name="role"
+    required={required}
+    value={db?.parameters?.[field]}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.[field]}
+    placeholder={FIELD_TEXT_MAP[field].placeholder}
+    helpText={FIELD_TEXT_MAP[field].helpText}
+    label={field}
+    onChange={changeMethods.onParametersChange}
+    className={FIELD_TEXT_MAP[field].className || field}
+  />
+);
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx
new file mode 100644
index 0000000000000..0bb2cb4dad5f7
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/index.tsx
@@ -0,0 +1,172 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { FormEvent } from 'react';
+import { SupersetTheme, JsonObject } from '@superset-ui/core';
+import { InputProps } from 'antd/lib/input';
+import {
+  hostField,
+  portField,
+  databaseField,
+  usernameField,
+  passwordField,
+  displayField,
+  queryField,
+  forceSSLField,
+} from './CommonParameters';
+import { validatedInputField } from './ValidatedInputField';
+import { EncryptedField } from './EncryptedField';
+import { TableCatalog } from './TableCatalog';
+import { formScrollableStyles, validatedFormStyles } from '../styles';
+import { DatabaseForm, DatabaseObject } from '../../types';
+
+export const FormFieldOrder = [
+  'host',
+  'port',
+  'database',
+  'username',
+  'password',
+  'database_name',
+  'credentials_info',
+  'service_account_info',
+  'catalog',
+  'query',
+  'encryption',
+  'account',
+  'warehouse',
+  'role',
+];
+
+export interface FieldPropTypes {
+  required: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: (value: any) => string;
+  onParametersChange: (value: any) => string;
+  onParametersUploadFileChange: (value: any) => string;
+  changeMethods: { onParametersChange: (value: any) => string } & {
+    onChange: (value: any) => string;
+  } & {
+    onQueryChange: (value: any) => string;
+  } & { onParametersUploadFileChange: (value: any) => string } & {
+    onAddTableCatalog: () => void;
+    onRemoveTableCatalog: (idx: number) => void;
+  };
+  validationErrors: JsonObject | null;
+  getValidation: () => void;
+  db?: DatabaseObject;
+  field: string;
+  isEditMode?: boolean;
+  sslForced?: boolean;
+  defaultDBName?: string;
+  editNewDb?: boolean;
+}
+
+const FORM_FIELD_MAP = {
+  host: hostField,
+  port: portField,
+  database: databaseField,
+  username: usernameField,
+  password: passwordField,
+  database_name: displayField,
+  query: queryField,
+  encryption: forceSSLField,
+  credentials_info: EncryptedField,
+  service_account_info: EncryptedField,
+  catalog: TableCatalog,
+  warehouse: validatedInputField,
+  role: validatedInputField,
+  account: validatedInputField,
+};
+
+const DatabaseConnectionForm = ({
+  dbModel: { parameters },
+  onParametersChange,
+  onChange,
+  onQueryChange,
+  onParametersUploadFileChange,
+  onAddTableCatalog,
+  onRemoveTableCatalog,
+  validationErrors,
+  getValidation,
+  db,
+  isEditMode = false,
+  sslForced,
+  editNewDb,
+}: {
+  isEditMode?: boolean;
+  sslForced: boolean;
+  editNewDb?: boolean;
+  dbModel: DatabaseForm;
+  db: Partial<DatabaseObject> | null;
+  onParametersChange: (
+    event: FormEvent<InputProps> | { target: HTMLInputElement },
+  ) => void;
+  onChange: (
+    event: FormEvent<InputProps> | { target: HTMLInputElement },
+  ) => void;
+  onQueryChange: (
+    event: FormEvent<InputProps> | { target: HTMLInputElement },
+  ) => void;
+  onParametersUploadFileChange?: (
+    event: FormEvent<InputProps> | { target: HTMLInputElement },
+  ) => void;
+  onAddTableCatalog: () => void;
+  onRemoveTableCatalog: (idx: number) => void;
+  validationErrors: JsonObject | null;
+  getValidation: () => void;
+}) => (
+  <>
+    <div
+      // @ts-ignore
+      css={(theme: SupersetTheme) => [
+        formScrollableStyles,
+        validatedFormStyles(theme),
+      ]}
+    >
+      {parameters &&
+        FormFieldOrder.filter(
+          (key: string) =>
+            Object.keys(parameters.properties).includes(key) ||
+            key === 'database_name',
+        ).map(field =>
+          FORM_FIELD_MAP[field]({
+            required: parameters.required?.includes(field),
+            changeMethods: {
+              onParametersChange,
+              onChange,
+              onQueryChange,
+              onParametersUploadFileChange,
+              onAddTableCatalog,
+              onRemoveTableCatalog,
+            },
+            validationErrors,
+            getValidation,
+            db,
+            key: field,
+            field,
+            isEditMode,
+            sslForced,
+            editNewDb,
+          }),
+        )}
+    </div>
+  </>
+);
+export const FormFieldMap = FORM_FIELD_MAP;
+
+export default DatabaseConnectionForm;
diff --git a/superset/datasets/dao.py b/superset/datasets/dao.py
index b58622b9df241..363e89b8b7f43 100644
--- a/superset/datasets/dao.py
+++ b/superset/datasets/dao.py
@@ -143,7 +143,7 @@ def validate_metrics_uniqueness(dataset_id: int, metrics_names: List[str]) -> bo
         return len(dataset_query) == 0
 
     @classmethod
-    def update(  # pylint: disable=arguments-differ
+    def update(
         cls, model: SqlaTable, properties: Dict[str, Any], commit: bool = True
     ) -> Optional[SqlaTable]:
         """
diff --git a/superset/db_engine_specs/snowflake.py b/superset/db_engine_specs/snowflake.py
index b33aa6c6f32e3..d0018d538aa33 100644
--- a/superset/db_engine_specs/snowflake.py
+++ b/superset/db_engine_specs/snowflake.py
@@ -16,18 +16,16 @@
 # under the License.
 import json
 import re
-import urllib
 from datetime import datetime
-from typing import Any, Dict, List, Optional, Pattern, Tuple, TYPE_CHECKING, TypedDict
+from typing import Any, Dict, List, Optional, Pattern, Tuple, TYPE_CHECKING
 from urllib import parse
 
 from apispec import APISpec
 from apispec.ext.marshmallow import MarshmallowPlugin
-from babel.core import default_locale
 from flask_babel import gettext as __
 from marshmallow import fields, Schema
-from marshmallow.exceptions import ValidationError
 from sqlalchemy.engine.url import make_url, URL
+from typing_extensions import TypedDict
 
 from superset.db_engine_specs.postgres import PostgresBaseEngineSpec
 from superset.errors import SupersetError, SupersetErrorType
@@ -193,31 +191,43 @@ def cancel_query(cls, cursor: Any, query: Query, cancel_query_id: str) -> bool:
     def build_sqlalchemy_uri(
         cls,
         parameters: SnowflakeParametersType,
-        encrypted_extra: Optional[Dict[str, Any]] = None,
+        encrypted_extra: Optional[  # pylint: disable=unused-argument
+            Dict[str, Any]
+        ] = None,
     ) -> str:
-        query = parameters.get("query", {})
-        query_params = urllib.parse.urlencode(query)
 
-        if not encrypted_extra:
-            raise ValidationError("Missing service credentials")
-
-        project_id = encrypted_extra.get("credentials_info", {}).get("project_id")
-
-        if project_id:
-            return f"{cls.default_driver}://{project_id}/?{query_params}"
-
-        raise ValidationError("Invalid service credentials")
+        return str(
+            URL(
+                "snowflake",
+                username=parameters.get("username"),
+                password=parameters.get("password"),
+                host=parameters.get("account"),
+                database=parameters.get("database"),
+                query={
+                    "role": parameters.get("role"),
+                    "warehouse": parameters.get("warehouse"),
+                },
+            )
+        )
 
     @classmethod
     def get_parameters_from_uri(
-        cls, uri: str, encrypted_extra: Optional[Dict[str, str]] = None
+        cls,
+        uri: str,
+        encrypted_extra: Optional[  # pylint: disable=unused-argument
+            Dict[str, str]
+        ] = None,
     ) -> Any:
-        value = make_url(uri)
-        # Building parameters from encrypted_extra and uri
-        if encrypted_extra:
-            return {**encrypted_extra, "query": value.query}
-
-        raise ValidationError("Invalid service credentials")
+        url = make_url(uri)
+        query = dict(url.query.items())
+        return {
+            "username": url.username,
+            "password": url.password,
+            "account": url.host,
+            "database": url.database,
+            "role": query.get("role"),
+            "warehouse": query.get("warehouse"),
+        }
 
     @classmethod
     def validate_parameters(
diff --git a/superset/models/core.py b/superset/models/core.py
index 28ba2eb96d51b..88c0cb46d4aaf 100755
--- a/superset/models/core.py
+++ b/superset/models/core.py
@@ -253,7 +253,7 @@ def parameters(self) -> Dict[str, Any]:
     @property
     def parameters_schema(self) -> Dict[str, Any]:
         try:
-            parameters_schema = self.db_engine_spec.parameters_json_schema()  # type: ignore # pylint: disable=line-too-long
+            parameters_schema = self.db_engine_spec.parameters_json_schema()  # type: ignore # pylint: disable=line-too-long,
         except Exception:  # pylint: disable=broad-except
             parameters_schema = {}
         return parameters_schema