changed to use code editor (#1161)

* changed to use code editor

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

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* fixed tests

Co-authored-by: Jon Koops <jonkoops@gmail.com>

cypress/integration/partial_import_test.spec.ts

@@ -40,7 +40,7 @@ describe("Partial import test", () => {
 
   it("Import button only enabled if JSON has something to import", () => {
     modal.open();
-    cy.get("#partial-import-file").type("{}");
+    cy.get(".pf-c-code-editor__code textarea").type("{}");
     modal.importButton().should("be.disabled");
   });
 

cypress/support/pages/admin_console/configure/realm_settings/PartialImportModal.ts

@@ -11,10 +11,13 @@ export default class GroupModal {
       (myJSON) => {
         const text = JSON.stringify(myJSON);
 
-        cy.get("#partial-import-file").type(text, {
-          parseSpecialCharSequences: false,
-          delay: 0,
-        });
+        cy.get(".pf-c-code-editor__code textarea")
+          .type(text, {
+            delay: 0,
+            parseSpecialCharSequences: false,
+          })
+          .type("{shift}{end}")
+          .type("{del}");
       }
     );
   };

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

@@ -8,9 +8,10 @@ import {
   FileUploadProps,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
+import { CodeEditor, Language } from "@patternfly/react-code-editor";
 
 type FileUpload = {
-  value: string | File;
+  value: string;
   filename: string;
   isLoading: boolean;
   modal: boolean;
@@ -60,7 +61,7 @@ export const JsonFileUpload = ({
     } else {
       setFileUpload({
         ...fileUpload,
-        value,
+        value: value as string,
         filename,
       });
 
@@ -147,7 +148,18 @@ export const JsonFileUpload = ({
             dropzoneProps={{
               accept: ".json",
             }}
-          />
+            hideDefaultPreview
+          >
+            <CodeEditor
+              isLineNumbersVisible
+              code={fileUpload.value}
+              language={Language.json}
+              height="128px"
+              onChange={(value, event) =>
+                handleChange(value ?? "", fileUpload.filename, event)
+              }
+            />
+          </FileUpload>
         </FormGroup>
       )}
     </>