fix(resources): fix missing imports, memoization, and stale refs acro…

…ss resource pages
simstudioai · waleedlatif1 · Mar 29, 2026 · Mar 29, 2026 · Mar 29, 2026 · Mar 29, 2026
commit 483c35cebffc9c1d5040955a485a0ed68af4406f
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -6,6 +6,7 @@ import { useParams, useRouter } from 'next/navigation'
 import {
   Button,
   Columns2,
+  Combobox,
   type ComboboxOption,
   Download,
   DropdownMenu,
@@ -388,7 +389,7 @@ export function Files() {
         }
       }
     },
-    [workspaceId]
+    [workspaceId, uploadFile]
   )
 
   const handleDownload = useCallback(async (file: WorkspaceFileRecord) => {

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -7,6 +7,7 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import {
   Badge,
   Button,
+  Combobox,
   Modal,
   ModalBody,
   ModalContent,
@@ -26,6 +27,7 @@ import type {
   ResourceRow,
   SearchConfig,
   SelectableConfig,
+  SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
 import { Resource, ResourceHeader } from '@/app/workspace/[workspaceId]/components'
 import {
@@ -157,8 +159,10 @@ export function Document({
     direction: 'asc' | 'desc'
   } | null>(null)
 
-  const enabledFilterParam =
-    enabledFilter.length === 1 ? (enabledFilter[0] as 'enabled' | 'disabled') : 'all'
+  const enabledFilterParam = useMemo(
+    () => (enabledFilter.length === 1 ? (enabledFilter[0] as 'enabled' | 'disabled') : 'all'),
+    [enabledFilter]
+  )
 
   const {
     chunks: initialChunks,
@@ -636,16 +640,18 @@ export function Document({
     </div>
   )
 
-  const filterTags: FilterTag[] = [
-    ...enabledFilter.map((value) => ({
-      label: `Status: ${value === 'enabled' ? 'Enabled' : 'Disabled'}`,
-      onRemove: () => {
-        setEnabledFilter(enabledFilter.filter((v) => v !== value))
-        setSelectedChunks(new Set())
-        void goToPage(1)
-      },
-    })),
-  ]
+  const filterTags: FilterTag[] = useMemo(
+    () =>
+      enabledFilter.map((value) => ({
+        label: `Status: ${value === 'enabled' ? 'Enabled' : 'Disabled'}`,
+        onRemove: () => {
+          setEnabledFilter((prev) => prev.filter((v) => v !== value))
+          setSelectedChunks(new Set())
+          void goToPage(1)
+        },
+      })),
+    [enabledFilter, goToPage]
+  )
 
   const handleChunkClick = useCallback((rowId: string) => {
     setSelectedChunkId(rowId)

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -806,22 +806,25 @@ export function KnowledgeBase({
       : []),
   ]
 
-  const sortConfig: SortConfig = {
-    options: [
-      { id: 'filename', label: 'Name' },
-      { id: 'fileSize', label: 'Size' },
-      { id: 'tokenCount', label: 'Tokens' },
-      { id: 'chunkCount', label: 'Chunks' },
-      { id: 'uploadedAt', label: 'Uploaded' },
-      { id: 'enabled', label: 'Status' },
-    ],
-    active: { column: sortBy, direction: sortOrder },
-    onSort: (column, direction) => {
-      setSortBy(column as DocumentSortField)
-      setSortOrder(direction)
-      setCurrentPage(1)
-    },
-  }
+  const sortConfig: SortConfig = useMemo(
+    () => ({
+      options: [
+        { id: 'filename', label: 'Name' },
+        { id: 'fileSize', label: 'Size' },
+        { id: 'tokenCount', label: 'Tokens' },
+        { id: 'chunkCount', label: 'Chunks' },
+        { id: 'uploadedAt', label: 'Uploaded' },
+        { id: 'enabled', label: 'Status' },
+      ],
+      active: { column: sortBy, direction: sortOrder },
+      onSort: (column, direction) => {
+        setSortBy(column as DocumentSortField)
+        setSortOrder(direction)
+        setCurrentPage(1)
+      },
+    }),
+    [sortBy, sortOrder]
+  )
 
   const filterContent = (
     <div className='flex w-[240px] flex-col gap-3 p-3'>
@@ -897,36 +900,39 @@ export function KnowledgeBase({
       </>
     ) : null
 
-  const filterTags: FilterTag[] = [
-    ...(enabledFilter.length > 0
-      ? [
-          {
-            label:
-              enabledFilter.length === 1
-                ? `Status: ${enabledFilter[0] === 'enabled' ? 'Enabled' : 'Disabled'}`
-                : 'Status: 2 selected',
-            onRemove: () => {
-              setEnabledFilter([])
-              setCurrentPage(1)
-              setSelectedDocuments(new Set())
-              setIsSelectAllMode(false)
+  const filterTags: FilterTag[] = useMemo(
+    () => [
+      ...(enabledFilter.length > 0
+        ? [
+            {
+              label:
+                enabledFilter.length === 1
+                  ? `Status: ${enabledFilter[0] === 'enabled' ? 'Enabled' : 'Disabled'}`
+                  : 'Status: 2 selected',
+              onRemove: () => {
+                setEnabledFilter([])
+                setCurrentPage(1)
+                setSelectedDocuments(new Set())
+                setIsSelectAllMode(false)
+              },
             },
+          ]
+        : []),
+      ...tagFilterEntries
+        .filter((f) => f.tagSlot && f.value.trim())
+        .map((f) => ({
+          label: `${f.tagName}: ${f.value}`,
+          onRemove: () => {
+            const updated = tagFilterEntries.filter((_, idx) => idx !== tagFilterEntries.indexOf(f))
+            setTagFilterEntries(updated)
+            setCurrentPage(1)
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
           },
-        ]
-      : []),
-    ...tagFilterEntries
-      .filter((f) => f.tagSlot && f.value.trim())
-      .map((f) => ({
-        label: `${f.tagName}: ${f.value}`,
-        onRemove: () => {
-          const updated = tagFilterEntries.filter((_, idx) => idx !== tagFilterEntries.indexOf(f))
-          setTagFilterEntries(updated)
-          setCurrentPage(1)
-          setSelectedDocuments(new Set())
-          setIsSelectAllMode(false)
-        },
-      })),
-  ]
+        })),
+    ],
+    [enabledFilter, tagFilterEntries]
+  )
 
   const selectableConfig: SelectableConfig = {
     selectedIds: selectedDocuments,

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -39,6 +39,7 @@ import type {
   ResourceColumn,
   ResourceRow,
   SearchConfig,
+  SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
 import {
   ResourceHeader,
@@ -479,12 +480,12 @@ export default function Logs() {
   const handleLogContextMenu = useCallback(
     (e: React.MouseEvent, rowId: string) => {
       e.preventDefault()
-      const log = logs.find((l) => l.id === rowId) ?? null
+      const log = sortedLogs.find((l) => l.id === rowId) ?? null
       setContextMenuPosition({ x: e.clientX, y: e.clientY })
       setContextMenuLog(log)
       setContextMenuOpen(true)
     },
-    [logs]
+    [sortedLogs]
   )
 
   const handleCopyExecutionId = useCallback(() => {
@@ -1072,7 +1073,7 @@ export default function Logs() {
         label: 'Export',
         icon: Download,
         onClick: handleExport,
-        disabled: !userPermissions.canEdit || isExporting || logs.length === 0,
+        disabled: !userPermissions.canEdit || isExporting || sortedLogs.length === 0,
       },
       {
         label: 'Notifications',
@@ -1105,7 +1106,7 @@ export default function Logs() {
       handleExport,
       userPermissions.canEdit,
       isExporting,
-      logs.length,
+      sortedLogs.length,
       handleOpenNotificationSettings,
     ]
   )
@@ -1387,7 +1388,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
   }, [resetFilters, onSearchQueryChange])
 
   return (
-    <div className='flex flex-col gap-3 p-3'>
+    <div className='flex w-[240px] flex-col gap-3 p-3'>
       <div className='flex flex-col gap-1.5'>
         <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
         <Combobox

diff --git a/...sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/...sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -3,17 +3,7 @@
 import { useMemo, useState } from 'react'
 import { Search } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
-import {
-  ArrowUpDown,
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  SModalTabs,
-  SModalTabsList,
-  SModalTabsTrigger,
-} from '@/components/emcn'
+import { Button, Combobox, SModalTabs, SModalTabsList, SModalTabsTrigger } from '@/components/emcn'
 import { Input } from '@/components/ui'
 import { formatDate } from '@/lib/core/utils/formatting'
 import { RESOURCE_REGISTRY } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
@@ -51,6 +41,8 @@ interface SortConfig {
   direction: 'asc' | 'desc'
 }
 
+const DEFAULT_SORT: SortConfig = { column: 'deleted', direction: 'desc' }
+
 const SORT_OPTIONS: { column: SortColumn; direction: 'asc' | 'desc'; label: string }[] = [
   { column: 'deleted', direction: 'desc', label: 'Deleted (newest first)' },
   { column: 'name', direction: 'asc', label: 'Name (A–Z)' },
@@ -214,8 +206,8 @@ export function RecentlyDeleted() {
       const normalized = searchTerm.toLowerCase()
       items = items.filter((r) => r.name.toLowerCase().includes(normalized))
     }
-    const col = activeSort?.column ?? 'deleted'
-    const dir = activeSort?.direction ?? 'desc'
+    const col = (activeSort ?? DEFAULT_SORT).column
+    const dir = (activeSort ?? DEFAULT_SORT).direction
     return [...items].sort((a, b) => {
       let cmp = 0
       switch (col) {
@@ -234,6 +226,7 @@ export function RecentlyDeleted() {
   }, [resources, activeTab, searchTerm, activeSort])
 
   const showNoResults = searchTerm.trim() && filtered.length === 0 && resources.length > 0
+  const selectedSort = activeSort ?? DEFAULT_SORT
 
   function handleRestore(resource: DeletedResource) {
     setRestoringIds((prev) => new Set(prev).add(resource.id))
@@ -285,43 +278,27 @@ export function RecentlyDeleted() {
             className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant='outline'
-              size='sm'
-              className='h-[30px] shrink-0 gap-1.5 px-2.5'
-              disabled={isLoading}
-            >
-              <ArrowUpDown className='h-[12px] w-[12px]' />
-              <span className='text-xs'>
-                {SORT_OPTIONS.find(
-                  (o) =>
-                    o.column === (activeSort?.column ?? 'deleted') &&
-                    o.direction === (activeSort?.direction ?? 'desc')
-                )?.label ?? 'Sort'}
-              </span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align='end' className='w-48'>
-            {SORT_OPTIONS.map((option) => {
-              const isActive =
-                (activeSort?.column ?? 'deleted') === option.column &&
-                (activeSort?.direction ?? 'desc') === option.direction
-              return (
-                <DropdownMenuItem
-                  key={`${option.column}-${option.direction}`}
-                  onClick={() =>
-                    setActiveSort({ column: option.column, direction: option.direction })
-                  }
-                  className={isActive ? 'bg-[var(--bg-selected)]' : ''}
-                >
-                  {option.label}
-                </DropdownMenuItem>
+        <div className='w-[190px] shrink-0'>
+          <Combobox
+            size='sm'
+            align='end'
+            disabled={isLoading}
+            value={`${selectedSort.column}:${selectedSort.direction}`}
+            onChange={(value) => {
+              const option = SORT_OPTIONS.find(
+                (sortOption) => `${sortOption.column}:${sortOption.direction}` === value
               )
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
+              if (option) {
+                setActiveSort({ column: option.column, direction: option.direction })
+              }
+            }}
+            options={SORT_OPTIONS.map((option) => ({
+              label: option.label,
+              value: `${option.column}:${option.direction}`,
+            }))}
+            className='h-[30px] rounded-lg border-[var(--border)] bg-transparent px-2.5 text-small dark:bg-[var(--surface-4)]'
+          />
+        </div>
       </div>
 
       <SModalTabs value={activeTab} onValueChange={(v) => setActiveTab(v as ResourceType)}>

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
@@ -137,10 +137,24 @@ export function Tables() {
         case 'updated':
           cmp = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
           break
+        case 'owner': {
+          const aName = members?.find((m) => m.userId === a.createdBy)?.name ?? ''
+          const bName = members?.find((m) => m.userId === b.createdBy)?.name ?? ''
+          cmp = aName.localeCompare(bName)
+          break
+        }
       }
       return dir === 'asc' ? cmp : -cmp
     })
-  }, [tables, debouncedSearchTerm, rowCountFilter, ownerFilter, columnTypeFilter, activeSort])
+  }, [
+    tables,
+    debouncedSearchTerm,
+    rowCountFilter,
+    ownerFilter,
+    columnTypeFilter,
+    activeSort,
+    members,
+  ])
 
   const rows: ResourceRow[] = useMemo(
     () =>
@@ -184,6 +198,7 @@ export function Tables() {
         { id: 'columns', label: 'Columns' },
         { id: 'rows', label: 'Rows' },
         { id: 'created', label: 'Created' },
+        { id: 'owner', label: 'Owner' },
         { id: 'updated', label: 'Last Updated' },
       ],
       active: activeSort,
@@ -466,7 +481,7 @@ export function Tables() {
         }
       }
     },
-    [workspaceId, router]
+    [workspaceId, router, uploadCsv]
   )
 
   const handleListUploadCsv = useCallback(() => {