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

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

* chore(logs): remove dev mock logs

* fix(logs): prevent DatePicker onOpenChange from reverting time range after Apply

Author: waleedlatif1

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

@@ -224,6 +224,7 @@ export const LogsToolbar = memo(function LogsToolbar({
 
   const [datePickerOpen, setDatePickerOpen] = useState(false)
   const [previousTimeRange, setPreviousTimeRange] = useState(timeRange)
+  const dateRangeAppliedRef = useRef(false)
   const { data: folders = {} } = useFolderMap(workspaceId)
 
   const { data: allWorkflowList = [] } = useWorkflows(workspaceId)
@@ -249,11 +250,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 +308,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 +340,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 +357,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.
@@ -405,6 +399,7 @@ export const LogsToolbar = memo(function LogsToolbar({
    */
   const handleDateRangeApply = useCallback(
     (start: string, end: string) => {
+      dateRangeAppliedRef.current = true
       setDateRange(start, end)
       setDatePickerOpen(false)
       captureEvent(posthogRef.current, 'logs_filter_applied', {
@@ -792,42 +787,38 @@ 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) {
+                    if (dateRangeAppliedRef.current) {
+                      dateRangeAppliedRef.current = false
+                    } else {
+                      handleDatePickerCancel()
+                    }
+                  }
+                }}
+                startDate={startDate}
+                endDate={endDate}
+                onRangeChange={handleDateRangeApply}
+                onCancel={handleDatePickerCancel}
+              />
+            </div>
           </div>
         </div>
       </div>