This is an automated email from the ASF dual-hosted git repository. hugh pushed a commit to branch hugh/bg-validation-db-modal in repository https://gitbox.apache.org/repos/asf/superset.git
commit b5f385517c9a43cdecfbe57062a511ec6e4a9b66 Author: hughhhh <[email protected]> AuthorDate: Mon May 24 14:50:56 2021 -0400 add big query to database connection form --- superset-frontend/src/common/components/index.tsx | 1 + .../DatabaseModal/DatabaseConnectionForm.tsx | 32 +++++++++++++++++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx index bf17aac..c0cf44a 100644 --- a/superset-frontend/src/common/components/index.tsx +++ b/superset-frontend/src/common/components/index.tsx @@ -54,6 +54,7 @@ export { Tag, Tabs, Tooltip, + Upload, Input as AntdInput, } from 'antd'; export { Card as AntdCard } from 'antd'; 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 1eeab48..bde8009 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import React, { FormEvent } from 'react'; +import React, { FormEvent, useState} from 'react'; import { SupersetTheme } from '@superset-ui/core'; import { InputProps } from 'antd/lib/input'; import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput'; +import { Button, Select, Input, Upload } from 'src/common/components'; import { StyledFormHeader, formScrollableStyles, @@ -34,6 +35,7 @@ export const FormFieldOrder = [ 'username', 'password', 'database_name', + 'credentials_info', ]; interface FieldPropTypes { @@ -43,6 +45,33 @@ interface FieldPropTypes { }; } +const CredentialInfo = ({ required, changeMethods }: FieldPropTypes) => { + const [uploadOption, setUploadOption] = useState<string>('upload'); + return ( + <> + <Select + defaultValue={'file'} + style={{ width: '100%' }} + onChange={value => { + setUploadOption(value); + }} + > + <Select value="file">Upload JSON file</Select> + <Select value="paste">Copy and Paste JSON credentials</Select> + </Select> + {uploadOption === 'paste' ? ( + <div className="input-container"> + <Input rows={4}/> + </div> + ) : ( + <Upload> + <Button>Click to Upload</Button> + </Upload> + )} + </> + ); +}; + const hostField = ({ required, changeMethods }: FieldPropTypes) => ( <ValidatedInput id="host" @@ -121,6 +150,7 @@ const FORM_FIELD_MAP = { username: usernameField, password: passwordField, database_name: displayField, + credentials_info: CredentialInfo, }; const DatabaseConnectionForm = ({
