@openshift-assisted/ui-lib 2.14.5-cim → 2.15.0-cim

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

@@ -1,19 +1,18 @@
 import {
   Badge,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
   Grid,
   GridItem,
+  MenuToggle,
+  MenuToggleElement,
   SearchInput,
   Split,
   SplitItem,
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
-import {
-  Select,
-  SelectGroup,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import * as React from 'react';
 import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
@@ -94,6 +93,19 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
   const categoryLabels = getCategoryLabels(t);
 
+  const onStatusFilterToggle = () => setStatusFilterOpen(!statusFilterOpen);
+  const onStatusFilterSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    if (!statusFilter?.includes(value as string)) {
+      const newItems = (statusFilter ? [...statusFilter, value] : [value]) as string[];
+      setStatusFilter(newItems);
+    } else {
+      setStatusFilter(statusFilter?.filter((f) => f !== value));
+    }
+  };
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
@@ -118,34 +130,34 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           deleteChipGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
-          <Select
-            variant={SelectVariant.checkbox}
-            aria-label={t('ai:Status')}
-            onToggle={(_event, value) => setStatusFilterOpen(value)}
-            onSelect={(e, value) => {
-              // eslint-disable-next-line
-              if ((e.target as any).checked) {
-                const newItems = (statusFilter ? [...statusFilter, value] : [value]) as string[];
-                setStatusFilter(newItems);
-              } else {
-                setStatusFilter(statusFilter?.filter((f) => f !== value));
-              }
-            }}
-            selections={statusFilter}
+          <Dropdown
             isOpen={statusFilterOpen}
-            placeholderText={t('ai:Status')}
-            toggleIcon={<FilterIcon />}
+            onSelect={onStatusFilterSelect}
+            onOpenChange={onStatusFilterToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isFullWidth
+                onClick={onStatusFilterToggle}
+                isExpanded={statusFilterOpen}
+                icon={<FilterIcon />}
+              >
+                {t('ai:Status')}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
           >
             {[
               <Grid key="statuses" hasGutter className="table-toolbar__dropdown">
                 {Object.keys(filterStatuses).map((category) => (
                   <GridItem key={category} span={4}>
-                    <SelectGroup label={categoryLabels[category as HostStatusDef['category']]}>
+                    <DropdownGroup label={categoryLabels[category as HostStatusDef['category']]}>
                       {Object.keys(filterStatuses[category]).map((label) => (
-                        <SelectOption
+                        <DropdownItem
+                          hasCheckbox
                           key={label}
                           value={label}
-                          isChecked={statusFilter?.includes(label)}
+                          isSelected={statusFilter?.includes(label)}
                         >
                           <Split hasGutter>
                             <SplitItem>{label}</SplitItem>
@@ -153,14 +165,14 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
                               <Badge isRead>{statusCount[label] || 0}</Badge>
                             </SplitItem>
                           </Split>
-                        </SelectOption>
+                        </DropdownItem>
                       ))}
-                    </SelectGroup>
+                    </DropdownGroup>
                   </GridItem>
                 ))}
               </Grid>,
             ]}
-          </Select>
+          </Dropdown>
         </ToolbarFilter>
       </ToolbarItem>
     </TableToolbar>

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -74,23 +74,26 @@ const CpuArchitectureDropdown = ({
   return !isDisabled ? (
     <FormGroup
       isInline
-      fieldId={fieldId}
+      id={`form-control__${fieldId}`}
       label={t('ai:CPU architecture')}
       isRequired
       name={'cpuArchiteture'}
     >
       <Dropdown
+        id={`${fieldId}-dropdown`}
         toggle={(toggleRef) => (
           <MenuToggle
+            id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-u-w-100"
+            className="pf-v5-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>
         )}
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
+        onOpenChange={() => setCpuArchOpen(!cpuArchOpen)}
       >
         {dropdownItems}
       </Dropdown>

package/lib/cim/components/featureSupportLevels/ACMFeatureSupportLevelProvider.tsx

@@ -9,9 +9,10 @@ import {
 import { ClusterImageSetK8sResource } from '../../types';
 import { featureSupportLevelsACM } from '../../config/constants';
 import { getFeatureDisabledReason, isFeatureSupported } from './featureStateUtils';
-import { getOCPVersions, getVersionFromReleaseImage, getMajorMinorVersion } from '../helpers';
+import { getOCPVersions, getVersionFromReleaseImage } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
+import { getMajorMinorVersion } from '../../../common/utils';
 
 export type ACMFeatureSupportLevelProvider = PropsWithChildren<{
   clusterImages: ClusterImageSetK8sResource[];

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

@@ -8,6 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
+import { getMajorMinorVersion } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -120,11 +121,6 @@ export const getSelectedVersion = (
 export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string | undefined =>
   cv?.status?.history?.[0]?.version || cv?.spec?.desiredUpdate?.version;
 
-export const getMajorMinorVersion = (version = '') => {
-  const match = /[0-9].[0-9][0-9]?/g.exec(version);
-  return match?.[0] || '';
-};
-
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
 ): 'OVNKubernetes' | 'OpenShiftSDN' =>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

package/lib/cim/index.ts

@@ -5,6 +5,7 @@ export * from './components';
 // re-export selected from common
 export * as Reducers from '../common/reducers';
 export * from '../common/api';
+export * from '../common/utils';
 export * from '../common/types';
 export * from '../common/features';
 

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

@@ -0,0 +1,18 @@
+import { client } from '../axiosClient';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+
+const BundleAPI = {
+  makeBaseURI() {
+    return `/v2/operators/bundles`;
+  },
+
+  list() {
+    return client.get<Bundle[]>(`${BundleAPI.makeBaseURI()}`);
+  },
+
+  listOperatorsForBundle(bundleName: string) {
+    return client.get<string[]>(`${BundleAPI.makeBaseURI()}?bundle_name=${bundleName}`);
+  },
+};
+
+export default BundleAPI;

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

@@ -239,6 +239,12 @@ const ClustersAPI = {
       params,
     );
   },
+
+  updateInstallConfig(clusterId: Cluster['id'], config: string) {
+    return client.patch(`${ClustersAPI.makeBaseURI(clusterId)}/install-config`, config, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  },
 };
 
 export default ClustersAPI;

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

@@ -0,0 +1,13 @@
+import { client } from '../axiosClient';
+
+const OperatorsAPI = {
+  makeBaseURI() {
+    return `/v2/supported-operators`;
+  },
+
+  list() {
+    return client.get<string[]>(`${OperatorsAPI.makeBaseURI()}`);
+  },
+};
+
+export default OperatorsAPI;

package/lib/common/api/index.ts

@@ -1,2 +1,3 @@
 export * from './axiosClient';
 export * from './utils';
+export * from './assisted-service';

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
@@ -55,29 +62,35 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id as string;
-    setValue(toNumber(val));
+  const onControlPlaneSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    setValue(toNumber(value));
     setControlPlanelOpen(false);
   };
 
   return !isDisabled ? (
     <FormGroup isInline fieldId={fieldId} label={t('ai:Number of control plane nodes')} isRequired>
       <Dropdown
-        toggle={
-          <DropdownToggle
-            onToggle={() => setControlPlanelOpen(!controlPlanelOpen)}
-            className="pf-u-w-100"
-          >
-            {selectedValue ? selectedValue : '3'}
-          </DropdownToggle>
-        }
-        name="controlPlaneCount"
         isOpen={controlPlanelOpen}
         onSelect={onControlPlaneSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+        onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            className="pf-v5-u-w-100"
+            ref={toggleRef}
+            isFullWidth
+            onClick={() => setControlPlanelOpen(!controlPlanelOpen)}
+            isExpanded={controlPlanelOpen}
+          >
+            {selectedValue ? selectedValue : '3'}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField

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

@@ -26,6 +26,7 @@ export type DownloadISOProps = {
   onClose: () => void;
   onReset?: () => void;
   docVersion?: string;
+  updateTagsForCiscoIntersight?: () => void;
 };
 
 const DownloadIso = ({
@@ -36,9 +37,16 @@ const DownloadIso = ({
   hasDHCP,
   isSNO = false,
   docVersion,
+  updateTagsForCiscoIntersight,
 }: DownloadISOProps) => {
   const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
   const { t } = useTranslation();
+
+  const openCiscoIntersightHostsLink = (downloadUrl: string) => {
+    updateTagsForCiscoIntersight ? updateTagsForCiscoIntersight() : '';
+    window.open(getCiscoIntersightLink(downloadUrl), '_blank', 'noopener');
+  };
+
   return (
     <>
       <ModalBoxBody>
@@ -66,7 +74,7 @@ const DownloadIso = ({
               icon={<ExternalLinkAltIcon />}
               iconPosition="right"
               isInline
-              onClick={() => window.open(getCiscoIntersightLink(downloadUrl), '_blank', 'noopener')}
+              onClick={() => openCiscoIntersightHostsLink(downloadUrl)}
             >
               {t('ai:Add hosts from Cisco Intersight')}
             </Button>

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { GridItem, ClipboardCopy, clipboardCopyFunc, Button, Alert } from '@patternfly/react-core';
+import {
+  GridItem,
+  ClipboardCopy,
+  clipboardCopyFunc,
+  Button,
+  Alert,
+  TextInput,
+} from '@patternfly/react-core';
 import { Credentials, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { LoadingState, ErrorState } from '../../components/ui/uiState';
 import { DetailList, DetailItem } from '../../components/ui/DetailList';
@@ -98,7 +105,10 @@ const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
         )}
         {credentials.username && (
           <>
-            <DetailItem title="Username" value={credentials.username} />
+            <DetailItem
+              title={t('ai:Username')}
+              value={<TextInput value={credentials.username} readOnlyVariant="default" />}
+            />
             <DetailItem
               title={t('ai:Password')}
               value={

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

@@ -50,10 +50,7 @@ const ClusterProgressItems = ({
           </GridItem>
           <RenderIf condition={olmOperators.length > 0}>
             <GridItem span={3}>
-              <OperatorsProgressItem
-                operators={olmOperators}
-                openshiftVersion={cluster.openshiftVersion}
-              />
+              <OperatorsProgressItem operators={olmOperators} />
             </GridItem>
           </RenderIf>
         </Grid>

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

@@ -9,15 +9,13 @@ import { global_success_color_100 as okColor } from '@patternfly/react-tokens/di
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 import {
-  Cluster,
   MonitoredOperator,
   MonitoredOperatorsList,
   OperatorStatus,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { operatorLabelsCim, OperatorName } from '../../config';
 import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useFeatureSupportLevel } from '../featureSupportLevels';
+import { useOperatorSpecs } from '../operators/operatorSpecs';
 
 import './OperatorsProgressItem.css';
 
@@ -74,16 +72,15 @@ export function getOperatorsIcon(status: OperatorStatus | 'pending') {
 
 type OperatorListProps = {
   operators: MonitoredOperatorsList;
-  openshiftVersion: Cluster['openshiftVersion'];
 };
 
 type OperatorsPopoverProps = OperatorListProps & {
   children: React.ComponentProps<typeof Popover>['children'];
 };
 
-const OperatorsPopover = ({ operators, openshiftVersion, children }: OperatorsPopoverProps) => {
+const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const featureSupportLevel = useFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
 
   return (
     <Popover
@@ -95,10 +92,7 @@ const OperatorsPopover = ({ operators, openshiftVersion, children }: OperatorsPo
             if (operator.status === 'available') {
               status = 'installed';
             }
-            const name =
-              operatorLabelsCim(t, openshiftVersion, featureSupportLevel)[
-                operator.name as OperatorName
-              ] || operator.name;
+            const name = opSpecs[operator.name || '']?.title || operator.name;
             return (
               <ListItem key={operator.name} title={operator.statusInfo}>
                 {name} {status}
@@ -115,14 +109,14 @@ const OperatorsPopover = ({ operators, openshiftVersion, children }: OperatorsPo
   );
 };
 
-const OperatorsProgressItem = ({ operators, openshiftVersion }: OperatorListProps) => {
+const OperatorsProgressItem = ({ operators }: OperatorListProps) => {
   const { t } = useTranslation();
   const icon = getOperatorsIcon(getAggregatedStatus(operators));
   const label = getOperatorsLabel(operators, t);
   return (
     <ClusterProgressItem icon={icon}>
       <>
-        <OperatorsPopover operators={operators} openshiftVersion={openshiftVersion}>
+        <OperatorsPopover operators={operators}>
           <Button variant={ButtonVariant.link} isInline data-testid="operators-progress-item">
             {t('ai:Operators')}
           </Button>

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

@@ -3,3 +3,4 @@ export { default as ClusterProgress } from './ClusterProgress';
 export { default as ClusterCredentials } from './ClusterCredentials';
 export { default as KubeconfigDownload } from './KubeconfigDownload';
 export { default as PostInstallAlert } from './PostInstallAlert';
+export { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WizardBody, WizardBodyProps } from '@patternfly/react-core/deprecated';
+import { WizardBody } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
 import './ClusterWizardStep.css';
@@ -14,13 +14,11 @@ export const ClusterWizardStep = ({
   footer,
   children,
 }: React.PropsWithChildren<ClusterWizardStepProps>) => {
-  // activeStep is required, but we're not passing it. Using the cast to avoid TS error
-  const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (
     <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
       <div className={css('pf-v5-c-wizard__inner-wrap')}>
         {navigation}
-        <WizardBody aria-labelledby="step-id" hasNoBodyPadding={false} activeStep={activeStep}>
+        <WizardBody aria-labelledby="step-id" hasNoPadding={false}>
           {children}
         </WizardBody>
       </div>

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -16,6 +16,7 @@ import {
 } from '../ui';
 import { ClusterDetailsValues } from './types';
 import { FeatureSupportLevelData } from '../featureSupportLevels';
+import toNumber from 'lodash-es/toNumber';
 
 const emptyTangServers = (): TangServer[] => {
   return [
@@ -119,20 +120,20 @@ export const getClusterDetailsValidationSchema = ({
         ? baseDomainValidationSchema.required('Required')
         : dnsNameValidationSchema.required('Required'),
       pullSecret: pullSecretValidationSchema.required('Required.'),
-      SNODisclaimer: Yup.boolean().when(['highAvailabilityMode', 'openshiftVersion'], {
+      SNODisclaimer: Yup.boolean().when(['controlPlaneCount', 'openshiftVersion'], {
         // The disclaimer is required only if SNO is enabled and SNO feature is not fully supported in that version
         is: (
-          highAvailabilityMode: Cluster['highAvailabilityMode'],
+          controlPlaneCount: Cluster['controlPlaneCount'],
           openshiftVersion: Cluster['openshiftVersion'],
         ) => {
           const selectedVersion = (ocpVersions || []).find((v) => v.value === openshiftVersion);
+          const versionToUse = selectedVersion?.value ?? openshiftVersion;
           if (featureSupportLevels) {
-            return highAvailabilityMode === 'None' && selectedVersion && featureSupportLevels
-              ? featureSupportLevels.getFeatureSupportLevel(selectedVersion.value, 'SNO') ===
-                  'dev-preview'
+            return toNumber(controlPlaneCount) === 1 && versionToUse && featureSupportLevels
+              ? featureSupportLevels.getFeatureSupportLevel(versionToUse, 'SNO') === 'dev-preview'
               : false;
           } else {
-            return highAvailabilityMode === 'None' && selectedVersion && values.isSNODevPreview;
+            return toNumber(controlPlaneCount) === 1 && versionToUse && values.isSNODevPreview;
           }
         },
         then: () =>

package/lib/common/components/clusterWizard/types.ts

@@ -69,7 +69,9 @@ export type ValidationActionLinkProps<S extends string> = {
   wizardStepNames: { [key in S]: string };
 };
 
-export type ClusterOperatorProps = Pick<Cluster, 'openshiftVersion'> & { clusterId: Cluster['id'] };
+export type ClusterOperatorProps = {
+  cluster: Cluster;
+};
 
 export type ItemDropdown = {
   label: string;

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

@@ -94,7 +94,7 @@ export const AITableMemo = React.memo(
                     </Td>
                   ))}
 
-                  {row.actions && (
+                  {!!row.actions?.length && (
                     <Td isActionCell>
                       <ActionsColumn
                         items={row.actions}

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

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import {
   Disk,
   DiskRole as DiskRoleValue,
@@ -83,7 +88,7 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       const asyncFunc = async () => {
         if (event?.currentTarget.id) {
           setDisabled(true);
@@ -98,28 +103,29 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   );
 
   const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t);
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        className="pf-v5-c-button pf-m-link pf-m-inline"
-      >
-        {currentRoleLabel}
-      </DropdownToggle>
-    ),
-    [setOpen, currentRoleLabel, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="plainText"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+    >
+      {currentRoleLabel}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
-    />
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, 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';
@@ -60,21 +60,27 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
     if (showFailure && validation.status === 'failure') {
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
-          <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showPending && validation.status === 'pending') {
       return (
         <ValidationPopover validation={validation} actions={pendingActions}>
-          <PendingIcon /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PendingIcon /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showSuccess && validation.status === 'success') {
       return (
         <>
-          <CheckCircleIcon color={successColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <CheckCircleIcon color={successColor.value} /> {children}
+          </Flex>
         </>
       );
     }