Merge pull request #30456 from stephenglass/feat/add-adjustable-panels-template-editor

feat(scaffolder): adjustable panels width in template editor layouts

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

@@ -34,6 +34,7 @@ import {
   TemplateEditorLayoutFiles,
   TemplateEditorLayoutPreview,
   TemplateEditorLayoutConsole,
+  TemplateEditorPanels,
 } from './TemplateEditorLayout';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar';
 import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';
@@ -88,17 +89,24 @@ export const TemplateEditor = (props: {
           <TemplateEditorLayoutBrowser>
             <TemplateEditorBrowser onClose={closeDirectory} />
           </TemplateEditorLayoutBrowser>
-          <TemplateEditorLayoutFiles>
-            <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />
-          </TemplateEditorLayoutFiles>
-          <TemplateEditorLayoutPreview>
-            <TemplateEditorForm.DirectoryEditorDryRun
-              setErrorText={setErrorText}
-              fieldExtensions={fieldExtensions}
-              layouts={layouts}
-              formProps={formProps}
-            />
-          </TemplateEditorLayoutPreview>
+          <TemplateEditorPanels
+            autoSaveId="template-editor"
+            files={
+              <TemplateEditorLayoutFiles>
+                <TemplateEditorTextArea.DirectoryEditor errorText={errorText} />
+              </TemplateEditorLayoutFiles>
+            }
+            preview={
+              <TemplateEditorLayoutPreview>
+                <TemplateEditorForm.DirectoryEditorDryRun
+                  setErrorText={setErrorText}
+                  fieldExtensions={fieldExtensions}
+                  layouts={layouts}
+                  formProps={formProps}
+                />
+              </TemplateEditorLayoutPreview>
+            }
+          />
           <TemplateEditorLayoutConsole>
             <DryRunResults />
           </TemplateEditorLayoutConsole>

plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorLayout.tsx

@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { WithStyles, withStyles } from '@material-ui/core/styles';
+import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 export const TemplateEditorLayout = withStyles(
   theme => ({
@@ -36,7 +39,7 @@ export const TemplateEditorLayout = withStyles(
       "browser editor preview"
       "results results results"
     `,
-        gridTemplateColumns: '1fr 3fr 2fr',
+        gridTemplateColumns: '1fr 5fr',
         gridTemplateRows: 'auto 1fr auto',
       },
     },
@@ -73,12 +76,15 @@ export const TemplateEditorLayoutBrowser = withStyles(
 ));
 
 export const TemplateEditorLayoutFiles = withStyles(
-  {
+  theme => ({
     root: {
       gridArea: 'editor',
       overflow: 'auto',
+      [theme.breakpoints.up('md')]: {
+        height: '100%',
+      },
     },
-  },
+  }),
   { name: 'ScaffolderTemplateEditorLayoutFiles' },
 )(({ children, classes }: PropsWithChildren<WithStyles>) => (
   <section className={classes.root}>{children}</section>
@@ -91,7 +97,7 @@ export const TemplateEditorLayoutPreview = withStyles(
       position: 'relative',
       backgroundColor: theme.palette.background.default,
       [theme.breakpoints.up('md')]: {
-        borderLeft: `1px solid ${theme.palette.divider}`,
+        height: '100%',
       },
     },
     scroll: {
@@ -124,3 +130,50 @@ export const TemplateEditorLayoutConsole = withStyles(
 )(({ children, classes }: PropsWithChildren<WithStyles>) => (
   <section className={classes.root}>{children}</section>
 ));
+
+export const TemplateEditorPanelResizeHandle = withStyles(
+  {
+    root: {
+      width: 8,
+      cursor: 'col-resize',
+      background: 'rgba(0,0,0,0.04)',
+    },
+  },
+  { name: 'ScaffolderTemplateEditorPanelResizeHandle' },
+)(({ classes }: { classes: WithStyles['classes'] }) => (
+  <PanelResizeHandle className={classes.root} />
+));
+
+export function TemplateEditorPanels({
+  files,
+  preview,
+  autoSaveId = 'template-editor-panels',
+}: {
+  files: ReactNode;
+  preview: ReactNode;
+  autoSaveId?: string;
+}) {
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+
+  if (isMdUp) {
+    return (
+      <PanelGroup direction="horizontal" autoSaveId={autoSaveId}>
+        <Panel minSize={15} defaultSize={50}>
+          {files}
+        </Panel>
+        <TemplateEditorPanelResizeHandle />
+        <Panel minSize={15} defaultSize={50}>
+          {preview}
+        </Panel>
+      </PanelGroup>
+    );
+  }
+  // Stack as rows for small screens, just render children in a plain block
+  return (
+    <>
+      {files}
+      {preview}
+    </>
+  );
+}

plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -39,6 +39,7 @@ import {
   TemplateEditorLayoutToolbar,
   TemplateEditorLayoutFiles,
   TemplateEditorLayoutPreview,
+  TemplateEditorPanels,
 } from './TemplateEditorLayout';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar';
 import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';
@@ -113,7 +114,7 @@ const useStyles = makeStyles(
       "textArea preview"
     `,
         gridTemplateRows: 'auto 1fr',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: '1fr',
       },
     },
     files: {
@@ -207,23 +208,30 @@ export const TemplateFormPreviewer = ({
           />
         </TemplateEditorToolbar>
       </TemplateEditorLayoutToolbar>
-      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>
-        <TemplateEditorTextArea
-          content={templateYaml}
-          onUpdate={setTemplateYaml}
-          errorText={errorText}
-        />
-      </TemplateEditorLayoutFiles>
-      <TemplateEditorLayoutPreview>
-        <TemplateEditorForm
-          content={templateYaml}
-          contentIsSpec
-          fieldExtensions={customFieldExtensions}
-          setErrorText={setErrorText}
-          layouts={layouts}
-          formProps={formProps}
-        />
-      </TemplateEditorLayoutPreview>
+      <TemplateEditorPanels
+        autoSaveId="template-form-previewer"
+        files={
+          <TemplateEditorLayoutFiles classes={{ root: classes.files }}>
+            <TemplateEditorTextArea
+              content={templateYaml}
+              onUpdate={setTemplateYaml}
+              errorText={errorText}
+            />
+          </TemplateEditorLayoutFiles>
+        }
+        preview={
+          <TemplateEditorLayoutPreview>
+            <TemplateEditorForm
+              content={templateYaml}
+              contentIsSpec
+              fieldExtensions={customFieldExtensions}
+              setErrorText={setErrorText}
+              layouts={layouts}
+              formProps={formProps}
+            />
+          </TemplateEditorLayoutPreview>
+        }
+      />
     </TemplateEditorLayout>
   );
 };