improvement(logs): fix trigger badge wrapping, time range picker, status filters, and React anti-patterns

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/__dev__/mock-logs.ts

@@ -0,0 +1,34 @@
+import type { WorkflowLog } from '@/stores/logs/filters/types'
+
+const MOCK_WORKFLOW = {
+  id: '__mock__',
+  name: 'mock-workflow',
+  color: '#6366f1',
+}
+
+const base = (overrides: Partial<WorkflowLog>): WorkflowLog => ({
+  id: `mock-${overrides.trigger}-1`,
+  workflowId: MOCK_WORKFLOW.id,
+  executionId: `mock-exec-${overrides.trigger}-1`,
+  level: 'info',
+  status: 'success',
+  duration: '1.2s',
+  trigger: null,
+  createdAt: new Date().toISOString(),
+  workflow: MOCK_WORKFLOW,
+  cost: { total: 0.001, input: 0.0005, output: 0.0005 },
+  ...overrides,
+})
+
+export const DEV_MOCK_LOGS: WorkflowLog[] = [
+  base({ id: 'mock-gcal-1', trigger: 'google_calendar', executionId: 'mock-exec-gcal-1' }),
+  base({ id: 'mock-gmail-1', trigger: 'gmail', executionId: 'mock-exec-gmail-1' }),
+  base({ id: 'mock-slack-1', trigger: 'slack', executionId: 'mock-exec-slack-1' }),
+  base({
+    id: 'mock-gh-1',
+    trigger: 'github',
+    executionId: 'mock-exec-gh-1',
+    status: 'failed',
+    level: 'error',
+  }),
+]

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx

@@ -293,7 +293,7 @@ function LineChartComponent({
                       className='inline-block h-[6px] w-[6px] rounded-xs'
                       style={{ backgroundColor: resolvedColors[s.id || ''] || s.color }}
                     />
-                    <span style={{ color: 'hsl(var(--muted-foreground))' }}>{s.label}</span>
+                    <span className='text-[var(--text-muted)]'>{s.label}</span>
                   </button>
                 )
               })}

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx

