From d4af3731fb718cb0e44e6a1e6c38ca002a9464f0 Mon Sep 17 00:00:00 2001
From: bnechyporenko <bnechyporenko@bol.com>
Date: Thu, 27 Oct 2022 09:34:31 +0200
Subject: [PATCH] Wip Signed-off-by: bnechyporenko <bnechyporenko@bol.com>

---
 .../MultistepJsonForm.test.tsx                |  5 ++--
 .../MultistepJsonForm/MultistepJsonForm.tsx   |  4 +--
 .../MultistepJsonForm/ReviewStep.tsx          | 28 +++++++++++++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx
index f238c62a8a..3f8e153b65 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { getReviewData } from './ReviewStep';
+import { getReviewData, getUiSchemasFromSteps } from './ReviewStep';
 
 describe('MultistepJsonForm', () => {
   const formDataMock = {
@@ -76,7 +76,8 @@ describe('MultistepJsonForm', () => {
   ];
 
   test('Fields are defined to be hidden or masked', () => {
-    const reviewData = getReviewData(formDataMock, stepsMock);
+    const schemas = getUiSchemasFromSteps(stepsMock);
+    const reviewData = getReviewData(formDataMock, schemas);
 
     expect(reviewData.password).toBe('******');
     expect(reviewData.masked).toBe('******');
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index c24284d3e0..91cbdb2243 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -67,7 +67,7 @@ export type MultistepJsonFormProps = {
   ReviewStepComponent?: ComponentType<ReviewStepProps>;
 };
 
-function getUiSchemasFromSteps(steps: Step[]): {
+export function getSchemasFromSteps(steps: Step[]): {
   uiSchema: UiSchema;
   mergedSchema: JsonObject;
   schema: JsonObject;
@@ -218,7 +218,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
           handleCreate={handleCreate}
           handleReset={handleReset}
           formData={formData}
-          steps={getUiSchemasFromSteps(steps)}
+          steps={getSchemasFromSteps(steps)}
         />
       )}
     </>
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx
index 1d60a49102..d78d726869 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx
@@ -22,12 +22,12 @@ import { ReviewStepProps } from '../types';
 
 export function getReviewData(
   formData: Record<string, any>,
-  steps: UiSchema[],
+  uiSchemas: UiSchema[],
 ) {
   const reviewData: Record<string, any> = {};
   for (const key in formData) {
     if (formData.hasOwnProperty(key)) {
-      const uiSchema = steps.find(us => us.name === key);
+      const uiSchema = uiSchemas.find(us => us.name === key);
 
       if (!uiSchema) {
         reviewData[key] = formData[key];
@@ -60,6 +60,25 @@ export function getReviewData(
   return reviewData;
 }
 
+export function getUiSchemasFromSteps(
+  steps: {
+    schema: JsonObject;
+  }[],
+): UiSchema[] {
+  const uiSchemas: Array<UiSchema> = [];
+  steps.forEach(step => {
+    const schemaProps = step.schema.properties as JsonObject;
+    for (const key in schemaProps) {
+      if (schemaProps.hasOwnProperty(key)) {
+        const uiSchema = schemaProps[key] as UiSchema;
+        uiSchema.name = key;
+        uiSchemas.push(uiSchema);
+      }
+    }
+  });
+  return uiSchemas;
+}
+
 /**
  * The component displaying the Last Step in scaffolder template form.
  * Which represents the summary of the input provided by the end user.
@@ -79,10 +98,7 @@ export const ReviewStep = (props: ReviewStepProps) => {
         <Typography variant="h6">Review and create</Typography>
         <StructuredMetadataTable
           dense
-          metadata={getReviewData(
-            formData,
-            steps.map(step => ({ uiSchema: step.uiSchema })),
-          )}
+          metadata={getReviewData(formData, getUiSchemasFromSteps(steps))}
         />
         <Box mb={4} />
         <Button onClick={handleBack} disabled={disableButtons}>