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

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

@@ -1,15 +1,9 @@
 import React from 'react';
-import {
-  Popover,
-  Button,
-  Text,
-  TextContent,
-  FlexItem,
-  Flex,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } 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';
+
 import hdate from 'human-date';
 
 import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
@@ -27,11 +21,9 @@ import OcpConsoleNodesSectionLink from './OcpConsoleNodesSectionLink';
 import { toSentence } from '../ui/table/utils';
 import { HostStatusProps } from './types';
 import { UpdateDay2ApiVipPropsType } from './HostValidationGroups';
-import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { hostStatus } from './status';
 import { getApproveNodesInClLink } from '../../config';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 const getTitleWithProgress = (host: Host, status: HostStatusProps['status']) => {
   const stages = getHostProgressStages(host);
@@ -44,6 +36,7 @@ type HostStatusPopoverContentProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
   autoCSR?: boolean;
   additionalPopoverContent?: React.ReactNode;
+  additionalBMHInfo?: React.ReactNode;
   openshiftVersion?: string;
 };
 
@@ -51,6 +44,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   details,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
   ...props
 }) => {
@@ -59,38 +53,38 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   const { t } = useTranslation();
   if (['installing-in-progress'].includes(status)) {
     return (
-      <TextContent>
+      <Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['error', 'cancelled', 'installing-pending-user-action'].includes(status)) {
     return (
-      <TextContent>
-        <Text>
+      <Content>
+        <Content component="p">
           {details}
           <br />
           {toSentence(statusInfo)}
-        </Text>
+        </Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['installed'].includes(status)) {
     return (
-      <TextContent>
-        <Text>{details}</Text>
+      <Content>
+        <Content component="p">{details}</Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['added-to-existing-cluster'].includes(status)) {
     return (
-      <TextContent>
-        <Text>{details}</Text>
+      <Content>
+        <Content component="p">{details}</Content>
         {!autoCSR && (
           <>
             <br />
@@ -107,7 +101,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
           </>
         )}
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
@@ -125,22 +119,23 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   ) {
     // No additional error messages shown
     return (
-      <TextContent>
-        <Text>{details}</Text>
-      </TextContent>
+      <Content>
+        <Content component="p">{details}</Content>
+      </Content>
     );
   }
 
   return (
     <Stack hasGutter>
       {additionalPopoverContent}
+      {details && (
+        <StackItem>
+          <Content component="p">{details}</Content>
+        </StackItem>
+      )}
       <StackItem>
-        {details && (
-          <TextContent>
-            <Text>{details}</Text>
-          </TextContent>
-        )}
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
+        {additionalBMHInfo}
       </StackItem>
     </Stack>
   );
@@ -189,6 +184,7 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    additionalBMHInfo?: React.ReactNode;
     openshiftVersion?: string;
   };
 
@@ -246,6 +242,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
   zIndex,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
 }) => {
   const [keepOnOutsideClick, onValidationActionToggle] = React.useState(false);
@@ -271,12 +268,17 @@ const HostStatus: React.FC<HostStatusProps> = ({
     zIndex,
     autoCSR,
     additionalPopoverContent,
+    additionalBMHInfo,
     openshiftVersion,
   };
 
   const hostIcon = getHostStatusIcon(icon, host.progress, status);
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+      flexWrap={{ default: 'nowrap' }}
+    >
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'
@@ -294,8 +296,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
         {children && <FlexItem>{children}</FlexItem>}
         {sublabel && (
           <FlexItem
-            className="pf-v5-u-font-size-xs"
-            style={{ marginTop: 'calc(-1 * var(--pf-v5-l-flex--spacer--xs))' }}
+            className="pf-v6-u-font-size-xs"
+            style={{ marginTop: 'calc(-1 * var(--pf-v6-l-flex--spacer--xs))' }}
           >
             <WithHostStatusPopover {...popoverProps}>{sublabel}</WithHostStatusPopover>
           </FlexItem>

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

@@ -1,4 +1,4 @@
 .host-validation-groups__validation-group {
-  margin-top: var(--pf-v5-global--spacer--md) !important;
-  margin-bottom: var(--pf-v5-global--spacer--sm) !important;
+  margin-top: var(--pf-v6-global--spacer--md) !important;
+  margin-bottom: var(--pf-v6-global--spacer--sm) !important;
 }

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

@@ -1,7 +1,7 @@
 import React, { Fragment, ReactElement } from 'react';
 import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { 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 { 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';
@@ -67,7 +67,10 @@ const ValidationsAlert = ({
       <ul>
         {validations.map((v) => (
           <li key={v.id}>
-            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;
+            <span className="pf-v6-u-font-weight-bold">
+              {hostValidationLabels(t)[v.id] || v.id}:
+            </span>
+            &nbsp;
             {toSentence(v.message.replace(/\\n/, ' '))}{' '}
             {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
           </li>
@@ -310,9 +313,7 @@ export const HostValidationGroups = ({
         return (
           <Fragment key={groupName}>
             <Level className="host-validation-groups__validation-group">
-              <LevelItem>
-                <strong>{groupLabel}</strong>
-              </LevelItem>
+              <LevelItem className="pf-v6-u-font-weight-bold">{groupLabel}</LevelItem>
               <LevelItem>{getValidationGroupState()}</LevelItem>
             </Level>
             {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+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';
@@ -43,7 +43,7 @@ const Hostname: React.FC<HostnameProps> = ({
   const body = (
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
-        <FlexItem className={'pf-v5-u-mr-xs'}>
+        <FlexItem className={'pf-v6-u-mr-xs'}>
           <ExclamationTriangleIcon color={warningColor.value} />
         </FlexItem>
       )}
@@ -60,7 +60,7 @@ const Hostname: React.FC<HostnameProps> = ({
       <Popover
         headerContent={
           <Flex alignItems={{ default: 'alignItemsCenter' }}>
-            <FlexItem className={'pf-v5-u-mr-xs'}>
+            <FlexItem className={'pf-v6-u-mr-xs'}>
               <ExclamationTriangleIcon color={warningColor.value} />
             </FlexItem>
             <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>

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

@@ -1,13 +1,13 @@
 .host-table-alerts {
-  padding-top: var(--pf-v5-global--spacer--lg) !important;
+  padding-top: var(--pf-v6-global--spacer--lg) !important;
 }
 
-.hosts-table .pf-v5-c-dropdown__toggle-text {
-  color: var(--pf-v5-global--Color--100) !important;
+.hosts-table .pf-v6-c-dropdown__toggle-text {
+  color: var(--pf-v6-global--Color--100) !important;
 }
 
 .hosts-table button {
-  font-size: var(--pf-v5-c-table-cell--FontSize);
+  font-size: var(--pf-v6-c-table-cell--FontSize);
 }
 
 .hosts-table {

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

@@ -1,6 +1,6 @@
 .hostname-preview {
-  background-color: var(--pf-v5-global--BackgroundColor--200);
-  padding: var(--pf-v5-global--spacer--sm);
+  background-color: var(--pf-v6-global--BackgroundColor--200);
+  padding: var(--pf-v6-global--spacer--sm);
   max-height: 10rem;
   overflow-y: auto;
 }

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

@@ -3,12 +3,14 @@ import {
   Button,
   ButtonType,
   ButtonVariant,
+  Content,
   Form,
   HelperText,
   HelperTextItem,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Popover,
   Split,
   SplitItem,
@@ -17,7 +19,7 @@ import {
 } from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { 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';
 
@@ -56,6 +58,7 @@ const getNewHostnames = (
     const hostnameRes = {
       newHostname: changeEnabled ? templateToHostname(index, values) : undefined,
       reason: changeEnabled ? undefined : reason,
+      oldHostname: h.requestedHostname,
     };
     if (changeEnabled) {
       index++;
@@ -177,12 +180,12 @@ const MassChangeHostnameForm = ({
   const { t } = useTranslation();
   return (
     <Form onSubmit={handleSubmit}>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <div>{t('ai:Rename hostnames using the custom template:')}</div>
             <div>
-              <strong>{`{{n}}`}</strong> {t('ai:to add a number.')}
+              <span className="pf-v6-u-font-weight-bold">{`{{n}}`}</span> {t('ai:to add a number.')}
             </div>
           </StackItem>
           <StackItem>
@@ -193,7 +196,10 @@ const MassChangeHostnameForm = ({
               richValidationMessages={hostnameValidationMessages(t)}
             />
             <HelperText>
-              <HelperTextItem variant="indeterminate">
+              <HelperTextItem
+                variant="indeterminate"
+                data-testid="mass-change-hostname-helper-text"
+              >
                 {t('ai:For example: host-{{n}}', {
                   interpolation: { suffix: '###', prefix: '###' },
                 })}
@@ -202,44 +208,48 @@ const MassChangeHostnameForm = ({
           </StackItem>
           <StackItem>
             {t('ai:Preview')}
-            <div className="hostname-preview">
-              {selectedHosts.map((h, index) => {
-                const { newHostname, reason } = newHostnames[index];
-                return (
-                  <Split key={h.id || index} hasGutter>
-                    <SplitItem className="hostname-column">
-                      <div className="hostname-column__text">
-                        <strong>{getHostname(h)}</strong>
-                      </div>
-                    </SplitItem>
-                    <SplitItem>
-                      <div>
-                        <strong>{'>'}</strong>
-                      </div>
-                    </SplitItem>
-                    <SplitItem isFilled>
-                      {reason ? (
-                        <Popover
-                          aria-label={t('ai:Cannot change hostname popover')}
-                          headerContent={<div>{t('ai:Hostname cannot be changed')}</div>}
-                          bodyContent={<div>{reason}</div>}
+            <Split className="hostname-preview" hasGutter>
+              <SplitItem className="hostname-column">
+                {newHostnames.map((host, i) => (
+                  <Content
+                    className="hostname-column__text pf-v6-u-font-weight-bold"
+                    key={`old-hostname-${i}`}
+                  >
+                    {host.oldHostname}
+                  </Content>
+                ))}
+              </SplitItem>
+              <SplitItem>
+                {newHostnames.map((_, i) => (
+                  <Content key={`divider-${i}`} className="pf-v6-u-font-weight-bold">
+                    {'>'}
+                  </Content>
+                ))}
+              </SplitItem>
+              <SplitItem>
+                {newHostnames.map((host, i) => (
+                  <div key={`new-hostname-${i}`}>
+                    {host.reason ? (
+                      <Popover
+                        aria-label={t('ai:Cannot change hostname popover')}
+                        headerContent={<div>{t('ai:Hostname cannot be changed')}</div>}
+                        bodyContent={<div>{host.reason}</div>}
+                      >
+                        <Button
+                          variant="link"
+                          icon={<InfoCircleIcon color={blueInfoColor.value} />}
+                          isInline
                         >
-                          <Button
-                            variant="link"
-                            icon={<InfoCircleIcon color={blueInfoColor.value} />}
-                            isInline
-                          >
-                            {t('ai:Not changeable')}
-                          </Button>
-                        </Popover>
-                      ) : (
-                        newHostname || t('ai:New hostname will appear here...')
-                      )}
-                    </SplitItem>
-                  </Split>
-                );
-              })}
-            </div>
+                          {t('ai:Not changeable')}
+                        </Button>
+                      </Popover>
+                    ) : (
+                      host.newHostname || t('ai:New hostname will appear here...')
+                    )}
+                  </div>
+                ))}
+              </SplitItem>
+            </Split>
           </StackItem>
           <StackItem>
             <ModalProgress
@@ -249,8 +259,8 @@ const MassChangeHostnameForm = ({
             />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="submit"
           type={ButtonType.submit}
@@ -261,7 +271,7 @@ const MassChangeHostnameForm = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={isSubmitting}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Form>
   );
 };
@@ -295,13 +305,12 @@ const MassChangeHostnameModal = ({
   return (
     <Modal
       aria-label={t('ai:Change hostnames dialog')}
-      title={t('ai:Change hostnames')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-change-hostname-modal"
       variant="small"
     >
+      <ModalHeader title={t('ai:Change hostnames')} />
       <Formik
         initialValues={initialValues}
         validate={withTemplate(

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

@@ -3,8 +3,9 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -58,15 +59,13 @@ const MassDeleteHostModal = ({
   return (
     <Modal
       aria-label={t('ai:Remove hosts dialog')}
-      title={t('ai:Remove hosts?')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-delete-modal"
       variant="medium"
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Remove hosts?')} titleIconVariant="warning" />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{t('ai:All of the listed hosts will be removed.')}</StackItem>
           <StackItem>{children}</StackItem>
@@ -74,8 +73,8 @@ const MassDeleteHostModal = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => void onClick()}
           isDisabled={progress !== null}
@@ -86,7 +85,7 @@ const MassDeleteHostModal = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -14,13 +14,14 @@ const OcpConsoleNodesSectionLink: React.FC<{
   }
   return (
     <Button
+      icon={<ExternalLinkAltIcon />}
       variant={ButtonVariant.link}
       onClick={() =>
         window.open(getOcpConsoleNodesPage(ocpConsoleUrl), '_blank', 'noopener noreferrer')
       }
       id={id}
     >
-      {title} <ExternalLinkAltIcon />
+      {title}
     </Button>
   );
 };

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

@@ -6,6 +6,6 @@
   padding: 0;
 }
 
-.table-toolbar .pf-v5-c-toolbar__content {
+.table-toolbar .pf-v6-c-toolbar__content {
   padding: 0;
 }

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

@@ -80,6 +80,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           onClick={onActionsToggle}
           isExpanded={actionsOpen}
           isDisabled={isActionsDisabled}
+          data-testid="actions-dropdown-toggle"
         >
           {t('ai:Actions')}
         </MenuToggle>
@@ -100,20 +101,19 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           isFullWidth
           onClick={onSelectToggle}
           isExpanded={selectOpen}
-          splitButtonOptions={{
-            items: [
-              <MenuToggleCheckbox
-                id="select-checkbox"
-                key="select-checkbox"
-                aria-label="Select all"
-                onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
-                isChecked={isChecked}
-              >
-                {selectedIDs.length} {t('ai:selected')}
-              </MenuToggleCheckbox>,
-            ],
-          }}
-        />
+          data-testid="select-dropdown-toggle"
+        >
+          <MenuToggleCheckbox
+            id="select-checkbox"
+            key="select-checkbox"
+            aria-label="Select all"
+            onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
+            isChecked={isChecked}
+            data-testid="select-checkbox"
+          >
+            {selectedIDs.length} {t('ai:selected')}
+          </MenuToggleCheckbox>
+        </MenuToggle>
       )}
       isOpen={selectOpen}
     >

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

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Popover,
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover, Content, ContentVariants } 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';
@@ -15,18 +8,18 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 export const VMRebootConfigurationContent = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={TextVariants.p}>
+    <Content>
+      <Content component={ContentVariants.p}>
         {t(
           'ai:Your libvirt virtual machines should be configured to restart automatically after a reboot. You can check this by running:',
         )}
-      </Text>
+      </Content>
       <PrismCode code="virsh dumpxml <name> | grep on_reboot" />
-      <Text component={TextVariants.p}>{t('ai:And verify that this is the output:')}</Text>
+      <Content component={ContentVariants.p}>{t('ai:And verify that this is the output:')}</Content>
       <PrismCode code="<on_reboot>restart</on_reboot>" />
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         {t('ai:If not, please start your VMs with the following configuration:')}
-      </Text>
+      </Content>
       <PrismCode code="--events on_reboot=restart" />
       <Trans
         t={t}
@@ -35,10 +28,10 @@ export const VMRebootConfigurationContent = () => {
         values={{ executionCommand: 'virt-install' }}
       />
       <PrismCode code="virt-install --wait -1 <rest of the command>" />
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         {t('ai:Otherwise, the VMs will not be able to reboot during the installation process.')}
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 
@@ -46,7 +39,7 @@ const VMRebootConfigurationInfo = () => {
   const { t } = useTranslation();
 
   return (
-    <Text component="p">
+    <Content component="p">
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
@@ -56,7 +49,7 @@ const VMRebootConfigurationInfo = () => {
           {t('ai:Check your VM reboot configuration')}
         </Button>
       </Popover>
-    </Text>
+    </Content>
   );
 };
 

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

@@ -1,6 +1,8 @@
 export * from './utils';
 export * from './types';
 export * from './HostValidationGroups';
+export * from './tableColumns';
+export * from './tableUtils';
 
 export { default as RoleCell } from './RoleCell';
 export { default as RoleDropdown } from './RoleDropdown';