Merge branch 'refactor/shared-permission-check-components' into 'main'

MargeBot · MargeBot · commit 97c88ca3cb66 · 2026-06-12T09:22:06.000Z
refactor: shared permission check components/helpers

See merge request web/clients!25647
diff --git a/packages/components/components/orgPermissions/PermissionBanner.tsx b/packages/components/components/orgPermissions/PermissionBanner.tsx
@@ -0,0 +1,21 @@
+import { c } from 'ttag';
+
+import { Banner, type BannerProps } from '@proton/atoms/Banner/Banner';
+
+interface Props extends Omit<BannerProps, 'children'> {
+    hasPermission: boolean;
+}
+
+const PermissionBanner = ({ hasPermission, variant = 'norm', noIcon = true, ...rest }: Props) => {
+    if (hasPermission) {
+        return null;
+    }
+
+    return (
+        <Banner variant={variant} noIcon={noIcon} {...rest}>
+            {c('Info').t`Editing requires permission`}
+        </Banner>
+    );
+};
+
+export default PermissionBanner;
diff --git a/packages/components/components/orgPermissions/PermissionTooltip.tsx b/packages/components/components/orgPermissions/PermissionTooltip.tsx
@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+import { c } from 'ttag';
+
+import { Tooltip, type Props as TooltipProps } from '@proton/atoms/Tooltip/Tooltip';
+
+export interface Props extends Omit<TooltipProps, 'children' | 'title'> {
+    hasPermission: boolean;
+    children: ReactNode;
+    openDelay?: number;
+    className?: string;
+    wrapperClassName?: string;
+}
+
+const PermissionTooltip = ({
+    hasPermission,
+    children,
+    openDelay = 100,
+    className,
+    wrapperClassName,
+    ...rest
+}: Props) => (
+    <Tooltip
+        {...rest}
+        title={hasPermission ? undefined : c('Label').t`You don't have permissions`}
+        openDelay={openDelay}
+        tooltipClassName={className}
+    >
+        <span className={wrapperClassName}>{children}</span>
+    </Tooltip>
+);
+
+export default PermissionTooltip;
diff --git a/packages/components/components/orgPermissions/index.ts b/packages/components/components/orgPermissions/index.ts
@@ -0,0 +1,3 @@
+export { default as PermissionBanner } from './PermissionBanner';
+export { default as PermissionTooltip } from './PermissionTooltip';
+export { default as withPermissionGuard } from './withPermissionGuard';
diff --git a/packages/components/components/orgPermissions/withPermissionGuard.tsx b/packages/components/components/orgPermissions/withPermissionGuard.tsx
@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+
+import { useOrgPermissions } from '@proton/account/userPermissions/hooks';
+import type { ButtonLikeOwnProps } from '@proton/atoms/Button/ButtonLike';
+import type { Permission } from '@proton/shared/lib/interfaces/UserPermission';
+
+import PermissionTooltip, { type Props as PermissionTooltipProps } from './PermissionTooltip';
+
+type ExtendedTooltipProps = Omit<PermissionTooltipProps, 'hasPermission' | 'children'>;
+
+/**
+ * HOC that guards a ButtonLike component behind one or more org permissions.
+ *
+ * When the user lacks permission, the component is disabled and a tooltip is shown.
+ * Multiple permissions use AND semantics — all must be held.
+ * Defaults to blocked (`hasPermission = false`) while permissions are loading.
+ *
+ * Only works with ButtonLike components: `disabled` is required to block interaction,
+ * and PermissionTooltip's span wrapper is needed to capture mouse events on disabled elements.
+ *
+ * @example
+ * const GuardedButton = withPermissionGuard('account.user.create')(Button);
+ * const GuardedButton = withPermissionGuard(['account.user.create', 'account.user.update'])(Button);
+ */
+const withPermissionGuard =
+    (constraints: Permission | Permission[]) =>
+    <P extends ButtonLikeOwnProps>(Component: ComponentType<P>) => {
+        const WithPermissionGuard = (props: P & { tooltip?: ExtendedTooltipProps }) => {
+            const [permissions] = useOrgPermissions();
+            const hasPermission = Array.isArray(constraints)
+                ? permissions !== null && constraints.every((permission) => permissions[permission])
+                : (permissions?.[constraints] ?? false);
+
+            const { tooltip, ...rest } = props;
+            const overrideProps = {
+                ...rest,
+                disabled: props.disabled || !hasPermission,
+            } as unknown as P;
+
+            return (
+                <PermissionTooltip {...tooltip} hasPermission={hasPermission}>
+                    <Component {...overrideProps} />
+                </PermissionTooltip>
+            );
+        };
+
+        WithPermissionGuard.displayName = `WithPermissionGuard(${Component.displayName ?? Component.name})`;
+
+        return WithPermissionGuard;
+    };
+
+export default withPermissionGuard;
diff --git a/packages/components/containers/members/UsersAndAddressesSection/MembersTableHeader.tsx b/packages/components/containers/members/UsersAndAddressesSection/MembersTableHeader.tsx
@@ -3,8 +3,8 @@ import type { ReactNode } from 'react';
 import { c } from 'ttag';
 
 import { Button } from '@proton/atoms/Button/Button';
