betodealmeida commented on a change in pull request #15801:
URL: https://github.com/apache/superset/pull/15801#discussion_r674397692
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
+ </Select.Option>
+ </Select>
+ </div>
+ <h4 className="gsheet-title">
+ 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="Enter create a name for this sheet"
Review comment:
```suggestion
placeholder={t('Enter a name for this sheet')}
```
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -58,14 +61,19 @@ 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;
isEditMode?: boolean;
sslForced?: boolean;
defaultDBName?: string;
editNewDb?: boolean;
+ setPublic: Dispatch<SetStateAction<boolean>>;
+ isPublic?: boolean;
Review comment:
Maybe call these `setGSheetsPublic` and `isGSheetsPublic`, since the
concept is specific to GSheets only?
Have we considered splitting this file into custom components for some of
the DBs?
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
+ </Select.Option>
+ </Select>
+ </div>
+ <h4 className="gsheet-title">
+ 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')}
Review comment:
Nit, unless the designs call for "Url" let's use "URL".
```suggestion
{t('Google Sheet Name and URL')}
```
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
##########
@@ -1071,8 +1175,20 @@ const DatabaseModal:
FunctionComponent<DatabaseModalProps> = ({
)}
<DatabaseConnectionForm
db={db}
+ setPublic={setPublic}
+ isPublic={isPublic}
sslForced={sslForced}
dbModel={dbModel}
+ onAddTableCatalog={() => {
+ console.log('hey');
Review comment:
```suggestion
```
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -300,18 +402,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="Display Name"
Review comment:
```suggestion
label={t('Display Name')}
```
I know you didn't change this, but since it's here...
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
+ </Select.Option>
+ </Select>
+ </div>
+ <h4 className="gsheet-title">
+ Connect Google Sheets as tables to this database
Review comment:
```suggestion
{t('Connect Google Sheets as tables to this database')}
```
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
+ </Select.Option>
+ </Select>
+ </div>
+ <h4 className="gsheet-title">
+ 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="Enter create 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="Paste the shareable Google Sheet URL here"
Review comment:
```suggestion
placeholder={t('Paste the shareable Google Sheet URL here')}
```
##########
File path: superset/db_engine_specs/gsheets.py
##########
@@ -35,11 +40,17 @@
SYNTAX_ERROR_REGEX = re.compile('SQLError: near "(?P<server_error>.*?)":
syntax error')
+ma_plugin = MarshmallowPlugin()
+
+
+class GSheetsParametersSchema(Schema):
+ catalog = fields.Dict()
+ query = fields.Dict(required=False)
+
class GSheetsParametersType(TypedDict):
credentials_info: Dict[str, Any]
- query: Dict[str, Any]
- table_catalog: Dict[str, str]
+ catalog: Dict[str, str]
Review comment:
Wait, you asked me to change from `catalog` to `table_catalog` and now
you're changing it back? 😄
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
+ </Select.Option>
+ </Select>
+ </div>
+ <h4 className="gsheet-title">
+ 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="Enter create 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="Paste the shareable Google Sheet URL here"
+ onChange={(e: { target: { value: any } }) =>
+ changeMethods.onParametersChange({
+ target: {
+ type: `catalog-${idx}`,
+ name: 'value',
+ value: e.target.value,
+ },
+ })
+ }
+ onPaste={(e: {
+ clipboardData: { getData: (arg0: string) => any };
+ }) =>
+ changeMethods.onParametersChange({
+ target: {
+ type: `catalog-${idx}`,
+ name: 'value',
+ value: e.clipboardData.getData('Text'),
+ },
+ })
+ }
+ value={sheet.value}
+ />
+ </>
+ ))}
+ <StyledFooterButton
+ className="catalog-add-btn"
+ onClick={() => {
+ changeMethods.onAddTableCatalog();
+ }}
+ >
+ + Add sheet
Review comment:
```suggestion
+ {t'{Add sheet')}
```
Also, should we use an icon for the "+"?
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -187,6 +195,100 @@ 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}>
+ Publicly shared sheets only
Review comment:
```suggestion
{t('Publicly shared sheets only')}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
