Enforce read-only access for non-owners of shared/public boards in UI

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

Author: Copilot

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -21,6 +21,7 @@ import {
 } from 'react-icons/pi';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
 import { useBulkDownloadImagesMutation } from 'services/api/endpoints/images';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 import type { BoardDTO } from 'services/api/types';
 
@@ -50,6 +51,8 @@ const BoardContextMenu = ({ board, children }: Props) => {
   const canChangeVisibility =
     currentUser !== null && (currentUser.is_admin || board.user_id === currentUser.user_id);
 
+  const { canDeleteBoard } = useBoardAccess(board);
+
   const handleSetAutoAdd = useCallback(() => {
     dispatch(autoAddBoardIdChanged(board.board_id));
   }, [board.board_id, dispatch]);
@@ -164,7 +167,13 @@ const BoardContextMenu = ({ board, children }: Props) => {
             </>
           )}
 
-          <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={setAsBoardToDelete} isDestructive>
+          <MenuItem
+            color="error.300"
+            icon={<PiTrashSimpleBold />}
+            onClick={setAsBoardToDelete}
+            isDestructive
+            isDisabled={!canDeleteBoard}
+          >
             {t('boards.deleteBoard')}
           </MenuItem>
         </MenuGroup>
@@ -185,6 +194,7 @@ const BoardContextMenu = ({ board, children }: Props) => {
       handleSetVisibilityPrivate,
       handleSetVisibilityShared,
       handleSetVisibilityPublic,
+      canDeleteBoard,
       setAsBoardToDelete,
     ]
   );

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardEditableTitle.tsx

