@openshift-assisted/ui-lib 2.18.1-cim → 2.18.3-cim

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Grid, GridItem, Wizard, WizardStep } from '@patternfly/react-core';
-import { AlertsContextProvider, LoadingState } from '../../../common';
+import { AlertsContextProvider, ErrorState, LoadingState } from '../../../common';
 import { ClusterDeploymentWizardProps } from './types';
 import { ACMFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { YamlPreview, useYamlPreview } from '../YamlPreview';
@@ -14,6 +14,7 @@ import { ClusterDeploymentHostsDiscoveryStep } from './hostDiscovery';
 import { ClusterDeploymentNetworkingStep } from './networking';
 import { ClusterDeploymentReviewStep } from './review';
 import { ClusterDeploymentCustomManifestsStep } from './customManifests';
+import { useAgents } from '../../hooks';
 
 export const ClusterDeploymentWizard = ({
   className,
@@ -27,7 +28,6 @@ export const ClusterDeploymentWizard = ({
   fetchSecret,
   clusterDeployment,
   agentClusterInstall,
-  agents,
   bareMetalHosts,
   clusterImages,
   aiConfigMap,
@@ -54,12 +54,20 @@ export const ClusterDeploymentWizard = ({
     fetchKlusterletAddonConfig,
   });
 
+  const [agents, loaded, error] = useAgents({ isList: true });
+
   // if initialStep is set, it is either 'host-selection' or 'host-discovery', both at index 4
   // if initialStep is not set, start at 'cluster-details' which is at index 2
   const startIndex = initialStep ? 4 : 2;
   const stepNames = wizardStepNames(t);
   const isAIFlow = !!infraEnv;
 
+  if (!loaded) {
+    return <LoadingState />;
+  } else if (error) {
+    return <ErrorState />;
+  }
+
   return (
     <Grid style={{ height: '100%' }}>
       <GridItem span={isPreviewOpen ? 7 : 12}>

package/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -21,7 +21,7 @@ import {
   NETWORK_TYPE_OVN,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { NetworkTypeControlGroup } from '../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
+import { NetworkTypeDropDown } from './networking/NetworkTypeDropdown';
 import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
@@ -163,6 +163,7 @@ const NetworkConfiguration = ({
     validateField,
     primaryMachineNetwork,
   ]);
+
   return (
     <Grid hasGutter>
       {!hideManagedNetworking && <ManagedNetworkingControlGroup />}
@@ -174,6 +175,8 @@ const NetworkConfiguration = ({
         />
       )}
 
+      <NetworkTypeDropDown isSDNSelectable={isSDNSelectable} />
+
       {(!isMultiNodeCluster || !isUserManagedNetworking) && (
         <StackTypeControlGroup
           clusterId={cluster.id}
@@ -184,8 +187,6 @@ const NetworkConfiguration = ({
         />
       )}
 
-      <NetworkTypeControlGroup isSDNSelectable={isSDNSelectable} />
-
       {!(isMultiNodeCluster && isUserManagedNetworking) && (
         <AvailableSubnetsControl
           clusterId={cluster.id}

package/lib/cim/components/ClusterDeployment/customManifests/ClusterDeploymentCustomManifestsStep.tsx

@@ -11,7 +11,12 @@ import {
   GridItem,
 } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ClusterWizardStepHeader, useTranslation } from '../../../../common';
+import {
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+  useTranslation,
+} from '../../../../common';
 import { AgentClusterInstallK8sResource, AgentClusterInstallModel } from '../../../types';
 import { ConfigMapForm, CustomManifestFormType } from './ConfigMapForm';
 import { appendPatch } from '../../../utils';
@@ -31,6 +36,9 @@ export const ClusterDeploymentCustomManifestsStep = ({
       })) || [],
   };
 
+  const usesExternalPlatform = agentClusterInstall.spec?.platformType === 'External';
+  const usesThirdPartyCNI = isThirdPartyCNI(agentClusterInstall.spec?.networking.networkType);
+
   const validationSchema = Yup.lazy((values: CustomManifestFormType) =>
     Yup.object<CustomManifestFormType>({
       configMaps: Yup.array()
@@ -54,7 +62,7 @@ export const ClusterDeploymentCustomManifestsStep = ({
           }),
         )
         .min(
-          agentClusterInstall.spec?.platformType === 'External' ? 1 : 0,
+          usesExternalPlatform || usesThirdPartyCNI ? 1 : 0,
           t('ai:At least one config map is required'),
         ),
     }),
@@ -114,6 +122,14 @@ export const ClusterDeploymentCustomManifestsStep = ({
           </Content>
         </Alert>
       </GridItem>
+      {(usesExternalPlatform || usesThirdPartyCNI) && (
+        <GridItem>
+          <CustomManifestsAlert
+            usesExternalPlatform={usesExternalPlatform}
+            usesThirdPartyCNI={usesThirdPartyCNI}
+          />
+        </GridItem>
+      )}
       <GridItem>
         <Formik
           initialValues={initialValues}

package/lib/cim/components/ClusterDeployment/networking/NetworkTypeDropdown.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import {
+  Dropdown,
+  DropdownItem,
+  FormGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { getFieldId } from '../../../../common/components/ui';
+import type { NetworkConfigurationValues } from '../../../../common/types/clusters';
+import {
+  NETWORK_TYPE_LABELS,
+  NETWORK_TYPE_SDN,
+  isThirdPartyCNI,
+} from '../../../../common/types/networkType';
+import { useTranslation } from '../../../../common/hooks';
+import { ThirdPartyCNIBanner } from '../../../../common';
+
+export const NetworkTypeDropDown = ({ isSDNSelectable }: { isSDNSelectable: boolean }) => {
+  const { t } = useTranslation();
+  const [field, , { setValue }] = useField<string>('networkType');
+  const [isOpen, setOpen] = React.useState(false);
+  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const fieldId = getFieldId('networkType', 'input');
+
+  const showThirdPartyBanner = isThirdPartyCNI(values.networkType);
+
+  const currentDisplayValue = NETWORK_TYPE_LABELS(t)[field.value];
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS(t)).map(([value, label]) => (
+    <DropdownItem
+      key={value}
+      id={value}
+      value={value}
+      isAriaDisabled={value === NETWORK_TYPE_SDN && !isSDNSelectable}
+    >
+      {label}
+    </DropdownItem>
+  ));
+
+  const onSelect = (_event?: React.MouseEvent<Element, MouseEvent>, nextValue?: string): void => {
+    if (nextValue) {
+      setValue(nextValue);
+    }
+    setOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+    >
+      {currentDisplayValue || t('ai:Network type')}
+    </MenuToggle>
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup fieldId={fieldId} label={t('ai:Network type')} id={`form-control__${fieldId}`}>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            onOpenChange={(open: boolean) => setOpen(open)}
+            onSelect={onSelect}
+            toggle={toggle}
+            isOpen={isOpen}
+          >
+            {dropdownItems}
+          </Dropdown>
+        </FormGroup>
+      </StackItem>
+      {showThirdPartyBanner && <ThirdPartyCNIBanner />}
+    </Stack>
+  );
+};

package/lib/cim/components/ClusterDeployment/review/ClusterDeploymentReviewStep.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Alert,
   AlertVariant,
@@ -7,7 +8,7 @@ import {
   useWizardFooter,
   WizardFooter,
 } from '@patternfly/react-core';
-import * as React from 'react';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { canNextFromReviewStep } from '../wizardTransition';
 import {
   AgentClusterInstallK8sResource,
@@ -42,7 +43,6 @@ import { useTranslation } from '../../../../common/hooks/use-translation-wrapper
 import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 import { ReviewConfigMapsTable } from './ReviewConfigMapsTable';
 import { ValidationSection } from '../components/ValidationSection';
-import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -77,7 +77,8 @@ export const ClusterDeploymentReviewStep = ({
 
   const canContinue = canNextFromReviewStep(agentClusterInstall, clusterAgents);
   const { t } = useTranslation();
-  const onNext = async () => {
+
+  const onNext = React.useCallback(async () => {
     clearAlerts();
     setSubmitting(true);
     try {
@@ -88,18 +89,21 @@ export const ClusterDeploymentReviewStep = ({
     } finally {
       setSubmitting(false);
     }
-  };
+  }, [addAlert, clearAlerts, onFinish, t]);
 
-  const footer = (
-    <WizardFooter
-      activeStep={activeStep}
-      onNext={onNext}
-      isNextDisabled={isSubmitting || !canContinue || !!syncError}
-      nextButtonText={t('ai:Install cluster')}
-      nextButtonProps={{ isLoading: isSubmitting }}
-      onBack={goToPrevStep}
-      onClose={close}
-    />
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        isNextDisabled={isSubmitting || !canContinue || !!syncError}
+        nextButtonText={t('ai:Install cluster')}
+        nextButtonProps={{ isLoading: isSubmitting }}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [activeStep, canContinue, close, goToPrevStep, isSubmitting, onNext, syncError, t],
   );
   useWizardFooter(footer);
 

package/lib/cim/components/ClusterDeployment/types.ts

@@ -141,7 +141,6 @@ export type ClusterDeploymentWizardProps = {
 
   clusterDeployment: ClusterDeploymentK8sResource;
   agentClusterInstall: AgentClusterInstallK8sResource;
-  agents: AgentK8sResource[];
   bareMetalHosts: BareMetalHostK8sResource[];
   aiConfigMap?: ConfigMapK8sResource;
   infraEnv?: InfraEnvK8sResource;

package/lib/cim/components/ClusterDeployment/wizardTransition.ts

@@ -69,7 +69,11 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   // Alternatively we would have to whitelist network validations instead of using group
   // TODO(mlibra): remove that container-images-available from soft validations and let backend drive it via disabling it.
   //   Depends on: https://issues.redhat.com/browse/MGMT-5265
-  softValidationIds: ['ntp-synced', 'container-images-available'],
+  softValidationIds: [
+    'ntp-synced',
+    'container-images-available',
+    'custom-manifests-requirements-satisfied',
+  ],
   getPageURL: (host: Host, validationID: string) => {
     if (validationID === 'ntp-synced') {
       return {

package/lib/cim/components/helpers/clusterDeployment.ts

@@ -172,6 +172,11 @@ export const getClusterProperties = (
   const serviceNetworks = agentClusterInstall.spec?.networking?.serviceNetwork;
   const clusterNetworks = agentClusterInstall.spec?.networking?.clusterNetwork;
 
+  const apiIPs = agentClusterInstall.spec?.apiVIPs || [agentClusterInstall.spec?.apiVIP];
+  const ingressIPs = agentClusterInstall.spec?.ingressVIPs || [
+    agentClusterInstall.spec?.ingressVIP,
+  ];
+
   return {
     // TODO: we should translate following keys since they are used "as it is" in AcmDescriptionList.tsx / List component of the stolostron project
     name: {
@@ -191,12 +196,12 @@ export const getClusterProperties = (
       value: clusterDeployment.spec?.baseDomain,
     },
     apiVip: {
-      key: 'API IP',
-      value: agentClusterInstall?.spec?.apiVIP,
+      key: apiIPs.length > 1 ? 'API IPs' : 'API IP',
+      value: apiIPs.join(', '),
     },
     ingressVip: {
-      key: 'Ingress IP',
-      value: agentClusterInstall?.spec?.ingressVIP,
+      key: ingressIPs.length > 1 ? 'Ingress IPs' : 'Ingress IP',
+      value: ingressIPs.join(', '),
     },
     clusterNetworkCidr: {
       key: (clusterNetworks?.length || 0) > 1 ? 'Cluster network CIDRs' : 'Cluster network CIDR',

package/lib/cim/hooks/index.tsx

@@ -1,3 +1,4 @@
 export * from './useConfigMaps';
 export * from './useAgentServiceConfig';
 export * from './useEvents';
+export * from './useAgents';

package/lib/cim/hooks/useAgents.tsx

@@ -0,0 +1,15 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { AgentK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useAgents = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<AgentK8sResource[]>(
+    {
+      groupVersionKind: {
+        group: 'agent-install.openshift.io',
+        kind: 'Agent',
+        version: 'v1beta1',
+      },
+    },
+    props,
+  );

package/lib/cim/types/k8s/agent-cluster-install.ts

@@ -56,7 +56,7 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
         cidr: string;
       }[];
       userManagedNetworking?: boolean;
-      networkType?: 'OpenShiftSDN' | 'OVNKubernetes';
+      networkType?: 'OpenShiftSDN' | 'OVNKubernetes' | 'CiscoACI' | 'Cilium' | 'Calico' | 'None';
     };
     holdInstallation?: boolean;
     platformType: string;

package/lib/common/components/clusterWizard/customManifests/CustomManifestsAlert.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../hooks';
+
+export const CustomManifestsAlert = ({
+  usesExternalPlatform,
+  usesThirdPartyCNI,
+}: {
+  usesExternalPlatform: boolean;
+  usesThirdPartyCNI: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  let title: string;
+  let body: string;
+
+  if (usesExternalPlatform && usesExternalPlatform) {
+    title = t("ai:You're using an external platform and a third-party CNI");
+    body = t('ai:Make sure to upload the required custom and CNI manifests in this step.');
+  } else if (usesExternalPlatform) {
+    title = t("ai:You're using an external platform");
+    body = t('ai:Make sure to upload the required custom manifests in this step.');
+  } else if (usesThirdPartyCNI) {
+    title = t("ai:You're using a third-party CNI");
+    body = t('ai:Make sure to upload the required CNI manifests in this step.');
+  } else {
+    return null;
+  }
+
+  return (
+    <Stack>
+      <StackItem>
+        <Alert variant={AlertVariant.info} isInline title={title}>
+          {body}
+        </Alert>
+      </StackItem>
+    </Stack>
+  );
+};

package/lib/common/components/clusterWizard/customManifests/index.tsx

@@ -0,0 +1 @@
+export * from './CustomManifestsAlert';

package/lib/common/components/clusterWizard/index.ts

@@ -7,3 +7,5 @@ export { ClusterValidations, HostsValidations } from './ReviewValidations';
 export * from './clusterDetailsValidation';
 export * from './types';
 export * from './validationsInfoUtils';
+export * from './customManifests';
+export * from './networkingSteps';

package/lib/common/components/clusterWizard/networkingSteps/ThirdPartyCNIBanner.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from '../../../hooks';
+import { Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../config';
+import { ExternalLink } from '../../ui';
+
+export const ThirdPartyCNIBanner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <StackItem>
+      <Alert variant={AlertVariant.warning} isInline title={t('ai:Third-party CNI')}>
+        <Stack hasGutter>
+          <StackItem>
+            {t(
+              'ai:Third-party CNIs require uploading CNI manifests. Please verify you have the required manifests and that the chosen CNI is compatible with your platform and OpenShift version.',
+            )}
+          </StackItem>
+          <StackItem>
+            <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
+              {t('ai:Red Hat CNI Support Matrix')}
+            </ExternalLink>
+          </StackItem>
+        </Stack>
+      </Alert>
+    </StackItem>
+  );
+};

package/lib/common/components/clusterWizard/networkingSteps/index.ts

@@ -14,3 +14,4 @@ export { VirtualIPControlGroup } from './VirtualIPControlGroup';
 export type { VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 export { default as AdvancedNetworkFields } from './AdvancedNetworkFields';
 export type { AdvancedNetworkFieldsProps } from './AdvancedNetworkFields';
+export * from './ThirdPartyCNIBanner';

package/lib/common/types/networkType.ts

@@ -1,4 +1,5 @@
 import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
 export type NetworkTypeKey =
   | 'OVNKubernetes'
@@ -15,14 +16,14 @@ export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
 export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
 export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
 
-export const NETWORK_TYPE_LABELS: Record<string, string> = {
-  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
-  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
-  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
-  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
-  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
-  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
-};
+export const NETWORK_TYPE_LABELS = (t: TFunction): Record<string, string> => ({
+  [NETWORK_TYPE_OVN]: t('ai:Open Virtual Networking (OVN)'),
+  [NETWORK_TYPE_SDN]: t('ai:Software-Defined Networking (SDN)'),
+  [NETWORK_TYPE_CISCO_ACI]: t('ai:Cisco ACI'),
+  [NETWORK_TYPE_CILIUM]: t('ai:Isovalent Cilium'),
+  [NETWORK_TYPE_CALICO]: t('ai:Tigera Calico'),
+  [NETWORK_TYPE_NONE]: t('ai:None (Custom CNI)'),
+});
 
 export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
   [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -3,19 +3,21 @@ import {
   Content,
   ContentVariants,
   Alert,
-  AlertVariant,
   Grid,
   FormGroup,
   Switch,
   Tooltip,
-  Stack,
-  StackItem,
 } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
-import { ClustersAPI, ClusterWizardStepHeader, isThirdPartyCNI } from '../../../../common';
+import {
+  ClustersAPI,
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+} from '../../../../common';
 import { getFieldId } from '../../../../common/components/ui/formik';
 import { isOciPlatformType } from '../../utils';
 import DeleteCustomManifestModal from './DeleteCustomManifestModal';
@@ -90,46 +92,6 @@ export const CustomManifestsPage = ({
     ? 'Custom manifests are required when using a third-party CNI or Oracle Cloud Infrastructure.'
     : '';
 
-  const showExternalPlatformReminder = isOciPlatformType(cluster);
-  const showThirdPartyCnIReminder = isThirdPartyCNI(cluster.networkType);
-  const showCombinedReminder = showExternalPlatformReminder && showThirdPartyCnIReminder;
-  let reminderAlerts: React.ReactNode = null;
-  if (showCombinedReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert
-            variant={AlertVariant.info}
-            isInline
-            title="You're using an external platform and a third-party CNI"
-          >
-            Make sure to upload the required custom and CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showExternalPlatformReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using an external platform">
-            Make sure to upload the required custom manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showThirdPartyCnIReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using a third-party CNI">
-            Make sure to upload the required CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  }
-
   return (
     <Grid hasGutter>
       <Content>
@@ -157,7 +119,10 @@ export const CustomManifestsPage = ({
       {!useCustomManifests && <div style={{ minHeight: '250px' }} aria-hidden="true" />}
       {useCustomManifests && (
         <>
-          {reminderAlerts}
+          <CustomManifestsAlert
+            usesExternalPlatform={isOciPlatformType(cluster)}
+            usesThirdPartyCNI={isThirdPartyCNI(cluster.networkType)}
+          />
           <Alert
             isInline
             variant="warning"

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkTypeDropdown.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useField, useFormikContext } from 'formik';
 import {
-  Alert,
-  AlertVariant,
   Dropdown,
   DropdownItem,
   FormGroup,
@@ -12,7 +10,7 @@ import {
   StackItem,
   Tooltip,
 } from '@patternfly/react-core';
-import { getFieldId, ExternalLink } from '../../../../common/components/ui';
+import { getFieldId } from '../../../../common/components/ui';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -25,7 +23,8 @@ import {
   NETWORK_TYPE_FEATURE_IDS,
   isThirdPartyCNI,
 } from '../../../../common/types/networkType';
-import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../../common/config/docs_links';
+import { useTranslation } from '../../../../common/hooks';
+import { ThirdPartyCNIBanner } from '../../../../common';
 
 export interface NetworkTypeDropDownProps {
   isDisabled?: boolean;
@@ -36,6 +35,7 @@ export const NetworkTypeDropDown = ({
   isDisabled = false,
   featureSupportLevelData,
 }: NetworkTypeDropDownProps) => {
+  const { t } = useTranslation();
   const [field, , { setValue }] = useField<string>('networkType');
   const [isOpen, setOpen] = React.useState(false);
   const { values } = useFormikContext<NetworkConfigurationValues>();
@@ -54,9 +54,9 @@ export const NetworkTypeDropDown = ({
     }
   }, [field.value, setValue, featureSupportLevelData, getFeatureDisabledReason]);
 
-  const currentDisplayValue = NETWORK_TYPE_LABELS[field.value];
+  const currentDisplayValue = NETWORK_TYPE_LABELS(t)[field.value];
 
-  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS).map(([value, label]) => {
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS(t)).map(([value, label]) => {
     const disabledReason = getFeatureDisabledReason(
       NETWORK_TYPE_FEATURE_IDS[value],
       featureSupportLevelData ?? undefined,
@@ -119,24 +119,7 @@ export const NetworkTypeDropDown = ({
           </Dropdown>
         </FormGroup>
       </StackItem>
-      {showThirdPartyBanner && (
-        <StackItem>
-          <Alert variant={AlertVariant.warning} isInline title="Third-party CNI">
-            <Stack hasGutter>
-              <StackItem>
-                Third-party CNIs require uploading CNI manifests. Please verify you have the
-                required manifests and that the chosen CNI is compatible with your platform and
-                OpenShift version.
-              </StackItem>
-              <StackItem>
-                <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
-                  Red Hat CNI Support Matrix
-                </ExternalLink>
-              </StackItem>
-            </Stack>
-          </Alert>
-        </StackItem>
-      )}
+      {showThirdPartyBanner && <ThirdPartyCNIBanner />}
     </Stack>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx

@@ -1,7 +1,12 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack, NETWORK_TYPE_LABELS } from '../../../../common';
+import {
+  genericTableRowKey,
+  isDualStack,
+  NETWORK_TYPE_LABELS,
+  useTranslation,
+} from '../../../../common';
 import { getManagementType, getStackTypeLabel } from '../../clusterDetail/ClusterProperties';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -11,6 +16,7 @@ type ReviewTableRowsType = {
 }[];
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
   const rows = React.useMemo(() => {
     const networkRows = [
       {
@@ -197,13 +203,13 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Networking type' },
           {
-            title: cluster.networkType ? NETWORK_TYPE_LABELS[cluster.networkType] : '-',
+            title: cluster.networkType ? NETWORK_TYPE_LABELS(t)[cluster.networkType] : '-',
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],
       },
     ] as ReviewTableRowsType;
-  }, [cluster]);
+  }, [cluster, t]);
 
   return (
     <>