@openshift-assisted/ui-lib 2.50.1 → 2.51.1

package/lib/cim/components/Agent/MinimalHWRequirements.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Button,
   ButtonVariant,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -15,7 +16,6 @@ import HostRequirements, {
   HostRequirementsListProps,
 } from '../../../common/components/hosts/HostRequirements';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { UiIcon } from '../../../common';
 
 type HostData = {
   cpu_cores: number;
@@ -86,7 +86,9 @@ const MinimalHWRequirements: React.FC<MinimalHWRequirementsProps> = ({
         isInline
         className="host-requirements-link"
       >
-        <UiIcon size="sm" status="warning" icon={<InfoCircleIcon />} />
+        <Icon status="warning" size="sm">
+          <InfoCircleIcon />
+        </Icon>
         &nbsp;{t('ai:Minimum hardware requirements')}
       </Button>
       <MinimalHWRequirementsModal

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -4,7 +4,7 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import { isDualStack } from '../../../common/components/clusterConfiguration/utils';
-import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common/config';
+import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,

package/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

@@ -1,16 +1,14 @@
-import { Flex, FlexItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { Flex, FlexItem, Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
-import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 import './ConditionsTable.css';
-import { UiIcon } from '../../../../common';
 
 const ignoredConditions = ['Progressing'];
 const reversedConditions = ['Degraded'];
@@ -50,14 +48,22 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
                 c.status === okStatus ? (
                   <InProgressIcon />
                 ) : (
-                  <CheckCircleIcon color={okColor.value} />
+                  <Icon status="success">
+                    <CheckCircleIcon />
+                  </Icon>
                 );
             } else {
               if (c.status === okStatus) {
-                icon = <CheckCircleIcon color={okColor.value} />;
+                icon = (
+                  <Icon status="success">
+                    <CheckCircleIcon />
+                  </Icon>
+                );
               } else if (c.status === nokStatus) {
                 icon = isDone ? (
-                  <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
+                  <Icon status="danger" size="sm">
+                    <ExclamationCircleIcon />
+                  </Icon>
                 ) : (
                   <InProgressIcon />
                 );

package/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import {
   ExpandableSectionToggle,
+  Icon,
   ProgressStep,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 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 { HostedClusterK8sResource } from '../types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { ExternalLink, UiIcon } from '../../../../common';
+import { ExternalLink } from '../../../../common';
 import ConditionsTable from './ConditionsTable';
 
 type HostedClusterProgressProps = {
@@ -34,9 +34,13 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
   if (progressingCondtion?.status === 'False') {
     progressIcon =
       availableCondtion?.status === 'True' ? (
-        <CheckCircleIcon color={okColor.value} />
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
       ) : (
-        <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
+        <Icon status="danger" size="sm">
+          <ExclamationCircleIcon />
+        </Icon>
       );
   }
 

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsProgress.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
   ExpandableSectionToggle,
+  Icon,
   ProgressStep,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 
 import {
@@ -42,7 +42,11 @@ const getNodePoolsStatus = (
 
   const nodePoolsStatus: { type: string; icon: React.ReactNode } = {
     type: 'ok',
-    icon: <CheckCircleIcon color={okColor.value} />,
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    ),
   };
 
   for (const property in nodePoolMap) {

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

@@ -1,14 +1,13 @@
+import React from 'react';
+import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
-import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+
+import { NodePoolK8sResource } from '../types';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
-import { NodePoolK8sResource } from '../types';
-import { TFunction } from 'i18next';
 import { agentStatus } from '../../helpers/agentStatus';
 
 export type NodePoolStatus = {
@@ -40,7 +39,11 @@ export const getNodePoolStatus = (
   if (hasErrorAgents) {
     return {
       type: 'error',
-      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      icon: (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       text: t('ai:Error'),
     };
   }
@@ -58,7 +61,11 @@ export const getNodePoolStatus = (
   if (hasWarningAgents) {
     return {
       type: 'warning',
-      icon: <ExclamationCircleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       text: t('ai:Warning'),
     };
   }
@@ -66,7 +73,11 @@ export const getNodePoolStatus = (
   return nodePool.status?.conditions?.find(({ type }) => type === 'Ready')?.status === 'True'
     ? {
         type: 'ok',
-        icon: <CheckCircleIcon color={okColor.value} />,
+        icon: (
+          <Icon status="success">
+            <CheckCircleIcon />
+          </Icon>
+        ),
         text: t('ai:Ready'),
       }
     : {

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

@@ -13,12 +13,11 @@ import {
   Title,
   TitleSizes,
   Label,
+  Icon,
 } from '@patternfly/react-core';
 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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 
 import { architectureData } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
@@ -39,11 +38,19 @@ type EditItemProps = {
 };
 
 const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning, noIcon }) => {
-  let icon = <CheckCircleIcon color={okColor.value} />;
+  let icon = (
+    <Icon status="success">
+      <CheckCircleIcon />
+    </Icon>
+  );
   if (isLoading) {
     icon = <Spinner size="md" />;
   } else if (isWarning) {
-    icon = <ExclamationTriangleIcon color={warningColor.value} />;
+    icon = (
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   }
   const btn = (
     <>

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
+import { Icon, Tooltip } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';
-import { Tooltip } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
@@ -51,10 +50,9 @@ const InfraEnvHostsTabAgentsWarning: React.FC<InfraEnvHostsTabAgentsWarning> = (
   if (hostsWithProblemsCount) {
     return (
       <Tooltip content={t('ai:{{count}} host has problems', { count: hostsWithProblemsCount })}>
-        <ExclamationTriangleIcon
-          color={warningColor.value}
-          className="infra-env-hosts-tab-title__icon"
-        />
+        <Icon status="warning">
+          <ExclamationTriangleIcon className="infra-env-hosts-tab-title__icon" />
+        </Icon>
       </Tooltip>
     );
   }

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
-import { TFunction } from 'i18next';
 
 export const bmhStatus = (t: TFunction): HostStatus<string> => ({
   'bmh-error': {
@@ -68,7 +68,11 @@ export const agentStatus = (t: TFunction): HostStatus<string> => ({
   specSyncErr: {
     key: 'specSyncErr',
     title: t('ai:Sync error'),
-    icon: <ExclamationCircleIcon color={dangerColor.value} />,
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    ),
     category: 'Discovery related',
   },
 });

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+import { Button, Flex, FlexItem, Icon, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
   getHostname,
   getInventory,
@@ -23,8 +25,6 @@ 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 { TFunction } from 'i18next';
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -99,7 +99,14 @@ const statusColumn = (
                   </Link>
                 }
               >
-                <Button variant="link" icon={<InfoCircleIcon color={blueInfoColor.value} />}>
+                <Button
+                  variant="link"
+                  icon={
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
+                  }
+                >
                   {t<string>('ai:Cannot be deleted')}
                 </Button>
               </Popover>

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

@@ -14,9 +14,10 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
+  Icon,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, UiIcon } from '../ui';
+import { PrismCode } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -207,7 +208,9 @@ export const HostsNotShowingLink = ({
     <Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
       {!isInline && (
         <>
-          <UiIcon size="sm" icon={<InfoCircleIcon />} />
+          <Icon size="sm">
+            <InfoCircleIcon />
+          </Icon>
           &nbsp;
         </>
       )}

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

@@ -1,16 +1,15 @@
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { EventListFetchProps } from '../../types';
 import React from 'react';
-import { EventsModal } from '../ui';
-import { Button, ButtonVariant, Popover, Content } from '@patternfly/react-core';
+import capitalize from 'lodash-es/capitalize.js';
+import { Button, ButtonVariant, Popover, Content, Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { EventsModal } from '../ui';
+import { EventListFetchProps } from '../../types';
 import ClusterProgressItem from './ClusterProgressItem';
-import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type FinalizingProgressProps = {
@@ -32,7 +31,11 @@ const areAllBuiltInOperatorsAvailable = (
 export const getFinalizingStatus = (cluster: Cluster) => {
   let finalizingIcon, initializationStatus;
   if (areAllBuiltInOperatorsAvailable(cluster.monitoredOperators)) {
-    finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+    finalizingIcon = (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    );
     initializationStatus = 'completed';
   } else {
     switch (cluster.status) {
@@ -42,12 +45,20 @@ export const getFinalizingStatus = (cluster: Cluster) => {
         break;
       case 'error':
       case 'cancelled':
-        finalizingIcon = <ExclamationCircleIcon color={dangerColor.value} />;
+        finalizingIcon = (
+          <Icon status="danger">
+            <ExclamationCircleIcon />
+          </Icon>
+        );
         initializationStatus = 'failed';
         break;
       case 'installed':
       case 'adding-hosts':
-        finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+        finalizingIcon = (
+          <Icon status="success">
+            <CheckCircleIcon />
+          </Icon>
+        );
         initializationStatus = 'completed';
         break;
       default:

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, List, ListItem, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 import {
@@ -60,9 +58,17 @@ export function getOperatorsLabel(operators: MonitoredOperatorsList, t: TFunctio
 export function getOperatorsIcon(status: OperatorStatus | 'pending') {
   switch (status) {
     case 'available':
-      return <CheckCircleIcon color={okColor.value} />;
+      return (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      );
     case 'failed':
-      return <ExclamationCircleIcon color={dangerColor.value} />;
+      return (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      );
     case 'progressing':
       return <InProgressIcon />;
     default:

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
+import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+
+import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -24,7 +24,13 @@ export const ProgressBarTexts = ({ hosts, hostRole }: HostProgressProps) => {
   if (hosts.some((host) => ['cancelled', 'error'].includes(host.status))) {
     const failedHostsCount = hosts.filter((host) => host.status === 'error').length;
     return (
-      <ClusterProgressItem icon={<ExclamationCircleIcon color={dangerColor.value} />}>
+      <ClusterProgressItem
+        icon={
+          <Icon status="danger">
+            <ExclamationCircleIcon />
+          </Icon>
+        }
+      >
         <>
           {hostRoleText}
           <br />
@@ -73,7 +79,13 @@ export const ProgressBarTexts = ({ hosts, hostRole }: HostProgressProps) => {
   }
 
   return (
-    <ClusterProgressItem icon={<CheckCircleIcon color={okColor.value} />}>
+    <ClusterProgressItem
+      icon={
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      }
+    >
       <>
         {hostRoleText}
         <br />

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import lodashValues from 'lodash-es/values.js';
-import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 import {
   ValidationsInfo as ClusterValidationsInfo,
@@ -30,13 +29,15 @@ import {
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { getKeys, stringToJSON } from '../../utils';
-import { UiIcon } from '../ui';
 
 const AllValidationsPassed = () => {
   const { t } = useTranslation();
   return (
     <>
-      <CheckCircleIcon color={okColor.value} /> {t('ai:All checks passed')}
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>{' '}
+      {t('ai:All checks passed')}
     </>
   );
 };
@@ -124,9 +125,17 @@ const FailingValidation = <S extends string>({
 
   let icon;
   if (severity === 'warning') {
-    icon = <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
+    icon = (
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>
+    );
   } else {
-    icon = <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
+    icon = (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    );
   }
 
   return (

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Split, SplitItem, Tooltip, FormGroup } from '@patternfly/react-core';
 import { RadioField } from '../../ui/formik';
 import { PopoverIcon } from '../../../components/ui';
-import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN } from '../../../config';
+import { NETWORK_TYPE_OVN, NETWORK_TYPE_SDN } from '../../../types/networkType';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 const GROUP_NAME = 'networkType';

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

@@ -3,15 +3,14 @@ import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly
 import { useFormikContext } from 'formik';
 import { Address4, Address6 } from 'ip-address';
 
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { getFieldId } from '../../ui';
 import {
-  DUAL_STACK,
-  IPV4_STACK,
+  HostSubnets,
+  NetworkConfigurationValues,
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
-  NO_SUBNET_SET,
-} from '../../../config';
+} from '../../../types';
+import { getFieldId } from '../../ui';
+import { DUAL_STACK, IPV4_STACK, NO_SUBNET_SET } from '../../../config';
 import { RadioField } from '../../ui/formik';
 import { ConfirmationModal, PopoverIcon } from '../../ui';
 import { reorderNetworksByCurrentPrimary } from './reorderNetworks';

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

@@ -9,8 +9,8 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { NetworkConfigurationValues, HostSubnets } from '../../../types';
-import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues, HostSubnets, NETWORK_TYPE_SDN } from '../../../types';
+import { DUAL_STACK } from '../../../config';
 import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
 import { FormikStaticField, PopoverIcon } from '../../ui';

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

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, Icon, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_color_status_success_default as successColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { toSentence } from '../ui';
 import { hostValidationFailureHints, hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';
@@ -67,7 +65,10 @@ const HostPropertyValidationPopover: React.FC<
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
           <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>{' '}
+            {children}
           </Flex>
         </ValidationPopover>
       );
@@ -85,7 +86,10 @@ const HostPropertyValidationPopover: React.FC<
       return (
         <>
           <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <CheckCircleIcon color={successColor.value} /> {children}
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>{' '}
+            {children}
           </Flex>
         </>
       );