Feat project segments permissions (#3346)

- Adds `UPDATE_PROJECT_SEGMENT` permission checks;
- Allows `PermissionIconButton` to evaluate multiple permissions, just
like `PermissionButton`;
- Also includes a possible fix for `hasAccess` in `AccessProvider`.

frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx

@@ -13,7 +13,7 @@ import {
 } from 'hooks/useHasAccess';
 
 interface IPermissionIconButtonProps {
-    permission: string;
+    permission: string | string[];
     projectId?: string;
     environmentId?: string;
     className?: string;

frontend/src/component/providers/AccessProvider/AccessProvider.tsx

@@ -70,22 +70,12 @@ const checkPermission = (
     if (
         p.permission === permission &&
         (p.project === project || p.project === '*') &&
-        (p.environment === environment || p.environment === '*')
+        (!p.environment ||
+            p.environment === environment ||
+            p.environment === '*')
     ) {
         return true;
     }
 
-    if (
+    return p.permission === permission && !p.project && !p.environment;
-        p.permission === permission &&
-        (p.project === project || p.project === '*') &&
-        !Boolean(p.environment)
-    ) {
-        return true;
-    }
-
-    return (
-        p.permission === permission &&
-        p.project === undefined &&
-        p.environment === null
-    );
 };

frontend/src/component/providers/AccessProvider/permissions.ts

@@ -39,3 +39,4 @@ export const SKIP_CHANGE_REQUEST = 'SKIP_CHANGE_REQUEST';
 export const READ_PROJECT_API_TOKEN = 'READ_PROJECT_API_TOKEN';
 export const CREATE_PROJECT_API_TOKEN = 'CREATE_PROJECT_API_TOKEN';
 export const DELETE_PROJECT_API_TOKEN = 'DELETE_PROJECT_API_TOKEN';
+export const UPDATE_PROJECT_SEGMENT = 'UPDATE_PROJECT_SEGMENT';

frontend/src/component/segments/CreateSegmentButton/CreateSegmentButton.tsx

@@ -1,4 +1,7 @@
-import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions';
+import {
+    CREATE_SEGMENT,
+    UPDATE_PROJECT_SEGMENT,
+} from 'component/providers/AccessProvider/permissions';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { NAVIGATE_TO_CREATE_SEGMENT } from 'utils/testIds';
 import { useNavigate } from 'react-router-dom';
@@ -17,7 +20,8 @@ export const CreateSegmentButton = () => {
                     navigate('/segments/create');
                 }
             }}
-            permission={CREATE_SEGMENT}
+            permission={[CREATE_SEGMENT, UPDATE_PROJECT_SEGMENT]}
+            projectId={projectId}
             data-testid={NAVIGATE_TO_CREATE_SEGMENT}
         >
             New segment

frontend/src/component/segments/EditSegmentButton/EditSegmentButton.tsx

@@ -1,7 +1,10 @@
 import { ISegment } from 'interfaces/segment';
 import { Edit } from '@mui/icons-material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_SEGMENT } from 'component/providers/AccessProvider/permissions';
+import {
+    UPDATE_SEGMENT,
+    UPDATE_PROJECT_SEGMENT,
+} from 'component/providers/AccessProvider/permissions';
 import { useNavigate } from 'react-router-dom';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
@@ -24,7 +27,8 @@ export const EditSegmentButton = ({ segment }: IEditSegmentButtonProps) => {
                     navigate(`/segments/edit/${segment.id}`);
                 }
             }}
-            permission={UPDATE_SEGMENT}
+            permission={[UPDATE_SEGMENT, UPDATE_PROJECT_SEGMENT]}
+            projectId={projectId}
             tooltipProps={{ title: 'Edit segment' }}
         >
             <Edit data-loading />

frontend/src/component/segments/RemoveSegmentButton/RemoveSegmentButton.tsx

@@ -1,6 +1,9 @@
 import { ISegment } from 'interfaces/segment';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { DELETE_SEGMENT } from 'component/providers/AccessProvider/permissions';
+import {
+    DELETE_SEGMENT,
+    UPDATE_PROJECT_SEGMENT,
+} from 'component/providers/AccessProvider/permissions';
 import { Delete } from '@mui/icons-material';
 import { SEGMENT_DELETE_BTN_ID } from 'utils/testIds';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
@@ -10,12 +13,14 @@ import { SegmentDelete } from 'component/segments/SegmentDelete/SegmentDelete';
 import { useSegmentsApi } from 'hooks/api/actions/useSegmentsApi/useSegmentsApi';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useState } from 'react';
+import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
 interface IRemoveSegmentButtonProps {
     segment: ISegment;
 }
 
 export const RemoveSegmentButton = ({ segment }: IRemoveSegmentButtonProps) => {
+    const projectId = useOptionalPathParam('projectId');
     const { refetchSegments } = useSegments();
     const { deleteSegment } = useSegmentsApi();
     const { setToastData, setToastApiError } = useToast();
@@ -40,7 +45,8 @@ export const RemoveSegmentButton = ({ segment }: IRemoveSegmentButtonProps) => {
         <>
             <PermissionIconButton
                 onClick={() => toggleModal(true)}
-                permission={DELETE_SEGMENT}
+                permission={[DELETE_SEGMENT, UPDATE_PROJECT_SEGMENT]}
+                projectId={projectId}
                 tooltipProps={{ title: 'Remove segment' }}
                 data-testid={`${SEGMENT_DELETE_BTN_ID}_${segment.name}`}
             >