scaffolder: add wrapper to TemplateEditorForm to handle overflow

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx

@@ -26,17 +26,8 @@ import { TemplateEditorTextArea } from './TemplateEditorTextArea';
 
 const useStyles = makeStyles({
   // Reset and fix sizing to make sure scrolling behaves correctly
-  rootWrapper: {
-    gridArea: 'pageContent',
-    position: 'relative',
-    width: '100%',
-  },
   root: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
+    gridArea: 'pageContent',
 
     display: 'grid',
     gridTemplateAreas: `
@@ -75,25 +66,23 @@ export const TemplateEditor = (props: {
   return (
     <DirectoryEditorProvider directory={props.directory}>
       <DryRunProvider>
-        <div className={classes.rootWrapper}>
-          <main className={classes.root}>
-            <section className={classes.browser}>
-              <TemplateEditorBrowser onClose={props.onClose} />
-            </section>
-            <section className={classes.editor}>
-              <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />
-            </section>
-            <section className={classes.preview}>
-              <TemplateEditorForm.DirectoryEditorDryRun
-                setErrorText={setErrorText}
-                fieldExtensions={props.fieldExtensions}
-              />
-            </section>
-            <section className={classes.results}>
-              <DryRunResults />
-            </section>
-          </main>
-        </div>
+        <main className={classes.root}>
+          <section className={classes.browser}>
+            <TemplateEditorBrowser onClose={props.onClose} />
+          </section>
+          <section className={classes.editor}>
+            <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />
+          </section>
+          <section className={classes.preview}>
+            <TemplateEditorForm.DirectoryEditorDryRun
+              setErrorText={setErrorText}
+              fieldExtensions={props.fieldExtensions}
+            />
+          </section>
+          <section className={classes.results}>
+            <DryRunResults />
+          </section>
+        </main>
       </DryRunProvider>
     </DirectoryEditorProvider>
   );

plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditorForm.tsx

@@ -15,6 +15,7 @@
  */
 import { useApiHolder } from '@backstage/core-plugin-api';
 import { JsonObject, JsonValue } from '@backstage/types';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { Component, ReactNode, useMemo, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import yaml from 'yaml';
@@ -25,6 +26,22 @@ import { createValidator } from '../../TemplatePage';
 import { useDirectoryEditor } from './DirectoryEditorContext';
 import { useDryRun } from './DryRunContext';
 
+const useStyles = makeStyles({
+  containerWrapper: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+  container: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: 'auto',
+  },
+});
+
 interface ErrorBoundaryProps {
   invalidator: unknown;
   setErrorText(errorText: string | undefined): void;
@@ -83,6 +100,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
     setErrorText,
     fieldExtensions = [],
   } = props;
+  const classes = useStyles();
   const apiHolder = useApiHolder();
 
   const [steps, setSteps] = useState<TemplateParameterSchema['steps']>();
@@ -159,17 +177,21 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
   }
 
   return (
-    <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>
-      <MultistepJsonForm
-        steps={steps}
-        fields={fields}
-        formData={data}
-        onChange={e => onUpdate(e.formData)}
-        onReset={() => onUpdate({})}
-        finishButtonLabel={onDryRun && 'Try It'}
-        onFinish={onDryRun && (() => onDryRun(data))}
-      />
-    </ErrorBoundary>
+    <div className={classes.containerWrapper}>
+      <div className={classes.container}>
+        <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>
+          <MultistepJsonForm
+            steps={steps}
+            fields={fields}
+            formData={data}
+            onChange={e => onUpdate(e.formData)}
+            onReset={() => onUpdate({})}
+            finishButtonLabel={onDryRun && 'Try It'}
+            onFinish={onDryRun && (() => onDryRun(data))}
+          />
+        </ErrorBoundary>
+      </div>
+    </div>
   );
 }