@openshift-assisted/ui-lib 2.12.1-cim → 2.14.0-cim

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

@@ -7,28 +7,19 @@ import {
   Alert,
   AlertVariant,
 } 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, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
 import DiskRole, { OnDiskRoleType } from '../hosts/DiskRole';
 import DiskLimitations from '../hosts/DiskLimitations';
 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 FormatDiskCheckbox, {
   DiskFormattingType,
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon } from '../ui';
+import { PopoverIcon, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 
@@ -41,29 +32,25 @@ interface DisksTableProps extends WithTestID {
   updateDiskSkipFormatting?: DiskFormattingType;
 }
 
-const diskColumns = (t: TFunction, showFormat: boolean) => [
-  { title: t('ai:Name') },
-  { title: t('ai:Role') },
-  { title: t('ai:Limitations') },
-  showFormat ? { title: t('ai:Format?') } : '',
-  { title: t('ai:Drive type') },
-  { title: t('ai:Size') },
-  { title: t('ai:Serial') },
-  { title: t('ai:Model') },
-  {
-    title: (
-      <>
-        WWN <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
-      </>
-    ),
-  },
-];
-
-const diskRowKey = ({ rowData }: ExtraParamsType) => rowData?.key as string;
-
-const DisksTableRowWrapper = (props: RowWrapperProps) => (
-  <RowWrapper {...props} data-testid={`disk-row-${(props.row?.key as string) || ''}`} />
-);
+const diskColumns = (t: TFunction, showFormat: boolean) =>
+  [
+    { title: t('ai:Name') },
+    { title: t('ai:Role') },
+    { title: t('ai:Limitations') },
+    showFormat ? { title: t('ai:Format?') } : '',
+    { title: t('ai:Drive type') },
+    { title: t('ai:Size') },
+    { title: t('ai:Serial') },
+    { title: t('ai:Model') },
+    {
+      title: (
+        <>
+          WWN{' '}
+          <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+        </>
+      ),
+    },
+  ].filter(Boolean) as { title: string | React.ReactNode }[];
 
 const SkipFormattingDisk = () => (
   <TextContent>
@@ -122,7 +109,7 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
         </Popover>
       )}
       {'   '}
@@ -137,7 +124,7 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
           </Popover>
         </>
       )}
