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

src/clients/import/ImportForm.tsx

@@ -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]);
       }
     });
   };

src/components/json-file-upload/JsonFileUpload.tsx

@@ -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>
       )}
     </>

src/components/json-file-upload/__tests__/__snapshots__/JsonFileUpload.test.tsx.snap

@@ -31,7 +31,6 @@ exports[`<JsonFileUpload /> render 1`] = `
       <div
         className="pf-c-form__group-control"
       >
-        <JsonFileUploadComp>
         <FileUpload
           dropzoneProps={
             Object {
@@ -261,7 +260,6 @@ exports[`<JsonFileUpload /> render 1`] = `
             </FileUploadField>
           </t>
         </FileUpload>
-        </JsonFileUploadComp>
         <div
           aria-live="polite"
           className="pf-c-form__helper-text"
@@ -306,7 +304,6 @@ exports[`<JsonFileUpload /> upload file 1`] = `
       <div
         className="pf-c-form__group-control"
       >
-        <JsonFileUploadComp>
         <FileUpload
           dropzoneProps={
             Object {
@@ -537,7 +534,6 @@ exports[`<JsonFileUpload /> upload file 1`] = `
             </FileUploadField>
           </t>
         </FileUpload>
-        </JsonFileUploadComp>
         <div
           aria-live="polite"
           className="pf-c-form__helper-text"

src/identity-providers/add/OpenIdConnectSettings.tsx

@@ -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>
       )}

src/realm-settings/PartialImport.tsx

@@ -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 (

src/realm/add/NewRealmForm.tsx

@@ -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()}>