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

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -1,6 +1,10 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Cluster, ManagedDomain } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  DiskEncryption,
+  ManagedDomain,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { getDefaultCpuArchitecture, OpenshiftVersionOptionType } from '../../types';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import {
@@ -11,7 +15,6 @@ import {
   pullSecretValidationSchema,
 } from '../ui';
 import { ClusterDetailsValues } from './types';
-import { NewFeatureSupportLevelData } from '../newFeatureSupportLevels';
 import { FeatureSupportLevelData } from '../featureSupportLevels';
 
 const emptyTangServers = (): TangServer[] => {
@@ -76,6 +79,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'none',
+    customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
   };
 };
@@ -88,7 +92,6 @@ export const getClusterDetailsValidationSchema = ({
   validateUniqueName,
   isOcm,
   t,
-  newFeatureSupportLevels,
 }: {
   usedClusterNames: string[];
   featureSupportLevels?: FeatureSupportLevelData;
@@ -97,9 +100,8 @@ export const getClusterDetailsValidationSchema = ({
   validateUniqueName?: boolean;
   isOcm?: boolean;
   t: TFunction;
-  newFeatureSupportLevels?: NewFeatureSupportLevelData;
 }) =>
-  Yup.lazy<{ baseDnsDomain: string }>((values) => {
+  Yup.lazy((values: { baseDnsDomain: string; isSNODevPreview: boolean }) => {
     const validateName = () =>
       nameValidationSchema(t, usedClusterNames, values.baseDnsDomain, validateUniqueName, isOcm);
     if (pullSecretSet) {
@@ -118,40 +120,41 @@ export const getClusterDetailsValidationSchema = ({
       pullSecret: pullSecretValidationSchema.required('Required.'),
       SNODisclaimer: Yup.boolean().when(['highAvailabilityMode', 'openshiftVersion'], {
         // The disclaimer is required only if SNO is enabled and SNO feature is not fully supported in that version
-        is: (highAvailabilityMode, openshiftVersion) => {
+        is: (
+          highAvailabilityMode: Cluster['highAvailabilityMode'],
+          openshiftVersion: Cluster['openshiftVersion'],
+        ) => {
           const selectedVersion = (ocpVersions || []).find((v) => v.value === openshiftVersion);
-          if (newFeatureSupportLevels) {
-            return (
-              highAvailabilityMode === 'None' &&
-              selectedVersion &&
-              newFeatureSupportLevels.getFeatureSupportLevel('SNO') === 'dev-preview'
-            );
-          } else {
+          if (featureSupportLevels) {
             return highAvailabilityMode === 'None' && selectedVersion && featureSupportLevels
               ? featureSupportLevels.getFeatureSupportLevel(selectedVersion.value, 'SNO') ===
                   'dev-preview'
               : false;
+          } else {
+            return highAvailabilityMode === 'None' && selectedVersion && values.isSNODevPreview;
           }
         },
-        then: Yup.bool().oneOf(
-          [true],
-          t('ai:Confirm the Single Node OpenShift disclaimer to continue.'),
-        ),
+        then: () =>
+          Yup.boolean().oneOf(
+            [true],
+            t('ai:Confirm the Single Node OpenShift disclaimer to continue.'),
+          ),
       }),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
-        is: (diskEncryptionMode) => {
+        is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';
         },
-        then: Yup.array().of(
-          Yup.object().shape({
-            url: Yup.string()
-              .url(
-                t('ai:Tang Server URL must be a valid URL starting with "http://" or "https://"'),
-              )
-              .required(t('ai:Required.')),
-            thumbprint: Yup.string().required(t('ai:Required.')),
-          }),
-        ),
+        then: () =>
+          Yup.array().of(
+            Yup.object().shape({
+              url: Yup.string()
+                .url(
+                  t('ai:Tang Server URL must be a valid URL starting with "http://" or "https://"'),
+                )
+                .required(t('ai:Required.')),
+              thumbprint: Yup.string().required(t('ai:Required.')),
+            }),
+          ),
       }),
     });
   });

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

@@ -1,5 +1,5 @@
 export { default as ClusterWizardStepHeader } from './ClusterWizardStepHeader';
-export { default as ClusterWizardStep } from './ClusterWizardStep';
+export { ClusterWizardStep } from './ClusterWizardStep';
 export { default as ClusterWizardStepValidationsAlert } from './ClusterWizardStepValidationsAlert';
 export { default as ReviewHostsInventory } from './ReviewHostsInventory';
 export { ClusterValidations, HostsValidations } from './ReviewValidations';

package/lib/common/components/clusterWizard/networkingSteps/ManagedNetworkingControlGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormGroup, TooltipProps } from '@patternfly/react-core';
+import { FormGroup, Split, SplitItem, TooltipProps } from '@patternfly/react-core';
 import { PopoverIcon, getFieldId } from '../../ui';
 import RadioFieldWithTooltip from '../../ui/formik/RadioFieldWithTooltip';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
@@ -35,29 +35,37 @@ export const ManagedNetworkingControlGroup = ({
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline
     >
-      <RadioFieldWithTooltip
-        tooltipProps={tooltipPropsCmn}
-        name={GROUP_NAME}
-        isDisabled={disabled}
-        value={'clusterManaged'}
-        label={t('ai:Cluster-Managed Networking')}
-      />
-      <RadioFieldWithTooltip
-        tooltipProps={tooltipPropsUmn}
-        name={GROUP_NAME}
-        isDisabled={disabled}
-        value={'userManaged'}
-        label={
-          <>
-            <span>{t('ai:User-Managed Networking')}</span>{' '}
-            <PopoverIcon
-              bodyContent={t(
-                "ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
-              )}
-            />
-          </>
-        }
-      />
+      <Split>
+        <SplitItem>
+          <RadioFieldWithTooltip
+            tooltipProps={tooltipPropsCmn}
+            name={GROUP_NAME}
+            isDisabled={disabled}
+            value={'clusterManaged'}
+            label={t('ai:Cluster-Managed Networking')}
+          />
+        </SplitItem>
+      </Split>
+      <Split>
+        <SplitItem>
+          <RadioFieldWithTooltip
+            tooltipProps={tooltipPropsUmn}
+            name={GROUP_NAME}
+            isDisabled={disabled}
+            value={'userManaged'}
+            label={
+              <>
+                <span>{t('ai:User-Managed Networking')}</span>{' '}
+                <PopoverIcon
+                  bodyContent={t(
+                    "ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
+                  )}
+                />
+              </>
+            }
+          />
+        </SplitItem>
+      </Split>
     </FormGroup>
   );
 };

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

@@ -15,6 +15,7 @@ import {
 } from '../../types/hosts';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { WizardStepsValidationMap } from './validationsInfoUtils';
+import { OpenshiftVersionOptionType } from '../../types';
 
 export type ClusterDetailsValues = {
   name: string;
@@ -31,6 +32,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
+  customOpenshiftSelect: OpenshiftVersionOptionType | null;
   userManagedNetworking: boolean;
 };
 
@@ -67,3 +69,8 @@ export type ValidationActionLinkProps<S extends string> = {
 };
 
 export type ClusterOperatorProps = Pick<Cluster, 'openshiftVersion'> & { clusterId: Cluster['id'] };
+
+export type ItemDropdown = {
+  label: string;
+  value: string;
+}[];

package/lib/common/components/clusters/PullSecret.tsx

@@ -28,7 +28,7 @@ const PullSecret: React.FC<PullSecretProps> = ({ defaultPullSecret, isOcm = fals
       <>
         <Checkbox
           id="checkbox-pull-secret"
-          className="pf-u-display-inline-flex"
+          className="pf-v5-u-display-inline-flex"
           aria-label={t('ai:edit pull secret')}
           isChecked={isExpanded}
           onChange={onCheckboxChange}

package/lib/common/components/fetching/EventListFetch.tsx

@@ -133,7 +133,6 @@ export const EventListFetch = ({
       <div className={className}>{eventList}</div>
       {!disablePagination && (
         <Pagination
-          perPageComponent="button"
           itemCount={totalEvents}
           widgetId="events-pagination"
           perPage={perPage}

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)
         }
       />