From 392b15ad2743fefe7adac062062e27e902ab89b6 Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Tue, 13 Sep 2022 17:42:35 +0100
Subject: [PATCH] replace ui:layout with the actual rjsf field
 ui:ObjectFieldTemplate

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 package.json                                  |  5 +-
 .../scaffolder/defaultPreviewTemplate.ts      |  2 +-
 .../MultistepJsonForm/MultistepJsonForm.tsx   |  7 +-
 .../components/MultistepJsonForm/schema.ts    | 22 +++++-
 plugins/scaffolder/src/components/Router.tsx  | 17 +---
 .../TemplateEditorPage/TemplateEditorForm.tsx |  4 +-
 .../TemplateFormPreviewer.tsx                 |  4 +-
 .../components/TemplatePage/TemplatePage.tsx  |  4 +-
 .../DefaultStepFormLayout.tsx                 | 78 -------------------
 .../layouts/DefaultStepFormLayout/index.tsx   | 16 ----
 plugins/scaffolder/src/layouts/default.ts     | 21 -----
 plugins/scaffolder/src/layouts/index.tsx      |  4 -
 .../src/layouts/resolveStepLayout.ts          | 39 ----------
 .../TemplateWizardPage/Stepper/Stepper.tsx    |  1 -
 .../Stepper/useTemplateSchema.test.tsx        |  2 -
 15 files changed, 31 insertions(+), 195 deletions(-)
 delete mode 100644 plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/DefaultStepFormLayout.tsx
 delete mode 100644 plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/index.tsx
 delete mode 100644 plugins/scaffolder/src/layouts/default.ts
 delete mode 100644 plugins/scaffolder/src/layouts/resolveStepLayout.ts

diff --git a/package.json b/package.json
index da8f193d3a..a0de99bfad 100644
--- a/package.json
+++ b/package.json
@@ -93,8 +93,5 @@
       "node ./scripts/check-docs-quality"
     ]
   },
-  "packageManager": "yarn@3.2.3",
-  "volta": {
-    "node": "14.19.3"
-  }
+  "packageManager": "yarn@3.2.3"
 }
