chore/unified-logs-fixes-04b (supabase#37150)

* Shift fixes from supabase#36762

* Add comment

Author: joshenlim

apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -14,6 +14,7 @@ import { useSelectedLog } from 'hooks/analytics/useSelectedLog'
 import useSingleLog from 'hooks/analytics/useSingleLog'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
+import { useFlag } from 'hooks/ui/useFlag'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { Button } from 'ui'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
@@ -27,9 +28,8 @@ import {
 } from './Logs.constants'
 import type { Filters, LogSearchCallback, LogTemplate, QueryType } from './Logs.types'
 import { maybeShowUpgradePrompt } from './Logs.utils'
-import UpgradePrompt from './UpgradePrompt'
-import { useFlag } from 'hooks/ui/useFlag'
 import { PreviewFilterPanelWithUniversal } from './PreviewFilterPanelWithUniversal'
+import UpgradePrompt from './UpgradePrompt'
 
 /**
  * Acts as a container component for the entire log display

apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useParams } from 'common'
-// import CSVButton from 'components/ui/CSVButton'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { useLoadBalancersQuery } from 'data/read-replicas/load-balancers-query'
 import { IS_PLATFORM } from 'lib/constants'
@@ -21,11 +20,6 @@ import { DatePickerValue } from './Logs.DatePickers'
 import { FILTER_OPTIONS, LOG_ROUTES_WITH_REPLICA_SUPPORT, LogsTableName } from './Logs.constants'
 import type { Filters, LogSearchCallback, LogTemplate } from './Logs.types'
 
-interface CustomDateRangePickerProps {
-  value?: { from: Date; to?: Date }
-  onChange: (range: { from: Date; to?: Date } | undefined) => void
-}
-
 function CustomDateRangePicker({ onChange, onCancel }: CustomOptionProps) {
   const [dateRange, setDateRange] = useState<any | undefined>()
 

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -297,7 +297,7 @@ export const UnifiedLogs = () => {
     >
       <DataTableSideBarLayout topBarHeight={topBarHeight}>
         <ResizablePanelGroup direction="horizontal" autoSaveId="logs-layout">
-          <FilterSideBar />
+          <FilterSideBar dateRangeDisabled={{ after: new Date() }} />
           <ResizableHandle
             withHandle
             // disabled={resizableSidebar ? false : true}

apps/studio/components/ui/DataTable/DataTable.types.ts

@@ -30,10 +30,13 @@ export type Slider = {
   options?: Option[]
 }
 
+export type DateRangeDisabled = { before?: Date; after?: Date }
+
 export type Timerange = {
   type: 'timerange'
   options?: Option[] // required for TS
   presets?: DatePreset[]
+  dateRangeDisabled?: DateRangeDisabled
 }
 
 export type Base<TData> = {

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCommand.tsx

@@ -62,6 +62,10 @@ export function DataTableFilterCommand({
 
   const trimmedInputValue = inputValue.trim()
 
+  const queryFields = filterFields.filter(
+    (x) => typeof x.value === 'string' && currentWord.includes(`${x.value}:`)
+  )
+
   // [Joshen] Temporarily disabling as this conflicts with our current CMD K behaviour
   // useHotKey(() => setOpen((open) => !open), 'k')
 
@@ -80,18 +84,6 @@ export function DataTableFilterCommand({
       const field = _filterFields?.find((field) => field.value === filter.id)
       return !field?.commandDisabled
     })
-    const currentDisabledFilters = currentFilters.filter((filter) => {
-      const field = _filterFields?.find((field) => field.value === filter.id)
-      return field?.commandDisabled
-    })
-
-    const commandDisabledFilterKeys = currentDisabledFilters.reduce(
-      (prev, curr) => {
-        prev[curr.id] = curr.value
-        return prev
-      },
-      {} as Record<string, unknown>
-    )
 
     for (const key of Object.keys(searchParams)) {
       const value = searchParams[key as keyof typeof searchParams]
@@ -198,6 +190,7 @@ export function DataTableFilterCommand({
           <div className="absolute top-2 z-50 w-full overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none animate-in">
             {/* default height is 300px but in case of more, we'd like to tease the user */}
             <CommandList className="max-h-[310px] bg-surface-100">
+              <CommandEmpty>No results found.</CommandEmpty>
               <CommandGroup heading="Filter">
                 {filterFields.map((field) => {
                   if (typeof field.value !== 'string') return null
@@ -227,106 +220,113 @@ export function DataTableFilterCommand({
                       }}
                       className="group"
                     >
-                      {field.value}
+                      {field.label}
                       <CommandItemSuggestions field={field} />
                     </CommandItem>
                   )
                 })}
               </CommandGroup>
