Display enum label from enumNames in review if used

Signed-off-by: nabiltntn <zouabi.nabil@live.com>

.changeset/funny-bobcats-try.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Fixed bug in `ReviewState` where `enum` value was displayed in step review instead of the corresponding label when using `enumNames`

plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx

@@ -136,4 +136,70 @@ describe('ReviewState', () => {
 
     expect(getByRole('row', { name: 'Name lols' })).toBeInTheDocument();
   });
+
+  it('should display enum label from enumNames', async () => {
+    const formState = {
+      name: 'type2',
+    };
+
+    const schemas: ParsedTemplateSchema[] = [
+      {
+        mergedSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              default: 'type1',
+              enum: ['type1', 'type2', 'type3'],
+              enumNames: ['Label-type1', 'Label-type2', 'Label-type3'],
+            },
+          },
+        },
+        schema: {},
+        title: 'test',
+        uiSchema: {},
+        description: 'asd',
+      },
+    ];
+
+    const { queryByRole } = render(
+      <ReviewState formState={formState} schemas={schemas} />,
+    );
+
+    expect(
+      queryByRole('row', { name: 'Name Label-type2' }),
+    ).toBeInTheDocument();
+  });
+
+  it('should display enum value if no corresponding enumNames', async () => {
+    const formState = {
+      name: 'type4',
+    };
+
+    const schemas: ParsedTemplateSchema[] = [
+      {
+        mergedSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              default: 'type1',
+              enum: ['type1', 'type2', 'type3', 'type4'],
+              enumNames: ['Label-type1', 'Label-type2', 'Label-type3'],
+            },
+          },
+        },
+        schema: {},
+        title: 'test',
+        uiSchema: {},
+        description: 'asd',
+      },
+    ];
+
+    const { queryByRole } = render(
+      <ReviewState formState={formState} schemas={schemas} />,
+    );
+
+    expect(queryByRole('row', { name: 'Name type4' })).toBeInTheDocument();
+  });
 });

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

@@ -57,6 +57,15 @@ export const ReviewState = (props: ReviewStateProps) => {
           if (definitionInSchema['ui:widget'] === 'password') {
             return [key, '******'];
           }
+
+          if (definitionInSchema.enum && definitionInSchema.enumNames) {
+            return [
+              key,
+              definitionInSchema.enumNames[
+                definitionInSchema.enum.indexOf(value)
+              ] || value,
+            ];
+          }
         }
       }
       return [key, value];