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