+
               <CommandSeparator />
-              <CommandGroup heading="Query">
-                {filterFields?.map((field) => {
-                  if (typeof field.value !== 'string') return null
-                  if (!currentWord.includes(`${field.value}:`)) return null
 
-                  const column = table.getColumn(field.value)
-                  const facetedValue =
-                    getFacetedUniqueValues?.(table, field.value) || column?.getFacetedUniqueValues()
+              {queryFields.length > 0 && (
+                <>
+                  <CommandGroup heading="Query">
+                    {queryFields.map((field) => {
+                      const column = table.getColumn(field.value)
+                      const facetedValue =
+                        getFacetedUniqueValues?.(table, field.value) ||
+                        column?.getFacetedUniqueValues()
 
-                  const options = getFieldOptions({ field })
+                      const options = getFieldOptions({ field })
 
-                  return options.map((optionValue) => {
-                    return (
-                      <CommandItem
-                        key={`${String(field.value)}:${optionValue}`}
-                        value={`${String(field.value)}:${optionValue}`}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                        onSelect={(value) => {
-                          setInputValue((prev) =>
-                            replaceInputByFieldType({
-                              prev,
-                              currentWord,
-                              optionValue,
-                              value,
-                              field,
-                            })
-                          )
-                          setCurrentWord('')
-                        }}
-                      >
-                        {`${optionValue}`}
-                        {facetedValue?.has(optionValue) ? (
-                          <span className="ml-auto font-mono text-muted-foreground">
-                            {formatCompactNumber(facetedValue.get(optionValue) || 0)}
-                          </span>
-                        ) : null}
-                      </CommandItem>
-                    )
-                  })
-                })}
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="Suggestions">
-                {lastSearches
-                  ?.sort((a, b) => b.timestamp - a.timestamp)
-                  .slice(0, 5)
-                  .map((item) => {
-                    return (
-                      <CommandItem
-                        key={`suggestion:${item.search}`}
-                        value={`suggestion:${item.search}`}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                        onSelect={(value) => {
-                          const search = value.replace('suggestion:', '')
-                          setInputValue(`${search} `)
-                          setCurrentWord('')
-                        }}
-                        className="group"
-                      >
-                        {item.search}
-                        <span className="ml-auto truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-                          {formatDistanceToNow(item.timestamp, {
-                            addSuffix: true,
-                          })}
-                        </span>
-                        <button
-                          type="button"
+                      return options.map((optionValue) => {
+                        return (
+                          <CommandItem
+                            key={`${String(field.value)}:${optionValue}`}
+                            value={`${String(field.value)}:${optionValue}`}
+                            onMouseDown={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                            }}
+                            onSelect={(value) => {
+                              setInputValue((prev) =>
+                                replaceInputByFieldType({
+                                  prev,
+                                  currentWord,
+                                  optionValue,
+                                  value,
+                                  field,
+                                })
+                              )
+                              setCurrentWord('')
+                            }}
+                          >
+                            {`${optionValue}`}
+                            {facetedValue?.has(optionValue) ? (
+                              <span className="ml-auto font-mono text-muted-foreground">
+                                {formatCompactNumber(facetedValue.get(optionValue) || 0)}
+                              </span>
+                            ) : null}
+                          </CommandItem>
+                        )
+                      })
+                    })}
+                  </CommandGroup>
+                  <CommandSeparator />
+                </>
+              )}
+
+              {lastSearches.length > 0 && (
+                <CommandGroup heading="Suggestions">
+                  {lastSearches
+                    .sort((a, b) => b.timestamp - a.timestamp)
+                    .slice(0, 5)
+                    .map((item) => {
+                      return (
+                        <CommandItem
+                          key={`suggestion:${item.search}`}
+                          value={`suggestion:${item.search}`}
                           onMouseDown={(e) => {
                             e.preventDefault()
                             e.stopPropagation()
                           }}
-                          onClick={(e) => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                            // TODO: extract into function
-                            setLastSearches(lastSearches.filter((i) => i.search !== item.search))
+                          onSelect={(value) => {
+                            const search = value.replace('suggestion:', '')
+                            setInputValue(`${search} `)
+                            setCurrentWord('')
                           }}
-                          className="ml-1 hidden rounded-md p-0.5 hover:bg-background group-aria-[selected=true]:block"
+                          className="group"
                         >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </CommandItem>
-                    )
-                  })}
-              </CommandGroup>
-              <CommandEmpty>No results found.</CommandEmpty>
+                          {item.search}
+                          <span className="ml-auto truncate text-muted-foreground/80 group-aria-[selected=true]:block">
+                            {formatDistanceToNow(item.timestamp, {
+                              addSuffix: true,
+                            })}
+                          </span>
+                          <button
+                            type="button"
+                            onMouseDown={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                            }}
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              // TODO: extract into function
+                              setLastSearches(lastSearches.filter((i) => i.search !== item.search))
+                            }}
+                            className="ml-1 hidden rounded-md p-0.5 hover:bg-background group-aria-[selected=true]:block"
+                          >
+                            <X className="h-4 w-4" />
+                          </button>
+                        </CommandItem>
+                      )
+                    })}
+                </CommandGroup>
+              )}
             </CommandList>