@@ -249,11 +249,13 @@ export const LogsToolbar = memo(function LogsToolbar({
 
   const statusOptions: ComboboxOption[] = useMemo(
     () =>
-      (Object.keys(STATUS_CONFIG) as LogStatus[]).map((status) => ({
-        value: status,
-        label: STATUS_CONFIG[status].label,
-        icon: getColorIcon(STATUS_CONFIG[status].color),
-      })),
+      (Object.keys(STATUS_CONFIG) as LogStatus[])
+        .filter((status) => STATUS_CONFIG[status].filterable)
+        .map((status) => ({
+          value: status,
+          label: STATUS_CONFIG[status].label,
+          icon: getColorIcon(STATUS_CONFIG[status].color),
+        })),
     []
   )
 
@@ -305,34 +307,29 @@ export const LogsToolbar = memo(function LogsToolbar({
     [setTriggers, workspaceId]
   )
 
-  const statusDisplayLabel = useMemo(() => {
-    if (selectedStatuses.length === 0) return 'Status'
-    if (selectedStatuses.length === 1) {
-      const status = statusOptions.find((s) => s.value === selectedStatuses[0])
-      return status?.label || '1 selected'
-    }
-    return `${selectedStatuses.length} selected`
-  }, [selectedStatuses, statusOptions])
+  const statusDisplayLabel =
+    selectedStatuses.length === 0
+      ? 'Status'
+      : selectedStatuses.length === 1
+        ? (statusOptions.find((s) => s.value === selectedStatuses[0])?.label ?? '1 selected')
+        : `${selectedStatuses.length} selected`
 
-  const selectedStatusColor = useMemo(() => {
-    if (selectedStatuses.length !== 1) return null
-    const status = selectedStatuses[0] as LogStatus
-    return STATUS_CONFIG[status]?.color ?? null
-  }, [selectedStatuses])
+  const selectedStatusColor =
+    selectedStatuses.length === 1
+      ? (STATUS_CONFIG[selectedStatuses[0] as LogStatus]?.color ?? null)
+      : null
 
   const workflowOptions: ComboboxOption[] = useMemo(
     () => workflows.map((w) => ({ value: w.id, label: w.name, icon: getColorIcon(w.color, true) })),
     [workflows]
   )
 
-  const workflowDisplayLabel = useMemo(() => {
-    if (workflowIds.length === 0) return 'Workflow'
-    if (workflowIds.length === 1) {
-      const workflow = workflows.find((w) => w.id === workflowIds[0])
-      return workflow?.name || '1 selected'
-    }
-    return `${workflowIds.length} workflows`
-  }, [workflowIds, workflows])
+  const workflowDisplayLabel =
+    workflowIds.length === 0
+      ? 'Workflow'
+      : workflowIds.length === 1
+        ? (workflows.find((w) => w.id === workflowIds[0])?.name ?? '1 selected')
+        : `${workflowIds.length} workflows`
 
   const selectedWorkflow =
     workflowIds.length === 1 ? workflows.find((w) => w.id === workflowIds[0]) : null
@@ -342,14 +339,12 @@ export const LogsToolbar = memo(function LogsToolbar({
     [folderList]
   )
 
-  const folderDisplayLabel = useMemo(() => {
-    if (folderIds.length === 0) return 'Folder'
-    if (folderIds.length === 1) {
-      const folder = folderList.find((f) => f.id === folderIds[0])
-      return folder?.name || '1 selected'
-    }
-    return `${folderIds.length} folders`
-  }, [folderIds, folderList])
+  const folderDisplayLabel =
+    folderIds.length === 0
+      ? 'Folder'
+      : folderIds.length === 1
+        ? (folderList.find((f) => f.id === folderIds[0])?.name ?? '1 selected')
+        : `${folderIds.length} folders`
 
   const triggerOptions: ComboboxOption[] = useMemo(
     () =>
@@ -361,23 +356,21 @@ export const LogsToolbar = memo(function LogsToolbar({
     []
   )
 
-  const triggerDisplayLabel = useMemo(() => {
-    if (triggers.length === 0) return 'Trigger'
-    if (triggers.length === 1) {
-      const trigger = triggerOptions.find((t) => t.value === triggers[0])
-      return trigger?.label || '1 selected'
-    }
-    return `${triggers.length} triggers`
-  }, [triggers, triggerOptions])
-
-  const timeDisplayLabel = useMemo(() => {
-    if (timeRange === 'All time') return 'Time'
-    if (timeRange === 'Custom range' && startDate && endDate) {
-      return `${formatDateShort(startDate)} - ${formatDateShort(endDate)}`
-    }
-    if (timeRange === 'Custom range') return 'Custom range'
-    return timeRange
-  }, [timeRange, startDate, endDate])
+  const triggerDisplayLabel =
+    triggers.length === 0
+      ? 'Trigger'
+      : triggers.length === 1
+        ? (triggerOptions.find((t) => t.value === triggers[0])?.label ?? '1 selected')
+        : `${triggers.length} triggers`
+
+  const timeDisplayLabel =
+    timeRange === 'All time'
+      ? 'Time'
+      : timeRange === 'Custom range' && startDate && endDate
+        ? `${formatDateShort(startDate)} - ${formatDateShort(endDate)}`
+        : timeRange === 'Custom range'
+          ? 'Custom range'
+          : timeRange
 
   /**
    * Handles time range selection from combobox.
@@ -792,42 +785,32 @@ export const LogsToolbar = memo(function LogsToolbar({
             />
 
             {/* Timeline Filter */}
-            <DropdownMenu open={datePickerOpen} onOpenChange={setDatePickerOpen}>
-              <DropdownMenuTrigger asChild>
-                <div>
-                  <Combobox
-                    options={TIME_RANGE_OPTIONS as unknown as ComboboxOption[]}
-                    value={timeRange}
-                    onChange={handleTimeRangeChange}
-                    placeholder='Time'
-                    overlayContent={
-                      <span className='truncate text-[var(--text-primary)]'>
-                        {timeDisplayLabel}
-                      </span>
-                    }
-                    size='sm'
-                    align='end'
-                    className='h-[32px] w-[120px] rounded-md'
-                  />
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side='bottom'
+            <div className='relative'>
+              <Combobox
+                options={TIME_RANGE_OPTIONS as unknown as ComboboxOption[]}
+                value={timeRange}
+                onChange={handleTimeRangeChange}
+                placeholder='Time'
+                overlayContent={
+                  <span className='truncate text-[var(--text-primary)]'>{timeDisplayLabel}</span>
+                }
+                size='sm'
                 align='end'
-                sideOffset={4}
-                collisionPadding={16}
-                className='w-auto p-0'
-              >
-                <DatePicker
-                  mode='range'
-                  startDate={startDate}
-                  endDate={endDate}
-                  onRangeChange={handleDateRangeApply}
-                  onCancel={handleDatePickerCancel}
-                  inline
-                />
-              </DropdownMenuContent>
-            </DropdownMenu>
+                className='h-[32px] w-[120px] rounded-md'
+              />
+              <DatePicker
+                mode='range'
+                showTrigger={false}
+                open={datePickerOpen}
+                onOpenChange={(isOpen) => {
+                  if (!isOpen) handleDatePickerCancel()
+                }}
+                startDate={startDate}
+                endDate={endDate}
+                onRangeChange={handleDateRangeApply}
+                onCancel={handleDatePickerCancel}
+              />
+            </div>
           </div>
         </div>
       </div>