Hide resolve/edit/delete comment options for users without permissions (#22891)

GitOrigin-RevId: b3d2c1ba03ee836596abfc3da1260dec5a0a7714

services/web/frontend/js/features/review-panel-new/components/review-panel-comment-options.tsx

@@ -28,10 +28,15 @@ const ReviewPanelCommentOptions: FC<{
   onEdit: () => void
   onDelete: () => void
   id: string
-  belongsToCurrentUser: boolean
-}> = ({ onEdit, onDelete, id, belongsToCurrentUser }) => {
+  canEdit: boolean
+  canDelete: boolean
+}> = ({ onEdit, onDelete, id, canEdit, canDelete }) => {
   const { t } = useTranslation()
 
+  if (!canEdit && !canDelete) {
+    return null
+  }
+
   return (
     <BootstrapVersionSwitcher
       bs3={
@@ -49,10 +54,10 @@ const ReviewPanelCommentOptions: FC<{
             />
           </BS3Dropdown.Toggle>
           <BS3Dropdown.Menu>
-            {belongsToCurrentUser && (
-              <BS3MenuItem onClick={onEdit}>{t('edit')}</BS3MenuItem>
+            {canEdit && <BS3MenuItem onClick={onEdit}>{t('edit')}</BS3MenuItem>}
+            {canDelete && (
+              <BS3MenuItem onClick={onDelete}>{t('delete')}</BS3MenuItem>
             )}
-            <BS3MenuItem onClick={onDelete}>{t('delete')}</BS3MenuItem>
           </BS3Dropdown.Menu>
         </ControlledDropdown>
       }
@@ -70,18 +75,20 @@ const ReviewPanelCommentOptions: FC<{
             />
           </DropdownToggle>
           <DropdownMenu flip={false}>
-            {belongsToCurrentUser && (
+            {canEdit && (
               <li role="none">
                 <DropdownItem as="button" onClick={onEdit}>
                   {t('edit')}
                 </DropdownItem>
               </li>
             )}
-            <li role="none">
-              <DropdownItem as="button" onClick={onDelete}>
-                {t('delete')}
-              </DropdownItem>
-            </li>
+            {canDelete && (
+              <li role="none">
+                <DropdownItem as="button" onClick={onDelete}>
+                  {t('delete')}
+                </DropdownItem>
+              </li>
+            )}
           </DropdownMenu>
         </Dropdown>
       }

services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx

@@ -13,6 +13,7 @@ import { ExpandableContent } from './review-panel-expandable-content'
 import ReviewPanelDeleteCommentModal from './review-panel-delete-comment-modal'
 import { useUserContext } from '@/shared/context/user-context'
 import ReviewPanelEntryUser from './review-panel-entry-user'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 
 export const ReviewPanelMessage: FC<{
   message: ReviewPanelCommentThreadMessage
@@ -36,6 +37,12 @@ export const ReviewPanelMessage: FC<{
   const [deleting, setDeleting] = useState(false)
   const [content, setContent] = useState(message.content)
   const user = useUserContext()
+  const { write, trackedWrite } = usePermissionsContext()
+
+  const isCommentAuthor = user.id === message.user.id
+  const canEdit = isCommentAuthor
+  const canResolve = write || (trackedWrite && isCommentAuthor)
+  const canDelete = write || (trackedWrite && isCommentAuthor)
 
   const handleEditOption = useCallback(() => setEditing(true), [])
   const showDeleteModal = useCallback(() => setDeleting(true), [])
@@ -62,7 +69,7 @@ export const ReviewPanelMessage: FC<{
         </div>
 
         <div className="review-panel-entry-actions">
-          {!editing && !isReply && !isThreadResolved && (
+          {!editing && !isReply && !isThreadResolved && canResolve && (
             <OLTooltip
               id="resolve-thread"
               overlayProps={{ placement: 'bottom' }}
@@ -86,7 +93,8 @@ export const ReviewPanelMessage: FC<{
 
           {!editing && !isThreadResolved && (
             <ReviewPanelCommentOptions
-              belongsToCurrentUser={user.id === message.user.id}
+              canDelete={canDelete}
+              canEdit={canEdit}
               onEdit={handleEditOption}
               onDelete={showDeleteModal}
               id={message.id}