@@ -7,6 +7,7 @@ import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPencilBold } from 'react-icons/pi';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
 import type { BoardDTO } from 'services/api/types';
 
 type Props = {
@@ -19,6 +20,7 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
   const isHovering = useBoolean(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const [updateBoard, updateBoardResult] = useUpdateBoardMutation();
+  const { canRenameBoard } = useBoardAccess(board);
 
   const onChange = useCallback(
     async (board_name: string) => {
@@ -51,13 +53,13 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
           fontWeight="semibold"
           userSelect="none"
           color={isSelected ? 'base.100' : 'base.300'}
-          onDoubleClick={editable.startEditing}
-          cursor="text"
+          onDoubleClick={canRenameBoard ? editable.startEditing : undefined}
+          cursor={canRenameBoard ? 'text' : 'default'}
           noOfLines={1}
         >
           {editable.value}
         </Text>
-        {isHovering.isTrue && (
+        {canRenameBoard && isHovering.isTrue && (
           <IconButton
             aria-label="edit name"
             icon={<PiPencilBold />}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -20,6 +20,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArchiveBold, PiGlobeBold, PiImageSquare, PiShareNetworkBold } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
 import type { BoardDTO } from 'services/api/types';
 
 const _hover: SystemStyleObject = {
@@ -62,6 +63,8 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
 
   const showOwner = currentUser?.is_admin && board.owner_username;
 
+  const { canWriteImages } = useBoardAccess(board);
+
   return (
     <Box position="relative" w="full" h={12}>
       <BoardContextMenu board={board}>
@@ -122,7 +125,12 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
           </Tooltip>
         )}
       </BoardContextMenu>
-      <DndDropTarget dndTarget={addImageToBoardDndTarget} dndTargetData={dndTargetData} label={t('gallery.move')} />
+      <DndDropTarget
+        dndTarget={addImageToBoardDndTarget}
+        dndTargetData={dndTargetData}
+        label={t('gallery.move')}
+        isDisabled={!canWriteImages}
+      />
     </Box>
   );
 };

invokeai/frontend/web/src/features/gallery/components/ContextMenu/MenuItems/ContextMenuItemChangeBoard.tsx

@@ -5,19 +5,23 @@ import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFoldersBold } from 'react-icons/pi';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
+import { useSelectedBoard } from 'services/api/hooks/useSelectedBoard';
 
 export const ContextMenuItemChangeBoard = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const imageDTO = useImageDTOContext();
+  const selectedBoard = useSelectedBoard();
+  const { canWriteImages } = useBoardAccess(selectedBoard);
 
   const onClick = useCallback(() => {
     dispatch(imagesToChangeSelected([imageDTO.image_name]));
     dispatch(isModalOpenChanged(true));
   }, [dispatch, imageDTO]);
 
   return (
-    <MenuItem icon={<PiFoldersBold />} onClickCapture={onClick}>
+    <MenuItem icon={<PiFoldersBold />} onClickCapture={onClick} isDisabled={!canWriteImages}>
       {t('boards.changeBoard')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/gallery/components/ContextMenu/MenuItems/ContextMenuItemDeleteImage.tsx

@@ -4,11 +4,15 @@ import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
+import { useSelectedBoard } from 'services/api/hooks/useSelectedBoard';
 
 export const ContextMenuItemDeleteImage = memo(() => {
   const { t } = useTranslation();
   const deleteImageModal = useDeleteImageModalApi();
   const imageDTO = useImageDTOContext();
+  const selectedBoard = useSelectedBoard();
+  const { canWriteImages } = useBoardAccess(selectedBoard);
 
   const onClick = useCallback(async () => {
     try {
@@ -18,6 +22,10 @@ export const ContextMenuItemDeleteImage = memo(() => {
     }
   }, [deleteImageModal, imageDTO]);
 
+  if (!canWriteImages) {
+    return null;
+  }
+
   return (
     <IconMenuItem
       icon={<PiTrashSimpleBold />}

invokeai/frontend/web/src/features/gallery/components/ContextMenu/MultipleSelectionMenuItems.tsx

@@ -10,12 +10,16 @@ import {
   useStarImagesMutation,
   useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
+import { useSelectedBoard } from 'services/api/hooks/useSelectedBoard';
 
 const MultipleSelectionMenuItems = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const selection = useAppSelector((s) => s.gallery.selection);
   const deleteImageModal = useDeleteImageModalApi();
+  const selectedBoard = useSelectedBoard();
+  const { canWriteImages } = useBoardAccess(selectedBoard);
 
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();
@@ -53,11 +57,16 @@ const MultipleSelectionMenuItems = () => {
       <MenuItem icon={<PiDownloadSimpleBold />} onClickCapture={handleBulkDownload}>
         {t('gallery.downloadSelection')}
       </MenuItem>
-      <MenuItem icon={<PiFoldersBold />} onClickCapture={handleChangeBoard}>
+      <MenuItem icon={<PiFoldersBold />} onClickCapture={handleChangeBoard} isDisabled={!canWriteImages}>
         {t('boards.changeBoard')}
       </MenuItem>
       <MenuDivider />
-      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClickCapture={handleDeleteSelection}>
+      <MenuItem
+        color="error.300"
+        icon={<PiTrashSimpleBold />}
+        onClickCapture={handleDeleteSelection}
+        isDisabled={!canWriteImages}
+      >
         {t('gallery.deleteSelection')}
       </MenuItem>
     </>

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryItemDeleteIconButton.tsx

@@ -5,6 +5,8 @@ import type { MouseEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleFill } from 'react-icons/pi';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
+import { useSelectedBoard } from 'services/api/hooks/useSelectedBoard';
 import type { ImageDTO } from 'services/api/types';
 
 type Props = {
@@ -15,6 +17,8 @@ export const GalleryItemDeleteIconButton = memo(({ imageDTO }: Props) => {
   const shift = useShiftModifier();
   const { t } = useTranslation();
   const deleteImageModal = useDeleteImageModalApi();
+  const selectedBoard = useSelectedBoard();
+  const { canWriteImages } = useBoardAccess(selectedBoard);
 
   const onClick = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -24,7 +28,7 @@ export const GalleryItemDeleteIconButton = memo(({ imageDTO }: Props) => {
     [deleteImageModal, imageDTO]
   );
 
-  if (!shift) {
+  if (!shift || !canWriteImages) {
     return null;
   }
 

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

@@ -5,6 +5,8 @@ import { QueueIterationsNumberInput } from 'features/queue/components/QueueItera
 import { useInvoke } from 'features/queue/hooks/useInvoke';
 import { memo } from 'react';
 import { PiLightningFill, PiSparkleFill } from 'react-icons/pi';
+import { useAutoAddBoard } from 'services/api/hooks/useAutoAddBoard';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
 
 import { InvokeButtonTooltip } from './InvokeButtonTooltip/InvokeButtonTooltip';
 
@@ -14,6 +16,8 @@ export const InvokeButton = memo(() => {
   const queue = useInvoke();
   const shift = useShiftModifier();
   const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
+  const autoAddBoard = useAutoAddBoard();
+  const { canWriteImages } = useBoardAccess(autoAddBoard);
 
   return (
     <Flex pos="relative" w="200px">
@@ -23,7 +27,7 @@ export const InvokeButton = memo(() => {
           onClick={shift ? queue.enqueueFront : queue.enqueueBack}
           isLoading={queue.isLoading || isLoadingDynamicPrompts}
           loadingText={invoke}
-          isDisabled={queue.isDisabled}
+          isDisabled={queue.isDisabled || !canWriteImages}
           rightIcon={shift ? <PiLightningFill /> : <PiSparkleFill />}
           variant="solid"
           colorScheme="invokeYellow"

invokeai/frontend/web/src/services/api/hooks/useAutoAddBoard.ts

@@ -0,0 +1,21 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
+
+/**
+ * Returns the `BoardDTO` for the board currently configured as the auto-add
+ * destination, or `null` when it is set to "Uncategorized" (`boardId === 'none'`)
+ * or when the board list has not yet loaded.
+ */
+export const useAutoAddBoard = () => {
+  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
+  const { board } = useListAllBoardsQuery(
+    { include_archived: true },
+    {
+      selectFromResult: ({ data }) => ({
+        board: data?.find((b) => b.board_id === autoAddBoardId) ?? null,
+      }),
+    }
+  );
+  return board;
+};

invokeai/frontend/web/src/services/api/hooks/useBoardAccess.ts

@@ -0,0 +1,32 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectCurrentUser } from 'features/auth/store/authSlice';
+import type { BoardDTO } from 'services/api/types';
+
+/**
+ * Returns permission flags for the given board based on the current user:
+ * - `canWriteImages`: can add / delete images in the board
+ *   (owner or admin always; non-owner allowed only for public boards)
+ * - `canRenameBoard`: can rename the board (owner or admin only)
+ * - `canDeleteBoard`: can delete the board (owner or admin only)
+ *
+ * When `board` is null/undefined (e.g. "uncategorized"), all permissions are
+ * granted so that existing behaviour is preserved.
+ *
+ * When `currentUser` is null the app is running without authentication
+ * (single-user mode), so full access is granted unconditionally.
+ */
+export const useBoardAccess = (board: BoardDTO | null | undefined) => {
+  const currentUser = useAppSelector(selectCurrentUser);
+
+  if (!board) {
+    return { canWriteImages: true, canRenameBoard: true, canDeleteBoard: true };
+  }
+
+  const isOwnerOrAdmin = !currentUser || currentUser.is_admin || board.user_id === currentUser.user_id;
+
+  return {
+    canWriteImages: isOwnerOrAdmin || board.board_visibility === 'public',
+    canRenameBoard: isOwnerOrAdmin,
+    canDeleteBoard: isOwnerOrAdmin,
+  };
+};