fix(files): close retention races and preserve browser navigation

Author: mzxchandra

apps/sim/app/workspace/[workspaceId]/files/browser.tsx

@@ -11,7 +11,13 @@ import {
 import { Files } from '@/app/workspace/[workspaceId]/files/files'
 import FilesLoading from '@/app/workspace/[workspaceId]/files/loading'
 import { ProjectFiles } from '@/app/workspace/[workspaceId]/files/project-files'
-import { fileOwnerParsers } from '@/app/workspace/[workspaceId]/files/search-params'
+import {
+  fileOwnerParsers,
+  filesFilterParsers,
+  filesFilterUrlKeys,
+  filesParsers,
+  projectFilesScopeParsers,
+} from '@/app/workspace/[workspaceId]/files/search-params'
 import { useWorkspaceProject } from '@/hooks/queries/project-files'
 
 interface FilesBrowserProps {
@@ -75,20 +81,44 @@ interface FileOwnerTabsProps {
 
 function FileOwnerTabs({ owner, projectId, workspaceId }: FileOwnerTabsProps) {
   const { navigate } = useFileNavigation(owner)
+  const { fileId } = useParams<{ fileId?: string }>()
+  const [, setLocation] = useQueryStates({
+    ...fileOwnerParsers,
+    ...filesParsers,
+    ...projectFilesScopeParsers,
+  })
+  const [, setFilters] = useQueryStates(filesFilterParsers, filesFilterUrlKeys)
   return (
     <TabStrip
       variant='underline'
       tabs={[
         { id: 'project', title: 'Project', active: owner.entityType === 'project' },
         { id: 'workspace', title: 'Environment', active: owner.entityType === 'workspace' },
       ]}
-      onSelect={(next) =>
-        navigate(
-          next === 'project'
-            ? `/workspace/${encodeURIComponent(workspaceId)}/files?owner=project&projectId=${encodeURIComponent(projectId)}`
-            : `/workspace/${encodeURIComponent(workspaceId)}/files`
+      onSelect={(next) => {
+        if (next === owner.entityType || (next !== 'project' && next !== 'workspace')) return
+        if (fileId) {
+          navigate(
+            next === 'project'
+              ? `/workspace/${encodeURIComponent(workspaceId)}/files?owner=project&projectId=${encodeURIComponent(projectId)}`
+              : `/workspace/${encodeURIComponent(workspaceId)}/files`
+          )
+          return
+        }
+        void setFilters({ uploadedBy: null })
+        void setLocation(
+          {
+            owner: next,
+            projectId: next === 'project' ? projectId : null,
+            folderId: null,
+            shareFileId: null,
+            historyFileId: null,
+            new: null,
+            scope: null,
+          },
+          { history: 'push' }
         )
-      }
+      }}
     />
   )
 }

apps/sim/app/workspace/[workspaceId]/files/components/file-filter-controls.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, ChipCombobox, type ComboboxOption } from '@sim/emcn'
+import { Chip, ChipCombobox, type ComboboxOption } from '@sim/emcn'
 import { FILE_BROWSER_SIZE_OPTIONS, FILE_BROWSER_TYPE_OPTIONS } from '@/lib/workspace-files/browser'
 import {
   ResourceFilterPanel,
@@ -94,13 +94,9 @@ export function FileFilterControls({
         </ResourceFilterSection>
       )}
       {(types.length > 0 || sizes.length > 0 || creatorIds.length > 0) && (
-        <Button
-          variant='ghost'
-          onClick={onClear}
-          className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
-        >
+        <Chip onClick={onClear} className='w-full'>
           Clear all filters
-        </Button>
+        </Chip>
       )}
     </ResourceFilterPanel>
   )

apps/sim/app/workspace/[workspaceId]/files/project-files.tsx

@@ -78,8 +78,10 @@ import { useContextMenu } from '@/hooks/use-context-menu'
 import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
 import { useFileListRoom } from '@/hooks/use-file-list-room'
 import { useInlineRename } from '@/hooks/use-inline-rename'
+import { useSearchFilterValue } from '@/hooks/use-search-filter-value'
 import { useUrlSort } from '@/hooks/use-url-sort'
 
+const FILES_SEARCH_DEBOUNCE_MS = 200
 const COLUMNS: ResourceColumn[] = [...FILE_BROWSER_COLUMNS]
 
 interface ProjectFilesProps {
@@ -118,10 +120,11 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   const sort = useUrlSort(filesSortParams, filesFilterUrlKeys)
   const [{ scope }, setScope] = useQueryStates(projectFilesScopeParsers)
   const archived = scope === 'archived'
+  const searchFilter = useSearchFilterValue(search, FILES_SEARCH_DEBOUNCE_MS)
   const list = useProjectFiles(project.id, {
     scope,
-    folderId: search || archived ? undefined : (folderId ?? undefined),
-    search: search || undefined,
+    folderId: searchFilter || archived ? undefined : (folderId ?? undefined),
+    search: searchFilter || undefined,
     types,
     sizes,
     creatorIds,
@@ -132,6 +135,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   const folders = useProjectFileFolders(project.id, scope)
   const detail = useProjectFile(project.id, fileId)
   const historyFile = useProjectFile(project.id, historyFileId ?? undefined)
+  const sharedFile = useProjectFile(project.id, shareFileId ?? undefined)
   const [copySource, setCopySource] = useState<FileCopySource | null>(null)
   const createFile = useCreateProjectFile(project.id)
   const createFolder = useCreateProjectFileFolder(project.id)
@@ -162,11 +166,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   const filesById = new Map(files.map((file) => [file.id, file]))
   const items = list.data?.pages.flatMap((page) => page.items) ?? []
   const creators = list.data?.pages[0]?.creators ?? []
-  const shareFile = shareFileId
-    ? file?.id === shareFileId
-      ? file
-      : files.find((item) => item.id === shareFileId)
-    : undefined
+  const shareFile = sharedFile.isError ? undefined : sharedFile.data?.file
   const allFolders = folders.data?.folders ?? []
   const folderById = useMemo(
     () => new Map(allFolders.map((folder) => [folder.id, folder])),
@@ -188,9 +188,19 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
     (value, options) => {
       void setFilters({ search: value }, options)
     },
-    { debounceMs: 200 }
+    { debounceMs: FILES_SEARCH_DEBOUNCE_MS }
   )
 
+  function navigateToFolder(nextFolderId: string | null) {
+    if (fileId) {
+      const folderQuery = nextFolderId ? `&folderId=${encodeURIComponent(nextFolderId)}` : ''
+      navigation.navigate(`${base}?${ownerQuery}${folderQuery}`)
+      return
+    }
+    searchSetter('')
+    void setNavigation({ folderId: nextFolderId, new: null })
+  }
+
   function openFile(id: string) {
     const target = filesById.get(id)
     if (target && isArchiveFileName(target.name) && canWrite && !archived) {
@@ -267,7 +277,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   async function addFolder() {
     try {
       const result = await createFolder.mutateAsync({ name: 'New Folder', parentId: folderId })
-      void setNavigation({ folderId: result.folder.id })
+      navigateToFolder(result.folder.id)
     } catch (error) {
       toast.error(getErrorMessage(error, 'Unable to create this folder'))
     }
@@ -321,8 +331,8 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   }
 
   const breadcrumbs: BreadcrumbItem[] = [
-    { label: project.name, onClick: () => navigation.navigate(`${base}?${ownerQuery}`) },
-    { label: 'Files', folderId: null, onClick: () => navigation.navigate(`${base}?${ownerQuery}`) },
+    { label: project.name, onClick: () => navigateToFolder(null) },
+    { label: 'Files', folderId: null, onClick: () => navigateToFolder(null) },
   ]
   const ancestors: BreadcrumbItem[] = []
   const visited = new Set<string>()
@@ -333,8 +343,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
     ancestors.unshift({
       label: ancestor.name,
       folderId: id,
-      onClick: () =>
-        navigation.navigate(`${base}?${ownerQuery}&folderId=${encodeURIComponent(id)}`),
+      onClick: () => navigateToFolder(id),
     })
     ancestor = ancestor.parentId ? folderById.get(ancestor.parentId) : undefined
   }
@@ -435,7 +444,13 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
     }
   })
 
-  const visibleRowIds = useMemo(() => rows.map((row) => row.id), [rows])
+  const visibleRowIds = useMemo(
+    () =>
+      list.data?.pages.flatMap((page) =>
+        page.items.map((item) => (item.kind === 'folder' ? `folder:${item.id}` : item.id))
+      ) ?? [],
+    [list.data?.pages]
+  )
   const { selectedRowIds, selectable, clearSelection, replaceSelection } = useResourceRowSelection({
     visibleRowIds,
     isKeyboardBlocked: () => Boolean(fileId || rename.editingId || deleteTarget || archived),
@@ -475,7 +490,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
     selection: { selectedRowIds, visibleRowIds, replaceSelection },
     onSpringOpenFolder: (folderId, options) => void setNavigation({ folderId }, options),
     currentFolderId: folderId,
-    bodyDropFolderId: search ? undefined : folderId,
+    bodyDropFolderId: searchFilter ? undefined : folderId,
     externalDrop: {
       matches: hasExternalFiles,
       onDropIntoFolder: (dataTransfer, targetFolderId) => {
@@ -619,7 +634,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
               archived
                 ? undefined
                 : id.startsWith('folder:')
-                  ? void setNavigation({ folderId: id.slice('folder:'.length) })
+                  ? navigateToFolder(id.slice('folder:'.length))
                   : openFile(id)
             }
             onRowContextMenu={
@@ -686,7 +701,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
         position={menu.position}
         onClose={menu.closeMenu}
         onOpen={() => {
-          if (contextItem?.kind === 'folder') void setNavigation({ folderId: contextItem.id })
+          if (contextItem?.kind === 'folder') navigateToFolder(contextItem.id)
           else if (contextItem) openFile(contextItem.id)
         }}
         onShare={

apps/sim/app/workspace/[workspaceId]/lib/seed-workspace-files.test.ts

@@ -1,4 +1,3 @@
-import { emcnMock } from '@sim/testing/mocks/emcn.mock'
 import { describe, expect, it, vi } from 'vitest'
 import { workspaceFilesKeys } from '@/hooks/queries/utils/workspace-file-query'
 
@@ -10,9 +9,6 @@ vi.mock('@/lib/workspace-files/queries', () => ({
   listWorkspaceFilesWithShares: mockListWorkspaceFilesWithShares,
 }))
 
-/** The key factory lives in a `'use client'` module that pulls emcn's CSS at import. */
-vi.mock('@sim/emcn', () => emcnMock)
-
 import { seedWorkspaceFiles } from '@/app/workspace/[workspaceId]/lib/seed-workspace-files'
 
 const WORKSPACE_ID = 'ws-123'