@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/cim/components/modals/MassDeleteAgentModal.tsx

@@ -9,22 +9,17 @@ import {
   getHostname,
   getInventory,
   MassDeleteHostModal as CommonMassDeleteHostModal,
+  TableRow,
+  HostsTable,
+  usePagination,
+  useTranslation,
 } from '../../../common';
-import { TableRow } from '../../../common/components/hosts/AITable';
-import HostsTable from '../../../common/components/hosts/HostsTable';
-import {
-  AgentK8sResource,
-  BareMetalHostK8sResource,
-  InfraEnvK8sResource,
-  NMStateK8sResource,
-} from '../../types';
+import { AgentK8sResource, BareMetalHostK8sResource, InfraEnvK8sResource } from '../../types';
 import { useAgentsTable } from '../Agent/tableUtils';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common/constants';
 import AgentStatus from '../Agent/AgentStatus';
 import BMHStatus from '../Agent/BMHStatus';
 import { getBMHStatus, getAgentStatus } from '../helpers';
-import { usePagination } from '../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -142,13 +137,8 @@ type MassDeleteAgentModalProps = {
   onClose: VoidFunction;
   agents: AgentK8sResource[];
   bmhs: BareMetalHostK8sResource[];
-  nmStates: NMStateK8sResource[];
   // eslint-disable-next-line
-  onDelete: (
-    agent?: AgentK8sResource,
-    bmh?: BareMetalHostK8sResource,
-    nmStates?: NMStateK8sResource[],
-  ) => Promise<unknown>;
+  onDelete: (agent?: AgentK8sResource, bmh?: BareMetalHostK8sResource) => Promise<unknown>;
   infraEnv: InfraEnvK8sResource;
 };
 
