From 8500c1c11ee809d38da3a193b4910dc5627abc0e Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 21 Feb 2025 10:38:15 +0100
Subject: [PATCH] ui: disable hl edit for non creators

---
 frontend/app/PrivateRoutes.tsx                        | 2 +-
 frontend/app/components/Highlights/HighlightClip.tsx  | 5 +++++
 frontend/app/components/Highlights/HighlightsList.tsx | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/app/PrivateRoutes.tsx b/frontend/app/PrivateRoutes.tsx
index 7e4a85955..5ddcf8ee4 100644
--- a/frontend/app/PrivateRoutes.tsx
+++ b/frontend/app/PrivateRoutes.tsx
@@ -59,7 +59,7 @@ const enhancedComponents: any = {
   SpotsList: withSiteIdUpdater(components.SpotsListPure),
   Spot: components.SpotPure,
   ScopeSetup: components.ScopeSetup,
-  Highlights: components.HighlightsPure,
+  Highlights: withSiteIdUpdater(components.HighlightsPure),
 };
 
 const withSiteId = routes.withSiteId;
diff --git a/frontend/app/components/Highlights/HighlightClip.tsx b/frontend/app/components/Highlights/HighlightClip.tsx
index f0bad1494..68866658d 100644
--- a/frontend/app/components/Highlights/HighlightClip.tsx
+++ b/frontend/app/components/Highlights/HighlightClip.tsx
@@ -20,6 +20,7 @@ function HighlightClip({
   openEdit = () => undefined,
   onItemClick = () => undefined,
   onDelete = () => undefined,
+  canEdit = false,
 }: {
   note: string | null;
   tag: string;
@@ -30,6 +31,7 @@ function HighlightClip({
   openEdit: (id: any) => any;
   onItemClick: (id: any) => any;
   onDelete: (id: any) => any;
+  canEdit: boolean;
 }) {
   const noteMsg = note || noNoteMsg
   const copyToClipboard = () => {
@@ -48,16 +50,19 @@ function HighlightClip({
       key: 'edit',
       icon: <EditOutlined />,
       label: 'Edit',
+      disabled: !canEdit,
     },
     {
       key: 'visibility',
       icon: <Eye strokeWidth={1} size={14} />,
       label: 'Visibility',
+      disabled: !canEdit,
     },
     {
       key: 'delete',
       icon: <DeleteOutlined />,
       label: 'Delete',
+      disabled: !canEdit,
     },
   ];
 
diff --git a/frontend/app/components/Highlights/HighlightsList.tsx b/frontend/app/components/Highlights/HighlightsList.tsx
index e09095e7f..e0158b3ce 100644
--- a/frontend/app/components/Highlights/HighlightsList.tsx
+++ b/frontend/app/components/Highlights/HighlightsList.tsx
@@ -14,13 +14,14 @@ import HighlightsListHeader from './HighlightsListHeader';
 import withPermissions from 'HOCs/withPermissions';
 
 function HighlightsList() {
-  const { notesStore, projectsStore } = useStore();
+  const { notesStore, projectsStore, userStore } = useStore();
   const [activeId, setActiveId] = React.useState<string | null>(null);
   const [editModalOpen, setEditModalOpen] = React.useState(false);
   const [editHl, setEditHl] = React.useState<Record<string, any>>({
     message: '',
     isPublic: false
   });
+  const currentUserId = userStore.account.id;
 
   const activeProject = projectsStore.activeSiteId;
   const query = notesStore.query;
@@ -150,6 +151,7 @@ function HighlightsList() {
                 createdAt={note.createdAt}
                 hId={note.noteId}
                 thumbnail={note.thumbnail}
+                canEdit={note.userId === currentUserId}
                 openEdit={() => onEdit(note.noteId)}
                 onDelete={() => onDelete(note.noteId)}
                 onItemClick={() => onItemClick(note.noteId)}