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 <[email protected]> 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',
