@openshift-assisted/ui-lib 2.38.5 → 2.39.0

package/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -11,21 +11,17 @@ interface ControlPlaneNodesOption {
   label: string;
 }
 
-const isDropdownItemEnabled = (controlPlaneNodeCount: number, isNutanix?: boolean): boolean => {
-  return (controlPlaneNodeCount === 1 && !isNutanix) || controlPlaneNodeCount !== 1;
-};
-
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
-  isNutanix,
+  allowHighlyAvailable,
 }: {
   isDisabled?: boolean;
-  isNutanix?: boolean;
+  allowHighlyAvailable?: boolean;
 }) => {
   const { t } = useTranslation();
-  const [{ name, value: selectedValue }, , { setValue }] = useField<number | 3>(
-    'controlPlaneCount',
-  );
+  const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
+  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
@@ -34,14 +30,21 @@ const ControlPlaneNodesDropdown = ({
     { value: 5, label: t('ai:5 (highly available cluster++)') },
   ];
 
+  React.useEffect(() => {
+    if (!allowHighlyAvailable && [4, 5].includes(selectedValue)) {
+      setValue(3);
+    }
+  }, [allowHighlyAvailable, selectedValue, setValue]);
+
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
-    const disabledReason = t('ai:This option is not available for Nutanix platform');
+    const isItemEnabled = [1, 3].includes(value) || allowHighlyAvailable;
+    const disabledReason = t('ai:This option is not available with the selected OpenShift version');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
         isAriaDisabled={!isItemEnabled}
+        isDisabled={!isItemEnabled}
         selected={selectedValue === value}
         value={value}
       >
@@ -52,9 +55,6 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
-  const fieldId = getFieldId(name, 'input');
-
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
     setValue(toNumber(val));

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

@@ -3,3 +3,4 @@ export { default as ClusterProgress } from './ClusterProgress';
 export { default as ClusterCredentials } from './ClusterCredentials';
 export { default as KubeconfigDownload } from './KubeconfigDownload';
 export { default as PostInstallAlert } from './PostInstallAlert';
+export { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';

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

@@ -1,68 +1,11 @@
 import React from 'react';
 import { Alert, AlertActionLink, AlertVariant, Popover } from '@patternfly/react-core';
-import { HostSubnet, HostSubnets } from '../../../types/clusters';
-import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+import { HostSubnets } from '../../../types/clusters';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { SelectField } from '../../ui';
 import { NO_SUBNET_SET } from '../../../config';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-interface SubnetHelperTextProps {
-  matchingSubnet: HostSubnet;
-  hosts: Cluster['hosts'];
-}
-
-const SubnetHelperText = ({ matchingSubnet, hosts }: SubnetHelperTextProps) => {
-  const { t } = useTranslation();
-  const excludedHosts =
-    hosts?.filter(
-      (host) =>
-        !['disabled', 'disconnected'].includes(host.status) &&
-        !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
-    ) || [];
-
-  // Workaround for bug in CIM backend. hostIDs are empty
-  if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
-    return null;
-  }
-
-  const actionLinks = (
-    <Popover
-      position="right"
-      bodyContent={
-        <ul>
-          {excludedHosts
-            .sort(
-              (hostA, hostB) =>
-                hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
-            )
-            .map((host) => (
-              <li key={host.id}>{host.requestedHostname || host.id}</li>
-            ))}
-        </ul>
-      }
-      minWidth="30rem"
-      maxWidth="50rem"
-    >
-      <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
-        {t('ai:View {{count}} affected host', {
-          count: excludedHosts.length,
-        })}
-      </AlertActionLink>
-    </Popover>
-  );
-
-  return (
-    <Alert
-      title={t('ai:This subnet range is not available on all hosts')}
-      variant={AlertVariant.warning}
-      actionLinks={actionLinks}
-      isInline
-    >
-      {t('ai:Hosts outside of this range will not be included in the new cluster.')}
-    </Alert>
-  );
-};
-
 export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnets;
   hosts: Host[];
@@ -79,14 +22,60 @@ export const AvailableSubnetsControl = ({
   const { t } = useTranslation();
   const getHelperText = (value: string) => {
     const matchingSubnet = hostSubnets.find((hn) => hn.subnet === value);
-    if (matchingSubnet) {
+    if (matchingSubnet && isMultiNodeCluster) {
+      const excludedHosts =
+        hosts?.filter(
+          (host) =>
+            !['disabled', 'disconnected'].includes(host.status) &&
+            !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
+        ) || [];
+
+      // Workaround for bug in CIM backend. hostIDs are empty
+      if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
+        return undefined;
+      }
+
+      const actionLinks = (
+        <Popover
+          position="right"
+          bodyContent={
+            <ul>
+              {excludedHosts
+                .sort(
+                  (hostA, hostB) =>
+                    hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
+                )
+                .map((host) => (
+                  <li key={host.id}>{host.requestedHostname || host.id}</li>
+                ))}
+            </ul>
+          }
+          minWidth="30rem"
+          maxWidth="50rem"
+        >
+          <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
+            {t('ai:View {{count}} affected host', {
+              count: excludedHosts.length,
+            })}
+          </AlertActionLink>
+        </Popover>
+      );
+
       return (
-        isMultiNodeCluster && <SubnetHelperText matchingSubnet={matchingSubnet} hosts={hosts} />
+        <Alert
+          title={t('ai:This subnet range is not available on all hosts')}
+          variant={AlertVariant.warning}
+          actionLinks={actionLinks}
+          isInline
+        >
+          {t('ai:Hosts outside of this range will not be included in the new cluster.')}
+        </Alert>
       );
     }
 
     return undefined;
   };
+
   const hostSubnetLength = hostSubnets.length;
   return (
     <SelectField

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

@@ -122,7 +122,7 @@ export const VirtualIPControlGroup = ({
         <>
           <FormikStaticField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             value={selectApiVip(cluster)}
             isValid={!apiVipFailedValidationMessage}
@@ -136,7 +136,7 @@ export const VirtualIPControlGroup = ({
           </FormikStaticField>
           <FormikStaticField
             label={t('ai:Ingress IP')}
-            name="ingressVip"
+            name="ingressVips.0.ip"
             helperText={ingressVipHelperText}
             value={selectIngressVip(cluster)}
             isValid={!ingressVipFailedValidationMessage}
@@ -153,13 +153,13 @@ export const VirtualIPControlGroup = ({
         <>
           <InputField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             isRequired
             isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
           />
           <InputField
-            name="ingressVip"
+            name="ingressVips.0.ip"
             label={t('ai:Ingress IP')}
             helperText={ingressVipHelperText}
             isRequired

package/lib/common/components/hosts/EditHostForm.tsx

@@ -56,6 +56,7 @@ const EditHostForm = ({
   onHostSaveError,
   getEditErrorMessage,
 }: EditHostFormProps) => {
+  const { t } = useTranslation();
   const hostnameInputRef = React.useRef<HTMLInputElement>();
   const [isSaveInProgress, setIsSaveInProgress] = React.useState<boolean>(false);
 
@@ -71,7 +72,7 @@ const EditHostForm = ({
     hostId: host.id,
     hostname: requestedHostname || '',
   };
-  const { t } = useTranslation();
+
   return (
     <Formik
       validateOnMount
@@ -110,11 +111,19 @@ const EditHostForm = ({
                 status={status as StatusErrorType}
                 onClose={() => setStatus({ error: null })}
               />
-              <Alert
-                variant={AlertVariant.info}
-                title={t('ai:This name will replace the original discovered hostname.')}
-                isInline
-              />
+              {canHostnameBeChanged(host.status) ? (
+                <Alert
+                  variant={AlertVariant.info}
+                  title={t('ai:This name will replace the original discovered hostname.')}
+                  isInline
+                />
+              ) : (
+                <Alert
+                  variant={AlertVariant.warning}
+                  title={t('ai:The hostname cannot be changed.')}
+                  isInline
+                />
+              )}
               <StaticTextField name="discoveredHostname" label={t('ai:Discovered hostname')}>
                 {hostname || ''}
               </StaticTextField>
@@ -134,6 +143,7 @@ const EditHostForm = ({
               data-testid="change-hostname-form__button-change"
               type={ButtonType.submit}
               isDisabled={isSubmitting || !isValid || !dirty}
+              isLoading={isSubmitting}
             >
               {t('ai:Change')}
             </Button>

package/lib/common/components/hosts/HostPropertyValidationPopover.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
@@ -60,21 +60,27 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
     if (showFailure && validation.status === 'failure') {
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
-          <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showPending && validation.status === 'pending') {
       return (
         <ValidationPopover validation={validation} actions={pendingActions}>
-          <PendingIcon /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PendingIcon /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showSuccess && validation.status === 'success') {
       return (
         <>
-          <CheckCircleIcon color={successColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <CheckCircleIcon color={successColor.value} /> {children}
+          </Flex>
         </>
       );
     }

package/lib/common/components/newFeatureSupportLevels/types.ts

@@ -14,19 +14,23 @@ export type ActiveFeatureConfiguration = {
   hasStaticIpNetworking: boolean;
 };
 
+export type GetFeatureDisabledReason = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+  cpuArchitecture?: SupportedCpuArchitecture,
+  platformType?: PlatformType,
+) => string | undefined;
+
+export type GetFeatureSupportLevel = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+) => SupportLevel | undefined;
+
 export type NewFeatureSupportLevelData = {
   getFeatureSupportLevels(): NewFeatureSupportLevelMap;
-  getFeatureSupportLevel(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-  ): SupportLevel | undefined;
+  getFeatureSupportLevel: GetFeatureSupportLevel;
   isFeatureDisabled(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
-  getFeatureDisabledReason(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-    cpuArchitecture?: SupportedCpuArchitecture,
-    platformType?: PlatformType,
-  ): string | undefined;
+  getFeatureDisabledReason: GetFeatureDisabledReason;
   isFeatureSupported(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
   activeFeatureConfiguration?: ActiveFeatureConfiguration;
 };

package/lib/common/components/storage/DisksTable.tsx

@@ -205,8 +205,6 @@ const DisksTable = ({
         cells: { title: string | React.ReactNode; props: object }[];
       };
     });
-  // eslint-disable-next-line no-console
-  console.log(rows);
   return (
     <Table data-testid={testId} variant={TableVariant.compact} aria-label="Host's disks table">
       <Thead>

package/lib/common/components/ui/DeveloperPreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
+import { DEVELOPER_SUPPORT_LEVEL_LINK } from '../../config/docs_links';
 
 export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
@@ -12,6 +13,7 @@ export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
       popoverContent={t(
         'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
       )}
+      externalLink={DEVELOPER_SUPPORT_LEVEL_LINK}
       {...props}
     />
   );

package/lib/common/components/ui/{OpenshiftSelectWithSearch.tsx → OpenShiftSelectWithSearch.tsx}

@@ -22,11 +22,11 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
-export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
+export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
   setCustomOpenshiftSelect,
@@ -232,7 +232,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     </MenuToggle>
   );
 
-  const helperText = getHelperText(selected, true);
+  const helperText = getHelperText && getHelperText(selected, true);
 
   return (
     <>
@@ -285,7 +285,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         <HelperText>
           <HelperTextItem variant="default">
             {helperText ??
-              'Select an Openshift version from the list or use the type ahead to narrow down the list.'}
+              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
           </HelperTextItem>
         </HelperText>
       </FormHelperText>

package/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -0,0 +1,9 @@
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
+  max-height: 22vh;
+  overflow: auto;
+}
+
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
+  list-style: none;
+  padding-left: 0;
+}

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -22,7 +22,7 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenshiftVersionDropdown.css';
+import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -30,7 +30,7 @@ type OpenShiftVersionDropdownProps = {
   name: string;
   items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
   customItems: ItemDropdown;
@@ -159,7 +159,7 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
-  const helperText = getHelperText(field.value);
+  const helperText = getHelperText && getHelperText(field.value);
 
   return (
     <FormGroup

package/lib/{ocm/components/clusterConfiguration → common/components/ui}/OpenShiftVersionModal.tsx

@@ -1,23 +1,23 @@
 import React, { useState } from 'react';
 import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
-import './OpenshiftVersionModal.css';
-import { OpenshiftSelectWithSearch } from '../../../common/components/ui/OpenshiftSelectWithSearch';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
-import { HelperTextType } from '../../../common/components/ui/OpenShiftVersionDropdown';
+import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
+import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
-import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../../../common';
+import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../..';
+import './OpenShiftVersionModal.css';
 
 type OpenShiftVersionModalProps = {
+  allVersions: OpenshiftVersionOptionType[];
   setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
+  allVersions,
   setOpenshiftVersionModalOpen,
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions: versions } = useOpenshiftVersionsContext();
   const onClose = () => setOpenshiftVersionModalOpen(false);
   const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
 
@@ -50,8 +50,8 @@ export const OpenShiftVersionModal = ({
         label={'OpenShift version'}
         isRequired
       >
-        <OpenshiftSelectWithSearch
-          versions={versions}
+        <OpenShiftSelectWithSearch
+          versions={allVersions}
           getHelperText={getHelperText}
           setCustomOpenshiftSelect={setCustomOpenshiftSelect}
         />

package/lib/common/components/ui/WizardFooter.tsx

@@ -20,6 +20,7 @@ export type WizardFooterGenericProps = {
   onNext?: () => void;
   onBack?: () => void;
   onCancel?: () => void;
+  onReset?: () => void;
   isNextDisabled?: boolean;
   isBackDisabled?: boolean;
   isSubmitting?: boolean;
@@ -41,6 +42,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   onNext,
   onBack,
   onCancel,
+  onReset,
   isNextDisabled,
   isBackDisabled,
   leftExtraActions,
@@ -83,16 +85,30 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
               </Button>
             </ActionListItem>
           )}
-          <ActionListItem>
-            <Button
-              variant={ButtonVariant.link}
-              name="cancel"
-              onClick={onCancel}
-              isDisabled={false}
-            >
-              {t('ai:Cancel')}
-            </Button>
-          </ActionListItem>
+          {onCancel && (
+            <ActionListItem>
+              <Button
+                variant={ButtonVariant.link}
+                name="cancel"
+                onClick={onCancel}
+                isDisabled={false}
+              >
+                {t('ai:Cancel')}
+              </Button>
+            </ActionListItem>
+          )}
+          {onReset && cluster && (
+            <ActionListItem>
+              <Button
+                variant={ButtonVariant.link}
+                name="reset"
+                onClick={onReset}
+                isDisabled={isSubmitting}
+              >
+                {t('ai:Reset')}
+              </Button>
+            </ActionListItem>
+          )}
           {isSubmitting && (
             <ActionListItem>
               <Text component={TextVariants.small}>

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -101,6 +101,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
     const fieldId = getFieldId(props.name, 'input', idPostfix);
     const isValid = !(touched && error?.length);
 
+    const errorMessage = isValid ? '' : error[0];
     return (
       <FormGroup
         id={`form-control__${fieldId}`}
@@ -163,14 +164,15 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
             </Popover>
           </InputGroupItem>
         </InputGroup>
-        {helperText && (
+        {(errorMessage || helperText) && (
           <FormHelperText>
             <HelperText>
               <HelperTextItem
+                icon={errorMessage && <ExclamationCircleIcon />}
                 variant={isValid ? 'default' : 'error'}
                 id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
               >
-                {helperText}
+                {errorMessage ? errorMessage : helperText}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -3,6 +3,8 @@ import { Address4, Address6 } from 'ip-address';
 import isCIDR from 'is-cidr';
 import { isInSubnet } from 'is-in-subnet';
 import * as Yup from 'yup';
+import { head } from 'lodash-es';
+import parseUrl from 'parse-url';
 
 import { TFunction } from 'i18next';
 import {
@@ -27,7 +29,6 @@ import {
 } from './constants';
 import { allSubnetsIPv4, getAddress, trimCommaSeparatedList, trimSshPublicKey } from './utils';
 import { selectApiVip, selectIngressVip } from '../../../selectors';
-import { head } from 'lodash-es';
 import { ClusterDetailsValues } from '../../clusterWizard/types';
 
 const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;
@@ -45,10 +46,6 @@ const IP_V4_ZERO = '0.0.0.0';
 const IP_V6_ZERO = '0000:0000:0000:0000:0000:0000:0000:0000';
 const MAC_REGEX = /^([0-9A-Fa-f]{2}[:]){5}([0-9A-Fa-f]{2})$/;
 const HOST_NAME_REGEX = /^[^.]{1,63}(?:[.][^.]{1,63})*$/;
-
-// Source of information: https://github.com/metal3-io/baremetal-operator/blob/main/docs/api.md#baremetalhost-spec
-const BMC_REGEX =
-  /^((redfish-virtualmedia|idrac-virtualmedia)(\+https?)?:(\/\/([a-z0-9\-._~%!$&'()*+,;=]+@)?([a-z0-9\-._~%]+|\[[a-f0-9:.]+\]|\[v[a-f0-9][a-z0-9\-._~%!$&'()*+,;=:]+\])(:[0-9]+)?(\/[a-z0-9\-._~%!$&'()*+,;=:@]+)*\/?|(\/?[a-z0-9\-._~%!$&'()*+,;=:@]+(\/[a-z0-9\-._~%!$&'()*+,;=:@]+)*\/?)?)|([a-z0-9\-._~%!$&'()*+,;=@]+(\/[a-z0-9\-._~%!$&'()*+,;=:@]+)*\/?|(\/[a-z0-9\-._~%!$&'()*+,;=:@]+)+\/?))(\?[a-z0-9\-._~%!$&'()*+,;=:@/?]*)?(#[a-z0-9\-._~%!$&'()*+,;=:@/?]*)?$/i;
 const LOCATION_CHARS_REGEX = /^[a-zA-Z0-9-._]*$/;
 
 export const nameValidationSchema = (
@@ -318,7 +315,7 @@ export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
   values: NetworkConfigurationValues,
   initialValues?: ApiVip[] | IngressVip[],
 ) =>
-  (values.apiVips?.length && values.managedNetworkingType === 'clusterManaged'
+  (values.managedNetworkingType === 'clusterManaged'
     ? Yup.array<T>().of(
         Yup.object({
           clusterId: Yup.string(),
@@ -643,10 +640,16 @@ export const day2ApiVipValidationSchema = Yup.string().test(
 export const bmcAddressValidationSchema = (t: TFunction) => {
   const bmcAddressValidationMessagesList = bmcAddressValidationMessages(t);
 
-  return Yup.string().required().matches(BMC_REGEX, {
-    message: bmcAddressValidationMessagesList.INVALID_VALUE,
-    excludeEmptyString: true,
-  });
+  return Yup.string()
+    .required()
+    .test('valid-bmc-address', bmcAddressValidationMessagesList.INVALID_VALUE, (val) => {
+      try {
+        const url = parseUrl(val);
+        return ['redfish-virtualmedia', 'idrac-virtualmedia'].includes(url.protocol as string);
+      } catch (error) {
+        return false;
+      }
+    });
 };
 export const locationValidationSchema = (t: TFunction) => {
   const locationValidationMessagesList = locationValidationMessages(t);

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

@@ -12,6 +12,9 @@ export * from './PreviewBadge';
 export * from './TechnologyPreview';
 export * from './DeveloperPreview';
 
+export * from './OpenShiftVersionDropdown';
+export * from './OpenShiftVersionModal';
+
 export * from './utils';
 
 export { default as PopoverIcon } from './PopoverIcon';