applications/pass/src/app/Views/Sidebar/Menu.tsx

   1 import { type FC, useMemo } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { AccountSwitcherTooltip } from 'proton-pass-web/app/Auth/AccountSwitcher';
   5 import { useAuthService } from 'proton-pass-web/app/Auth/AuthServiceProvider';
   6 import { checkAuthSwitch, useAvailableSessions } from 'proton-pass-web/app/Auth/AuthSwitchProvider';
   7 import { c } from 'ttag';
   8
   9 import { Button, ButtonLike, Scroll } from '@proton/atoms';
  10 import { Icon } from '@proton/components';
  11 import { UserPanel } from '@proton/pass/components/Account/UserPanel';
  12 import { DropdownMenuButton } from '@proton/pass/components/Layout/Dropdown/DropdownMenuButton';
  13 import { AdminPanelButton } from '@proton/pass/components/Menu/B2B/AdminPanelButton';
  14 import { OnboardingButton } from '@proton/pass/components/Menu/B2B/OnboardingButton';
  15 import { MonitorButton } from '@proton/pass/components/Menu/Monitor/MonitorButton';
  16 import { SecureLinkButton } from '@proton/pass/components/Menu/SecureLink/SecureLinkButton';
  17 import { Submenu } from '@proton/pass/components/Menu/Submenu';
  18 import { VaultMenu } from '@proton/pass/components/Menu/Vault/VaultMenu';
  19 import { useNavigation } from '@proton/pass/components/Navigation/NavigationProvider';
  20 import { getLocalPath } from '@proton/pass/components/Navigation/routing';
  21 import { useOnboarding } from '@proton/pass/components/Onboarding/OnboardingProvider';
  22 import { OnboardingType } from '@proton/pass/components/Onboarding/Provider/OnboardingContext';
  23 import { useOrganization } from '@proton/pass/components/Organization/OrganizationProvider';
  24 import { useVaultActions } from '@proton/pass/components/Vault/VaultActionsProvider';
  25 import { useFeatureFlag } from '@proton/pass/hooks/useFeatureFlag';
  26 import { useMenuItems } from '@proton/pass/hooks/useMenuItems';
  27 import { LockMode } from '@proton/pass/lib/auth/lock/types';
  28 import { selectLockMode, selectPassPlan, selectPlanDisplayName, selectUser } from '@proton/pass/store/selectors';
  29 import { PassFeature } from '@proton/pass/types/api/features';
  30 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  31 import clsx from '@proton/utils/clsx';
  32
  33 import { MenuActions } from './MenuActions';
  34
  35 export const Menu: FC<{ onToggle: () => void }> = ({ onToggle }) => {
  36     const authService = useAuthService();
  37     const onboarding = useOnboarding();
  38     const org = useOrganization();
  39
  40     const menu = useMenuItems({ onAction: onToggle });
  41     const vaultActions = useVaultActions();
  42
  43     const accountSwitchEnabled = useFeatureFlag(PassFeature.PassAccountSwitchV1);
  44     const authSwitchEnabled = useMemo(() => accountSwitchEnabled || checkAuthSwitch(), [accountSwitchEnabled]);
  45     const sessions = useAvailableSessions();
  46
  47     const { navigate, filters, matchTrash } = useNavigation();
  48     const { selectedShareId } = filters;
  49
  50     const user = useSelector(selectUser);
  51     const lockMode = useSelector(selectLockMode);
  52     const passPlan = useSelector(selectPassPlan);
  53     const planDisplayName = useSelector(selectPlanDisplayName);
  54
  55     const canLock = lockMode !== LockMode.NONE;
  56
  57     return (
  58         <div className="flex flex-column flex-nowrap justify-space-between flex-1 overflow-auto gap-2">
  59             <Button
  60                 icon
  61                 size="medium"
  62                 color="norm"
  63                 onClick={vaultActions.create}
  64                 shape="ghost"
  65                 title={c('Action').t`Create a new vault`}
  66                 className="flex items-center justify-space-between flex-nowrap py-2 pl-3 px-2 mx-3"
  67             >
  68                 <div className="flex text-ellipsis">{c('Label').t`Vaults`}</div>
  69                 <Icon name="plus" alt={c('Action').t`Create a new vault`} />
  70             </Button>
  71
  72             <Scroll className="flex flex-1 h-1/2 min-h-custom" style={{ '--min-h-custom': '5em' }}>
  73                 <div className="flex mx-3">
  74                     <VaultMenu selectedShareId={selectedShareId} inTrash={matchTrash} onSelect={vaultActions.select} />
  75                 </div>
  76             </Scroll>
  77
  78             <div className="flex flex-column flex-nowrap pb-2">
  79                 {onboarding.type === OnboardingType.B2B && onboarding.enabled && <OnboardingButton />}
  80                 <SecureLinkButton
  81                     className="rounded"
  82                     activeClassName="sidebar-item-selected"
  83                     parentClassName="mx-3"
  84                     onClick={() => navigate(getLocalPath('secure-links'))}
  85                 />
  86                 {canLock && (
  87                     <DropdownMenuButton
  88                         onClick={() =>
  89                             authService.lock(lockMode, {
  90                                 broadcast: true,
  91                                 soft: false,
  92                                 userInitiated: true,
  93                             })
  94                         }
  95                         label={c('Action').t`Lock ${PASS_APP_NAME}`}
  96                         icon="lock"
  97                         parentClassName="mx-3"
  98                         className="rounded"
  99                     />
 100                 )}
 101                 {org && org.b2bAdmin && <AdminPanelButton {...org.organization} />}
 102                 <hr className="my-2 mx-4" aria-hidden="true" />
 103                 <MonitorButton />
 104                 <Submenu
 105                     icon="bolt"
 106                     label={c('Action').t`Advanced`}
 107                     items={menu.advanced}
 108                     headerClassname="mx-3 pr-2 py-1"
 109                     contentClassname="mx-3"
 110                 />
 111                 <Submenu
 112                     icon="bug"
 113                     label={c('Action').t`Feedback`}
 114                     items={menu.feedback}
 115                     headerClassname="mx-3 pr-2 py-1"
 116                     contentClassname="mx-3"
 117                 />
 118                 <Submenu
 119                     icon="mobile"
 120                     label={c('Action').t`Get mobile apps`}
 121                     items={menu.download}
 122                     headerClassname="mx-3 pr-2 py-1"
 123                     contentClassname="mx-3"
 124                 />
 125                 <hr className="my-2 mx-4" aria-hidden="true" />
 126
 127                 <div className="flex justify-space-between items-center flex-nowrap gap-1 pl-3 pr-5">
 128                     <AccountSwitcherTooltip sessions={authSwitchEnabled ? sessions : []}>
 129                         {({ anchorRef, toggle }) => (
 130                             <ButtonLike
 131                                 ref={anchorRef}
 132                                 onClick={toggle}
 133                                 shape="ghost"
 134                                 className={clsx('flex-1', !authSwitchEnabled && 'pointer-events-none')}
 135                                 size="small"
 136                             >
 137                                 <UserPanel
 138                                     email={user?.Email ?? ''}
 139                                     name={user?.DisplayName ?? user?.Name ?? ''}
 140                                     plan={passPlan}
 141                                     planName={planDisplayName}
 142                                 />
 143                             </ButtonLike>
 144                         )}
 145                     </AccountSwitcherTooltip>
 146                     <MenuActions />
 147                 </div>
 148             </div>
 149         </div>
 150     );
 151 };