Merge branch '636-branches-crash-fix' into 'master'

fix: date formatting errors with invalid (empty) dates (#636)

Closes #636

See merge request postgres-ai/database-lab!1049

Author: bogdan-ts

ui/packages/shared/components/ResetCloneModal/index.tsx

@@ -7,8 +7,6 @@
 
 import { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
-
 import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
 import { Text } from '@postgres.ai/shared/components/Text'
@@ -18,7 +16,7 @@ import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
 import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
 import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
-import { isValidDate } from '@postgres.ai/shared/utils/date'
+import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
 
 type Props = {
   isOpen: boolean
@@ -111,12 +109,7 @@ export const ResetCloneModal = (props: Props) => {
               value: snapshot.id,
               children: (
                 <>
-                  {snapshot.dataStateAt} (
-                  {isValidDate(snapshot.dataStateAtDate) && 
-                    formatDistanceToNowStrict(snapshot.dataStateAtDate, {
-                      addSuffix: true,
-                    })}
-                  )
+                  {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
                   {isLatest && (
                     <span className={classes.snapshotTag}>Latest</span>
                   )}

ui/packages/shared/pages/Branches/components/BranchesTable/index.tsx

@@ -10,9 +10,7 @@ import { useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { makeStyles } from '@material-ui/core'
 import { useHistory } from 'react-router-dom'
-import { formatDistanceToNowStrict } from 'date-fns'
-
-import { isValidDate } from '@postgres.ai/shared/utils/date'
+import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
 import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
 import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
 import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
@@ -168,13 +166,7 @@ export const BranchesTable = ({
                 <TableBodyCell>{branch.name}</TableBodyCell>
                 <TableBodyCell>{branch.parent}</TableBodyCell>
                 <TableBodyCell>
-                  {branch.dataStateAt} (
-                  {isValidDate(new Date(branch.dataStateAt))
-                    ? formatDistanceToNowStrict(new Date(branch.dataStateAt), {
-                        addSuffix: true,
-                      })
-                    : '-'}
-                  )
+                  {formatDateWithDistance(branch.dataStateAt, new Date(branch.dataStateAt))}
                 </TableBodyCell>
                 <TableBodyCell>{branch.snapshotID}</TableBodyCell>
                 <TableBodyCell>{branch.numSnapshots}</TableBodyCell>

ui/packages/shared/pages/Instance/Clones/ClonesList/index.tsx

@@ -7,7 +7,6 @@
 
 import { useState } from 'react'
 import cn from 'classnames'
-import { formatDistanceToNowStrict } from 'date-fns'
 import { useHistory } from 'react-router-dom'
 
 import {
@@ -32,7 +31,7 @@ import {
   getCloneStatusText,
 } from '@postgres.ai/shared/utils/clone'
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { isValidDate } from '@postgres.ai/shared/utils/date'
+import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
 
 import { MenuCell } from './MenuCell'
 import { ConnectionModal } from './ConnectionModal'
@@ -217,13 +216,7 @@ export const ClonesList = (props: Props) => {
                     )}
                   </TableBodyCell>
                   <TableBodyCell>
-                    {clone.createdAt} (
-                    {isValidDate(clone.createdAtDate)
-                      ? formatDistanceToNowStrict(clone.createdAtDate, {
-                          addSuffix: true,
-                        })
-                      : '-'}
-                    )
+                    {formatDateWithDistance(clone.createdAt, clone.createdAtDate)}
                   </TableBodyCell>
                   <TableBodyCell>{clone.db.port}</TableBodyCell>
                   <TableBodyCell>{clone.db.username}</TableBodyCell>
@@ -232,22 +225,7 @@ export const ClonesList = (props: Props) => {
                   </TableBodyCell>
                   <TableBodyCell>{clone.snapshot?.pool ?? '-'}</TableBodyCell>
                   <TableBodyCell>
-                    {clone.snapshot ? (
-                      <>
-                        {clone.snapshot.dataStateAt} (
-                        {isValidDate(clone.snapshot.dataStateAtDate)
-                          ? formatDistanceToNowStrict(
-                              clone.snapshot.dataStateAtDate,
-                              {
-                                addSuffix: true,
-                              },
-                            )
-                          : '-'}
-                        )
-                      </>
-                    ) : (
-                      '-'
-                    )}
+                    {clone.snapshot ? formatDateWithDistance(clone.snapshot.dataStateAt, clone.snapshot.dataStateAtDate) : '-'}
                   </TableBodyCell>
                 </TableRow>
               )

ui/packages/shared/pages/Instance/InactiveInstance/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
+import { formatDistanceSafe } from '@postgres.ai/shared/utils/date'
 
 import { Link } from '@postgres.ai/shared/components/Link2'
 import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
@@ -95,10 +95,7 @@ export const InactiveInstance = ({
             classes={{ tooltip: classes.toolTip }}
           >
             <span>
-              {instance?.createdAt &&
-                formatDistanceToNowStrict(new Date(instance?.createdAt), {
-                  addSuffix: true,
-                })}
+              {instance?.createdAt ? formatDistanceSafe(new Date(instance?.createdAt)) : '-'}
             </span>
           </Tooltip>
         </span>
@@ -114,12 +111,7 @@ export const InactiveInstance = ({
               classes={{ tooltip: classes.toolTip }}
             >
               <span>
-                {formatDistanceToNowStrict(
-                  new Date(instance?.telemetryLastReportedAt),
-                  {
-                    addSuffix: true,
-                  },
-                )}
+                {instance?.telemetryLastReportedAt ? formatDistanceSafe(new Date(instance?.telemetryLastReportedAt)) : '-'}
               </span>
             </Tooltip>
           </span>

ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx

@@ -14,7 +14,8 @@ import {
   generateSnapshotPageId,
   groupSnapshotsByCreatedAtDate,
 } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
-import { format, formatDistanceToNowStrict } from 'date-fns'
+import { format } from 'date-fns'
+import { formatDistanceSafe } from '@postgres.ai/shared/utils/date'
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
 import { useHistory } from 'react-router'
 import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
@@ -129,7 +130,7 @@ const SnapshotListItem = ({
   setSnapshotModal: (modal: { isOpen: boolean; snapshotId: string }) => void
 }) => {
   const classes = useStyles()
-  const timeAgo = formatDistanceToNowStrict(snapshot.createdAtDate)
+  const timeAgo = formatDistanceSafe(snapshot.createdAtDate)
 
   const history = useHistory()
   const host = useHost()

ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx

@@ -9,7 +9,6 @@ import React from 'react'
 import cn from 'classnames'
 import { observer } from 'mobx-react-lite'
 import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
 import copy from 'copy-to-clipboard'
 import { useHistory } from 'react-router-dom'
 
@@ -19,7 +18,7 @@ import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapsh
 import { useStores } from '@postgres.ai/shared/pages/Instance/context'
 import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { isSameDayUTC, isValidDate } from '@postgres.ai/shared/utils/date'
+import { isSameDayUTC, formatDateWithDistance } from '@postgres.ai/shared/utils/date'
 import {
   Table,
   TableHead,
@@ -190,22 +189,10 @@ export const SnapshotsTable: React.FC<SnapshotsTableProps> = observer(
                     ]}
                   />
                   <TableBodyCell>
-                    {snapshot.dataStateAt} (
-                    {isValidDate(snapshot.dataStateAtDate)
-                      ? formatDistanceToNowStrict(snapshot.dataStateAtDate, {
-                          addSuffix: true,
-                        })
-                      : '-'}
-                    )
+                    {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
                   </TableBodyCell>
                   <TableBodyCell>
-                    {snapshot.createdAt} (
-                    {isValidDate(snapshot.createdAtDate)
-                      ? formatDistanceToNowStrict(snapshot.createdAtDate, {
-                          addSuffix: true,
-                        })
-                      : '-'}
-                    )
+                    {formatDateWithDistance(snapshot.createdAt, snapshot.createdAtDate)}
                   </TableBodyCell>
                   <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
                   <TableBodyCell>{snapshot.numClones ?? '-'}</TableBodyCell>

ui/packages/shared/pages/Instance/SnapshotsModal/index.tsx

@@ -7,7 +7,6 @@
 
 import { observer } from 'mobx-react-lite'
 import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
 import copy from 'copy-to-clipboard'
 
 import { useStores } from '@postgres.ai/shared/pages/Instance/context'
@@ -24,7 +23,7 @@ import {
   TableBodyCellMenu,
 } from '@postgres.ai/shared/components/Table'
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
+import { isSameDayUTC, formatDateWithDistance } from '@postgres.ai/shared/utils/date'
 
 import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags'
 import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton'
@@ -137,18 +136,10 @@ export const SnapshotsModal = observer(() => {
                       ]}
                     />
                     <TableBodyCell>
-                      {snapshot.dataStateAt} (
-                      {formatDistanceToNowStrict(snapshot.dataStateAtDate, {
-                        addSuffix: true,
-                      })}
-                      )
+                      {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
                     </TableBodyCell>
                     <TableBodyCell>
-                      {snapshot.createdAt} (
-                      {formatDistanceToNowStrict(snapshot.createdAtDate, {
-                        addSuffix: true,
-                      })}
-                      )
+                      {formatDateWithDistance(snapshot.createdAt, snapshot.createdAtDate)}
                     </TableBodyCell>
                     <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
                     <TableBodyCell>

ui/packages/shared/utils/date.ts

@@ -22,8 +22,24 @@ import {
 } from 'date-fns'
 
 export const formatDateToISO = (dateString: string) => {
-  const parsedDate = parse(dateString, 'yyyyMMddHHmmss', new Date())
-  return format(parsedDate, "yyyy-MM-dd'T'HH:mm:ssXXX")
+  // Handle empty or invalid date strings
+  if (!dateString || dateString.trim() === '') {
+    return ''
+  }
+  
+  try {
+    const parsedDate = parse(dateString, 'yyyyMMddHHmmss', new Date())
+    
+    // Additional validation of parsed date
+    if (!isValidDate(parsedDate) || isNaN(parsedDate.getTime())) {
+      return ''
+    }
+    
+    return format(parsedDate, "yyyy-MM-dd'T'HH:mm:ssXXX")
+  } catch (error) {
+    // Return empty string for invalid date formats
+    return ''
+  }
 }
 
 // parseDate parses date of both format: '2006-01-02 15:04:05 UTC' and `2006-01-02T15:04:05Z` (RFC3339).
@@ -94,3 +110,27 @@ export const formatDateStd = (
 export const isValidDate = (dateObject: Date) => {
   return new Date(dateObject).toString() !== 'Invalid Date'
 }
+
+// Safe date formatting with distance
+export const formatDateWithDistance = (dateString: string, dateObject: Date) => {
+  if (!dateString || !isValidDate(dateObject)) return '-'
+  
+  try {
+    return `${dateString} (${formatDistanceToNowStrict(dateObject, { addSuffix: true })})`
+  } catch (error) {
+    console.warn('Error formatting date distance:', error, 'date:', dateObject)
+    return '-'
+  }
+}
+
+// Safe distance formatting only
+export const formatDistanceSafe = (dateObject: Date) => {
+  if (!isValidDate(dateObject)) return '-'
+  
+  try {
+    return formatDistanceToNowStrict(dateObject, { addSuffix: true })
+  } catch (error) {
+    console.warn('Error formatting distance:', error, 'date:', dateObject)
+    return '-'
+  }
+}