Incorporated the feedback

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>
Signed-off-by: bogdannechyporenko <bogdannechiporenko@gmail.com>

.changeset/angry-trees-relax.md

@@ -2,7 +2,7 @@
 '@backstage/plugin-scaffolder': patch
 ---
 
-Enabling the customization of the last page in the scaffolder template.
+Enabling the customization of the last step in the scaffolder template.
 
 To override the content you have to do the next:
 

plugins/scaffolder/src/components/MultistepJsonForm/LastStepForm.tsx

@@ -16,9 +16,9 @@
 import { Box, Button, Paper, Typography } from '@material-ui/core';
 import React from 'react';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
-import { Step } from './types';
 import { UiSchema } from '@rjsf/core';
 import { JsonObject } from '@backstage/types';
+import { Step } from '../types';
 
 /**
  * The props for the Last Step in scaffolder template form.

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -28,13 +28,13 @@ import {
 } from '@backstage/core-plugin-api';
 import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
-import React, { useState } from 'react';
+import React, { ComponentType, useState } from 'react';
 import { transformSchemaToProps } from './schema';
 import cloneDeep from 'lodash/cloneDeep';
 import * as fieldOverrides from './FieldOverrides';
 import { LayoutOptions } from '../../layouts';
-import { Step } from './types';
-import { useScaffolderPluginOptions } from '../../options';
+import { LastStepFormProps, Step } from '../types';
+import { LastStepForm } from './LastStepForm';
 
 const Form = withTheme(MuiTheme);
 
@@ -56,6 +56,7 @@ export type MultistepJsonFormProps = {
   fields?: FormProps<any>['fields'];
   finishButtonLabel?: string;
   layouts: LayoutOptions[];
+  LastStepFormComponent?: ComponentType<LastStepFormProps>;
 };
 
 /**
@@ -73,6 +74,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
     widgets,
     finishButtonLabel,
     layouts,
+    LastStepFormComponent,
   } = props;
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
@@ -140,7 +142,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
     }
   };
 
-  const { lastStepFormComponent } = useScaffolderPluginOptions();
+  const LastStepFormElement = LastStepFormComponent ?? LastStepForm;
 
   return (
     <>
@@ -184,16 +186,17 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
           );
         })}
       </Stepper>
-      {activeStep === steps.length &&
-        lastStepFormComponent({
-          disableButtons,
-          handleBack,
-          handleCreate,
-          handleReset,
-          finishButtonLabel,
-          formData,
-          steps,
-        })}
+      {activeStep === steps.length && (
+        <LastStepFormElement
+          disableButtons={disableButtons}
+          handleBack={handleBack}
+          handleCreate={handleCreate}
+          handleReset={handleReset}
+          finishButtonLabel={finishButtonLabel}
+          formData={formData}
+          steps={steps}
+        />
+      )}
     </>
   );
 };

plugins/scaffolder/src/components/MultistepJsonForm/index.ts

@@ -17,4 +17,3 @@ export { MultistepJsonForm } from './MultistepJsonForm';
 export type { MultistepJsonFormProps } from './MultistepJsonForm';
 export { lastStepFormComponent, LastStepForm } from './LastStepForm';
 export type { LastStepFormProps } from './LastStepForm';
-export type { Step } from './types';

plugins/scaffolder/src/components/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, useEffect } from 'react';
-import { Routes, Route, useOutlet, Navigate } from 'react-router';
+import { Navigate, Route, Routes, useOutlet } from 'react-router';
 import { Entity } from '@backstage/catalog-model';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { ScaffolderPage } from './ScaffolderPage';
@@ -26,10 +26,10 @@ import { SecretsContextProvider } from './secrets/SecretsContext';
 import { TemplateEditorPage } from './TemplateEditorPage';
 
 import {
-  FieldExtensionOptions,
-  FIELD_EXTENSION_WRAPPER_KEY,
-  FIELD_EXTENSION_KEY,
   DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS,
+  FIELD_EXTENSION_KEY,
+  FIELD_EXTENSION_WRAPPER_KEY,
+  FieldExtensionOptions,
 } from '../extensions';
 import {
   useElementFilter,
@@ -46,6 +46,7 @@ import {
 } from '../routes';
 import { ListTasksPage } from './ListTasksPage';
 import { LayoutOptions, LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../layouts';
+import { LastStepFormProps } from './types';
 
 /**
  * The props for the entrypoint `ScaffolderPage` component the plugin.
@@ -53,6 +54,7 @@ import { LayoutOptions, LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../layouts';
  */
 export type RouterProps = {
   components?: {
+    LastStepFormComponent?: ComponentType<LastStepFormProps>;
     TemplateCardComponent?:
       | ComponentType<{ template: TemplateEntityV1beta3 }>
       | undefined;
@@ -82,7 +84,8 @@ export type RouterProps = {
 export const Router = (props: RouterProps) => {
   const { groups, components = {}, defaultPreviewTemplate } = props;
 
-  const { TemplateCardComponent, TaskPageComponent } = components;
+  const { LastStepFormComponent, TemplateCardComponent, TaskPageComponent } =
+    components;
 
   const outlet = useOutlet();
   const TaskPageElement = TaskPageComponent ?? TaskPage;
@@ -155,6 +158,7 @@ export const Router = (props: RouterProps) => {
         element={
           <SecretsContextProvider>
             <TemplatePage
+              LastStepFormComponent={LastStepFormComponent}
               customFieldExtensions={fieldExtensions}
               layouts={customLayouts}
             />

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -16,7 +16,7 @@
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import qs from 'qs';
-import React, { useCallback, useContext, useState } from 'react';
+import React, { ComponentType, useCallback, useContext, useState } from 'react';
 import { Navigate, useNavigate } from 'react-router';
 import useAsync from 'react-use/lib/useAsync';
 import { scaffolderApiRef } from '../../api';
@@ -40,6 +40,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { LayoutOptions } from '../../layouts';
+import { LastStepFormProps } from '../types';
 
 const useTemplateParameterSchema = (templateRef: string) => {
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -51,9 +52,11 @@ const useTemplateParameterSchema = (templateRef: string) => {
 };
 
 export const TemplatePage = ({
+  LastStepFormComponent,
   customFieldExtensions = [],
   layouts = [],
 }: {
+  LastStepFormComponent?: ComponentType<LastStepFormProps>;
   customFieldExtensions?: FieldExtensionOptions<any, any>[];
   layouts?: LayoutOptions[];
 }) => {
@@ -144,6 +147,7 @@ export const TemplatePage = ({
             titleTypographyProps={{ component: 'h2' }}
           >
             <MultistepJsonForm
+              LastStepFormComponent={LastStepFormComponent}
               formData={formState}
               fields={customFieldComponents}
               onChange={handleChange}

plugins/scaffolder/src/components/types.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { FormProps } from '@rjsf/core';
 import { JsonObject } from '@backstage/types';
 
@@ -25,3 +26,14 @@ export type Step = {
   schema: JsonObject;
   title: string;
 } & Partial<Omit<FormProps<any>, 'schema'>>;
+
+export type LastStepFormProps = {
+  disableButtons: boolean;
+  finishButtonLabel?: string;
+  formData: Record<string, any>;
+  handleBack: () => void;
+  handleCreate: () => void;
+  handleReset: () => void;
+  onFinish?: () => Promise<void>;
+  steps: Step[];
+};