initial version of json file upload component (#75)
This commit is contained in:
Erik Jan de Wit
GitHub
parent
c59a7198c9
commit
082682e6d3
7 changed files with 690 additions and 88 deletions
|
|
@ -1,5 +1,6 @@
|
|||
module.exports = {
|
||||
...require("@snowpack/app-scripts-react/jest.config.js")(),
|
||||
"snapshotSerializers": ["enzyme-to-json/serializer"],
|
||||
"moduleNameMapper": {
|
||||
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
|
||||
"\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from "react";
|
||||
import { Button, AlertVariant } from "@patternfly/react-core";
|
||||
import { mount } from "enzyme";
|
||||
import EnzymeToJson from "enzyme-to-json";
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
||||
import { AlertPanel } from "./AlertPanel";
|
||||
|
|
@ -20,9 +19,7 @@ const WithButton = () => {
|
|||
};
|
||||
|
||||
it("renders global alerts", () => {
|
||||
const empty = EnzymeToJson(
|
||||
mount(<AlertPanel alerts={[]} onCloseAlert={() => {}} />)
|
||||
);
|
||||
const empty = mount(<AlertPanel alerts={[]} onCloseAlert={() => {}} />);
|
||||
expect(empty).toMatchSnapshot();
|
||||
|
||||
const tree = mount(<WithButton />);
|
||||
|
|
@ -32,10 +29,10 @@ it("renders global alerts", () => {
|
|||
act(() => {
|
||||
button!.simulate("click");
|
||||
});
|
||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
35
src/components/json-file-upload/JsonFileUpload.test.tsx
Normal file
35
src/components/json-file-upload/JsonFileUpload.test.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React from "react";
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import { JsonFileUpload } from "./JsonFileUpload";
|
||||
|
||||
describe("<JsonFileUpload />", () => {
|
||||
it("render", () => {
|
||||
const comp = mount(<JsonFileUpload id="test" onChange={jest.fn()} />);
|
||||
expect(comp).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("upload file", async () => {
|
||||
const onChange = jest.fn((value) => value);
|
||||
const comp = mount(<JsonFileUpload id="upload" onChange={onChange} />);
|
||||
|
||||
const fileInput = comp.find('[type="file"]');
|
||||
expect(fileInput.length).toBe(1);
|
||||
|
||||
const json = '{"bla": "test"}';
|
||||
const file = new File([json], "test.json");
|
||||
|
||||
const dummyFileReader = {
|
||||
onload: jest.fn(),
|
||||
readAsText: () => Promise.resolve(json),
|
||||
};
|
||||
(window as any).FileReader = jest.fn(() => dummyFileReader);
|
||||
|
||||
fileInput.simulate("change", {
|
||||
target: {
|
||||
files: [file],
|
||||
},
|
||||
});
|
||||
expect(comp).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
118
src/components/json-file-upload/JsonFileUpload.tsx
Normal file
118
src/components/json-file-upload/JsonFileUpload.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
FormGroup,
|
||||
FileUpload,
|
||||
Modal,
|
||||
ModalVariant,
|
||||
Button,
|
||||
} from "@patternfly/react-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type FileUpload = {
|
||||
value: string | File;
|
||||
filename: string;
|
||||
isLoading: boolean;
|
||||
modal: boolean;
|
||||
};
|
||||
|
||||
export type JsonFileUploadProps = {
|
||||
id: string;
|
||||
onChange: (
|
||||
value: string | File,
|
||||
filename: string,
|
||||
event:
|
||||
| React.DragEvent<HTMLElement> // User dragged/dropped a file
|
||||
| React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
|
||||
| React.MouseEvent<HTMLButtonElement, MouseEvent> // User clicked Clear button
|
||||
) => void;
|
||||
};
|
||||
|
||||
export const JsonFileUpload = ({
|
||||
id,
|
||||
onChange,
|
||||
...rest
|
||||
}: JsonFileUploadProps) => {
|
||||
const { t } = useTranslation();
|
||||
const defaultUpload = {
|
||||
value: "",
|
||||
filename: "",
|
||||
isLoading: false,
|
||||
modal: false,
|
||||
};
|
||||
const [fileUpload, setFileUpload] = useState<FileUpload>(defaultUpload);
|
||||
const removeDialog = () => setFileUpload({ ...fileUpload, modal: false });
|
||||
const handleChange = (
|
||||
value: string | File,
|
||||
filename: string,
|
||||
event:
|
||||
| React.DragEvent<HTMLElement>
|
||||
| React.ChangeEvent<HTMLTextAreaElement>
|
||||
| React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
): void => {
|
||||
if (event.nativeEvent instanceof MouseEvent) {
|
||||
setFileUpload({ ...fileUpload, modal: true });
|
||||
} else {
|
||||
setFileUpload({
|
||||
...fileUpload,
|
||||
value,
|
||||
filename,
|
||||
});
|
||||
onChange(value, filename, event);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{fileUpload.modal && (
|
||||
<Modal
|
||||
variant={ModalVariant.small}
|
||||
title={t("Clear this file")}
|
||||
isOpen
|
||||
onClose={removeDialog}
|
||||
actions={[
|
||||
<Button
|
||||
key="confirm"
|
||||
variant="primary"
|
||||
onClick={(event) => {
|
||||
setFileUpload(defaultUpload);
|
||||
onChange("", "", event);
|
||||
}}
|
||||
>
|
||||
{t("Clear")}
|
||||
</Button>,
|
||||
<Button key="cancel" variant="link" onClick={removeDialog}>
|
||||
{t("Cancel")}
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
{t("confirmImportClear")}
|
||||
</Modal>
|
||||
)}
|
||||
<FormGroup
|
||||
label={t("Resource file")}
|
||||
fieldId={id}
|
||||
helperText="Upload a JSON file"
|
||||
>
|
||||
<FileUpload
|
||||
id={id}
|
||||
{...rest}
|
||||
type="text"
|
||||
value={fileUpload.value}
|
||||
filename={fileUpload.filename}
|
||||
onChange={handleChange}
|
||||
allowEditingUploadedText
|
||||
onReadStarted={() =>
|
||||
setFileUpload({ ...fileUpload, isLoading: true })
|
||||
}
|
||||
onReadFinished={() =>
|
||||
setFileUpload({ ...fileUpload, isLoading: false })
|
||||
}
|
||||
isLoading={fileUpload.isLoading}
|
||||
dropzoneProps={{
|
||||
accept: ".json",
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<JsonFileUpload /> render 1`] = `
|
||||
<JsonFileUpload
|
||||
id="test"
|
||||
onChange={[MockFunction]}
|
||||
>
|
||||
<FormGroup
|
||||
fieldId="test"
|
||||
helperText="Upload a JSON file"
|
||||
label="Resource file"
|
||||
>
|
||||
<div
|
||||
className="pf-c-form__group"
|
||||
>
|
||||
<div
|
||||
className="pf-c-form__group-label"
|
||||
>
|
||||
<label
|
||||
className="pf-c-form__label"
|
||||
htmlFor="test"
|
||||
>
|
||||
<span
|
||||
className="pf-c-form__label-text"
|
||||
>
|
||||
Resource file
|
||||
</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="pf-c-form__group-control"
|
||||
>
|
||||
<FileUpload
|
||||
allowEditingUploadedText={true}
|
||||
dropzoneProps={
|
||||
Object {
|
||||
"accept": ".json",
|
||||
}
|
||||
}
|
||||
filename=""
|
||||
id="test"
|
||||
isLoading={false}
|
||||
onChange={[Function]}
|
||||
onReadFinished={[Function]}
|
||||
onReadStarted={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<t
|
||||
accept=".json"
|
||||
disabled={false}
|
||||
getDataTransferItems={[Function]}
|
||||
maxSize={Infinity}
|
||||
minSize={0}
|
||||
multiple={false}
|
||||
onDropAccepted={[Function]}
|
||||
onDropRejected={[Function]}
|
||||
preventDropOnDocument={true}
|
||||
>
|
||||
<FileUploadField
|
||||
allowEditingUploadedText={true}
|
||||
containerRef={[Function]}
|
||||
filename=""
|
||||
id="test"
|
||||
isLoading={false}
|
||||
onBlur={[Function]}
|
||||
onBrowseButtonClick={[Function]}
|
||||
onChange={[Function]}
|
||||
onClearButtonClick={[Function]}
|
||||
onClick={[Function]}
|
||||
onDragEnter={[Function]}
|
||||
onDragLeave={[Function]}
|
||||
onDragOver={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
tabIndex={null}
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-file-upload"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onDragEnter={[Function]}
|
||||
onDragLeave={[Function]}
|
||||
onDragOver={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
tabIndex={null}
|
||||
>
|
||||
<div
|
||||
className="pf-c-file-upload__file-select"
|
||||
>
|
||||
<InputGroup>
|
||||
<div
|
||||
className="pf-c-input-group"
|
||||
>
|
||||
<ForwardRef
|
||||
aria-describedby="test-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
id="test-filename"
|
||||
isDisabled={false}
|
||||
isReadOnly={true}
|
||||
key=".0"
|
||||
name="test-filename"
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
value=""
|
||||
>
|
||||
<TextInputBase
|
||||
aria-describedby="test-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
className=""
|
||||
id="test-filename"
|
||||
innerRef={null}
|
||||
isDisabled={false}
|
||||
isReadOnly={true}
|
||||
isRequired={false}
|
||||
name="test-filename"
|
||||
onChange={[Function]}
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
type="text"
|
||||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<input
|
||||
aria-describedby="test-browse-button"
|
||||
aria-invalid={false}
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
className="pf-c-form-control"
|
||||
disabled={false}
|
||||
id="test-filename"
|
||||
name="test-filename"
|
||||
onChange={[Function]}
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
readOnly={true}
|
||||
required={false}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</TextInputBase>
|
||||
</ForwardRef>
|
||||
<Button
|
||||
id="test-browse-button"
|
||||
isDisabled={false}
|
||||
key=".1"
|
||||
onClick={[Function]}
|
||||
variant="control"
|
||||
>
|
||||
<button
|
||||
aria-disabled={false}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-control"
|
||||
data-ouia-component-id={0}
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
id="test-browse-button"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Browse...
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
isDisabled={true}
|
||||
key=".2"
|
||||
onClick={[Function]}
|
||||
variant="control"
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-control pf-m-disabled"
|
||||
data-ouia-component-id={1}
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe={true}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div
|
||||
className="pf-c-file-upload__file-details"
|
||||
>
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="test"
|
||||
isRequired={false}
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
resizeOrientation="vertical"
|
||||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
disabled={false}
|
||||
id="test"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
value=""
|
||||
/>
|
||||
</TextArea>
|
||||
</div>
|
||||
<input
|
||||
accept=".json"
|
||||
autoComplete="off"
|
||||
multiple={false}
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
}
|
||||
}
|
||||
tabIndex={-1}
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</FileUploadField>
|
||||
</t>
|
||||
</FileUpload>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="pf-c-form__helper-text"
|
||||
id="test-helper"
|
||||
>
|
||||
Upload a JSON file
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</JsonFileUpload>
|
||||
`;
|
||||
|
||||
exports[`<JsonFileUpload /> upload file 1`] = `
|
||||
<JsonFileUpload
|
||||
id="upload"
|
||||
onChange={[MockFunction]}
|
||||
>
|
||||
<FormGroup
|
||||
fieldId="upload"
|
||||
helperText="Upload a JSON file"
|
||||
label="Resource file"
|
||||
>
|
||||
<div
|
||||
className="pf-c-form__group"
|
||||
>
|
||||
<div
|
||||
className="pf-c-form__group-label"
|
||||
>
|
||||
<label
|
||||
className="pf-c-form__label"
|
||||
htmlFor="upload"
|
||||
>
|
||||
<span
|
||||
className="pf-c-form__label-text"
|
||||
>
|
||||
Resource file
|
||||
</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="pf-c-form__group-control"
|
||||
>
|
||||
<FileUpload
|
||||
allowEditingUploadedText={true}
|
||||
dropzoneProps={
|
||||
Object {
|
||||
"accept": ".json",
|
||||
}
|
||||
}
|
||||
filename=""
|
||||
id="upload"
|
||||
isLoading={false}
|
||||
onChange={[Function]}
|
||||
onReadFinished={[Function]}
|
||||
onReadStarted={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<t
|
||||
accept=".json"
|
||||
disabled={false}
|
||||
getDataTransferItems={[Function]}
|
||||
maxSize={Infinity}
|
||||
minSize={0}
|
||||
multiple={false}
|
||||
onDropAccepted={[Function]}
|
||||
onDropRejected={[Function]}
|
||||
preventDropOnDocument={true}
|
||||
>
|
||||
<FileUploadField
|
||||
allowEditingUploadedText={true}
|
||||
containerRef={[Function]}
|
||||
filename=""
|
||||
id="upload"
|
||||
isDragActive={false}
|
||||
isLoading={false}
|
||||
onBlur={[Function]}
|
||||
onBrowseButtonClick={[Function]}
|
||||
onChange={[Function]}
|
||||
onClearButtonClick={[Function]}
|
||||
onClick={[Function]}
|
||||
onDragEnter={[Function]}
|
||||
onDragLeave={[Function]}
|
||||
onDragOver={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
tabIndex={null}
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-file-upload"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onDragEnter={[Function]}
|
||||
onDragLeave={[Function]}
|
||||
onDragOver={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
tabIndex={null}
|
||||
>
|
||||
<div
|
||||
className="pf-c-file-upload__file-select"
|
||||
>
|
||||
<InputGroup>
|
||||
<div
|
||||
className="pf-c-input-group"
|
||||
>
|
||||
<ForwardRef
|
||||
aria-describedby="upload-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
id="upload-filename"
|
||||
isDisabled={false}
|
||||
isReadOnly={true}
|
||||
key=".0"
|
||||
name="upload-filename"
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
value=""
|
||||
>
|
||||
<TextInputBase
|
||||
aria-describedby="upload-browse-button"
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
className=""
|
||||
id="upload-filename"
|
||||
innerRef={null}
|
||||
isDisabled={false}
|
||||
isReadOnly={true}
|
||||
isRequired={false}
|
||||
name="upload-filename"
|
||||
onChange={[Function]}
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
type="text"
|
||||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<input
|
||||
aria-describedby="upload-browse-button"
|
||||
aria-invalid={false}
|
||||
aria-label="Drag a file here or browse to upload"
|
||||
className="pf-c-form-control"
|
||||
disabled={false}
|
||||
id="upload-filename"
|
||||
name="upload-filename"
|
||||
onChange={[Function]}
|
||||
placeholder="Drag a file here or browse to upload"
|
||||
readOnly={true}
|
||||
required={false}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</TextInputBase>
|
||||
</ForwardRef>
|
||||
<Button
|
||||
id="upload-browse-button"
|
||||
isDisabled={false}
|
||||
key=".1"
|
||||
onClick={[Function]}
|
||||
variant="control"
|
||||
>
|
||||
<button
|
||||
aria-disabled={false}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-control"
|
||||
data-ouia-component-id={4}
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe={true}
|
||||
disabled={false}
|
||||
id="upload-browse-button"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Browse...
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
isDisabled={true}
|
||||
key=".2"
|
||||
onClick={[Function]}
|
||||
variant="control"
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-control pf-m-disabled"
|
||||
data-ouia-component-id={5}
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe={true}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div
|
||||
className="pf-c-file-upload__file-details"
|
||||
>
|
||||
<TextArea
|
||||
aria-label="File upload"
|
||||
className=""
|
||||
disabled={false}
|
||||
id="upload"
|
||||
isRequired={false}
|
||||
name="upload"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
resizeOrientation="vertical"
|
||||
validated="default"
|
||||
value=""
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
aria-label="File upload"
|
||||
className="pf-c-form-control pf-m-resize-vertical"
|
||||
disabled={false}
|
||||
id="upload"
|
||||
name="upload"
|
||||
onChange={[Function]}
|
||||
readOnly={false}
|
||||
required={false}
|
||||
value=""
|
||||
/>
|
||||
</TextArea>
|
||||
</div>
|
||||
<input
|
||||
accept=".json"
|
||||
autoComplete="off"
|
||||
multiple={false}
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
}
|
||||
}
|
||||
tabIndex={-1}
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</FileUploadField>
|
||||
</t>
|
||||
</FileUpload>
|
||||
<div
|
||||
aria-live="polite"
|
||||
className="pf-c-form__helper-text"
|
||||
id="upload-helper"
|
||||
>
|
||||
Upload a JSON file
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</JsonFileUpload>
|
||||
`;
|
||||
|
|
@ -6,41 +6,25 @@ import {
|
|||
Divider,
|
||||
Form,
|
||||
FormGroup,
|
||||
FileUpload,
|
||||
TextInput,
|
||||
ActionGroup,
|
||||
Button,
|
||||
AlertVariant,
|
||||
Modal,
|
||||
ModalVariant,
|
||||
} from "@patternfly/react-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { ClientRepresentation } from "../../model/client-model";
|
||||
import { ClientDescription } from "./ClientDescription";
|
||||
import { HttpClientContext } from "../../http-service/HttpClientContext";
|
||||
import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
|
||||
import { useAlerts } from "../../components/alert/Alerts";
|
||||
import { AlertPanel } from "../../components/alert/AlertPanel";
|
||||
|
||||
type FileUpload = {
|
||||
value: string | File;
|
||||
filename: string;
|
||||
isLoading: boolean;
|
||||
modal: boolean;
|
||||
};
|
||||
|
||||
export const ImportForm = () => {
|
||||
const { t } = useTranslation();
|
||||
const httpClient = useContext(HttpClientContext)!;
|
||||
|
||||
const [add, alerts, hide] = useAlerts();
|
||||
const defaultUpload = {
|
||||
value: "",
|
||||
filename: "",
|
||||
isLoading: false,
|
||||
modal: false,
|
||||
};
|
||||
const [fileUpload, setFileUpload] = useState<FileUpload>(defaultUpload);
|
||||
const defaultClient = {
|
||||
protocol: "",
|
||||
clientId: "",
|
||||
|
|
@ -49,21 +33,11 @@ export const ImportForm = () => {
|
|||
};
|
||||
const [client, setClient] = useState<ClientRepresentation>(defaultClient);
|
||||
|
||||
const handleFileChange = (value: string | File, filename: string) => {
|
||||
if (value === "" && client.protocol !== "") {
|
||||
// clear clicked
|
||||
setFileUpload({ ...fileUpload, modal: true });
|
||||
} else {
|
||||
setFileUpload({
|
||||
...fileUpload,
|
||||
value,
|
||||
filename,
|
||||
});
|
||||
setClient({
|
||||
...client,
|
||||
...(value ? JSON.parse(value as string) : defaultClient),
|
||||
});
|
||||
}
|
||||
const handleFileChange = (value: string | File) => {
|
||||
setClient({
|
||||
...client,
|
||||
...(value ? JSON.parse(value as string) : defaultClient),
|
||||
});
|
||||
};
|
||||
const handleDescriptionChange = (
|
||||
value: string,
|
||||
|
|
@ -72,7 +46,6 @@ export const ImportForm = () => {
|
|||
const name = (event.target as HTMLInputElement).name;
|
||||
setClient({ ...client, [name]: value });
|
||||
};
|
||||
const removeDialog = () => setFileUpload({ ...fileUpload, modal: false });
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
|
|
@ -95,56 +68,8 @@ export const ImportForm = () => {
|
|||
</PageSection>
|
||||
<Divider />
|
||||
<PageSection variant="light">
|
||||
{fileUpload.modal && (
|
||||
<Modal
|
||||
variant={ModalVariant.small}
|
||||
title={t("Clear this file")}
|
||||
isOpen
|
||||
onClose={removeDialog}
|
||||
actions={[
|
||||
<Button
|
||||
key="confirm"
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
setClient(defaultClient);
|
||||
setFileUpload(defaultUpload);
|
||||
}}
|
||||
>
|
||||
{t("Clear")}
|
||||
</Button>,
|
||||
<Button key="cancel" variant="link" onClick={removeDialog}>
|
||||
{t("Cancel")}
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
{t("confirmImportClear")}
|
||||
</Modal>
|
||||
)}
|
||||
<Form isHorizontal>
|
||||
<FormGroup
|
||||
label={t("Resource file")}
|
||||
fieldId="realm-file"
|
||||
helperText="Upload a JSON file"
|
||||
>
|
||||
<FileUpload
|
||||
id="realm-file"
|
||||
type="text"
|
||||
value={fileUpload.value}
|
||||
filename={fileUpload.filename}
|
||||
onChange={handleFileChange}
|
||||
allowEditingUploadedText
|
||||
onReadStarted={() =>
|
||||
setFileUpload({ ...fileUpload, isLoading: true })
|
||||
}
|
||||
onReadFinished={() =>
|
||||
setFileUpload({ ...fileUpload, isLoading: false })
|
||||
}
|
||||
isLoading={fileUpload.isLoading}
|
||||
dropzoneProps={{
|
||||
accept: ".json",
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
<JsonFileUpload id="realm-file" onChange={handleFileChange} />
|
||||
<ClientDescription
|
||||
onChange={handleDescriptionChange}
|
||||
client={client}
|
||||
|
|
|
|||
22
src/stories/JsonFileUpload.stories.tsx
Normal file
22
src/stories/JsonFileUpload.stories.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from "react";
|
||||
import { Meta, Story } from "@storybook/react";
|
||||
|
||||
import {
|
||||
JsonFileUpload,
|
||||
JsonFileUploadProps,
|
||||
} from "../components/json-file-upload/JsonFileUpload";
|
||||
|
||||
export default {
|
||||
title: "Json file upload dailog",
|
||||
component: JsonFileUpload,
|
||||
parameters: { actions: { argTypesRegex: "^on.*" } },
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<JsonFileUploadProps> = (args) => (
|
||||
<JsonFileUpload {...args} />
|
||||
);
|
||||
|
||||
export const Dialog = Template.bind({});
|
||||
Dialog.args = {
|
||||
id: "jsonFile",
|
||||
};
|
||||
Loading…
Reference in a new issue