@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

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

@@ -1,111 +1,32 @@
 import React from 'react';
 import { Checkbox, Pagination, PaginationVariant } from '@patternfly/react-core';
 import {
-  Table,
-  TableHeader,
-  TableBody,
   IRow,
   SortByDirection,
   ISortBy,
   OnSort,
-  RowWrapperProps,
-  RowWrapper,
-  ICell,
   IAction,
   ISeparator,
   TableProps,
-  InnerScrollContainer,
 } from '@patternfly/react-table';
-import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
 import xor from 'lodash-es/xor.js';
-import classnames from 'classnames';
 
-import { getColSpanRow, rowSorter } from '../ui';
+import { getColSpanRow, HumanizedSortable, rowSorter } from '../ui';
 import { WithTestID } from '../../types';
+import { AITableMemo, TableMemoColType, TableMemoProps } from './AITableMemo';
 import { usePagination } from './usePagination';
 import './HostsTable.css';
 
-const rowKey = ({ rowData }: ExtraParamsType) => rowData?.key as string;
-
-type TableMemoProps = {
-  rows: TableProps['rows'];
-  cells: TableProps['cells'];
-  onCollapse: TableProps['onCollapse'];
-  className: TableProps['className'];
-  sortBy: TableProps['sortBy'];
-  onSort: TableProps['onSort'];
-  rowWrapper: TableProps['rowWrapper'];
-  variant?: TableProps['variant'];
-  // eslint-disable-next-line
-  actionResolver?: ActionsResolver<any>;
-};
-const TableMemo: React.FC<WithTestID & TableMemoProps> = React.memo(
-  ({
-    rows,
-    cells,
-    onCollapse,
-    className,
-    sortBy,
-    onSort,
-    rowWrapper,
-    testId,
-    variant,
-    actionResolver,
-  }) => {
-    const tableActionResolver = React.useCallback(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      (rowData) => actionResolver?.(rowData.obj) as (IAction | ISeparator)[],
-      [actionResolver],
-    );
-    // new prop for @patternfly/react-table 4.67.7 which is used in ACM, but not in OCM
-    const newProps = {
-      canCollapseAll: false,
-    };
-    return (
-      <InnerScrollContainer>
-        <Table
-          rows={rows}
-          cells={cells}
-          onCollapse={onCollapse}
-          aria-label="Hosts table"
-          className={classnames(className, 'hosts-table')}
-          sortBy={sortBy}
-          onSort={onSort}
-          rowWrapper={rowWrapper}
-          data-testid={testId}
-          actionResolver={actionResolver ? tableActionResolver : undefined}
-          variant={variant}
-          actionsMenuAppendTo={() => document.body}
-          {...newProps}
-        >
-          <TableHeader />
-          <TableBody rowKey={rowKey} />
-        </Table>
-      </InnerScrollContainer>
-    );
-  },
-);
-TableMemo.displayName = 'tableMemo';
-const getMainIndex = (hasOnSelect: boolean, hasExpandComponent: boolean) => {
-  if (hasOnSelect && hasExpandComponent) {
-    return 2;
-  }
-  if (hasOnSelect || hasExpandComponent) {
-    return 1;
-  }
-  return 0;
-};
 type OpenRows = {
   [id: string]: boolean;
 };
-const HostsTableRowWrapper = (props: RowWrapperProps) => (
-  <RowWrapper {...props} data-testid={`host-row-${Number(props.rowProps?.rowIndex)}`} />
-);
+
 export type TableRow<R> = {
-  header: ICell | string;
+  header: TableMemoColType;
   // eslint-disable-next-line
   cell?: (obj: R) => { title: React.ReactNode; props: any; sortableValue?: string | number };
 };
