disable certain actions on images and boards in UI according to actions object on DTO

invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx

@@ -7,10 +7,11 @@ type Props = {
   tooltip: string;
   icon?: ReactElement;
   styleOverrides?: SystemStyleObject;
+  isDisabled?: boolean;
 };
 
 const IAIDndImageIcon = (props: Props) => {
-  const { onClick, tooltip, icon, styleOverrides } = props;
+  const { onClick, tooltip, icon, styleOverrides, isDisabled = false } = props;
 
   const resetIconShadow = useColorModeValue(
     `drop-shadow(0px 0px 0.1rem var(--invokeai-colors-base-600))`,
@@ -18,6 +19,7 @@ const IAIDndImageIcon = (props: Props) => {
   );
   return (
     <IAIIconButton
+      isDisabled={isDisabled}
       onClick={onClick}
       aria-label={tooltip}
       tooltip={tooltip}

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

@@ -1,5 +1,5 @@
 import { MenuItem } from '@chakra-ui/react';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { FaTrash } from 'react-icons/fa';
 import { BoardDTO } from 'services/api/types';
 import { useTranslation } from 'react-i18next';
@@ -17,23 +17,21 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
     setBoardToDelete(board);
   }, [board, setBoardToDelete]);
 
+  const isDeleteDisabled = useMemo(() => {
+    if (board?.actions) {
+      return board.actions.delete === false;
+    } else {
+      return false;
+    }
+  }, [board]);
+
   return (
     <>
-      {board.image_count > 0 && (
-        <>
-          {/* <MenuItem
-                    isDisabled={!board.image_count}
-                    icon={<FaImages />}
-                    onClickCapture={handleAddBoardToBatch}
-                  >
-                    Add Board to Batch
-                  </MenuItem> */}
-        </>
-      )}
       <MenuItem
         sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
         icon={<FaTrash />}
         onClick={handleDelete}
+        isDisabled={isDeleteDisabled}
       >
         {t('boards.deleteBoard')}
       </MenuItem>

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -15,7 +15,7 @@ import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setActiveTab } from 'features/ui/store/uiSlice';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -153,6 +153,22 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     }
   }, [unstarImages, imageDTO]);
 
+  const isDeleteDisabled = useMemo(() => {
+    if (imageDTO?.actions) {
+      return imageDTO.actions.delete === false;
+    } else {
+      return false;
+    }
+  }, [imageDTO]);
+
+  const isUnstarDisabled = useMemo(() => {
+    if (imageDTO?.actions) {
+      return imageDTO.actions.unstar === false;
+    } else {
+      return false;
+    }
+  }, [imageDTO]);
+
   return (
     <>
       <MenuItem
@@ -233,6 +249,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         <MenuItem
           icon={customStarUi ? customStarUi.off.icon : <MdStar />}
           onClickCapture={handleUnstarImage}
+          isDisabled={isUnstarDisabled}
         >
           {customStarUi ? customStarUi.off.text : t('gallery.unstarImage')}
         </MenuItem>
@@ -248,6 +265,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
         icon={<FaTrash />}
         onClickCapture={handleDelete}
+        isDisabled={isDeleteDisabled}
       >
         {t('gallery.deleteImage')}
       </MenuItem>

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

@@ -112,6 +112,14 @@ const GalleryImage = (props: HoverableImageProps) => {
     return '';
   }, [imageDTO?.starred, customStarUi]);
 
+  const isUnstarDisabled = useMemo(() => {
+    if (imageDTO?.actions) {
+      return imageDTO?.starred && imageDTO.actions.unstar === false;
+    } else {
+      return false;
+    }
+  }, [imageDTO]);
+
   if (!imageDTO) {
     return <IAIFillSkeleton />;
   }
@@ -149,6 +157,13 @@ const GalleryImage = (props: HoverableImageProps) => {
               onClick={toggleStarredState}
               icon={starIcon}
               tooltip={starTooltip}
+              isDisabled={isUnstarDisabled}
+              styleOverrides={{
+                _disabled: {
+                  cursor: 'not-allowed',
+                  opacity: 1,
+                },
+              }}
             />
 
             {isHovered && shift && (