feat: add local asset file actions

Author: adobeluo

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -139,7 +139,7 @@
       <MediaAssetSelectionBar
         v-if="hasSelection"
         :count="totalOutputCount"
-        :show-delete="shouldShowDeleteButton"
+        :show-delete="shouldShowSelectionDeleteButton"
         @deselect="handleDeselectAll"
         @download="handleDownloadSelected"
         @delete="handleDeleteSelected"
@@ -163,7 +163,7 @@
     :asset="contextMenuAsset"
     :asset-type="contextMenuAssetType"
     :file-kind="contextMenuFileKind"
-    :show-delete-button="shouldShowDeleteButton"
+    :show-delete-button="true"
     :selected-assets="selectedAssets"
     :is-bulk-mode="isBulkMode"
     @zoom="handleZoomClick(contextMenuAsset)"
@@ -268,7 +268,7 @@ const contextMenuAsset = ref<AssetItem | null>(null)
 
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
-const shouldShowDeleteButton = computed(() => {
+const shouldShowSelectionDeleteButton = computed(() => {
   if (activeTab.value === 'input' && !isCloud) return false
   return true
 })

src/locales/en/main.json

@@ -3687,11 +3687,23 @@
   "mediaAsset": {
     "deleteAssetTitle": "Delete this asset?",
     "deleteAssetDescription": "This asset will be permanently removed.",
+    "deleteGeneratedSourceFileTitle": "Delete this source file?",
+    "deleteGeneratedSourceFileDescription": "This file will be permanently deleted from disk and removed from Generated. This action cannot be undone.",
+    "deleteSelectedGeneratedSourceFilesTitle": "Delete selected source files?",
+    "deleteSelectedGeneratedSourceFilesDescription": "{count} files will be permanently deleted from disk and removed from Generated. This action cannot be undone.",
     "deleteSelectedTitle": "Delete selected assets?",
     "deleteSelectedDescription": "{count} asset(s) will be permanently removed.",
+    "removeGeneratedAssetTitle": "Remove this asset from Generated?",
+    "removeGeneratedAssetDescription": "This asset will be removed from Generated. The file on disk will be kept.",
+    "removeSelectedGeneratedAssetsTitle": "Remove selected assets from Generated?",
+    "removeSelectedGeneratedAssetsDescription": "{count} asset(s) will be removed from Generated. The files on disk will be kept.",
+    "generatedAssetRemovedSuccessfully": "Removed from Generated; file kept on disk",
+    "selectedGeneratedAssetsRemovedSuccessfully": "{count} asset(s) removed from Generated; files kept on disk",
     "assetDeletedSuccessfully": "Asset deleted successfully",
     "deletingImportedFilesCloudOnly": "Deleting imported files is only supported in cloud version",
     "failedToDeleteAsset": "Failed to delete asset",
+    "fileLocationOpened": "Opened the file location",
+    "failedToOpenFileLocation": "Failed to open the file location. Use ComfyUI from this computer and try again.",
     "actions": {
       "inspect": "Inspect asset",
       "more": "More options",
@@ -3700,10 +3712,12 @@
       "seeMoreOutputs": "See more outputs",
       "insertAsNodeInWorkflow": "Insert as node in workflow",
       "download": "Download",
+      "openFileLocation": "Open file location",
       "openWorkflow": "Open as workflow in new tab",
       "exportWorkflow": "Export workflow",
       "copyJobId": "Copy job ID",
-      "delete": "Delete"
+      "delete": "Delete",
+      "deleteSourceFile": "Delete source file"
     },
     "jobIdToast": {
       "jobIdCopied": "Job ID copied to clipboard",

src/platform/assets/components/MediaAssetContextMenu.test.ts

@@ -30,6 +30,7 @@ vi.mock('@/utils/formatUtil', async (importOriginal) => ({
 const mediaAssetActions = {
   addWorkflow: vi.fn(),
   downloadAssets: vi.fn(),
+  openAssetLocation: vi.fn(),
   openWorkflow: vi.fn(),
   exportWorkflow: vi.fn(),
   copyJobId: vi.fn(),
@@ -103,7 +104,10 @@ interface MediaAssetContextMenuExposed {
 
 let capturedRef: MediaAssetContextMenuExposed | null = null
 
-function mountComponent(targetAsset: AssetItem = asset) {
+function mountComponent(
+  targetAsset: AssetItem = asset,
+  assetType: 'input' | 'output' = 'output'
+) {
   const onHide = vi.fn()
   const { container, unmount } = render(
     defineComponent({
@@ -113,10 +117,10 @@ function mountComponent(targetAsset: AssetItem = asset) {
         onMounted(() => {
           capturedRef = menuRef.value
         })
-        return { menuRef, asset: targetAsset, onHide }
+        return { menuRef, asset: targetAsset, assetType, onHide }
       },
       template:
-        '<MediaAssetContextMenu ref="menuRef" :asset="asset" asset-type="output" file-kind="image" @hide="onHide" />'
+        '<MediaAssetContextMenu ref="menuRef" :asset="asset" :asset-type="assetType" :show-delete-button="true" file-kind="image" @hide="onHide" />'
     }),
     {
       global: {
@@ -223,4 +227,115 @@ describe('MediaAssetContextMenu', () => {
 
     unmount()
   })
+
+  it('hides Copy Job ID for persistent outputs without provenance', async () => {
+    const { container, unmount } = mountComponent({
+      ...asset,
+      tags: ['output'],
+      loader_path: 'video/old-output.mp4'
+    })
+    await showMenu(container)
+
+    expect(findMenuItem('mediaAsset.actions.copyJobId')).toBeUndefined()
+
+    unmount()
+  })
+
+  it('shows Copy Job ID for persistent outputs with provenance', async () => {
+    const { container, unmount } = mountComponent({
+      ...asset,
+      tags: ['output'],
+      loader_path: 'video/new-output.mp4',
+      job_id: 'prompt-123'
+    })
+    await showMenu(container)
+
+    expect(findMenuItem('mediaAsset.actions.copyJobId')).toBeDefined()
+
+    unmount()
+  })
+
+  it('puts local input deletion directly after download', async () => {
+    const { container, unmount } = mountComponent(asset, 'input')
+    await showMenu(container)
+
+    const downloadIndex = capturedMenu.model.findIndex(
+      (item) => item.label === 'mediaAsset.actions.download'
+    )
+    const deleteIndex = capturedMenu.model.findIndex(
+      (item) => item.label === 'mediaAsset.actions.delete'
+    )
+    expect(deleteIndex).toBe(downloadIndex + 1)
+
+    const deleteItem = findMenuItem('mediaAsset.actions.delete')
+    if (!deleteItem?.command) throw new Error('Delete command is missing')
+    await deleteItem.command({
+      originalEvent: new MouseEvent('click'),
+      item: deleteItem
+    })
+    expect(mediaAssetActions.deleteAssets).toHaveBeenCalledWith(asset, {
+      skipConfirmation: true
+    })
+
+    unmount()
+  })
+
+  it('orders local generated file actions after download', async () => {
+    const persistentOutput = {
+      ...asset,
+      tags: ['output'],
+      loader_path: 'video/render.mp4'
+    }
+    const { container, unmount } = mountComponent(persistentOutput)
+    await showMenu(container)
+
+    const labels = capturedMenu.model.map((item) => item.label)
+    const downloadIndex = labels.indexOf('mediaAsset.actions.download')
+    expect(labels.slice(downloadIndex, downloadIndex + 4)).toEqual([
+      'mediaAsset.actions.download',
+      'mediaAsset.actions.openFileLocation',
+      'mediaAsset.actions.delete',
+      'mediaAsset.actions.deleteSourceFile'
+    ])
+
+    const openLocationItem = findMenuItem('mediaAsset.actions.openFileLocation')
+    if (!openLocationItem?.command) {
+      throw new Error('Open-location command is missing')
+    }
+    openLocationItem.command({
+      originalEvent: new MouseEvent('click'),
+      item: openLocationItem
+    })
+    expect(mediaAssetActions.openAssetLocation).toHaveBeenCalledWith(
+      persistentOutput
+    )
+
+    mediaAssetActions.deleteAssets.mockResolvedValueOnce(true)
+    const deleteItem = findMenuItem('mediaAsset.actions.delete')
+    if (!deleteItem?.command) throw new Error('Delete command is missing')
+    await deleteItem.command({
+      originalEvent: new MouseEvent('click'),
+      item: deleteItem
+    })
+    expect(mediaAssetActions.deleteAssets).toHaveBeenLastCalledWith(
+      persistentOutput,
+      { skipConfirmation: true }
+    )
+
+    mediaAssetActions.deleteAssets.mockResolvedValueOnce(true)
+    const deleteSourceItem = findMenuItem('mediaAsset.actions.deleteSourceFile')
+    if (!deleteSourceItem?.command) {
+      throw new Error('Delete-source command is missing')
+    }
+    await deleteSourceItem.command({
+      originalEvent: new MouseEvent('click'),
+      item: deleteSourceItem
+    })
+    expect(mediaAssetActions.deleteAssets).toHaveBeenLastCalledWith(
+      persistentOutput,
+      { deleteContent: true }
+    )
+
+    unmount()
+  })
 })

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -40,6 +40,7 @@ import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import { isCloud } from '@/platform/distribution/types'
 import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
 import { isPreviewableMediaType } from '@/utils/formatUtil'
+import { isLoopbackHost } from '@/utils/hostWhitelist'
 import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 
@@ -112,17 +113,35 @@ const showWorkflowActions = computed(() => {
 })
 
 const showCopyJobId = computed(() => {
-  return assetType !== 'input'
+  if (assetType === 'input') return false
+  if (asset?.loader_path) return Boolean(asset.job_id || asset.prompt_id)
+  return true
 })
 
 const shouldShowDeleteButton = computed(() => {
   const propAllows = showDeleteButton ?? true
-  const typeAllows =
-    assetType === 'output' || (assetType === 'input' && isCloud)
+  const typeAllows = assetType === 'output' || assetType === 'input'
 
   return propAllows && typeAllows
 })
 
+const shouldShowDeleteSourceFileButton = computed(
+  () =>
+    shouldShowDeleteButton.value &&
+    assetType === 'output' &&
+    !isCloud &&
+    Boolean(asset?.loader_path)
+)
+
+const shouldShowOpenLocationButton = computed(
+  () =>
+    assetType === 'output' &&
+    !isCloud &&
+    Boolean(asset?.loader_path) &&
+    typeof window !== 'undefined' &&
+    isLoopbackHost(window.location.hostname)
+)
+
 // Context menu items
 const contextMenuItems = computed<MenuItem[]>(() => {
   if (!asset) return []
@@ -214,6 +233,43 @@ const contextMenuItems = computed<MenuItem[]>(() => {
     command: () => actions.downloadAssets([asset])
   })
 
+  if (shouldShowOpenLocationButton.value) {
+    items.push({
+      label: t('mediaAsset.actions.openFileLocation'),
+      icon: 'icon-[lucide--folder-open]',
+      command: () => actions.openAssetLocation(asset)
+    })
+  }
+
+  if (shouldShowDeleteButton.value) {
+    items.push({
+      label: t('mediaAsset.actions.delete'),
+      icon: 'icon-[lucide--trash-2]',
+      command: async () => {
+        const deleted = await actions.deleteAssets(asset, {
+          skipConfirmation:
+            !isCloud &&
+            (assetType === 'input' ||
+              (assetType === 'output' && Boolean(asset.loader_path)))
+        })
+        if (deleted) emit('asset-deleted')
+      }
+    })
+  }
+
+  if (shouldShowDeleteSourceFileButton.value) {
+    items.push({
+      label: t('mediaAsset.actions.deleteSourceFile'),
+      icon: 'icon-[lucide--file-x-2]',
+      command: async () => {
+        const deleted = await actions.deleteAssets(asset, {
+          deleteContent: true
+        })
+        if (deleted) emit('asset-deleted')
+      }
+    })
+  }
+
   // Separator before workflow actions (only if there are workflow actions)
   if (showWorkflowActions.value) {
     items.push({ separator: true })
@@ -241,23 +297,6 @@ const contextMenuItems = computed<MenuItem[]>(() => {
     })
   }
 
-  // Delete
-  if (shouldShowDeleteButton.value) {
-    items.push({ separator: true })
-    items.push({
-      label: t('mediaAsset.actions.delete'),
-      icon: 'icon-[lucide--trash-2]',
-      command: async () => {
-        if (asset) {
-          const confirmed = await actions.deleteAssets(asset)
-          if (confirmed) {
-            emit('asset-deleted')
-          }
-        }
-      }
-    })
-  }
-
   return items
 })