@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

package/lib/ocm/components/clusterDetail/ClusterDetail.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  Stack,
-  StackItem,
-  TextContent,
-  Text,
-  ButtonVariant,
-  GridItem,
-  Grid,
-} from '@patternfly/react-core';
+import { Stack, StackItem, Content, ButtonVariant, GridItem, Grid } from '@patternfly/react-core';
 import { ToolbarButton, Alerts, getEnabledHosts, selectOlmOperators, isSNO } from '../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterToolbar from '../clusters/ClusterToolbar';
@@ -62,9 +54,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       <StackItem>
         <Grid hasGutter>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Installation progress</Text>
-            </TextContent>
+            <Content component="h2">Installation progress</Content>
           </GridItem>
           <GridItem span={6}>
             <ClusterProgress

package/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Stack, StackItem } from '@patternfly/react-core';
 import {
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
@@ -43,41 +43,49 @@ const ClusterDetailStatusMessages = ({
     : '';
 
   return (
-    <>
+    <Stack hasGutter>
       {!isSingleClusterFeatureEnabled &&
         typeof inactiveDeletionHours === 'number' &&
         canDownloadKubeconfig(cluster.status) && (
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={
+                dateDifference > 0
+                  ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                    `deleted from Assisted Installer's service in ${dateDifference} days.`
+                  : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              }
+            />
+          </StackItem>
+        )}
+      {showAddHostsAlert && (
+        <StackItem>
           <Alert
             variant="info"
             isInline
+            data-testid="alert-add-hosts"
             title={
-              dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
-                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              <p>
+                {isClusterPlatformTypeVM(cluster)
+                  ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
+                  : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
+                <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
+                  console.redhat.com/openshift <ExternalLinkAltIcon />
+                </a>
+                .
+              </p>
             }
           />
-        )}
-      {showAddHostsAlert && (
-        <Alert
-          variant="info"
-          isInline
-          data-testid="alert-add-hosts"
-          title={
-            <p>
-              {isClusterPlatformTypeVM(cluster)
-                ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
-                : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
-              <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
-                console.redhat.com/openshift <ExternalLinkAltIcon />
-              </a>
-              .
-            </p>
-          }
-        />
+        </StackItem>
+      )}
+      {platformLink && (
+        <StackItem>
+          <PostInstallAlert link={platformLink} />
+        </StackItem>
       )}
-      {platformLink && <PostInstallAlert link={platformLink} />}
-    </>
+    </Stack>
   );
 };
 

package/lib/ocm/components/clusterDetail/ClusterDetailStatusVarieties.tsx

@@ -9,7 +9,7 @@ import {
 import { getClusterDetailId } from './utils';
 import { ClustersAPI } from '../../services/apis';
 import ClusterDetailStatusMessages from './ClusterDetailStatusMessages';
-import { Grid } from '@patternfly/react-core';
+import { Stack, StackItem } from '@patternfly/react-core';
 import { getErrorMessage } from '../../../common/utils';
 import {
   Cluster,
@@ -94,20 +94,24 @@ const ClusterDetailStatusVarieties = ({
     consoleOperator?.status === 'available' || (!consoleOperator && cluster.status === 'installed'); // Retain backwards compatibility with clusters which don't have monitored clusters
 
   return (
-    <Grid hasGutter>
+    <Stack hasGutter>
       {showClusterCredentials && (
-        <ClusterCredentials
-          cluster={cluster}
-          credentials={credentials}
-          error={!!credentialsError}
-          retry={fetchCredentials}
-          idPrefix={getClusterDetailId('cluster-creds')}
-          credentialsError={credentialsError}
-          isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
-        />
+        <StackItem className="pf-v6-u-mt-lg">
+          <ClusterCredentials
+            cluster={cluster}
+            credentials={credentials}
+            error={!!credentialsError}
+            retry={fetchCredentials}
+            idPrefix={getClusterDetailId('cluster-creds')}
+            credentialsError={credentialsError}
+            isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
+          />
+        </StackItem>
       )}
-      <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
-    </Grid>
+      <StackItem className="pf-v6-u-mt-lg">
+        <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
+      </StackItem>
+    </Stack>
   );
 };
 

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.css

@@ -1,4 +1,4 @@
 .assisted-ui-vertical-margin {
-  margin-top: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-top: var(--pf-v6-global--spacer--lg);
+  margin-bottom: var(--pf-v6-global--spacer--lg);
 }

package/lib/ocm/components/clusterDetail/ClusterInstallationError.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  GridItem,
-  Alert,
-  AlertVariant,
-  AlertActionLink,
-  TextContent,
-  Text,
-} from '@patternfly/react-core';
+import { GridItem, Alert, AlertVariant, AlertActionLink, Content } from '@patternfly/react-core';
 import { getReportIssueLink, canDownloadClusterLogs, useAlerts, toSentence } from '../../../common';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -58,14 +51,12 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         }
         isInline
       >
-        <TextContent>
-          <Text component="p">
-            {toSentence(cluster.statusInfo)}
-            <br />
-            Reset the installation process to return to the configuration and try again. Some hosts
-            may need to be re-registered by rebooting into the Discovery ISO.
-          </Text>
-        </TextContent>
+        <Content component="p">
+          {toSentence(cluster.statusInfo)}
+          <br />
+          Reset the installation process to return to the configuration and try again. Some hosts
+          may need to be re-registered by rebooting into the Discovery ISO.
+        </Content>
       </Alert>
     </GridItem>
   );

package/lib/ocm/components/clusterDetail/ClusterInstallationProgressCard.tsx

@@ -5,8 +5,8 @@ import {
   CardBody,
   CardHeader,
   CardExpandableContent,
-  Grid,
-  GridItem,
+  Stack,
+  StackItem,
 } from '@patternfly/react-core';
 import { ClusterProgress } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
@@ -36,36 +36,44 @@ const ClusterInstallationProgressCard: React.FC<{ cluster: Cluster }> = ({ clust
           Installation progress
         </Title>
         {!isCardExpanded && (
-          <div className="pf-v5-u-ml-md">
+          <div className="pf-v6-u-ml-md">
             <ClusterStatusIcon status={cluster.status} />
           </div>
         )}
       </CardHeader>
       <CardBody>
-        <ClusterProgress
-          cluster={cluster}
-          minimizedView={!isCardExpanded}
-          totalPercentage={cluster.progress?.totalPercentage || 0}
-        />
-        <ClusterDetailsButtonGroup
-          cluster={cluster}
-          credentials={clusterVarieties.credentials}
-          credentialsError={clusterVarieties.credentialsError}
-          showKubeConfig={false}
-        />
+        <Stack hasGutter>
+          <StackItem>
+            <ClusterProgress
+              cluster={cluster}
+              minimizedView={!isCardExpanded}
+              totalPercentage={cluster.progress?.totalPercentage || 0}
+            />
+          </StackItem>
+          <StackItem>
+            <ClusterDetailsButtonGroup
+              cluster={cluster}
+              credentials={clusterVarieties.credentials}
+              credentialsError={clusterVarieties.credentialsError}
+              showKubeConfig={false}
+            />
+          </StackItem>
+        </Stack>
       </CardBody>
       <CardExpandableContent>
         <CardBody>
-          <Grid hasGutter>
-            <ClusterDetailStatusVarieties
-              cluster={cluster}
-              clusterVarieties={clusterVarieties}
-              showAddHostsInfo={false}
-            />
-            <GridItem>
+          <Stack hasGutter>
+            <StackItem className="pf-v6-u-mt-lg">
+              <ClusterDetailStatusVarieties
+                cluster={cluster}
+                clusterVarieties={clusterVarieties}
+                showAddHostsInfo={false}
+              />
+            </StackItem>
+            <StackItem className="pf-v6-u-mt-lg">
               <ClusterHostsTable cluster={cluster} skipDisabled />
-            </GridItem>
-          </Grid>
+            </StackItem>
+          </Stack>
         </CardBody>
       </CardExpandableContent>
     </Card>

package/lib/ocm/components/clusterDetail/ClusterPollingErrorModal.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const defaultTitle = 'Unable to fetch the latest data';
 
@@ -14,23 +22,18 @@ const ClusterPollingErrorModal = ({
   content?: string;
 }) => {
   return (
-    <Modal
-      title={title}
-      isOpen
-      variant={ModalVariant.small}
-      showClose={false}
-      titleIconVariant="danger"
-      actions={[
+    <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+      <ModalHeader title={title} titleIconVariant="danger" />
+      <ModalBody>{content}</ModalBody>
+      <ModalFooter>
         <Button
           key="refresh"
           variant={ButtonVariant.primary}
           onClick={() => window.location.reload()}
         >
           Refresh page
-        </Button>,
-      ]}
-    >
-      {content}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterDetail/ClusterProperties.test.ts

@@ -0,0 +1,215 @@
+import { test, describe, expect } from 'vitest';
+import { getStackTypeLabel } from './ClusterProperties';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+
+const createCluster = (overrides: Partial<Cluster> = {}): Cluster =>
+  ({
+    id: 'test-cluster',
+    name: 'test-cluster',
+    kind: 'Cluster',
+    href: '/api/assisted-install/v2/clusters/test-cluster',
+    openshiftVersion: '4.11',
+    status: 'ready',
+    statusInfo: 'Cluster is ready',
+    machineNetworks: [],
+    clusterNetworks: [],
+    serviceNetworks: [],
+    ...overrides,
+  } as Cluster);
+
+const createMachineNetwork = (cidr: string) => ({ cidr, clusterId: 'test' });
+const createClusterNetwork = (cidr: string, hostPrefix: number) => ({
+  cidr,
+  hostPrefix,
+  clusterId: 'test',
+});
+const createServiceNetwork = (cidr: string) => ({ cidr, clusterId: 'test' });
+
+describe('getStackTypeLabel', () => {
+  describe('OCP < 4.12 (legacy behavior)', () => {
+    test('returns "Dual-stack" for valid dual stack with IPv4 primary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "IPv4" for single stack', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for IPv6 primary (invalid for OCP < 4.12)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+
+  describe('OCP >= 4.12 (new behavior)', () => {
+    test('returns "Dual-stack" for IPv4 primary and IPv6 secondary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "Dual-stack" for IPv6 primary and IPv4 secondary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "IPv4" for IPv6 primary and IPv6 secondary (not dual-stack)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('2001:db9::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('fd02::/48', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('fd03::/112'), createServiceNetwork('fd04::/112')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for IPv4 primary and IPv4 secondary (not dual-stack)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('10.0.0.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('172.16.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('172.31.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for single stack', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles undefined openshiftVersion', () => {
+      const cluster = createCluster({
+        openshiftVersion: undefined,
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('handles empty networks', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [],
+        clusterNetworks: [],
+        serviceNetworks: [],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('handles undefined networks', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: undefined,
+        clusterNetworks: undefined,
+        serviceNetworks: undefined,
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+});

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridItem, Text, TextContent } from '@patternfly/react-core';
+import { GridItem, Content } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
@@ -78,9 +78,7 @@ const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesP
     <>
       {!externalMode && (
         <GridItem>
-          <TextContent>
-            <Text component="h2">{t('ai:Cluster Details')}</Text>
-          </TextContent>
+          <Content component="h2">{t('ai:Cluster Details')}</Content>
         </GridItem>
       )}
       <GridItem md={6} data-testid="cluster-details">

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.css

@@ -1,4 +1,4 @@
-.cluster-summary-expandable .pf-v5-c-expandable-section__toggle {
+.cluster-summary-expandable .pf-v6-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.tsx

@@ -19,7 +19,7 @@ const ClusterSummaryExpandable = ({ cluster }: ClusterSummaryExpandableProps) =>
       className="cluster-summary-expandable"
       id="cluster-summary-expandable"
     >
-      <div className="pf-v5-u-pl-md pf-v5-u-pt-md">
+      <div className="pf-v6-u-pl-md pf-v6-u-pt-md">
         <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
         <ReviewSummaryContent cluster={cluster} />
       </div>

package/lib/ocm/components/clusterDetail/ClusterUpdateErrorModal.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const ClusterUpdateErrorModal = () => (
-  <Modal
-    title="Unable to update cluster"
-    isOpen
-    variant={ModalVariant.small}
-    showClose={false}
-    titleIconVariant="danger"
-    actions={[
+  <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+    <ModalHeader title="Unable to update cluster" titleIconVariant="danger" />
+    <ModalBody>
+      The service is down, undergoing maintenance, or experiencing another issue.
+    </ModalBody>
+    <ModalFooter>
       <Button
         key="refresh"
         variant={ButtonVariant.primary}
         onClick={() => window.location.reload()}
       >
         Refresh page
-      </Button>,
-    ]}
-  >
-    The service is down, undergoing maintenance, or experiencing another issue.
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.css

@@ -1,4 +1,4 @@
-.host-inventory-expandable .pf-v5-c-expandable-section__toggle {
+.host-inventory-expandable .pf-v6-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.tsx

@@ -21,7 +21,7 @@ const ExpandableSectionTitle = ({
 }) => (
   <span>
     {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-v5-u-ml-sm">{icon}</span>}
+    {icon && <span className="pf-v6-u-ml-sm">{icon}</span>}
   </span>
 );
 

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UiIcon, getOpenshiftVersionText } from '../../../common';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -10,19 +10,17 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
 
   const hint = (
-    <TextContent>
-      <Text component={TextVariants.p}>
-        {t('ai:Please note that this version is not production-ready.')}
-      </Text>
-    </TextContent>
+    <Content component={ContentVariants.p}>
+      {t('ai:Please note that this version is not production-ready.')}
+    </Content>
   );
   return (
-    <Text component="p">
+    <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
         <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
       </Popover>
-    </Text>
+    </Content>
   );
 };