feat(search): add tables, files, knowledge bases, and jobs to cmd-k search

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/_components/command-items.tsx

@@ -163,3 +163,27 @@ export const MemoizedPageItem = memo(
     prev.name === next.name &&
     prev.shortcut === next.shortcut
 )
+
+export const MemoizedIconItem = memo(
+  function IconItem({
+    value,
+    onSelect,
+    name,
+    icon: Icon,
+  }: {
+    value: string
+    onSelect: () => void
+    name: string
+    icon: ComponentType<{ className?: string }>
+  }) {
+    return (
+      <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
+        <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+          <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />
+        </div>
+        <span className='truncate font-base text-[var(--text-body)]'>{name}</span>
+      </Command.Item>
+    )
+  },
+  (prev, next) => prev.value === next.value && prev.name === next.name && prev.icon === next.icon
+)

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/_components/search-groups.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import type { ComponentType } from 'react'
 import { memo } from 'react'
 import { Command } from 'cmdk'
+import { Calendar, Database, File, Table } from '@/components/emcn/icons'
 import type {
   SearchBlockItem,
   SearchDocItem,
@@ -11,6 +13,7 @@ import type { PageItem, TaskItem, WorkflowItem, WorkspaceItem } from '../utils'
 import { GROUP_HEADING_CLASSNAME } from '../utils'
 import {
   MemoizedCommandItem,
+  MemoizedIconItem,
   MemoizedPageItem,
   MemoizedTaskItem,
   MemoizedWorkflowItem,
@@ -239,3 +242,37 @@ export const PagesGroup = memo(function PagesGroup({
     </Command.Group>
   )
 })
+
+export const TablesGroup = createIconGroup('Tables', 'table', Table)
+export const FilesGroup = createIconGroup('Files', 'file', File)
+export const KnowledgeBasesGroup = createIconGroup('Knowledge Bases', 'knowledge-base', Database)
+export const JobsGroup = createIconGroup('Jobs', 'job', Calendar)
+
+function createIconGroup(
+  heading: string,
+  prefix: string,
+  icon: ComponentType<{ className?: string }>
+) {
+  return memo(function IconGroup({
+    items,
+    onSelect,
+  }: {
+    items: TaskItem[]
+    onSelect: (item: TaskItem) => void
+  }) {
+    if (items.length === 0) return null
+    return (
+      <Command.Group heading={heading} className={GROUP_HEADING_CLASSNAME}>
+        {items.map((item) => (
+          <MemoizedIconItem
+            key={item.id}
+            value={`${item.name} ${prefix}-${item.id}`}
+            onSelect={() => onSelect(item)}
+            name={item.name}
+            icon={icon}
+          />
+        ))}
+      </Command.Group>
+    )
+  })
+}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -21,7 +21,11 @@ import type {
 import {
   BlocksGroup,
   DocsGroup,
+  FilesGroup,
+  JobsGroup,
+  KnowledgeBasesGroup,
   PagesGroup,
+  TablesGroup,
   TasksGroup,
   ToolOpsGroup,
   ToolsGroup,
@@ -40,6 +44,10 @@ export function SearchModal({
   workflows = [],
   workspaces = [],
   tasks = [],
+  tables = [],
+  files = [],
+  knowledgeBases = [],
+  jobs = [],
   isOnWorkflowPage = false,
 }: SearchModalProps) {
   const params = useParams()
@@ -284,6 +292,24 @@ export function SearchModal({
     return filterAndSort(docs, (d) => `${d.name} docs documentation doc-${d.id}`, deferredSearch)
   }, [isOnWorkflowPage, docs, deferredSearch])
 
+  const filteredTables = useMemo(
+    () => filterAndSort(tables, (t) => `${t.name} table-${t.id}`, deferredSearch),
+    [tables, deferredSearch]
+  )
+  const filteredFiles = useMemo(
+    () => filterAndSort(files, (f) => `${f.name} file-${f.id}`, deferredSearch),
+    [files, deferredSearch]
+  )
+  const filteredKnowledgeBases = useMemo(
+    () =>
+      filterAndSort(knowledgeBases, (kb) => `${kb.name} knowledge-base-${kb.id}`, deferredSearch),
+    [knowledgeBases, deferredSearch]
+  )
+  const filteredJobs = useMemo(
+    () => filterAndSort(jobs, (j) => `${j.name} job-${j.id}`, deferredSearch),
+    [jobs, deferredSearch]
+  )
+
   const filteredWorkflows = useMemo(
     () => filterAndSort(workflows, (w) => `${w.name} workflow-${w.id}`, deferredSearch),
     [workflows, deferredSearch]
@@ -346,6 +372,10 @@ export function SearchModal({
             <TriggersGroup items={filteredTriggers} onSelect={handleBlockSelectAsTrigger} />
             <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
             <TasksGroup items={filteredTasks} onSelect={handleTaskSelect} />
+            <TablesGroup items={filteredTables} onSelect={handleTaskSelect} />
+            <FilesGroup items={filteredFiles} onSelect={handleTaskSelect} />
+            <KnowledgeBasesGroup items={filteredKnowledgeBases} onSelect={handleTaskSelect} />
+            <JobsGroup items={filteredJobs} onSelect={handleTaskSelect} />
             <ToolOpsGroup items={filteredToolOps} onSelect={handleToolOperationSelect} />
             <WorkspacesGroup items={filteredWorkspaces} onSelect={handleWorkspaceSelect} />
             <DocsGroup items={filteredDocs} onSelect={handleDocSelect} />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts

@@ -37,6 +37,10 @@ export interface SearchModalProps {
   workflows?: WorkflowItem[]
   workspaces?: WorkspaceItem[]
   tasks?: TaskItem[]
+  tables?: TaskItem[]
+  files?: TaskItem[]
+  knowledgeBases?: TaskItem[]
+  jobs?: TaskItem[]
   isOnWorkflowPage?: boolean
 }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -77,6 +77,9 @@ import {
 } from '@/app/workspace/[workspaceId]/w/hooks'
 import { getBrandConfig } from '@/ee/whitelabeling'
 import { useFolders } from '@/hooks/queries/folders'
+import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
+import { useWorkspaceSchedules } from '@/hooks/queries/schedules'
+import { useTablesList } from '@/hooks/queries/tables'
 import {
   useDeleteTask,
   useDeleteTasks,
@@ -85,6 +88,7 @@ import {
   useRenameTask,
   useTasks,
 } from '@/hooks/queries/tasks'
+import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useTaskEvents } from '@/hooks/use-task-events'
@@ -745,6 +749,59 @@ export const Sidebar = memo(function Sidebar() {
     [fetchedTasks, workspaceId]
   )
 
+  const { data: fetchedTables = [] } = useTablesList(workspaceId)
+  const { data: fetchedFiles = [] } = useWorkspaceFiles(workspaceId as string)
+  const { data: fetchedKnowledgeBases = [] } = useKnowledgeBasesQuery(workspaceId)
+  const { data: fetchedSchedules = [] } = useWorkspaceSchedules(workspaceId)
+
+  const searchModalTables = useMemo(
+    () =>
+      permissionConfig.hideTablesTab
+        ? []
+        : fetchedTables.map((t) => ({
+            id: t.id,
+            name: t.name,
+            href: `/workspace/${workspaceId}/tables/${t.id}`,
+          })),
+    [fetchedTables, workspaceId, permissionConfig.hideTablesTab]
+  )
+
+  const searchModalFiles = useMemo(
+    () =>
+      permissionConfig.hideFilesTab
+        ? []
+        : fetchedFiles.map((f) => ({
+            id: f.id,
+            name: f.name,
+            href: `/workspace/${workspaceId}/files`,
+          })),
+    [fetchedFiles, workspaceId, permissionConfig.hideFilesTab]
+  )
+
+  const searchModalKnowledgeBases = useMemo(
+    () =>
+      permissionConfig.hideKnowledgeBaseTab
+        ? []
+        : fetchedKnowledgeBases.map((kb) => ({
+            id: kb.id,
+            name: kb.name,
+            href: `/workspace/${workspaceId}/knowledge/${kb.id}`,
+          })),
+    [fetchedKnowledgeBases, workspaceId, permissionConfig.hideKnowledgeBaseTab]
+  )
+
+  const searchModalJobs = useMemo(
+    () =>
+      fetchedSchedules
+        .filter((s) => s.sourceType === 'job')
+        .map((s) => ({
+          id: s.id,
+          name: s.jobTitle || 'Untitled Job',
+          href: `/workspace/${workspaceId}/scheduled-tasks`,
+        })),
+    [fetchedSchedules, workspaceId]
+  )
+
   const taskIds = useMemo(() => tasks.map((t) => t.id).filter((id) => id !== 'new'), [tasks])
 
   const { selectedTasks, handleTaskClick } = useTaskSelection({ taskIds })
@@ -1671,6 +1728,10 @@ export const Sidebar = memo(function Sidebar() {
         workflows={searchModalWorkflows}
         workspaces={searchModalWorkspaces}
         tasks={tasks}
+        tables={searchModalTables}
+        files={searchModalFiles}
+        knowledgeBases={searchModalKnowledgeBases}
+        jobs={searchModalJobs}
         isOnWorkflowPage={!!workflowId}
       />