fixes issue around importing files (#643)
* fixes issue around importing files fixes: #628 * fixed tests * fixed moving cursor to end of text area did have to remove the dirty check because of this
This commit is contained in:
Erik Jan de Wit
GitHub
parent
d8f6537375
commit
707380c228
6 changed files with 429 additions and 440 deletions
|
|
@ -32,7 +32,7 @@ export const ImportForm = () => {
|
||||||
|
|
||||||
const { addAlert } = useAlerts();
|
const { addAlert } = useAlerts();
|
||||||
|
|
||||||
const handleFileChange = (value: string | File) => {
|
const handleFileChange = (obj: object) => {
|
||||||
const defaultClient = {
|
const defaultClient = {
|
||||||
protocol: "",
|
protocol: "",
|
||||||
clientId: "",
|
clientId: "",
|
||||||
|
|
@ -40,12 +40,11 @@ export const ImportForm = () => {
|
||||||
description: "",
|
description: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
const obj = value ? JSON.parse(value as string) : defaultClient;
|
Object.entries(obj || defaultClient).forEach((entries) => {
|
||||||
Object.keys(obj).forEach((k) => {
|
if (entries[0] === "attributes") {
|
||||||
if (k === "attributes") {
|
convertToFormValues(entries[1], "attributes", form.setValue);
|
||||||
convertToFormValues(obj[k], "attributes", form.setValue);
|
|
||||||
} else {
|
} else {
|
||||||
setValue(k, obj[k]);
|
setValue(entries[0], entries[1]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -21,13 +21,9 @@ export type JsonFileUploadEvent =
|
||||||
| React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
|
| React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
|
||||||
| React.MouseEvent<HTMLButtonElement, MouseEvent>; // User clicked Clear button
|
| React.MouseEvent<HTMLButtonElement, MouseEvent>; // User clicked Clear button
|
||||||
|
|
||||||
export type JsonFileUploadProps = FileUploadProps & {
|
export type JsonFileUploadProps = Omit<FileUploadProps, "onChange"> & {
|
||||||
id: string;
|
id: string;
|
||||||
onChange: (
|
onChange: (obj: object) => void;
|
||||||
value: string | File,
|
|
||||||
filename: string,
|
|
||||||
event: JsonFileUploadEvent
|
|
||||||
) => void;
|
|
||||||
helpText?: string;
|
helpText?: string;
|
||||||
unWrap?: boolean;
|
unWrap?: boolean;
|
||||||
};
|
};
|
||||||
|
|
@ -67,27 +63,20 @@ export const JsonFileUpload = ({
|
||||||
value,
|
value,
|
||||||
filename,
|
filename,
|
||||||
});
|
});
|
||||||
onChange(value, filename, event);
|
|
||||||
|
if (value) {
|
||||||
|
let obj = {};
|
||||||
|
try {
|
||||||
|
obj = JSON.parse(value as string);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn("Invalid json, ignoring value using {}");
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(obj);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const JsonFileUploadComp = () => (
|
|
||||||
<FileUpload
|
|
||||||
id={id}
|
|
||||||
{...rest}
|
|
||||||
type="text"
|
|
||||||
value={fileUpload.value}
|
|
||||||
filename={fileUpload.filename}
|
|
||||||
onChange={handleChange}
|
|
||||||
onReadStarted={() => setFileUpload({ ...fileUpload, isLoading: true })}
|
|
||||||
onReadFinished={() => setFileUpload({ ...fileUpload, isLoading: false })}
|
|
||||||
isLoading={fileUpload.isLoading}
|
|
||||||
dropzoneProps={{
|
|
||||||
accept: ".json",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{fileUpload.modal && (
|
{fileUpload.modal && (
|
||||||
|
|
@ -100,9 +89,9 @@ export const JsonFileUpload = ({
|
||||||
<Button
|
<Button
|
||||||
key="confirm"
|
key="confirm"
|
||||||
variant="primary"
|
variant="primary"
|
||||||
onClick={(event) => {
|
onClick={() => {
|
||||||
setFileUpload(defaultUpload);
|
setFileUpload(defaultUpload);
|
||||||
onChange("", "", event);
|
onChange({});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t("clear")}
|
{t("clear")}
|
||||||
|
|
@ -115,14 +104,50 @@ export const JsonFileUpload = ({
|
||||||
{t("clearFileExplain")}
|
{t("clearFileExplain")}
|
||||||
</Modal>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
{unWrap && <JsonFileUploadComp />}
|
{unWrap && (
|
||||||
|
<FileUpload
|
||||||
|
id={id}
|
||||||
|
{...rest}
|
||||||
|
type="text"
|
||||||
|
value={fileUpload.value}
|
||||||
|
filename={fileUpload.filename}
|
||||||
|
onChange={handleChange}
|
||||||
|
onReadStarted={() =>
|
||||||
|
setFileUpload({ ...fileUpload, isLoading: true })
|
||||||
|
}
|
||||||
|
onReadFinished={() =>
|
||||||
|
setFileUpload({ ...fileUpload, isLoading: false })
|
||||||
|
}
|
||||||
|
isLoading={fileUpload.isLoading}
|
||||||
|
dropzoneProps={{
|
||||||
|
accept: ".json",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{!unWrap && (
|
{!unWrap && (
|
||||||
<FormGroup
|
<FormGroup
|
||||||
label={t("resourceFile")}
|
label={t("resourceFile")}
|
||||||
fieldId={id}
|
fieldId={id}
|
||||||
helperText={t(helpText)}
|
helperText={t(helpText)}
|
||||||
>
|
>
|
||||||
<JsonFileUploadComp />
|
<FileUpload
|
||||||
|
id={id}
|
||||||
|
{...rest}
|
||||||
|
type="text"
|
||||||
|
value={fileUpload.value}
|
||||||
|
filename={fileUpload.filename}
|
||||||
|
onChange={handleChange}
|
||||||
|
onReadStarted={() =>
|
||||||
|
setFileUpload({ ...fileUpload, isLoading: true })
|
||||||
|
}
|
||||||
|
onReadFinished={() =>
|
||||||
|
setFileUpload({ ...fileUpload, isLoading: false })
|
||||||
|
}
|
||||||
|
isLoading={fileUpload.isLoading}
|
||||||
|
dropzoneProps={{
|
||||||
|
accept: ".json",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -31,42 +31,57 @@ exports[`<JsonFileUpload /> render 1`] = `
|
||||||
<div
|
<div
|
||||||
className="pf-c-form__group-control"
|
className="pf-c-form__group-control"
|
||||||
>
|
>
|
||||||
<JsonFileUploadComp>
|
<FileUpload
|
||||||
<FileUpload
|
dropzoneProps={
|
||||||
dropzoneProps={
|
Object {
|
||||||
Object {
|
"accept": ".json",
|
||||||
"accept": ".json",
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
filename=""
|
}
|
||||||
id="test"
|
filename=""
|
||||||
isLoading={false}
|
id="test"
|
||||||
onChange={[Function]}
|
isLoading={false}
|
||||||
onReadFinished={[Function]}
|
onChange={[Function]}
|
||||||
onReadStarted={[Function]}
|
onReadFinished={[Function]}
|
||||||
type="text"
|
onReadStarted={[Function]}
|
||||||
value=""
|
type="text"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
<t
|
||||||
|
accept=".json"
|
||||||
|
disabled={false}
|
||||||
|
getDataTransferItems={[Function]}
|
||||||
|
maxSize={Infinity}
|
||||||
|
minSize={0}
|
||||||
|
multiple={false}
|
||||||
|
onDropAccepted={[Function]}
|
||||||
|
onDropRejected={[Function]}
|
||||||
|
preventDropOnDocument={true}
|
||||||
>
|
>
|
||||||
<t
|
<FileUploadField
|
||||||
accept=".json"
|
containerRef={[Function]}
|
||||||
disabled={false}
|
filename=""
|
||||||
getDataTransferItems={[Function]}
|
id="test"
|
||||||
maxSize={Infinity}
|
isLoading={false}
|
||||||
minSize={0}
|
onBlur={[Function]}
|
||||||
multiple={false}
|
onBrowseButtonClick={[Function]}
|
||||||
onDropAccepted={[Function]}
|
onChange={[Function]}
|
||||||
onDropRejected={[Function]}
|
onClearButtonClick={[Function]}
|
||||||
preventDropOnDocument={true}
|
onClick={[Function]}
|
||||||
|
onDragEnter={[Function]}
|
||||||
|
onDragLeave={[Function]}
|
||||||
|
onDragOver={[Function]}
|
||||||
|
onDragStart={[Function]}
|
||||||
|
onDrop={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
onKeyDown={[Function]}
|
||||||
|
onTextAreaClick={[Function]}
|
||||||
|
tabIndex={null}
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
>
|
>
|
||||||
<FileUploadField
|
<div
|
||||||
containerRef={[Function]}
|
className="pf-c-file-upload"
|
||||||
filename=""
|
|
||||||
id="test"
|
|
||||||
isLoading={false}
|
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onBrowseButtonClick={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
onClearButtonClick={[Function]}
|
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
onDragEnter={[Function]}
|
onDragEnter={[Function]}
|
||||||
onDragLeave={[Function]}
|
onDragLeave={[Function]}
|
||||||
|
|
@ -75,133 +90,133 @@ exports[`<JsonFileUpload /> render 1`] = `
|
||||||
onDrop={[Function]}
|
onDrop={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onKeyDown={[Function]}
|
onKeyDown={[Function]}
|
||||||
onTextAreaClick={[Function]}
|
|
||||||
tabIndex={null}
|
tabIndex={null}
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="pf-c-file-upload"
|
className="pf-c-file-upload__file-select"
|
||||||
onBlur={[Function]}
|
|
||||||
onClick={[Function]}
|
|
||||||
onDragEnter={[Function]}
|
|
||||||
onDragLeave={[Function]}
|
|
||||||
onDragOver={[Function]}
|
|
||||||
onDragStart={[Function]}
|
|
||||||
onDrop={[Function]}
|
|
||||||
onFocus={[Function]}
|
|
||||||
onKeyDown={[Function]}
|
|
||||||
tabIndex={null}
|
|
||||||
>
|
>
|
||||||
<div
|
<InputGroup>
|
||||||
className="pf-c-file-upload__file-select"
|
<div
|
||||||
>
|
className="pf-c-input-group"
|
||||||
<InputGroup>
|
>
|
||||||
<div
|
<TextInput
|
||||||
className="pf-c-input-group"
|
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=""
|
||||||
>
|
>
|
||||||
<TextInput
|
<TextInputBase
|
||||||
aria-describedby="test-browse-button"
|
aria-describedby="test-browse-button"
|
||||||
aria-label="Drag a file here or browse to upload"
|
aria-label="Drag a file here or browse to upload"
|
||||||
|
className=""
|
||||||
id="test-filename"
|
id="test-filename"
|
||||||
|
innerRef={null}
|
||||||
isDisabled={false}
|
isDisabled={false}
|
||||||
|
isLeftTruncated={false}
|
||||||
isReadOnly={true}
|
isReadOnly={true}
|
||||||
key=".0"
|
isRequired={false}
|
||||||
name="test-filename"
|
name="test-filename"
|
||||||
|
onChange={[Function]}
|
||||||
placeholder="Drag a file here or browse to upload"
|
placeholder="Drag a file here or browse to upload"
|
||||||
|
type="text"
|
||||||
|
validated="default"
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<TextInputBase
|
<input
|
||||||
aria-describedby="test-browse-button"
|
aria-describedby="test-browse-button"
|
||||||
|
aria-invalid={false}
|
||||||
aria-label="Drag a file here or browse to upload"
|
aria-label="Drag a file here or browse to upload"
|
||||||
className=""
|
className="pf-c-form-control"
|
||||||
id="test-filename"
|
|
||||||
innerRef={null}
|
|
||||||
isDisabled={false}
|
|
||||||
isLeftTruncated={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"
|
|
||||||
onBlur={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
onFocus={[Function]}
|
|
||||||
placeholder="Drag a file here or browse to upload"
|
|
||||||
readOnly={true}
|
|
||||||
required={false}
|
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</TextInputBase>
|
|
||||||
</TextInput>
|
|
||||||
<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="OUIA-Generated-Button-control-1"
|
|
||||||
data-ouia-component-type="PF4/Button"
|
|
||||||
data-ouia-safe={true}
|
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="test-browse-button"
|
id="test-filename"
|
||||||
onClick={[Function]}
|
name="test-filename"
|
||||||
role={null}
|
onBlur={[Function]}
|
||||||
type="button"
|
onChange={[Function]}
|
||||||
>
|
onFocus={[Function]}
|
||||||
Browse...
|
placeholder="Drag a file here or browse to upload"
|
||||||
</button>
|
readOnly={true}
|
||||||
</Button>
|
required={false}
|
||||||
<Button
|
type="text"
|
||||||
isDisabled={true}
|
value=""
|
||||||
key=".2"
|
/>
|
||||||
|
</TextInputBase>
|
||||||
|
</TextInput>
|
||||||
|
<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="OUIA-Generated-Button-control-1"
|
||||||
|
data-ouia-component-type="PF4/Button"
|
||||||
|
data-ouia-safe={true}
|
||||||
|
disabled={false}
|
||||||
|
id="test-browse-button"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
variant="control"
|
role={null}
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<button
|
Browse...
|
||||||
aria-disabled={true}
|
</button>
|
||||||
aria-label={null}
|
</Button>
|
||||||
className="pf-c-button pf-m-control pf-m-disabled"
|
<Button
|
||||||
data-ouia-component-id="OUIA-Generated-Button-control-2"
|
isDisabled={true}
|
||||||
data-ouia-component-type="PF4/Button"
|
key=".2"
|
||||||
data-ouia-safe={true}
|
onClick={[Function]}
|
||||||
disabled={true}
|
variant="control"
|
||||||
onClick={[Function]}
|
>
|
||||||
role={null}
|
<button
|
||||||
tabIndex={null}
|
aria-disabled={true}
|
||||||
type="button"
|
aria-label={null}
|
||||||
>
|
className="pf-c-button pf-m-control pf-m-disabled"
|
||||||
Clear
|
data-ouia-component-id="OUIA-Generated-Button-control-2"
|
||||||
</button>
|
data-ouia-component-type="PF4/Button"
|
||||||
</Button>
|
data-ouia-safe={true}
|
||||||
</div>
|
disabled={true}
|
||||||
</InputGroup>
|
onClick={[Function]}
|
||||||
</div>
|
role={null}
|
||||||
<div
|
tabIndex={null}
|
||||||
className="pf-c-file-upload__file-details"
|
type="button"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</InputGroup>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="pf-c-file-upload__file-details"
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
aria-label="File upload"
|
||||||
|
disabled={false}
|
||||||
|
id="test"
|
||||||
|
isRequired={false}
|
||||||
|
name="test"
|
||||||
|
onChange={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
readOnly={false}
|
||||||
|
resizeOrientation="vertical"
|
||||||
|
validated="default"
|
||||||
|
value=""
|
||||||
>
|
>
|
||||||
<TextArea
|
<TextArea
|
||||||
aria-label="File upload"
|
aria-label="File upload"
|
||||||
|
className=""
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="test"
|
id="test"
|
||||||
|
innerRef={null}
|
||||||
|
isDisabled={false}
|
||||||
isRequired={false}
|
isRequired={false}
|
||||||
name="test"
|
name="test"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
|
|
@ -211,57 +226,40 @@ exports[`<JsonFileUpload /> render 1`] = `
|
||||||
validated="default"
|
validated="default"
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<TextArea
|
<textarea
|
||||||
|
aria-invalid={false}
|
||||||
aria-label="File upload"
|
aria-label="File upload"
|
||||||
className=""
|
className="pf-c-form-control pf-m-resize-vertical"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="test"
|
id="test"
|
||||||
innerRef={null}
|
|
||||||
isDisabled={false}
|
|
||||||
isRequired={false}
|
|
||||||
name="test"
|
name="test"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
readOnly={false}
|
readOnly={false}
|
||||||
resizeOrientation="vertical"
|
required={false}
|
||||||
validated="default"
|
|
||||||
value=""
|
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]}
|
|
||||||
onClick={[Function]}
|
|
||||||
readOnly={false}
|
|
||||||
required={false}
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</TextArea>
|
|
||||||
</TextArea>
|
</TextArea>
|
||||||
</div>
|
</TextArea>
|
||||||
<input
|
|
||||||
accept=".json"
|
|
||||||
autoComplete="off"
|
|
||||||
multiple={false}
|
|
||||||
onChange={[Function]}
|
|
||||||
onClick={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"display": "none",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tabIndex={-1}
|
|
||||||
type="file"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</FileUploadField>
|
<input
|
||||||
</t>
|
accept=".json"
|
||||||
</FileUpload>
|
autoComplete="off"
|
||||||
</JsonFileUploadComp>
|
multiple={false}
|
||||||
|
onChange={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"display": "none",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tabIndex={-1}
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FileUploadField>
|
||||||
|
</t>
|
||||||
|
</FileUpload>
|
||||||
<div
|
<div
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
className="pf-c-form__helper-text"
|
className="pf-c-form__helper-text"
|
||||||
|
|
@ -306,43 +304,58 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
||||||
<div
|
<div
|
||||||
className="pf-c-form__group-control"
|
className="pf-c-form__group-control"
|
||||||
>
|
>
|
||||||
<JsonFileUploadComp>
|
<FileUpload
|
||||||
<FileUpload
|
dropzoneProps={
|
||||||
dropzoneProps={
|
Object {
|
||||||
Object {
|
"accept": ".json",
|
||||||
"accept": ".json",
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
filename=""
|
}
|
||||||
id="upload"
|
filename=""
|
||||||
isLoading={false}
|
id="upload"
|
||||||
onChange={[Function]}
|
isLoading={false}
|
||||||
onReadFinished={[Function]}
|
onChange={[Function]}
|
||||||
onReadStarted={[Function]}
|
onReadFinished={[Function]}
|
||||||
type="text"
|
onReadStarted={[Function]}
|
||||||
value=""
|
type="text"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
<t
|
||||||
|
accept=".json"
|
||||||
|
disabled={false}
|
||||||
|
getDataTransferItems={[Function]}
|
||||||
|
maxSize={Infinity}
|
||||||
|
minSize={0}
|
||||||
|
multiple={false}
|
||||||
|
onDropAccepted={[Function]}
|
||||||
|
onDropRejected={[Function]}
|
||||||
|
preventDropOnDocument={true}
|
||||||
>
|
>
|
||||||
<t
|
<FileUploadField
|
||||||
accept=".json"
|
containerRef={[Function]}
|
||||||
disabled={false}
|
filename=""
|
||||||
getDataTransferItems={[Function]}
|
id="upload"
|
||||||
maxSize={Infinity}
|
isDragActive={false}
|
||||||
minSize={0}
|
isLoading={false}
|
||||||
multiple={false}
|
onBlur={[Function]}
|
||||||
onDropAccepted={[Function]}
|
onBrowseButtonClick={[Function]}
|
||||||
onDropRejected={[Function]}
|
onChange={[Function]}
|
||||||
preventDropOnDocument={true}
|
onClearButtonClick={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
onDragEnter={[Function]}
|
||||||
|
onDragLeave={[Function]}
|
||||||
|
onDragOver={[Function]}
|
||||||
|
onDragStart={[Function]}
|
||||||
|
onDrop={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
onKeyDown={[Function]}
|
||||||
|
onTextAreaClick={[Function]}
|
||||||
|
tabIndex={null}
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
>
|
>
|
||||||
<FileUploadField
|
<div
|
||||||
containerRef={[Function]}
|
className="pf-c-file-upload"
|
||||||
filename=""
|
|
||||||
id="upload"
|
|
||||||
isDragActive={false}
|
|
||||||
isLoading={false}
|
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onBrowseButtonClick={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
onClearButtonClick={[Function]}
|
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
onDragEnter={[Function]}
|
onDragEnter={[Function]}
|
||||||
onDragLeave={[Function]}
|
onDragLeave={[Function]}
|
||||||
|
|
@ -351,133 +364,133 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
||||||
onDrop={[Function]}
|
onDrop={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onKeyDown={[Function]}
|
onKeyDown={[Function]}
|
||||||
onTextAreaClick={[Function]}
|
|
||||||
tabIndex={null}
|
tabIndex={null}
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="pf-c-file-upload"
|
className="pf-c-file-upload__file-select"
|
||||||
onBlur={[Function]}
|
|
||||||
onClick={[Function]}
|
|
||||||
onDragEnter={[Function]}
|
|
||||||
onDragLeave={[Function]}
|
|
||||||
onDragOver={[Function]}
|
|
||||||
onDragStart={[Function]}
|
|
||||||
onDrop={[Function]}
|
|
||||||
onFocus={[Function]}
|
|
||||||
onKeyDown={[Function]}
|
|
||||||
tabIndex={null}
|
|
||||||
>
|
>
|
||||||
<div
|
<InputGroup>
|
||||||
className="pf-c-file-upload__file-select"
|
<div
|
||||||
>
|
className="pf-c-input-group"
|
||||||
<InputGroup>
|
>
|
||||||
<div
|
<TextInput
|
||||||
className="pf-c-input-group"
|
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=""
|
||||||
>
|
>
|
||||||
<TextInput
|
<TextInputBase
|
||||||
aria-describedby="upload-browse-button"
|
aria-describedby="upload-browse-button"
|
||||||
aria-label="Drag a file here or browse to upload"
|
aria-label="Drag a file here or browse to upload"
|
||||||
|
className=""
|
||||||
id="upload-filename"
|
id="upload-filename"
|
||||||
|
innerRef={null}
|
||||||
isDisabled={false}
|
isDisabled={false}
|
||||||
|
isLeftTruncated={false}
|
||||||
isReadOnly={true}
|
isReadOnly={true}
|
||||||
key=".0"
|
isRequired={false}
|
||||||
name="upload-filename"
|
name="upload-filename"
|
||||||
|
onChange={[Function]}
|
||||||
placeholder="Drag a file here or browse to upload"
|
placeholder="Drag a file here or browse to upload"
|
||||||
|
type="text"
|
||||||
|
validated="default"
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<TextInputBase
|
<input
|
||||||
aria-describedby="upload-browse-button"
|
aria-describedby="upload-browse-button"
|
||||||
|
aria-invalid={false}
|
||||||
aria-label="Drag a file here or browse to upload"
|
aria-label="Drag a file here or browse to upload"
|
||||||
className=""
|
className="pf-c-form-control"
|
||||||
id="upload-filename"
|
|
||||||
innerRef={null}
|
|
||||||
isDisabled={false}
|
|
||||||
isLeftTruncated={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"
|
|
||||||
onBlur={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
onFocus={[Function]}
|
|
||||||
placeholder="Drag a file here or browse to upload"
|
|
||||||
readOnly={true}
|
|
||||||
required={false}
|
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</TextInputBase>
|
|
||||||
</TextInput>
|
|
||||||
<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="OUIA-Generated-Button-control-3"
|
|
||||||
data-ouia-component-type="PF4/Button"
|
|
||||||
data-ouia-safe={true}
|
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="upload-browse-button"
|
id="upload-filename"
|
||||||
onClick={[Function]}
|
name="upload-filename"
|
||||||
role={null}
|
onBlur={[Function]}
|
||||||
type="button"
|
onChange={[Function]}
|
||||||
>
|
onFocus={[Function]}
|
||||||
Browse...
|
placeholder="Drag a file here or browse to upload"
|
||||||
</button>
|
readOnly={true}
|
||||||
</Button>
|
required={false}
|
||||||
<Button
|
type="text"
|
||||||
isDisabled={true}
|
value=""
|
||||||
key=".2"
|
/>
|
||||||
|
</TextInputBase>
|
||||||
|
</TextInput>
|
||||||
|
<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="OUIA-Generated-Button-control-3"
|
||||||
|
data-ouia-component-type="PF4/Button"
|
||||||
|
data-ouia-safe={true}
|
||||||
|
disabled={false}
|
||||||
|
id="upload-browse-button"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
variant="control"
|
role={null}
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<button
|
Browse...
|
||||||
aria-disabled={true}
|
</button>
|
||||||
aria-label={null}
|
</Button>
|
||||||
className="pf-c-button pf-m-control pf-m-disabled"
|
<Button
|
||||||
data-ouia-component-id="OUIA-Generated-Button-control-4"
|
isDisabled={true}
|
||||||
data-ouia-component-type="PF4/Button"
|
key=".2"
|
||||||
data-ouia-safe={true}
|
onClick={[Function]}
|
||||||
disabled={true}
|
variant="control"
|
||||||
onClick={[Function]}
|
>
|
||||||
role={null}
|
<button
|
||||||
tabIndex={null}
|
aria-disabled={true}
|
||||||
type="button"
|
aria-label={null}
|
||||||
>
|
className="pf-c-button pf-m-control pf-m-disabled"
|
||||||
Clear
|
data-ouia-component-id="OUIA-Generated-Button-control-4"
|
||||||
</button>
|
data-ouia-component-type="PF4/Button"
|
||||||
</Button>
|
data-ouia-safe={true}
|
||||||
</div>
|
disabled={true}
|
||||||
</InputGroup>
|
onClick={[Function]}
|
||||||
</div>
|
role={null}
|
||||||
<div
|
tabIndex={null}
|
||||||
className="pf-c-file-upload__file-details"
|
type="button"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</InputGroup>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="pf-c-file-upload__file-details"
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
aria-label="File upload"
|
||||||
|
disabled={false}
|
||||||
|
id="upload"
|
||||||
|
isRequired={false}
|
||||||
|
name="upload"
|
||||||
|
onChange={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
readOnly={false}
|
||||||
|
resizeOrientation="vertical"
|
||||||
|
validated="default"
|
||||||
|
value=""
|
||||||
>
|
>
|
||||||
<TextArea
|
<TextArea
|
||||||
aria-label="File upload"
|
aria-label="File upload"
|
||||||
|
className=""
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="upload"
|
id="upload"
|
||||||
|
innerRef={null}
|
||||||
|
isDisabled={false}
|
||||||
isRequired={false}
|
isRequired={false}
|
||||||
name="upload"
|
name="upload"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
|
|
@ -487,57 +500,40 @@ exports[`<JsonFileUpload /> upload file 1`] = `
|
||||||
validated="default"
|
validated="default"
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<TextArea
|
<textarea
|
||||||
|
aria-invalid={false}
|
||||||
aria-label="File upload"
|
aria-label="File upload"
|
||||||
className=""
|
className="pf-c-form-control pf-m-resize-vertical"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="upload"
|
id="upload"
|
||||||
innerRef={null}
|
|
||||||
isDisabled={false}
|
|
||||||
isRequired={false}
|
|
||||||
name="upload"
|
name="upload"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
readOnly={false}
|
readOnly={false}
|
||||||
resizeOrientation="vertical"
|
required={false}
|
||||||
validated="default"
|
|
||||||
value=""
|
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]}
|
|
||||||
onClick={[Function]}
|
|
||||||
readOnly={false}
|
|
||||||
required={false}
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</TextArea>
|
|
||||||
</TextArea>
|
</TextArea>
|
||||||
</div>
|
</TextArea>
|
||||||
<input
|
|
||||||
accept=".json"
|
|
||||||
autoComplete="off"
|
|
||||||
multiple={false}
|
|
||||||
onChange={[Function]}
|
|
||||||
onClick={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"display": "none",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tabIndex={-1}
|
|
||||||
type="file"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</FileUploadField>
|
<input
|
||||||
</t>
|
accept=".json"
|
||||||
</FileUpload>
|
autoComplete="off"
|
||||||
</JsonFileUploadComp>
|
multiple={false}
|
||||||
|
onChange={[Function]}
|
||||||
|
onClick={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"display": "none",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tabIndex={-1}
|
||||||
|
type="file"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FileUploadField>
|
||||||
|
</t>
|
||||||
|
</FileUpload>
|
||||||
<div
|
<div
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
className="pf-c-form__helper-text"
|
className="pf-c-form__helper-text"
|
||||||
|
|
|
||||||
|
|
@ -54,17 +54,17 @@ export const OpenIdConnectSettings = () => {
|
||||||
}
|
}
|
||||||
}, [discovering]);
|
}, [discovering]);
|
||||||
|
|
||||||
const fileUpload = async (value: string) => {
|
const fileUpload = async (obj: object) => {
|
||||||
if (value !== "") {
|
if (obj) {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("providerId", id);
|
formData.append("providerId", id);
|
||||||
formData.append("file", new Blob([value]));
|
formData.append("file", new Blob([JSON.stringify(obj)]));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`${getBaseUrl(
|
`${getBaseUrl(
|
||||||
adminClient
|
adminClient
|
||||||
)}/admin/realms/${realm}/identity-provider/import-config`,
|
)}admin/realms/${realm}/identity-provider/import-config`,
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData,
|
body: formData,
|
||||||
|
|
@ -173,7 +173,7 @@ export const OpenIdConnectSettings = () => {
|
||||||
validated={
|
validated={
|
||||||
discoveryResult && discoveryResult.error ? "error" : "default"
|
discoveryResult && discoveryResult.error ? "error" : "default"
|
||||||
}
|
}
|
||||||
onChange={(value) => fileUpload(value as string)}
|
onChange={(value) => fileUpload(value)}
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
ButtonVariant,
|
ButtonVariant,
|
||||||
|
|
@ -11,12 +12,7 @@ import {
|
||||||
TextContent,
|
TextContent,
|
||||||
} from "@patternfly/react-core";
|
} from "@patternfly/react-core";
|
||||||
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { JsonFileUpload } from "../components/json-file-upload/JsonFileUpload";
|
||||||
|
|
||||||
import {
|
|
||||||
JsonFileUpload,
|
|
||||||
JsonFileUploadEvent,
|
|
||||||
} from "../components/json-file-upload/JsonFileUpload";
|
|
||||||
|
|
||||||
export type PartialImportProps = {
|
export type PartialImportProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -33,21 +29,8 @@ export const PartialImportDialog = (props: PartialImportProps) => {
|
||||||
setImportEnabled(false);
|
setImportEnabled(false);
|
||||||
}, [props.open]);
|
}, [props.open]);
|
||||||
|
|
||||||
const handleFileChange = (
|
const handleFileChange = (value: object) => {
|
||||||
value: string | File,
|
setImportEnabled(!!value);
|
||||||
filename: string,
|
|
||||||
event: JsonFileUploadEvent
|
|
||||||
) => {
|
|
||||||
setImportEnabled(value !== null);
|
|
||||||
|
|
||||||
// if user pressed clear button reset importEnabled
|
|
||||||
const nativeEvent = event.nativeEvent;
|
|
||||||
if (
|
|
||||||
nativeEvent instanceof MouseEvent &&
|
|
||||||
!(nativeEvent instanceof DragEvent)
|
|
||||||
) {
|
|
||||||
setImportEnabled(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -29,29 +29,15 @@ export const NewRealmForm = () => {
|
||||||
const adminClient = useAdminClient();
|
const adminClient = useAdminClient();
|
||||||
const { addAlert } = useAlerts();
|
const { addAlert } = useAlerts();
|
||||||
|
|
||||||
const {
|
const { register, handleSubmit, control, errors, setValue } = useForm<
|
||||||
register,
|
RealmRepresentation
|
||||||
handleSubmit,
|
>({ mode: "onChange" });
|
||||||
setValue,
|
|
||||||
control,
|
|
||||||
formState,
|
|
||||||
errors,
|
|
||||||
} = useForm<RealmRepresentation>({ mode: "onChange" });
|
|
||||||
|
|
||||||
const handleFileChange = (value: string | File) => {
|
const handleFileChange = (obj: object) => {
|
||||||
const defaultRealm = { id: "", realm: "", enabled: true };
|
const defaultRealm = { id: "", realm: "", enabled: true };
|
||||||
|
Object.entries(obj || defaultRealm).map((entry) =>
|
||||||
let obj: { [name: string]: boolean | string } = defaultRealm;
|
setValue(entry[0], entry[1])
|
||||||
if (value) {
|
);
|
||||||
try {
|
|
||||||
obj = JSON.parse(value as string);
|
|
||||||
} catch (error) {
|
|
||||||
console.warn("Invalid json, ignoring value using default");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Object.keys(obj).forEach((k) => {
|
|
||||||
setValue(k, obj[k]);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const save = async (realm: RealmRepresentation) => {
|
const save = async (realm: RealmRepresentation) => {
|
||||||
|
|
@ -83,7 +69,11 @@ export const NewRealmForm = () => {
|
||||||
onSubmit={handleSubmit(save)}
|
onSubmit={handleSubmit(save)}
|
||||||
role="manage-realm"
|
role="manage-realm"
|
||||||
>
|
>
|
||||||
<JsonFileUpload id="kc-realm-filename" onChange={handleFileChange} />
|
<JsonFileUpload
|
||||||
|
id="kc-realm-filename"
|
||||||
|
allowEditingUploadedText
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
<FormGroup
|
<FormGroup
|
||||||
label={t("realmName")}
|
label={t("realmName")}
|
||||||
isRequired
|
isRequired
|
||||||
|
|
@ -118,11 +108,7 @@ export const NewRealmForm = () => {
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<ActionGroup>
|
<ActionGroup>
|
||||||
<Button
|
<Button variant="primary" type="submit">
|
||||||
variant="primary"
|
|
||||||
type="submit"
|
|
||||||
isDisabled={!formState.isValid}
|
|
||||||
>
|
|
||||||
{t("common:create")}
|
{t("common:create")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="link" onClick={() => history.goBack()}>
|
<Button variant="link" onClick={() => history.goBack()}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue