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.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.tsx

@@ -0,0 +1,24 @@
+/* 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)
+
+  let formattedDate = date.toLocaleString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+
+  formattedDate = formattedDate.replace(' am', ' AM').replace(' pm', ' PM')
+  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)

frontend/src/routes/Applications/ApplicationDetails/ApplicationDetails.test.tsx

@@ -18,9 +18,8 @@ import {
   subscriptionsState,
 } from '../../../atoms'
 import { nockIgnoreApiPaths, nockIgnoreRBAC, nockSearch } from '../../../lib/nock-util'
-import { PluginContext } from '../../../lib/PluginContext'
-import { PluginDataContext } from '../../../lib/PluginDataContext'
-import { ocpApi, waitForText } from '../../../lib/test-util'
+import { defaultPlugin, PluginContext } from '../../../lib/PluginContext'
+import { waitForText } from '../../../lib/test-util'
 import { ApplicationActionProps } from '../../../plugin-extensions/properties'
 import { AcmExtension } from '../../../plugin-extensions/types'
 import { GetMessagesDocument, SearchSchemaDocument } from '../../Search/search-sdk/search-sdk'
@@ -372,9 +371,8 @@ describe('Applications Page', () => {
           <MockedProvider mocks={mocks}>
             <PluginContext.Provider
               value={{
+                ...defaultPlugin,
                 acmExtensions: acmExtension,
-                dataContext: PluginDataContext,
-                ocpApi,
               }}
             >
               <ApplicationDetailsPage />

frontend/src/routes/Applications/Overview.test.tsx

@@ -12,9 +12,8 @@ import {
   nockSearch,
   nockAggegateRequest,
 } from '../../lib/nock-util'
-import { PluginContext } from '../../lib/PluginContext'
-import { PluginDataContext } from '../../lib/PluginDataContext'
-import { ocpApi, waitForText } from '../../lib/test-util'
+import { defaultPlugin, PluginContext } from '../../lib/PluginContext'
+import { waitForText } from '../../lib/test-util'
 import {
   ApplicationKind,
   ApplicationSetKind,
@@ -116,9 +115,8 @@ describe('Applications Page', () => {
         <MemoryRouter>
           <PluginContext.Provider
             value={{
+              ...defaultPlugin,
               acmExtensions: acmExtension,
-              dataContext: PluginDataContext,
-              ocpApi,
             }}
           >
             <Routes>

frontend/src/routes/Home/Overview/Overview.test.tsx

@@ -5,8 +5,7 @@ import { render } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom-v5-compat'
 import { RecoilRoot } from 'recoil'
 import { nockGet, nockIgnoreApiPaths } from '../../../lib/nock-util'
-import { PluginContext } from '../../../lib/PluginContext'
-import { PluginDataContext } from '../../../lib/PluginDataContext'
+import { defaultPlugin, PluginContext } from '../../../lib/PluginContext'
 import { clickByText, waitForNocks, waitForText } from '../../../lib/test-util'
 import Overview from './Overview'
 import { getAddonRequest, getAddonResponse } from './Overview.sharedmocks'
@@ -29,13 +28,8 @@ it('should render overview page with extension', async () => {
           <MockedProvider mocks={[]}>
             <PluginContext.Provider
               value={{
+                ...defaultPlugin,
                 isACMAvailable: false,
-                isOverviewAvailable: true,
-                isSubmarinerAvailable: true,
-                isApplicationsAvailable: true,
-                isGovernanceAvailable: true,
-                isSearchAvailable: true,
-                dataContext: PluginDataContext,
                 acmExtensions: {
                   overviewTab: [
                     {
@@ -50,9 +44,6 @@ it('should render overview page with extension', async () => {
                     },
                   ],
                 },
-                ocpApi: {
-                  useK8sWatchResource: () => [[] as any, true, undefined],
-                },
               }}
             >
               <Overview />
@@ -81,13 +72,8 @@ it('should render overview page layout when extension tab crashes', async () =>
           <MockedProvider mocks={[]}>
             <PluginContext.Provider
               value={{
+                ...defaultPlugin,
                 isACMAvailable: false,
-                isOverviewAvailable: true,
-                isSubmarinerAvailable: true,
-                isApplicationsAvailable: true,
-                isGovernanceAvailable: true,
-                isSearchAvailable: true,
-                dataContext: PluginDataContext,
                 acmExtensions: {
                   overviewTab: [
                     {
@@ -104,9 +90,6 @@ it('should render overview page layout when extension tab crashes', async () =>
                     },
                   ],
                 },
-                ocpApi: {
-                  useK8sWatchResource: () => [[] as any, true, undefined],
-                },
               }}
             >
               <Overview />

frontend/src/routes/Infrastructure/Clusters/ClusterSets/ClusterSetDetails/ClusterSetDetails.test.tsx

@@ -25,8 +25,7 @@ import {
   nockNamespacedList,
   nockPatch,
 } from '../../../../../lib/nock-util'
-import { PluginContext } from '../../../../../lib/PluginContext'
-import { PluginDataContext } from '../../../../../lib/PluginDataContext'
+import { defaultPlugin, PluginContext } from '../../../../../lib/PluginContext'
 import { mockGlobalManagedClusterSet, mockManagedClusterSet } from '../../../../../lib/test-metadata'
 import {
   clearByTestId,
@@ -39,7 +38,6 @@ import {
   waitForNotText,
   waitForTestId,
   waitForText,
-  ocpApi,
 } from '../../../../../lib/test-util'
 import { NavigationPath } from '../../../../../NavigationPath'
 import {
@@ -2084,7 +2082,7 @@ describe('ClusterSetDetails page without Submariner', () => {
     nockIgnoreRBAC()
     nockIgnoreApiPaths()
     render(
-      <PluginContext.Provider value={{ isSubmarinerAvailable: false, dataContext: PluginDataContext, ocpApi }}>
+      <PluginContext.Provider value={{ ...defaultPlugin, isSubmarinerAvailable: false }}>
         <Component />
       </PluginContext.Provider>
     )
@@ -2108,7 +2106,7 @@ describe('ClusterSetDetails page global clusterset', () => {
     nockIgnoreRBAC()
     nockIgnoreApiPaths()
     render(
-      <PluginContext.Provider value={{ isSubmarinerAvailable: false, dataContext: PluginDataContext, ocpApi }}>
+      <PluginContext.Provider value={{ ...defaultPlugin, isSubmarinerAvailable: false }}>
         <Component isGlobal />
       </PluginContext.Provider>
     )