+
             <div className="bg-surface-100 flex flex-wrap justify-between gap-3 border-t bg-accent/50 px-2 py-1.5 text-sm text-accent-foreground">
               <div className="flex flex-wrap gap-3">
                 <span>
@@ -370,10 +370,12 @@ export function DataTableFilterCommand({
 function CommandItemSuggestions<TData>({ field }: { field: DataTableFilterField<TData> }) {
   const { table, getFacetedMinMaxValues, getFacetedUniqueValues } = useDataTable()
   const value = field.value as string
+  const className = 'ml-2 hidden truncate text-foreground-lighter group-aria-[selected=true]:block'
+
   switch (field.type) {
     case 'checkbox': {
       return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
+        <span className={cn(className)}>
           {getFacetedUniqueValues
             ? Array.from(getFacetedUniqueValues(table, value)?.keys() || [])
                 .map((value) => `[${value}]`)
@@ -385,17 +387,13 @@ function CommandItemSuggestions<TData>({ field }: { field: DataTableFilterField<
     case 'slider': {
       const [min, max] = getFacetedMinMaxValues?.(table, value) || [field.min, field.max]
       return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
+        <span className={cn(className)}>
           [{min} - {max}]
         </span>
       )
     }
     case 'input': {
-      return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-          [{`${String(field.value)}`} input]
-        </span>
-      )
+      return <span className={cn(className)}>[{`${String(field.value)}`} input]</span>
     }
     default: {
       return null

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx

@@ -11,14 +11,19 @@ import { DataTableFilterResetButton } from './DataTableFilterResetButton'
 import { DataTableFilterSlider } from './DataTableFilterSlider'
 import { DataTableFilterTimerange } from './DataTableFilterTimerange'
 
+import { DateRangeDisabled } from '../DataTable.types'
 import { useDataTable } from '../providers/DataTableProvider'
 
 // FIXME: use @container (especially for the slider element) to restructure elements
 
 // TODO: only pass the columns to generate the filters!
 // https://tanstack.com/table/v8/docs/framework/react/examples/filters
 
-export function DataTableFilterControls() {
+interface DataTableFilterControls {
+  dateRangeDisabled?: DateRangeDisabled
+}
+
+export function DataTableFilterControls({ dateRangeDisabled }: DataTableFilterControls) {
   const { filterFields } = useDataTable()
   return (
     <Accordion
@@ -55,7 +60,12 @@ export function DataTableFilterControls() {
                       return <DataTableFilterInput {...field} />
                     }
                     case 'timerange': {
-                      return <DataTableFilterTimerange {...field} />
+                      return (
+                        <DataTableFilterTimerange
+                          dateRangeDisabled={dateRangeDisabled}
+                          {...field}
+                        />
+                      )
                     }
                   }
                 })()}

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx

@@ -9,6 +9,7 @@ import { useDataTable } from '../providers/DataTableProvider'
 export function DataTableFilterTimerange<TData>({
   value: _value,
   presets,
+  dateRangeDisabled,
 }: DataTableTimerangeFilterField<TData>) {
   const value = _value as string
   const { table, columnFilters } = useDataTable()
@@ -35,5 +36,7 @@ export function DataTableFilterTimerange<TData>({
     }
   }
 
-  return <DatePickerWithRange {...{ date, setDate, presets }} />
+  return (
+    <DatePickerWithRange dateRangeDisabled={dateRangeDisabled} {...{ date, setDate, presets }} />
+  )
 }

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilters.utils.ts

@@ -218,13 +218,10 @@ export function columnFiltersParser<TData>({
       const regex = /(\w+):([^]*?)(?=\s+\w+:|$)/g
       let match
 
-      console.log('DataTableFilterCommand parsing input:', inputValue)
-
       while ((match = regex.exec(inputValue)) !== null) {
         const [_, fieldName, fieldValue] = match
         if (fieldName && fieldValue) {
           filterPairs[fieldName] = fieldValue.trim()
-          console.log(`Parsed filter pair: ${fieldName} = ${fieldValue.trim()}`)
         }
       }