From 7c9024317c9686f031d47f0a8ece0fe9e76f2aee Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Thu, 11 Aug 2022 14:16:49 +0100
Subject: [PATCH] make demo layout two column

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 .../scaffolder/customScaffolderLayouts.tsx    | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
index 71e38d76ce..a9def3926e 100644
--- a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
+++ b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
@@ -19,24 +19,40 @@ import {
   ObjectFieldTemplate,
   scaffolderPlugin,
 } from '@backstage/plugin-scaffolder';
+import { Grid } from '@material-ui/core';
 
-const ALayout: ObjectFieldTemplate = ({ properties, description }) => {
+const TwoColumLayout: ObjectFieldTemplate = ({
+  properties,
+  description,
+  title,
+}) => {
+  const mid = Math.ceil(properties.length / 2);
+  const left = properties.slice(0, mid);
+  const right = properties.slice(mid);
   return (
-    <div>
-      <h1>CUSTOM LAYOUT!!!!!</h1>
-      <div>
-        {properties.map(prop => (
-          <div key={prop.content.key}>{prop.content}</div>
+    <>
+      <h1>{title}</h1>
+      <h2>In two column layout!!</h2>
+      <Grid container justifyContent="flex-end">
+        {left.map(prop => (
+          <Grid item xs={6} key={prop.content.key}>
+            {prop.content}
+          </Grid>
         ))}
-      </div>
+        {right.map(prop => (
+          <Grid item xs={6} key={prop.content.key}>
+            {prop.content}
+          </Grid>
+        ))}
+      </Grid>
       {description}
-    </div>
+    </>
   );
 };
 
 export const CustomLayout = scaffolderPlugin.provide(
   createScaffolderLayout({
     name: 'CustomLayout',
-    component: ALayout,
+    component: TwoColumLayout,
   }),
 );