feat(dbc ui): Adding Google Sheets Dynamic Form (#15801)

* feat: Make Google Sheets Dyanmic (#15576) * first draft * second draft * added tests * first draft * added table_catalog * remove console.log * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * revisions * save this for now * working form * save disable on public sheets * refactor somethings * saving this for now * working edit * add back query to schema * working add * fix styling * fixing x * fix linting * prettier * fix some type issues * more lint fixes * remove unused dependency * fix linint * fix validation * pylint bypass * pylint bypass * fix this * fix mypy * yerp * fix test * fix test * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * wrap add sheets * fix linting issues * fix unit test * ignore typing * fix editting and paste issues * remove query * fix this * fix test * add test back * fix error messaging * update url messaging on error * change error type * Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * add errors for sheets with no name * fix * fix messaging for gsheets * stop pylint * update line Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: Arash <arash.afghahi@gmail.com> Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>
2026-07-19 13:15:49 +00:00 · 2021-07-28 15:00:27 -04:00
parent 3f6c81b621
commit bfe7eb9a7b
10 changed files with 464 additions and 94 deletions
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -19,19 +19,21 @@
 import React, { FormEvent, useState } 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,
+  StyledCatalogTable,
 } from './styles';
-import { DatabaseForm, DatabaseObject } from '../types';
+import { CatalogObject, DatabaseForm, DatabaseObject } from '../types';

 enum CredentialInfoOptions {
  jsonUpload,
@@ -46,6 +48,7 @@ export const FormFieldOrder = [
  'password',
  'database_name',
  'credentials_info',
+  'catalog',
  'query',
  'encryption',
 ];
@@ -58,7 +61,10 @@ interface FieldPropTypes {
  onParametersUploadFileChange: (value: any) => string;
  changeMethods: { onParametersChange: (value: any) => string } & {
    onChange: (value: any) => string;
-  } & { onParametersUploadFileChange: (value: any) => string };
+  } & { onParametersUploadFileChange: (value: any) => string } & {
+    onAddTableCatalog: () => void;
+    onRemoveTableCatalog: (idx: number) => void;
+  };
  validationErrors: JsonObject | null;
  getValidation: () => void;
  db?: DatabaseObject;
@@ -187,6 +193,89 @@ const CredentialsInfo = ({
  );
 };

+const TableCatalog = ({
+  required,
+  changeMethods,
+  getValidation,
+  validationErrors,
+  db,
+}: FieldPropTypes) => {
+  const tableCatalog = db?.catalog || [];
+  const catalogError = validationErrors || {};
+  return (
+    <StyledCatalogTable>
+      <div className="catalog-type-select">
+        <FormLabel required>{t('Type of Google Sheets Allowed')}</FormLabel>
+        <Select style={{ width: '100%' }} defaultValue="true" disabled>
+          <Select.Option value="true" key={1}>
+            {t('Publicly shared sheets only')}
+          </Select.Option>
+        </Select>
+      </div>
+      <h4 className="gsheet-title">
+        {t('Connect Google Sheets as tables to this database')}
+      </h4>
+      <div>
+        {tableCatalog?.map((sheet: CatalogObject, idx: number) => (
+          <>
+            <FormLabel className="catalog-label" required>
+              {t('Google Sheet Name and URL')}
+            </FormLabel>
+            <div className="catalog-name">
+              <Input
+                className="catalog-name-input"
+                placeholder={t('Enter a name for this sheet')}
+                onChange={e => {
+                  changeMethods.onParametersChange({
+                    target: {
+                      type: `catalog-${idx}`,
+                      name: 'name',
+                      value: e.target.value,
+                    },
+                  });
+                }}
+                value={sheet.name}
+              />
+
+              {tableCatalog?.length > 1 && (
+                <CloseOutlined
+                  className="catalog-delete"
+                  onClick={() => changeMethods.onRemoveTableCatalog(idx)}
+                />
+              )}
+            </div>
+            <ValidatedInput
+              className="catalog-name-url"
+              required={required}
+              validationMethods={{ onBlur: getValidation }}
+              errorMessage={catalogError[sheet.name]}
+              placeholder={t('Paste the shareable Google Sheet URL here')}
+              onChange={(e: { target: { value: any } }) =>
+                changeMethods.onParametersChange({
+                  target: {
+                    type: `catalog-${idx}`,
+                    name: 'value',
+                    value: e.target.value,
+                  },
+                })
+              }
+              value={sheet.value}
+            />
+          </>
+        ))}
+        <StyledFooterButton
+          className="catalog-add-btn"
+          onClick={() => {
+            changeMethods.onAddTableCatalog();
+          }}
+        >
+          + {t('Add sheet')}
+        </StyledFooterButton>
+      </div>
+    </StyledCatalogTable>
+  );
+};
+
 const hostField = ({
  required,
  changeMethods,
@@ -300,18 +389,22 @@ const displayField = ({
  validationErrors,
  db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="database_name"
-    name="database_name"
-    required
-    value={db?.database_name}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.database_name}
-    placeholder=""
-    label="Display Name"
-    onChange={changeMethods.onChange}
-    helpText={t('Pick a nickname for this database to display as in Superset.')}
-  />
+  <>
+    <ValidatedInput
+      id="database_name"
+      name="database_name"
+      required
+      value={db?.database_name}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.database_name}
+      placeholder=""
+      label={t('Display Name')}
+      onChange={changeMethods.onChange}
+      helpText={t(
+        'Pick a nickname for this database to display as in Superset.',
+      )}
+    />
+  </>
 );

 const queryField = ({
@@ -375,6 +468,7 @@ const FORM_FIELD_MAP = {
  query: queryField,
  encryption: forceSSLField,
  credentials_info: CredentialsInfo,
+  catalog: TableCatalog,
 };

 const DatabaseConnectionForm = ({
@@ -382,6 +476,8 @@ const DatabaseConnectionForm = ({
  onParametersChange,
  onChange,
  onParametersUploadFileChange,
+  onAddTableCatalog,
+  onRemoveTableCatalog,
  validationErrors,
  getValidation,
  db,
@@ -403,6 +499,8 @@ const DatabaseConnectionForm = ({
  onParametersUploadFileChange?: (
    event: FormEvent<InputProps> | { target: HTMLInputElement },
  ) => void;
+  onAddTableCatalog: () => void;
+  onRemoveTableCatalog: (idx: number) => void;
  validationErrors: JsonObject | null;
  getValidation: () => void;
 }) => (
@@ -426,6 +524,8 @@ const DatabaseConnectionForm = ({
              onParametersChange,
              onChange,
              onParametersUploadFileChange,
+              onAddTableCatalog,
+              onRemoveTableCatalog,
            },
            validationErrors,
            getValidation,