packages/components/containers/vpn/gateways/GatewayUserSelection.tsx

   1 import { c } from 'ttag';
   2
   3 import Field from '@proton/components/components/container/Field';
   4 import Row from '@proton/components/components/container/Row';
   5 import Checkbox from '@proton/components/components/input/Checkbox';
   6 import Option from '@proton/components/components/option/Option';
   7 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
   8 import type { SelectChangeEvent } from '@proton/components/components/selectTwo/select';
   9 import { SortingTableHeader } from '@proton/components/components/table/SortingTableHeader';
  10 import Table from '@proton/components/components/table/Table';
  11 import TableBody from '@proton/components/components/table/TableBody';
  12 import TableRow from '@proton/components/components/table/TableRow';
  13 import useSortedList from '@proton/components/hooks/useSortedList';
  14 import { SERVER_FEATURES, SORT_DIRECTION, USER_ROLES } from '@proton/shared/lib/constants';
  15 import noop from '@proton/utils/noop';
  16
  17 import type { GatewayDto } from './GatewayDto';
  18 import type { GatewayUser } from './GatewayUser';
  19
  20 type PartialGateway = Pick<GatewayDto, 'features' | 'userIds'>;
  21
  22 interface Props {
  23     loading: boolean;
  24     users: readonly GatewayUser[];
  25     model: PartialGateway;
  26     changeModel: (model: Partial<PartialGateway>) => void;
  27 }
  28
  29 export const GatewayUserSelection = ({ loading, users, model, changeModel }: Props) => {
  30     const { sortConfig, sortedList, toggleSort } = useSortedList(users as GatewayUser[], {
  31         key: 'Email',
  32         direction: SORT_DIRECTION.DESC,
  33     });
  34
  35     const handleFeatureChange = ({ value }: SelectChangeEvent<string>) => changeModel({ features: Number(value) });
  36
  37     const getSelectToggle = (id: string) =>
  38         loading
  39             ? noop
  40             : () =>
  41                   changeModel({
  42                       userIds:
  43                           model.userIds.indexOf(id) !== -1
  44                               ? model.userIds.filter((selected) => selected !== id)
  45                               : [...model.userIds, id],
  46                   });
  47
  48     const selectAllToggle = loading
  49         ? noop
  50         : () =>
  51               changeModel({
  52                   userIds: users.every(({ ID }) => model.userIds.indexOf(ID) !== -1) ? [] : users.map(({ ID }) => ID),
  53               });
  54
  55     return (
  56         <>
  57             <Row>
  58                 <Field>
  59                     <SelectTwo
  60                         value={`${model.features & SERVER_FEATURES.DOUBLE_RESTRICTION}`}
  61                         onChange={handleFeatureChange}
  62                     >
  63                         <Option value="0" title={c('Title').t`Every member of the organization can access`}>
  64                             {c('Option').t`The whole organization`}
  65                         </Option>
  66                         <Option
  67                             value={`${SERVER_FEATURES.DOUBLE_RESTRICTION}`}
  68                             title={c('Title').t`Custom selection of users`}
  69                         >
  70                             {c('Option').t`Select who can access...`}
  71                         </Option>
  72                     </SelectTwo>
  73                 </Field>
  74             </Row>
  75             {model.features & SERVER_FEATURES.DOUBLE_RESTRICTION ? (
  76                 <Table>
  77                     <SortingTableHeader
  78                         config={sortConfig}
  79                         onToggleSort={toggleSort as any}
  80                         cells={[
  81                             {
  82                                 content: (
  83                                     <Checkbox
  84                                         className="p-1"
  85                                         checked={users.every(({ ID }) => model.userIds.indexOf(ID) !== -1)}
  86                                         onChange={selectAllToggle}
  87                                     />
  88                                 ),
  89                                 className: 'w-custom',
  90                                 style: { '--w-custom': '5%' },
  91                             },
  92                             { key: 'Name', content: c('TableHeader').t`Name`, sorting: true },
  93                             { key: 'Email', content: c('TableHeader').t`Email`, sorting: true },
  94                             {
  95                                 key: 'Role',
  96                                 content: c('TableHeader').t`Role`,
  97                                 sorting: true,
  98                                 className: 'w-1/10',
  99                             },
 100                         ]}
 101                     />
 102                     <TableBody loading={!users} colSpan={4}>
 103                         {sortedList.map(({ ID, Name, Email, Role, Subscriber }: GatewayUser) => (
 104                             <TableRow
 105                                 key={`select-user--${ID}`}
 106                                 cells={[
 107                                     <Checkbox
 108                                         className="p-1"
 109                                         checked={model.userIds.indexOf(ID) !== -1}
 110                                         onChange={getSelectToggle(ID)}
 111                                     />,
 112                                     <div className="text-ellipsis">{Name}</div>,
 113                                     <div className="text-ellipsis">{Email}</div>,
 114                                     Role === USER_ROLES.ADMIN_ROLE
 115                                         ? Subscriber
 116                                             ? /* Current status of a user being admin of their organization */ c('Role')
 117                                                   .t`Primary admin`
 118                                             : /* Current status of a user being admin of their organization */ c('Role')
 119                                                   .t`Admin`
 120                                         : /* Current status of a user being simple member in their organization */ c(
 121                                               'Role'
 122                                           ).t`User`,
 123                                 ]}
 124                             />
 125                         ))}
 126                     </TableBody>
 127                 </Table>
 128             ) : undefined}
 129         </>
 130     );
 131 };
 132
 133 export default GatewayUserSelection;