mirror of https://github.com/apache/superset.git
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,
|
||||
} 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<DatabaseModalProps> = ({
|
|||
<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
|
||||
defaultActiveKey={DEFAULT_TAB_KEY}
|
||||
activeKey={tabKey}
|
||||
|
@ -292,6 +328,26 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
<p>TODO: db form</p>
|
||||
</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>
|
||||
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
|
||||
<ExtraOptions
|
||||
|
|
|
@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)`
|
|||
.ant-modal-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
.ant-tabs-top > .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};
|
||||
`;
|
||||
|
|
|
@ -108,6 +108,7 @@ class DatabaseRestApi(BaseSupersetModelRestApi):
|
|||
"allow_ctas",
|
||||
"allow_cvas",
|
||||
"allow_dml",
|
||||
"backend",
|
||||
"force_ctas_schema",
|
||||
"allow_multi_schema_metadata_fetch",
|
||||
"impersonate_user",
|
||||
|
|
Loading…
Reference in New Issue