Merge pull request #23776 from Ali-Dalal/my-groups-picker-selected-value

fix: persist selected value in MyGroupsPicker.tsx

.changeset/hot-years-sell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Use default value for `MyGroupsPicker` if provided

plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx

@@ -274,4 +274,51 @@ describe('<MyGroupsPicker />', () => {
       expect(onChange).toHaveBeenCalledWith('group:default/group1');
     });
   });
+
+  it('should use the pre-existed formdata value if set with the form', async () => {
+    const userGroups = [
+      {
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        metadata: { name: 'group1', title: 'My First Group' },
+        spec: { members: ['Bob'] },
+      },
+      {
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        metadata: { name: 'group2', title: 'My Second Group' },
+        spec: { members: ['Bob'] },
+      },
+    ];
+
+    catalogApi.getEntities.mockResolvedValue({ items: userGroups });
+
+    const props = {
+      onChange,
+      schema,
+      required,
+      formData: 'group:default/group1',
+    } as unknown as FieldProps<string>;
+
+    const { getByRole } = render(
+      <TestApiProvider
+        apis={[
+          [identityApiRef, mockIdentityApi],
+          [catalogApiRef, catalogApi],
+          [errorApiRef, mockErrorApi],
+        ]}
+      >
+        <MyGroupsPicker {...props} />
+      </TestApiProvider>,
+    );
+
+    await waitFor(() =>
+      expect(catalogApi.getEntities).toHaveBeenCalledTimes(1),
+    );
+
+    const inputField = getByRole('combobox');
+    const inputFieldValue = inputField?.querySelector('input')?.value;
+
+    expect(inputFieldValue).toEqual(userGroups[0].metadata.title);
+  });
 });

plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx

@@ -37,6 +37,7 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
     required,
     rawErrors,
     onChange,
+    formData,
   } = props;
 
   const identityApi = useApi(identityApiRef);
@@ -48,10 +49,6 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
       ref: string;
     }[]
   >([]);
-  const [selectedGroup, setSelectedGroup] = useState<null | {
-    label: string;
-    ref: string;
-  }>(null);
 
   useAsync(async () => {
     const { userEntityRef } = await identityApi.getBackstageIdentity();
@@ -82,10 +79,11 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
     _: React.ChangeEvent<{}>,
     value: { label: string; ref: string } | null,
   ) => {
-    setSelectedGroup(value);
     onChange(value?.ref ?? '');
   };
 
+  const selectedEntity = groups?.find(e => e.ref === formData) || null;
+
   return (
     <FormControl
       margin="normal"
@@ -95,7 +93,7 @@ export const MyGroupsPicker = (props: MyGroupsPickerProps) => {
       <Autocomplete
         id="OwnershipEntityRefPicker-dropdown"
         options={groups || []}
-        value={selectedGroup}
+        value={selectedEntity}
         onChange={updateChange}
         getOptionLabel={group => group.label}
         renderInput={params => (