chore: give onChange prop the GroupListPicker component

Signed-off-by: djamaile <rdjamaile@gmail.com>

plugins/org-react/README.md

@@ -12,10 +12,13 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
 
 ```diff
 + import { GroupListPicker } from '@backstage/plugin-org-react';
++ import React, { useState } from 'react';
+
++ const [group, setGroup] = useState<GroupEntity | undefined>();
 
  <Grid container spacing={3}>
     <Grid item xs={12}>
-+     <GroupListPicker groupTypes={['team']} defaultGroup='team-a' placeholder='Search for a team' />
++     <GroupListPicker groupTypes={['team']} initialGroup={group.metadata.name} placeholder='Search for a team' onChange={setGroup}/>
     </Grid>
  </Grid>
 ```
@@ -23,5 +26,6 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
 The `GroupListPicker` comes with three optional props:
 
 - `groupTypes`: gives the user the option which group types the component should load. If no value is provided all group types will be loaded in;
-- `defaultGroup`: which group by default should be selected. For example, a group of the logged in user;
+- `initialGroup`: which group by default should be selected. For example, a group of the logged in user;
 - `placeholder`: the placeholder that the select box in the component should display. This might be helpful in informing your users what the functionality of the component is.
+- `onChange`: a prop to help the user to give access to the selected group

plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   catalogApiRef,
   humanizeEntityRef,
@@ -36,17 +36,17 @@ import { GroupListPickerButton } from './GroupListPickerButton';
 export type GroupListPickerProps = {
   placeholder?: string;
   groupTypes?: Array<string>;
-  defaultGroup?: string;
+  initialGroup?: string | undefined;
+  onChange: (value: GroupEntity | undefined) => void;
 };
 
 /** @public */
 export const GroupListPicker = (props: GroupListPickerProps) => {
   const catalogApi = useApi(catalogApiRef);
 
-  const { groupTypes, defaultGroup = '', placeholder = '' } = props;
+  const { onChange, groupTypes, initialGroup, placeholder = '' } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const [inputValue, setInputValue] = React.useState('');
-  const [group, setGroup] = React.useState(defaultGroup);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -73,6 +73,13 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
     return groupsList.items as GroupEntity[];
   }, [catalogApi, groupTypes]);
 
+  const handleChange = useCallback(
+    (_, v: GroupEntity | null) => {
+      onChange(v ?? undefined);
+    },
+    [onChange],
+  );
+
   if (error) {
     return <ResponseErrorPanel error={error} />;
   }
@@ -98,15 +105,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
           }
           inputValue={inputValue}
           onInputChange={(_, value) => setInputValue(value)}
-          onChange={(_, newValue) => {
-            if (newValue) {
-              setGroup(
-                newValue.spec.profile?.displayName ??
-                  getHumanEntityRef(newValue),
-              );
-            }
-            setInputValue('');
-          }}
+          onChange={handleChange}
           style={{ width: '300px' }}
           renderInput={params => (
             <TextField
@@ -117,7 +116,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
           )}
         />
       </Popover>
-      <GroupListPickerButton handleClick={handleClick} group={group} />
+      <GroupListPickerButton handleClick={handleClick} group={initialGroup} />
     </>
   );
 };

plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx

@@ -47,7 +47,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 
 type GroupListPickerButtonProps = {
   handleClick: (event: React.MouseEvent<HTMLElement>) => void;
-  group: string;
+  group: string | undefined;
 };
 
 /** @public */

plugins/org-react/src/plugin.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import {
+  createComponentExtension,
   createPlugin,
-  createRoutableExtension,
 } from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from './routes';
@@ -29,10 +29,11 @@ export const orgReactPlugin = createPlugin({
 
 /** @public */
 export const GroupListPicker = orgReactPlugin.provide(
-  createRoutableExtension({
+  createComponentExtension({
     name: 'GroupListPicker',
-    component: () =>
-      import('./components/GroupListPicker').then(m => m.GroupListPicker),
-    mountPoint: rootRouteRef,
+    component: {
+      lazy: () =>
+        import('./components/GroupListPicker').then(m => m.GroupListPicker),
+    },
   }),
 );