-import { Tooltip } from '@proton/atoms/Tooltip/Tooltip';
 import Info from '@proton/components/components/link/Info';
+import withPermissionGuard from '@proton/components/components/orgPermissions/withPermissionGuard';
 import { SetupOrgSpotlight } from '@proton/components/containers/account/spotlights/passB2bOnboardingSpotlights/PassB2bOnboardingSpotlights';
 import {
     getInvitationAcceptLimit,
@@ -13,6 +13,9 @@ import {
 import type { UseUserMemberActions } from '@proton/components/containers/members/UsersAndAddressesSection/useMemberActions';
 import type { APP_NAMES } from '@proton/shared/lib/constants';
 
+const GuardedAddUserButton = withPermissionGuard('account.user.create')(Button);
+const GuardedAddAddressButton = withPermissionGuard('account.user.update')(Button);
+
 export const MembersTableHeader = ({
     app,
     searchInput,
@@ -23,13 +26,9 @@ export const MembersTableHeader = ({
     membersHook: UseUserMemberActions;
 }) => {
     const createUserButtonWithTooltip = (
-        <Tooltip title={!meta.canAddUser ? c('Label').t`You don't have permissions` : undefined} openDelay={100}>
-            <span>
-                <Button color="norm" disabled={meta.disableAddUserButton} onClick={actions.handleAddUser}>
-                    {c('Action').t`Add user`}
-                </Button>
-            </span>
-        </Tooltip>
+        <GuardedAddUserButton color="norm" disabled={meta.disableAddUserButton} onClick={actions.handleAddUser}>
+            {c('Action').t`Add user`}
+        </GuardedAddUserButton>
     );
     return (
         <div className="mb-4 flex items-start">
@@ -43,20 +42,13 @@ export const MembersTableHeader = ({
                 {meta.showAddAddress && (
                     <>
                         {meta.isOrgAFamilyPlan ? (
-                            <Tooltip
-                                title={!meta.canAddUser ? c('Label').t`You don't have permissions` : undefined}
-                                openDelay={100}
+                            <GuardedAddUserButton
+                                color="norm"
+                                disabled={meta.disableInviteUserButton}
+                                onClick={actions.handleInviteUser}
                             >
-                                <span>
-                                    <Button
-                                        color="norm"
-                                        disabled={meta.disableInviteUserButton}
-                                        onClick={actions.handleInviteUser}
-                                    >
-                                        {c('Action').t`Invite user`}
-                                    </Button>
-                                </span>
-                            </Tooltip>
+                                {c('Action').t`Invite user`}
+                            </GuardedAddUserButton>
                         ) : (
                             createUserButtonWithTooltip
                         )}
@@ -75,20 +67,13 @@ export const MembersTableHeader = ({
                             ))}
 
                         {meta.hasMaxAddresses && (
-                            <Tooltip
-                                title={!meta.canUpdateUser ? c('Label').t`You don't have permissions` : undefined}
-                                openDelay={100}
+                            <GuardedAddAddressButton
+                                shape="outline"
+                                disabled={meta.disableAddAddressButton}
+                                onClick={() => actions.handleAddAddress()}
                             >
-                                <span>
-                                    <Button
-                                        shape="outline"
-                                        disabled={meta.disableAddAddressButton}
-                                        onClick={() => actions.handleAddAddress()}
-                                    >
-                                        {c('Action').t`Add address`}
-                                    </Button>
-                                </span>
-                            </Tooltip>
+                                {c('Action').t`Add address`}
+                            </GuardedAddAddressButton>
                         )}
                     </>
                 )}
diff --git a/packages/components/containers/members/UsersAndAddressesSection/useMemberActions.tsx b/packages/components/containers/members/UsersAndAddressesSection/useMemberActions.tsx
@@ -84,7 +84,7 @@ export const useMemberActions = ({
     const { value: memberRolesMap } = useMemberRoles({ members });
     const api = useSilentApi();
     const dispatch = useDispatch();
-    const [permissions, loadingPermissions] = useOrgPermissions();
+    const [, loadingPermissions] = useOrgPermissions();
 
     const {
         passOnboardingSpotlights: { setupOrgSpotlight },
@@ -165,29 +165,22 @@ export const useMemberActions = ({
         hasPassBusiness(subscription) ||
         hasVPNPassProfessional(subscription);
 
-    const canAddUser = !!permissions?.['account.user.create'];
     const disableAddUserButton =
         loadingSubscription ||
         loadingOrganization ||
         loadingCustomDomains ||
         loadingPermissions ||
-        (organization?.UsedMembers || 0) >= (organization?.MaxMembers || 0) ||
-        !canAddUser;
+        (organization?.UsedMembers || 0) >= (organization?.MaxMembers || 0);
 
     const showAddAddress = !hasExternalMemberCapableB2BPlan || hasPassB2BPlan || hasMeetB2BPlanAndVerifiedCustomDomain;
 
     const hasReachedInvitationLimit = organization?.InvitationsRemaining === 0;
     const disableInviteUserButton =
-        loadingSubscription || loadingOrganization || loadingCustomDomains || hasReachedInvitationLimit || !canAddUser;
+        loadingSubscription || loadingOrganization || loadingCustomDomains || hasReachedInvitationLimit;
 
     const loadingAddAddresses = loadingOrganization || loadingCustomDomains || loadingMembers;
-    const canUpdateUser = !!permissions?.['account.user.update'];
     const disableAddAddressButton =
-        loadingAddAddresses ||
-        loadingPermissions ||
-        organization?.State === ORGANIZATION_STATE.DELINQUENT ||
-        !canUpdateUser;
-    const canDeleteUser = !!permissions?.['account.user.delete'];
+        loadingAddAddresses || loadingPermissions || organization?.State === ORGANIZATION_STATE.DELINQUENT;
 
     const hasSetupActiveOrganizationWithKeys =
         organization?.State === ORGANIZATION_STATE.ACTIVE && hasOrganizationSetupWithKeys(organization);
@@ -536,12 +529,9 @@ export const useMemberActions = ({
         isOrgAFamilyPlan,
         useEmail,
         hasExternalMemberCapableB2BPlan,
-        canAddUser,
         disableAddUserButton,
         showAddAddress,
         canInviteProtonUsers,
-        canUpdateUser,
-        canDeleteUser,
         disableInviteUserButton,
         disableAddAddressButton,
         hasSetupActiveOrganizationWithKeys,
diff --git a/packages/components/containers/organization/AuthenticationLogs.tsx b/packages/components/containers/organization/AuthenticationLogs.tsx
@@ -5,11 +5,10 @@ import { c } from 'ttag';
 
 import { useMembers } from '@proton/account/members/hooks';
 import { organizationActions } from '@proton/account/organization';
-import { useOrgPermissions } from '@proton/account/userPermissions/hooks';
 import { Banner } from '@proton/atoms/Banner/Banner';
 import { Button } from '@proton/atoms/Button/Button';
-import { Tooltip } from '@proton/atoms/Tooltip/Tooltip';
 import AddressesInput, { AddressesInputItem } from '@proton/components/components/addressesInput/AddressesInput';
+import withPermissionGuard from '@proton/components/components/orgPermissions/withPermissionGuard';
 import DateInput from '@proton/components/components/input/DateInput';
 import Label from '@proton/components/components/label/Label';
 import Info from '@proton/components/components/link/Info';
@@ -47,6 +46,8 @@ import { convertEnhancedMembersToContactEmails } from './groups/helpers';
 import useAuthLogsDateFilter from './useAuthLogsFilter';
 import useOrgAuthLogs from './useOrgAuthLogs';
 
+const GuardedExportButton = withPermissionGuard('account.activity_log.export')(Button);
+
 interface Props {
     organization?: OrganizationExtended;
     activityMonitorSection?: boolean;
@@ -62,8 +63,6 @@ const AuthenticationLogs = ({
 }: Props) => {
     const api = useApi();
     const [members] = useMembers();
-    const [permissions] = useOrgPermissions();
-    const canExport = !!permissions?.['account.activity_log.export'];
     const [submitting, withSubmitting] = useLoading();
     const { createNotification } = useNotifications();
     const { page, onNext, onPrevious, onSelect, reset } = usePaginationAsync(1);
@@ -355,25 +354,18 @@ const AuthenticationLogs = ({
                                         <IcArrowRotateRight className="mr-2" />
                                         {c('Action').t`Refresh`}
                                     </Button>
-                                    <Tooltip
-                                        title={canExport ? null : c('Label').t`You don't have permissions`}
-                                        openDelay={100}
+                                    <GuardedExportButton
+                                        shape="outline"
+                                        className="self-end"
+                                        onClick={() =>
+                                            withLoadingDownload(handleDownload(authLogs, organization))
+                                        }
+                                        loading={loadingDownload}
+                                        tooltip={{ wrapperClassName: 'inline-flex items-center' }}
                                     >
-                                        <span className="inline-flex items-center">
-                                            <Button
-                                                shape="outline"
-                                                className="self-end"
-                                                onClick={() =>
-                                                    withLoadingDownload(handleDownload(authLogs, organization))
-                                                }
-                                                loading={loadingDownload}
-                                                disabled={!canExport}
-                                            >
-                                                <IcArrowDownLine className="mr-2" />
-                                                {c('Action').t`Export`}
-                                            </Button>
-                                        </span>
-                                    </Tooltip>
+                                        <IcArrowDownLine className="mr-2" />
+                                        {c('Action').t`Export`}
+                                    </GuardedExportButton>
                                 </div>
                             </form>
                             <div className="flex mb-4">{items.slice(0, 50)}</div>
diff --git a/packages/components/containers/organization/OrganizationPasswordPoliciesSection.tsx b/packages/components/containers/organization/OrganizationPasswordPoliciesSection.tsx
@@ -5,9 +5,8 @@ import { c } from 'ttag';
 
 import { organizationActions } from '@proton/account/organization';
 import { useOrgPermissions } from '@proton/account/userPermissions/hooks';
-import { Banner } from '@proton/atoms/Banner/Banner';
 import { Button } from '@proton/atoms/Button/Button';
-import { Tooltip } from '@proton/atoms/Tooltip/Tooltip';
+import { PermissionBanner, PermissionTooltip } from '@proton/components/components/orgPermissions';
 import RadioGroup from '@proton/components/components/input/RadioGroup';
 import Info from '@proton/components/components/link/Info';
 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
@@ -262,11 +261,7 @@ const OrganizationPasswordPoliciesSection = ({ organization }: OrganizationProto
                 {c('Info')
                     .t`You can enforce the password rules members of your organization will use when they create or reset the password to their ${BRAND_NAME} Account.`}
             </SettingsParagraph>
-            {!canSavePolicy && (
-                <Banner variant="norm" noIcon className="mb-4 max-w-custom" style={{ '--max-w-custom': '43em' }}>
-                    {c('Info').t`Editing requires permission`}
-                </Banner>
-            )}
+            <PermissionBanner hasPermission={!!canSavePolicy} className="mb-4 max-w-custom" style={{ '--max-w-custom': '43em' }} />
 
             <form
                 name="org-password-policies"
@@ -321,13 +316,11 @@ const OrganizationPasswordPoliciesSection = ({ organization }: OrganizationProto
                     />
                 ))}
 
-                <Tooltip title={!canSavePolicy ? c('Label').t`You don't have permissions` : undefined}>
-                    <span>
-                        <Button type="submit" color="norm" disabled={!canSave || !canSavePolicy} loading={loading}>
-                            {c('Action').t`Save`}
-                        </Button>
-                    </span>
-                </Tooltip>
+                <PermissionTooltip hasPermission={!!canSavePolicy}>
+                    <Button type="submit" color="norm" disabled={!canSave || !canSavePolicy} loading={loading}>
+                        {c('Action').t`Save`}
+                    </Button>
+                </PermissionTooltip>
             </form>
         </>
     );
diff --git a/packages/components/containers/organization/OrganizationTwoFAEnforcementSection.tsx b/packages/components/containers/organization/OrganizationTwoFAEnforcementSection.tsx
diff --git a/packages/components/containers/organization/OrganizationTwoFARemindersSection.tsx b/packages/components/containers/organization/OrganizationTwoFARemindersSection.tsx
diff --git a/packages/components/containers/organization/retentionPolicy/RetentionPolicyTable.tsx b/packages/components/containers/organization/retentionPolicy/RetentionPolicyTable.tsx
diff --git a/packages/components/index.ts b/packages/components/index.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export { default as PermissionBanner } from './PermissionBanner';`
	`2`	`+export { default as PermissionTooltip } from './PermissionTooltip';`
	`3`	`+export { default as withPermissionGuard } from './withPermissionGuard';`