eschutho commented on a change in pull request #14881:
URL: https://github.com/apache/superset/pull/14881#discussion_r661011015
##########
File path:
superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
##########
@@ -34,27 +45,170 @@ export const FormFieldOrder = [
'username',
'password',
'database_name',
+ 'credentials_info',
+ 'query',
+ 'encryption',
];
interface FieldPropTypes {
required: boolean;
+ hasTooltip?: boolean;
+ tooltipText?: (valuse: any) => string;
+ onParametersChange: (value: any) => string;
+ onParametersUploadFileChange: (value: any) => string;
changeMethods: { onParametersChange: (value: any) => string } & {
onChange: (value: any) => string;
- };
+ } & { onParametersUploadFileChange: (value: any) => string };
validationErrors: JsonObject | null;
getValidation: () => void;
+ db?: DatabaseObject;
+ isEditMode?: boolean;
+ sslForced?: boolean;
+ defaultDBName?: string;
+ 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={JSON.stringify(
+ {
+ credentials_info: '<contents of credentials JSON file>',
+ },
+ null,
+ ' ',
+ )}
+ />
+ <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 => {
Review comment:
small nit, but this is a fairly long function in this event handler. Not
necessarily required now, but I think it would read better if we pulled this
out into a named function instead.
--
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]
