@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

package/lib/common/validationSchemas/networkingValidation.tsx

@@ -0,0 +1,113 @@
+import * as Yup from 'yup';
+import isCIDR from 'is-cidr';
+import { TFunction } from 'i18next';
+
+import {
+  ClusterNetwork,
+  MachineNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/./assisted-installer-service';
+import {
+  hostPrefixValidationSchema,
+  hostSubnetValidationSchema,
+  ipBlockValidationSchema,
+} from './addressValidation';
+import { isMajorMinorVersionEqualOrGreater } from '../utils';
+import { allSubnetsIPv4 } from '../components/ui/formik/utils';
+
+export const machineNetworksValidationSchema = Yup.array().of(
+  Yup.object({ cidr: hostSubnetValidationSchema, clusterId: Yup.string() }),
+);
+
+export const clusterNetworksValidationSchema = (t: TFunction) =>
+  Yup.array().of(
+    Yup.lazy((values: ClusterNetwork) =>
+      Yup.object({
+        cidr: ipBlockValidationSchema(
+          undefined /* So far used in OCM only and so validated by backend */,
+          t,
+        ),
+        hostPrefix: hostPrefixValidationSchema(values.cidr, t),
+        clusterId: Yup.string(),
+      }),
+    ),
+  );
+
+export const serviceNetworkValidationSchema = (t: TFunction) =>
+  Yup.array().of(
+    Yup.object({
+      cidr: ipBlockValidationSchema(
+        undefined /* So far used in OCM only and so validated by backend */,
+        t,
+      ),
+      clusterId: Yup.string(),
+    }),
+  );
+
+export const dualStackValidationSchema = (field: string, t: TFunction, openshiftVersion?: string) =>
+  Yup.array()
+    .max(2, t('ai:Maximum number of {{field}} subnets in dual stack is 2.', { field }))
+    .test(
+      'dual-stack-ipv4',
+      openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')
+        ? t('ai:First network has to be a valid IPv4 or IPv6 subnet.')
+        : t('ai:First network has to be IPv4 subnet.'),
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean => {
+        // For OCP versions > 4.11, allow IPv6 as primary network
+        if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+          return !!values?.[0].cidr && (isCIDR.v4(values[0].cidr) || isCIDR.v6(values[0].cidr));
+        }
+        // For older versions, require IPv4 as primary network
+        return !!values?.[0].cidr && isCIDR.v4(values[0].cidr);
+      },
+    )
+    .test(
+      'dual-stack-unique-cidrs',
+      t('ai:Provided {{field}} subnets must be unique.', { field }),
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const first = values[0]?.cidr || '';
+        const second = values[1]?.cidr || '';
+        if (!first || !second) {
+          return true;
+        }
+        const firstIsCidr = isCIDR.v4(first) || isCIDR.v6(first);
+        const secondIsCidr = isCIDR.v4(second) || isCIDR.v6(second);
+        if (!firstIsCidr || !secondIsCidr) {
+          return true;
+        }
+        return first !== second;
+      },
+    )
+    .test(
+      'dual-stack-opposite-families',
+      t('ai:When two {{field}} values are provided, one must be IPv4 and the other IPv6.', {
+        field,
+      }),
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const a = values[0]?.cidr || '';
+        const b = values[1]?.cidr || '';
+        if (!a || !b) {
+          return true;
+        }
+        const a4 = isCIDR.v4(a);
+        const a6 = isCIDR.v6(a);
+        const b4 = isCIDR.v4(b);
+        const b6 = isCIDR.v6(b);
+        if (!((a4 || a6) && (b4 || b6))) {
+          return true;
+        }
+        return (a4 && b6) || (a6 && b4);
+      },
+    );
+
+export const IPv4ValidationSchema = Yup.array().test(
+  'single-stack',
+  `All network subnets must be IPv4.`,
+  (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv4(values),
+);

package/lib/common/validationSchemas/ntpValidation.tsx

@@ -0,0 +1,30 @@
+import * as Yup from 'yup';
+import { trimCommaSeparatedList } from '../components/ui/formik/utils';
+import { isIPorDN } from './utils';
+import { TFunction } from 'i18next';
+
+export const ntpSourceValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .test(
+      'ntp-source-validation',
+      t('ai:Provide a comma separated list of valid DNS names or IP addresses.'),
+      (value?: string) => {
+        if (!value || value === '') {
+          return true;
+        }
+        return trimCommaSeparatedList(value)
+          .split(',')
+          .every((v) => isIPorDN(v));
+      },
+    )
+    .test(
+      'ntp-source-validation-unique',
+      t('ai:DNS names and IP addresses must be unique.'),
+      (value?: string) => {
+        if (!value || value === '') {
+          return true;
+        }
+        const arr = trimCommaSeparatedList(value).split(',');
+        return arr.length === new Set(arr).size;
+      },
+    );

package/lib/common/validationSchemas/proxyValidation.tsx

@@ -0,0 +1,67 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { ProxyFieldsType } from '../types';
+import { trimCommaSeparatedList } from '../components/ui/formik/utils';
+import { PROXY_DNS_REGEX } from './regexes';
+import { isIPorDN } from './utils';
+
+export const httpProxyValidationSchema = ({
+  values,
+  pairValueName,
+  allowEmpty,
+  t,
+}: {
+  values: ProxyFieldsType;
+  pairValueName: 'httpProxy' | 'httpsProxy';
+  allowEmpty?: boolean;
+  t: TFunction;
+}) => {
+  const validation = Yup.string().test(
+    'http-proxy-validation',
+    t('ai:Provide a valid HTTP URL.'),
+    (value?: string) => {
+      if (!value) {
+        return true;
+      }
+
+      if (!value.startsWith('http://')) {
+        return false;
+      }
+
+      try {
+        new URL(value);
+      } catch {
+        return false;
+      }
+      return true;
+    },
+  );
+
+  if (allowEmpty) {
+    return validation;
+  }
+
+  return validation.test(
+    'http-proxy-no-empty-validation',
+    t('ai:At least one of the HTTP or HTTPS proxy URLs is required.'),
+    (value) => !values.enableProxy || !!value || !!values[pairValueName],
+  );
+};
+
+export const noProxyValidationSchema = (t: TFunction) =>
+  Yup.string().test(
+    'no-proxy-validation',
+    t('ai:Provide a comma separated list of valid DNS names or IP addresses.'),
+    (value?: string) => {
+      if (!value || value === '*') {
+        return true;
+      }
+
+      // https://docs.openshift.com/container-platform/4.5/installing/installing_bare_metal/installing-restricted-networks-bare-metal.html#installation-configure-proxy_installing-restricted-networks-bare-metal
+      // A comma-separated list of destination domain names, domains, IP addresses, or other network CIDRs to exclude proxying.
+      // Preface a domain with . to match subdomains only. For example, .y.com matches x.y.com, but not y.com.
+      // Use * to bypass proxy for all destinations.
+      const noProxyList = trimCommaSeparatedList(value).split(',');
+      return noProxyList.every((p) => isIPorDN(p, PROXY_DNS_REGEX));
+    },
+  );

package/lib/common/validationSchemas/pullSecretValidation.tsx

@@ -0,0 +1,24 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+
+export const pullSecretValidationSchema = (t: TFunction) =>
+  Yup.string().test(
+    'is-well-formed-json',
+    t("ai:Invalid pull secret format. You must use your Red Hat account's pull secret."),
+    (value?: string) => {
+      const isValid = true;
+      if (!value) return isValid;
+      try {
+        const pullSecret = JSON.parse(value) as {
+          auths: string;
+        };
+        return (
+          pullSecret.constructor.name === 'Object' &&
+          !!pullSecret?.auths &&
+          pullSecret.auths.constructor.name === 'Object'
+        );
+      } catch {
+        return !isValid;
+      }
+    },
+  );

package/lib/common/validationSchemas/regexes.tsx

@@ -0,0 +1,22 @@
+export const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;
+
+export const CLUSTER_NAME_START_END_REGEX = /^[a-z0-9](.*[a-z0-9])?$/;
+export const CLUSTER_NAME_VALID_CHARS_REGEX = /^[a-z0-9-]*$/;
+
+export const DNS_NAME_REGEX = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;
+export const NAME_START_END_REGEX = /^[a-z0-9](.*[a-z0-9])?$/;
+export const NAME_CHARS_REGEX = /^[a-z0-9-.]*$/;
+
+export const HOST_NAME_REGEX = /^[^.]{1,63}(?:[.][^.]{1,63})*$/;
+export const SSH_PUBLIC_KEY_REGEX =
+  /^(ssh-rsa AAAAB3NzaC1yc2|ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNT|ecdsa-sha2-nistp384 AAAAE2VjZHNhLXNoYTItbmlzdHAzODQAAAAIbmlzdHAzOD|ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1Mj|ssh-ed25519 AAAAC3NzaC1lZDI1NTE5|ssh-dss AAAAB3NzaC1kc3)[0-9A-Za-z+/]+[=]{0,3}( .*)?$/;
+
+export const PROXY_DNS_REGEX =
+  /(^\.?([a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62}){1}(\.[a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62})*$)/;
+
+export const IP_V4_ZERO = '0.0.0.0';
+export const IP_V6_ZERO = '0000:0000:0000:0000:0000:0000:0000:0000';
+
+export const MAC_REGEX = /^([0-9A-Fa-f]{2}[:]){5}([0-9A-Fa-f]{2})$/;
+
+export const LOCATION_CHARS_REGEX = /^[a-zA-Z0-9-._]*$/;

package/lib/common/validationSchemas/sshValidation.tsx

@@ -0,0 +1,46 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { trimSshPublicKey } from '../components/ui/formik/utils';
+import { SSH_PUBLIC_KEY_REGEX } from './regexes';
+
+export const sshPublicKeyValidationSchema = (t: TFunction) =>
+  Yup.string().test(
+    'ssh-public-key',
+    t(
+      'ai:SSH public key must consist of "[TYPE] key [[EMAIL]]", supported types are: ssh-rsa, ssh-ed25519, ecdsa-[VARIANT]. A single key can be provided only.',
+    ),
+    (value?: string) => {
+      if (!value) {
+        return true;
+      }
+
+      return !!trimSshPublicKey(value).match(SSH_PUBLIC_KEY_REGEX);
+    },
+  );
+
+export const sshPublicKeyListValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .test(
+      'ssh-public-keys',
+      t(
+        'ai:SSH public key must consist of "[TYPE] key [[EMAIL]]", supported types are: ssh-rsa, ssh-ed25519, ecdsa-[VARIANT].',
+      ),
+      (value?: string) => {
+        if (!value) {
+          return true;
+        }
+
+        return (
+          trimSshPublicKey(value)
+            .split('\n')
+            .find((line: string) => !line.match(SSH_PUBLIC_KEY_REGEX)) === undefined
+        );
+      },
+    )
+    .test('ssh-public-keys-unique', t('ai:SSH public keys must be unique.'), (value?: string) => {
+      if (!value) {
+        return true;
+      }
+      const keyList = trimSshPublicKey(value).split('\n');
+      return new Set(keyList).size === keyList.length;
+    });

package/lib/common/validationSchemas/utils.tsx

@@ -0,0 +1,36 @@
+import * as Yup from 'yup';
+import { Address4, Address6 } from 'ip-address';
+import { DNS_NAME_REGEX } from './regexes';
+
+export const isIPorDN = (value?: string, dnsRegex = DNS_NAME_REGEX) => {
+  if ((value as string).match(dnsRegex)) {
+    return true;
+  } else if (value) {
+    return Address4.isValid(value) || Address6.isValid(value);
+  } else {
+    return false;
+  }
+};
+
+// Helpers to classify literal IPs more robustly
+export const isIPv4Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes('.') && Address4.isValid(ip);
+};
+
+export const isIPv6Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes(':') && Address6.isValid(ip);
+};
+
+export const alwaysRequired = (message?: string) =>
+  Yup.string().test(
+    'always-required',
+    message || 'The value is required.',
+    (value?: string): boolean => !!value,
+  );
+
+export const getArrayIndexFromPath = (path: string): number => {
+  const match = path.match(/\[(\d+)\][^\[]*$/); // Prefer the last [...] occurrence for nested array paths like "foo[0].bar[1].ip"
+  return match ? parseInt(match[1], 10) : NaN;
+};

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

@@ -36,9 +36,9 @@ export const BaseDnsHelperText = ({
         Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
         cluster installed. All DNS records must include the cluster name and be subdomains of the
         base you enter. The full cluster address will be: <br />
-        <strong>
+        <span className="pf-v6-u-font-weight-bold">
           {name || '[Cluster Name]'}.{baseDnsDomain || '[domainname.com]'}
-        </strong>
+        </span>
       </HelperTextItem>
     </HelperText>
   </FormHelperText>

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

@@ -13,18 +13,14 @@ import {
   FlexItem,
 } from '@patternfly/react-core';
 import { Formik, FormikHelpers } from 'formik';
+import { TFunction } from 'i18next';
 import {
   HostStaticNetworkConfig,
   ImageType,
   InfraEnv,
   Proxy,
 } from '@openshift-assisted/types/assisted-installer-service';
-import {
-  AlertFormikError,
-  httpProxyValidationSchema,
-  noProxyValidationSchema,
-  sshPublicKeyValidationSchema,
-} from '../../../common/components/ui';
+import { AlertFormikError } from '../../../common/components/ui';
 import {
   DiscoveryImageType,
   ProxyFieldsType,
@@ -37,6 +33,11 @@ import UploadSSH from '../../../common/components/clusterConfiguration/UploadSSH
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import DiscoveryImageTypeDropdown, { discoveryImageTypes } from './DiscoveryImageTypeDropdown';
 import CertificateFields from '../../../common/components/clusterConfiguration/CertificateFields';
+import {
+  httpProxyValidationSchema,
+  noProxyValidationSchema,
+  sshPublicKeyValidationSchema,
+} from '../../../common';
 
 export interface OcmImageCreateParams {
   /**
@@ -54,14 +55,15 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
   ProxyFieldsType &
   TrustedCertificateFieldsType;
 
-const validationSchema = Yup.lazy((values: OcmDiscoveryImageFormValues) =>
-  Yup.object<OcmDiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyValidationSchema,
-    httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-    httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-    noProxy: noProxyValidationSchema,
-  }),
-);
+const validationSchema = (t: TFunction) =>
+  Yup.lazy((values: OcmDiscoveryImageFormValues) =>
+    Yup.object<OcmDiscoveryImageFormValues>().shape({
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
+    }),
+  );
 
 type OcmDiscoveryImageConfigFormProps = Proxy & {
   onCancel: () => void;
@@ -137,7 +139,7 @@ export const OcmDiscoveryImageConfigForm = ({
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={validationSchema}
+      validationSchema={validationSchema(t)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status, setStatus }) => {

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(() => {