Merge pull request #14678 from mathiasbronner/master

chore: GroupListPicker - Bug fixes and adding the possibility to add a default value

plugins/org-react/README.md

@@ -18,13 +18,14 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
 
  <Grid container spacing={3}>
     <Grid item xs={12}>
-+     <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup}/>
++     <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup} defaultValue='Team A'/>
     </Grid>
  </Grid>
 ```
 
-The `GroupListPicker` comes with three props:
+The `GroupListPicker` comes with four 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.
 - `onChange`: a prop to help the user to give access to the selected group
+- `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection

plugins/org-react/api-report.md

@@ -12,6 +12,7 @@ export const GroupListPicker: (props: GroupListPickerProps) => JSX.Element;
 
 // @public
 export type GroupListPickerProps = {
+  defaultValue?: string;
   placeholder?: string;
   groupTypes?: Array<string>;
   onChange: (value: GroupEntity | undefined) => void;

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

@@ -34,6 +34,7 @@ import { GroupListPickerButton } from './GroupListPickerButton';
  * @public
  */
 export type GroupListPickerProps = {
+  defaultValue?: string;
   placeholder?: string;
   groupTypes?: Array<string>;
   onChange: (value: GroupEntity | undefined) => void;
@@ -43,9 +44,9 @@ export type GroupListPickerProps = {
 export const GroupListPicker = (props: GroupListPickerProps) => {
   const catalogApi = useApi(catalogApiRef);
 
-  const { onChange, groupTypes, placeholder = '' } = props;
+  const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = React.useState(defaultValue);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -75,6 +76,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
   const handleChange = useCallback(
     (_, v: GroupEntity | null) => {
       onChange(v ?? undefined);
+      setAnchorEl(null);
     },
     [onChange],
   );
@@ -108,6 +110,8 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
           renderInput={params => (
             <TextField
               {...params}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
               placeholder={placeholder}
               variant="outlined"
             />

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

@@ -22,8 +22,7 @@ import PeopleIcon from '@material-ui/icons/People';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   btn: {
-    margin: 0,
-    padding: 10,
+    padding: '10px',
     width: '100%',
     cursor: 'pointer',
     justifyContent: 'space-between',
@@ -32,10 +31,13 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     fontSize: '1.5rem',
     fontStyle: 'normal',
     fontWeight: theme.typography.fontWeightBold,
+    height: '32px',
     letterSpacing: '-0.25px',
-    lineHeight: '32px',
     marginBottom: 0,
+    marginLeft: '4px',
+    textAlign: 'left',
     textTransform: 'none',
+    width: '100%',
   },
   icon: {
     transform: 'scale(1.5)',