Fix json editor scroll behavior (#37201)

This allows to edit the text that is outside the scroll area.

Closes #36985

Signed-off-by: koplas <pschwabauer@intevation.de>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts

@@ -841,12 +841,15 @@ export default class RealmSettingsPage extends CommonPage {
 
   shouldSaveChangedJSONProfiles() {
     cy.findByTestId(this.#jsonEditorProfilesView).check();
-    cy.get(this.#jsonEditor).type(`{pageup}{del} [{
+    cy.get(this.#jsonEditor).type(
+      `{pageup}{del} [{
       "name": "Test",
       "description": "Test Description",
       "executors": [],
       "global": false
-    }, {downarrow}{end}{backspace}{backspace}`);
+    }, {downarrow}{end}{backspace}{backspace}`,
+      { force: true },
+    );
     cy.findByTestId(this.#jsonEditorSaveBtn).click();
     cy.get(this.#alertMessage).should(
       "be.visible",

js/apps/admin-ui/src/clients/authorization/policy/JavaScript.tsx

@@ -22,14 +22,15 @@ export const JavaScript = () => {
         defaultValue=""
         control={control}
         render={({ field }) => (
-          <CodeEditor
-            id="code"
-            data-testid="code"
-            readOnly
-            value={field.value}
-            style={{ height: "600px", overflow: "scroll" }}
-            language="js"
-          />
+          <div style={{ height: "600px", overflow: "scroll" }}>
+            <CodeEditor
+              id="code"
+              data-testid="code"
+              readOnly
+              value={field.value}
+              language="js"
+            />
+          </div>
         )}
       />
     </FormGroup>

js/apps/admin-ui/src/components/dynamic/ScriptComponent.tsx

@@ -34,15 +34,16 @@ export const ScriptComponent = ({
         defaultValue={defaultValue}
         control={control}
         render={({ field }) => (
-          <CodeEditor
-            id={name!}
-            data-testid={name}
-            readOnly={isDisabled}
-            onChange={field.onChange}
-            value={Array.isArray(field.value) ? field.value[0] : field.value}
-            style={{ height: "600px", overflow: "scroll" }}
-            language="js"
-          />
+          <div style={{ height: "600px", overflow: "scroll" }}>
+            <CodeEditor
+              id={name!}
+              data-testid={name}
+              readOnly={isDisabled}
+              onChange={field.onChange}
+              value={Array.isArray(field.value) ? field.value[0] : field.value}
+              language="js"
+            />
+          </div>
         )}
       />
     </FormGroup>

js/apps/admin-ui/src/components/json-file-upload/FileUploadForm.tsx

@@ -151,14 +151,17 @@ export const FileUploadForm = ({
             hideDefaultPreview
           >
             {!rest.hideDefaultPreview && (
-              <CodeEditor
-                aria-label="File content"
-                value={fileUpload.value}
-                language={language}
-                style={{ height: "128px", overflow: "scroll" }}
-                onChange={(value) => handleTextOrDataChange(value.target.value)}
-                readOnly={!rest.allowEditingUploadedText}
-              />
+              <div style={{ height: "128px", overflow: "scroll" }}>
+                <CodeEditor
+                  aria-label="File content"
+                  value={fileUpload.value}
+                  language={language}
+                  onChange={(value) =>
+                    handleTextOrDataChange(value.target.value)
+                  }
+                  readOnly={!rest.allowEditingUploadedText}
+                />
+              </div>
             )}
           </FileUpload>
           <FormHelperText>

js/apps/admin-ui/src/events/AdminEvents.tsx

@@ -284,12 +284,9 @@ export const AdminEvents = ({ resourcePath }: AdminEventsProps) => {
           data-testid="representation-dialog"
           onClose={() => setRepresentationEvent(undefined)}
         >
-          <CodeEditor
-            readOnly
-            value={code}
-            language="json"
-            style={{ height: "8rem", overflow: "scroll" }}
-          />
+          <div style={{ height: "8rem", overflow: "scroll" }}>
+            <CodeEditor readOnly value={code} language="json" />
+          </div>
         </DisplayDialog>
       )}
       {!adminEventsEnabled && <EventsBanners type="adminEvents" />}

js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx

@@ -288,12 +288,13 @@ export const PoliciesTab = () => {
       ) : (
         <>
           <div className="pf-v5-u-mt-md pf-v5-u-ml-lg">
-            <CodeEditor
-              value={code}
-              language="json"
-              style={{ height: "30rem", overflow: "scroll" }}
-              onChange={(event) => setCode(event.target.value)}
-            />
+            <div style={{ height: "30rem", overflow: "scroll" }}>
+              <CodeEditor
+                value={code}
+                language="json"
+                onChange={(event) => setCode(event.target.value)}
+              />
+            </div>
           </div>
           <div className="pf-v5-u-mt-md">
             <Button

js/apps/admin-ui/src/realm-settings/ProfilesTab.tsx

@@ -251,12 +251,13 @@ export default function ProfilesTab() {
       ) : (
         <FormGroup fieldId={"jsonEditor"}>
           <div className="pf-v5-u-mt-md pf-v5-u-ml-lg">
-            <CodeEditor
-              value={code}
-              language="json"
-              style={{ height: "30rem", overflow: "scroll" }}
-              onChange={(event) => setCode(event.target.value ?? "")}
-            />
+            <div style={{ height: "30rem", overflow: "scroll" }}>
+              <CodeEditor
+                value={code}
+                language="json"
+                onChange={(event) => setCode(event.target.value ?? "")}
+              />
+            </div>
           </div>
           <ActionGroup>
             <div className="pf-v5-u-mt-md">

js/apps/admin-ui/src/realm-settings/user-profile/JsonEditorTab.tsx

@@ -33,12 +33,13 @@ export const JsonEditorTab = () => {
 
   return (
     <PageSection variant="light">
-      <CodeEditor
-        language="json"
-        value={code}
-        style={{ height: "30rem", overflow: "scroll" }}
-        onChange={(event) => setCode(event.target.value ?? "")}
-      />
+      <div style={{ height: "30rem", overflow: "scroll" }}>
+        <CodeEditor
+          language="json"
+          value={code}
+          onChange={(event) => setCode(event.target.value ?? "")}
+        />
+      </div>
       <Form>
         <ActionGroup>
           <Button