Fix remaining board access enforcement: invoke icon, drag-out, change-board filter, archive

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

Author: Copilot

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -8,11 +8,13 @@ import {
   isModalOpenChanged,
   selectChangeBoardModalSlice,
 } from 'features/changeBoardModal/store/slice';
+import { selectCurrentUser } from 'features/auth/store/authSlice';
 import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import { useAddImagesToBoardMutation, useRemoveImagesFromBoardMutation } from 'services/api/endpoints/images';
+import type { BoardDTO } from 'services/api/types';
 
 const selectImagesToChange = createSelector(
   selectChangeBoardModalSlice,
@@ -28,6 +30,7 @@ const ChangeBoardModal = () => {
   useAssertSingleton('ChangeBoardModal');
   const dispatch = useAppDispatch();
   const currentBoardId = useAppSelector(selectSelectedBoardId);
+  const currentUser = useAppSelector(selectCurrentUser);
   const [selectedBoardId, setSelectedBoardId] = useState<string | null>();
   const { data: boards, isFetching } = useListAllBoardsQuery({ include_archived: true });
   const isModalOpen = useAppSelector(selectIsModalOpen);
@@ -36,18 +39,28 @@ const ChangeBoardModal = () => {
   const [removeImagesFromBoard] = useRemoveImagesFromBoardMutation();
   const { t } = useTranslation();
 
+  // Returns true if the current user can write images to the given board.
+  const canWriteToBoard = useCallback(
+    (board: BoardDTO): boolean => {
+      const isOwnerOrAdmin = !currentUser || currentUser.is_admin || board.user_id === currentUser.user_id;
+      return isOwnerOrAdmin || board.board_visibility === 'public';
+    },
+    [currentUser]
+  );
+
   const options = useMemo<ComboboxOption[]>(() => {
     return [{ label: t('boards.uncategorized'), value: 'none' }]
       .concat(
         (boards ?? [])
+          .filter(canWriteToBoard)
           .map((board) => ({
             label: board.board_name,
             value: board.board_id,
           }))
           .sort((a, b) => a.label.localeCompare(b.label))
       )
       .filter((board) => board.value !== currentBoardId);
-  }, [boards, currentBoardId, t]);
+  }, [boards, canWriteToBoard, currentBoardId, t]);
 
   const value = useMemo(() => options.find((o) => o.value === selectedBoardId), [options, selectedBoardId]);
 

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

@@ -130,13 +130,13 @@ const BoardContextMenu = ({ board, children }: Props) => {
           </MenuItem>
 
           {board.archived && (
-            <MenuItem icon={<PiArchiveBold />} onClick={handleUnarchive}>
+            <MenuItem icon={<PiArchiveBold />} onClick={handleUnarchive} isDisabled={!canDeleteBoard}>
               {t('boards.unarchiveBoard')}
             </MenuItem>
           )}
 
           {!board.archived && (
-            <MenuItem icon={<PiArchiveFill />} onClick={handleArchive}>
+            <MenuItem icon={<PiArchiveFill />} onClick={handleArchive} isDisabled={!canDeleteBoard}>
               {t('boards.archiveBoard')}
             </MenuItem>
           )}

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

@@ -26,6 +26,8 @@ import type { MouseEvent, MouseEventHandler } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PiImageBold } from 'react-icons/pi';
 import { imagesApi } from 'services/api/endpoints/images';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
+import { useSelectedBoard } from 'services/api/hooks/useSelectedBoard';
 import type { ImageDTO } from 'services/api/types';
 
 import { galleryItemContainerSX } from './galleryItemContainerSX';
@@ -102,12 +104,37 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
     [imageDTO.image_name]
   );
   const isSelected = useAppSelector(selectIsSelected);
+  const selectedBoard = useSelectedBoard();
+  const { canWriteImages: canDragFromBoard } = useBoardAccess(selectedBoard);
 
   useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
+
+    const monitorBinding = monitorForElements({
+      // This is a "global" drag start event, meaning that it is called for all drag events.
+      onDragStart: ({ source }) => {
+        // When we start dragging multiple images, set the dragging state to true if the dragged image is part of the
+        // selection. This is called for all drag events.
+        if (
+          multipleImageDndSource.typeGuard(source.data) &&
+          source.data.payload.image_names.includes(imageDTO.image_name)
+        ) {
+          setIsDragging(true);
+        }
+      },
+      onDrop: () => {
+        // Always set the dragging state to false when a drop event occurs.
+        setIsDragging(false);
+      },
+    });
+
+    if (!canDragFromBoard) {
+      return combine(firefoxDndFix(element), monitorBinding);
+    }
+
     return combine(
       firefoxDndFix(element),
       draggable({
@@ -153,25 +180,9 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
           }
         },
       }),
-      monitorForElements({
-        // This is a "global" drag start event, meaning that it is called for all drag events.
-        onDragStart: ({ source }) => {
-          // When we start dragging multiple images, set the dragging state to true if the dragged image is part of the
-          // selection. This is called for all drag events.
-          if (
-            multipleImageDndSource.typeGuard(source.data) &&
-            source.data.payload.image_names.includes(imageDTO.image_name)
-          ) {
-            setIsDragging(true);
-          }
-        },
-        onDrop: () => {
-          // Always set the dragging state to false when a drop event occurs.
-          setIsDragging(false);
-        },
-      })
+      monitorBinding
     );
-  }, [imageDTO, store]);
+  }, [imageDTO, store, canDragFromBoard]);
 
   const [isHovered, setIsHovered] = useState(false);
 

invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx

@@ -17,6 +17,8 @@ import {
   PiXCircle,
 } from 'react-icons/pi';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+import { useAutoAddBoard } from 'services/api/hooks/useAutoAddBoard';
+import { useBoardAccess } from 'services/api/hooks/useBoardAccess';
 
 export const FloatingLeftPanelButtons = memo(() => {
   return (
@@ -71,14 +73,16 @@ const InvokeIconButton = memo(() => {
   const { t } = useTranslation();
   const queue = useInvoke();
   const shift = useShiftModifier();
+  const autoAddBoard = useAutoAddBoard();
+  const { canWriteImages } = useBoardAccess(autoAddBoard);
 
   return (
     <InvokeButtonTooltip prepend={shift} placement="end">
       <IconButton
         aria-label={t('queue.queueBack')}
         onClick={shift ? queue.enqueueFront : queue.enqueueBack}
         isLoading={queue.isLoading}
-        isDisabled={queue.isDisabled}
+        isDisabled={queue.isDisabled || !canWriteImages}
         icon={<InvokeIconButtonIcon />}
         colorScheme="invokeYellow"
         flexGrow={1}