@openshift-assisted/ui-lib 2.17.1-cim → 2.18.0-cim

package/lib/common/validationSchemas/clusterDetailsValidation.tsx

@@ -0,0 +1,168 @@
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+
+import {
+  CLUSTER_NAME_MAX_LENGTH,
+  clusterNameValidationMessages,
+  FORBIDDEN_HOSTNAMES,
+  hostnameValidationMessages,
+  locationValidationMessages,
+  nameValidationMessages,
+} from './constants';
+import { ClusterDetailsValues } from '../components';
+import {
+  ALPHANUMERIC_REGEX,
+  CLUSTER_NAME_START_END_REGEX,
+  CLUSTER_NAME_VALID_CHARS_REGEX,
+  DNS_NAME_REGEX,
+  HOST_NAME_REGEX,
+  LOCATION_CHARS_REGEX,
+  NAME_CHARS_REGEX,
+  NAME_START_END_REGEX,
+} from './regexes';
+
+export const nameValidationSchema = (
+  t: TFunction,
+  usedClusterNames: string[],
+  baseDnsDomain = '',
+  validateUniqueName?: boolean,
+  isOcm = false,
+) => {
+  const clusterNameValidationMessagesList = clusterNameValidationMessages(t);
+  return Yup.string()
+    .required(t('ai:Required field'))
+    .matches(CLUSTER_NAME_VALID_CHARS_REGEX, {
+      message: clusterNameValidationMessagesList.INVALID_VALUE,
+      excludeEmptyString: true,
+    })
+    .matches(CLUSTER_NAME_START_END_REGEX, {
+      message: clusterNameValidationMessagesList.INVALID_START_END,
+      excludeEmptyString: true,
+    })
+    .min(
+      isOcm ? 1 : 2,
+      isOcm
+        ? clusterNameValidationMessagesList.INVALID_LENGTH_OCM
+        : clusterNameValidationMessagesList.INVALID_LENGTH_ACM,
+    )
+    .max(
+      CLUSTER_NAME_MAX_LENGTH,
+      isOcm
+        ? clusterNameValidationMessagesList.INVALID_LENGTH_OCM
+        : clusterNameValidationMessagesList.INVALID_LENGTH_ACM,
+    )
+    .when('useRedHatDnsService', {
+      is: (useRedHatDnsService: ClusterDetailsValues['useRedHatDnsService']) =>
+        useRedHatDnsService === true,
+      then: (schema) =>
+        schema.test(
+          'is-name-unique',
+          clusterNameValidationMessagesList.NOT_UNIQUE,
+          (value?: string) => {
+            const clusterFullName = `${value || ''}.${baseDnsDomain}`;
+            return !value || !usedClusterNames.includes(clusterFullName);
+          },
+        ),
+      otherwise: (schema) =>
+        schema.test(
+          'is-name-unique',
+          clusterNameValidationMessagesList.NOT_UNIQUE,
+          (value?: string) => {
+            // in CIM cluster name is ClusterDeployment CR name which must be unique
+            return validateUniqueName ? !value || !usedClusterNames.includes(value) : true;
+          },
+        ),
+    });
+};
+
+export const richNameValidationSchema = (t: TFunction, usedNames: string[], origName?: string) => {
+  const nameValidationMessagesList = nameValidationMessages(t);
+  return Yup.string()
+    .min(1, nameValidationMessagesList.INVALID_LENGTH)
+    .max(253, nameValidationMessagesList.INVALID_LENGTH)
+    .test(
+      nameValidationMessagesList.INVALID_START_END,
+      nameValidationMessagesList.INVALID_START_END,
+      (value?: string) => {
+        const trimmed = value?.trim();
+        if (!trimmed) {
+          return true;
+        }
+        return (
+          !!trimmed[0].match(NAME_START_END_REGEX) &&
+          (trimmed[trimmed.length - 1]
+            ? !!trimmed[trimmed.length - 1].match(NAME_START_END_REGEX)
+            : true)
+        );
+      },
+    )
+    .matches(HOST_NAME_REGEX, nameValidationMessagesList.INVALID_FORMAT)
+    .matches(NAME_CHARS_REGEX, {
+      message: nameValidationMessagesList.INVALID_VALUE,
+      excludeEmptyString: true,
+    })
+    .test(nameValidationMessagesList.NOT_UNIQUE, nameValidationMessagesList.NOT_UNIQUE, (value) => {
+      if (!value || value === origName) {
+        return true;
+      }
+      return !usedNames.find((n) => n === value);
+    })
+    .notOneOf(FORBIDDEN_HOSTNAMES, hostnameValidationMessages(t).LOCALHOST_ERR);
+};
+
+export const dnsNameValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .test(
+      'dns-name-label-length',
+      t('ai:Single label of the DNS name can not be longer than 63 characters.'),
+      (value?: string) => (value || '').split('.').every((label: string) => label.length <= 63),
+    )
+    .matches(DNS_NAME_REGEX, {
+      message: (value) =>
+        t('ai:Value "{{value}}" is not valid DNS name. Example: basedomain.example.com', { value }),
+      excludeEmptyString: true,
+    });
+
+export const baseDomainValidationSchema = (t: TFunction) =>
+  Yup.string().test(
+    'dns-name-label-length',
+    t(
+      'ai:Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.',
+    ),
+    (value?: string) => {
+      // Check if the value contains any spaces
+      if (/\s/.test(value as string)) {
+        return false; // Value contains spaces, validation fails
+      }
+
+      // Check the label lengths
+      const labels = (value || '').split('.');
+      return labels.every((label: string) => label.length <= 63);
+    },
+  );
+
+export const locationValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .min(1, locationValidationMessages(t).INVALID_LENGTH)
+    .max(63, locationValidationMessages(t).INVALID_LENGTH)
+    .test(
+      locationValidationMessages(t).INVALID_START_END,
+      locationValidationMessages(t).INVALID_START_END,
+      (value?: string) => {
+        const trimmed = value?.trim();
+        if (!trimmed) {
+          return true;
+        }
+        return (
+          !!trimmed[0].match(ALPHANUMERIC_REGEX) &&
+          (trimmed[trimmed.length - 1]
+            ? !!trimmed[trimmed.length - 1].match(ALPHANUMERIC_REGEX)
+            : true)
+        );
+      },
+    )
+    .matches(LOCATION_CHARS_REGEX, {
+      message: locationValidationMessages(t).INVALID_VALUE,
+      excludeEmptyString: true,
+    })
+    .required(t('ai:Location is a required field.'));

