improvement(knowledge): open document tags from row context menu (#5510)

* improvement(knowledge): open document tags from row context menu

The document row context menu had a Tags entry that only navigated to the document detail page, requiring another click through the breadcrumb dropdown to actually edit tags. It now opens the tag editor directly, and shows even when the document has no tags yet so a first tag can be added.

* fix(knowledge): gate document tags menu item on edit permission

Matches the existing disableRename/disableDelete/disableToggleEnabled pattern; the document detail breadcrumb already hides its Tags entry for non-editors the same way.

* fix(knowledge): derive tags modal document data from live list cache

The modal was fed a frozen document snapshot taken at right-click time. After a save, the mutation only invalidates the single-document and KB-detail queries (not the documents list query), so the modal's own sync effect rebuilt tags from the stale snapshot and could revert or drop the just-saved value. Track only the document id and look it up from the same documents array updateDocument() patches, so the modal always sees current data.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -49,6 +49,7 @@ import type {
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
 import { FloatingOverflowText, Resource } from '@/app/workspace/[workspaceId]/components'
+import { DocumentTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components'
 import {
   ActionBar,
   AddConnectorModal,
@@ -342,6 +343,8 @@ export function KnowledgeBase({
   const [contextMenuDocument, setContextMenuDocument] = useState<DocumentData | null>(null)
   const [showRenameModal, setShowRenameModal] = useState(false)
   const [documentToRename, setDocumentToRename] = useState<DocumentData | null>(null)
+  const [showDocumentTagsModal, setShowDocumentTagsModal] = useState(false)
+  const [documentForTagsId, setDocumentForTagsId] = useState<string | null>(null)
   const showAddConnectorModal = addConnectorType != null
   const updateAddConnectorParam = useCallback(
     (value: string | null) => {
@@ -531,6 +534,14 @@ export function KnowledgeBase({
     setShowRenameModal(true)
   }
 
+  /**
+   * Opens the document tags modal
+   */
+  const handleViewDocumentTags = (doc: DocumentData) => {
+    setDocumentForTagsId(doc.id)
+    setShowDocumentTagsModal(true)
+  }
+
   /**
    * Saves the renamed document
    */
@@ -1345,6 +1356,17 @@ export function KnowledgeBase({
         />
       )}
 
+      {documentForTagsId && (
+        <DocumentTagsModal
+          open={showDocumentTagsModal}
+          onOpenChange={setShowDocumentTagsModal}
+          knowledgeBaseId={id}
+          documentId={documentForTagsId}
+          documentData={documents.find((doc) => doc.id === documentForTagsId) ?? null}
+          onDocumentUpdate={(updates) => updateDocument(documentForTagsId, updates)}
+        />
+      )}
+
       <ChipModal
         open={showConnectorsModal}
         onOpenChange={setShowConnectorsModal}
@@ -1371,11 +1393,6 @@ export function KnowledgeBase({
         onClose={handleContextMenuClose}
         hasDocument={contextMenuDocument !== null}
         isDocumentEnabled={contextMenuDocument?.enabled ?? true}
-        hasTags={
-          contextMenuDocument
-            ? getDocumentTags(contextMenuDocument, tagDefinitions).length > 0
-            : false
-        }
         selectedCount={selectedDocuments.size}
         enabledCount={enabledCount}
         disabledCount={disabledCount}
@@ -1413,16 +1430,8 @@ export function KnowledgeBase({
             : undefined
         }
         onViewTags={
-          contextMenuDocument && selectedDocuments.size === 1
-            ? () => {
-                const urlParams = new URLSearchParams({
-                  kbName: knowledgeBaseName,
-                  docName: contextMenuDocument.filename || 'Document',
-                })
-                router.push(
-                  `/workspace/${workspaceId}/knowledge/${id}/${contextMenuDocument.id}?${urlParams.toString()}`
-                )
-              }
+          contextMenuDocument && selectedDocuments.size === 1 && userPermissions.canEdit
+            ? () => handleViewDocumentTags(contextMenuDocument)
             : undefined
         }
         onDelete={

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/document-context-menu/document-context-menu.tsx

@@ -22,7 +22,6 @@ interface DocumentContextMenuProps {
   onAddDocument?: () => void
   isDocumentEnabled?: boolean
   hasDocument: boolean
-  hasTags?: boolean
   disableRename?: boolean
   disableToggleEnabled?: boolean
   disableDelete?: boolean
@@ -50,7 +49,6 @@ export function DocumentContextMenu({
   onAddDocument,
   isDocumentEnabled = true,
   hasDocument,
-  hasTags = false,
   disableRename = false,
   disableToggleEnabled = false,
   disableDelete = false,
@@ -70,7 +68,7 @@ export function DocumentContextMenu({
   }
 
   const hasNavigationSection = !isMultiSelect && (!!onOpenInNewTab || !!onOpenSource)
-  const hasEditSection = !isMultiSelect && (!!onRename || (hasTags && !!onViewTags))
+  const hasEditSection = !isMultiSelect && (!!onRename || !!onViewTags)
   const hasStateSection = !!onToggleEnabled
   const hasDestructiveSection = !!onDelete
 
@@ -121,10 +119,10 @@ export function DocumentContextMenu({
                 Rename
               </DropdownMenuItem>
             )}
-            {!isMultiSelect && hasTags && onViewTags && (
+            {!isMultiSelect && onViewTags && (
               <DropdownMenuItem onSelect={onViewTags}>
                 <TagIcon />
-                View tags
+                Tags
               </DropdownMenuItem>
             )}
             {hasEditSection && (hasStateSection || hasDestructiveSection) && (