rename extracted Template components

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

packages/app/src/components/EmbeddedScaffolderWorkflow/EmbeddedScaffolderWorkflow.tsx

@@ -17,15 +17,15 @@
 import React, { useState, useCallback } from 'react';
 import type { ReactNode } from 'react';
 import {
-  TemplateContent,
+  EmbeddableWorkflow,
   useGetCustomFields,
+  WorkflowProps,
 } from '@backstage/plugin-scaffolder';
-import type { FormProps } from '@backstage/plugin-scaffolder-react';
-import type { TemplateContentProps } from '@backstage/plugin-scaffolder';
 import { Box, Button } from '@material-ui/core';
 import type { JsonValue } from '@backstage/types';
+import type { FormProps } from '@backstage/plugin-scaffolder-react';
 
-type WorkflowProps = Omit<TemplateContentProps, 'customFieldExtensions'> & {
+type EmbeddedWorkflowProps = Omit<WorkflowProps, 'customFieldExtensions'> & {
   customExtensionsElement?: React.ReactNode;
   initialFormState?: Record<string, JsonValue>;
   onComplete: (values: Record<string, JsonValue>) => Promise<void>;
@@ -39,7 +39,7 @@ type Display = 'front' | 'workflow' | 'finish';
 
 type DisplayComponents = Record<Display, JSX.Element>;
 
-type OnCompleteArgs = Parameters<TemplateContentProps['onComplete']>[0];
+type OnCompleteArgs = Parameters<WorkflowProps['onComplete']>[0];
 
 export function EmbeddedScaffolderWorkflow({
   namespace,
@@ -52,7 +52,7 @@ export function EmbeddedScaffolderWorkflow({
   title,
   description,
   ReviewStateWrapper,
-}: WorkflowProps): JSX.Element {
+}: EmbeddedWorkflowProps): JSX.Element {
   const [display, setDisplay] = useState<Display>('front');
   const fieldExtensions = useGetCustomFields(customExtensionsElement);
 
@@ -77,7 +77,7 @@ export function EmbeddedScaffolderWorkflow({
       </Box>
     ),
     workflow: (
-      <TemplateContent
+      <EmbeddableWorkflow
         title={title}
         description={description}
         namespace={namespace}

plugins/scaffolder/src/index.ts

@@ -46,9 +46,9 @@ export * from './deprecated';
 /** next exports */
 export { NextScaffolderPage } from './plugin';
 export {
-  TemplateContent,
+  EmbeddableWorkflow,
   useGetCustomFields,
-  type TemplateContentProps,
+  type WorkflowProps,
 } from './next';
 export type { NextRouterProps } from './next';
 export type { TemplateGroupFilter } from './next';

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

@@ -30,9 +30,9 @@ import {
 import useAsync from 'react-use/lib/useAsync';
 import { JsonValue } from '@backstage/types';
 import { FormProps } from '@backstage/plugin-scaffolder-react';
-import { nextRouteRef } from '../routes';
-import { scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes';
-import { TemplateWizardContent } from '../TemplateWizardContent/TemplateWizardContent';
+import { nextRouteRef, scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes';
+import { Header, Page } from '@backstage/core-components';
+import { Workflow } from '../Workflow/Workflow';
 
 type TemplateWizardPageProps = {
   customFieldExtensions: NextFieldExtensionOptions<any, any>[];
@@ -79,14 +79,21 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
 
   return (
     <AnalyticsContext attributes={{ entityRef: templateRef }}>
-      <TemplateWizardContent
-        namespace={namespace}
-        templateName={templateName}
-        onComplete={onComplete}
-        onError={onError}
-        customFieldExtensions={props.customFieldExtensions}
-        FormProps={props.FormProps}
-      />
+      <Page themeId="website">
+        <Header
+          pageTitleOverride="Create a new component"
+          title="Create a new component"
+          subtitle="Create new software components using standard templates in your organization"
+        />
+        <Workflow
+          namespace={namespace}
+          templateName={templateName}
+          onComplete={onComplete}
+          onError={onError}
+          customFieldExtensions={props.customFieldExtensions}
+          FormProps={props.FormProps}
+        />
+      </Page>
     </AnalyticsContext>
   );
 };

plugins/scaffolder/src/next/Workflow/Workflow.tsx

@@ -48,7 +48,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
   },
 }));
 
-export interface TemplateContentProps {
+export interface WorkflowProps {
   title?: string;
   description?: string;
   namespace: string;
@@ -62,10 +62,10 @@ export interface TemplateContentProps {
   ReviewStateWrapper?: (props: ReviewStateProps) => JSX.Element;
 }
 
-export const TemplateWizardContent = ({
+export const Workflow = ({
   ReviewStateWrapper = ReviewState,
   ...props
-}: TemplateContentProps): JSX.Element | null => {
+}: WorkflowProps): JSX.Element | null => {
   const styles = useStyles();
   const templateRef = stringifyEntityRef({
     kind: 'Template',
@@ -118,8 +118,8 @@ export const TemplateWizardContent = ({
   );
 };
 
-export const TemplateContent = (props: TemplateContentProps) => (
+export const EmbeddableWorkflow = (props: WorkflowProps) => (
   <SecretsContextProvider>
-    <TemplateWizardContent {...props} />
+    <Workflow {...props} />
   </SecretsContextProvider>
 );

plugins/scaffolder/src/next/Workflow/index.ts

@@ -13,8 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export {
-  type TemplateContentProps,
-  TemplateWizardContent,
-  TemplateContent,
-} from './TemplateWizardContent';
+export { type WorkflowProps, Workflow, EmbeddableWorkflow } from './Workflow';

plugins/scaffolder/src/next/index.ts

@@ -18,4 +18,4 @@ export * from './TemplateListPage';
 export * from './TemplateWizardPage';
 export * from './types';
 export * from './routes';
-export * from './TemplateWizardContent';
+export * from './Workflow';