package/lib/common/{components/ui/formik → validationSchemas}/constants.tsx

@@ -57,12 +57,6 @@ export const locationValidationMessages = (t: TFunction) => ({
   INVALID_START_END: t('ai:Must start and end with an alphanumeric character'),
 });
 
-export const bmcAddressValidationMessages = (t: TFunction) => ({
-  INVALID_VALUE: t(
-    'ai:The Value is not valid BMC address, supported protocols are redfish-virtualmedia or idrac-virtualmedia.',
-  ),
-});
-
 export const FORBIDDEN_HOSTNAMES = [
   'localhost',
   'localhost.localdomain',
@@ -71,3 +65,6 @@ export const FORBIDDEN_HOSTNAMES = [
   'localhost6',
   'localhost6.localdomain6',
 ];
+
+export const getIncorrectFileTypeMessage = (t: TFunction) =>
+  t('ai:File type is not supported. File type must be yaml, yml, json, yaml.patch. or yml.patch.');

package/lib/common/validationSchemas/hostnameValidation.tsx

@@ -0,0 +1,46 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { FORBIDDEN_HOSTNAMES, hostnameValidationMessages } from './constants';
+import { NAME_START_END_REGEX, NAME_CHARS_REGEX } from './regexes';
+
+export const richHostnameValidationSchema = (
+  t: TFunction,
+  usedNames: string[],
+  origName?: string,
+) => {
+  const hostnameValidationMessagesList = hostnameValidationMessages(t);
+  return Yup.string()
+    .min(1, hostnameValidationMessagesList.INVALID_LENGTH)
+    .max(63, hostnameValidationMessagesList.INVALID_LENGTH)
+    .test(
+      hostnameValidationMessagesList.INVALID_START_END,
+      hostnameValidationMessagesList.INVALID_START_END,
+      (value?: string) => {
+        const trimmed = value?.trim();
+        if (!trimmed) {
+          return true;
+        }
+        return (
+          !!trimmed[0].match(NAME_START_END_REGEX) &&
+          (trimmed[trimmed.length - 1]
+            ? !!trimmed[trimmed.length - 1].match(NAME_START_END_REGEX)
+            : true)
+        );
+      },
+    )
+    .matches(NAME_CHARS_REGEX, {
+      message: hostnameValidationMessagesList.INVALID_VALUE,
+      excludeEmptyString: true,
+    })
+    .test(
+      hostnameValidationMessagesList.NOT_UNIQUE,
+      hostnameValidationMessagesList.NOT_UNIQUE,
+      (value) => {
+        if (!value || value === origName) {
+          return true;
+        }
+        return !usedNames.find((n) => n === value);
+      },
+    )
+    .notOneOf(FORBIDDEN_HOSTNAMES, hostnameValidationMessagesList.LOCALHOST_ERR);
+};

package/lib/common/validationSchemas/index.tsx

@@ -0,0 +1,11 @@
+export * from './addressValidation';
+export * from './clusterDetailsValidation';
+export * from './hostnameValidation';
+export * from './networkingValidation';
+export * from './ntpValidation';
+export * from './proxyValidation';
+export * from './pullSecretValidation';
+export * from './sshValidation';
+
+export * from './constants';
+export { ALPHANUMERIC_REGEX, LOCATION_CHARS_REGEX } from './regexes';

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,36 @@
+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, allowEmpty = true) => {
+  let schema = Yup.string();
+
+  if (!allowEmpty) {
+    schema = schema.trim().required(t('ai:Required field'));
+  }
+
+  return schema
+    .test(
+      'ntp-source-validation',
+      t('ai:Provide a comma separated list of valid DNS names or IP addresses.'),
+      (value?: string) => {
+        if (!value || value.trim() === '') {
+          return true;
+        }
+        const parts = trimCommaSeparatedList(value).split(',');
+        return parts.length > 0 && parts.every((v) => isIPorDN(v));
+      },
+    )
+    .test(
+      'ntp-source-validation-unique',
+      t('ai:DNS names and IP addresses must be unique.'),
+      (value?: string) => {
+        if (!value || value.trim() === '') {
+          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,23 @@
+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) => {
+      if (!value || !value.trim()) return true;
+      try {
+        const pullSecret = JSON.parse(value) as unknown;
+        return (
+          typeof pullSecret === 'object' &&
+          pullSecret !== null &&
+          'auths' in pullSecret &&
+          typeof (pullSecret as { auths: unknown }).auths === 'object' &&
+          (pullSecret as { auths: unknown }).auths !== null
+        );
+      } catch {
+        return false;
+      }
+    },
+  );

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/AddHosts/day2Wizard/Day2StaticIP.tsx

@@ -7,7 +7,12 @@ import {
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
-import { ClusterWizardStep, ErrorState, LoadingState } from '../../../../common';
+import {
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  ErrorState,
+  LoadingState,
+} from '../../../../common';
 import { HostsNetworkConfigurationType, InfraEnvsService } from '../../../services';
 import { FormViewHosts } from '../../clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts';
 import { FormViewNetworkWide } from '../../clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWide';
@@ -164,7 +169,7 @@ const Day2StaticIP = () => {
     >
       <Grid hasGutter>
         <Content>
-          <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/Routes.tsx

@@ -20,7 +20,6 @@ type UILibRoutesProps = {
   children?: React.ReactNode;
   history?: HistoryRouterProps['history'];
   basename?: string;
-  additionalComponents?: React.ReactNode;
 };
 
 export const UILibRoutes = ({
@@ -28,7 +27,6 @@ export const UILibRoutes = ({
   children,
   history,
   basename,
-  additionalComponents,
 }: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
@@ -36,16 +34,13 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />}>
-            <Route path=":clusterId" element={<NewClusterPage />} />
-          </Route>
+          <Route path="~new" element={<NewClusterPage />} />
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>
         {children}
         <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
       </Routes>
-      {additionalComponents}
     </>
   );
 

package/lib/ocm/components/SentryErrorMonitorContextProvider.tsx

@@ -8,7 +8,9 @@ import { handleApiError } from '../../common/api';
 import { isApiError } from '../../common/api/utils';
 import { captureException } from '../sentry';
 
-export const SentryErrorMonitorContextProvider: React.FC = ({ children }) => {
+export const SentryErrorMonitorContextProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const exceptionReporter: ExceptionReporter = (
     error: unknown,
     message?: string,