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

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

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

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

@@ -64,7 +64,8 @@ const ValidationsAlert = ({
       <ul>
         {validations.map((v) => (
           <li key={v.id}>
-            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;{toSentence(v.message)}{' '}
+            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;
+            {toSentence(v.message.replace(/\\n/, ' '))}{' '}
             {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
           </li>
         ))}

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

@@ -43,7 +43,7 @@ const Hostname: React.FC<HostnameProps> = ({
   const body = (
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
-        <FlexItem className={'pf-u-mr-xs'}>
+        <FlexItem className={'pf-v5-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-u-mr-xs'}>
+            <FlexItem className={'pf-v5-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-global--spacer--lg) !important;
+  padding-top: var(--pf-v5-global--spacer--lg) !important;
 }
 
-.hosts-table .pf-c-dropdown__toggle-text {
-  color: var(--pf-global--Color--100) !important;
+.hosts-table .pf-v5-c-dropdown__toggle-text {
+  color: var(--pf-v5-global--Color--100) !important;
 }
 
 .hosts-table button {
-  font-size: var(--pf-c-table-cell--FontSize);
+  font-size: var(--pf-v5-c-table-cell--FontSize);
 }
 
 .hosts-table {

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

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

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

@@ -251,7 +251,11 @@ const MassChangeHostnameForm = ({
         </Stack>
       </ModalBoxBody>
       <ModalBoxFooter>
-        <Button key="submit" type={ButtonType.submit} isDisabled={isSubmitting || !isValid}>
+        <Button
+          key="submit"
+          type={ButtonType.submit}
+          isDisabled={isSubmitting || !isValid || !hostnameInputRef.current?.value.trim()}
+        >
           {t('ai:Change')}
         </Button>
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={isSubmitting}>

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

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

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

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
   OnPerPageSelect,
   OnSetPage,
   Pagination,
@@ -16,6 +12,12 @@ import {
   ToolbarProps,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
@@ -101,7 +103,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
                         id="select-checkbox"
                         key="select-checkbox"
                         aria-label={t('ai:Select all')}
-                        onChange={(checked) => (checked ? onSelectAll() : onSelectNone())}
+                        onChange={(_event, checked) => (checked ? onSelectAll() : onSelectNone())}
                         isChecked={isChecked}
                       >
                         {selectedIDs.length} {t('ai:selected')}

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

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode } from '../../../common/components/ui';
+import { PrismCode, UiIcon } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -50,7 +50,7 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <InfoCircleIcon size="sm" />
+            <UiIcon size="sm" icon={<InfoCircleIcon />} />
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

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

@@ -1,4 +1,3 @@
-import { breakWord, expandable, sortable } from '@patternfly/react-table';
 import * as React from 'react';
 import { Address4, Address6 } from 'ip-address';
 import type {
@@ -66,10 +65,9 @@ export const hostnameColumn = (
       title: t('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: (host) => {
       const inventory = getInventory(host);
@@ -105,7 +103,7 @@ export const roleColumn = (
       props: {
         id: 'col-header-role',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const editRole = onEditRole
@@ -137,7 +135,7 @@ export const statusColumn = (
       props: {
         id: 'col-header-status',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
@@ -174,7 +172,7 @@ export const discoveredAtColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-discoveredat',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const { createdAt } = host;
@@ -193,7 +191,7 @@ export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-cpuarchitecture',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -211,7 +209,7 @@ export const cpuCoresColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-cpucores',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -238,7 +236,7 @@ export const memoryColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-memory',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -263,7 +261,7 @@ export const disksColumn = (t: TFunction): TableRow<Host> => ({
     props: {
       id: 'col-header-disk',
     },
-    transforms: [sortable],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -287,7 +285,10 @@ export const countColumn = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host> => ({
-  header: { title: t('ai:Active NIC'), transforms: [sortable] },
+  header: {
+    title: t('ai:Active NIC'),
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -303,7 +304,10 @@ export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host>
 });
 
 export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'IPv4 address', transforms: [sortable] },
+  header: {
+    title: 'IPv4 address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -320,7 +324,10 @@ export const ipv4Column = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'IPv6 address', transforms: [sortable] },
+  header: {
+    title: 'IPv6 address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];
@@ -337,7 +344,10 @@ export const ipv6Column = (cluster: Cluster): TableRow<Host> => ({
 });
 
 export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'MAC address', transforms: [sortable] },
+  header: {
+    title: 'MAC address',
+    sort: true,
+  },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];

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

@@ -91,4 +91,5 @@ export type HostStatusProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    openshiftVersion?: string;
   };

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

@@ -51,7 +51,6 @@ export const canDelete = (clusterStatus: Cluster['status'], status: Host['status
     'resetting-pending-user-action',
     'installing-pending-user-action',
     'pending-for-input',
-    'added-to-existing-cluster',
     'error',
   ].includes(status);
 

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>