@@ -159,7 +149,6 @@ const MassDeleteAgentModal: React.FC<MassDeleteAgentModalProps> = ({
   agents,
   bmhs,
   infraEnv,
-  nmStates,
 }) => {
   const [hosts] = useAgentsTable({ agents, bmhs, infraEnv });
   const onClick = async (host: Host) => {
@@ -175,7 +164,7 @@ const MassDeleteAgentModal: React.FC<MassDeleteAgentModalProps> = ({
       );
     }
     if (!agent?.spec?.clusterDeploymentName?.name) {
-      return onDelete(agent, bmh, nmStates);
+      return onDelete(agent, bmh);
     }
   };
   const { t } = useTranslation();

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

@@ -1,4 +1,5 @@
-import { DiscoveryImageFormValues, ProxyFieldsType } from '../../../common';
+import { ProxyFieldsType } from '../../../common';
+import { DiscoveryImageFormValues } from './DiscoveryImageConfigForm';
 import { BMCFormProps } from '../Agent/types';
 import {
   BareMetalHostK8sResource,

package/lib/cim/hooks/index.tsx

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

package/lib/cim/hooks/useStorageClasses.tsx

@@ -0,0 +1,15 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { StorageClassK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useStorageClasses = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<StorageClassK8sResource[]>(
+    {
+      groupVersionKind: {
+        group: 'storage.k8s.io',
+        kind: 'StorageClass',
+        version: 'v1',
+      },
+    },
+    props,
+  );

package/lib/cim/index.ts

@@ -10,7 +10,6 @@ export * as Reducers from '../common/reducers';
 export * from '../common/api';
 export * from '../common/utils';
 export * from '../common/types';
-export * from '../common/features';
 
 export * from '../common/components/ui';
 export * from '../common/components/AlertsContextProvider';

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -247,12 +247,6 @@ const ClustersAPI = {
       params,
     );
   },
-
-  updateInstallConfig(clusterId: Cluster['id'], config: string) {
-    return client.patch(`${ClustersAPI.makeBaseURI(clusterId)}/install-config`, config, {
-      headers: { 'Content-Type': 'application/json' },
-    });
-  },
 };
 
 export default ClustersAPI;

package/lib/common/api/assisted-service/NewFeatureSupportLevelsAPI.ts

@@ -1,8 +1,13 @@
 import { clientWithoutCaseConverter } from '../../api/axiosClient';
-import {
-  ArchitecturesSupportsLevel,
-  FeaturesSupportsLevel,
-} from '../../components/featureSupportLevels/types';
+import { ArchitectureSupportLevelMap, NewFeatureSupportLevelMap } from '../../components';
+
+export interface ArchitecturesSupportsLevel {
+  architectures: ArchitectureSupportLevelMap;
+}
+
+export interface FeaturesSupportsLevel {
+  features: NewFeatureSupportLevelMap;
+}
 
 const NewFeatureSupportLevelsAPI = {
   makeBaseURI() {

package/lib/common/components/ErrorHandling/index.tsx

@@ -0,0 +1,2 @@
+export * from './WithErrorBoundary';
+export * from './ErrorMonitorContext';

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

@@ -7,13 +7,13 @@ import {
   HelperText,
   HelperTextItem,
 } from '@patternfly/react-core';
-import { CheckboxField, PopoverIcon } from '../ui';
-import { TrustedCertificateFieldsType } from '../../types';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { TrustedCertificateFieldsType } from '../../types';
+import { CheckboxField, PopoverIcon, CertificatesUploadField } from '../ui';
 
-import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import CertificatesUploadField from '../ui/formik/CertificatesUploadField';
 import './CertificateFields.css';
+
 const FIELD_NAME = 'trustBundle';
 
 export const CertificateFieldsHelperText = ({ fieldId = FIELD_NAME }) => {
@@ -59,7 +59,7 @@ export const CertificateInputFields = () => {
   );
 };
 
-const CertificateFields = () => {
+export const CertificateFields = () => {
   const { setFieldValue, values, initialValues } = useFormikContext<TrustedCertificateFieldsType>();
   const resetCertificate = (isNewlyChecked: boolean) => {
     if (isNewlyChecked) {
@@ -88,5 +88,3 @@ const CertificateFields = () => {
     </>
   );
 };
-
-export default CertificateFields;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   FormGroup,
-  Tooltip,
   Dropdown,
   DropdownItem,
   MenuToggle,
@@ -63,22 +62,21 @@ const ControlPlaneNodesDropdown = ({
     }
   }, [allowHighlyAvailable, selectedValue, setValue]);
 
+  const disabledReason = t('ai:This option is not available with the selected OpenShift version');
   const dropdownItems = options.map(({ value, label }) => {
     const isEnabled = isItemEnabled(value, allowHighlyAvailable, allowTNA);
 
-    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}
+        isAriaDisabled={!isEnabled}
+        disabled={!isEnabled}
         selected={selectedValue === value}
         value={value}
+        tooltipProps={{ hidden: isEnabled, content: disabledReason, position: 'top' }}
       >
-        <Tooltip hidden={isEnabled} content={disabledReason} position="top">
-          <div>{label}</div>
-        </Tooltip>
+        {label}
       </DropdownItem>
     );
   });

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

@@ -17,7 +17,7 @@ const DiscoveryImageTypeControlGroupLabel = ({
   </>
 );
 
-const DiscoveryImageTypeControlGroup = () => {
+export const DiscoveryImageTypeControlGroup = () => {
   const { t } = useTranslation();
   return (
     <Flex>
@@ -54,5 +54,3 @@ const DiscoveryImageTypeControlGroup = () => {
     </Flex>
   );
 };
-
-export default DiscoveryImageTypeControlGroup;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
-const DiscoveryIpxeInstructions = () => {
+export const DiscoveryIpxeInstructions = () => {
   const { t } = useTranslation();
   return (
     <>
@@ -22,5 +22,3 @@ const DiscoveryIpxeInstructions = () => {
     </>
   );
 };
-
-export default DiscoveryIpxeInstructions;

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -34,7 +34,7 @@ export interface DiskEncryptionControlGroupProps {
   docVersion?: string;
 }
 
-const DiskEncryptionControlGroup = ({
+export const DiskEncryptionControlGroup = ({
   values,
   isSNO = false,
   isArbiterEncryptionAvailable = true,
@@ -168,5 +168,3 @@ const DiskEncryptionControlGroup = ({
     </FormGroup>
   );
 };
-
-export default DiskEncryptionControlGroup;

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/index.tsx

@@ -0,0 +1,2 @@
+export * from './DiskEncryptionControlGroup';
+export * from './DiskEncryptionValues';

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

@@ -11,9 +11,9 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { DetailItem, DetailList } from '../ui';
-import DiscoveryIpxeInstructions from './DiscoveryIpxeInstructions';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { DetailItem, DetailList } from '../ui';
+import { DiscoveryIpxeInstructions } from './DiscoveryIpxeInstructions';
 
 export type DownloadISOProps = {
   isSNO?: boolean;
@@ -23,7 +23,7 @@ export type DownloadISOProps = {
   onReset?: () => void;
 };
 
-const DownloadIpxeScript = ({
+export const DownloadIpxeScript = ({
   fileName = 'ipxe-script.txt',
   downloadUrl,
   onClose,
@@ -96,5 +96,3 @@ const DownloadIpxeScript = ({
     </>
   );
 };
-
-export default DownloadIpxeScript;

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

@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryInstructions from './DiscoveryInstructions';
-import { StaticIPInfo } from './DiscoveryImageConfigForm';
+import { StaticIPInfo } from './StaticIPInfo';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { getCiscoIntersightLink } from '../../config';

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Grid } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { CheckboxField } from '../ui';
+import { AdditionalNTPSourcesField } from '../ui/formik';
+import { NtpSourcesFieldsType } from '../../types';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export const NtpSourcesFields: React.FC = () => {
+  const { setFieldValue, values, initialValues } = useFormikContext<NtpSourcesFieldsType>();
+  const { t } = useTranslation();
+
+  const resetNtpSources = (isChecked: boolean) => {
+    if (isChecked) {
+      setFieldValue('ntpSourcesList', initialValues.ntpSourcesList);
+    } else {
+      setFieldValue('ntpSourcesList', '');
+    }
+  };
+
+  return (
+    <CheckboxField
+      label={t('ai:Replace default NTP sources')}
+      name="enableNtpSources"
+      className="ai-ntp-sources-fields"
+      helperText={t(
+        'ai:Replaces default public NTP pools. Only the specified sources are used. Use in air-gapped or restricted networks where default pools are unreachable or not permitted.',
+      )}
+      onChange={resetNtpSources}
+      body={
+        values.enableNtpSources && (
+          <Grid hasGutter>
+            <AdditionalNTPSourcesField
+              name="ntpSourcesList"
+              label={t('ai:NTP sources')}
+              helperText={t(
+                'ai:A comma separated list of IP or domain names of the NTP pools or servers.',
+              )}
+              isRequired
+            />
+          </Grid>
+        )
+      }
+    />
+  );
+};

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
+import { Trans } from 'react-i18next';
 import { Grid } from '@patternfly/react-core';
 import { InputField, CheckboxField, trimCommaSeparatedList, PopoverIcon } from '../ui';
 import { ProxyFieldsType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './ProxyFields.css';
-import { Trans } from 'react-i18next';
 
 export const ProxyInputFields = () => {
   const { setFieldValue, values } = useFormikContext<ProxyFieldsType>();
@@ -64,7 +64,7 @@ export const ProxyInputFields = () => {
             <Trans
               t={t}
               components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
-              i18nKey="ai:URL must start with <bold>http</bold> (https schemes are not currently supported)."
+              i18nKey={'ai:URL must start with <bold>http</bold> or <bold>https</bold>.'}
             />
           </div>
         }
@@ -97,7 +97,7 @@ export const ProxyInputFields = () => {
   );
 };
 
-const ProxyFields: React.FC = () => {
+export const ProxyFields: React.FC = () => {
   const { setFieldValue, values, initialValues } = useFormikContext<ProxyFieldsType>();
   const resetProxy = (isNewlyChecked: boolean) => {
     if (isNewlyChecked) {
@@ -131,5 +131,3 @@ const ProxyFields: React.FC = () => {
     </>
   );
 };
-
-export default ProxyFields;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Alert, Button } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { getOCPStaticIPDocLink } from '../../config/docs_links';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
+  const { t } = useTranslation();
+  return (
+    <Alert
+      title={t(
+        'ai:To use static network configuration, follow the steps listed in the documentation.',
+      )}
+      isInline
+      variant="info"
+    >
+      <Button
+        variant="link"
+        icon={<ExternalLinkAltIcon />}
+        iconPosition="right"
+        isInline
+        onClick={() =>
+          window.open(getOCPStaticIPDocLink(docVersion), '_blank', 'noopener,noreferrer')
+        }
+      >
+        {t('ai:View documentation')}
+      </Button>
+    </Alert>
+  );
+};

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

@@ -10,7 +10,7 @@ type UploadSSHProps = {
   labelText?: string;
 };
 
-const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
+export const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
   const [{ name }, , { setValue }] = useField<string>('sshPublicKey');
   const { t } = useTranslation();
   const defaultLabelText = t(
@@ -32,5 +32,3 @@ const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
     />
   );
 };
-
-export default UploadSSH;

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

@@ -1,5 +1,3 @@
-export { default as UploadSSH } from './UploadSSH';
-export { default as ProxyFields, ProxyInputFields } from './ProxyFields';
 export { default as DownloadIsoModal } from './DownloadIsoModal';
 export { default as DownloadIso } from './DownloadIso';
 export { default as DiscoveryInstructions } from './DiscoveryInstructions';
@@ -7,6 +5,11 @@ export { default as FormatDiskWarning } from './FormatDiskWarning';
 export { default as SecurityFields } from './SecurityFields';
 
 export * from './utils';
+export * from './UploadSSH';
+export * from './ProxyFields';
+export * from './CertificateFields';
+export * from './NtpSourcesFields';
 export * from './DiscoveryTroubleshootingModal';
-export * from './DiscoveryImageConfigForm';
 export * from './ExternalPlatformsDropdown';
+export * from './DiskEncryptionFields';
+export * from './DownloadIpxeScript';

package/lib/common/components/clusterDetail/ClusterProgress.tsx

@@ -61,7 +61,7 @@ type ClusterProgressProps = {
   totalPercentage?: number;
 };
 
-const ClusterProgress = ({
+export const ClusterProgress = ({
   cluster,
   minimizedView = false,
   totalPercentage,
@@ -101,5 +101,3 @@ const ClusterProgress = ({
     </>
   );
 };
-
-export default ClusterProgress;

package/lib/common/components/clusterDetail/ClusterProgressItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Stack, StackItem, Content } from '@patternfly/react-core';
 import BorderedIcon from '../ui/BorderedIcon/BorderedIcon';
 
-const ClusterProgressItem = ({
+export const ClusterProgressItem = ({
   icon,
   children,
 }: {
@@ -18,5 +18,3 @@ const ClusterProgressItem = ({
     </StackItem>
   </Stack>
 );
-
-export default ClusterProgressItem;

package/lib/common/components/clusterDetail/ClusterProgressItems.tsx

@@ -1,13 +1,13 @@
+import React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { EventListFetchProps } from '../../types';
+import { selectOlmOperators } from '../../selectors';
 import { getEnabledHosts } from '../hosts';
 import { RenderIf } from '../ui';
-import { Grid, GridItem } from '@patternfly/react-core';
 import { ProgressBarTexts } from './ProgressBarTexts';
 import { FinalizingProgress } from './FinalizingProgress';
-import OperatorsProgressItem from './OperatorsProgressItem';
-import React from 'react';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { EventListFetchProps } from '../../types';
-import { selectOlmOperators } from '../../../common';
+import { OperatorsProgressItem } from './OperatorsProgressItem';
 
 type ClusterProgressItemsProps = {
   cluster: Cluster;
@@ -17,7 +17,7 @@ type ClusterProgressItemsProps = {
   fallbackEventsURL?: string;
 };
 
-const ClusterProgressItems = ({
+export const ClusterProgressItems = ({
   cluster,
   minimizedView = false,
   onFetchEvents,
@@ -58,5 +58,3 @@ const ClusterProgressItems = ({
     </>
   );
 };
-
-export default ClusterProgressItems;

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -9,8 +9,8 @@ import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon'
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { EventsModal } from '../ui';
 import { EventListFetchProps } from '../../types';
-import ClusterProgressItem from './ClusterProgressItem';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useTranslation } from '../../hooks';
+import { ClusterProgressItem } from './ClusterProgressItem';
 
 type FinalizingProgressProps = {
   cluster: Cluster;

package/lib/common/components/clusterDetail/OperatorsProgressItem.tsx

@@ -11,9 +11,9 @@ import {
   MonitoredOperatorsList,
   OperatorStatus,
 } from '@openshift-assisted/types/assisted-installer-service';
-import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useOperatorSpecs } from '../operators/operatorSpecs';
+import { useOperatorSpecs } from '../operators';
+import { ClusterProgressItem } from './ClusterProgressItem';
 
 import './OperatorsProgressItem.css';
 
@@ -115,7 +115,7 @@ const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   );
 };
 
-const OperatorsProgressItem = ({ operators }: OperatorListProps) => {
+export const OperatorsProgressItem = ({ operators }: OperatorListProps) => {
   const { t } = useTranslation();
   const icon = getOperatorsIcon(getAggregatedStatus(operators));
   const label = getOperatorsLabel(operators, t);
@@ -132,5 +132,3 @@ const OperatorsProgressItem = ({ operators }: OperatorListProps) => {
     </ClusterProgressItem>
   );
 };
-
-export default OperatorsProgressItem;

package/lib/common/components/clusterDetail/ProgressBarTexts.tsx

@@ -5,7 +5,7 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exc
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 
 import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
-import ClusterProgressItem from './ClusterProgressItem';
+import { ClusterProgressItem } from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type HostProgressProps = {

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

@@ -1,6 +1,11 @@
 export { default as ClusterPropertiesList } from './ClusterPropertiesList';
-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';
+
+export * from './ClusterProgress';
+export * from './ClusterProgressItem';
+export * from './ClusterProgressItems';
+export * from './OperatorsProgressItem';
+export * from './FinalizingProgress';
+export * from './ProgressBarTexts';

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

@@ -6,7 +6,6 @@ import {
   ManagedDomain,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { getDefaultCpuArchitecture, OpenshiftVersionOptionType } from '../../types';
-import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { getDefaultOpenShiftVersion } from '../ui';
 import {
   baseDomainValidationSchema,
@@ -15,6 +14,7 @@ import {
   pullSecretValidationSchema,
 } from '../../validationSchemas';
 import { ClusterDetailsValues } from './types';
+import { TangServer } from '../clusterConfiguration';
 
 const emptyTangServers = (): TangServer[] => {
   return [

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

@@ -12,11 +12,11 @@ import {
 import { NetworkConfigurationValues, HostSubnets, NETWORK_TYPE_SDN } from '../../../types';
 import { DUAL_STACK } from '../../../config';
 import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
-import { getVipValidationsById } from '../../clusterConfiguration';
+import { getVipValidationsById } from '../../clusterConfiguration/utils';
 import { FormikStaticField, PopoverIcon } from '../../ui';
 import { CheckboxField, InputField } from '../../ui/formik';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import NewFeatureSupportLevelBadge from '../../newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { NewFeatureSupportLevelBadge } from '../../newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {

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

@@ -63,13 +63,26 @@ export const findValidationFixStep = <ClusterWizardStepsType extends string>(
   wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType>,
 ): ClusterWizardStepsType | undefined => {
   const keys = lodashKeys(wizardStepsValidationsMap) as ClusterWizardStepsType[];
-  return keys.find((key) => {
-    // find first matching validation-map name
+
+  // find the step based on the validationId first
+  const validationStep = keys.find((key) => {
     const { cluster: clusterValidationMap, host: hostValidationMap } =
       wizardStepsValidationsMap[key];
     return (
       clusterValidationMap.validationIds.includes(validationId as ClusterValidationId) ||
-      hostValidationMap.validationIds.includes(validationId as HostValidationId) ||
+      hostValidationMap.validationIds.includes(validationId as HostValidationId)
+    );
+  });
+
+  if (validationStep) {
+    return validationStep;
+  }
+
+  // find the step based on the cluster/host validation group as a backup
+  return keys.find((key) => {
+    const { cluster: clusterValidationMap, host: hostValidationMap } =
+      wizardStepsValidationsMap[key];
+    return (
       (clusterGroup && clusterValidationMap.groups.includes(clusterGroup)) ||
       (hostGroup && hostValidationMap.groups.includes(hostGroup))
     );

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

@@ -84,7 +84,7 @@ export type AITableProps<R> = ReturnType<typeof usePagination> & {
 };
 
 // eslint-disable-next-line
-const AITable = <R extends any>({
+export const AITable = <R extends any>({
   data,
   testId = 'hosts-table',
   className,
@@ -285,4 +285,3 @@ const AITable = <R extends any>({
     </>
   );
 };
-export default AITable;