Skip to content

Commit

Permalink
moved all non-BasicParameters into own field
Browse files Browse the repository at this point in the history
  • Loading branch information
@AAfghahi
AAfghahi committed Sep 29, 2021
1 parent b071881 commit e4410c5
Show file tree
Hide file tree
Showing 5 changed files with 344 additions and 303 deletions.
2 changes: 1 addition & 1 deletion setup.cfg
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ combine_as_imports = true
include_trailing_comma = true
line_length = 88
known_first_party = superset
known_third_party =alembic,apispec,babel,backoff,bleach,cachelib,celery,click,colorama,cron_descriptor,croniter,cryptography,dateutil,deprecation,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_jwt_extended,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,graphlib,holidays,humanize,isodate,jinja2,jwt,markdown,markupsafe,marshmallow,marshmallow_enum,msgpack,numpy,pandas,parameterized,parsedatetime,pgsanity,pkg_resources,polyline,prison,progress,pyarrow,pyhive,pyparsing,pytest,pytest_mock,pytz,redis,requests,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,typing_extensions,urllib3,werkzeug,wtforms,wtforms_json,yaml
known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,cron_descriptor,croniter,cryptography,dateutil,deprecation,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_jwt_extended,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,freezegun,geohash,geopy,graphlib,holidays,humanize,isodate,jinja2,jwt,markdown,markupsafe,marshmallow,marshmallow_enum,msgpack,numpy,pandas,parameterized,parsedatetime,pgsanity,pkg_resources,polyline,prison,progress,pyarrow,pyhive,pyparsing,pytest,pytest_mock,pytz,redis,requests,selenium,setuptools,simplejson,slack,sqlalchemy,sqlalchemy_utils,sqlparse,typing_extensions,urllib3,werkzeug,wtforms,wtforms_json,yaml
multi_line_output = 3
order_by_type = false

Expand Down
Empty file added superset-frontend/src/views/CRUD/data/database/DatabaseModal/CommonParametersSchema.tsx
View file
Empty file.
294 changes: 11 additions & 283 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,26 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { FormEvent, useState } from 'react';
import React, { FormEvent } 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 { Switch } 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, CloseOutlined } from '@ant-design/icons';
import {
accountField,
warehouseField,
roleField,
TableCatalog,
CredentialsInfo,
} from 'src/views/CRUD/data/database/DatabaseModal/ExtraFields';
import {
formScrollableStyles,
validatedFormStyles,
CredentialInfoForm,
toggleStyle,
infoTooltip,
StyledFooterButton,
StyledCatalogTable,
} from './styles';
import { CatalogObject, DatabaseForm, DatabaseObject } from '../types';

enum CredentialInfoOptions {
jsonUpload,
copyPaste,
}
import { DatabaseForm, DatabaseObject } from '../types';

export const FormFieldOrder = [
'host',
Expand All @@ -56,7 +53,7 @@ export const FormFieldOrder = [
'role',
];

interface FieldPropTypes {
export interface FieldPropTypes {
required: boolean;
hasTooltip?: boolean;
tooltipText?: (valuse: any) => string;
Expand All @@ -79,210 +76,6 @@ interface FieldPropTypes {
editNewDb?: boolean;
}

const CredentialsInfo = ({
changeMethods,
isEditMode,
db,
editNewDb,
}: FieldPropTypes) => {
const [uploadOption, setUploadOption] = useState<number>(
CredentialInfoOptions.jsonUpload.valueOf(),
);
const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
null,
);
return (
<CredentialInfoForm>
{!isEditMode && (
<>
<FormLabel required>
{t('How do you want to enter service account credentials?')}
</FormLabel>
<Select
defaultValue={uploadOption}
style={{ width: '100%' }}
onChange={option => setUploadOption(option)}
>
<Select.Option value={CredentialInfoOptions.jsonUpload}>
{t('Upload JSON file')}
</Select.Option>

<Select.Option value={CredentialInfoOptions.copyPaste}>
{t('Copy and Paste JSON credentials')}
</Select.Option>
</Select>
</>
)}
{uploadOption === CredentialInfoOptions.copyPaste ||
isEditMode ||
editNewDb ? (
<div className="input-container">
<FormLabel required>{t('Service Account')}</FormLabel>
<textarea
className="input-form"
name="credentials_info"
value={db?.parameters?.credentials_info}
onChange={changeMethods.onParametersChange}
placeholder="Paste content of service credentials JSON file here"
/>
<span className="label-paste">
{t('Copy and paste the entire service account .json file here')}
</span>
</div>
) : (
<div
className="input-container"
css={(theme: SupersetTheme) => infoTooltip(theme)}
>
<div css={{ display: 'flex', alignItems: 'center' }}>
<FormLabel required>{t('Upload Credentials')}</FormLabel>
<InfoTooltip
tooltip={t(
'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
)}
viewBox="0 0 24 24"
/>
</div>

{!fileToUpload && (
<Button
className="input-upload-btn"
onClick={() => document?.getElementById('selectedFile')?.click()}
>
{t('Choose File')}
</Button>
)}
{fileToUpload && (
<div className="input-upload-current">
{fileToUpload}
<DeleteFilled
onClick={() => {
setFileToUpload(null);
changeMethods.onParametersChange({
target: {
name: 'credentials_info',
value: '',
},
});
}}
/>
</div>
)}

<input
id="selectedFile"
className="input-upload"
type="file"
onChange={async event => {
let file;
if (event.target.files) {
file = event.target.files[0];
}
setFileToUpload(file?.name);
changeMethods.onParametersChange({
target: {
type: null,
name: 'credentials_info',
value: await file?.text(),
checked: false,
},
});
(document.getElementById(
'selectedFile',
) as HTMLInputElement).value = null as any;
}}
/>
</div>
)}
</CredentialInfoForm>
);
};

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">
<ValidatedInput
className="catalog-name-input"
required={required}
validationMethods={{ onBlur: getValidation }}
errorMessage={catalogError[idx]?.name}
placeholder={t('Enter a name for this sheet')}
onChange={(e: { target: { value: any } }) => {
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[idx]?.url}
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,
Expand Down Expand Up @@ -435,71 +228,6 @@ const queryField = ({
/>
);

const warehouseField = ({
required,
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="warehouse"
name="warehouse"
required={required}
value={db?.parameters?.warehouse}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.warehouse}
placeholder="e.g. compute_wh"
label="Warehouse"
onChange={changeMethods.onParametersChange}
className="form-group-w-50"
/>
);

const roleField = ({
required,
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="role"
name="role"
required={required}
value={db?.parameters?.role}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.role}
placeholder="e.g. AccountAdmin"
label="Role"
onChange={changeMethods.onParametersChange}
className="form-group-w-50"
/>
);

const accountField = ({
required,
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="account"
name="account"
required={required}
value={db?.parameters?.account}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.account}
placeholder="e.g. world_population"
label="Account"
onChange={changeMethods.onParametersChange}
helpText={t(
'Copy the account name of that database you are trying to connect to.',
)}
/>
);

const forceSSLField = ({
isEditMode,
changeMethods,
Expand Down
Loading

0 comments on commit e4410c5

Please sign in to comment.