Fix cache invalidation after deleting orphaned models

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

Author: Copilot

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsButton.tsx

@@ -1,5 +1,4 @@
-import { Button, Tooltip } from '@invoke-ai/ui-library';
-import { useDisclosure } from '@invoke-ai/ui-library';
+import { Button, Tooltip, useDisclosure } from '@invoke-ai/ui-library';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsClockwiseBold } from 'react-icons/pi';

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/SyncModelsDialog.tsx

@@ -101,10 +101,17 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
     });
   }, []);
 
+  const createToggleExpandedHandler = useCallback(
+    (path: string) => () => handleToggleExpanded(path),
+    [handleToggleExpanded]
+  );
+
+  const createToggleModelHandler = useCallback((path: string) => () => handleToggleModel(path), [handleToggleModel]);
+
   const handleDelete = useCallback(async () => {
     try {
       const result = await deleteOrphanedModels({ paths: Array.from(selectedModels) }).unwrap();
-      
+
       if (result.deleted.length > 0) {
         toast({
           title: t('modelManager.orphanedModelsDeleted', { count: result.deleted.length }),
@@ -123,7 +130,7 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
       }
 
       onClose();
-    } catch (error) {
+    } catch {
       toast({
         title: t('modelManager.orphanedModelsDeleteFailed'),
         status: 'error',
@@ -198,37 +205,27 @@ export const SyncModelsDialog = memo(({ isOpen, onClose }: SyncModelsDialogProps
             <Text>{t('modelManager.orphanedModelsDescription')}</Text>
 
             <Flex justifyContent="space-between" alignItems="center">
-              <Heading size="sm">
-                {t('modelManager.foundOrphanedModels', { count: orphanedModels.length })}
-              </Heading>
+              <Heading size="sm">{t('modelManager.foundOrphanedModels', { count: orphanedModels.length })}</Heading>
               <Checkbox isChecked={selectAll} onChange={handleToggleSelectAll}>
                 {selectAll ? t('modelManager.deselectAll') : t('modelManager.selectAll')}
               </Checkbox>
             </Flex>
 
             <Flex flexDir="column" gap={2}>
               {orphanedModels.map((model: OrphanedModel) => (
-                <Flex
-                  key={model.path}
-                  p={3}
-                  borderWidth={1}
-                  borderRadius="md"
-                  flexDir="column"
-                  gap={2}
-                  bg="base.750"
-                >
+                <Flex key={model.path} p={3} borderWidth={1} borderRadius="md" flexDir="column" gap={2} bg="base.750">
                   <Flex justifyContent="space-between" alignItems="center">
                     <Flex alignItems="center" gap={2} flex={1}>
                       <IconButton
                         aria-label={expandedModels.has(model.path) ? 'Collapse' : 'Expand'}
                         icon={expandedModels.has(model.path) ? <PiCaretDownBold /> : <PiCaretRightBold />}
                         size="xs"
                         variant="ghost"
-                        onClick={() => handleToggleExpanded(model.path)}
+                        onClick={createToggleExpandedHandler(model.path)}
                       />
                       <Checkbox
                         isChecked={selectedModels.has(model.path)}
-                        onChange={() => handleToggleModel(model.path)}
+                        onChange={createToggleModelHandler(model.path)}
                       >
                         <Text fontWeight="semibold">{model.path}</Text>
                       </Checkbox>

invokeai/frontend/web/src/services/api/endpoints/models.ts

@@ -382,13 +382,15 @@ export const modelsApi = api.injectEndpoints({
         url: buildModelsUrl('sync/orphaned'),
         method: 'GET',
       }),
+      providesTags: ['OrphanedModels'],
     }),
     deleteOrphanedModels: build.mutation<DeleteOrphanedModelsResponse, DeleteOrphanedModelsArg>({
       query: (arg) => ({
         url: buildModelsUrl('sync/orphaned'),
         method: 'DELETE',
         body: arg,
       }),
+      invalidatesTags: ['OrphanedModels'],
     }),
   }),
 });

invokeai/frontend/web/src/services/api/index.ts

@@ -38,6 +38,7 @@ const tagTypes = [
   'ModelInstalls',
   'ModelRelationships',
   'ModelScanFolderResults',
+  'OrphanedModels',
   'T2IAdapterModel',
   'MainModel',
   'VaeModel',