WIP 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/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,
@@ -26,6 +29,14 @@ export const PluginContext = createContext<{
   dataContext: PluginDataContext,
   acmExtensions: {},
   ocpApi: {
+    // TODO: implement basic version of timestamp (e.g. without translation and relative times) for local development
+    Timestamp: () => (
+      <div>
+        TODO: implement <code>&lt;Timestamp /&gt;</code> component for standalone dev console
+      </div>
+    ),
     useK8sWatchResource: () => [[] as any, true, undefined],
   },
-})
+}
+
+export const PluginContext = createContext<Plugin>(defaultPlugin)

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>
     )

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

@@ -12,7 +12,7 @@ import {
   managedClustersState,
 } from '../../../../atoms'
 import { nockCreate, nockDelete, nockIgnoreApiPaths, nockIgnoreRBAC } from '../../../../lib/nock-util'
-import { PluginContext } from '../../../../lib/PluginContext'
+import { defaultPlugin, PluginContext } from '../../../../lib/PluginContext'
 import { mockManagedClusterSet, mockGlobalClusterSet } from '../../../../lib/test-metadata'
 import {
   clickBulkAction,
@@ -23,15 +23,13 @@ import {
   waitForText,
   waitForNotText,
   typeByTestId,
-  ocpApi,
   clickByLabel,
 } from '../../../../lib/test-util'
 import {
   mockClusterDeployments,
   mockManagedClusterInfos,
   mockManagedClusters,
 } from '../ManagedClusters/ManagedClusters.sharedmocks'
-import { PluginDataContext } from '../../../../lib/PluginDataContext'
 import { NavigationPath } from '../../../../NavigationPath'
 import Clusters from '../Clusters'
 
@@ -95,7 +93,7 @@ describe('ClusterSets page without Submariner', () => {
     nockIgnoreRBAC()
     nockIgnoreApiPaths()
     render(
-      <PluginContext.Provider value={{ isSubmarinerAvailable: false, dataContext: PluginDataContext, ocpApi }}>
+      <PluginContext.Provider value={{ ...defaultPlugin, isSubmarinerAvailable: false }}>
         <Component />
       </PluginContext.Provider>
     )
@@ -111,7 +109,7 @@ describe('ClusterSets page with csv export', () => {
     nockIgnoreRBAC()
     nockIgnoreApiPaths()
     render(
-      <PluginContext.Provider value={{ isSubmarinerAvailable: false, dataContext: PluginDataContext, ocpApi }}>
+      <PluginContext.Provider value={{ ...defaultPlugin, isSubmarinerAvailable: false }}>
         <Component />
       </PluginContext.Provider>
     )

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateCluster/CreateCluster.test.tsx

@@ -22,14 +22,12 @@ import {
   nockIgnoreRBAC,
   nockList,
 } from '../../../../../lib/nock-util'
-import { PluginContext } from '../../../../../lib/PluginContext'
-import { PluginDataContext } from '../../../../../lib/PluginDataContext'
+import { defaultPlugin, PluginContext } from '../../../../../lib/PluginContext'
 import {
   clickByPlaceholderText,
   clickByRole,
   clickByTestId,
   clickByText,
-  ocpApi,
   pasteByTestId,
   typeByPlaceholderText,
   typeByTestId,
@@ -1051,7 +1049,7 @@ describe('CreateCluster AWS', () => {
 
     // create the form
     const { container } = render(
-      <PluginContext.Provider value={{ isACMAvailable: false, dataContext: PluginDataContext, ocpApi }}>
+      <PluginContext.Provider value={{ ...defaultPlugin, isACMAvailable: false }}>
         <Component />
       </PluginContext.Provider>
     )