move layouts into scaffolder-react

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

plugins/scaffolder-react/src/hooks/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { useCustomFieldExtensions } from './useCustomFieldExtensions';
+export { useCustomLayouts } from './useCustomLayouts';

plugins/scaffolder-react/src/hooks/useCustomLayouts.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 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 { useElementFilter } from '@backstage/core-plugin-api';
+import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../next/layouts/keys';
+import { type NextLayoutOptions } from '../next/types';
+
+/**
+ * Hook that returns all custom field extensions from the current outlet.
+ * @public
+ */
+export const useCustomLayouts = <TComponentDataType = NextLayoutOptions>(
+  outlet: React.ReactNode,
+) => {
+  return useElementFilter(outlet, elements =>
+    elements
+      .selectByComponentData({
+        key: LAYOUTS_WRAPPER_KEY,
+      })
+      .findComponentData<TComponentDataType>({
+        key: LAYOUTS_KEY,
+      }),
+  );
+};

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -33,8 +33,7 @@ import { ReviewState, type ReviewStateProps } from '../ReviewState';
 import { useTemplateSchema } from '../../hooks/useTemplateSchema';
 import validator from '@rjsf/validator-ajv6';
 import { useFormDataFromQuery } from '../../hooks';
-import type { FormProps, NextLayoutOptions } from '../../types';
-import { useTransformSchemaToProps } from './useTransformSchemaToProps';
+import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
 
 const useStyles = makeStyles(theme => ({
   backButton: {

plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.test.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 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 { renderHook } from '@testing-library/react-hooks';
+import { TestApiProvider } from '@backstage/test-utils';
+import { type ParsedTemplateSchema } from './useTemplateSchema';
+import { useTransformSchemaToProps } from './useTransformSchemaToProps';
+
+describe('useTransformSchemaToProps', () => {
+  it('should replace ui:ObjectFieldTemplate with actual component', () => {
+    const layouts = [{ name: 'TwoColumn', component: jest.fn() }];
+
+    const step: ParsedTemplateSchema = {
+      title: 'Fill in some steps',
+      mergedSchema: {},
+      schema: {},
+      uiSchema: {
+        'ui:ObjectFieldTemplate': 'TwoColumn' as any,
+        name: {
+          'ui:field': 'EntityNamePicker',
+          'ui:autofocus': true,
+        },
+      },
+    };
+
+    const { result } = renderHook(
+      () => useTransformSchemaToProps(step, layouts),
+      {
+        wrapper: ({ children }) => (
+          <TestApiProvider apis={[]}>{children}</TestApiProvider>
+        ),
+      },
+    );
+
+    const { uiSchema } = result.current;
+
+    expect(uiSchema['ui:ObjectFieldTemplate']).toEqual(layouts[0].component);
+  });
+});

plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.ts

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { type NextLayoutOptions } from '../../types';
 import { type ParsedTemplateSchema } from './useTemplateSchema';
+import { type NextLayoutOptions } from '../types';
 
 export const useTransformSchemaToProps = (
   step: ParsedTemplateSchema,

plugins/scaffolder-react/src/next/layouts/index.tsx

@@ -0,0 +1,50 @@
+import { NextLayoutOptions } from '../types';
+import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys';
+
+/*
+ * Copyright 2023 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 { attachComponentData, Extension } from '@backstage/core-plugin-api';
+
+export type LayoutComponent<_TInputProps> = () => null;
+
+/**
+ * Method for creating custom Layouts that can be used in the scaffolder frontend form
+ *
+ * @public
+ */
+export function createScaffolderLayout<TInputProps = unknown>(
+  options: NextLayoutOptions,
+): Extension<LayoutComponent<TInputProps>> {
+  return {
+    expose() {
+      const LayoutDataHolder: any = () => null;
+
+      attachComponentData(LayoutDataHolder, LAYOUTS_KEY, options);
+
+      return LayoutDataHolder;
+    },
+  };
+}
+
+/**
+ * The wrapping component for defining scaffolder layouts as children
+ *
+ * @public
+ */
+export const ScaffolderLayouts: React.ComponentType = (): JSX.Element | null =>
+  null;
+
+attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);

plugins/scaffolder-react/src/next/layouts/keys.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 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 LAYOUTS_KEY = 'scaffolder.layout.v1';
+export const LAYOUTS_WRAPPER_KEY = 'scaffolder.layouts.wrapper.v1';

plugins/scaffolder-react/src/next/types.ts

@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
-
 /**
  * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage`
  *
- * @alpha
+ * @public
  */
 export type FormProps = Pick<
   SchemaFormProps,