Use OpenShift console timestamp component

frontend/src/components/ACMNotReadyWarning.test.tsx

@@ -7,8 +7,7 @@ import { clickByRole, waitForText } from '../lib/test-util'
 import { SubscriptionOperator, SubscriptionOperatorApiVersion, SubscriptionOperatorKind } from '../resources'
 import { nockIgnoreOperatorCheck } from '../lib/nock-util'
 import { ACMNotReadyWarning } from './ACMNotReadyWarning'
-import { PluginDataContext } from '../lib/PluginDataContext'
-import { PluginContext } from '../lib/PluginContext'
+import { defaultPlugin, PluginContext } from '../lib/PluginContext'
 
 const acm_unhealthy: SubscriptionOperator = {
   apiVersion: SubscriptionOperatorApiVersion,
@@ -88,17 +87,8 @@ describe('ACMNotReadyWarning', () => {
     render(
       <PluginContext.Provider
         value={{
+          ...defaultPlugin,
           isACMAvailable: false,
-          isOverviewAvailable: true,
-          isSubmarinerAvailable: true,
-          isApplicationsAvailable: true,
-          isGovernanceAvailable: true,
-          isSearchAvailable: true,
-          dataContext: PluginDataContext,
-          acmExtensions: {},
-          ocpApi: {
-            useK8sWatchResource: () => [[] as any, true, undefined],
-          },
         }}
       >
         <WrappedACMNotReadyWarning acmOperators={[acm]} />
@@ -125,17 +115,8 @@ describe('ACMNotReadyWarning', () => {
     render(
       <PluginContext.Provider
         value={{
+          ...defaultPlugin,
           isACMAvailable: false,
-          isOverviewAvailable: true,
-          isSubmarinerAvailable: true,
-          isApplicationsAvailable: true,
-          isGovernanceAvailable: true,
-          isSearchAvailable: true,
-          dataContext: PluginDataContext,
-          acmExtensions: {},
-          ocpApi: {
-            useK8sWatchResource: () => [[] as any, true, undefined],
-          },
         }}
       >
         <WrappedACMNotReadyWarning acmOperators={[acm]} />

frontend/src/components/PluginContextProvider.tsx

@@ -1,7 +1,12 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { isHrefNavItem, useResolvedExtensions, UseK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'
+import {
+  isHrefNavItem,
+  Timestamp,
+  useK8sWatchResource,
+  useResolvedExtensions,
+} from '@openshift-console/dynamic-plugin-sdk'
 import { AcmTablePaginationContextProvider, AcmToastGroup, AcmToastProvider } from '../ui-components'
-import { ReactNode, useMemo, useEffect, useState } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { PluginContext } from '../lib/PluginContext'
 import { useAcmExtension } from '../plugin-extensions/handler'
 import { LoadingPage } from './LoadingPage'
@@ -15,9 +20,6 @@ const isPluginDataContext = (e: Extension): e is SharedContext<PluginData> =>
   isSharedContext(e) && e.properties.id === 'mce-data-context'
 
 export function PluginContextProvider(props: { children?: ReactNode }) {
-  const [ocpApi, setOcpApi] = useState<{ useK8sWatchResource: UseK8sWatchResource }>({
-    useK8sWatchResource: () => [[] as any, false, undefined],
-  })
   const [hrefs] = useResolvedExtensions(isHrefNavItem)
 
   const [pluginDataContexts, extensionsReady] = useResolvedExtensions(isPluginDataContext)
@@ -38,20 +40,6 @@ export function PluginContextProvider(props: { children?: ReactNode }) {
   const isACMAvailable = isOverviewAvailable
   const isSubmarinerAvailable = isOverviewAvailable
 
-  useEffect(() => {
-    const loadOCPAPI = async () => {
-      try {
-        const api = await import('@openshift-console/dynamic-plugin-sdk')
-        setOcpApi({
-          useK8sWatchResource: api.useK8sWatchResource,
-        })
-      } catch (err) {
-        console.error('Failed to load OCP API', err)
-      }
-    }
-    loadOCPAPI()
-  }, [])
-
   // ACM Custom extensions
   const acmExtensions = useAcmExtension()
 
@@ -66,7 +54,7 @@ export function PluginContextProvider(props: { children?: ReactNode }) {
         isSubmarinerAvailable,
         dataContext: pluginDataContext.properties.context,
         acmExtensions,
-        ocpApi,
+        ocpApi: { Timestamp, useK8sWatchResource },
       }}
     >
       <AcmFeedbackModal />

frontend/src/lib/AcmTimestamp.test.tsx

@@ -0,0 +1,123 @@
+/* Copyright Contributors to the Open Cluster Management project */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import AcmTimestamp from './AcmTimestamp'
+import { PluginContext } from './PluginContext'
+import { UseK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'
+import { PluginDataContext } from './PluginDataContext'
+
+interface TimestampProps {
+  timestamp: string | number | Date
+  simple?: boolean
+  omitSuffix?: boolean
+  className?: string
+}
+
+const MockTimestamp: React.FC<TimestampProps> = ({ timestamp, simple, omitSuffix, className }) => (
+  <div className={className}>
+    {String(timestamp)} {simple && 'simple'} {omitSuffix && 'omitSuffix'}
+  </div>
+)
+
+const mockUseK8sWatchResource: UseK8sWatchResource = jest.fn()
+
+const mockPluginContextValue = {
+  ocpApi: {
+    Timestamp: MockTimestamp,
+    useK8sWatchResource: mockUseK8sWatchResource,
+  },
+  isACMAvailable: true,
+  isOverviewAvailable: true,
+  isSubmarinerAvailable: true,
+  isApplicationsAvailable: true,
+  isGovernanceAvailable: true,
+  isSearchAvailable: true,
+  dataContext: PluginDataContext,
+  acmExtensions: {},
+}
+
+describe('AcmTimestamp', () => {
+  const timestamp = 'Jan 3, 2025, 6:53 PM'
+
+  test('renders the component with the Timestamp from PluginContext', () => {
+    render(
+      <PluginContext.Provider value={mockPluginContextValue}>
+        <AcmTimestamp timestamp={timestamp} />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(timestamp)).toBeInTheDocument()
+  })
+
+  test('renders the component with simple prop', () => {
+    render(
+      <PluginContext.Provider value={mockPluginContextValue}>
+        <AcmTimestamp timestamp={timestamp} simple />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(`${timestamp} simple`)).toBeInTheDocument()
+  })
+
+  test('renders the component with omitSuffix prop', () => {
+    render(
+      <PluginContext.Provider value={mockPluginContextValue}>
+        <AcmTimestamp timestamp={timestamp} omitSuffix />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(`${timestamp} omitSuffix`)).toBeInTheDocument()
+  })
+
+  test('renders the component with className prop', () => {
+    const className = 'test-class'
+    render(
+      <PluginContext.Provider value={mockPluginContextValue}>
+        <AcmTimestamp timestamp={timestamp} className={className} />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(timestamp)).toHaveClass(className)
+  })
+
+  test('renders the component with showIcon prop', () => {
+    render(
+      <PluginContext.Provider value={mockPluginContextValue}>
+        <AcmTimestamp timestamp={timestamp} showIcon />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(timestamp)).toBeInTheDocument()
+  })
+
+  test('renders the SimpleTimestamp component when Timestamp is not available in PluginContext', () => {
+    const mockContextWithoutTimestamp = {
+      ...mockPluginContextValue,
+      ocpApi: {
+        ...mockPluginContextValue.ocpApi,
+        Timestamp: undefined,
+      },
+    }
+
+    render(
+      <PluginContext.Provider value={mockContextWithoutTimestamp}>
+        <AcmTimestamp timestamp={timestamp} />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText(timestamp)).toBeInTheDocument()
+  })
+
+  test('renders the SimpleTimestamp component with an invalid timestamp', () => {
+    const invalidTimestamp = ''
+    const mockContextWithoutTimestamp = {
+      ...mockPluginContextValue,
+      ocpApi: {
+        ...mockPluginContextValue.ocpApi,
+        Timestamp: undefined,
+      },
+    }
+
+    render(
+      <PluginContext.Provider value={mockContextWithoutTimestamp}>
+        <AcmTimestamp timestamp={invalidTimestamp} />
+      </PluginContext.Provider>
+    )
+    expect(screen.getByText('Invalid Date')).toBeInTheDocument()
+  })
+})

frontend/src/lib/AcmTimestamp.tsx

@@ -0,0 +1,44 @@
+/* Copyright Contributors to the Open Cluster Management project */
+
+import { css } from '@emotion/css'
+import { SimpleTimestamp } from './SimpleTimestamp'
+import { PluginContext } from './PluginContext'
+import { useContext } from 'react'
+import { TimestampProps } from '@openshift-console/dynamic-plugin-sdk'
+
+type AcmTimestampProps = TimestampProps & {
+  showIcon?: boolean
+}
+
+const AcmTimestamp: React.FC<AcmTimestampProps> = ({
+  timestamp,
+  simple,
+  omitSuffix,
+  className = '',
+  showIcon = false,
+}) => {
+  const {
+    ocpApi: { Timestamp },
+  } = useContext(PluginContext)
+
+  return Timestamp ? (
+    <Timestamp
+      timestamp={timestamp}
+      simple={simple}
+      omitSuffix={omitSuffix}
+      className={`${className}${
+        !showIcon
+          ? ` ${css({
+              '.co-icon-and-text__icon': {
+                display: 'none',
+              },
+            })}`
+          : ''
+      }`}
+    />
+  ) : (
+    <SimpleTimestamp timestamp={timestamp} />
+  )
+}
+
+export default AcmTimestamp

frontend/src/lib/PluginContext.tsx

@@ -1,22 +1,25 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { Context, createContext } from 'react'
+import { Context, createContext, FC } from 'react'
 import { AcmExtension } from '../plugin-extensions/types'
 import { PluginData, PluginDataContext } from './PluginDataContext'
-import { UseK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/console-types'
+import { TimestampProps, UseK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/console-types'
 
-export const PluginContext = createContext<{
-  isACMAvailable?: boolean
-  isOverviewAvailable?: boolean
-  isSubmarinerAvailable?: boolean
-  isApplicationsAvailable?: boolean
-  isGovernanceAvailable?: boolean
-  isSearchAvailable?: boolean
+export type Plugin = {
+  isACMAvailable: boolean
+  isOverviewAvailable: boolean
+  isSubmarinerAvailable: boolean
+  isApplicationsAvailable: boolean
+  isGovernanceAvailable: boolean
+  isSearchAvailable: boolean
   dataContext: Context<PluginData>
-  acmExtensions?: AcmExtension
+  acmExtensions: AcmExtension
   ocpApi: {
+    Timestamp?: FC<TimestampProps>
     useK8sWatchResource: UseK8sWatchResource
   }
-}>({
+}
+
+export const defaultPlugin: Plugin = {
   isACMAvailable: true,
   isOverviewAvailable: true,
   isSubmarinerAvailable: true,
@@ -28,4 +31,6 @@ export const PluginContext = createContext<{
   ocpApi: {
     useK8sWatchResource: () => [[] as any, true, undefined],
   },
-})
+}
+
+export const PluginContext = createContext<Plugin>(defaultPlugin)

frontend/src/lib/SimpleTimestamp.test.tsx

@@ -0,0 +1,31 @@
+/* Copyright Contributors to the Open Cluster Management project */
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import SimpleTimestamp from './SimpleTimestamp'
+
+describe('SimpleTimestamp', () => {
+  const timestamp = '2025-01-03T18:53:59.000Z'
+
+  test('renders the component with a valid timestamp', () => {
+    render(<SimpleTimestamp timestamp={timestamp} />)
+    expect(screen.getByText('Jan 3, 2025, 1:53 PM')).toBeInTheDocument()
+  })
+
+  test('renders the component with an invalid timestamp', () => {
+    const invalidTimestamp = ''
+    render(<SimpleTimestamp timestamp={invalidTimestamp} />)
+    expect(screen.getByText('Invalid Date')).toBeInTheDocument()
+  })
+
+  test('renders the component with a numeric timestamp', () => {
+    const numericTimestamp = new Date(timestamp).getTime() // Equivalent to '2025-01-03T18:53:59Z'
+    render(<SimpleTimestamp timestamp={numericTimestamp} />)
+    expect(screen.getByText('Jan 3, 2025, 1:53 PM')).toBeInTheDocument()
+  })
+
+  test('renders the component with a Date object timestamp', () => {
+    const dateObjectTimestamp = new Date(timestamp)
+    render(<SimpleTimestamp timestamp={dateObjectTimestamp} />)
+    expect(screen.getByText('Jan 3, 2025, 1:53 PM')).toBeInTheDocument()
+  })
+})

frontend/src/lib/SimpleTimestamp.tsx

@@ -0,0 +1,28 @@
+/* Copyright Contributors to the Open Cluster Management project */
+
+import React from 'react'
+
+interface SimpleTimestampProps {
+  timestamp: string | number | Date
+}
+
+export const SimpleTimestamp: React.FC<SimpleTimestampProps> = ({ timestamp }) => {
+  const date = new Date(timestamp)
+
+  if (isNaN(date.getTime())) {
+    return <>Invalid Date</>
+  }
+
+  const day = date.getDate()
+  const month = date.toLocaleString('en-US', { month: 'short' })
+  const year = date.getFullYear()
+  const hour = date.getHours() % 12 || 12
+  const minute = date.getMinutes().toString().padStart(2, '0')
+  const ampm = date.getHours() >= 12 ? 'PM' : 'AM'
+
+  const formattedDate = `${month} ${day}, ${year}, ${hour}:${minute} ${ampm}`
+
+  return <>{formattedDate}</>
+}
+
+export default SimpleTimestamp

frontend/src/lib/test-util.ts

@@ -3,7 +3,6 @@
 import { act, ByRoleMatcher, ByRoleOptions, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Scope } from 'nock/types'
-import { UseK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk'
 
 export const waitTimeout = 5 * 1000
 
@@ -375,11 +374,6 @@ export function isCardEnabled(card: HTMLElement) {
   return card.style.cursor === 'pointer'
 }
 
-export const ocpApi: {
-  useK8sWatchResource: UseK8sWatchResource
-} = {
-  useK8sWatchResource: () => [[] as any, true, undefined],
-}
 export const getCSVExportSpies = () => {
   const blobConstructorSpy = jest.fn()
   jest.spyOn(global, 'Blob').mockImplementationOnce(blobConstructorSpy)