add writing-custom-step-layouts to sidebars.json

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

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({

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"
         ]
       },

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}>