You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by hu...@apache.org on 2021/05/21 22:29:31 UTC
[superset] 04/05: add comment
This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch hugh-validation-db-modal-bg
in repository https://gitbox.apache.org/repos/asf/superset.git
commit a48eeab4272d31171e1a7e9f71d2deea7e324fb6
Author: Elizabeth Thompson <es...@gmail.com>
AuthorDate: Mon May 17 17:33:27 2021 -0700
add comment
---
.../DatabaseModal/DatabaseConnectionForm.tsx | 16 +++---
.../data/database/DatabaseModal/SqlAlchemyForm.tsx | 9 +--
.../CRUD/data/database/DatabaseModal/index.tsx | 42 +++++++-------
.../CRUD/data/database/DatabaseModal/styles.ts | 64 +++++++++++++---------
.../src/views/CRUD/data/database/types.ts | 2 +
5 files changed, 71 insertions(+), 62 deletions(-)
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index c8d98d7..f0542e4 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -18,8 +18,9 @@
*/
import React, { FormEvent } from 'react';
import cx from 'classnames';
-import { FormGroup, FormControl } from 'react-bootstrap';
-import FormLabel from 'src/components/Form/FormLabel';
+import { InputProps } from 'antd/lib/input';
+import { FormLabel, FormItem } from 'src/components/Form';
+import { Input } from 'src/common/components';
import { StyledFormHeader, formScrollableStyles } from './styles';
import { DatabaseForm } from '../types';
@@ -93,10 +94,10 @@ const DatabaseConnectionForm = ({
}: {
dbModel: DatabaseForm;
onParametersChange: (
- event: FormEvent<FormControl> | { target: HTMLInputElement },
+ event: FormEvent<InputProps> | { target: HTMLInputElement },
) => void;
onChange: (
- event: FormEvent<FormControl> | { target: HTMLInputElement },
+ event: FormEvent<InputProps> | { target: HTMLInputElement },
) => void;
}) => (
<>
@@ -126,7 +127,7 @@ const DatabaseConnectionForm = ({
? onChange
: onParametersChange;
return (
- <FormGroup
+ <FormItem
className={cx(className, `form-group-${className}`)}
key={field}
>
@@ -136,17 +137,16 @@ const DatabaseConnectionForm = ({
>
{description}
</FormLabel>
- <FormControl
+ <Input
name={field}
type={type}
id={field}
- bsSize="sm"
autoComplete="off"
placeholder={placeholder}
onChange={onEdit}
/>
<p className="helper">{label}</p>
- </FormGroup>
+ </FormItem>
);
})}
</div>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
index d4c6278..cf442b4 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import React, { EventHandler, ChangeEvent, MouseEvent } from 'react';
-import { t, supersetTheme } from '@superset-ui/core';
+import { t, SupersetTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
-import { StyledInputContainer } from './styles';
+import { StyledInputContainer, wideButton } from './styles';
import { DatabaseObject } from '../types';
@@ -86,10 +86,7 @@ const SqlAlchemyTab = ({
onClick={testConnection}
cta
buttonStyle="link"
- style={{
- width: '100%',
- border: `1px solid ${supersetTheme.colors.primary.base}`,
- }}
+ css={(theme: SupersetTheme) => wideButton(theme)}
>
{t('Test connection')}
</Button>
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 f47214c..5cecee7 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -45,22 +45,20 @@ import SqlAlchemyForm from './SqlAlchemyForm';
import DatabaseConnectionForm from './DatabaseConnectionForm';
import {
- StyledBasicTab,
- StyledModal,
- EditHeader,
- EditHeaderTitle,
- EditHeaderSubtitle,
+ antDAlertStyles,
+ antDModalNoPaddingStyles,
+ antDModalStyles,
+ antDTabsStyles,
+ buttonLinkStyles,
CreateHeader,
CreateHeaderSubtitle,
CreateHeaderTitle,
- Divider,
- StyledBasicTab,
- antDModalStyles,
- antDModalNoPaddingStyles,
+ EditHeader,
+ EditHeaderSubtitle,
+ EditHeaderTitle,
formHelperStyles,
formStyles,
- antDTabsStyles,
- buttonLinkStyles,
+ StyledBasicTab,
} from './styles';
const DOCUMENTATION_LINK =
@@ -76,14 +74,14 @@ interface DatabaseModalProps {
}
enum ActionType {
- textChange,
- inputChange,
+ configMethodChange,
+ dbSelected,
editorChange,
fetched,
- reset,
- dbSelected,
+ inputChange,
parametersChange,
- configMethodChange,
+ reset,
+ textChange,
}
interface DBReducerPayloadType {
@@ -312,9 +310,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
if (dbFetched) {
setDB({
type: ActionType.fetched,
- payload: {
- ...dbFetched,
- },
+ payload: dbFetched,
});
}
}, [dbFetched]);
@@ -381,11 +377,12 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</CreateHeaderSubtitle>
</CreateHeader>
)}
- <Divider />
+ <hr />
<Tabs
defaultActiveKey={DEFAULT_TAB_KEY}
activeKey={tabKey}
onTabClick={tabChange}
+ animated={{ inkBar: true, tabPane: true }}
>
<StyledBasicTab tab={<span>{t('Basic')}</span>} key="1">
{useSqlAlchemyForm ? (
@@ -408,12 +405,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</div>
)}
<Alert
+ css={(theme: SupersetTheme) => antDAlertStyles(theme)}
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{' '}
+ the Advanced tab to successfully connect the database. Learn
+ what requirements your databases has{' '}
<a
href={DOCUMENTATION_LINK}
target="_blank"
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index 638b06b..8c33756 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -106,6 +106,28 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
}
`;
+export const antDAlertStyles = (theme: SupersetTheme) => css`
+ border: 1px solid ${theme.colors.info.base};
+ padding: ${theme.gridUnit * 4}px;
+ margin: ${theme.gridUnit * 8}px 0 0;
+ .ant-alert-message {
+ color: ${theme.colors.info.dark2};
+ font-size: ${theme.typography.sizes.s + 1}px;
+ font-weight: bold;
+ }
+ .ant-alert-description {
+ color: ${theme.colors.info.dark2};
+ font-size: ${theme.typography.sizes.s + 1}px;
+ line-height: ${theme.gridUnit * 4}px;
+ .ant-alert-icon {
+ margin-right: ${theme.gridUnit * 2.5}px;
+ font-size: ${theme.typography.sizes.l + 1}px;
+ position: relative;
+ top: ${theme.gridUnit / 4}px;
+ }
+ }
+`;
+
export const formHelperStyles = (theme: SupersetTheme) => css`
.required {
margin-left: ${theme.gridUnit / 2}px;
@@ -121,6 +143,17 @@ export const formHelperStyles = (theme: SupersetTheme) => css`
}
`;
+export const wideButton = (theme: SupersetTheme) => css`
+ width: 100%;
+ border: 1px solid ${theme.colors.primary.dark2};
+ color: ${theme.colors.primary.dark2};
+ &:hover,
+ &:focus {
+ border: 1px solid ${theme.colors.primary.dark1};
+ color: ${theme.colors.primary.dark1};
+ }
+`;
+
export const formStyles = (theme: SupersetTheme) => css`
.form-group {
margin-bottom: ${theme.gridUnit * 4}px;
@@ -148,21 +181,6 @@ export const formStyles = (theme: SupersetTheme) => css`
font-size: ${theme.typography.sizes.s - 1}px;
margin-top: ${theme.gridUnit * 1.5}px;
}
-
- .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;
@@ -307,22 +325,20 @@ export const CreateHeader = styled.div`
flex-direction: column;
justify-content: center;
padding: 0px;
- margin: ${({ theme }) => theme.gridUnit * 4}px
- ${({ theme }) => theme.gridUnit * 4}px
- ${({ theme }) => theme.gridUnit * 9}px;
+ margin: 0 ${({ theme }) => theme.gridUnit * 4}px
+ ${({ theme }) => theme.gridUnit * 6}px;
`;
export const CreateHeaderTitle = styled.div`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
+ color: ${({ theme }) => theme.colors.grayscale.dark2};
font-weight: bold;
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- padding: ${({ theme }) => theme.gridUnit * 1}px;
+ font-size: ${({ theme }) => theme.typography.sizes.m}px;
+ padding: ${({ theme }) => theme.gridUnit * 1}px 0;
`;
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`
@@ -336,7 +352,3 @@ export const EditHeaderSubtitle = styled.div`
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-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
index 920f4b6..2c386b5 100644
--- a/superset-frontend/src/views/CRUD/data/database/types.ts
+++ b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -96,6 +96,8 @@ export type DatabaseForm = {
sqlalchemy_uri_placeholder: string;
};
+// the values should align with the database
+// model enum in superset/superset/models/core.py
export enum CONFIGURATION_METHOD {
SQLALCHEMY_URI = 'sqlalchemy_form',
DYNAMIC_FORM = 'dynamic_form',