Merge pull request #16295 from backstage/blam/scaffolder/next/editor

scaffolder/next: `TemplateEditorPage` support

plugins/scaffolder-react/api-report.md

@@ -7,13 +7,14 @@
 
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ApiRef } from '@backstage/core-plugin-api';
+import { ComponentType } from 'react';
 import { Dispatch } from 'react';
 import { Extension } from '@backstage/core-plugin-api';
 import { FieldProps } from '@rjsf/core';
 import { FieldProps as FieldProps_2 } from '@rjsf/utils';
 import { FieldValidation } from '@rjsf/core';
 import { FieldValidation as FieldValidation_2 } from '@rjsf/utils';
-import type { FormProps as FormProps_2 } from '@rjsf/core-v5';
+import { FormProps as FormProps_2 } from '@rjsf/core-v5';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';
@@ -22,6 +23,7 @@ import { Observable } from '@backstage/types';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { RJSFSchema } from '@rjsf/utils';
 import { SetStateAction } from 'react';
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
@@ -126,6 +128,9 @@ export type FieldExtensionOptions<
   schema?: CustomFieldExtensionSchema;
 };
 
+// @alpha (undocumented)
+export const Form: ComponentType<FormProps_2<any, RJSFSchema, any>>;
+
 // @public
 export type FormProps = Pick<
   FormProps_2,

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

@@ -0,0 +1,23 @@
+/*
+ * 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 { withTheme } from '@rjsf/core-v5';
+
+// TODO(blam): We require here, as the types in this package depend on @rjsf/core explicitly
+// which is what we're using here as the default types, it needs to depend on @rjsf/core-v5 because
+// of the re-writing we're doing. Once we've migrated, we can import this the exact same as before.
+/** @alpha */
+export const Form = withTheme(require('@rjsf/material-ui-v5').Theme);

plugins/scaffolder-react/src/next/components/Form/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { Form } from './Form';

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2021 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 { MarkdownContent } from '@backstage/core-components';
+import { FieldProps } from '@rjsf/utils';
+
+export const DescriptionField = ({ description }: FieldProps) =>
+  description && <MarkdownContent content={description} linkTarget="_blank" />;

plugins/scaffolder-react/src/next/components/Stepper/FieldOverrides/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 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 { DescriptionField } from './DescriptionField';

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

@@ -22,7 +22,7 @@ import {
   Button,
   makeStyles,
 } from '@material-ui/core';
-import { type IChangeEvent, withTheme } from '@rjsf/core-v5';
+import { type IChangeEvent } from '@rjsf/core-v5';
 import { ErrorSchema } from '@rjsf/utils';
 import React, { useCallback, useMemo, useState, type ReactNode } from 'react';
 import { NextFieldExtensionOptions } from '../../extensions';
@@ -39,6 +39,8 @@ import { FormProps } from '../../types';
 import { LayoutOptions } from '../../../layouts';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
 import { hasErrors } from './utils';
+import * as FieldOverrides from './FieldOverrides';
+import { Form } from '../Form';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -74,11 +76,6 @@ export type StepperProps = {
   layouts?: LayoutOptions[];
 };
 
-// TODO(blam): We require here, as the types in this package depend on @rjsf/core explicitly
-// which is what we're using here as the default types, it needs to depend on @rjsf/core-v5 because
-// of the re-writing we're doing. Once we've migrated, we can import this the exact same as before.
-const Form = withTheme(require('@rjsf/material-ui-v5').Theme);
-
 /**
  * The `Stepper` component is the Wizard that is rendered when a user selects a template
  * @alpha
@@ -175,7 +172,7 @@ export const Stepper = (stepperProps: StepperProps) => {
             schema={currentStep.schema}
             uiSchema={currentStep.uiSchema}
             onSubmit={handleNext}
-            fields={extensions}
+            fields={{ ...FieldOverrides, ...extensions }}
             showErrorList={false}
             onChange={handleChange}
             {...(props.FormProps ?? {})}

plugins/scaffolder-react/src/next/components/index.ts

@@ -19,3 +19,4 @@ export * from './ReviewState';
 export * from './TemplateGroup';
 export * from './Workflow';
 export * from './TemplateOutputs';
+export * from './Form';