Implement filter logs by creation date and refactor a bit (#712)

latitude-dev · Dec 13, 2024 · e8256b7 · e8256b7
1 parent 58889c0
commit e8256b7
Show file tree

Hide file tree

Showing 56 changed files with 1,318 additions and 513 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -12,8 +12,8 @@
     "lint": "next lint",
     "start": "next start",
     "tc": "tsc --noEmit",
-    "test": "vitest --run",
-    "test:watch": "vitest"
+    "test": "TZ=UTC vitest --run",
+    "test:watch": "TZ=UTC vitest"
   },
   "dependencies": {
     "@intercom/messenger-js-sdk": "^0.0.14",

diff --git a/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts b/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
@@ -8,7 +8,7 @@ import useDocumentLogWithPaginationPosition, {
   LogWithPosition,
 } from '$/stores/documentLogWithPaginationPosition'
 import useDocumentLogsPagination from '$/stores/useDocumentLogsPagination'
-import { useFilterOptions } from '$/hooks/useLogFilterOptions'
+import { useDefaultLogFilterOptions } from '$/hooks/logFilters/useDefaultLogFilterOptions'
 
 const ONLY_ONE_PAGE = '1'
 
@@ -28,7 +28,7 @@ export function useLogHistoryParams({
     commitVersionUuid,
   })
 
-  const filterOptions = useFilterOptions()
+  const filterOptions = useDefaultLogFilterOptions()
   const { data: pagination, isLoading: isLoadingCounter } =
     useDocumentLogsPagination({
       documentUuid: document.documentUuid,

diff --git a/...valuations/[evaluationId]/_components/ManualEvaluationResults/DocumentLogsTable/index.tsx b/...valuations/[evaluationId]/_components/ManualEvaluationResults/DocumentLogsTable/index.tsx
@@ -30,7 +30,7 @@ import { useSearchParams } from 'next/navigation'
 import { DocumentLogWithMetadataAndErrorAndEvaluationResult } from '..'
 import { ResultCellContent } from '../../EvaluationResults/EvaluationResultsTable'
 import { useCommits } from '$/stores/commitsStore'
-import { useFilterOptions } from '$/hooks/useLogFilterOptions'
+import { useDefaultLogFilterOptions } from '$/hooks/logFilters/useDefaultLogFilterOptions'
 
 const countLabel = (selected: number) => (count: number) => {
   return selected ? `${selected} of ${count} logs selected` : `${count} logs`
@@ -69,7 +69,7 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
     const { commit } = useCurrentCommit()
     const { document } = useCurrentDocument()
     const { data: commits } = useCommits()
-    const filterOptions = useFilterOptions()
+    const filterOptions = useDefaultLogFilterOptions()
     const { data: pagination, isLoading } = useDocumentLogsPagination({
       documentUuid: commits ? document.documentUuid : undefined,
       projectId: project.id,

diff --git a/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -6,6 +6,7 @@ import { capitalize } from 'lodash-es'
 import {
   DocumentLogFilterOptions,
   EvaluationResultableType,
+  LOG_FILTERS_ENCODED_PARAMS,
 } from '@latitude-data/core/browser'
 import { buildPagination } from '@latitude-data/core/lib/pagination/buildPagination'
 import {
@@ -142,6 +143,7 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
       })
     const queryParams =
       typeof window !== 'undefined' ? window.location.search : ''
+
     return (
       <Table
         ref={ref}
@@ -160,6 +162,8 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
                       .root,
                     count: pagination.count,
                     queryParams,
+                    encodeQueryParams: false,
+                    paramsToEncode: LOG_FILTERS_ENCODED_PARAMS,
                     page: Number(page),
                     pageSize: Number(pageSize),
                   })

diff --git a/...logs/_components/Filters/CommitFilter.tsx → ...components/Filters/CommitFilter/index.tsx b/...logs/_components/Filters/CommitFilter.tsx → ...components/Filters/CommitFilter/index.tsx
@@ -4,25 +4,25 @@ import { Commit } from '@latitude-data/core/browser'
 import { Button, Checkbox, Text } from '@latitude-data/web-ui'
 import { useCommits } from '$/stores/commitsStore'
 
-import { BadgeCommit } from '../../../../../_components/Sidebar/CommitSelector/CommitItem'
-import { FilterButton } from './FilterButton'
+import { BadgeCommit } from '../../../../../../_components/Sidebar/CommitSelector/CommitItem'
+import { FilterButton, useFilterButtonColor } from '../FilterButton'
 
 function CommitCheckbox({
   commit,
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
 }: {
   commit: Commit
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
 }) {
   const isSelected = useMemo(
     () => selectedCommitsIds.includes(commit.id),
     [selectedCommitsIds, commit],
   )
 
   const onSelect = useCallback(() => {
-    setSelectedCommitsIds(
+    onSelectCommits(
       isSelected
         ? selectedCommitsIds.filter((id) => id !== commit.id)
         : [...selectedCommitsIds, commit.id],
@@ -51,12 +51,12 @@ function CommitsList({
   title,
   commits,
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
 }: {
   title: string
   commits: Commit[]
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
 }) {
   return (
     <div className='flex flex-col gap-2 w-full'>
@@ -67,7 +67,7 @@ function CommitsList({
             <CommitCheckbox
               commit={commit}
               selectedCommitsIds={selectedCommitsIds}
-              setSelectedCommitsIds={setSelectedCommitsIds}
+              onSelectCommits={onSelectCommits}
             />
           </li>
         ))}
@@ -78,12 +78,12 @@ function CommitsList({
 
 export function CommitFilter({
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
   isDefault,
   reset,
 }: {
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
   isDefault: boolean
   reset: () => void
 }) {
@@ -119,19 +119,22 @@ export function CommitFilter({
     return selectedCommit?.title ?? '1 version'
   }, [isDefault, selectedCommitsIds, commits])
 
-  const filterColor = useMemo(() => {
-    if (isDefault) return 'foregroundMuted'
-    if (selectedCommitsIds.length) return 'primary'
-    return 'destructive'
-  }, [isDefault, selectedCommitsIds])
+  const filterColor = useFilterButtonColor({
+    isDefault,
+    isSelected: selectedCommitsIds.length > 0,
+  })
 
   return (
-    <FilterButton label={filterLabel} color={filterColor}>
+    <FilterButton
+      label={filterLabel}
+      color={filterColor.color}
+      darkColor={filterColor.darkColor}
+    >
       <div className='flex flex-row gap-4 w-full flex-nowrap'>
         <Checkbox
           checked={headerState}
           onClick={() =>
-            setSelectedCommitsIds(headerState ? [] : commits.map((c) => c.id))
+            onSelectCommits(headerState ? [] : commits.map((c) => c.id))
           }
           label={
             <Text.H5 noWrap ellipsis>
@@ -140,29 +143,24 @@ export function CommitFilter({
           }
         />
 
-        <Button
-          variant='link'
-          className='p-0'
-          onClick={reset}
-          disabled={isDefault}
-        >
+        <Button size='none' variant='link' onClick={reset} disabled={isDefault}>
           Reset
         </Button>
       </div>
-      <div className='flex flex-col gap-4 pr-4'>
+      <div className='flex flex-col gap-4'>
         {drafts.length > 0 ? (
           <CommitsList
             title='Drafts'
             commits={drafts}
             selectedCommitsIds={selectedCommitsIds}
-            setSelectedCommitsIds={setSelectedCommitsIds}
+            onSelectCommits={onSelectCommits}
           />
         ) : null}
         <CommitsList
           title='Published versions'
           commits={mergedCommits}
           selectedCommitsIds={selectedCommitsIds}
-          setSelectedCommitsIds={setSelectedCommitsIds}
+          onSelectCommits={onSelectCommits}
         />
       </div>
     </FilterButton>

diff --git a/...ons/[commitUuid]/documents/[documentUuid]/logs/_components/Filters/FilterButton/index.tsx b/...ons/[commitUuid]/documents/[documentUuid]/logs/_components/Filters/FilterButton/index.tsx
@@ -1,21 +1,57 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 
 import { Popover } from '@latitude-data/web-ui'
 
+type AllowedColors = 'primary' | 'foregroundMuted' | 'destructive'
+
+type AllowedDarkColors =
+  | 'dark:text-foreground'
+  | 'dark:text-foregroundMuted'
+  | 'dark:text-destructive'
+type FilterColor = {
+  color: AllowedColors
+  darkColor: AllowedDarkColors
+}
+export function useFilterButtonColor({
+  isDefault,
+  isSelected,
+}: {
+  isDefault: boolean
+  isSelected: boolean
+}) {
+  return useMemo<FilterColor>(() => {
+    if (isDefault) {
+      return {
+        color: 'foregroundMuted',
+        darkColor: 'dark:text-foregroundMuted',
+      }
+    }
+    if (isSelected) {
+      return { color: 'primary', darkColor: 'dark:text-foreground' }
+    }
+
+    return { color: 'destructive', darkColor: 'dark:text-destructive' }
+  }, [isDefault, isSelected])
+}
+
 export function FilterButton({
   label,
   color,
+  darkColor,
   children,
 }: {
   label: string
-  color: 'primary' | 'foregroundMuted' | 'destructive'
+  color: AllowedColors
+  darkColor?: AllowedDarkColors
   children: ReactNode
 }) {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
     <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Popover.ButtonTrigger color={color}>{label}</Popover.ButtonTrigger>
+      <Popover.ButtonTrigger color={color} overrideDarkColor={darkColor}>
+        {label}
+      </Popover.ButtonTrigger>
       <Popover.Content align='end' scrollable size='large'>
         {children}
       </Popover.Content>

diff --git a/...s/_components/Filters/LogSourceFilter.tsx → ...ponents/Filters/LogSourceFilter/index.tsx b/...s/_components/Filters/LogSourceFilter.tsx → ...ponents/Filters/LogSourceFilter/index.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from 'react'
 import { LOG_SOURCES, LogSources } from '@latitude-data/core/browser'
 import { Button, Checkbox, Text } from '@latitude-data/web-ui'
 
-import { FilterButton } from './FilterButton'
+import { FilterButton, useFilterButtonColor } from '../FilterButton'
 
 const LogSourceLabel: { [key in LogSources]: string } = {
   [LogSources.API]: 'API',
@@ -16,24 +16,24 @@ const LogSourceLabel: { [key in LogSources]: string } = {
 function LogSourceCheckbox({
   logSource,
   selectedLogSources,
-  setSelectedLogSources,
+  onSelectLogSources,
 }: {
   logSource: LogSources
   selectedLogSources: LogSources[]
-  setSelectedLogSources: (selectedLogSources: LogSources[]) => void
+  onSelectLogSources: (selectedLogSources: LogSources[]) => void
 }) {
   const isSelected = useMemo(
     () => selectedLogSources.includes(logSource),
     [selectedLogSources, logSource],
   )
 
   const onSelect = useCallback(() => {
-    setSelectedLogSources(
+    onSelectLogSources(
       isSelected
         ? selectedLogSources.filter((origin) => origin !== logSource)
         : [...selectedLogSources, logSource],
     )
-  }, [selectedLogSources, logSource, isSelected])
+  }, [selectedLogSources, logSource, isSelected, onSelectLogSources])
 
   return (
     <Checkbox
@@ -50,12 +50,12 @@ function LogSourceCheckbox({
 
 export function LogSourceFilter({
   selectedLogSources,
-  setSelectedLogSources,
+  onSelectLogSources,
   isDefault,
   reset,
 }: {
   selectedLogSources: LogSources[]
-  setSelectedLogSources: (selectedOrigins: LogSources[]) => void
+  onSelectLogSources: (selectedOrigins: LogSources[]) => void
   isDefault: boolean
   reset: () => void
 }) {
@@ -75,19 +75,22 @@ export function LogSourceFilter({
     return LogSourceLabel[selectedLogSources[0]!]
   }, [isDefault, selectedLogSources])
 
-  const filterColor = useMemo(() => {
-    if (isDefault) return 'foregroundMuted'
-    if (selectedLogSources.length) return 'primary'
-    return 'destructive'
-  }, [isDefault, selectedLogSources])
+  const filterColor = useFilterButtonColor({
+    isDefault,
+    isSelected: selectedLogSources.length > 0,
+  })
 
   return (
-    <FilterButton label={filterLabel} color={filterColor}>
+    <FilterButton
+      label={filterLabel}
+      color={filterColor.color}
+      darkColor={filterColor.darkColor}
+    >
       <div className='flex flex-row gap-4 w-full flex-nowrap'>
         <Checkbox
           checked={headerState}
           onCheckedChange={() =>
-            setSelectedLogSources(headerState ? [] : LOG_SOURCES)
+            onSelectLogSources(headerState ? [] : LOG_SOURCES)
           }
           label={
             <Text.H5 noWrap ellipsis>
@@ -96,22 +99,17 @@ export function LogSourceFilter({
           }
         />
 
-        <Button
-          variant='link'
-          className='p-0'
-          onClick={reset}
-          disabled={isDefault}
-        >
+        <Button size='none' variant='link' onClick={reset} disabled={isDefault}>
           Reset
         </Button>
       </div>
-      <ul className='flex flex-col gap-2 pr-4'>
-        {Object.values(LogSources).map((logSource) => (
+      <ul className='flex flex-col gap-2'>
+        {LOG_SOURCES.map((logSource) => (
           <li key={logSource}>
             <LogSourceCheckbox
               logSource={logSource}
               selectedLogSources={selectedLogSources}
-              setSelectedLogSources={setSelectedLogSources}
+              onSelectLogSources={onSelectLogSources}
             />
           </li>
         ))}