Update openshift-assisted-ui-lib to monorepo based @openshift-assiste…

…d/ui-lib (#2822) * Replace openshift-assisted-ui-lib with @openshift-assisted/ui-lib Signed-off-by: Jiri Tomasek <[email protected]> * Update webpack configs to point to new assisted ui-lib translations Signed-off-by: Jiri Tomasek <[email protected]> * Remove openshift-assisted-ui-lib from jest config Signed-off-by: Jiri Tomasek <[email protected]> * Remove assisted styles which are no longer needed Signed-off-by: Jiri Tomasek <[email protected]> * Update imports from openshift-assisted-ui-lib to @openshift-assisted/ui-lib Signed-off-by: Jiri Tomasek <[email protected]> * Jest config fix Signed-off-by: Jiri Tomasek <[email protected]> * Replace CIM destructuring with named imports Signed-off-by: Jiri Tomasek <[email protected]> * Update @openshift-assisted/locales and ui-lib to 2.8.2-cim Signed-off-by: Jiri Tomasek <[email protected]> * Update tests Signed-off-by: Jiri Tomasek <[email protected]> --------- Signed-off-by: Jiri Tomasek <[email protected]>
stolostron · May 11, 2023 · ae4a6d8 · ae4a6d8
1 parent 337ef33
commit ae4a6d8
Show file tree

Hide file tree

Showing 68 changed files with 1,311 additions and 1,040 deletions.
diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts
@@ -17,6 +17,9 @@ const config: Config.InitialOptions = {
     '@patternfly/react-topology': '<rootDir>/node_modules/@patternfly/react-topology',
     'monaco-editor': '<rootDir>/node_modules/react-monaco-editor',
     '@console/*': '<rootDir>/__mocks__/dummy.ts',
+    '@openshift-assisted/ui-lib/cim': '<rootDir>/node_modules/@openshift-assisted/ui-lib/build/cim',
+    '@openshift-assisted/locales/([a-z]{2,3}/translation.json)':
+      '<rootDir>/node_modules/@openshift-assisted/locales/lib/$1/translation.json',
   },
   watchAll: false,
   slowTestThreshold: 30,
@@ -43,7 +46,7 @@ const config: Config.InitialOptions = {
     '\\.(css|less|scss)$': '<rootDir>/jest-raw-loader.js',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!d3-interpolate|d3-color|react-monaco-editor|openshift-assisted-ui-lib|@patternfly/react-tokens|@patternfly-labs/react-form-wizard|@juggle/resize-observer|@react-hook/*|uuid|@openshift-console/dynamic-plugin-sdk*|screenfull)',
+    'node_modules/(?!d3-interpolate|d3-color|react-monaco-editor|@openshift-assisted|lodash-es|@patternfly/react-tokens|@patternfly-labs/react-form-wizard|@juggle/resize-observer|@react-hook/*|uuid|@openshift-console/dynamic-plugin-sdk*|screenfull)',
   ],
   ci: true,
   collectCoverage: true,

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -41,6 +41,8 @@
     "@mui/styles": "^5.11.1",
     "@octokit/rest": "19.0.3",
     "@octokit/types": "6.40.0",
+    "@openshift-assisted/locales": "2.8.2-cim",
+    "@openshift-assisted/ui-lib": "2.8.2-cim",
     "@patternfly-labs/react-form-wizard": "^1.22.0",
     "@patternfly/patternfly": "4.196.7",
     "@patternfly/react-charts": "^6.74.3",
@@ -77,7 +79,6 @@
     "moment-timezone": "^0.5.37",
     "monaco-editor": "0.20.0",
     "object-hash": "3.0.0",
-    "openshift-assisted-ui-lib": "^2.8.1-cim",
     "ramda": "0.28.0",
     "react-error-boundary": "3.1.4",
     "react-masonry-css": "1.0.16",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,5 +1,3 @@
-@import '~openshift-assisted-ui-lib/index.css';
-
 .pf-c-toolbar__content-section {
   row-gap: 16px !important;
 }

diff --git a/frontend/src/atoms.ts b/frontend/src/atoms.ts
@@ -12,7 +12,7 @@ import {
   NMStateK8sResource,
   NodePoolK8sResource,
   StorageClassK8sResource,
-} from 'openshift-assisted-ui-lib/cim'
+} from '@openshift-assisted/ui-lib/cim'
 import { useMemo } from 'react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { atom, useRecoilValue } from 'recoil'

diff --git a/frontend/src/resources/utils/get-cluster.test.ts b/frontend/src/resources/utils/get-cluster.test.ts
@@ -12,7 +12,7 @@ import {
   getIsHostedCluster,
 } from './get-cluster'
 import { HostedClusterApiVersion, HostedClusterKind } from '..'
-import { HostedClusterK8sResource } from 'openshift-assisted-ui-lib/cim'
+import { HostedClusterK8sResource } from '@openshift-assisted/ui-lib/cim'
 import { cloneDeep } from 'lodash'
 export const clusterName = 'test-cluster'
 const mockClusterCurator: ClusterCurator = {

diff --git a/frontend/src/resources/utils/get-cluster.ts b/frontend/src/resources/utils/get-cluster.ts
@@ -11,7 +11,7 @@ import {
   HostedClusterK8sResource,
   NodePoolK8sResource,
   ClusterDeploymentK8sResource,
-} from 'openshift-assisted-ui-lib/cim'
+} from '@openshift-assisted/ui-lib/cim'
 import { CertificateSigningRequest, CSR_CLUSTER_LABEL } from '../certificate-signing-requests'
 import { ClusterClaim } from '../cluster-claim'
 import { ClusterCurator, isAutomationTemplate } from '../cluster-curator'

diff --git a/frontend/src/routes/Infrastructure/Clusters/ClustersPlugin.css b/frontend/src/routes/Infrastructure/Clusters/ClustersPlugin.css
diff --git a/frontend/src/routes/Infrastructure/Clusters/ClustersPlugin.tsx b/frontend/src/routes/Infrastructure/Clusters/ClustersPlugin.tsx
@@ -3,8 +3,6 @@ import { LoadPluginData } from '../../../components/LoadPluginData'
 import { PluginContextProvider } from '../../../components/PluginContextProvider'
 import Clusters from './Clusters'
 
-import './ClustersPlugin.css'
-
 export default function ClustersPlugin() {
   return (
     <PluginContextProvider>

diff --git a/...tes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.sharedmocks.tsx b/...tes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.sharedmocks.tsx
@@ -1,5 +1,5 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { HostedClusterK8sResource } from 'openshift-assisted-ui-lib/cim'
+import { HostedClusterK8sResource } from '@openshift-assisted/ui-lib/cim'
 import { Cluster, ClusterStatus, MachinePool, MachinePoolApiVersion, MachinePoolKind } from '../../../../../resources'
 import { Provider } from '../../../../../ui-components'
 

diff --git a/...src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.test.tsx b/...src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.test.tsx
@@ -4,8 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import _ from 'lodash'
 import { Scope } from 'nock/types'
-import { CIM } from 'openshift-assisted-ui-lib'
-import { HostedClusterK8sResource } from 'openshift-assisted-ui-lib/cim'
+import { AgentClusterInstallK8sResource, HostedClusterK8sResource } from '@openshift-assisted/ui-lib/cim'
 import { MemoryRouter, Route, Switch } from 'react-router-dom'
 import { generatePath } from 'react-router'
 import { RecoilRoot } from 'recoil'
@@ -281,7 +280,7 @@ mockAIClusterDeployment.spec!.clusterInstallRef = {
   version: AgentClusterInstallVersion,
 }
 
-const mockAgentClusterInstall: CIM.AgentClusterInstallK8sResource = {
+const mockAgentClusterInstall: AgentClusterInstallK8sResource = {
   apiVersion: AgentClusterInstallApiVersion,
   kind: AgentClusterInstallKind,
   metadata: {

diff --git a/...tend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.tsx b/...tend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterDetails.tsx
@@ -7,7 +7,7 @@ import {
   AgentK8sResource,
   HostedClusterK8sResource,
   InfraEnvK8sResource,
-} from 'openshift-assisted-ui-lib/cim'
+} from '@openshift-assisted/ui-lib/cim'
 import { createContext, Fragment, Suspense, useEffect, useState } from 'react'
 import { Link, Redirect, Route, RouteComponentProps, Switch, useHistory, useLocation } from 'react-router-dom'
 import { ErrorPage } from '../../../../../components/ErrorPage'

diff --git a/...tructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.test.tsx b/...tructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.test.tsx
@@ -39,7 +39,7 @@ import {
   mockRegionalHubCluster,
 } from '../ClusterDetails.sharedmocks'
 import { ClusterOverviewPageContent } from './ClusterOverview'
-import { HostedClusterK8sResource } from 'openshift-assisted-ui-lib/cim'
+import { HostedClusterK8sResource } from '@openshift-assisted/ui-lib/cim'
 import userEvent from '@testing-library/user-event'
 import { AcmToastGroup, AcmToastProvider } from '../../../../../../ui-components'
 import {

diff --git a/...nfrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx b/...nfrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
@@ -22,9 +22,14 @@ import {
 import { AlertVariant, ButtonVariant, Modal, ModalVariant, PageSection, Popover } from '@patternfly/react-core'
 import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon, PencilAltIcon } from '@patternfly/react-icons'
 import { Fragment, useContext, useState } from 'react'
+import {
+  AgentClusterInstallK8sResource,
+  ClusterDeploymentK8sResource,
+  HostedClusterK8sResource,
+  getClusterProperties,
+} from '@openshift-assisted/ui-lib/cim'
 import { Trans, useTranslation } from '../../../../../../lib/acm-i18next'
 import { Link } from 'react-router-dom'
-import { CIM } from 'openshift-assisted-ui-lib'
 import { RbacButton } from '../../../../../../components/Rbac'
 import { rbacCreate, rbacPatch } from '../../../../../../lib/rbac-util'
 import { NavigationPath } from '../../../../../../NavigationPath'
@@ -45,15 +50,12 @@ import HypershiftClusterDetails from '../../components/HypershiftClusterDetails'
 import HypershiftKubeAPI from './HypershiftKubeAPI'
 import { HypershiftImportCommand } from '../../components/HypershiftImportCommand'
 import TemplateSummaryModal from '../../../../../../components/TemplateSummaryModal'
-import { ClusterDeploymentK8sResource, HostedClusterK8sResource } from 'openshift-assisted-ui-lib/cim'
 import { CredentialsForm } from '../../../../../Credentials/CredentialsForm'
 import { GetProjects } from '../../../../../../components/GetProjects'
 
-const { getClusterProperties } = CIM
-
 function getAIClusterProperties(
   clusterDeployment: ClusterDeployment,
-  agentClusterInstall: CIM.AgentClusterInstallK8sResource
+  agentClusterInstall: AgentClusterInstallK8sResource
 ) {
   const aiClusterProperties = getClusterProperties(
     clusterDeployment as ClusterDeploymentK8sResource,

diff --git a/...outes/Infrastructure/Clusters/ManagedClusters/CreateCluster/CreateCluster.sharedmocks.tsx b/...outes/Infrastructure/Clusters/ManagedClusters/CreateCluster/CreateCluster.sharedmocks.tsx
@@ -1,7 +1,11 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import { cloneDeep } from 'lodash'
-import { CIM } from 'openshift-assisted-ui-lib'
 import { ClusterImageSetApiVersion, ClusterImageSetKind, ConfigMap } from '../../../../../resources'
+import {
+  AgentClusterInstallK8sResource,
+  ClusterDeploymentK8sResource,
+  ClusterImageSetK8sResource,
+} from '@openshift-assisted/ui-lib/cim'
 
 export const clusterName = 'test'
 export const baseDomain = 'base.domain.com'
@@ -16,7 +20,7 @@ export const mockConfigMapAI: ConfigMap = {
   data: {},
 }
 
-export const mockClusterDeploymentAI: CIM.ClusterDeploymentK8sResource = {
+export const mockClusterDeploymentAI: ClusterDeploymentK8sResource = {
   apiVersion: 'hive.openshift.io/v1',
   kind: 'ClusterDeployment',
   metadata: {
@@ -47,7 +51,7 @@ export const mockClusterDeploymentAI: CIM.ClusterDeploymentK8sResource = {
   },
 }
 
-export const mockAgentClusterInstall: CIM.AgentClusterInstallK8sResource = {
+export const mockAgentClusterInstall: AgentClusterInstallK8sResource = {
   apiVersion: 'extensions.hive.openshift.io/v1beta1',
   kind: 'AgentClusterInstall',
   metadata: { name: 'test', namespace: 'test' },
@@ -106,7 +110,7 @@ export const mockAgents = Array.from({ length: 5 }, (_val, index) => {
   return mockedAgent
 })
 
-export const clusterImageSet: CIM.ClusterImageSetK8sResource = {
+export const clusterImageSet: ClusterImageSetK8sResource = {
   apiVersion: ClusterImageSetApiVersion,
   kind: ClusterImageSetKind,
   metadata: {

diff --git a/...ture/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/DetailsForm.tsx b/...ture/Clusters/ManagedClusters/CreateCluster/components/assisted-installer/DetailsForm.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useRef, useEffect, useState, useMemo, Dispatch, SetStateAction } from 'react'
 import { FormikProps } from 'formik'
-import { CIM } from 'openshift-assisted-ui-lib'
 import { set, get, isEqual, startCase, camelCase, debounce } from 'lodash'
 // eslint-disable-next-line
 import { TFunction } from 'react-i18next'
@@ -17,27 +16,28 @@ import { useSharedAtoms, useSharedRecoil, useRecoilState, useRecoilValue } from
 import { getValue } from '../../../../../../../components/TemplateEditor'
 import { AcmKubernetesLabelsInput, AcmSelect } from '../../../../../../../ui-components'
 import { useTranslation } from '../../../../../../../lib/acm-i18next'
-
-const {
+import {
   ACMClusterDeploymentDetailsStep,
-  FeatureGateContextProvider,
   ACMFeatureSupportLevelProvider,
   ACM_ENABLED_FEATURES,
-  labelsToArray,
+  ClusterDetailsValues,
+  ClusterImageSetK8sResource,
+  FeatureGateContextProvider,
   LoadingState,
   getVersionFromReleaseImage,
-} = CIM
+  labelsToArray,
+} from '@openshift-assisted/ui-lib/cim'
 
 type FormControl = {
-  active: CIM.ClusterDetailsValues & {
+  active: ClusterDetailsValues & {
     managedClusterSet?: string
     additionalLabels?: {
       [x: string]: string
     }[]
     sshPublicKey?: string
   }
   disabled?: VoidFunction
-  reverse?: (control: { active: CIM.ClusterDetailsValues }, templateObject: any) => void
+  reverse?: (control: { active: ClusterDetailsValues }, templateObject: any) => void
   validate?: VoidFunction
   summary?: VoidFunction
   step?: any
@@ -263,11 +263,11 @@ const DetailsForm: React.FC<DetailsFormProps> = ({ control, handleChange, contro
 
   return clusterImages ? (
     <FeatureGateContextProvider features={ACM_ENABLED_FEATURES}>
-      <ACMFeatureSupportLevelProvider clusterImages={clusterImages as CIM.ClusterImageSetK8sResource[]}>
+      <ACMFeatureSupportLevelProvider clusterImages={clusterImages as ClusterImageSetK8sResource[]}>
         <ACMClusterDeploymentDetailsStep
           formRef={formRef}
           onValuesChanged={onValuesChanged}
-          clusterImages={clusterImages as CIM.ClusterImageSetK8sResource[]}
+          clusterImages={clusterImages as ClusterImageSetK8sResource[]}
           usedClusterNames={usedClusterNames}
           extensionAfter={extensionAfter}
         />

diff --git a/...rs/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/DetailsForm.tsx b/...rs/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/DetailsForm.tsx
@@ -2,7 +2,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useRef, useEffect, useState, useMemo, useContext } from 'react'
 import { FormikProps } from 'formik'
-import { CIM } from 'openshift-assisted-ui-lib'
+import {
+  HostedClusterDetailsStep,
+  labelsToArray,
+  LoadingState,
+  getSupportedCM,
+  ClusterDetailsValues,
+  ConfigMapK8sResource,
+  ClusterImageSetK8sResource,
+} from '@openshift-assisted/ui-lib/cim'
 import { set, get, isEqual, startCase, camelCase } from 'lodash'
 import { getValue } from '../../../../../../../../components/TemplateEditor'
 import { useTranslation } from '../../../../../../../../lib/acm-i18next'
@@ -17,18 +25,16 @@ import { HypershiftAgentContext } from './HypershiftAgentContext'
 import { getClusterImageVersion } from './utils'
 import { useSharedAtoms, useSharedRecoil, useRecoilValue } from '../../../../../../../../shared-recoil'
 
-const { HostedClusterDetailsStep, labelsToArray, LoadingState, getSupportedCM } = CIM
-
 type FormControl = {
-  active: CIM.ClusterDetailsValues & {
+  active: ClusterDetailsValues & {
     managedClusterSet?: string
     additionalLabels?: {
       [x: string]: string
     }[]
     releaseImage?: string
   }
   disabled?: VoidFunction
-  reverse?: (control: { active: CIM.ClusterDetailsValues }, templateObject: any) => void
+  reverse?: (control: { active: ClusterDetailsValues }, templateObject: any) => void
   validate?: VoidFunction
   summary?: VoidFunction
   step?: any
@@ -63,7 +69,7 @@ const DetailsForm: React.FC<DetailsFormProps> = ({ control, handleChange, contro
   const [managedClusterSet, setManagedClusterSet] = useState<string | undefined>()
   const [additionalLabels, setAdditionaLabels] = useState<Record<string, string> | undefined>({})
 
-  const supportedVersionCM = getSupportedCM(configMaps as CIM.ConfigMapK8sResource[])
+  const supportedVersionCM = getSupportedCM(configMaps as ConfigMapK8sResource[])
 
   useEffect(() => {
     if (formRef?.current && control.active && control.active !== formRef?.current?.values) {
@@ -180,7 +186,7 @@ const DetailsForm: React.FC<DetailsFormProps> = ({ control, handleChange, contro
     <HostedClusterDetailsStep
       formRef={formRef}
       onValuesChanged={onValuesChanged}
-      clusterImages={clusterImages as CIM.ClusterImageSetK8sResource[]}
+      clusterImages={clusterImages as ClusterImageSetK8sResource[]}
       usedClusterNames={usedClusterNames}
       extensionAfter={extensionAfter}
       supportedVersionsCM={supportedVersionCM}

diff --git a/...ters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HostsForm.tsx b/...ters/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/HostsForm.tsx
@@ -1,12 +1,11 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import * as React from 'react'
-import { CIM } from 'openshift-assisted-ui-lib'
+import { HostedClusterHostsStep, LoadingState } from '@openshift-assisted/ui-lib/cim'
 import { FormikProps } from 'formik'
 import { HypershiftAgentContext } from './HypershiftAgentContext'
 import { getClusterImageSet } from './utils'
 import { useSharedAtoms, useSharedRecoil, useRecoilValue } from '../../../../../../../../shared-recoil'
 
-const { HostedClusterHostsStep, LoadingState } = CIM
 type FormControl = {
   active: any // CIM.HostsFormValues
   disabled?: VoidFunction

diff --git a/...rs/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/NetworkForm.tsx b/...rs/ManagedClusters/CreateCluster/components/assisted-installer/hypershift/NetworkForm.tsx
@@ -1,6 +1,6 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import * as React from 'react'
-import { HostedClusterNetworkStep, LoadingState, NetworkFormValues } from 'openshift-assisted-ui-lib/cim'
+import { HostedClusterNetworkStep, LoadingState, NetworkFormValues } from '@openshift-assisted/ui-lib/cim'
 import { FormikProps } from 'formik'
 import isEqual from 'lodash/isEqual'