fix: allow roles to be selected when adding user to project (#4102)

frontend/src/component/common/RoleSelect/RoleSelect2.tsx

@@ -0,0 +1,71 @@
+import {
+    Autocomplete,
+    AutocompleteProps,
+    TextField,
+    styled,
+} from '@mui/material';
+import { useRoles } from 'hooks/api/getters/useRoles/useRoles';
+import { IRole, PredefinedRoleType } from 'interfaces/role';
+import { RoleDescription } from '../RoleDescription/RoleDescription';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+
+const StyledRoleOption = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    '& > span:last-of-type': {
+        fontSize: theme.fontSizes.smallerBody,
+        color: theme.palette.text.secondary,
+    },
+}));
+
+interface IRoleSelectProps
+    extends Partial<AutocompleteProps<IRole, false, false, false>> {
+    value: IRole | null;
+    setValue: (role: IRole | null) => void;
+    roles: IRole[];
+    required?: boolean;
+}
+
+export const RoleSelect = ({
+    value,
+    setValue,
+    required,
+    roles,
+    ...rest
+}: IRoleSelectProps) => {
+    const renderRoleOption = (
+        props: React.HTMLAttributes<HTMLLIElement>,
+        option: IRole
+    ) => (
+        <li {...props}>
+            <StyledRoleOption>
+                <span>{option.name}</span>
+                <span>{option.description}</span>
+            </StyledRoleOption>
+        </li>
+    );
+
+    return (
+        <>
+            <Autocomplete
+                openOnFocus
+                size="small"
+                value={value}
+                onChange={(_, role) => setValue(role || null)}
+                options={roles}
+                renderOption={renderRoleOption}
+                getOptionLabel={option => option.name}
+                renderInput={params => (
+                    <TextField {...params} label="Role" required={required} />
+                )}
+                {...rest}
+            />
+            <ConditionallyRender
+                condition={Boolean(value)}
+                show={() => (
+                    <RoleDescription sx={{ marginTop: 1 }} roleId={value!.id} />
+                )}
+            />
+        </>
+    );
+};

frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx

@@ -35,7 +35,7 @@ import {
 } from 'utils/testIds';
 import { caseInsensitiveSearch } from 'utils/search';
 import { IServiceAccount } from 'interfaces/service-account';
-import { RoleSelect } from 'component/common/RoleSelect/RoleSelect';
+import { RoleSelect } from 'component/common/RoleSelect/RoleSelect2';
 import { PROJECT_ROLE_TYPE } from '@server/util/constants';
 
 const StyledForm = styled('form')(() => ({
@@ -433,7 +433,7 @@ export const ProjectAccessAssign = ({
                         <StyledAutocompleteWrapper>
                             <RoleSelect
                                 data-testid={PA_ROLE_ID}
-                                type={PROJECT_ROLE_TYPE}
+                                roles={roles}
                                 value={role}
                                 setValue={role => setRole(role || null)}
                             />