SSC: Fix invite date formatting (#62858)

client/web/BUILD.bazel

@@ -1897,6 +1897,7 @@ ts_project(
         "src/codeintel/ReferencesPanel.mocks.ts",
         "src/codeintel/ReferencesPanel.test.tsx",
         "src/cody/management/api/hooks/useApiClient.test.tsx",
+        "src/cody/team/TeamMemberList.test.ts",
         "src/cody/useCodyIgnore.test.ts",
         "src/components/ErrorBoundary.test.tsx",
         "src/components/FilteredConnection/FilteredConnection.test.tsx",

client/web/src/cody/team/TeamMemberList.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatInviteDate } from './TeamMemberList'
+
+describe('formatInviteDate', () => {
+    it('shows relative descriptions of time in the desired format', () => {
+        // ISO-8601 (RFC3339) strings, just the way the backend returns them
+        const inputDates = [
+            '2024-05-22T15:59:55.000000+00:00',
+            '2024-05-22T14:17:55.000000+00:00',
+            '2024-05-21T14:17:55.000000+00:00',
+            '2024-05-15T14:17:55.000000+00:00',
+        ]
+
+        const now = new Date('2024-05-22T16:00:00.000000+00:00')
+
+        const expectedOutput = ['5 seconds ago', '1 hour ago', 'yesterday', 'last week']
+
+        const outputDates = inputDates.map(date => formatInviteDate(date, now))
+
+        expect(outputDates).toEqual(expectedOutput)
+    })
+
+    it('handles malformed input', () => {
+        // These are in the format of the normal output of our Go back end
+        const inputDates = [null, '', '1T14:17:55.000000+00:00', '2024-05-15T14:17:55']
+
+        const now = new Date('2024-05-22T16:00:00.000000+00:00')
+
+        const expectedOutput = ['', '', '', 'last week']
+
+        const outputDates = inputDates.map(date => formatInviteDate(date, now))
+
+        expect(outputDates).toEqual(expectedOutput)
+    })
+})

client/web/src/cody/team/TeamMemberList.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent, useMemo, useCallback, useState } from 'react'
 
 import classNames from 'classnames'
+import { intlFormatDistance } from 'date-fns'
 
 import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import { H2, Text, Badge, Link, ButtonLink } from '@sourcegraph/wildcard'
@@ -34,6 +35,18 @@ export interface TeamInvite {
     acceptedAt: string | null
 }
 
+// This tiny function is extracted to make it testable. Same for the "now" parameter.
+export const formatInviteDate = (sentAt: string | null, now?: Date): string => {
+    try {
+        if (sentAt) {
+            return intlFormatDistance(sentAt, now ?? new Date())
+        }
+        return ''
+    } catch {
+        return ''
+    }
+}
+
 export const TeamMemberList: FunctionComponent<TeamMemberListProps> = ({
     teamId,
     teamMembers,
@@ -266,7 +279,7 @@ export const TeamMemberList: FunctionComponent<TeamMemberListProps> = ({
                                     )}
                                 </div>
                                 <div className="align-content-center">
-                                    <em>Invite sent {invite.sentAt /* TODO format this */}</em>
+                                    <em>Invite sent {formatInviteDate(invite.sentAt)}</em>
                                 </div>
                                 {isAdmin && (
                                     <>

client/web/src/cody/util.ts

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 
 // URL the user needs to navigate to in order to modify their Cody Pro subscription.
 export const manageSubscriptionRedirectURL = `${
-    window.context.frontendCodyProConfig?.sscBaseUrl || 'https://accounts.sourcegraph.com/cody'
+    window.context?.frontendCodyProConfig?.sscBaseUrl || 'https://accounts.sourcegraph.com/cody'
 }/subscription`
 
 /**
@@ -14,7 +14,7 @@ export const manageSubscriptionRedirectURL = `${
  * for managing their Cody Pro subscription information.
  */
 export function isEmbeddedCodyProUIEnabled(): boolean {
-    return !!(window.context.frontendCodyProConfig as { stripePublishableKey: string } | undefined)
+    return !!(window.context?.frontendCodyProConfig as { stripePublishableKey: string } | undefined)
         ?.stripePublishableKey
 }