applications/drive/src/app/components/modals/ShareLinkModal/PermissionsDropdownMenu.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { IconName } from '@proton/components';
   6 import {
   7     Dropdown,
   8     DropdownButton,
   9     DropdownMenu,
  10     DropdownMenuButton,
  11     Icon,
  12     Tooltip,
  13     usePopperAnchor,
  14 } from '@proton/components';
  15 import { SHARE_EXTERNAL_INVITATION_STATE } from '@proton/shared/lib/drive/constants';
  16 import { SHARE_MEMBER_PERMISSIONS, SHARE_URL_PERMISSIONS } from '@proton/shared/lib/drive/permissions';
  17
  18 export const MenuItem = ({
  19     iconName,
  20     label,
  21     isSelected,
  22     onClick,
  23 }: {
  24     iconName?: IconName;
  25     label: ReactNode;
  26     isSelected?: boolean;
  27     onClick: () => void;
  28 }) => (
  29     <DropdownMenuButton className="text-left flex justify-space-between items-center flex-nowrap" onClick={onClick}>
  30         <span className="flex items-center flex-nowrap mr-14">
  31             {iconName && <Icon name={iconName} className="mr-2" />}
  32             {label}
  33         </span>
  34         {isSelected ? <Icon name="checkmark" /> : null}
  35     </DropdownMenuButton>
  36 );
  37
  38 export const permissionsOptions = [SHARE_MEMBER_PERMISSIONS.VIEWER, SHARE_MEMBER_PERMISSIONS.EDITOR];
  39 export const shareUrlPermissionsOptions = [SHARE_URL_PERMISSIONS.VIEWER, SHARE_URL_PERMISSIONS.EDITOR];
  40
  41 interface Props {
  42     selectedPermissions: number;
  43     onChangePermissions: (permissions: number) => void;
  44     onRemoveAccess?: () => void;
  45     onCopyShareInviteLink?: () => void;
  46     onResendInvitationEmail?: () => void;
  47     externalInvitationState?: SHARE_EXTERNAL_INVITATION_STATE;
  48     isLoading?: boolean;
  49     disabled?: boolean;
  50     autocompleteOptions?: boolean;
  51     publicSharingOptions?: boolean;
  52 }
  53
  54 export const PermissionsDropdownMenu = ({
  55     disabled,
  56     selectedPermissions,
  57     onChangePermissions,
  58     onRemoveAccess,
  59     onCopyShareInviteLink,
  60     onResendInvitationEmail,
  61     externalInvitationState,
  62     isLoading = false,
  63     autocompleteOptions = false,
  64     publicSharingOptions = false,
  65 }: Props) => {
  66     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  67
  68     const externalInvitationStateLabels: { [key in SHARE_EXTERNAL_INVITATION_STATE]: string } = {
  69         [SHARE_EXTERNAL_INVITATION_STATE.PENDING]: c('Status').t`Pending`,
  70         [SHARE_EXTERNAL_INVITATION_STATE.USER_REGISTERED]: c('Status').t`Accepted`,
  71     };
  72
  73     const memberPermissionsLabels = {
  74         [SHARE_MEMBER_PERMISSIONS.VIEWER]: c('Label').t`Viewer`,
  75         [SHARE_MEMBER_PERMISSIONS.EDITOR]: c('Label').t`Editor`,
  76     };
  77
  78     const memberPermissionsIcons: { [key in number]: IconName } = {
  79         [SHARE_MEMBER_PERMISSIONS.VIEWER]: 'eye',
  80         [SHARE_MEMBER_PERMISSIONS.EDITOR]: 'pencil',
  81     };
  82
  83     const memberChangePermissionsLabels = {
  84         [SHARE_MEMBER_PERMISSIONS.VIEWER]: c('Label').t`Make viewer`,
  85         [SHARE_MEMBER_PERMISSIONS.EDITOR]: c('Label').t`Make editor`,
  86     };
  87
  88     const publicSharingPermissionsLabels = {
  89         [SHARE_URL_PERMISSIONS.VIEWER]: c('Label').t`Viewer`,
  90         [SHARE_URL_PERMISSIONS.EDITOR]: c('Label').t`Editor`,
  91     };
  92
  93     const getPermissionsOptionLabel = (permissions: number) => {
  94         if (autocompleteOptions) {
  95             return memberPermissionsLabels[permissions];
  96         } else if (publicSharingPermissionsLabels) {
  97             return publicSharingPermissionsLabels[permissions];
  98         } else if (permissions === selectedPermissions) {
  99             return externalInvitationState
 100                 ? `${memberPermissionsLabels[permissions]} (${externalInvitationStateLabels[externalInvitationState]})`
 101                 : memberPermissionsLabels[permissions];
 102         } else {
 103             return memberChangePermissionsLabels[permissions];
 104         }
 105     };
 106
 107     return (
 108         <>
 109             <Tooltip
 110                 title={
 111                     externalInvitationState === SHARE_EXTERNAL_INVITATION_STATE.PENDING
 112                         ? c('Tooltip').t`We have sent them an invite to access the item.`
 113                         : ''
 114                 }
 115             >
 116                 <DropdownButton
 117                     disabled={disabled}
 118                     className="self-center"
 119                     ref={anchorRef}
 120                     isOpen={isOpen}
 121                     onClick={toggle}
 122                     hasCaret
 123                     shape="ghost"
 124                     size="small"
 125                     loading={isLoading}
 126                 >
 127                     {externalInvitationState
 128                         ? externalInvitationStateLabels[externalInvitationState]
 129                         : memberPermissionsLabels[selectedPermissions]}
 130                 </DropdownButton>
 131             </Tooltip>
 132             <Dropdown isOpen={isOpen} anchorRef={anchorRef} onClose={close}>
 133                 <DropdownMenu>
 134                     {(publicSharingOptions ? shareUrlPermissionsOptions : permissionsOptions).map((permissions) => {
 135                         const label = getPermissionsOptionLabel(permissions);
 136                         return (
 137                             <MenuItem
 138                                 key={permissions}
 139                                 isSelected={permissions === selectedPermissions}
 140                                 iconName={memberPermissionsIcons[permissions]}
 141                                 label={label}
 142                                 onClick={() => onChangePermissions(permissions)}
 143                             />
 144                         );
 145                     })}
 146                     {onResendInvitationEmail &&
 147                         (!externalInvitationState ||
 148                             externalInvitationState === SHARE_EXTERNAL_INVITATION_STATE.PENDING) && (
 149                             <MenuItem
 150                                 iconName="paper-plane-horizontal"
 151                                 label={c('Action').t`Resend invite`}
 152                                 onClick={onResendInvitationEmail}
 153                             />
 154                         )}
 155                     {onCopyShareInviteLink && (
 156                         <MenuItem
 157                             iconName="link"
 158                             label={c('Action').t`Copy invite link`}
 159                             onClick={onCopyShareInviteLink}
 160                         />
 161                     )}
 162                     {onRemoveAccess && (
 163                         <MenuItem iconName="cross-big" label={c('Action').t`Remove access`} onClick={onRemoveAccess} />
 164                     )}
 165                 </DropdownMenu>
 166             </Dropdown>
 167         </>
 168     );
 169 };