chore: respond to comments

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

plugins/org-react/README.md

@@ -23,7 +23,7 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
  </Grid>
 ```
 
-The `GroupListPicker` comes with three optional props:
+The `GroupListPicker` comes with three 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;
 - `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.

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

@@ -64,7 +64,7 @@ const apis = TestApiRegistry.from([catalogApiRef, mockCatalogApi]);
 
 describe('<GroupListPicker />', () => {
   it('can choose a group', async () => {
-    const { getByText, queryByText, getByTestId } = render(
+    const { getByText, getByTestId } = render(
       <ApiProvider apis={apis}>
         <GroupListPicker
           placeholder="Search"
@@ -78,8 +78,8 @@ describe('<GroupListPicker />', () => {
     const input = getByTestId('group-list-picker-input').querySelector('input');
     fireEvent.change(input as HTMLElement, { target: { value: 'GR' } });
 
-    await waitFor(() => {
-      expect(queryByText('Group A')).toBeInTheDocument();
+    await waitFor(async () => {
+      expect(getByText('Group A')).toBeInTheDocument();
       fireEvent.click(getByText('Group A'));
       expect(getByText('Group A')).toBeInTheDocument();
     });

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

@@ -83,8 +83,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
     return <ResponseErrorPanel error={error} />;
   }
 
-  const getHumanEntityRef = (entity: Entity) =>
-    humanizeEntityRef(entity, { defaultNamespace: false });
+  const getHumanEntityRef = (entity: Entity) => humanizeEntityRef(entity);
 
   return (
     <>

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

@@ -16,18 +16,17 @@
 
 import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { Box, makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Typography, Button } from '@material-ui/core';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import PeopleIcon from '@material-ui/icons/People';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   btn: {
-    backgroundColor: 'transparent',
-    border: 'none',
     margin: 0,
-    padding: 0,
+    padding: 10,
     width: '100%',
     cursor: 'pointer',
+    justifyContent: 'space-between',
   },
   title: {
     fontSize: '1.5rem',
@@ -36,12 +35,10 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     letterSpacing: '-0.25px',
     lineHeight: '32px',
     marginBottom: 0,
+    textTransform: 'none',
   },
-  peopleIcon: {
-    marginRight: theme.spacing(1),
-  },
-  arrowDownIcon: {
-    marginLeft: 'auto',
+  icon: {
+    transform: 'scale(1.5)',
   },
 }));
 
@@ -56,22 +53,16 @@ export const GroupListPickerButton = (props: GroupListPickerButtonProps) => {
   const classes = useStyles();
 
   return (
-    <button
+    <Button
       onClick={handleClick}
-      className={classes.btn}
       data-testid="group-list-picker-button"
       aria-describedby="group-list-popover"
+      startIcon={<PeopleIcon className={classes.icon} />}
+      className={classes.btn}
+      size="large"
+      endIcon={<KeyboardArrowDownIcon className={classes.icon} />}
     >
-      <Box display="flex" flexDirection="row" alignItems="center">
-        <PeopleIcon fontSize="large" className={classes.peopleIcon} />
-        <Typography variant="h3" className={classes.title}>
-          {group}
-        </Typography>
-        <KeyboardArrowDownIcon
-          fontSize="large"
-          className={classes.arrowDownIcon}
-        />
-      </Box>
-    </button>
+      <Typography className={classes.title}>{group}</Typography>
+    </Button>
   );
 };

plugins/org-react/src/routes.ts

@@ -1,20 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { createRouteRef } from '@backstage/core-plugin-api';
-
-export const rootRouteRef = createRouteRef({
-  id: 'org-react',
-});