diff --git a/packages/app/src/components/scaffolder/defaultPreviewTemplate.ts b/packages/app/src/components/scaffolder/defaultPreviewTemplate.ts
index 7ab1556fc7..56f34779de 100644
--- a/packages/app/src/components/scaffolder/defaultPreviewTemplate.ts
+++ b/packages/app/src/components/scaffolder/defaultPreviewTemplate.ts
@@ -17,7 +17,7 @@
 export const defaultPreviewTemplate = `# Edit the template parameters below to see how they will render in the scaffolder form UI
 parameters:
   - title: Fill in some steps
-    ui:layout: 'TwoColumn'
+    ui:ObjectFieldTemplate: TwoColumn
     required:
       - name
     properties:
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index bea7279c4e..a667246287 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -36,7 +36,7 @@ import { transformSchemaToProps } from './schema';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
 import cloneDeep from 'lodash/cloneDeep';
 import * as fieldOverrides from './FieldOverrides';
-import { LayoutOptions, resolveStepLayout } from '../../layouts';
+import { LayoutOptions } from '../../layouts';
 
 const Form = withTheme(MuiTheme);
 type Step = {
@@ -193,9 +193,7 @@ export const MultistepJsonForm = (props: Props) => {
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map(({ title, schema, ...formProps }, index) => {
-          const schemaProps = transformSchemaToProps(schema);
-
-          const Layout = resolveStepLayout(schemaProps.uiSchema, layouts);
+          const schemaProps = transformSchemaToProps(schema, layouts);
 
           return (
             <StepUI key={title}>
@@ -210,7 +208,6 @@ export const MultistepJsonForm = (props: Props) => {
               </StepLabel>
               <StepContent key={title}>
                 <Form
-                  ObjectFieldTemplate={Layout}
                   showErrorList={false}
                   fields={{ ...fieldOverrides, ...fields }}
                   widgets={widgets}
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts b/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts
index 5842613f45..10bdbcf320 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts
@@ -15,7 +15,8 @@
  */
 
 import { JsonObject } from '@backstage/types';
-import { FormProps } from '@rjsf/core';
+import { FormProps, UiSchema } from '@rjsf/core';
+import { LayoutOptions } from '../../layouts';
 
 function isObject(value: unknown): value is JsonObject {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -99,14 +100,29 @@ function extractUiSchema(schema: JsonObject, uiSchema: JsonObject) {
   }
 }
 
-export function transformSchemaToProps(inputSchema: JsonObject): {
+export function transformSchemaToProps(
+  inputSchema: JsonObject,
+  layouts: LayoutOptions[],
+): {
   schema: FormProps<any>['schema'];
   uiSchema: FormProps<any>['uiSchema'];
 } {
+  const customLayoutName = inputSchema['ui:ObjectFieldTemplate'];
   inputSchema.type = inputSchema.type || 'object';
   const schema = JSON.parse(JSON.stringify(inputSchema));
   delete schema.title; // Rendered separately
-  const uiSchema = {};
+  const uiSchema: UiSchema = {};
   extractUiSchema(schema, uiSchema);
+
+  if (customLayoutName) {
+    const Layout = layouts.find(
+      layout => layout.name === customLayoutName,
+    )?.component;
+
+    if (Layout) {
+      uiSchema['ui:ObjectFieldTemplate'] = Layout;
+    }
+  }
+
   return { schema, uiSchema };
 }
diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx
index 4eb15ce05b..12355035cc 100644
--- a/plugins/scaffolder/src/components/Router.tsx
+++ b/plugins/scaffolder/src/components/Router.tsx
@@ -45,12 +45,7 @@ import {
   selectedTemplateRouteRef,
 } from '../routes';
 import { ListTasksPage } from './ListTasksPage';
-import {
-  DEFAULT_SCAFFOLDER_LAYOUT,
-  LayoutOptions,
-  LAYOUTS_KEY,
-  LAYOUTS_WRAPPER_KEY,
-} from '../layouts';
+import { LayoutOptions, LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../layouts';
 
 /**
  * The props for the entrypoint `ScaffolderPage` component the plugin.
@@ -122,16 +117,8 @@ export const Router = (props: RouterProps) => {
       }),
   );
 
-  if (
-    !customLayouts.find(
-      layout => layout.name === DEFAULT_SCAFFOLDER_LAYOUT.name,
-    )
-  ) {
-    customLayouts.push(DEFAULT_SCAFFOLDER_LAYOUT);
-  }
-
   /**
-   * This component can be deleted once the older routes have been deprecated.
+   * This component can be deleted once the older routes havest been deprecated.
    */
   const RedirectingComponent = () => {
     const { templateName } = useRouteRefParams(legacySelectedTemplateRouteRef);
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
index 4395f06206..3e5de0e02d 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
@@ -20,7 +20,7 @@ import React, { Component, ReactNode, useMemo, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import yaml from 'yaml';
 import { FieldExtensionOptions } from '../../extensions';
-import { DEFAULT_SCAFFOLDER_LAYOUT, LayoutOptions } from '../../layouts';
+import { LayoutOptions } from '../../layouts';
 import { TemplateParameterSchema } from '../../types';
 import { MultistepJsonForm } from '../MultistepJsonForm';
 import { createValidator } from '../TemplatePage';
@@ -101,7 +101,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
     onDryRun,
     setErrorText,
     fieldExtensions = [],
-    layouts = [DEFAULT_SCAFFOLDER_LAYOUT],
+    layouts = [],
   } = props;
   const classes = useStyles();
   const apiHolder = useApiHolder();
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
index 1cdc211865..041b7797ee 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
@@ -33,7 +33,7 @@ import React, { useCallback, useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import yaml from 'yaml';
 import { FieldExtensionOptions } from '../../extensions';
-import { DEFAULT_SCAFFOLDER_LAYOUT, LayoutOptions } from '../../layouts';
+import { LayoutOptions } from '../../layouts';
 import { TemplateEditorForm } from './TemplateEditorForm';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea';
 
@@ -111,7 +111,7 @@ export const TemplateFormPreviewer = ({
   defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
   customFieldExtensions = [],
   onClose,
-  layouts = [DEFAULT_SCAFFOLDER_LAYOUT],
+  layouts = [],
 }: {
   defaultPreviewTemplate?: string;
   customFieldExtensions?: FieldExtensionOptions<any, any>[];
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 4cf3cf1841..9eba61b53b 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -39,7 +39,7 @@ import {
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { DEFAULT_SCAFFOLDER_LAYOUT, LayoutOptions } from '../../layouts';
+import { LayoutOptions } from '../../layouts';
 
 const useTemplateParameterSchema = (templateRef: string) => {
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -52,7 +52,7 @@ const useTemplateParameterSchema = (templateRef: string) => {
 
 export const TemplatePage = ({
   customFieldExtensions = [],
-  layouts = [DEFAULT_SCAFFOLDER_LAYOUT],
+  layouts = [],
 }: {
   customFieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
diff --git a/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/DefaultStepFormLayout.tsx b/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/DefaultStepFormLayout.tsx
deleted file mode 100644
index b7711e59fb..0000000000
--- a/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/DefaultStepFormLayout.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { ObjectFieldTemplateProps, utils } from '@rjsf/core';
-import { Button, Grid } from '@material-ui/core';
-
-const { canExpand } = utils;
-
-export const DefaultStepFormLayout = ({
-  DescriptionField,
-  description,
-  TitleField,
-  title,
-  properties,
-  required,
-  disabled,
-  readonly,
-  uiSchema,
-  idSchema,
-  schema,
-  formData,
-  onAddClick,
-}: ObjectFieldTemplateProps) => {
-  return (
-    <>
-      {(uiSchema['ui:title'] || title) && (
-        <TitleField
-          id={`${idSchema.$id}-title`}
-          title={title}
-          required={required}
-        />
-      )}
-      {description && (
-        <DescriptionField
-          id={`${idSchema.$id}-description`}
-          description={description}
-        />
-      )}
-      <Grid container spacing={2} style={{ marginTop: '10px' }}>
-        {properties.map((element, index) =>
-          // Remove the <Grid> if the inner element is hidden as the <Grid>
-          // itself would otherwise still take up space.
-          element.hidden ? (
-            element.content
-          ) : (
-            <Grid item xs={12} key={index} style={{ marginBottom: '10px' }}>
-              {element.content}
-            </Grid>
-          ),
-        )}
-        {canExpand(schema, uiSchema, formData) && (
-          <Grid container justifyContent="flex-end">
-            <Grid item>
-              <Button
-                className="object-property-expand"
-                onClick={onAddClick(schema)}
-                disabled={disabled || readonly}
-              />
-            </Grid>
-          </Grid>
-        )}
-      </Grid>
-    </>
-  );
-};
diff --git a/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/index.tsx b/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/index.tsx
deleted file mode 100644
index 02b65353b7..0000000000
--- a/plugins/scaffolder/src/components/layouts/DefaultStepFormLayout/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { DefaultStepFormLayout } from './DefaultStepFormLayout';
diff --git a/plugins/scaffolder/src/layouts/default.ts b/plugins/scaffolder/src/layouts/default.ts
deleted file mode 100644
index 095d27da0a..0000000000
--- a/plugins/scaffolder/src/layouts/default.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DefaultStepFormLayout } from '../components/layouts/DefaultStepFormLayout';
-
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export const DEFAULT_SCAFFOLDER_LAYOUT = {
-  component: DefaultStepFormLayout,
-  name: 'DefaultStepFormLayout',
-};
diff --git a/plugins/scaffolder/src/layouts/index.tsx b/plugins/scaffolder/src/layouts/index.tsx
index 85bfb43c5e..14bd535dab 100644
--- a/plugins/scaffolder/src/layouts/index.tsx
+++ b/plugins/scaffolder/src/layouts/index.tsx
@@ -69,7 +69,3 @@ export const ScaffolderLayouts: React.ComponentType = (): JSX.Element | null =>
 attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
 
 export type { LayoutOptions, LayoutTemplate } from './types';
-
-export { DEFAULT_SCAFFOLDER_LAYOUT } from './default';
-
-export { resolveStepLayout } from './resolveStepLayout';
diff --git a/plugins/scaffolder/src/layouts/resolveStepLayout.ts b/plugins/scaffolder/src/layouts/resolveStepLayout.ts
deleted file mode 100644
index 8829fc0d40..0000000000
--- a/plugins/scaffolder/src/layouts/resolveStepLayout.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { UiSchema } from '@rjsf/core';
-import { DefaultStepFormLayout } from '../components/layouts/DefaultStepFormLayout';
-import { DEFAULT_SCAFFOLDER_LAYOUT } from './default';
-import { LayoutOptions, LayoutTemplate } from './types';
-
-export function resolveStepLayout(
-  uiSchema: UiSchema = {},
-  layouts: LayoutOptions[],
-): LayoutTemplate {
-  const layoutName = uiSchema?.['ui:layout'] ?? DEFAULT_SCAFFOLDER_LAYOUT.name;
-
-  delete uiSchema?.['ui:layout'];
-
-  const LayoutComponent = layouts.find(
-    layout => layout.name === layoutName,
-  )?.component;
-
-  if (!LayoutComponent) {
-    return DefaultStepFormLayout;
-  }
-
-  return LayoutComponent;
-}
diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
index 1802f8bea2..f5656092c1 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx
@@ -49,7 +49,6 @@ const useStyles = makeStyles(theme => ({
 export interface StepperProps {
   manifest: TemplateParameterSchema;
   extensions: FieldExtensionOptions<any, any>[];
-  layout?: LayoutOptions;
 }
 
 const Form = withTheme(MuiTheme);
diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useTemplateSchema.test.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useTemplateSchema.test.tsx
index e699ee703a..9be6faa0fa 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useTemplateSchema.test.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useTemplateSchema.test.tsx
@@ -41,7 +41,6 @@ describe('useTemplateSchema', () => {
           description: 'Step 2 Description',
           schema: {
             type: 'object',
-            'ui:layout': 'MyLayout',
             properties: {
               field2: { type: 'string', 'ui:field': 'MyCoolerComponent' },
             },
@@ -75,7 +74,6 @@ describe('useTemplateSchema', () => {
 
     expect(second.uiSchema).toEqual({
       field2: { 'ui:field': 'MyCoolerComponent' },
-      'ui:layout': 'MyLayout',
     });
 
     expect(second.schema).toEqual({