diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx index cf7dab15f7..4547f8bc0d 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -25,6 +25,7 @@ import React, { Reducer, } from 'react'; import Tabs from 'src/components/Tabs'; +import { Alert } from 'src/common/components'; import withToasts from 'src/messageToasts/enhancers/withToasts'; import { testDatabaseConnection, @@ -34,7 +35,20 @@ import { useCommonConf } from 'src/views/CRUD/data/database/state'; import { DatabaseObject } from 'src/views/CRUD/data/database/types'; import ExtraOptions from './ExtraOptions'; import SqlAlchemyForm from './SqlAlchemyForm'; -import { StyledBasicTab, StyledModal } from './styles'; +import { + StyledBasicTab, + StyledModal, + EditHeader, + EditHeaderTitle, + EditHeaderSubtitle, + CreateHeader, + CreateHeaderSubtitle, + CreateHeaderTitle, + Divider, +} from './styles'; + +const DOCUMENTATION_LINK = + 'https://superset.apache.org/docs/databases/installing-database-drivers'; interface DatabaseModalProps { addDangerToast: (msg: string) => void; @@ -267,6 +281,28 @@ const DatabaseModal: FunctionComponent = ({

{isEditMode ? t('Edit database') : t('Connect a database')}

} > + {isEditMode ? ( + + {db?.backend} + {db?.database_name} + + ) : ( + + Enter Primary Credentials + + Need help? Learn how to connect your database{' '} + + here + + . + + + )} + = ({

TODO: db form

)} + + Select databases require additional fields to be completed in + the next step to successfully connect the database. Learn what + requirements your databases has{' '} + + here + + . + + } + type="info" + showIcon + /> {t('Advanced')}} key="2"> .ant-tabs-nav { margin-bottom: 0; @@ -82,6 +83,29 @@ export const StyledModal = styled(Modal)` .ant-modal-title > h4 { font-weight: bold; } + + .ant-alert { + color: ${({ theme }) => theme.colors.info.dark2}; + border: 1px solid ${({ theme }) => theme.colors.info.base}; + font-size: ${({ theme }) => theme.gridUnit * 3}px; + padding: ${({ theme }) => theme.gridUnit * 4}px; + margin: ${({ theme }) => theme.gridUnit * 4}px 0 0; + } + .ant-alert-with-description { + .ant-alert-message, + .alert-with-description { + color: ${({ theme }) => theme.colors.info.dark2}; + font-weight: bold; + } + } + .ant-modal-body { + padding-top: 0; + margin-bottom: 0; + } + .ant-tabs-content-holder { + overflow: auto; + max-height: 475px; + } `; export const StyledInputContainer = styled.div` @@ -148,10 +172,6 @@ export const StyledInputContainer = styled.div` flex: 0 1 auto; width: 40%; } - - &[name='sqlalchemy_uri'] { - margin-right: ${({ theme }) => theme.gridUnit * 3}px; - } } &.expandable { height: 0; @@ -201,3 +221,52 @@ export const StyledBasicTab = styled(Tabs.TabPane)` padding-right: ${({ theme }) => theme.gridUnit * 4}px; margin-top: ${({ theme }) => theme.gridUnit * 4}px; `; + +export const EditHeader = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: 0px; + margin: ${({ theme }) => theme.gridUnit * 4}px + ${({ theme }) => theme.gridUnit * 4}px + ${({ theme }) => theme.gridUnit * 9}px; +`; + +export const CreateHeader = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: 0px; + margin: ${({ theme }) => theme.gridUnit * 4}px + ${({ theme }) => theme.gridUnit * 4}px + ${({ theme }) => theme.gridUnit * 9}px; +`; + +export const CreateHeaderTitle = styled.div` + color: ${({ theme }) => theme.colors.grayscale.dark1}; + font-weight: bold; + font-size: ${({ theme }) => theme.typography.sizes.l}px; + padding: ${({ theme }) => theme.gridUnit * 1}px; +`; + +export const CreateHeaderSubtitle = styled.div` + color: ${({ theme }) => theme.colors.grayscale.dark1}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + padding: ${({ theme }) => theme.gridUnit * 1}px; +`; + +export const EditHeaderTitle = styled.div` + color: ${({ theme }) => theme.colors.grayscale.light1}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + text-transform: uppercase; +`; + +export const EditHeaderSubtitle = styled.div` + color: ${({ theme }) => theme.colors.grayscale.dark1}; + font-size: ${({ theme }) => theme.typography.sizes.xl}px; + font-weight: bold; +`; + +export const Divider = styled.hr` + border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light1}; +`; diff --git a/superset/databases/api.py b/superset/databases/api.py index f64acdb407..3f506e0ed5 100644 --- a/superset/databases/api.py +++ b/superset/databases/api.py @@ -108,6 +108,7 @@ class DatabaseRestApi(BaseSupersetModelRestApi): "allow_ctas", "allow_cvas", "allow_dml", + "backend", "force_ctas_schema", "allow_multi_schema_metadata_fetch", "impersonate_user",