@openshift-assisted/ui-lib 2.8.2-cim → 2.8.3-cim

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

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Button, Modal, ButtonVariant, ModalVariant, ModalBoxBody } from '@patternfly/react-core';
+import {
+  Button,
+  Modal,
+  ButtonVariant,
+  ModalVariant,
+  ModalBoxBody,
+  Spinner,
+  Title,
+} from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as globalWarningColor100 } from '@patternfly/react-tokens';
 import { ToolbarButton } from './Toolbar';
@@ -12,17 +20,14 @@ import ErrorState from './uiState/ErrorState';
 import './EventsModal.css';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
+import { useStateSafely } from '../../hooks';
 
-type EventsModalButtonProps = React.ComponentProps<typeof Button> & {
-  ButtonComponent?: typeof Button | typeof ToolbarButton;
-  onFetchEvents: EventListFetchProps['onFetchEvents'];
-  onClick?: () => void;
-  hostId?: Event['hostId'];
-  cluster: Cluster;
-  entityKind: EventsEntityKind;
-  title: string;
-  fallbackEventsURL?: string;
-};
+type EventsModalButtonProps = React.ComponentProps<typeof Button> &
+  Omit<EventsModalProps, 'onClose' | 'isOpen' | 'hostId'> & {
+    ButtonComponent?: typeof Button | typeof ToolbarButton;
+    onClick?: () => void;
+    hostId?: Event['hostId'];
+  };
 
 export const EventsModalButton = ({
   ButtonComponent = ToolbarButton,
@@ -34,6 +39,7 @@ export const EventsModalButton = ({
   children,
   title,
   fallbackEventsURL,
+  disablePagination,
   ...props
 }: EventsModalButtonProps) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -53,6 +59,7 @@ export const EventsModalButton = ({
         entityKind={entityKind}
         onFetchEvents={onFetchEvents}
         fallbackEventsURL={fallbackEventsURL}
+        disablePagination={disablePagination}
       />
     </>
   );
@@ -67,22 +74,26 @@ type EventsModalProps = {
   isOpen: boolean;
   title: string;
   fallbackEventsURL?: string;
+  disablePagination?: boolean;
 };
 
 export const EventsModal = ({
-  onFetchEvents,
-  hostId,
-  cluster,
-  entityKind,
   onClose,
   isOpen,
   title,
   fallbackEventsURL,
+  ...rest
 }: EventsModalProps) => {
   const { t } = useTranslation();
+  const [isLoading, setLoading] = useStateSafely(true);
+
   return (
     <Modal
-      title={title}
+      header={
+        <Title headingLevel={'h1'}>
+          {title} {isLoading && <Spinner isSVG size="lg" />}
+        </Title>
+      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
       hasNoBodyWrapper
@@ -111,13 +122,7 @@ export const EventsModal = ({
             iconColor={globalWarningColor100.value}
           />
         ) : (
-          <EventListFetch
-            hostId={hostId}
-            cluster={cluster}
-            entityKind={entityKind}
-            onFetchEvents={onFetchEvents}
-            className="events-modal__event-list"
-          />
+          <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
       </ModalBoxBody>
     </Modal>

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

@@ -74,7 +74,7 @@ const CodeField = ({
           <CodeEditor
             code={field.value as string}
             isUploadEnabled={!isDisabled}
-            isDownloadEnabled
+            isDownloadEnabled={isValid}
             isCopyEnabled
             isLanguageLabelVisible
             height="400px"

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldHelperProps, useField } from 'formik';
+import { useField } from 'formik';
 import { FormGroup, FileUpload, Stack, StackItem } from '@patternfly/react-core';
 import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
@@ -80,8 +80,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
             dropzoneProps={{
               ...dropzoneProps,
               onDropRejected:
-                dropzoneProps?.onDropRejected &&
-                dropzoneProps?.onDropRejected(helpers as FieldHelperProps<string>),
+                dropzoneProps?.onDropRejected && dropzoneProps?.onDropRejected(helpers),
             }}
             allowEditingUploadedText={allowEdittingUploadedText}
           />

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

@@ -34,7 +34,7 @@ const BASE_DOMAIN_REGEX = /^([a-z0-9]+(-[a-z0-9]+)*)$/;
 const DNS_NAME_REGEX_OCM = /^([a-z0-9]+(-[a-z0-9]+)*[.])+[a-z]{2,}$/;
 
 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})+$)|(^\*$)/;
+  /(^\.?([a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62}){1}(\.[a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62})+$)/;
 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})$/;
@@ -504,28 +504,46 @@ export const richHostnameValidationSchema = (
 };
 
 const httpProxyValidationMessage = 'Provide a valid HTTP URL.';
-export const httpProxyValidationSchema = (
-  values: ProxyFieldsType,
-  pairValueName: 'httpProxy' | 'httpsProxy',
-) =>
-  Yup.string()
-    .test(
-      'http-proxy-no-empty-validation',
-      'At least one of the HTTP or HTTPS proxy URLs is required.',
-      (value) => Boolean(!values.enableProxy || value || values[pairValueName]),
-    )
-    .test('http-proxy-validation', httpProxyValidationMessage, (value: string) => {
+export const httpProxyValidationSchema = ({
+  values,
+  pairValueName,
+  allowEmpty,
+}: {
+  values: ProxyFieldsType;
+  pairValueName: 'httpProxy' | 'httpsProxy';
+  allowEmpty?: boolean;
+}) => {
+  const validation = Yup.string().test(
+    'http-proxy-validation',
+    httpProxyValidationMessage,
+    (value: string) => {
       if (!value) {
         return true;
       }
 
+      if (!value.startsWith('http://')) {
+        return false;
+      }
+
       try {
-        const url = new URL(value);
-        return url.protocol === 'http:';
+        new URL(value);
       } catch {
         return false;
       }
-    });
+      return true;
+    },
+  );
+
+  if (allowEmpty) {
+    return validation;
+  }
+
+  return validation.test(
+    'http-proxy-no-empty-validation',
+    'At least one of the HTTP or HTTPS proxy URLs is required.',
+    (value) => !values.enableProxy || !!value || !!values[pairValueName],
+  );
+};
 
 const isIPorDN = (value: string, dnsRegex = DNS_NAME_REGEX) => {
   if (value.match(dnsRegex)) {

package/lib/common/config/constants.ts

@@ -366,3 +366,7 @@ export const CHANGE_ISO_PASSWORD_FILE_LINK =
 
 export const CUSTOM_MANIFESTS_HELP_LINK =
   'https://docs.openshift.com/container-platform/4.12/installing/install_config/installing-customizing.html';
+
+//TODO (mortegag): Change the link. Related to https://issues.redhat.com/browse/MGMT-13976
+export const HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS =
+  'https://57587--docspreview.netlify.app/openshift-enterprise/latest/post_installation_configuration/multi-architecture-configuration.html#multi-architecture-verifying-cluster-compatibility_multi-architecture-configuration';

package/lib/common/types/events.ts

@@ -1,4 +1,3 @@
-import { AxiosResponse } from 'axios';
 import { Cluster, Event, EventList, V2Events } from '../api';
 
 export type EventsEntityKind = 'cluster' | 'host';
@@ -16,12 +15,20 @@ export type EventFetchProps = {
   cluster: Cluster;
 };
 
+type OnSuccessResponse = {
+  data: EventList;
+  totalEvents: number;
+  severities: Record<Event['severity'], number>;
+};
+
 export type EventListFetchProps = EventFetchProps & {
   entityKind: EventsEntityKind;
   onFetchEvents: (
     params: V2Events,
-    onSuccess: (data: AxiosResponse<EventList>) => void,
+    onSuccess: (response: OnSuccessResponse) => void,
     onError: (message: string) => void,
-  ) => Promise<void>;
+  ) => void;
   className?: string;
+  setLoading: (loading: boolean) => void;
+  disablePagination?: boolean;
 };

package/lib/ocm/components/AddHosts/day2Wizard/Day2ClusterDetails.tsx

@@ -1,14 +1,19 @@
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Alert, Grid, GridItem } from '@patternfly/react-core';
 import { Form, Formik } from 'formik';
 import React from 'react';
 import {
   Cluster,
+  ClusterCpuArchitecture,
   ClusterWizardStep,
   ClusterWizardStepHeader,
   CpuArchitecture,
   ErrorState,
+  ExternalLink,
   getSupportedCpuArchitectures,
+  HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS,
+  InfraEnv,
   LoadingState,
+  SupportedCpuArchitecture,
   useFeature,
 } from '../../../../common';
 import { HostsNetworkConfigurationType, InfraEnvsService } from '../../../services';
@@ -21,24 +26,50 @@ import Day2WizardFooter from './Day2WizardFooter';
 import Day2HostStaticIpConfigurations from './Day2StaticIpHostConfigurations';
 import { mapClusterCpuArchToInfraEnvCpuArch } from '../../../services/CpuArchitectureService';
 import CpuArchitectureDropdown from '../../clusterConfiguration/CpuArchitectureDropdown';
-import { useOpenshiftVersions } from '../../../hooks';
+import { useOpenshiftVersions, usePullSecret } from '../../../hooks';
 
 const getDay2ClusterDetailInitialValues = async (
   clusterId: Cluster['id'],
   day1CpuArchitecture: CpuArchitecture,
-) => {
+  pullSecret?: string,
+  name?: string,
+  openshiftVersion?: string,
+): Promise<Day2ClusterDetailValues | Error> => {
   try {
     const infraEnv = await InfraEnvsService.getInfraEnv(clusterId, day1CpuArchitecture);
-
-    return {
-      cpuArchitecture: day1CpuArchitecture,
-      hostsNetworkConfigurationType: infraEnv.staticNetworkConfig
-        ? HostsNetworkConfigurationType.STATIC
-        : HostsNetworkConfigurationType.DHCP,
-    };
+    if (infraEnv && !(infraEnv instanceof Error)) {
+      return {
+        cpuArchitecture: day1CpuArchitecture as SupportedCpuArchitecture,
+        hostsNetworkConfigurationType: infraEnv.staticNetworkConfig
+          ? HostsNetworkConfigurationType.STATIC
+          : HostsNetworkConfigurationType.DHCP,
+      };
+    } else {
+      //Create a new InfraEnv because is not found
+      if (pullSecret) {
+        const infraEnv = await InfraEnvsService.create({
+          name: InfraEnvsService.makeInfraEnvName(
+            day1CpuArchitecture as ClusterCpuArchitecture,
+            name,
+          ),
+          pullSecret,
+          clusterId,
+          openshiftVersion,
+          cpuArchitecture: day1CpuArchitecture as ClusterCpuArchitecture,
+        });
+        return {
+          cpuArchitecture: day1CpuArchitecture as SupportedCpuArchitecture,
+          hostsNetworkConfigurationType: infraEnv.staticNetworkConfig
+            ? HostsNetworkConfigurationType.STATIC
+            : HostsNetworkConfigurationType.DHCP,
+        };
+      } else {
+        return new Error('Could not get infraEnv for this cpu architecture');
+      }
+    }
   } catch (error) {
     handleApiError(error);
-    return null;
+    return new Error('Could not get infraEnv for this cpu architecture');
   }
 };
 
@@ -49,15 +80,16 @@ const Day2ClusterDetails = () => {
     data: { cluster: day2Cluster },
   } = day2DiscoveryImageDialog;
   const wizardContext = useDay2WizardContext();
-  const [initialValues, setInitialValues] = React.useState<
-    Day2ClusterDetailValues | Error | null
-  >();
+  const [initialValues, setInitialValues] = React.useState<Day2ClusterDetailValues | null>(null);
   const [isSubmitting, setSubmitting] = React.useState(false);
-
+  const [isAlternativeCpuSelected, setIsAlternativeCpuSelected] = React.useState(false);
   const canSelectCpuArch = useFeature('ASSISTED_INSTALLER_MULTIARCH_SUPPORTED');
   const { getCpuArchitectures } = useOpenshiftVersions();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(day2Cluster.openshiftVersion);
   const day1CpuArchitecture = mapClusterCpuArchToInfraEnvCpuArch(day2Cluster.cpuArchitecture);
+  const [errorState, setErrorState] = React.useState<Error | null>(null);
+  const pullSecret = usePullSecret();
+
   const cpuArchitectures = React.useMemo(
     () =>
       getSupportedCpuArchitectures(
@@ -72,13 +104,26 @@ const Day2ClusterDetails = () => {
       const initialValues = await getDay2ClusterDetailInitialValues(
         day2Cluster.id,
         day1CpuArchitecture,
+        pullSecret,
+        day2Cluster.name,
+        day2Cluster.openshiftVersion,
       );
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      setInitialValues(initialValues);
+      if (initialValues instanceof Error) {
+        setErrorState(initialValues);
+      } else {
+        setInitialValues(initialValues);
+      }
     };
     void fetchAndSetInitialValues();
-  }, [day2Cluster.id, day1CpuArchitecture]);
+  }, [
+    day2Cluster.id,
+    day1CpuArchitecture,
+    pullSecret,
+    day2Cluster.name,
+    day2Cluster.openshiftVersion,
+  ]);
 
   const handleSubmit = React.useCallback(
     async (values: Day2ClusterDetailValues) => {
@@ -102,10 +147,54 @@ const Day2ClusterDetails = () => {
     [day2Cluster.id, wizardContext],
   );
 
-  if (!initialValues) {
+  const changeCpuArchitectureDropdownAsync = React.useCallback(
+    async (value: string, initialValues: Day2ClusterDetailValues) => {
+      if (pullSecret === undefined) {
+        setErrorState(new Error('Pull secret is missing'));
+      } else {
+        if (value !== initialValues.cpuArchitecture) {
+          //Fetch infraEnv by clusterId and cpu architecture
+          let infraEnv: InfraEnv | Error;
+          try {
+            infraEnv = await InfraEnvsService.getInfraEnv(
+              day2Cluster.id,
+              value as SupportedCpuArchitecture,
+            );
+            if (!infraEnv || infraEnv instanceof Error) {
+              try {
+                infraEnv = await InfraEnvsService.create({
+                  name: InfraEnvsService.makeInfraEnvName(
+                    value as ClusterCpuArchitecture,
+                    day2Cluster.name,
+                  ),
+                  pullSecret,
+                  clusterId: day2Cluster.id,
+                  openshiftVersion: day2Cluster.openshiftVersion,
+                  cpuArchitecture: value as ClusterCpuArchitecture,
+                });
+              } catch {
+                setErrorState(new Error('Could not get infraEnv for this cpu architecture'));
+              }
+            }
+          } catch {
+            setErrorState(new Error('Could not get infraEnv for this cpu architecture'));
+          }
+        }
+      }
+      setIsAlternativeCpuSelected(value !== initialValues.cpuArchitecture);
+    },
+    [day2Cluster.id, day2Cluster.name, day2Cluster.openshiftVersion, pullSecret],
+  );
+  const handleChangeCpuArchitectureDropdown = React.useCallback(
+    (value: string, initialValues: Day2ClusterDetailValues) =>
+      void changeCpuArchitectureDropdownAsync(value, initialValues),
+    [changeCpuArchitectureDropdownAsync],
+  );
+
+  if (initialValues === null) {
     return <LoadingState />;
-  } else if (initialValues instanceof Error) {
-    return <ErrorState content="Failed to load associated data for the Day2 cluster" />;
+  } else if (errorState !== null) {
+    return <ErrorState content={errorState.message} />;
   }
 
   return (
@@ -129,13 +218,32 @@ const Day2ClusterDetails = () => {
                 <GridItem>
                   <ClusterWizardStepHeader>Cluster details</ClusterWizardStepHeader>
                 </GridItem>
-                <GridItem span={12} lg={10} xl={9} xl2={7}>
+                <GridItem span={12} xl={10}>
                   <CpuArchitectureDropdown
                     openshiftVersion={day2Cluster.openshiftVersion}
                     day1CpuArchitecture={initialValues.cpuArchitecture}
                     cpuArchitectures={cpuArchitectures}
+                    onChange={(value) => handleChangeCpuArchitectureDropdown(value, initialValues)}
                   />
                 </GridItem>
+                {isAlternativeCpuSelected && (
+                  <GridItem span={12} xl={10}>
+                    <Alert
+                      isInline
+                      variant="info"
+                      title={
+                        'To check if the current version of your cluster supports multiple CPU architectures,'
+                      }
+                    >
+                      <>
+                        <ExternalLink href={HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS}>
+                          follow these steps
+                        </ExternalLink>
+                      </>
+                    </Alert>
+                  </GridItem>
+                )}
+
                 <GridItem>
                   <Day2HostStaticIpConfigurations />
                 </GridItem>

package/lib/ocm/components/AddHosts/day2Wizard/Day2DownloadISO.tsx

@@ -13,7 +13,7 @@ const Day2DownloadISO = () => {
   const wizardContext = useDay2WizardContext();
   const isoDownloadUrl = wizardContext.selectedIsoUrl;
   const ipxeDownloadUrl = wizardContext.selectedIpxeUrl;
-  const nameImageSuffix = `${cluster.name || ''}_${wizardContext.selectedCpuArchitecture}`;
+  const nameImageSuffix = `${cluster.name || ''}`;
   return (
     <ClusterWizardStep navigation={<Day2WizardNav />}>
       <Stack hasGutter>

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIP.tsx

@@ -65,18 +65,23 @@ const Day2StaticIP = () => {
         setInfraEnv(undefined);
         return;
       }
-
-      if (!infraEnv.staticNetworkConfig) {
-        // Make sure the infraEnv we store in the state has staticIP config
-        // This is required to be able to reuse the StaticIP services
-        infraEnv = await InfraEnvsService.setDummyStaticConfigToInfraEnv(infraEnv.id);
-      }
-      const staticIpInfo = getStaticIpInfo(infraEnv);
-      if (staticIpInfo) {
-        setInfraEnv(infraEnv);
-        setInitialStaticIpInfo(staticIpInfo);
+      if (infraEnv && !(infraEnv instanceof Error)) {
+        if (!infraEnv.staticNetworkConfig) {
+          // Make sure the infraEnv we store in the state has staticIP config
+          // This is required to be able to reuse the StaticIP services
+          infraEnv = await InfraEnvsService.setDummyStaticConfigToInfraEnv(infraEnv.id);
+        }
+        const staticIpInfo = getStaticIpInfo(infraEnv);
+        if (staticIpInfo) {
+          setInfraEnv(infraEnv);
+          setInitialStaticIpInfo(staticIpInfo);
+        } else {
+          setHasLoadError(true);
+        }
       } else {
         setHasLoadError(true);
+        setInfraEnv(undefined);
+        return;
       }
     };
     void setCurrentStaticConfig();

package/lib/ocm/components/AddHosts/day2Wizard/Day2Wizard.tsx

@@ -41,6 +41,7 @@ const Day2Wizard = () => {
       variant={ModalVariant.large}
       showClose={false}
       hasNoBodyWrapper
+      id="generate-discovery-iso-modal"
     >
       <div className={classNames('pf-c-wizard', 'cluster-wizard')}>
         <WizardHeader

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabContent.tsx

@@ -18,6 +18,7 @@ import { AddHosts } from '../AddHosts';
 import { HostsClusterDetailTabProps } from './types';
 import { NewFeatureSupportLevelProvider } from '../newFeatureSupportLevels';
 import useInfraEnv from '../../hooks/useInfraEnv';
+import { mapOcmArchToCpuArchitecture } from '../../services/CpuArchitectureService';
 
 export const HostsClusterDetailTabContent = ({
   cluster: ocmCluster,
@@ -37,7 +38,12 @@ export const HostsClusterDetailTabContent = ({
 
   const { infraEnv } = useInfraEnv(
     ocmCluster.id ? ocmCluster.id : '',
-    CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    ocmCluster.cpu_architecture
+      ? (mapOcmArchToCpuArchitecture(ocmCluster.cpu_architecture) as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    ocmCluster.name,
+    pullSecret,
+    ocmCluster.openshift_version,
   );
   React.useEffect(() => {
     if (!isVisible && day2Cluster) {
@@ -106,8 +112,6 @@ export const HostsClusterDetailTabContent = ({
             ocmCluster,
             pullSecret,
             normalizedVersion,
-            cpuArchitecturesByVersionImage,
-            canSelectCpuArch,
           );
           const aiCluster = Day2ClusterService.completeAiClusterWithOcmCluster(
             day2Cluster,

package/lib/ocm/components/HostsClusterDetailTab/types.ts

@@ -6,3 +6,9 @@ export type HostsClusterDetailTabProps = {
   isVisible: boolean;
   allEnabledFeatures: FeatureListType;
 };
+
+export interface AddHostsTabState {
+  showTab: boolean;
+  isDisabled: boolean;
+  tabTooltip: string;
+}

package/lib/ocm/components/HostsClusterDetailTab/utils.ts

@@ -1,6 +1,6 @@
-import Day2ClusterService from '../../services/Day2ClusterService';
 import { getFeatureSupported } from '../featureSupportLevels/FeatureSupportLevelProvider';
 import { OcmClusterType } from '../AddHosts/types';
+import { AddHostsTabState } from './types';
 
 const isSNOExpansionAllowed = (cluster: OcmClusterType) => {
   return getFeatureSupported(
@@ -10,46 +10,52 @@ const isSNOExpansionAllowed = (cluster: OcmClusterType) => {
   );
 };
 
-const visibleTabResult = {
-  showTab: true,
-  isDisabled: false,
-  tabTooltip: '',
-};
-
-const hiddenTabResult = {
-  showTab: false,
-  isDisabled: false,
-  tabTooltip: '',
-};
-
-const disabledTabResult = (tooltipMessage: string) => ({
-  showTab: true,
-  isDisabled: true,
-  tabTooltip: tooltipMessage,
-});
-
-export const getAddHostTabDetails = ({ cluster }: { cluster: OcmClusterType }) => {
-  const isHiddenTab =
-    (cluster.state !== 'ready' && cluster.state !== 'installed') ||
-    cluster.product?.id !== 'OCP-AssistedInstall';
-  if (isHiddenTab) {
-    return hiddenTabResult;
+const makeState = (
+  state: 'hidden' | 'visible' | 'disabled',
+  tooltipMessage = '',
+): AddHostsTabState => {
+  switch (state) {
+    case 'hidden':
+      return {
+        showTab: false,
+        isDisabled: false,
+        tabTooltip: '',
+      };
+    case 'visible':
+      return {
+        showTab: true,
+        isDisabled: false,
+        tabTooltip: tooltipMessage,
+      };
+    case 'disabled':
+      return {
+        showTab: true,
+        isDisabled: true,
+        tabTooltip: tooltipMessage,
+      };
   }
+};
 
+export const getAddHostsTabState = (cluster: OcmClusterType): AddHostsTabState => {
+  const isClusterStateReady = /ready|installed/.test(cluster.state);
+  const wasInstalledUsingAssistedInstaller = cluster.product?.id === 'OCP-AssistedInstall';
   // Checking if the Day1 cluster has reported metrics, so it can be determined if it's an SNO / multi node and has required information
-  // If that's not the case, we will still show the tab, and the content will be an ErrorState with an explanation message
   const day1ClusterHostCount = cluster.metrics?.nodes?.total || 0;
-  if (day1ClusterHostCount === 0 || !Day2ClusterService.getOpenshiftClusterId(cluster)) {
-    return visibleTabResult;
-  }
 
-  // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
-  if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
-    return disabledTabResult(
-      'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
-    );
+  if (isClusterStateReady && wasInstalledUsingAssistedInstaller) {
+    let tabState = makeState('visible');
+    if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
+      // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
+      tabState = makeState(
+        'disabled',
+        'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
+      );
+    }
+
+    return tabState;
+  } else {
+    // The cluster is not ready or was not installed using Assisted Installer.
+    // (see: https://issues.redhat.com/browse/HAC-3989)
+    return makeState('hidden');
   }
-
-  // This is a cluster that supports the AI Day2 flow
-  return visibleTabResult;
 };