@openshift-assisted/ui-lib 2.50.1 → 2.51.1

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

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Popover,
+  Button,
+  Content,
+  FlexItem,
+  Flex,
+  Stack,
+  StackItem,
+  Icon,
+} from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
@@ -8,7 +17,7 @@ import hdate from 'human-date';
 
 import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
-import { ExternalLink, UiIcon, getHumanizedDateTime } from '../ui';
+import { ExternalLink, getHumanizedDateTime } from '../ui';
 
 import HostProgress from './HostProgress';
 import { getHostProgressStageNumber, getHostProgressStages } from './utils';
@@ -227,7 +236,9 @@ const getHostStatusIcon = (
         minWidth="20rem"
         maxWidth="30rem"
       >
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     );
   } else return icon;

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

@@ -1,7 +1,5 @@
 import React, { Fragment, ReactElement } from 'react';
-import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { Alert, AlertGroup, AlertVariant, Icon, Level, LevelItem } from '@patternfly/react-core';
 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';
@@ -293,7 +291,10 @@ export const HostValidationGroups = ({
           if (failedValidations.length) {
             return (
               <>
-                {t('ai:Failed')} <ExclamationTriangleIcon color={warningColor.value} />
+                {t('ai:Failed')}{' '}
+                <Icon status="warning">
+                  <ExclamationTriangleIcon />
+                </Icon>
               </>
             );
           } else if (pendingValidations.length) {
@@ -305,7 +306,10 @@ export const HostValidationGroups = ({
           }
           return (
             <>
-              {t('ai:Ready')} <CheckCircleIcon color={okColor.value} />
+              {t('ai:Ready')}{' '}
+              <Icon status="success">
+                <CheckCircleIcon />
+              </Icon>
             </>
           );
         };

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem, Icon, Popover } 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 type { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname } from './utils';
 import { DASH } from '../constants';
@@ -44,7 +43,9 @@ const Hostname: React.FC<HostnameProps> = ({
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
         <FlexItem className={'pf-v6-u-mr-xs'}>
-          <ExclamationTriangleIcon color={warningColor.value} />
+          <Icon status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </FlexItem>
       )}
       <FlexItem>{hostname}</FlexItem>
@@ -61,7 +62,9 @@ const Hostname: React.FC<HostnameProps> = ({
         headerContent={
           <Flex alignItems={{ default: 'alignItemsCenter' }}>
             <FlexItem className={'pf-v6-u-mr-xs'}>
-              <ExclamationTriangleIcon color={warningColor.value} />
+              <Icon status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </FlexItem>
             <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>
           </Flex>

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

@@ -7,6 +7,7 @@ import {
   Form,
   HelperText,
   HelperTextItem,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -19,7 +20,6 @@ import {
 } from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
@@ -236,7 +236,11 @@ const MassChangeHostnameForm = ({
                       >
                         <Button
                           variant="link"
-                          icon={<InfoCircleIcon color={blueInfoColor.value} />}
+                          icon={
+                            <Icon status="info">
+                              <InfoCircleIcon />
+                            </Icon>
+                          }
                           isInline
                         >
                           {t('ai:Not changeable')}

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

@@ -1,8 +1,15 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Popover,
+  Content,
+  ContentVariants,
+  Icon,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode, UiIcon } from '../../../common/components/ui';
+import { PrismCode } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -43,7 +50,9 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <UiIcon size="sm" icon={<InfoCircleIcon />} />
+            <Icon size="sm">
+              <InfoCircleIcon />
+            </Icon>
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

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

@@ -8,13 +8,10 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-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_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';
 import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 
 export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizing'> =>
   Object.freeze({
@@ -85,7 +82,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient-unbound',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.',
       ),
@@ -94,7 +95,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known-unbound',
       title: t('ai:Available'),
       category: 'Discovery related',
-      icon: <ConnectedIcon color={blueColor.value} />,
+      icon: (
+        <Icon status="info">
+          <ConnectedIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and can be included in the cluster.',
       ),
@@ -125,7 +130,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known',
       title: t('ai:Ready'),
       category: 'Discovery related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and will be included in the cluster.',
       ),
@@ -143,7 +152,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.',
       ),
@@ -186,14 +199,22 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'installing-pending-user-action',
       title: t('ai:Pending user action'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t('ai:This host is pending user action'),
     },
     installed: {
       key: 'installed',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
     cancelled: {
@@ -208,7 +229,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'error',
       title: t('ai:Error'),
       category: 'Installation related',
-      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      icon: (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host failed its installation.'),
       withProgress: true,
     },
@@ -223,7 +248,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'resetting-pending-user-action',
       title: t('ai:Reboot required'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
       ),
@@ -238,7 +267,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'added-to-existing-cluster',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
   });

package/lib/common/components/storage/DisksTable.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+  Icon,
+} from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
@@ -12,7 +19,7 @@ import FormatDiskCheckbox, {
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon, UiIcon } from '../ui';
+import { PopoverIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 
@@ -102,7 +109,9 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </Popover>
       )}
       {'   '}
@@ -117,7 +126,9 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+            <Icon size="sm" status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
           </Popover>
         </>
       )}

package/lib/common/components/storage/StorageUtils.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
-import { TableRow } from '../hosts/AITable';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { getHostRole, getInventory, RoleCell } from '../../index';
+import { TableRow } from '../hosts/AITable';
 
 const SkipFormattingDisks = () => (
   <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
@@ -49,7 +49,9 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+              <Icon size="sm" status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </Popover>
           )}
         </>

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

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { Icon, WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,11 +12,9 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <UiIcon
-          status="danger"
-          className="wizard-nav-item-warning-icon"
-          icon={<ExclamationCircleIcon />}
-        />
+        <Icon status="danger" className="wizard-nav-item-warning-icon">
+          <ExclamationCircleIcon />
+        </Icon>
       </>
     );
   }

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import './RemovableField.css';
 import classnames from 'classnames';
