@openshift-assisted/ui-lib 2.9.15-cim → 2.10.1-cim

package/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -12,8 +12,13 @@ import {
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
-import { NodePoolK8sResource, HostedClusterK8sResource, AgentMachineK8sResource } from '../types';
-import NodePoolForm, { NodePoolFormValues } from './NodePoolForm';
+import {
+  NodePoolK8sResource,
+  HostedClusterK8sResource,
+  AgentMachineK8sResource,
+  NodePoolFormValues,
+} from '../types';
+import NodePoolForm from './NodePoolForm';
 import { labelsToFormikValue } from '../utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getErrorMessage } from '../../../../common/utils';
@@ -27,13 +32,60 @@ type ManageHostsModalProps = {
     nodePool: NodePoolK8sResource,
     nodePoolPatches: {
       op: string;
-      value: unknown;
+      value?: unknown;
       path: string;
     }[],
   ) => Promise<unknown>;
   agentMachines: AgentMachineK8sResource[];
 };
 
+const getPatches = (values: NodePoolFormValues, nodePool: NodePoolK8sResource) => {
+  const patches = [];
+
+  if (values.useAutoscaling) {
+    if (!!nodePool.spec.autoScaling) {
+      patches.push({
+        op: 'replace',
+        value: {
+          min: values.autoscaling.minReplicas,
+          max: values.autoscaling.maxReplicas,
+        },
+        path: '/spec/autoScaling',
+      });
+    } else {
+      patches.push(
+        { op: 'remove', path: '/spec/replicas' },
+        {
+          op: 'add',
+          value: {
+            min: values.autoscaling.minReplicas,
+            max: values.autoscaling.maxReplicas,
+          },
+          path: '/spec/autoScaling',
+        },
+      );
+    }
+  } else {
+    if (!!nodePool.spec.replicas) {
+      patches.push({
+        op: 'replace',
+        value: values.count,
+        path: '/spec/replicas',
+      });
+    } else {
+      patches.push(
+        { op: 'remove', path: '/spec/autoScaling' },
+        {
+          op: 'add',
+          value: values.count,
+          path: '/spec/replicas',
+        },
+      );
+    }
+  }
+  return patches;
+};
+
 const ManageHostsModal = ({
   onClose,
   nodePool,
@@ -47,16 +99,11 @@ const ManageHostsModal = ({
   const namespaceAgents = agents.filter(
     (a) => a.metadata?.namespace === hostedCluster.spec.platform.agent?.agentNamespace,
   );
+
   const handleSubmit: FormikConfig<NodePoolFormValues>['onSubmit'] = async (values) => {
     setError(undefined);
-    const patches = [];
-    if (values.count !== nodePool.spec.replicas) {
-      patches.push({
-        op: 'replace',
-        value: values.count,
-        path: '/spec/replicas',
-      });
-    }
+    const patches = getPatches(values, nodePool);
+
     try {
       await onSubmit(nodePool, patches);
       onClose();
@@ -80,7 +127,12 @@ const ManageHostsModal = ({
           agentLabels: labelsToFormikValue(
             nodePool.spec.platform?.agent?.agentLabelSelector?.matchLabels || {},
           ),
-          count: nodePool.spec.replicas,
+          count: nodePool.spec.replicas || 1,
+          useAutoscaling: !!nodePool.spec.autoScaling,
+          autoscaling: {
+            minReplicas: nodePool.spec.autoScaling?.min || 1,
+            maxReplicas: nodePool.spec.autoScaling?.max || 1,
+          },
         }}
         isInitialValid={false}
         onSubmit={handleSubmit}

package/lib/cim/components/Hypershift/modals/NodePoolForm.tsx

@@ -15,18 +15,14 @@ import { useTranslation } from '../../../../common/hooks/use-translation-wrapper
 import { AgentK8sResource } from '../../../types';
 import { getAgentsForSelection, getVersionFromReleaseImage } from '../../helpers';
 import NodePoolAgentsForm from '../forms/NodePoolAgentsForm';
-import { AgentMachineK8sResource, HostedClusterK8sResource, NodePoolK8sResource } from '../types';
+import {
+  AgentMachineK8sResource,
+  HostedClusterK8sResource,
+  NodePoolFormValues,
+  NodePoolK8sResource,
+} from '../types';
 import { getNodepoolAgents } from '../utils';
 
-export type NodePoolFormValues = {
-  nodePoolName: string;
-  agentLabels: {
-    key: string;
-    value: string;
-  }[];
-  count: number;
-};
-
 type NodePoolFormProps = {
   agents: AgentK8sResource[];
   agentMachines?: AgentMachineK8sResource[];
@@ -91,6 +87,8 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
             agents={agents}
             countName="count"
             labelName="agentLabels"
+            autoscalingName={`autoscaling`}
+            useAutoscalingName={`useAutoscaling`}
             maxAgents={maxAgents}
             isEdit={isEdit}
           />

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

@@ -4,7 +4,7 @@ import { StatusCondition } from '../../types/k8s/shared';
 export type NodePoolK8sResource = K8sResourceCommon & {
   spec: {
     clusterName: string;
-    replicas: number;
+    replicas?: number;
     management: {
       autoRepair?: boolean;
       replace?: {
@@ -188,3 +188,23 @@ export type AgentMachineK8sResource = K8sResourceCommon & {
     };
   };
 };
+
+export type NodePoolPatches = {
+  op: string;
+  value?: unknown;
+  path: string;
+}[];
+
+export type NodePoolFormValues = {
+  nodePoolName: string;
+  agentLabels: {
+    key: string;
+    value: string;
+  }[];
+  count: number;
+  autoscaling: {
+    minReplicas: number;
+    maxReplicas: number;
+  };
+  useAutoscaling: boolean;
+};

package/lib/cim/components/Hypershift/utils/status.tsx

@@ -1,10 +1,10 @@
-import { CheckCircleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
+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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import React from 'react';
-import {
-  global_palette_green_500 as okColor,
-  global_danger_color_100 as dangerColor,
-  global_warning_color_100 as warningColor,
-} from '@patternfly/react-tokens';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
 import { NodePoolK8sResource } from '../types';

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -14,7 +14,9 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationTriangleIcon, PencilAltIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -18,7 +18,7 @@ import {
   TitleSizes,
 } from '@patternfly/react-core';
 import { Formik, FormikProps, useFormikContext } from 'formik';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import {
   httpProxyValidationSchema,

package/lib/cim/components/InfraEnv/InfraEnvHostsTabAgentsWarning.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -12,7 +12,7 @@ import {
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons';
+import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import * as React from 'react';
 import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
 import { agentStatus } from '../helpers/agentStatus';
@@ -35,19 +35,19 @@ const getStatusesForFilter = (statuses: HostStatus<string>) => {
   );
 
   sortedStatuses.forEach((status) => {
-    const { category, key } = statuses[status];
+    const { category, title } = statuses[status];
     if (filterStatuses[category]) {
-      if (filterStatuses[category][key]) {
-        filterStatuses[category][key].push(status);
+      if (filterStatuses[category][title]) {
+        filterStatuses[category][title].push(status);
       } else {
         filterStatuses[category] = {
           ...filterStatuses[category],
-          [key]: [status],
+          [title]: [status],
         };
       }
     } else {
       filterStatuses[category] = {
-        [key]: [status],
+        [title]: [status],
       };
     }
   });

package/lib/cim/components/helpers/agentStatus.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ConnectedIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
 import { TFunction } from 'i18next';

package/lib/cim/components/helpers/toAssisted.ts

@@ -135,8 +135,14 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-    ingressVip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.apiVIP,
+    apiVips: [
+      {
+        ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
+      },
+    ],
+    ingressVips: [
+      { ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.apiVIP },
+    ],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,

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

@@ -16,7 +16,8 @@ import {
   StackItem,
   Title,
 } from '@patternfly/react-core';
-import { ErrorCircleOIcon, UploadIcon } from '@patternfly/react-icons';
+import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon';
+import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon';
 import jsYaml from 'js-yaml';
 import { saveAs } from 'file-saver';
 

package/lib/cim/components/modals/CimConfiguration/CimConfigDisconnectedAlert.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Alert, AlertVariant } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Trans } from 'react-i18next';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx

@@ -7,7 +7,7 @@ import {
   ButtonVariant,
   AlertActionCloseButton,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { AgentServiceConfigConditionType } from '../../../types';

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.tsx

@@ -9,7 +9,8 @@ import {
   Checkbox,
   TextInput,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { HelpIcon } from '@patternfly/react-icons/dist/js/icons/help-icon';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { CimConfigurationFormProps } from './types';

package/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Alert, AlertActionLink, AlertVariant } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';

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

@@ -17,6 +17,7 @@ const NewFeatureSupportLevelsAPI = {
           openshift_version: openshiftVersion,
           cpu_architecture: cpuArchitecture,
           platform_type: platformType,
+          ...(platformType === 'external' ? { external_platform_name: 'oci' } : {}),
         },
       },
     );

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

@@ -10,7 +10,7 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Formik, FormikHelpers } from 'formik';
 import {
   ImageCreateParams,

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

@@ -13,7 +13,7 @@ import {
   HelperText,
   HelperTextItem,
 } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { PrismCode, SimpleAIPrismTheme } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import {
   Flex,
   FlexItem,

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

@@ -1,13 +1,9 @@
 import React from 'react';
-import {
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  ExternalLinkAltIcon,
-} from '@patternfly/react-icons';
-import {
-  global_warning_color_100 as warningColor,
-  global_danger_color_100 as dangerColor,
-} from '@patternfly/react-tokens';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
 import { OpenshiftVersionOptionType } from '../../types';
 import { SelectField } from '../ui';

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

@@ -4,7 +4,7 @@ import { Credentials, Cluster } from '@openshift-assisted/types/assisted-install
 import { LoadingState, ErrorState } from '../../components/ui/uiState';
 import { DetailList, DetailItem } from '../../components/ui/DetailList';
 import { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ClusterCredentialsProps = {

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

@@ -7,7 +7,7 @@ import {
   ModalVariant,
   ExpandableSection,
 } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
 import { ToolbarButton } from '../ui/Toolbar';
 import PrismCode from '../ui/PrismCode';

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

@@ -3,12 +3,10 @@ import { EventListFetchProps } from '../../types';
 import React from 'react';
 import { EventsModal } from '../ui';
 import { Button, ButtonVariant, Popover, Text, TextContent } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  InProgressIcon,
-  PendingIcon,
-} from '@patternfly/react-icons';
+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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 import ClusterProgressItem from './ClusterProgressItem';

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { saveAs } from 'file-saver';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { canDownloadKubeconfig } from '../hosts/utils';
 import { useAlerts } from '../AlertsContextProvider';
@@ -7,9 +6,10 @@ import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { isInOcm } from '../../api/axiosClient';
 import { getApiErrorMessage, handleApiError } from '../../api/utils';
 import ClustersAPI from '../../api/assisted-service/ClustersAPI';
-import { AxiosResponseHeaders } from 'axios';
+import { AxiosHeaderValue, AxiosHeaders, AxiosResponseHeaders } from 'axios';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
+import { downloadFile } from '../../utils';
 
 type KubeconfigDownloadProps = {
   className?: string;
@@ -22,10 +22,20 @@ type KubeconfigDownloadProps = {
 const getKubeconfigFileName = (
   headers:
     | AxiosResponseHeaders
-    | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined }>,
+    | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined }>
+    | Partial<
+        AxiosHeaders & {
+          Server: AxiosHeaderValue;
+          'Content-Type': AxiosHeaderValue;
+          'Content-Length': AxiosHeaderValue;
+          'Cache-Control': AxiosHeaderValue;
+          'Content-Encoding': AxiosHeaderValue;
+        }
+      >,
 ) => {
   const fileNameMatch =
-    headers['content-disposition'] && headers['content-disposition'].match(/filename=".*"/);
+    (headers['content-disposition'] as string) &&
+    (headers['content-disposition'] as string).match(/filename=".*"/);
   return fileNameMatch ? fileNameMatch[0].slice(10, -1) : 'kubeconfig';
 };
 
@@ -46,12 +56,12 @@ const KubeconfigDownload: React.FC<KubeconfigDownloadProps> = ({
             clusterId,
             fileName: 'kubeconfig',
           });
-          saveAs(data.url);
+          downloadFile(data.url);
         } else {
           const response = await ClustersAPI.downloadClusterCredentials(clusterId, 'kubeconfig');
           const fileName = getKubeconfigFileName(response.headers);
 
-          saveAs(response.data, fileName);
+          downloadFile('', response.data, fileName);
         }
       } catch (e) {
         handleApiError(e, (e) => {

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

@@ -1,15 +1,11 @@
 import React from 'react';
 import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  InProgressIcon,
-  PendingIcon,
-} from '@patternfly/react-icons';
-import {
-  global_danger_color_100 as dangerColor,
-  global_success_color_100 as okColor,
-} from '@patternfly/react-tokens';
+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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 import {

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
-import { CheckCircleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
+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 { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 import ClusterProgressItem from './ClusterProgressItem';

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import lodashValues from 'lodash-es/values.js';
 import { Button, ButtonVariant } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-} from '@patternfly/react-icons';
-import {
-  global_success_color_100 as okColor,
-  global_danger_color_100 as dangerColor,
-  global_warning_color_100 as warningColor,
-} from '@patternfly/react-tokens';
+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 { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import {
   ValidationsInfo as ClusterValidationsInfo,
   Validation as ClusterValidation,

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

@@ -9,10 +9,10 @@ import { FeatureSupportLevelBadge } from '../../featureSupportLevels';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { getVipValidationsById } from '../../clusterConfiguration';
-import { selectApiVip } from '../../../selectors';
+import { selectApiVip, selectIngressVip } from '../../../selectors';
 
 interface VipStaticValueProps {
-  vipName: 'apiVip' | 'ingressVip';
+  vipName: 'apiVips' | 'ingressVips';
   cluster: Cluster;
   validationErrorMessage?: string;
 }
@@ -124,12 +124,12 @@ export const VirtualIPControlGroup = ({
             label={t('ai:API IP')}
             name="apiVip"
             helperText={apiVipHelperText}
-            value={cluster.apiVip || ''}
+            value={selectApiVip(cluster)}
             isValid={!apiVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="apiVip"
+              vipName="apiVips"
               cluster={cluster}
               validationErrorMessage={apiVipFailedValidationMessage}
             />
@@ -138,12 +138,12 @@ export const VirtualIPControlGroup = ({
             label={t('ai:Ingress IP')}
             name="ingressVip"
             helperText={ingressVipHelperText}
-            value={cluster.ingressVip || ''}
+            value={selectIngressVip(cluster)}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="ingressVip"
+              vipName="ingressVips"
               cluster={cluster}
               validationErrorMessage={ingressVipFailedValidationMessage}
             />

package/lib/common/components/featureSupportLevels/FeatureSupportLevelBadge.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { FeatureId, isPreviewSupportLevel } from '../../types';
-import { TechnologyPreview, DeveloperPreview } from '../ui/PreviewBadge';
+import { TechnologyPreview } from '../ui/TechnologyPreview';
+import { DeveloperPreview } from '../ui/DeveloperPreview';
 import { useFeatureSupportLevel } from './FeatureSupportLevelContext';
 
 export type SupportLevelBadgeProps = {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import {
   Disk,
   DiskRole as DiskRoleValue,