@openshift-assisted/ui-lib 2.49.0 → 2.50.0

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx

@@ -5,70 +5,63 @@ import {
   ClusterDetailsValues,
   OpenShiftVersionDropdown,
   OpenShiftVersionModal,
+  getComparableVersionInt,
 } from '../../../common';
 import { isInOcm } from '../../../common/api';
 import { useFormikContext } from 'formik';
 import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 
+const filterMinVersions = (versions: OpenshiftVersionOptionType[], minVersion: number) =>
+  versions.filter((v) => getComparableVersionInt(v.value) >= minVersion);
+
 type OcmOpenShiftVersionSelectProps = {
-  versions: OpenshiftVersionOptionType[];
+  minVersionAllowed?: number;
 };
-const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps) => {
+const OcmOpenShiftVersionSelect = ({ minVersionAllowed }: OcmOpenShiftVersionSelectProps) => {
   const { t } = useTranslation();
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions } = useOpenShiftVersionsContext();
-  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+  const { allVersions: allVersionsCtx, latestVersions } = useOpenShiftVersionsContext();
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + t('ai:Developer preview release')
-            : version.label,
-        // This is the "key" from openshift-versions API response
-        // It can either be in the long or short (for default versions) form
-        value: version.value,
-      })),
-    [versions, t],
-  );
+  const allVersions = minVersionAllowed
+    ? filterMinVersions(allVersionsCtx, minVersionAllowed)
+    : allVersionsCtx;
+  const versions = minVersionAllowed
+    ? filterMinVersions(latestVersions, minVersionAllowed)
+    : latestVersions;
 
-  const updatedSelectOptions = React.useMemo(() => {
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
+  const customItem = React.useMemo(() => {
     if (
       customOpenshiftSelect &&
-      !selectOptions.some((version) => version.value === customOpenshiftSelect)
+      !versions.some((version) => version.value === customOpenshiftSelect)
     ) {
       return allVersions.find((version) => version.value === customOpenshiftSelect);
     }
     return undefined;
-  }, [allVersions, customOpenshiftSelect, selectOptions]);
+  }, [allVersions, customOpenshiftSelect, versions]);
 
   const getHelperText = (value: string | null, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
   };
 
-  const showOpenshiftVersionModal = () => {
-    setIsOpenshiftVersionModalOpen(true);
-  };
-
   return (
     <>
       <OpenShiftVersionDropdown
         name="openshiftVersion"
-        items={selectOptions}
         versions={versions}
         getHelperText={getHelperText}
         showReleasesLink={isInOcm}
-        showOpenshiftVersionModal={showOpenshiftVersionModal}
-        customItem={updatedSelectOptions}
+        showOpenshiftVersionModal={() => setIsOpenshiftVersionModalOpen(true)}
+        customVersion={customItem}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal
           allVersions={allVersions}
-          setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
+          onClose={() => setIsOpenshiftVersionModalOpen(false)}
           getHelperText={getHelperText}
         />
       )}

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