@@ -158,7 +145,7 @@ const DisksTable = ({
   const isEditable = !!canEditDisks?.(host);
   const diskColumnTitles = diskColumns(t, isEditable);
 
-  const rows: IRow[] = disks
+  const rows = disks
     .filter((disk) => disk.driveType !== 'LVM')
     .sort((a, b) => (a.name && a.name.localeCompare(b.name as string)) || 0)
     .sort((a, b) => {
@@ -212,20 +199,28 @@ const DisksTable = ({
         { title: disk.wwn, props: { 'data-testid': 'disk-wwn' } },
       ],
       key: disk.path,
-    }));
+    })) as { key: string; cells: { title: string | React.ReactNode; props: object }[] }[];
 
   return (
-    <Table
-      data-testid={testId}
-      rows={rows}
-      cells={diskColumnTitles}
-      variant={TableVariant.compact}
-      aria-label="Host's disks table"
-      borders={false}
-      rowWrapper={DisksTableRowWrapper}
-    >
-      <TableHeader />
-      <TableBody rowKey={diskRowKey} />
+    <Table data-testid={testId} variant={TableVariant.compact} aria-label="Host's disks table">
+      <Thead>
+        <Tr>
+          {diskColumnTitles.map((col, i) => (
+            <Th key={`col-${i}`}>{col.title}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={`disk-row-${row.key}`} data-testid={`disk-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/storage/StorageUtils.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { sortable } from '@patternfly/react-table';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell } from '../../index';
+import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
 import { TableRow } from '../hosts/AITable';
 import { Popover, Text, TextContent, TextVariants } 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 { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
@@ -21,7 +19,7 @@ export const roleColumn = (t: TFunction, schedulableMasters: boolean): TableRow<
       props: {
         id: 'col-header-role',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const hostRole = getHostRole(host, t, schedulableMasters);
@@ -40,7 +38,7 @@ export const numberOfDisksColumn: TableRow<Host> = {
     props: {
       id: 'col-header-num-disks',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -53,7 +51,7 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
             </Popover>
           )}
         </>
@@ -71,14 +69,14 @@ export const odfUsageColumn = (excludeMasters: boolean): TableRow<Host> => {
       props: {
         id: 'col-header-odf',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const isMaster = host.role === 'master' || host.suggestedRole === 'master';
       const isExcluded = excludeMasters && isMaster;
       return {
         title: isExcluded ? (
-          <div style={{ color: 'var(--pf-global--disabled-color--100)' }}>Excluded for ODF</div>
+          <div style={{ color: 'var(--pf-v5-global--disabled-color--100)' }}>Excluded for ODF</div>
         ) : (
           'Use ODF'
         ),

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

@@ -1,31 +1,31 @@
 import React from 'react';
+import { IconComponentProps } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons/dist/js/icons/download-icon';
-import { IconSize } from '@patternfly/react-icons/dist/js/createIcon';
 
-export const getPadding = (size: IconSize | keyof typeof IconSize) => {
+export const getPadding = (size: IconComponentProps['size']) => {
   switch (size) {
-    case IconSize.sm:
+    case 'sm':
       return '0.3em';
-    case IconSize.md:
+    case 'md':
       return '1.5em';
-    case IconSize.lg:
+    case 'lg':
       return '2em';
-    case IconSize.xl:
+    case 'xl':
       return '3em';
     default:
       return '1em';
   }
 };
 
-export const getVerticalAlign = (size: IconSize | keyof typeof IconSize) => {
+export const getVerticalAlign = (size: IconComponentProps['size']) => {
   switch (size) {
-    case IconSize.sm:
+    case 'sm':
       return '-0.3em';
-    case IconSize.md:
+    case 'md':
       return '-1.5em';
-    case IconSize.lg:
+    case 'lg':
       return '-2em';
-    case IconSize.xl:
+    case 'xl':
       return '-3em';
     default:
       return '-1em';
@@ -34,10 +34,10 @@ export const getVerticalAlign = (size: IconSize | keyof typeof IconSize) => {
 
 type BorderedIconProps = {
   children: React.ReactElement<React.ComponentProps<typeof DownloadIcon>>;
-  iconSize?: IconSize;
+  iconSize?: IconComponentProps['size'];
 };
 
-const BorderedIcon = ({ children, iconSize = IconSize.sm }: BorderedIconProps) => {
+const BorderedIcon = ({ children, iconSize = 'sm' }: BorderedIconProps) => {
   const style: React.CSSProperties = {
     padding: `${getPadding(iconSize)}`,
     borderRadius: '50%',

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

@@ -9,16 +9,15 @@ import {
   Button,
   ButtonVariant,
   InputGroup,
-  Select,
-  SelectOption,
   TextInput,
   ToolbarProps,
   ToolbarFilterProps,
-  SelectProps,
   TextInputProps,
   Badge,
   TextInputTypes,
+  InputGroupItem,
 } from '@patternfly/react-core';
+import { Select, SelectOption, SelectProps } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import type { ClusterEventsFiltersType } from '../../types';
@@ -33,6 +32,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { isSelectEventChecked } from './utils';
 import { TFunction } from 'i18next';
 import { stringToJSON } from '../../utils';
+import { CustomToolbarFilter } from './CustomToolbarFilter';
 
 export type SeverityCountsType = { [severity in Event['severity']]: number };
 
@@ -162,7 +162,7 @@ const ClusterEventsToolbar = ({
     onSelect('severities', isChecked, value);
   };
 
-  const onMessageChange: TextInputProps['onChange'] = (message) => {
+  const onMessageChange: TextInputProps['onChange'] = (_event, message) => {
     setMessageValue(message);
     clearTimeout(timer);
 
@@ -219,7 +219,7 @@ const ClusterEventsToolbar = ({
     >
       <ToolbarContent>
         {entityKind === 'cluster' && (
-          <ToolbarFilter
+          <CustomToolbarFilter
             categoryName="Hosts"
             chips={hostChips}
             deleteChip={(_, chip) =>
@@ -262,7 +262,7 @@ const ClusterEventsToolbar = ({
                 )),
               ]}
             </Select>
-          </ToolbarFilter>
+          </CustomToolbarFilter>
         )}
 
         <ToolbarFilter
@@ -304,18 +304,22 @@ const ClusterEventsToolbar = ({
 
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="search-text"
-              id="search-text"
-              type={TextInputTypes.search}
-              aria-label="text to be searched"
-              onChange={onMessageChange}
-              value={messageValue}
-              placeholder={t('ai:Filter by text')}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search text button">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="search-text"
+                id="search-text"
+                type={TextInputTypes.search}
+                aria-label="text to be searched"
+                onChange={onMessageChange}
+                value={messageValue}
+                placeholder={t('ai:Filter by text')}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search text button">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
       </ToolbarContent>

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

@@ -0,0 +1,134 @@
+// This component resolves the folowing bug: https://issues.redhat.com/browse/MGMT-18567
+// Once this issues is addressed in PatternFly, this component should be removed.
+
+import {
+  Chip,
+  ChipGroup,
+  PickOptional,
+  ToolbarChip,
+  ToolbarContentContext,
+  ToolbarContext,
+  ToolbarFilterProps,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+interface ToolbarFilterState {
+  isMounted: boolean;
+}
+
+class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+  static displayName = 'CustomToolbarFilter';
+  static contextType = ToolbarContext;
+  context!: React.ContextType<typeof ToolbarContext>;
+  static defaultProps: PickOptional<ToolbarFilterProps> = {
+    chips: [] as (string | ToolbarChip)[],
+    showToolbarItem: true,
+  };
+
+  constructor(props: ToolbarFilterProps) {
+    super(props);
+    this.state = {
+      isMounted: false,
+    };
+  }
+
+  componentDidMount() {
+    const { categoryName, chips } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      chips ? chips.length : 0,
+    );
+    this.setState({ isMounted: true });
+  }
+
+  componentDidUpdate() {
+    const { categoryName, chips } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      chips ? chips.length : 0,
+    );
+  }
+
+  render() {
+    const {
+      children,
+      chips,
+      deleteChipGroup,
+      deleteChip,
+      chipGroupExpandedText,
+      chipGroupCollapsedText,
+      categoryName,
+      showToolbarItem,
+      isExpanded,
+      expandableChipContainerRef,
+      ...props
+    } = this.props;
+    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
+    const categoryKey =
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString();
+
+    const chipGroup =
+      chips !== undefined && chips.length ? (
+        <ToolbarItem variant="chip-group">
+          <ChipGroup
+            key={categoryKey}
+            categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
+            isClosable={deleteChipGroup !== undefined}
+            onClick={() => deleteChipGroup && deleteChipGroup(categoryName)}
+            collapsedText={chipGroupCollapsedText}
+            expandedText={chipGroupExpandedText}
+          >
+            {chips.map((chip) =>
+              typeof chip === 'string' ? (
+                <Chip key={chip} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip}
+                </Chip>
+              ) : (
+                <Chip key={chip.key} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip.node}
+                </Chip>
+              ),
+            )}
+          </ChipGroup>
+        </ToolbarItem>
+      ) : null;
+
+    if (!_isExpanded && this.state.isMounted) {
+      return (
+        <React.Fragment>
+          {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+          {chipGroupContentRef &&
+            chipGroupContentRef.current !== null &&
+            chipGroupContentRef.current.firstElementChild !== null &&
+            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <ToolbarContentContext.Consumer>
+        {({ chipContainerRef }) => (
+          <React.Fragment>
+            {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+            {chipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, chipContainerRef.current as Element)}
+            {expandableChipContainerRef &&
+              expandableChipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
+          </React.Fragment>
+        )}
+      </ToolbarContentContext.Consumer>
+    );
+  }
+}
+
+export { CustomToolbarFilter };

package/lib/common/components/ui/DetailList.css

@@ -3,10 +3,10 @@
 }
 
 .detail-list dd {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .detail-list ul ul,
 .detail-list ul li {
-  margin-top: var(--pf-c-content--dt--sm--MarginTop);
+  margin-top: var(--pf-v5-c-content--dt--sm--MarginTop);
 }

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

@@ -2,14 +2,14 @@ import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
-export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverText'>;
+export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
 export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
   const { t } = useTranslation();
   return (
     <PreviewBadge
       text={t('ai:Developer Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
       )}
       {...props}

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

@@ -1,20 +1,16 @@
 import React from 'react';
 import { Button, ButtonVariant, Label } from '@patternfly/react-core';
-import { TableVariant, Table, TableBody, breakWord } from '@patternfly/react-table';
+import { Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
 import { Event, EventList } from '@openshift-assisted/types/assisted-installer-service';
 import { EmptyState } from './uiState';
 import { getHumanizedDateTime } from './utils';
-import { fitContent, noPadding } from './table';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
-const getEventRowKey = ({ rowData }: ExtraParamsType) =>
-  // eslint-disable-next-line
-  rowData?.props?.event.eventTime + rowData?.props?.event.message;
+const getEventRowKey = (event: Event) => event.eventTime + event.message;
 
 const getLabelColor = (severity: Event['severity']) => {
   switch (severity) {
@@ -73,11 +69,15 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
   const rows = events.map((event) => ({
     cells: [
       {
-        title: <strong>{getHumanizedDateTime(event.eventTime)}</strong>,
+        title: (
+          <TableText wrapModifier="fitContent" cellPadding={0}>
+            <strong>{getHumanizedDateTime(event.eventTime)}</strong>
+          </TableText>
+        ),
       },
       {
         title: (
-          <>
+          <TableText wrapModifier="breakWord">
             {event.severity !== 'info' && (
               <>
                 <Label color={getLabelColor(event.severity)} icon={getLabelIcon(event.severity)}>
@@ -85,8 +85,8 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
                 </Label>{' '}
               </>
             )}
-            {event.message}
-          </>
+            {event.message.replace(/\\n/, ' ')}
+          </TableText>
         ),
       },
     ],
@@ -94,17 +94,28 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
   }));
 
   return (
-    <Table
-      rows={rows}
-      cells={[
-        { title: t('ai:Time'), cellTransforms: [fitContent, noPadding] },
-        { title: t('ai:Message'), cellTransforms: [breakWord] },
-      ]}
-      variant={TableVariant.compact}
-      aria-label={t('ai:Events table')}
-      borders={false}
-    >
-      <TableBody rowKey={getEventRowKey} />
+    <Table variant={TableVariant.compact} aria-label={t('ai:Events table')} borders={false}>
+      <Thead>
+        <Tr>
+          <Th>
+            <TableText wrapModifier="fitContent" cellPadding={0}>
+              {t('ai:Time')}
+            </TableText>
+          </Th>
+          <Th>
+            <TableText wrapModifier="breakWord">{t('ai:Message')}</TableText>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={getEventRowKey(row.props.event)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`}>{cell.title}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

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

@@ -4,6 +4,6 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-c-form" />;
+const GridGap: React.FC = (props) => <div {...props} className="pf-v5-c-form" />;
 
 export default GridGap;