+
 export type ActionsResolver<R> = (obj: R) => (IAction | ISeparator)[];
 export type ExpandComponentProps<R> = {
   obj: R;
@@ -123,6 +44,7 @@ type SelectCheckboxProps = {
   onSelect: (isChecked: boolean) => void;
   id: string;
 };
+
 const SelectCheckbox: React.FC<SelectCheckboxProps> = ({ onSelect, id }) => {
   const { selectedIDs } = React.useContext(SelectionProvider);
   const isChecked = selectedIDs?.includes(id);
@@ -159,6 +81,7 @@ export type AITableProps<R> = ReturnType<typeof usePagination> & {
   canSelectAll?: boolean;
   variant?: TableProps['variant'];
 };
+
 // eslint-disable-next-line
 const AITable = <R extends any>({
   data,
@@ -182,6 +105,7 @@ const AITable = <R extends any>({
   variant,
 }: WithTestID & AITableProps<R>) => {
   const itemIDs = React.useMemo(() => data.map(getDataId), [data, getDataId]);
+
   React.useEffect(() => {
     if (selectedIDs && setSelectedIDs) {
       const idsToRemove: string[] = [];
@@ -196,9 +120,10 @@ const AITable = <R extends any>({
       }
     }
   }, [data, setSelectedIDs, selectedIDs, getDataId]);
+
   const [openRows, setOpenRows] = React.useState<OpenRows>({});
   const [sortBy, setSortBy] = React.useState<ISortBy>({
-    index: getMainIndex(!!onSelect, !!ExpandComponent),
+    index: onSelect ? 1 : 0,
     direction: SortByDirection.asc,
   });
 
@@ -213,14 +138,14 @@ const AITable = <R extends any>({
     [setSelectedIDs, getDataId],
   );
 
-  const [contentWithAdditions, columns] = React.useMemo<[TableRow<R>[], (string | ICell)[]]>(() => {
+  const [contentWithAdditions, columns] = React.useMemo(() => {
     let newContent = content;
     if (onSelect) {
       newContent = [
         {
           header: {
             title: canSelectAll ? <SelectAllCheckbox onSelect={onSelectAll} /> : '',
-            cellFormatters: [],
+            sort: false,
           },
           cell: (obj) => {
             const id = getDataId(obj);
@@ -234,71 +159,51 @@ const AITable = <R extends any>({
         ...content,
       ];
     }
-    const columns = newContent.map((c) => c.header);
+    const columns = newContent.map(
+      (c) =>
+        ({
+          ...c.header,
+          sort: c.header.sort ?? true,
+        } as TableMemoColType),
+    );
     return [newContent, columns];
-  }, [content, onSelect, getDataId, onSelectAll, canSelectAll]);
+  }, [canSelectAll, content, getDataId, onSelect, onSelectAll]);
 
   const hostRows = React.useMemo(() => {
-    let rows = (data || [])
+    const rows = (data || [])
       .map<IRow>((obj) => {
         const id = getDataId(obj);
         const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
         const isOpen = !!openRows[id];
         return {
-          // visible row
           isOpen,
           cells,
           key: `${id}-master`,
-          obj,
           id,
+          actions: actionResolver ? actionResolver(obj) : undefined,
+          nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
         };
       })
-      .sort(
-        rowSorter(sortBy, (row, index = 1) =>
-          // eslint-disable-next-line
-          ExpandComponent ? row.cells?.[index - 1] : (row.cells?.[index] as any),
-        ),
-      )
       .slice((page - 1) * perPage, page * perPage);
-    if (ExpandComponent) {
-      rows = rows.reduce((allRows, row: IRow, index) => {
-        allRows.push(row);
-        if (ExpandComponent) {
-          allRows.push({
-            // expandable detail
-            // parent will be set after sorting
-            cells: [
-              {
-                // do not render unnecessarily to improve performance
-                title: row.isOpen ? <ExpandComponent obj={row.obj as R} /> : undefined,
-                props: { colSpan: columns.length },
-              },
-            ],
-            key: `${(row.id as string) || ''}-detail`,
-            parent: index * 2,
-          });
-        }
-        return allRows;
-      }, [] as IRow[]);
-    }
     return rows;
   }, [
-    contentWithAdditions,
-    ExpandComponent,
-    getDataId,
     data,
-    openRows,
-    sortBy,
     page,
     perPage,
-    columns.length,
+    ExpandComponent,
+    getDataId,
+    contentWithAdditions,
+    openRows,
+    actionResolver,
   ]);
+
   const rows = React.useMemo(() => {
     if (hostRows.length) {
       return hostRows;
     }
     return getColSpanRow(children, columns.length);
   }, [hostRows, columns, children]);
+
   const onCollapse = React.useCallback(
     (_event, rowKey: number) => {
       const id = hostRows[rowKey].id as string;
@@ -308,6 +213,7 @@ const AITable = <R extends any>({
     },
     [hostRows, openRows],
   );
+
   const onSort: OnSort = React.useCallback((_event, index, direction) => {
     setOpenRows({}); // collapse all
     setSortBy({
@@ -315,6 +221,13 @@ const AITable = <R extends any>({
       direction,
     });
   }, []);
+
+  const sortedRows = React.useMemo(() => {
+    return rows.sort(
+      rowSorter(sortBy, (row: IRow, index = 0) => row.cells?.[index] as string | HumanizedSortable),
+    );
+  }, [rows, sortBy]);
+
   return (
     <>
       <SelectionProvider.Provider
@@ -323,16 +236,14 @@ const AITable = <R extends any>({
           allIDs: itemIDs,
         }}
       >
-        <TableMemo
-          rows={rows}
-          cells={columns}
+        <AITableMemo
+          rows={sortedRows as TableMemoProps['rows']}
+          cols={columns}
           onCollapse={ExpandComponent ? onCollapse : undefined}
           className={className}
+          data-testid={testId}
           sortBy={sortBy}
           onSort={onSort}
-          rowWrapper={HostsTableRowWrapper}
-          data-testid={testId}
-          actionResolver={actionResolver}
           variant={variant}
         />
       </SelectionProvider.Provider>

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  ActionsColumn,
+  ExpandableRowContent,
+  IAction,
+  InnerScrollContainer,
+  ISeparator,
+  ISortBy,
+  OnCollapse,
+  OnSort,
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  TdProps,
+  Th,
+  Thead,
+  ThProps,
+  Tr,
+} from '@patternfly/react-table';
+import classnames from 'classnames';
+
+import { WithTestID } from '../../types';
+import './HostsTable.css';
+
+export type ActionsResolver<R> = (obj: R) => (IAction | ISeparator)[];
+
+type TableMemoRowType = {
+  cells: { title: string | React.ReactNode; props?: Omit<TdProps, 'ref'> }[];
+  actions: IAction[];
+  nestedComponent?: React.ReactNode;
+  isOpen?: boolean;
+};
+
+export type TableMemoColType = {
+  title: string | React.ReactNode;
+  props?: Omit<ThProps, 'ref'>;
+  sort?: boolean;
+};
+
+export type TableMemoProps = {
+  rows: TableMemoRowType[];
+  cols: TableMemoColType[];
+  sortBy: ISortBy;
+  onSort: OnSort;
+  onCollapse?: OnCollapse;
+  className: TableProps['className'];
+  variant?: TableProps['variant'];
+} & WithTestID;
+
+export const AITableMemo = React.memo(
+  ({ rows, cols, onCollapse, className, variant, onSort, sortBy, testId }: TableMemoProps) => {
+    const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+      sortBy,
+      onSort,
+      columnIndex,
+    });
+
+    return (
+      <InnerScrollContainer>
+        <Table
+          aria-label="Hosts table"
+          className={classnames(className, 'hosts-table')}
+          data-testid={testId}
+          variant={variant}
+        >
+          <Thead>
+            <Tr>
+              {onCollapse && <Th />}
+              {cols.map((col, i) => (
+                <Th key={`col-${i}`} {...col.props} sort={col.sort ? getSortParams(i) : undefined}>
+                  {col.title}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row, i) => (
+              <React.Fragment key={`row-wrapper-${i}`}>
+                <Tr key={`row-${i}`} data-testid={`host-row-${Number(i)}`}>
+                  {row.nestedComponent && (
+                    <Td
+                      expand={{
+                        rowIndex: i,
+                        isExpanded: !!row.isOpen,
+                        onToggle: onCollapse as OnCollapse,
+                      }}
+                    />
+                  )}
+
+                  {row.cells.map((cell, j) => (
+                    <Td key={`cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+
+                  {row.actions && (
+                    <Td isActionCell>
+                      <ActionsColumn
+                        items={row.actions}
+                        popperProps={{ appendTo: () => document.body, position: 'end' }}
+                      />
+                    </Td>
+                  )}
+                </Tr>
+
+                {row.nestedComponent && (
+                  <Tr key={`nested-row-${i}`} isExpanded={row.isOpen}>
+                    <Td colSpan={Object.keys(cols).length + 1}>
+                      <ExpandableRowContent>{row.nestedComponent}</ExpandableRowContent>
+                    </Td>
+                  </Tr>
+                )}
+              </React.Fragment>
+            ))}
+          </Tbody>
+        </Table>
+      </InnerScrollContainer>
+    );
+  },
+);
+
+AITableMemo.displayName = 'tableMemo';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import {
   Disk,
@@ -101,10 +101,10 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isDisabled={isDisabled}
-        className="pf-c-button pf-m-link pf-m-inline"
+        className="pf-v5-c-button pf-m-link pf-m-inline"
       >
         {currentRoleLabel}
       </DropdownToggle>

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

@@ -99,7 +99,7 @@ const FormatDiskCheckbox = ({
         id={`select-formatted-${host.id}-${index}`}
         isChecked={isFormatDiskChecked(host, diskId, installationDiskId)}
         isDisabled={isFormatDiskDisabled(host, diskId, installationDiskId)}
-        onChange={(checked: boolean) =>
+        onChange={(_event, checked: boolean) =>
           onSelectFormattingDisk(checked, host.id, diskId, updateDiskSkipFormatting)
         }
       />

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import ExternalLink from '../ui/ExternalLink';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { fileSize } from '../../utils';
+import { HOST_REQUIREMENTS_LINK } from '../../config/docs_links';
 
 type HWRequirements = {
   cpuCores?: number;
@@ -75,9 +76,7 @@ export const HostRequirementsList: React.FC<HostRequirementsListProps> = ({
         {t(
           "ai:Also note that each host's disk write speed should meet the minimum requirements to run OpenShift. ",
         )}
-        <ExternalLink href={'https://access.redhat.com/solutions/4885641'}>
-          {t('ai:Learn more')}
-        </ExternalLink>
+        <ExternalLink href={HOST_REQUIREMENTS_LINK}>{t('ai:Learn more')}</ExternalLink>
       </ListItem>
     </List>
   );

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

@@ -1,15 +1,6 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableVariant,
-  RowWrapperProps,
-  RowWrapper,
-  IRow,
-} from '@patternfly/react-table';
-import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
+import { TableVariant, Tbody, Thead, Table, Th, Tr, Td } from '@patternfly/react-table';
 import { DetailItem, DetailList, DetailListProps } from '../ui';
 import type { Disk, Host, Interface } from '@openshift-assisted/types/assisted-installer-service';
 import type { ValidationsInfo } from '../../types/hosts';
@@ -63,16 +54,9 @@ const nicsColumns = (t: TFunction) => [
   // { title: 'Product' },
 ];
 
-// eslint-disable-next-line
-const nicsRowKey = ({ rowData }: ExtraParamsType) => rowData?.name?.title;
-
-const NICsTableRowWrapper = (props: RowWrapperProps) => (
-  <RowWrapper {...props} data-testid={`nic-row:${(props?.row?.key as string) || ''}`} />
-);
-
 const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }) => {
   const { t } = useTranslation();
-  const rows: IRow[] = interfaces
+  const rows = interfaces
     .sort((nicA, nicB) => nicA.name?.localeCompare(nicB.name || '') || 0)
     .map((nic) => ({
       cells: [
@@ -92,20 +76,33 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
         },
       ],
       key: nic.name,
-    }));
+    })) as { cells: { title: string | React.ReactNode; props?: object }[]; key: string }[];
 
   return (
     <Table
       data-testid={testId}
-      rows={rows}
-      cells={nicsColumns(t)}
       variant={TableVariant.compact}
       aria-label={t("ai:Host's network interfaces table")}
       borders={false}
-      rowWrapper={NICsTableRowWrapper}
     >
-      <TableHeader />
-      <TableBody rowKey={nicsRowKey} />
+      <Thead>
+        <Tr>
+          {nicsColumns(t).map((col, i) => (
+            <Th key={`col-${i}`}>{col.title}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={`nic-row:${row.key}`}>
+            {row.cells?.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

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

@@ -6,16 +6,15 @@ import {
   TextContent,
   FlexItem,
   Flex,
-  ButtonProps,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import hdate from 'human-date';
 
-import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
-import { ExternalLink, getHumanizedDateTime } from '../ui';
+import { ExternalLink, UiIcon, getHumanizedDateTime } from '../ui';
 
 import HostProgress from './HostProgress';
 import { getHostProgressStageNumber, getHostProgressStages } from './utils';
@@ -30,8 +29,9 @@ 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 { APPROVE_NODES_IN_CL_LINK } from '../../config';
 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,12 +44,14 @@ type HostStatusPopoverContentProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
   autoCSR?: boolean;
   additionalPopoverContent?: React.ReactNode;
+  openshiftVersion?: string;
 };
 
 const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   details,
   autoCSR,
   additionalPopoverContent,
+  openshiftVersion,
   ...props
 }) => {
   const { host } = props;
@@ -100,7 +102,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
             {t('ai:It may take a few minutes for the join request to appear.')}
             <br />
             {t('ai:If you prefer using the CLI, follow the instructions in')}&nbsp;
-            <ExternalLink href={APPROVE_NODES_IN_CL_LINK}>
+            <ExternalLink href={getApproveNodesInClLink(openshiftVersion)}>
               {t('ai:How to approve nodes using the CLI')}
             </ExternalLink>
           </>
@@ -184,11 +186,11 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     onEditHostname: HostStatusPopoverContentProps['onEditHostname'];
     title: string;
     validationsInfo: ValidationsInfo;
-    isSmall?: ButtonProps['isSmall'];
     details?: string;
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    openshiftVersion?: string;
   };
 
 const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
@@ -204,13 +206,36 @@ const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
     maxWidth="50rem"
     hideOnOutsideClick={props.hideOnOutsideClick}
     zIndex={props.zIndex || 300}
+    closeBtnAriaLabel={`close-popover-${props.host.requestedHostname ?? ''}`}
   >
-    <Button variant={'link'} isInline isSmall={props.isSmall}>
+    <Button variant={'link'} isInline size="sm">
       {props.children}
     </Button>
   </Popover>
 );
 
+const getHostStatusIcon = (
+  icon: React.ReactNode,
+  progress: HostProgressInfo | undefined,
+  status: HostStatusProps['status'],
+) => {
+  if (progress?.stageTimedOut !== undefined && status.title !== 'Error') {
+    return (
+      <Popover
+        bodyContent={
+          <small>
+            Waiting for control plane has been active more than the expected completion time.
+          </small>
+        }
+        minWidth="20rem"
+        maxWidth="30rem"
+      >
+        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+      </Popover>
+    );
+  } else return icon;
+};
+
 const HostStatus: React.FC<HostStatusProps> = ({
   host,
   validationsInfo,
@@ -222,6 +247,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
   zIndex,
   autoCSR,
   additionalPopoverContent,
+  openshiftVersion,
 }) => {
   const [keepOnOutsideClick, onValidationActionToggle] = React.useState(false);
 
@@ -246,15 +272,17 @@ const HostStatus: React.FC<HostStatusProps> = ({
     zIndex,
     autoCSR,
     additionalPopoverContent,
+    openshiftVersion,
   };
 
+  const hostIcon = getHostStatusIcon(icon, host.progress, status);
   return (
     <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'
             ? hostStatus(t).installed.icon
-            : icon) || <UnknownIcon />}
+            : hostIcon) || <UnknownIcon />}
         </FlexItem>
       }
 
@@ -267,8 +295,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
         {children && <FlexItem>{children}</FlexItem>}
         {sublabel && (
           <FlexItem
-            className="pf-u-font-size-xs"
-            style={{ marginTop: 'calc(-1 * var(--pf-l-flex--spacer--xs))' }}
+            className="pf-v5-u-font-size-xs"
+            style={{ marginTop: 'calc(-1 * var(--pf-v5-l-flex--spacer--xs))' }}
           >
             <WithHostStatusPopover {...popoverProps}>{sublabel}</WithHostStatusPopover>
           </FlexItem>

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

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