Skip to content

Commit

Permalink
centralized headers with conditional logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@AAfghahi
AAfghahi committed Jun 8, 2021
1 parent 860efef commit eb53d28
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 153 deletions.
198 changes: 105 additions & 93 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,18 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { FormEvent, useEvent } 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 InfoTooltip from 'src/components/InfoTooltip';
import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
import { DeleteFilled } from '@ant-design/icons';
import Label from 'src/components/Label';
import {
formScrollableStyles,
validatedFormStyles,
CredentialInfoForm,
StyledFormHeader,
toggleStyle,
infoTooltip,
} from './styles';
Expand All @@ -49,8 +49,12 @@ export const FormFieldOrder = [
'credentials_info',
];

const selectedFile = document.getElementById('selectedFile');

interface FieldPropTypes {
required: boolean;
onParametersChange: (value: any) => string;
onParametersUploadFileChange: (value: any) => string;
changeMethods: { onParametersChange: (value: any) => string } & {
onChange: (value: any) => string;
} & { onParametersUploadFileChange: (value: any) => string };
Expand All @@ -59,92 +63,96 @@ interface FieldPropTypes {
db?: DatabaseObject;
isEditMode?: boolean;
sslForced?: boolean;
uploadOption?: string | null;
setUploadOption: (obj: any) => void;
fileToUpload?: string;
setFileToUpload: (obj: any) => void;
}

const credentialsInfo = ({
required,
changeMethods,
getValidation,
validationErrors,
}: FieldPropTypes) => {
const [uploadOption, setUploadOption] = useState<string>('upload');
const [fileToUpload, setFileToUpload] = useState<string>(null);
return (
<CredentialInfoForm>
<label className="label-select">
How do you want to enter service account credentials?
</label>
<Select
defaultValue={CredentialInfoOptions.jsonUpload}
style={{ width: '100%' }}
onChange={setUploadOption}
>
<Select.Option value={CredentialInfoOptions.jsonUpload}>
Upload JSON file
</Select.Option>
<Select.Option value={CredentialInfoOptions.copyPaste}>
Copy and Paste JSON credentials
</Select.Option>
</Select>
{uploadOption === 'paste' ? (
<div className="input-container" onChange={changeMethods.onChange}>
<span className="label-select">Service Account</span>
<textarea className="input-form" name="encrypted_extra" />
<span className="label-paste">
Copy and paste the entire service account .json file here
</span>
</div>
) : (
<div className="input-container">
<span className="label-select">Upload Credentials</span>
{!fileToUpload && (
<Button
className="input-upload-btn"
onClick={() => document.getElementById('selectedFile').click()}
>
Choose File
</Button>
)}
{fileToUpload && (
<div className="input-upload-current">
{fileToUpload}
<DeleteFilled
onClick={() => {
setFileToUpload(null);
changeMethods.onParametersChange({
target: {
name: 'encrypted_extra',
value: '',
},
});
}}
/>
</div>
)}
uploadOption,
setUploadOption,
fileToUpload,
setFileToUpload,
}: FieldPropTypes) => (
<CredentialInfoForm>
<Label className="label-select">
How do you want to enter service account credentials?
</Label>
<Select
defaultValue={CredentialInfoOptions.jsonUpload}
style={{ width: '100%' }}
onChange={setUploadOption}
>
<Select.Option value={CredentialInfoOptions.jsonUpload}>
Upload JSON file
</Select.Option>
<Select.Option value={CredentialInfoOptions.copyPaste}>
Copy and Paste JSON credentials
</Select.Option>
</Select>
{uploadOption === 'paste' ? (
<div className="input-container" onChange={changeMethods.onChange}>
<span className="label-select">Service Account</span>
<textarea className="input-form" name="encrypted_extra" />
<span className="label-paste">
Copy and paste the entire service account .json file here
</span>
</div>
) : (
<div className="input-container">
<span className="label-select">Upload Credentials</span>
{!fileToUpload && (
<Button
className="input-upload-btn"
onClick={() => selectedFile?.click()}
>
Choose File
</Button>
)}
{fileToUpload && (
<div className="input-upload-current">
{fileToUpload}
<DeleteFilled
onClick={() => {
setFileToUpload(null);
changeMethods.onParametersChange({
target: {
name: 'encrypted_extra',
value: '',
},
});
}}
/>
</div>
)}

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

const hostField = ({
required,
Expand Down Expand Up @@ -306,7 +314,7 @@ const FORM_FIELD_MAP = {
};

const DatabaseConnectionForm = ({
dbModel: { name, parameters },
dbModel: { parameters },
onParametersChange,
onChange,
onParametersUploadFileChange,
Expand All @@ -315,7 +323,15 @@ const DatabaseConnectionForm = ({
db,
isEditMode = false,
sslForced,
uploadOption,
setUploadOption,
fileToUpload,
setFileToUpload,
}: {
uploadOption: string;
setUploadOption: (obj: string) => void;
fileToUpload: string | null;
setFileToUpload: (obj: string | null) => void;
isEditMode?: boolean;
sslForced: boolean;
dbModel: DatabaseForm;
Expand All @@ -326,21 +342,13 @@ const DatabaseConnectionForm = ({
onChange: (
event: FormEvent<InputProps> | { target: HTMLInputElement },
) => void;
onParametersUploadFileChange: (
onParametersUploadFileChange?: (
event: FormEvent<InputProps> | { target: HTMLInputElement },
) => void;
validationErrors: JsonObject | null;
getValidation: () => void;
}) => (
<>
{!isEditMode && (
<StyledFormHeader>
<h4>Enter the required {name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {name}.
</p>
</StyledFormHeader>
)}
<div
// @ts-ignore
css={(theme: SupersetTheme) => [
Expand All @@ -367,6 +375,10 @@ const DatabaseConnectionForm = ({
key: field,
isEditMode,
sslForced,
uploadOption,
setUploadOption,
fileToUpload,
setFileToUpload,
}),
)}
</div>
Expand Down
Loading

0 comments on commit eb53d28

Please sign in to comment.