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

@@ -16,8 +16,8 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { TestApiProvider } from '@backstage/test-utils';
-import { type ParsedTemplateSchema } from './Stepper/useTemplateSchema';
-import { useTransformSchemaToProps } from './Stepper/useTransformSchemaToProps';
+import { type ParsedTemplateSchema } from './useTemplateSchema';
+import { useTransformSchemaToProps } from './useTransformSchemaToProps';
 
 describe('useTransformSchemaToProps', () => {
   it('should replace ui:ObjectFieldTemplate with actual 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,

plugins/scaffolder/src/next/Router/Router.tsx

@@ -21,14 +21,14 @@ import {
   NextFieldExtensionOptions,
   SecretsContextProvider,
   useCustomFieldExtensions,
+  useCustomLayouts,
+  type FormProps,
 } from '@backstage/plugin-scaffolder-react';
 
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups';
 import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';
 import { nextSelectedTemplateRouteRef } from '../routes';
-import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../../layouts';
-import type { FormProps, NextLayoutOptions } from '../types';
 
 /**
  * The Props for the Scaffolder Router
@@ -66,15 +66,7 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
     ),
   ] as NextFieldExtensionOptions[];
 
-  const customLayouts = useElementFilter(outlet, elements =>
-    elements
-      .selectByComponentData({
-        key: LAYOUTS_WRAPPER_KEY,
-      })
-      .findComponentData<NextLayoutOptions>({
-        key: LAYOUTS_KEY,
-      }),
-  );
+  const customLayouts = useCustomLayouts(outlet);
 
   return (
     <Routes>

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -27,6 +27,14 @@ import {
   useTemplateSecrets,
   type NextFieldExtensionOptions,
   Workflow
+  type NextLayoutOptions,
+} from '@backstage/plugin-scaffolder-react';
+import useAsync from 'react-use/lib/useAsync';
+import { makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+import {
+  Stepper,
+  NextFieldExtensionOptions,
 } from '@backstage/plugin-scaffolder-react';
 import { JsonValue } from '@backstage/types';
 import { type FormProps } from '../types';