From e6943d1f4a8cb143787158941a302177d1baa623 Mon Sep 17 00:00:00 2001
From: Toby Harradine <tobyh@canva.com>
Date: Tue, 15 Apr 2025 15:12:29 +1000
Subject: [PATCH 1/3] fix(scaffolder): make EntityPicker display consistent
 between dropdown and selected value

Signed-off-by: Toby Harradine <tobyh@canva.com>
---
 .../fields/EntityPicker/EntityPicker.test.tsx | 93 +++++++++++++++++++
 .../fields/EntityPicker/EntityPicker.tsx      |  2 +-
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
index ab3092e3ed..2424d76f5a 100644
--- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
@@ -812,4 +812,97 @@ describe('<EntityPicker />', () => {
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
+
+  describe('rendering consistency', () => {
+    beforeEach(() => {
+      uiSchema = { 'ui:options': {} };
+      props = {
+        onChange,
+        schema,
+        required,
+        uiSchema,
+        rawErrors,
+        formData: 'group:default/team-a',
+      } as unknown as FieldProps<string>;
+    });
+
+    it('renders consistent entity display between dropdown and selected value', async () => {
+      // Mock the presentation API to return specific values for testing
+      const mockEntityPresentation = {
+        entityRef: 'group:default/team-a',
+        primaryTitle: 'Team A',
+      };
+
+      // Create a catalog API that includes the specific test entity
+      const testCatalogApi = catalogApiMock.mock({
+        getEntities: jest.fn().mockResolvedValue({
+          items: [makeEntity('Group', 'default', 'team-a')],
+        }),
+      });
+
+      // Create mock entity presentation mapping
+      const entityRefToPresentation = new Map();
+      entityRefToPresentation.set(
+        'group:default/team-a',
+        mockEntityPresentation,
+      );
+
+      const renderResult = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [catalogApiRef, testCatalogApi],
+            [
+              entityPresentationApiRef,
+              {
+                forEntity: jest.fn().mockReturnValue({
+                  snapshot: mockEntityPresentation,
+                  promise: Promise.resolve(mockEntityPresentation),
+                }),
+              },
+            ],
+          ]}
+        >
+          <EntityPicker {...props} />
+        </TestApiProvider>,
+      );
+
+      // Wait for the entity data to load and be processed
+      // This is needed because the EntityPicker uses useAsync
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Force a re-render to apply the mocked data
+      renderResult.rerender(
+        <TestApiProvider
+          apis={[
+            [catalogApiRef, testCatalogApi],
+            [
+              entityPresentationApiRef,
+              {
+                forEntity: jest.fn().mockReturnValue({
+                  snapshot: mockEntityPresentation,
+                  promise: Promise.resolve(mockEntityPresentation),
+                }),
+              },
+            ],
+          ]}
+        >
+          <EntityPicker {...props} formData="group:default/team-a" />
+        </TestApiProvider>,
+      );
+
+      // Force update to complete
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Verify the selected value shows the correct display
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('Team A');
+
+      // Open the dropdown
+      fireEvent.mouseDown(input);
+
+      // Check if dropdown shows the same representation
+      const option = await screen.findByText('Team A');
+      expect(option).toBeInTheDocument();
+    });
+  });
 });
diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
index b15c197945..fa62795b40 100644
--- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
@@ -204,7 +204,7 @@ export const EntityPicker = (props: EntityPickerProps) => {
           typeof option === 'string'
             ? option
             : entities?.entityRefToPresentation.get(stringifyEntityRef(option))
-                ?.entityRef!
+                ?.primaryTitle || stringifyEntityRef(option)
         }
         autoSelect
         freeSolo={allowArbitraryValues}

From 467cb0b14930cad7f42a25e9d537d6d90ec6b412 Mon Sep 17 00:00:00 2001
From: Toby Harradine <tobyh@canva.com>
Date: Tue, 15 Apr 2025 15:54:58 +1000
Subject: [PATCH 2/3] Add changeset for EntityPicker display fix

Signed-off-by: Toby Harradine <tobyh@canva.com>
---
 .changeset/entity-picker-display-fix.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/entity-picker-display-fix.md

diff --git a/.changeset/entity-picker-display-fix.md b/.changeset/entity-picker-display-fix.md
new file mode 100644
index 0000000000..4a37fbc29a
--- /dev/null
+++ b/.changeset/entity-picker-display-fix.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Fixed EntityPicker display inconsistency between dropdown options and selected value by using primaryTitle from entity presentation for both.

From 2e56a4e303e77450ec4f9ca59a6fe9651988c5c6 Mon Sep 17 00:00:00 2001
From: Toby Harradine <tobyh@canva.com>
Date: Wed, 16 Apr 2025 19:44:35 +1000
Subject: [PATCH 3/3] Update changelog message

Signed-off-by: Toby Harradine <tobyh@canva.com>
---
 .changeset/entity-picker-display-fix.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/entity-picker-display-fix.md b/.changeset/entity-picker-display-fix.md
index 4a37fbc29a..f5a3f2b0bc 100644
--- a/.changeset/entity-picker-display-fix.md
+++ b/.changeset/entity-picker-display-fix.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-scaffolder': patch
 ---
 
-Fixed EntityPicker display inconsistency between dropdown options and selected value by using primaryTitle from entity presentation for both.
+Fixed `EntityPicker` display inconsistency between dropdown options and selected value.