message: chore(origin-ui-core): simpler role selection for Organization Invitations
diff: @@ -3,17 +3,25 @@ import { useDispatch, useSelector } from 'react-redux';
  import { Formik, Form, FormikHelpers } from 'formik';
  import * as Yup from 'yup';
  -import { Paper, Grid, Button, useTheme, makeStyles, createStyles } from '@material-ui/core';
  +import {
  + Paper,
  + Grid,
  + Button,
  + useTheme,
  + makeStyles,
  + createStyles,
  + FormControl,
  + InputLabel,
  + Select,
  + FilledInput,
  + MenuItem
  +} from '@material-ui/core';
  import { OrganizationRole, Role } from '@energyweb/origin-backend-core';
  import { showNotification, NotificationType } from '../../utils/notifications';
  import { setLoading } from '../../features/general/actions';
  import { FormInput } from '../Form/FormInput';
  import { getOffChainDataSource } from '../../features/general/selectors';
  -import {
  - MultiSelectAutocomplete,
  - IAutocompleteMultiSelectOptionType
  -} from '../MultiSelectAutocomplete';
  import { roleNames } from './Organization';
  import { useTranslation } from '../../utils';
  @@ -89,20 +97,7 @@ export function OrganizationInvite() {
  const fieldDisabled = isSubmitting;
  const buttonDisabled = isSubmitting || !isValid;
  - const supportedRoles: IAutocompleteMultiSelectOptionType[] = Object.keys(
  - roleNames
  - ).map((key) => ({ label: t(roleNames[key]), value: key.toString() }));
  -
  - let selectedRole: IAutocompleteMultiSelectOptionType[];
  - if (values.role) {
  - const defaultRole = supportedRoles.find(
  - (role) => role.value === values.role.toString()
  - );
  - selectedRole = [defaultRole];
  - } else {
  - selectedRole = [];
  - }
  -
  + const selectedRole: Role = values.role;
  return (
  <Form translate="">
  <Grid container spacing={3}>
  @@ -116,27 +111,24 @@ export function OrganizationInvite() {
  />
  </Grid>
  <Grid item xs={6}>
  - <MultiSelectAutocomplete
  - label="Role"
  - placeholder=""
  - options={supportedRoles.map((role) => ({
  - label: role.label,
  - value: role.value.toString()
  - }))}
  - onChange={(
  - selection: IAutocompleteMultiSelectOptionType[]
  - ) => {
  - const [selected1, selected2] = selection;
  - const selectedElement = selectedRole.length
  - ? selected2
  - : selected1;
  - return setFieldValue('role', selectedElement?.value);
  - }}
  - selectedValues={selectedRole}
  - className="mt-3"
  - disabled={fieldDisabled}
  - required={true}
  - />
  + <FormControl fullWidth={true} variant="filled" className="mt-3">
  + <InputLabel>Role</InputLabel>
  + <Select
  + value={selectedRole}
  + onChange={(e) =>
  + setFieldValue('role', e.target.value as number)
  + }
  + fullWidth
  + variant="filled"
  + input={<FilledInput />}
  + >
  + {Object.keys(roleNames).map((role) => (
  + <MenuItem key={role} value={role}>
  + {t(roleNames[role])}
  + </MenuItem>
  + ))}
  + </Select>
  + </FormControl>
  </Grid>
  </Grid>
  