@openshift-assisted/ui-lib 2.9.14-cim → 2.10.0-cim

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/ManagedNetworkingControlGroup.tsx

@@ -51,9 +51,9 @@ export const ManagedNetworkingControlGroup = ({
           <>
             <span>{t('ai:User-Managed Networking')}</span>{' '}
             <PopoverIcon
-              bodyContent={
-                "With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints."
-              }
+              bodyContent={t(
+                "ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
+              )}
             />
           </>
         }

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,

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
-import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon } from '@patternfly/react-icons';
-import {
-  global_danger_color_100 as dangerColor,
-  global_success_color_100 as successColor,
-} 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 { 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 successColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { toSentence } from '../ui';
 import { hostValidationFailureHints, hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';

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

@@ -24,6 +24,7 @@ import SectionTitle from '../ui/SectionTitle';
 import { OnDiskRoleType } from './DiskRole';
 import StorageDetail from '../storage/StorageDetail';
 import { stringToJSON } from '../../utils';
+import { TFunction } from 'i18next';
 
 type HostDetailProps = {
   host: Host;
@@ -36,7 +37,6 @@ type HostDetailProps = {
     hostId: Host['id'],
     diskId: Disk['id'],
   ) => Promise<unknown>;
-  hideStorage?: boolean;
 };
 
 type SectionColumnProps = {
@@ -53,12 +53,12 @@ const SectionColumn: React.FC<SectionColumnProps> = ({ children }) => (
   </GridItem>
 );
 
-const nicsColumns = [
-  { title: 'Name' },
-  { title: 'MAC address' },
-  { title: 'IPv4 address' },
-  { title: 'IPv6 address' },
-  { title: 'Speed' },
+const nicsColumns = (t: TFunction) => [
+  { title: t('ai:Name') },
+  { title: t('ai:MAC address') },
+  { title: t('ai:IPv4 address') },
+  { title: t('ai:IPv6 address') },
+  { title: t('ai:Speed') },
   // { title: 'Vendor' }, TODO(mlibra): search HW database for humanized values
   // { title: 'Product' },
 ];
@@ -71,6 +71,7 @@ const NICsTableRowWrapper = (props: RowWrapperProps) => (
 );
 
 const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }) => {
+  const { t } = useTranslation();
   const rows: IRow[] = interfaces
     .sort((nicA, nicB) => nicA.name?.localeCompare(nicB.name || '') || 0)
     .map((nic) => ({
@@ -92,12 +93,12 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
       ],
       key: nic.name,
     }));
-  const { t } = useTranslation();
+
   return (
     <Table
       data-testid={testId}
       rows={rows}
-      cells={nicsColumns}
+      cells={nicsColumns(t)}
       variant={TableVariant.compact}
       aria-label={t("ai:Host's network interfaces table")}
       borders={false}
@@ -116,7 +117,6 @@ export const HostDetail = ({
   AdditionalNTPSourcesDialogToggleComponent,
   hideNTPStatus = false,
   updateDiskSkipFormatting,
-  hideStorage,
 }: HostDetailProps) => {
   const { t } = useTranslation();
   const { id, validationsInfo: hostValidationsInfo } = host;
@@ -148,9 +148,9 @@ export const HostDetail = ({
 
   return (
     <Grid hasGutter>
-      <SectionTitle testId={'host-details-section'} title="Host details" />
+      <SectionTitle testId={'host-details-section'} title={t('ai:Host details')} />
       <SectionColumn>
-        <DetailItem testId={'uuid'} title="UUID" value={id} />
+        <DetailItem testId={'uuid'} title={t('ai:UUID')} value={id} />
         <DetailItem
           testId={'manufacturer'}
           title={t('ai:Manufacturer')}
@@ -161,7 +161,11 @@ export const HostDetail = ({
           title={t('ai:Product')}
           value={inventory.systemVendor?.productName || DASH}
         />
-        <DetailItem testId={'serial-number'} title="Serial number" value={rowInfo.serialNumber} />
+        <DetailItem
+          testId={'serial-number'}
+          title={t('ai:Serial number')}
+          value={rowInfo.serialNumber}
+        />
       </SectionColumn>
       <SectionColumn>
         <DetailItem
@@ -186,8 +190,8 @@ export const HostDetail = ({
         />
       </SectionColumn>
       <SectionColumn>
-        <DetailItem testId={'hw-type'} title="Hardware type" value={hardwareType} />
-        <DetailItem testId={'bmc-address'} title="BMC address" value={bmcAddress} />
+        <DetailItem testId={'hw-type'} title={t('ai:Hardware type')} value={hardwareType} />
+        <DetailItem testId={'bmc-address'} title={t('ai:BMC address')} value={bmcAddress} />
         <DetailItem
           testId={'boot-mode'}
           title={t('ai:Boot mode')}
@@ -207,18 +211,13 @@ export const HostDetail = ({
           value={ntpValidationStatus}
         />
       </SectionColumn>
-      {!hideStorage && (
-        <StorageDetail
-          host={host}
-          onDiskRole={onDiskRole}
-          canEditDisks={canEditDisks}
-          updateDiskSkipFormatting={updateDiskSkipFormatting}
-        />
-      )}
-      <SectionTitle
-        testId={'nics-section'}
-        title={`${nics.length} NIC${nics.length === 1 ? '' : 's'}`}
+      <StorageDetail
+        host={host}
+        onDiskRole={onDiskRole}
+        canEditDisks={canEditDisks}
+        updateDiskSkipFormatting={updateDiskSkipFormatting}
       />
+      <SectionTitle testId={'nics-section'} title={t('ai:NIC', { count: nics.length })} />
       <GridItem>
         <NicsTable interfaces={nics} testId={'nics-table'} />
       </GridItem>

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

@@ -28,7 +28,7 @@ import OcpConsoleNodesSectionLink from './OcpConsoleNodesSectionLink';
 import { toSentence } from '../ui/table/utils';
 import { HostStatusProps } from './types';
 import { UpdateDay2ApiVipPropsType } from './HostValidationGroups';
-import { UnknownIcon } from '@patternfly/react-icons';
+import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { APPROVE_NODES_IN_CL_LINK } from '../../config';
 import { hostStatus } from './status';
@@ -230,6 +230,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
     onEditHostname?.();
   }, [keepOnOutsideClick, onEditHostname]);
 
+  const { t } = useTranslation();
+
   const { title, icon, sublabel, details, noPopover } = status;
   const titleWithProgress = getTitleWithProgress(host, status);
   const popoverProps: WithHostStatusPopoverProps = {
@@ -251,7 +253,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'
-            ? hostStatus.installed.icon
+            ? hostStatus(t).installed.icon
             : icon) || <UnknownIcon />}
         </FlexItem>
       }

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

@@ -1,10 +1,10 @@
 import React, { Fragment, ReactElement } from 'react';
 import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-import {
-  global_warning_color_100 as warningColor,
-  global_success_color_100 as okColor,
-} from '@patternfly/react-tokens';
-import { PendingIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+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 { Host, HostValidationId } from '@openshift-assisted/types/assisted-installer-service';
 import { Validation, ValidationsInfo } from '../../types/hosts';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
-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 type { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname } from './utils';
 import { DASH } from '../constants';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConnectedIcon } from '@patternfly/react-icons';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { HostsNotShowingLink, HostsNotShowingLinkProps } from '../clusterConfiguration';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import AITable, {

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

@@ -18,7 +18,7 @@ import {
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
 import {

package/lib/common/components/hosts/OcpConsoleNodesSectionLink.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 { Button, ButtonVariant } from '@patternfly/react-core';
 import { AddHostsContext } from '../AddHosts/AddHostsContext';
 import { getOcpConsoleNodesPage } from '../../config';

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

@@ -16,7 +16,7 @@ import {
   ToolbarProps,
   Tooltip,
 } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
@@ -124,7 +124,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
             {children}
             <ToolbarItem>
               {isDisabled ? (
-                <Tooltip content="Select one or more hosts">{actionsDropdown}</Tooltip>
+                <Tooltip content={t('ai:Select one or more hosts')}>{actionsDropdown}</Tooltip>
               ) : (
                 actionsDropdown
               )}

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

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