From 735e88f67371ecced0fa1cde7ad75803099ddac2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 28 Apr 2026 15:03:03 +0800
Subject: [PATCH] fix(web): snippet usage count

---
 .../snippets/__tests__/use-insert-snippet.spec.tsx | 14 ++++++++++++++
 .../block-selector/snippets/use-insert-snippet.ts  |  7 ++++++-
 web/service/use-snippets.ts                        | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
index 34cc35e47b..aabf65d826 100644
--- a/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
@@ -29,6 +29,7 @@ const mockToastError = vi.fn()
 const mockGetNodes = vi.fn()
 const mockSetNodes = vi.fn()
 const mockSetEdges = vi.fn()
+const mockIncrementSnippetUseCount = vi.fn()
 let mockEdges: unknown[] = [{ id: 'existing-edge', source: 'old', target: 'old-2' }]
 
 vi.mock('@tanstack/react-query', () => ({
@@ -66,6 +67,12 @@ vi.mock('@langgenius/dify-ui/toast', () => ({
   },
 }))
 
+vi.mock('@/service/use-snippets', () => ({
+  useIncrementSnippetUseCountMutation: () => ({
+    mutate: mockIncrementSnippetUseCount,
+  }),
+}))
+
 describe('useInsertSnippet', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -136,6 +143,9 @@ describe('useInsertSnippet', () => {
         nodeId: nextNodes[1]!.id,
       })
       expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+      expect(mockIncrementSnippetUseCount).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-1' },
+      })
     })
 
     it('should connect inserted snippet nodes to the requested edge position', async () => {
@@ -238,6 +248,9 @@ describe('useInsertSnippet', () => {
           targetHandle: 'target',
         }),
       ]))
+      expect(mockIncrementSnippetUseCount).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-1' },
+      })
     })
 
     it('should show error toast when fetching snippet workflow fails', async () => {
@@ -250,6 +263,7 @@ describe('useInsertSnippet', () => {
       })
 
       expect(mockToastError).toHaveBeenCalledWith('insert failed')
+      expect(mockIncrementSnippetUseCount).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
index 775b7fc2eb..65dca39fba 100644
--- a/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
+++ b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
@@ -5,6 +5,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
 import { consoleQuery } from '@/service/client'
+import { useIncrementSnippetUseCountMutation } from '@/service/use-snippets'
 import { CUSTOM_EDGE, ITERATION_CHILDREN_Z_INDEX, LOOP_CHILDREN_Z_INDEX, NODE_WIDTH_X_OFFSET, X_OFFSET } from '../../constants'
 import { useNodesSyncDraft, useWorkflowHistory, WorkflowHistoryEvent } from '../../hooks'
 import { BlockEnum } from '../../types'
@@ -278,6 +279,7 @@ export const useInsertSnippet = () => {
   const store = useStoreApi()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { saveStateToHistory } = useWorkflowHistory()
+  const { mutate: incrementSnippetUseCount } = useIncrementSnippetUseCountMutation()
 
   const handleInsertSnippet = useCallback(async (snippetId: string, insertPayload?: SnippetInsertPayload) => {
     try {
@@ -389,13 +391,16 @@ export const useInsertSnippet = () => {
         nodeId: remappedGraph.nodes[0]?.id,
       })
       handleSyncWorkflowDraft()
+      incrementSnippetUseCount({
+        params: { snippetId },
+      })
       return true
     }
     catch (error) {
       toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
       return false
     }
-  }, [handleSyncWorkflowDraft, queryClient, saveStateToHistory, store, t])
+  }, [handleSyncWorkflowDraft, incrementSnippetUseCount, queryClient, saveStateToHistory, store, t])
 
   return {
     handleInsertSnippet,
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 0600d9ae11..789c47e419 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -201,6 +201,20 @@ export const useDeleteSnippetMutation = () => {
   })
 }
 
+export const useIncrementSnippetUseCountMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.incrementUseCount.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
 export const useExportSnippetMutation = () => {
   return useMutation<string, Error, { snippetId: string, include?: boolean }>({
     mutationFn: ({ snippetId, include = false }) => {