@@ -4,6 +4,7 @@ import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
+import { ClusterWizardStepHeader } from '../../../../common';
 
 export const CustomManifestsPage = ({
   cluster,
@@ -14,7 +15,7 @@ export const CustomManifestsPage = ({
 }) => (
   <Grid hasGutter>
     <Content>
-      <Content component={ContentVariants.h2}>Custom manifests</Content>
+      <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
       <Content component={ContentVariants.small}>
         Upload additional manifests that will be applied at the install time for advanced
         configuration of the cluster.

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

@@ -5,6 +5,7 @@ import { getFormViewManifestsValidationSchema } from './customManifestsValidatio
 import { CustomManifestsForm } from './CustomManifestsForm';
 import { getEmptyManifestsValues, getManifestValues } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../../../common';
 
 export const CustomManifests = ({
   cluster,
@@ -13,12 +14,13 @@ export const CustomManifests = ({
   cluster: Cluster;
   onFormStateChange: (formState: CustomManifestFormState) => void;
 }) => {
+  const { t } = useTranslation();
   const [formProps, setFormProps] = React.useState<CustomManifestsFormProps>();
 
   React.useEffect(() => {
     setFormProps({
       onFormStateChange: onFormStateChange,
-      validationSchema: getFormViewManifestsValidationSchema,
+      validationSchema: getFormViewManifestsValidationSchema(t),
 
       getInitialValues: (customManifests: ListManifestsExtended) => {
         return getManifestValues(customManifests);
@@ -27,7 +29,7 @@ export const CustomManifests = ({
       showEmptyValues: true,
       cluster: cluster,
     });
-  }, [cluster, onFormStateChange]);
+  }, [cluster, onFormStateChange, t]);
 
   if (!formProps) {
     return null;

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

@@ -1,14 +1,13 @@
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
 import {
   getMaxFileSizeMessage,
   validateFileSize,
   validateFileName,
   validateFileType,
-  INCORRECT_TYPE_FILE_MESSAGE,
 } from '../../../../../common/utils';
-
-import * as yup from 'yup';
+import { getIncorrectFileTypeMessage } from '../../../../../common';
 
 /* eslint-disable */
 type CustomManifestMapper = (a: CustomManifestValues) => string;
@@ -33,7 +32,7 @@ Yup.addMethod(
       if (!list) return true;
 
       const seen = new Set();
-      const errors: yup.ValidationError[] = [];
+      const errors: Yup.ValidationError[] = [];
 
       list.forEach((item, index) => {
         const mappedValue = mapper(item);
@@ -49,7 +48,7 @@ Yup.addMethod(
       });
 
       if (errors.length > 0) {
-        throw new yup.ValidationError(errors);
+        throw new Yup.ValidationError(errors);
       }
 
       return true;
@@ -62,31 +61,32 @@ const INCORRECT_FILENAME =
 
 const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
 
-export const getFormViewManifestsValidationSchema = Yup.object<ManifestFormData>({
-  manifests: Yup.array<CustomManifestValues>()
-    .of(
-      Yup.object({
-        folder: Yup.mixed().required('Required'),
-        filename: Yup.string()
-          .required('Required')
-          .min(1, 'Number of characters must be 1-255')
-          .max(255, 'Number of characters must be 1-255')
-          .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
-            return validateFileName(value);
+export const getFormViewManifestsValidationSchema = (t: TFunction) =>
+  Yup.object<ManifestFormData>({
+    manifests: Yup.array<CustomManifestValues>()
+      .of(
+        Yup.object({
+          folder: Yup.mixed().required('Required'),
+          filename: Yup.string()
+            .required('Required')
+            .min(1, 'Number of characters must be 1-255')
+            .max(255, 'Number of characters must be 1-255')
+            .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
+              return validateFileName(value);
+            }),
+          manifestYaml: Yup.string().when('filename', {
+            is: (filename: string) => !filename.includes('patch'),
+            then: () =>
+              Yup.string()
+                .required('Required')
+                .test('not-big-file', getMaxFileSizeMessage(t), validateFileSize)
+                .test('not-valid-file', getIncorrectFileTypeMessage(t), validateFileType),
+            otherwise: () =>
+              Yup.string()
+                .required('Required')
+                .test('not-big-file', getMaxFileSizeMessage(t), validateFileSize), // Validation of file content is not required if filename contains 'patch'
           }),
-        manifestYaml: Yup.string().when('filename', {
-          is: (filename: string) => !filename.includes('patch'),
-          then: () =>
-            Yup.string()
-              .required('Required')
-              .test('not-big-file', getMaxFileSizeMessage, validateFileSize)
-              .test('not-valid-file', INCORRECT_TYPE_FILE_MESSAGE, validateFileType),
-          otherwise: () =>
-            Yup.string()
-              .required('Required')
-              .test('not-big-file', getMaxFileSizeMessage, validateFileSize), // Validation of file content is not required if filename contains 'patch'
         }),
-      }),
-    )
-    .uniqueManifestFiles(UNIQUE_FOLDER_FILENAME, (val: CustomManifestValues) => val.filename),
-});
+      )
+      .uniqueManifestFiles(UNIQUE_FOLDER_FILENAME, (val: CustomManifestValues) => val.filename),
+  });

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

@@ -2,27 +2,27 @@ import React from 'react';
 import { useFormikContext } from 'formik';
 import { useSelector } from 'react-redux';
 import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
-import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 import {
   canBeDualStack,
   canSelectNetworkTypeSDN,
-  clusterNetworksEqual,
   CpuArchitecture,
   DUAL_STACK,
   HostSubnets,
+  isAdvNetworkConf,
   isSNO,
   NetworkConfigurationValues,
   selectApiVip,
   selectIngressVip,
-  serviceNetworksEqual,
 } from '../../../../common';
 import {
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
+  VirtualIPControlGroup,
+  VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
 } from '../../../../common/components/clusterWizard/networkingSteps';
-import { StackTypeControlGroup } from './StackTypeControl';
-import { AvailableSubnetsControl } from './AvailableSubnetsControl';
-import AdvancedNetworkFields from './AdvancedNetworkFields';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmCheckbox } from '../../ui/OcmFormFields';
 import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
@@ -32,7 +32,6 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
 import {
-  Cluster,
   ClusterDefaultConfig,
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
@@ -50,21 +49,6 @@ export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   >;
 };
 
-const isAdvNetworkConf = (
-  cluster: Cluster,
-  defaultNetworkValues: Pick<ClusterDefaultConfig, 'clusterNetworksIpv4' | 'serviceNetworksIpv4'>,
-) =>
-  !(
-    serviceNetworksEqual(
-      cluster.serviceNetworks || [],
-      defaultNetworkValues.serviceNetworksIpv4 || [],
-    ) &&
-    clusterNetworksEqual(
-      cluster.clusterNetworks || [],
-      defaultNetworkValues.clusterNetworksIpv4 || [],
-    )
-  );
-
 const getManagedNetworkingDisabledReason = (
   isDualStack: boolean,
   isOracleCloudInfrastructure: boolean,
@@ -270,6 +254,8 @@ const NetworkConfiguration = ({
             clusterId={cluster.id}
             isDualStackSelectable={isDualStackSelectable}
             hostSubnets={hostSubnets}
+            defaultNetworkValues={defaultNetworkSettings}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -293,6 +279,7 @@ const NetworkConfiguration = ({
               false
             }
             openshiftVersion={cluster.openshiftVersion}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -301,8 +288,10 @@ const NetworkConfiguration = ({
         <StackItem>
           <VirtualIPControlGroup
             cluster={cluster}
+            hostSubnets={hostSubnets}
             isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
             supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -324,7 +313,7 @@ const NetworkConfiguration = ({
       </StackItem>
       {isAdvanced && (
         <StackItem>
-          <AdvancedNetworkFields />
+          <AdvancedNetworkFields isDisabled={isViewerMode} />
         </StackItem>
       )}
     </Stack>

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

@@ -17,6 +17,7 @@ import {
   useAlerts,
   useFormikAutoSave,
   ClustersAPI,
+  useTranslation,
 } from '../../../../common';
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
@@ -163,6 +164,7 @@ const NetworkConfigurationForm: React.FC<{
 };
 
 const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
   const pullSecret = usePullSecret();
   const {
     infraEnv,
@@ -201,8 +203,13 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
 
   const memoizedValidationSchema = React.useMemo(
     () =>
-      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
-    [hostSubnets, initialValues, cluster.openshiftVersion],
+      getNetworkConfigurationValidationSchema(
+        initialValues,
+        hostSubnets,
+        t,
+        cluster.openshiftVersion,
+      ),
+    [initialValues, hostSubnets, t, cluster.openshiftVersion],
   );
 
   React.useEffect(() => {

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { HostsTableActions, selectSchedulableMasters } from '../../../../common';
 import NetworkingStatus from '../../hosts/NetworkingStatus';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import {
+  HostsTableActions,
+  selectSchedulableMasters,
   hostnameColumn,
   roleColumn,
   activeNICColumn,
@@ -10,7 +11,7 @@ import {
   ipv6Column,
   macAddressColumn,
   countColumn,
-} from '../../../../common/components/hosts/tableUtils';
+} from '../../../../common';
 import { ActionsResolver, TableRow } from '../../../../common/components/hosts/AITable';
 import { usePagination } from '../../../../common/components/hosts/usePagination';
 import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 import {
   clusterNetworksValidationSchema,
   dualStackValidationSchema,
@@ -56,7 +57,7 @@ export const getNetworkInitialValues = (
         ? defaultNetworkValues.clusterNetworksDualstack
         : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
             ...network,
-            clusterId: cluster.id,
+            clusterId: cluster?.id,
           }))),
     serviceNetworks:
       cluster.serviceNetworks ||
@@ -64,7 +65,7 @@ export const getNetworkInitialValues = (
         ? defaultNetworkValues.serviceNetworksDualstack
         : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
             ...network,
-            clusterId: cluster.id,
+            clusterId: cluster?.id,
           }))),
   };
 };
@@ -72,17 +73,14 @@ export const getNetworkInitialValues = (
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
+  t: TFunction,
   openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
-      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips),
-      ingressVips: vipArrayValidationSchema<IngressVip>(
-        hostSubnets,
-        values,
-        initialValues.ingressVips,
-      ),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, t),
+      ingressVips: vipArrayValidationSchema<IngressVip>(hostSubnets, values, t),
+      sshPublicKey: sshPublicKeyValidationSchema(t),
       machineNetworks:
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
@@ -92,29 +90,21 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks', openshiftVersion),
+                      dualStackValidationSchema('machine networks', t, openshiftVersion),
                     )
                   : Yup.array(),
             }),
-      clusterNetworks: clusterNetworksValidationSchema.when('stackType', {
+      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
-        otherwise: () =>
-          values.clusterNetworks && values.clusterNetworks?.length >= 2
-            ? clusterNetworksValidationSchema.concat(
-                dualStackValidationSchema('cluster network', openshiftVersion),
-              )
-            : Yup.array(),
+        then: (schema) => schema.concat(IPv4ValidationSchema),
+        otherwise: (schema) =>
+          schema.concat(dualStackValidationSchema('cluster network', t, openshiftVersion)),
       }),
-      serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
+      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
-        then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
-        otherwise: () =>
-          values.serviceNetworks && values.serviceNetworks?.length >= 2
-            ? serviceNetworkValidationSchema.concat(
-                dualStackValidationSchema('service network', openshiftVersion),
-              )
-            : Yup.array(),
+        then: (schema) => schema.concat(IPv4ValidationSchema),
+        otherwise: (schema) =>
+          schema.concat(dualStackValidationSchema('service network', t, openshiftVersion)),
       }),
     }),
   );

package/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
+import { getYearForAssistedInstallerDocumentationLink } from '../../../../common/config/docs_links';
 
 export type BundleSpec = {
   incompatibleBundles?: string[];
@@ -30,11 +31,13 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     incompatibleBundles: [],
     Description: () => (
       <List>
+        <ListItem>GPUs are recommended for optimal AI/ML workload performance.</ListItem>
         <ListItem>
           NVIDIA GPU, AMD GPU and Kernel Module Management may or may not be installed based on the
           GPU discovered on your hosts.
         </ListItem>
       </List>
     ),
+    docsLink: `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/customizing-with-bundles-and-operators#openshift-ai-bundle_customizing-with-bundles-and-operators`,
   },
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts.tsx

@@ -9,8 +9,10 @@ import { formViewHostsToInfraEnvField } from '../../data/formDataToInfraEnvField
 import { getEmptyFormViewHostsValues } from '../../data/emptyData';
 import { getFormViewHostsValues, getFormViewNetworkWideValues } from '../../data/fromInfraEnv';
 import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../../../../common';
 
 export const FormViewHosts: React.FC<StaticIpViewProps> = ({ infraEnv, ...props }) => {
+  const { t } = useTranslation();
   const [protocolType, setProtocolType] = React.useState<StaticProtocolType>();
   const [formProps, setFormProps] = React.useState<StaticIpFormProps<FormViewHostsValues>>();
   React.useEffect(() => {
@@ -20,7 +22,7 @@ export const FormViewHosts: React.FC<StaticIpViewProps> = ({ infraEnv, ...props
     if (networkWideValues) {
       setFormProps({
         infraEnv,
-        validationSchema: getFormViewHostsValidationSchema(networkWideValues),
+        validationSchema: getFormViewHostsValidationSchema(networkWideValues, t),
         getInitialValues: (infraEnv: InfraEnv) => {
           return getFormViewHostsValues(infraEnv);
         },

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/formViewHostsValidationSchema.tsx

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 
 import {
   FormViewNetworkWideValues,
@@ -14,6 +15,7 @@ import {
   getIpIsNotNetworkOrBroadcastAddressSchema,
 } from '../../commonValidationSchemas';
 import { getMachineNetworkCidr } from '../../data/machineNetwork';
+
 const requiredMsg = 'A value is required';
 
 const getAllIpv4Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
@@ -39,12 +41,12 @@ const getAllBondInterfaces: UniqueStringArrayExtractor<FormViewHostsValues> = (
   ]);
 };
 
-const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =>
+const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues, t: TFunction) =>
   Yup.object({
     macAddress: Yup.mixed().when('useBond', {
       is: false,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllMacAddresses)),
       otherwise: () => Yup.mixed().notRequired(),
@@ -82,7 +84,7 @@ const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =
     bondPrimaryInterface: Yup.mixed().when('useBond', {
       is: true,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllBondInterfaces)),
       otherwise: () => Yup.mixed().notRequired(),
@@ -90,15 +92,18 @@ const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =
     bondSecondaryInterface: Yup.mixed().when('useBond', {
       is: true,
       then: () =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .required(requiredMsg)
           .concat(getUniqueValidationSchema(getAllBondInterfaces)),
       otherwise: () => Yup.mixed().notRequired(),
     }),
   });
 
-export const getFormViewHostsValidationSchema = (networkWideValues: FormViewNetworkWideValues) => {
+export const getFormViewHostsValidationSchema = (
+  networkWideValues: FormViewNetworkWideValues,
+  t: TFunction,
+) => {
   return Yup.object().shape({
-    hosts: Yup.array(getHostValidationSchema(networkWideValues)),
+    hosts: Yup.array(getHostValidationSchema(networkWideValues, t)),
   });
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -16,6 +16,7 @@ import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardCon
 import { FormViewHosts } from './FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from './FormViewNetworkWide/FormViewNetworkWide';
 import './staticIp.css';
+import { ClusterWizardStepHeader } from '../../../../../common';
 
 const isoRegenerationAlert = (
   <Alert
@@ -85,7 +86,7 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   return (
     <Grid hasGutter>
       <GridItem>
-        <Content component={ContentVariants.h2}>Static network configurations</Content>
+        <ClusterWizardStepHeader>Static network configurations</ClusterWizardStepHeader>
         <Content component={ContentVariants.small}>
           Network configuration can be done using either the form view or YAML view. Configurations
           done in this step are for discovering hosts.

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlView.tsx

@@ -7,17 +7,21 @@ import { YamlViewFields } from './YamlViewFields';
 import { getEmptyYamlValues } from '../../data/emptyData';
 import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { getYamlViewValues } from '../../data/fromInfraEnv';
+import { useTranslation } from '../../../../../../common';
 
 export const YamlView: React.FC<StaticIpViewProps> = ({ ...props }) => {
+  const { t } = useTranslation();
+
   const formProps: StaticIpFormProps<YamlViewValues> = {
     ...props,
-    validationSchema: yamlViewValidationSchema,
+    validationSchema: yamlViewValidationSchema(t),
     getInitialValues: (infraEnv: InfraEnv) => {
       return getYamlViewValues(infraEnv);
     },
     getUpdateParams: (currentInfraEnv: InfraEnv, values: YamlViewValues) => values.hosts,
     getEmptyValues: () => getEmptyYamlValues(),
   };
+
   return (
     <StaticIpForm<YamlViewValues> {...formProps}>
       <YamlViewFields />