From ff4f8bb9e58b2e8e83087066a9dcfc7f4366792b Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Wed, 21 Sep 2022 18:03:09 +0100
Subject: [PATCH] add writing-custom-step-layouts to sidebars.json

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 .../writing-custom-step-layouts.md            | 41 +++++++++++--------
 microsite/sidebars.json                       |  1 +
 .../scaffolder/customScaffolderLayouts.tsx    |  1 -
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/docs/features/software-templates/writing-custom-step-layouts.md b/docs/features/software-templates/writing-custom-step-layouts.md
index 53b1ca342d..69d61b93dc 100644
--- a/docs/features/software-templates/writing-custom-step-layouts.md
+++ b/docs/features/software-templates/writing-custom-step-layouts.md
@@ -27,24 +27,29 @@ import {
 } from '@backstage/plugin-scaffolder';
 import { Grid } from '@material-ui/core';
 
-const TwoColumn: LayoutTemplate = ({ properties, description, title }) => (
-  <>
-    <h1>{title}</h1>
-    <Grid container justifyContent="flex-end">
-      {properties.slice(0, mid).map(prop => (
-        <Grid item xs={6} key={prop.content.key}>
-          {prop.content}
-        </Grid>
-      ))}
-      {properties.slice(mid).map(prop => (
-        <Grid item xs={6} key={prop.content.key}>
-          {prop.content}
-        </Grid>
-      ))}
-    </Grid>
-    {description}
-  </>
-);
+const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
+  const mid = Math.ceil(properties.length / 2);
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <h2>In two column layout!!</h2>
+      <Grid container justifyContent="flex-end">
+        {properties.slice(0, mid).map(prop => (
+          <Grid item xs={6} key={prop.content.key}>
+            {prop.content}
+          </Grid>
+        ))}
+        {properties.slice(mid).map(prop => (
+          <Grid item xs={6} key={prop.content.key}>
+            {prop.content}
+          </Grid>
+        ))}
+      </Grid>
+      {description}
+    </>
+  );
+};
 
 export const TwoColumnLayout = scaffolderPlugin.provide(
   createScaffolderLayout({
diff --git a/microsite/sidebars.json b/microsite/sidebars.json
index 44d8e12869..dd1ea30e2e 100644
--- a/microsite/sidebars.json
+++ b/microsite/sidebars.json
@@ -97,6 +97,7 @@
           "features/software-templates/builtin-actions",
           "features/software-templates/writing-custom-actions",
           "features/software-templates/writing-custom-field-extensions",
+          "features/software-templates/writing-custom-step-layouts",
           "features/software-templates/migrating-from-v1beta2-to-v1beta3"
         ]
       },
diff --git a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
index 8dc6e5340a..b23d6e4073 100644
--- a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
+++ b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx
@@ -28,7 +28,6 @@ const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
   return (
     <>
       <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}>