mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat: Add headers for DatabaseModal (#14647)
* update styles sheets * save this * add backend * update backend reference * update styles * my style updates * sticky header
This commit is contained in:
parent
67e373000e
commit
4160e45398
@ -25,6 +25,7 @@ import React, {
|
|||||||
Reducer,
|
Reducer,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import Tabs from 'src/components/Tabs';
|
import Tabs from 'src/components/Tabs';
|
||||||
|
import { Alert } from 'src/common/components';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import {
|
import {
|
||||||
testDatabaseConnection,
|
testDatabaseConnection,
|
||||||
@ -34,7 +35,20 @@ import { useCommonConf } from 'src/views/CRUD/data/database/state';
|
|||||||
import { DatabaseObject } from 'src/views/CRUD/data/database/types';
|
import { DatabaseObject } from 'src/views/CRUD/data/database/types';
|
||||||
import ExtraOptions from './ExtraOptions';
|
import ExtraOptions from './ExtraOptions';
|
||||||
import SqlAlchemyForm from './SqlAlchemyForm';
|
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 {
|
interface DatabaseModalProps {
|
||||||
addDangerToast: (msg: string) => void;
|
addDangerToast: (msg: string) => void;
|
||||||
@ -267,6 +281,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
<h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
|
<h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{isEditMode ? (
|
||||||
|
<EditHeader>
|
||||||
|
<EditHeaderTitle>{db?.backend}</EditHeaderTitle>
|
||||||
|
<EditHeaderSubtitle>{db?.database_name}</EditHeaderSubtitle>
|
||||||
|
</EditHeader>
|
||||||
|
) : (
|
||||||
|
<CreateHeader>
|
||||||
|
<CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
|
||||||
|
<CreateHeaderSubtitle>
|
||||||
|
Need help? Learn how to connect your database{' '}
|
||||||
|
<a
|
||||||
|
href={DOCUMENTATION_LINK}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
here
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</CreateHeaderSubtitle>
|
||||||
|
</CreateHeader>
|
||||||
|
)}
|
||||||
|
<Divider />
|
||||||
<Tabs
|
<Tabs
|
||||||
defaultActiveKey={DEFAULT_TAB_KEY}
|
defaultActiveKey={DEFAULT_TAB_KEY}
|
||||||
activeKey={tabKey}
|
activeKey={tabKey}
|
||||||
@ -292,6 +328,26 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
<p>TODO: db form</p>
|
<p>TODO: db form</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<Alert
|
||||||
|
message="Additional fields may be required"
|
||||||
|
description={
|
||||||
|
<>
|
||||||
|
Select databases require additional fields to be completed in
|
||||||
|
the next step to successfully connect the database. Learn what
|
||||||
|
requirements your databases has{' '}
|
||||||
|
<a
|
||||||
|
href={DOCUMENTATION_LINK}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
here
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
type="info"
|
||||||
|
showIcon
|
||||||
|
/>
|
||||||
</StyledBasicTab>
|
</StyledBasicTab>
|
||||||
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
|
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
|
||||||
<ExtraOptions
|
<ExtraOptions
|
||||||
|
@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)`
|
|||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
margin-bottom: 110px;
|
||||||
}
|
}
|
||||||
.ant-tabs-top > .ant-tabs-nav {
|
.ant-tabs-top > .ant-tabs-nav {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@ -82,6 +83,29 @@ export const StyledModal = styled(Modal)`
|
|||||||
.ant-modal-title > h4 {
|
.ant-modal-title > h4 {
|
||||||
font-weight: bold;
|
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`
|
export const StyledInputContainer = styled.div`
|
||||||
@ -148,10 +172,6 @@ export const StyledInputContainer = styled.div`
|
|||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[name='sqlalchemy_uri'] {
|
|
||||||
margin-right: ${({ theme }) => theme.gridUnit * 3}px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&.expandable {
|
&.expandable {
|
||||||
height: 0;
|
height: 0;
|
||||||
@ -201,3 +221,52 @@ export const StyledBasicTab = styled(Tabs.TabPane)`
|
|||||||
padding-right: ${({ theme }) => theme.gridUnit * 4}px;
|
padding-right: ${({ theme }) => theme.gridUnit * 4}px;
|
||||||
margin-top: ${({ 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};
|
||||||
|
`;
|
||||||
|
@ -108,6 +108,7 @@ class DatabaseRestApi(BaseSupersetModelRestApi):
|
|||||||
"allow_ctas",
|
"allow_ctas",
|
||||||
"allow_cvas",
|
"allow_cvas",
|
||||||
"allow_dml",
|
"allow_dml",
|
||||||
|
"backend",
|
||||||
"force_ctas_schema",
|
"force_ctas_schema",
|
||||||
"allow_multi_schema_metadata_fetch",
|
"allow_multi_schema_metadata_fetch",
|
||||||
"impersonate_user",
|
"impersonate_user",
|
||||||
|
Loading…
Reference in New Issue
Block a user