This is an automated email from the ASF dual-hosted git repository. hugh pushed a commit to branch ch18764_gsheetsAdd in repository https://gitbox.apache.org/repos/asf/superset.git
commit 4b466adef8c03370286d4e9644b25269561c92ae Author: hughhhh <[email protected]> AuthorDate: Wed Jul 14 14:23:32 2021 -0700 save this for now --- .../DatabaseModal/DatabaseConnectionForm.tsx | 84 ++++++++++++++-------- .../CRUD/data/database/DatabaseModal/index.tsx | 47 ++++++++++++ 2 files changed, 101 insertions(+), 30 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 7c06a53..fa2fe87 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -19,17 +19,18 @@ import React, { FormEvent, useState, Dispatch, SetStateAction } from 'react'; import { SupersetTheme, JsonObject, t } from '@superset-ui/core'; import { InputProps } from 'antd/lib/input'; -import { Switch, Select, Button } from 'src/common/components'; +import { Input, Switch, Select, Button } from 'src/common/components'; import InfoTooltip from 'src/components/InfoTooltip'; import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput'; import FormLabel from 'src/components/Form/FormLabel'; -import { DeleteFilled } from '@ant-design/icons'; +import { DeleteFilled, CloseOutlined } from '@ant-design/icons'; import { formScrollableStyles, validatedFormStyles, CredentialInfoForm, toggleStyle, infoTooltip, + StyledFooterButton, } from './styles'; import { DatabaseForm, DatabaseObject } from '../types'; @@ -206,36 +207,59 @@ const TableCatalog = ({ editNewDb, validationErrors, }: FieldPropTypes) => { - const [tableCatalog, setTableCatalog] = useState<Record<string, string>>( - db?.parameters?.table_catalog || {}, - ); + const [tableCatalog, setTableCatalog] = useState<Record<string, string>>([ + {}, + ]); return ( <div> - {Object.keys(tableCatalog).map(field => ( - <> - <ValidatedInput - id="table_catalog_name" - name="table_catalog_name" - required={required} - value={field} - validationMethods={{ onBlur: getValidation }} - errorMessage={validationErrors?.table_catalog} - placeholder="Create a name for this sheet" - label="Google Sheet name and url" - onChange={changeMethods.onParametersChange} - /> - <ValidatedInput - id="table_catalog_value" - name="table_catalog_value" - required={required} - value={tableCatalog[field]} - validationMethods={{ onBlur: getValidation }} - errorMessage={validationErrors?.table_catalog} - placeholder="Paste the shareable Google Sheet URL here" - onChange={changeMethods.onParametersChange} - /> - </> - ))} + {console.log(tableCatalog)} + <> + {tableCatalog.map(sheet => ( + <> + <Input + name="table-catalog-name-1" + placeholder="Enter create a name for this sheet" + onChange={changeMethods.onParametersChange} + /> + {/* <CloseOutlined + onClick={() => { + const index = tableCatalog.indexOf(sheet); + console.log(index) + if (index > -1) { + tableCatalog.splice(index, 1); + console.log(tableCatalog); + setTableCatalog(tableCatalog); + } + }} + /> */} + <ValidatedInput + name="table-catalog-value-1" + type="gsheet" + required={required} + validationMethods={{ onBlur: getValidation }} + errorMessage={validationErrors?.table_catalog} + placeholder="Paste the shareable Google Sheet URL here" + onChange={changeMethods.onParametersChange} + onPaste={(e) => { + changeMethods.onParametersChange({ + target: { + name: 'table-catalog-value-1', + value: e.clipboardData.getData('Text'), + }, + }); + }} + /> + </> + ))} + <StyledFooterButton + onClick={() => { + console.log('add button'); + setTableCatalog([...tableCatalog, {}]); + }} + > + Add sheet + </StyledFooterButton> + </> </div> ); }; 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 df63932..358f731 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -180,6 +180,7 @@ function dbReducer( ...(state || {}), }; let query = ''; + switch (action.type) { case ActionType.extraEditorChange: return { @@ -227,6 +228,50 @@ function dbReducer( [action.payload.name]: action.payload.value, }; case ActionType.parametersChange: + const data = {}; + if (action.payload.name.startsWith('table-catalog')) { + // Reformatting gsheets components for validation + console.log('state', state); + console.log('action', action); + + // Go through key can pull out names + if (trimmedState.parameters?.table_catalog) { + console.log( + 'table_catalog', + Object.keys(trimmedState.parameters?.table_catalog), + ); + Object.keys(trimmedState.parameters?.table_catalog).map(k => { + if (k.startsWith('table-catalog-name')) { + console.log(k); + console.log(k.split('-').pop()); + console.log( + trimmedState.parameters?.table_catalog[ + `table-catalog-value-${k.split('-').pop()}` + ], + ); + data[trimmedState.parameters?.table_catalog[k]] = + trimmedState.parameters?.table_catalog[ + `table-catalog-value-${k.split('-').pop()}` + ]; + } + }); + } + + console.log('data', data); + + // match key with values + return { + ...trimmedState, + parameters: { + ...trimmedState.parameters, + table_catalog: { + ...trimmedState.parameters?.table_catalog, + [action.payload.name]: action.payload.value, + }, + }, + }; + } + return { ...trimmedState, parameters: { @@ -395,6 +440,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ testDatabaseConnection(connection, addDangerToast, addSuccessToast); }; + console.log('db', db); + const onClose = () => { setDB({ type: ActionType.reset }); setHasConnectedDb(false);