-import UiIcon from '../UiIcon';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

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

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-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 { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

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

@@ -72,7 +72,7 @@ const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
+                data-testid={`input-textarea-${fieldId}-helper-text-error`}
               >
                 {errorMessage}
               </HelperTextItem>

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

@@ -28,5 +28,3 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
-
-export { default as UiIcon } from './UiIcon';

package/lib/common/config/constants.ts

@@ -53,6 +53,7 @@ export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]:
   error: t('ai:Error'),
   installed: t('ai:Installed'),
   'adding-hosts': t('ai:Adding hosts'),
+  unmonitored: t('ai:Unmonitored'),
 });
 
 export const clusterFieldLabels = (t: TFunction): { [key in string]: string } => ({
@@ -331,9 +332,6 @@ export const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
 export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
-export const NETWORK_TYPE_OVN = 'OVNKubernetes';
-export const NETWORK_TYPE_SDN = 'OpenShiftSDN';
-
 export const IPV4_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
 

package/lib/common/config/docs_links.ts

@@ -54,6 +54,8 @@ export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
   return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
+export const RED_HAT_CNI_SUPPORT_MATRIX_LINK = 'https://access.redhat.com/articles/5436171';
+
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
 //Hosts status

package/lib/common/types/index.ts

@@ -7,6 +7,7 @@ export * from './events';
 export * from './clusters';
 export * from './cpuArchitecture';
 export * from './featureSupportLevel';
+export * from './networkType';
 export * from './typescriptExtensions';
 export * from './generateIsoFields';
 export * from './errortype';

package/lib/common/types/networkType.ts

@@ -0,0 +1,37 @@
+import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+
+export type NetworkTypeKey =
+  | 'OVNKubernetes'
+  | 'OpenShiftSDN'
+  | 'CiscoACI'
+  | 'Cilium'
+  | 'Calico'
+  | 'None';
+
+export const NETWORK_TYPE_OVN: NetworkTypeKey = 'OVNKubernetes';
+export const NETWORK_TYPE_SDN: NetworkTypeKey = 'OpenShiftSDN';
+export const NETWORK_TYPE_CISCO_ACI: NetworkTypeKey = 'CiscoACI';
+export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
+export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
+export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
+
+export const NETWORK_TYPE_LABELS: Record<string, string> = {
+  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
+  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
+  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
+  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
+  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
+  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
+};
+
+export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
+  [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',
+  [NETWORK_TYPE_SDN]: 'SDN_NETWORK_TYPE',
+  [NETWORK_TYPE_CISCO_ACI]: 'CISCO_ACI_NETWORK_TYPE',
+  [NETWORK_TYPE_CILIUM]: 'CILIUM_NETWORK_TYPE',
+  [NETWORK_TYPE_CALICO]: 'CALICO_NETWORK_TYPE',
+  [NETWORK_TYPE_NONE]: 'NONE_NETWORK_TYPE',
+};
+
+export const isThirdPartyCNI = (networkType: string | undefined): boolean =>
+  !!networkType && networkType !== NETWORK_TYPE_OVN && networkType !== NETWORK_TYPE_SDN;

package/lib/common/types/ui-settings.ts

@@ -1,5 +1,4 @@
 export type UISettingsValues = {
-  addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -21,7 +21,6 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { OcmRichInputField } from '../ui/OcmFormFields';
 import OcmOpenShiftVersion from './OcmOpenShiftVersion';
 import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
-import CustomManifestCheckbox from './CustomManifestCheckbox';
 import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
@@ -35,7 +34,6 @@ import {
   ManagedDomain,
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
 import ControlPlaneNodesDropdown, {
   ControlPlaneNodesLabel,
@@ -68,7 +66,6 @@ export const OcmClusterDetailsFormFields = ({
   const { openshiftVersion, platform } = values;
   const { getCpuArchitectures } = useOpenShiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
-  const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(
     'features',
     values.openshiftVersion,
@@ -91,12 +88,10 @@ export const OcmClusterDetailsFormFields = ({
     (selectedPlatform: PlatformType) => {
       const isOracleSelected = selectedPlatform === 'external';
       if (isOracleSelected) {
-        setFieldValue('addCustomManifest', isOracleSelected, false);
-        clusterWizardContext.setCustomManifestsStep(isOracleSelected);
         setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
       }
     },
-    [clusterWizardContext, setFieldValue],
+    [setFieldValue],
   );
 
   React.useEffect(() => {
@@ -213,8 +208,6 @@ export const OcmClusterDetailsFormFields = ({
       ) : (
         <ControlPlaneNodesDropdown featureSupportLevelData={featureSupportLevelData} />
       )}
-      <CustomManifestCheckbox clusterId={cluster?.id || ''} isDisabled={platform === 'external'} />
-
       {!isSingleClusterFeatureEnabled && (
         <HostsNetworkConfigurationControlGroup
           clusterExists={clusterExists}

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.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';
 
@@ -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: