Add tests to paginateQuery and DRY log info metadata panel (#309)

latitude-dev · Sep 30, 2024 · 3eccea7 · 3eccea7
1 parent bcaf89c
commit 3eccea7
Show file tree

Hide file tree

Showing 13 changed files with 307 additions and 165 deletions.
diff --git a/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx b/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
@@ -0,0 +1,53 @@
+import { ReactNode, useRef, useState } from 'react'
+
+import { cn, TabSelector, TabSelectorOption } from '@latitude-data/web-ui'
+import useDynamicHeight from '$/hooks/useDynamicHeight'
+
+type RenderProps = { selectedTab: string }
+export function MetadataInfoTabs({
+  className,
+  tabs = [
+    { label: 'Metadata', value: 'metadata' },
+    { label: 'Messages', value: 'messages' },
+  ],
+  children,
+  beforeTabs,
+}: {
+  children: (args: RenderProps) => ReactNode
+  tabs?: TabSelectorOption<string>[]
+  beforeTabs?: ReactNode
+  className?: string
+}) {
+  const [selectedTab, setSelectedTab] = useState<string>('metadata')
+  const ref = useRef<HTMLDivElement>(null)
+  const height = useDynamicHeight({ ref, paddingBottom: 16 })
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex-shrink-0 flex flex-col',
+        'border border-border rounded-lg items-center custom-scrollbar overflow-y-auto',
+        className,
+      )}
+      style={{
+        maxHeight: height ? `${height}px` : 'auto',
+      }}
+    >
+      <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
+        <div className='pt-6'>
+          <TabSelector
+            options={tabs}
+            selected={selectedTab}
+            onSelect={setSelectedTab}
+          />
+        </div>
+      </div>
+      <div className='my-5 px-4 flex flex-col gap-y-5 relative w-full'>
+        {beforeTabs}
+        <div className='flex flex-col gap-4 w-full'>
+          {children({ selectedTab })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx b/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
@@ -23,13 +23,11 @@ export function EvaluationResultMessages({
 
   if (!providerLog) return null
   return (
-    <div className='flex flex-col gap-4 py-6 w-full'>
-      <MessageList
-        messages={messages}
-        messageLayout='vertical'
-        separator
-        size='small'
-      />
-    </div>
+    <MessageList
+      messages={messages}
+      messageLayout='vertical'
+      separator
+      size='small'
+    />
   )
 }
diff --git a/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Metadata.tsx b/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Metadata.tsx
@@ -78,7 +78,7 @@ export function EvaluationResultMetadata({
   const { data: providers, isLoading: providersLoading } = useProviderApiKeys()
 
   return (
-    <div className='flex flex-col gap-6 py-6 w-full'>
+    <>
       <MetadataItem label='Result id'>
         <ClickToCopy copyValue={evaluationResult.id.toString()}>
           <Text.H5 align='right' color='foregroundMuted'>
@@ -149,6 +149,6 @@ export function EvaluationResultMetadata({
         loading={!providerLog}
         value={getReasonFromProviderLog(providerLog)}
       />
-    </div>
+    </>
   )
 }
diff --git a/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -1,21 +1,15 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import {
   DocumentLogWithMetadata,
   EvaluationResultWithMetadata,
 } from '@latitude-data/core/repositories'
-import {
-  Button,
-  Icon,
-  Modal,
-  ReactStateDispatch,
-  TabSelector,
-} from '@latitude-data/web-ui'
-import useDynamicHeight from '$/hooks/useDynamicHeight'
+import { Modal, ReactStateDispatch, Text } from '@latitude-data/web-ui'
 import useProviderLogs from '$/stores/providerLogs'
 import useSWR from 'swr'
 
+import { MetadataInfoTabs } from '../../../../../_components/MetadataInfoTabs'
 import { DocumentLogInfo } from '../../../../../logs/_components/DocumentLogs/DocumentLogInfo'
 import { EvaluationResultMessages } from './Messages'
 import { EvaluationResultMetadata } from './Metadata'
@@ -84,53 +78,40 @@ export function EvaluationResultInfo({
   evaluationResult: EvaluationResultWithMetadata
   providerLog?: ProviderLogDto
 }) {
-  const ref = useRef<HTMLDivElement>(null)
-  const [selectedTab, setSelectedTab] = useState<string>('metadata')
   const [selected, setSelected] = useState<MaybeDocumentLog>(null)
   const onClickOpen = useCallback(async () => {
     setSelected(evaluationResult.documentLogId)
   }, [evaluationResult.documentLogId])
-  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <>
-      <div
-        ref={ref}
-        className='relative w-80 flex-shrink-0 flex flex-col border border-border rounded-lg items-center custom-scrollbar overflow-y-auto'
-        style={{
-          maxHeight: height ? `${height}px` : 'auto',
-        }}
-      >
-        <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
-          <div className='pt-6'>
-            <TabSelector
-              options={[
-                { label: 'Metadata', value: 'metadata' },
-                { label: 'Messages', value: 'messages' },
-              ]}
-              selected={selectedTab}
-              onSelect={setSelectedTab}
-            />
+      <MetadataInfoTabs
+        className='w-80'
+        beforeTabs={
+          <div>
+            <Text.H6 color='foregroundMuted'>
+              Showing the evaluation metadata. Check the{' '}
+            </Text.H6>
+            <button onClick={onClickOpen}>
+              <Text.H6 color='primary'>original log metadata here</Text.H6>
+            </button>
           </div>
-        </div>
-        <div className='px-4 flex flex-col relative w-full max-w-full'>
-          {selectedTab === 'metadata' && (
-            <EvaluationResultMetadata
-              evaluation={evaluation}
-              evaluationResult={evaluationResult}
-              providerLog={providerLog}
-            />
-          )}
-          {selectedTab === 'messages' && (
-            <EvaluationResultMessages providerLog={providerLog} />
-          )}
-        </div>
-        <div className='w-full py-4 sticky bottom-0 bg-white flex justify-center'>
-          <Button variant='link' onClick={onClickOpen}>
-            Check original log
-            <Icon name='arrowRight' widthClass='w-4' heightClass='h-4' />
-          </Button>
-        </div>
-      </div>
+        }
+      >
+        {({ selectedTab }) => (
+          <>
+            {selectedTab === 'metadata' && (
+              <EvaluationResultMetadata
+                evaluation={evaluation}
+                evaluationResult={evaluationResult}
+                providerLog={providerLog}
+              />
+            )}
+            {selectedTab === 'messages' && (
+              <EvaluationResultMessages providerLog={providerLog} />
+            )}
+          </>
+        )}
+      </MetadataInfoTabs>
       {selected ? (
         <DocumentLogInfoModal
           documentLogId={selected}

diff --git a/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx b/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
@@ -77,7 +77,17 @@ export const EvaluationResultsTable = ({
   const ref = useRef<HTMLTableElement>(null)
   const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
-    <Table ref={ref} className='table-auto' maxHeight={height}>
+    <Table
+      ref={ref}
+      className='table-auto'
+      maxHeight={height}
+      externalFooter={
+        <TablePaginationFooter
+          pagination={pagination}
+          countLabel={countLabel}
+        />
+      }
+    >
       <TableHeader className='sticky top-0 z-10'>
         <TableRow>
           <TableHead>Time</TableHead>
@@ -156,11 +166,6 @@ export const EvaluationResultsTable = ({
           </TableRow>
         ))}
       </TableBody>
-      <TablePaginationFooter
-        colSpan={6}
-        pagination={pagination}
-        countLabel={countLabel}
-      />
     </Table>
   )
 }
diff --git a/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx b/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx
@@ -24,13 +24,11 @@ export function DocumentLogMessages({
 
   if (!providerLogs) return null
   return (
-    <div className='flex flex-col gap-4 py-6 w-full'>
-      <MessageList
-        messages={messages}
-        messageLayout='vertical'
-        separator
-        size='small'
-      />
-    </div>
+    <MessageList
+      messages={messages}
+      messageLayout='vertical'
+      separator
+      size='small'
+    />
   )
 }
diff --git a/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx b/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx
@@ -82,7 +82,7 @@ export function DocumentLogMetadata({
   )
 
   return (
-    <div className='flex flex-col gap-6 py-6 w-full'>
+    <>
       <MetadataItem label='Log uuid'>
         <ClickToCopy copyValue={documentLog.uuid}>
           <Text.H5 align='right' color='foregroundMuted'>
@@ -187,6 +187,6 @@ export function DocumentLogMetadata({
           </Text.H5>
         </ClickToCopy>
       </MetadataItem>
-    </div>
+    </>
   )
 }
diff --git a/...mitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/index.tsx b/...mitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/index.tsx
@@ -1,25 +1,23 @@
 'use client'
 
-import { useRef, useState } from 'react'
-
 import { ProviderLogDto } from '@latitude-data/core/browser'
 import { DocumentLogWithMetadata } from '@latitude-data/core/repositories'
-import { Alert, cn, TabSelector } from '@latitude-data/web-ui'
-import useDynamicHeight from '$/hooks/useDynamicHeight'
+import { Alert } from '@latitude-data/web-ui'
 
+import { MetadataInfoTabs } from '../../../../_components/MetadataInfoTabs'
 import { DocumentLogMessages } from './Messages'
 import { DocumentLogMetadata, MetadataItem } from './Metadata'
 
 function DocumentLogMetadataLoading() {
   return (
-    <div className='flex flex-col gap-6 py-6 w-full'>
+    <>
       <MetadataItem label='Log uuid' loading />
       <MetadataItem label='Timestamp' loading />
       <MetadataItem label='Tokens' loading />
       <MetadataItem label='Cost' loading />
       <MetadataItem label='Duration' loading />
       <MetadataItem label='Version' loading />
-    </div>
+    </>
   )
 }
 
@@ -36,35 +34,10 @@ export function DocumentLogInfo({
   error?: Error
   className?: string
 }) {
-  const [selectedTab, setSelectedTab] = useState<string>('metadata')
-  const ref = useRef<HTMLDivElement>(null)
-  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex-shrink-0 flex flex-col',
-        'border border-border rounded-lg items-center custom-scrollbar overflow-y-auto',
-        className,
-      )}
-      style={{
-        maxHeight: height ? `${height}px` : 'auto',
-      }}
-    >
-      <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
-        <div className='pt-6'>
-          <TabSelector
-            options={[
-              { label: 'Metadata', value: 'metadata' },
-              { label: 'Messages', value: 'messages' },
-            ]}
-            selected={selectedTab}
-            onSelect={setSelectedTab}
-          />
-        </div>
-      </div>
-      <div className='px-4 flex relative w-full h-full max-w-full'>
-        {isLoading ? (
+    <MetadataInfoTabs className={className}>
+      {({ selectedTab }) =>
+        isLoading ? (
           <DocumentLogMetadataLoading />
         ) : (
           <>
@@ -88,8 +61,8 @@ export function DocumentLogInfo({
               />
             )}
           </>
-        )}
-      </div>
-    </div>
+        )
+      }
+    </MetadataInfoTabs>
   )
 }
diff --git a/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -39,7 +39,17 @@ export const DocumentLogsTable = ({
   const ref = useRef<HTMLTableElement>(null)
   const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
-    <Table className='table-auto' ref={ref} maxHeight={height}>
+    <Table
+      className='table-auto'
+      ref={ref}
+      maxHeight={height}
+      externalFooter={
+        <TablePaginationFooter
+          pagination={pagination}
+          countLabel={countLabel}
+        />
+      }
+    >
       <TableHeader className='sticky top-0 z-10'>
         <TableRow>
           <TableHead>Time</TableHead>
@@ -107,11 +117,6 @@ export const DocumentLogsTable = ({
           </TableRow>
         ))}
       </TableBody>
-      <TablePaginationFooter
-        colSpan={7}
-        pagination={pagination}
-        countLabel={countLabel}
-      />
     </Table>
   )
 }