Use TimestampInfo for scheduled backups (#33892)

* Use TimestampInfo for scheduled backups

* Fix

* Update TimestampInfo

* Fix

* Fix

apps/studio/components/interfaces/Database/Backups/BackupItem.tsx

@@ -1,13 +1,13 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import dayjs from 'dayjs'
 import { Download } from 'lucide-react'
 
+import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useBackupDownloadMutation } from 'data/database/backup-download-mutation'
 import type { DatabaseBackup } from 'data/database/backups-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { Badge } from 'ui'
-import { useParams } from 'common'
+import { TimestampInfo } from 'ui-patterns'
 
 interface BackupItemProps {
   index: number
@@ -36,8 +36,9 @@ const BackupItem = ({ index, isHealthy, backup, onSelectBackup }: BackupItemProp
     },
   })
 
-  const generateSideButtons = (backup: any) => {
-    if (backup.status === 'COMPLETED')
+  const generateSideButtons = (backup: DatabaseBackup) => {
+    // [Joshen] API typing is incorrect here, status is getting typed as Record<string, never>
+    if ((backup as any).status === 'COMPLETED')
       return (
         <div className="flex space-x-4">
           <ButtonTooltip
@@ -84,20 +85,18 @@ const BackupItem = ({ index, isHealthy, backup, onSelectBackup }: BackupItemProp
     return <Badge variant="warning">Backup In Progress...</Badge>
   }
 
-  const generateBackupName = (backup: any) => {
-    if (backup.status == 'COMPLETED') {
-      return `${dayjs(backup.inserted_at).format('DD MMM YYYY HH:mm:ss')} UTC`
-    }
-    return dayjs(backup.inserted_at).format('DD MMM YYYY')
-  }
-
   return (
     <div
       className={`flex h-12 items-center justify-between px-6 ${
         index ? 'border-t border-default' : ''
       }`}
     >
-      <p className="text-sm text-foreground ">{generateBackupName(backup)}</p>
+      <TimestampInfo
+        displayAs="utc"
+        utcTimestamp={backup.inserted_at}
+        labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
+        className="text-left !text-sm font-mono tracking-tight"
+      />
       <div>{generateSideButtons(backup)}</div>
     </div>
   )

apps/studio/data/database/backups-query.ts

@@ -2,9 +2,9 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import type { components } from 'data/api'
 import { get, handleError } from 'data/fetchers'
+import { useIsOrioleDb } from 'hooks/misc/useSelectedProject'
 import type { ResponseError } from 'types'
 import { databaseKeys } from './keys'
-import { useIsOrioleDb } from 'hooks/misc/useSelectedProject'
 
 export type BackupsVariables = {
   projectRef?: string

packages/ui-patterns/TimestampInfo/index.tsx

@@ -6,7 +6,6 @@ import { cn } from 'ui/src/lib/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
-import { Clipboard } from 'lucide-react'
 
 dayjs.extend(relativeTime)
 dayjs.extend(utc)
@@ -94,7 +93,7 @@ export const TimestampInfo = ({
     const [copied, setCopied] = useState(false)
 
     return (
-      <span
+      <div
         onPointerDown={(e) => {
           e.stopPropagation()
         }}
@@ -112,23 +111,24 @@ export const TimestampInfo = ({
           }, 1000)
         }}
         className={cn(
-          'relative cursor-default grid grid-cols-2 gap-2 hover:bg-surface-100 px-2 py-1 group',
+          'relative cursor-pointer flex gap-y-2 gap-x-0.5 hover:bg-surface-100 px-2 py-1 group',
           { 'bg-surface-100': copied }
         )}
       >
-        <span className="text-right truncate">{label}:</span>
-        <div className="relative">
+        <div className="flex items-center gap-x-2 text-left truncate">
+          <p>{label}</p>
+          <div className="border-t w-full border-dashed" />
+        </div>
+        <div className="relative flex items-center gap-x-2 flex-grow">
+          <div className="border-t w-full border-dashed z-10" />
           {copied && (
-            <span className="absolute inset-0 flex items-center text-brand-600 bg-surface-100">
+            <span className="flex items-center justify-end w-full absolute inset-0 flex items-right text-brand-600 bg-surface-100">
               Copied!
             </span>
           )}
-          <span className="flex items-center gap-x-2">
-            {value}
-            <Clipboard size={12} className="opacity-0 group-hover:opacity-100 transition" />
-          </span>
+          <span className="flex items-center gap-x-2 justify-end whitespace-nowrap">{value}</span>
         </div>
-      </span>
+      </div>
     )
   }
 
@@ -145,9 +145,9 @@ export const TimestampInfo = ({
             : timestampUtcFormatter({ utcTimestamp, format: labelFormat })}
         </span>
       </TooltipTrigger>
-      <TooltipContent align={align} side="right" className="font-mono p-0 py-1">
+      <TooltipContent align={align} side="right" className="font-mono p-0 py-1 min-w-80">
         <TooltipRow label="UTC" value={utc} />
-        <TooltipRow label={`${localTimezone}`} value={local} />
+        <TooltipRow label={localTimezone} value={local} />
         <TooltipRow label="Relative" value={relative} />
         <TooltipRow label="Timestamp" value={String(utcTimestamp)} />
       </TooltipContent>