feat(dashboard): display usertask saved events

dashboard/src/app/[tenantId]/userTaskDef/audit/[...ids]/AuditTable.tsx

@@ -0,0 +1,88 @@
+'use client'
+import { useState } from 'react'
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+import { UserTaskEvent } from 'littlehorse-client/proto'
+
+type AuditTableProps = {
+  events: UserTaskEvent[]
+}
+
+export function AuditTable({ events }: AuditTableProps) {
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 10
+
+  const allEvents = events.filter(event => event.saved !== undefined).reverse()
+
+  const totalPages = Math.ceil(allEvents.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const paginatedEvents = allEvents.slice(startIndex, startIndex + itemsPerPage)
+
+  return (
+    <div className="mx-auto w-full max-w-2xl border-blue-300">
+      <Table>
+        <TableCaption className="mb-2">Audit Log</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Saved At</TableHead>
+            <TableHead>Saved By</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {paginatedEvents.map(event => (
+            <TableRow key={`${event.time}`}>
+              <TableCell>{new Date(event.time ?? 'N/A').toLocaleString()}</TableCell>
+              <TableCell> {event.saved?.userId}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {totalPages > 1 && (
+        <Pagination className="mt-4">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                onClick={e => {
+                  e.preventDefault()
+                  if (currentPage > 1) setCurrentPage(currentPage - 1)
+                }}
+              />
+            </PaginationItem>
+            {[...Array(totalPages)].map((_, index) => (
+              <PaginationItem key={index + 1}>
+                <PaginationLink
+                  href="#"
+                  isActive={currentPage === index + 1}
+                  onClick={e => {
+                    e.preventDefault()
+                    setCurrentPage(index + 1)
+                  }}
+                >
+                  {index + 1}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={e => {
+                  e.preventDefault()
+                  if (currentPage < totalPages) setCurrentPage(currentPage + 1)
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  )
+}

dashboard/src/app/[tenantId]/userTaskDef/audit/[...ids]/page.tsx

@@ -1,10 +1,10 @@
 import { getUserTaskRun } from '@/app/actions/getUserTaskRun'
 import { Metadata } from 'next'
-import { notFound, useParams } from 'next/navigation'
+import { notFound } from 'next/navigation'
 import { ClientError, Status } from 'nice-grpc-common'
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Details } from '@/app/[tenantId]/components/Details'
 import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
+import { AuditTable } from './AuditTable'
 
 type Props = { params: { ids: string[]; tenantId: string } }
 
@@ -13,6 +13,7 @@ export default async function Page({ params: { ids, tenantId } }: Props) {
 
   try {
     const userTaskRun = await getUserTaskRun(tenantId, wfRunId, userTaskGuid)
+
     return (
       <div>
         <Details
@@ -28,22 +29,14 @@ export default async function Page({ params: { ids, tenantId } }: Props) {
             userTaskRunId: userTaskGuid,
           }}
         />
-        <Table>
-          <TableCaption>Audit Log</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Timestamp</TableHead>
-              {/* <TableHead>User</TableHead> */}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {userTaskRun.events.map(event => (
-              <TableRow key={event.time}>
-                <TableCell className="font-medium">{new Date(event.time as string).toLocaleString()}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        {userTaskRun.events.some(event => event.saved !== undefined) ? (
+          <AuditTable events={userTaskRun.events} />
+        ) : (
+          <div className="mt-20 w-full text-center">
+            <p className="text-center text-xl font-bold">No save history found.</p>
+            <p className="text-center text-primary/50">This user task has not been saved since it was created.</p>
+          </div>
+        )}
       </div>
     )
   } catch (error) {

dashboard/src/components/ui/pagination.tsx

@@ -1,110 +1,74 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 
-import { cn } from "@/components/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { cn } from '@/components/utils'
+import { ButtonProps, buttonVariants } from '@/components/ui/button'
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn('mx-auto flex w-full justify-center', className)}
     {...props}
   />
 )
-Pagination.displayName = "Pagination"
+Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  )
+)
+PaginationContent.displayName = 'PaginationContent'
 
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
 ))
-PaginationItem.displayName = "PaginationItem"
+PaginationItem.displayName = 'PaginationItem'
 
 type PaginationLinkProps = {
   isActive?: boolean
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>
 
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
+const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
   <a
-    aria-current={isActive ? "page" : undefined}
+    aria-current={isActive ? 'page' : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isActive ? 'outline' : 'ghost',
         size,
       }),
       className
     )}
     {...props}
   />
 )
-PaginationLink.displayName = "PaginationLink"
+PaginationLink.displayName = 'PaginationLink'
 
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
     <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
 )
-PaginationPrevious.displayName = "PaginationPrevious"
+PaginationPrevious.displayName = 'PaginationPrevious'
 
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
     <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-PaginationNext.displayName = "PaginationNext"
+PaginationNext.displayName = 'PaginationNext'
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 )
-PaginationEllipsis.displayName = "PaginationEllipsis"
+PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,