From fa66d1b5b31841ef04bdaa6d6ef646919d2076e6 Mon Sep 17 00:00:00 2001
From: nabiltntn <zouabi.nabil@live.com>
Date: Mon, 20 Nov 2023 18:34:27 +0100
Subject: [PATCH] Display enum label from enumNames in review if used

Signed-off-by: nabiltntn <zouabi.nabil@live.com>
---
 .changeset/funny-bobcats-try.md               |  5 ++
 .../ReviewState/ReviewState.test.tsx          | 66 +++++++++++++++++++
 .../components/ReviewState/ReviewState.tsx    |  9 +++
 3 files changed, 80 insertions(+)
 create mode 100644 .changeset/funny-bobcats-try.md

diff --git a/.changeset/funny-bobcats-try.md b/.changeset/funny-bobcats-try.md
new file mode 100644
index 0000000000..c8dd2384a6
--- /dev/null
+++ b/.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`
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
index 0f56a32d1d..7493a3fdbe 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
+++ b/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();
+  });
 });
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
index 52ad80c4c2..38f1913ced 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
+++ b/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];