[OPIK-4716] Annotation queue edit permission (#5878)

* [OPIK-4716] Add permission

* [OPIK-4716] Implement guards

Author: anastasiapyzhik

apps/opik-frontend/src/plugins/comet/PermissionsProvider.tsx

@@ -20,6 +20,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
     canCreateProjects,
     canDeleteProjects,
     canCreateAnnotationQueues,
+    canEditAnnotationQueues,
     canDeleteAnnotationQueues,
     canDeleteTraces,
     canDeletePrompts,
@@ -50,6 +51,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
         canCreateProjects,
         canDeleteProjects,
         canCreateAnnotationQueues,
+        canEditAnnotationQueues,
         canDeleteAnnotationQueues,
         canDeleteTraces,
         canDeletePrompts,
@@ -78,6 +80,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
       canCreateProjects,
       canDeleteProjects,
       canCreateAnnotationQueues,
+      canEditAnnotationQueues,
       canDeleteAnnotationQueues,
       canDeleteTraces,
       canDeletePrompts,

apps/opik-frontend/src/plugins/comet/types.ts

@@ -74,6 +74,7 @@ export enum ManagementPermissionsNames {
   DATASET_EDIT = "dataset_edit",
   DATASET_DELETE = "dataset_delete",
   ANNOTATION_QUEUE_CREATE = "annotation_queue_create",
+  ANNOTATION_QUEUE_EDIT = "annotation_queue_edit",
   ANNOTATION_QUEUE_DELETE = "annotation_queue_delete",
   TRACE_TAG = "trace_tag",
   TRACE_DELETE = "trace_delete",

apps/opik-frontend/src/plugins/comet/useUserPermission.ts

@@ -141,6 +141,12 @@ const useUserPermission = (config?: { enabled?: boolean }) => {
     [checkNullablePermission],
   );
 
+  const canEditAnnotationQueues = useMemo(
+    () =>
+      checkNullablePermission(ManagementPermissionsNames.ANNOTATION_QUEUE_EDIT),
+    [checkNullablePermission],
+  );
+
   const canDeleteAnnotationQueues = useMemo(
     () =>
       checkNullablePermission(
@@ -233,6 +239,7 @@ const useUserPermission = (config?: { enabled?: boolean }) => {
     canCreateProjects,
     canDeleteProjects,
     canCreateAnnotationQueues,
+    canEditAnnotationQueues,
     canDeleteAnnotationQueues,
     canDeleteTraces,
     canDeletePrompts,

apps/opik-frontend/src/types/permissions.ts

@@ -11,6 +11,7 @@ export interface Permissions {
   canDeleteDatasets: boolean;
   canDeleteProjects: boolean;
   canCreateAnnotationQueues: boolean;
+  canEditAnnotationQueues: boolean;
   canDeleteAnnotationQueues: boolean;
   canDeleteTraces: boolean;
   canDeletePrompts: boolean;
@@ -44,6 +45,7 @@ export const DEFAULT_PERMISSIONS: PermissionsContextValue = {
     canDeleteDatasets: true,
     canDeleteProjects: true,
     canCreateAnnotationQueues: true,
+    canEditAnnotationQueues: true,
     canDeleteAnnotationQueues: true,
     canDeleteTraces: true,
     canDeletePrompts: true,

apps/opik-frontend/src/v1/pages-shared/annotation-queues/AddEditAnnotationQueueDialog.tsx

@@ -88,7 +88,7 @@ const AddEditAnnotationQueueDialog: React.FunctionComponent<
   queue: defaultQueue,
 }) => {
   const {
-    permissions: { canCreateAnnotationQueues },
+    permissions: { canCreateAnnotationQueues, canEditAnnotationQueues },
   } = usePermissions();
 
   const [isNestedDialogOpen, setIsNestedDialogOpen] = useState(false);
@@ -163,7 +163,9 @@ const AddEditAnnotationQueueDialog: React.FunctionComponent<
 
   return (
     <Dialog
-      open={open && (isEdit || canCreateAnnotationQueues)}
+      open={
+        open && (isEdit ? canEditAnnotationQueues : canCreateAnnotationQueues)
+      }
       onOpenChange={setOpen}
     >
       <DialogContent

apps/opik-frontend/src/v1/pages-shared/annotation-queues/AnnotationQueueRowActionsCell.tsx

@@ -33,7 +33,7 @@ const AnnotationQueueRowActionsCell: React.FunctionComponent<
   const { mutate } = useAnnotationQueueDeleteMutation();
 
   const {
-    permissions: { canDeleteAnnotationQueues },
+    permissions: { canEditAnnotationQueues, canDeleteAnnotationQueues },
   } = usePermissions();
 
   const handleCopySMELink = useCallback(() => {
@@ -95,10 +95,12 @@ const AnnotationQueueRowActionsCell: React.FunctionComponent<
             <Copy className="mr-2 size-4" />
             Copy sharing link
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={handleEdit}>
-            <Pencil className="mr-2 size-4" />
-            Edit
-          </DropdownMenuItem>
+          {canEditAnnotationQueues && (
+            <DropdownMenuItem onClick={handleEdit}>
+              <Pencil className="mr-2 size-4" />
+              Edit
+            </DropdownMenuItem>
+          )}
           {canDeleteAnnotationQueues && (
             <>
               <DropdownMenuSeparator />

apps/opik-frontend/src/v1/pages/AnnotationQueuePage/EditAnnotationQueueButton.tsx

@@ -4,6 +4,7 @@ import AddEditAnnotationQueueDialog from "@/v1/pages-shared/annotation-queues/Ad
 import { Button } from "@/ui/button";
 import { Pencil } from "lucide-react";
 import TooltipWrapper from "@/shared/TooltipWrapper/TooltipWrapper";
+import { usePermissions } from "@/contexts/PermissionsContext";
 
 interface EditAnnotationQueueButtonProps {
   annotationQueue: AnnotationQueue;
@@ -12,6 +13,10 @@ interface EditAnnotationQueueButtonProps {
 const EditAnnotationQueueButton: React.FunctionComponent<
   EditAnnotationQueueButtonProps
 > = ({ annotationQueue }) => {
+  const {
+    permissions: { canEditAnnotationQueues },
+  } = usePermissions();
+
   const resetKeyRef = useRef(0);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
 
@@ -20,6 +25,8 @@ const EditAnnotationQueueButton: React.FunctionComponent<
     resetKeyRef.current = resetKeyRef.current + 1;
   }, []);
 
+  if (!canEditAnnotationQueues) return null;
+
   return (
     <>
       <AddEditAnnotationQueueDialog

apps/opik-frontend/src/v2/pages-shared/annotation-queues/AddEditAnnotationQueueDialog.tsx

@@ -87,7 +87,7 @@ const AddEditAnnotationQueueDialog: React.FunctionComponent<
   queue: defaultQueue,
 }) => {
   const {
-    permissions: { canCreateAnnotationQueues },
+    permissions: { canCreateAnnotationQueues, canEditAnnotationQueues },
   } = usePermissions();
 
   const [isNestedDialogOpen, setIsNestedDialogOpen] = useState(false);
@@ -162,7 +162,9 @@ const AddEditAnnotationQueueDialog: React.FunctionComponent<
 
   return (
     <Dialog
-      open={open && (isEdit || canCreateAnnotationQueues)}
+      open={
+        open && (isEdit ? canEditAnnotationQueues : canCreateAnnotationQueues)
+      }
       onOpenChange={setOpen}
     >
       <DialogContent

apps/opik-frontend/src/v2/pages-shared/annotation-queues/AnnotationQueueRowActionsCell.tsx

@@ -33,7 +33,7 @@ const AnnotationQueueRowActionsCell: React.FunctionComponent<
   const { mutate } = useAnnotationQueueDeleteMutation();
 
   const {
-    permissions: { canDeleteAnnotationQueues },
+    permissions: { canEditAnnotationQueues, canDeleteAnnotationQueues },
   } = usePermissions();
 
   const handleCopySMELink = useCallback(() => {
@@ -95,10 +95,12 @@ const AnnotationQueueRowActionsCell: React.FunctionComponent<
             <Copy className="mr-2 size-4" />
             Copy sharing link
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={handleEdit}>
-            <Pencil className="mr-2 size-4" />
-            Edit
-          </DropdownMenuItem>
+          {canEditAnnotationQueues && (
+            <DropdownMenuItem onClick={handleEdit}>
+              <Pencil className="mr-2 size-4" />
+              Edit
+            </DropdownMenuItem>
+          )}
           {canDeleteAnnotationQueues && (
             <>
               <DropdownMenuSeparator />

apps/opik-frontend/src/v2/pages/AnnotationQueuePage/EditAnnotationQueueButton.tsx

@@ -4,6 +4,7 @@ import AddEditAnnotationQueueDialog from "@/v2/pages-shared/annotation-queues/Ad
 import { Button } from "@/ui/button";
 import { Pencil } from "lucide-react";
 import TooltipWrapper from "@/shared/TooltipWrapper/TooltipWrapper";
+import { usePermissions } from "@/contexts/PermissionsContext";
 
 interface EditAnnotationQueueButtonProps {
   annotationQueue: AnnotationQueue;
@@ -12,6 +13,10 @@ interface EditAnnotationQueueButtonProps {
 const EditAnnotationQueueButton: React.FunctionComponent<
   EditAnnotationQueueButtonProps
 > = ({ annotationQueue }) => {
+  const {
+    permissions: { canEditAnnotationQueues },
+  } = usePermissions();
+
   const resetKeyRef = useRef(0);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
 
@@ -20,6 +25,8 @@ const EditAnnotationQueueButton: React.FunctionComponent<
     resetKeyRef.current = resetKeyRef.current + 1;
   }, []);
 
+  if (!canEditAnnotationQueues) return null;
+
   return (
     <>
       <AddEditAnnotationQueueDialog