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

package/lib/common/components/clusterWizard/ClusterWizardStep.css

@@ -1,9 +1,9 @@
-.cluster-wizard-step .pf-c-wizard__nav-item {
+.cluster-wizard-step .pf-v5-c-wizard__nav-item {
   white-space: nowrap;
 }
 
 .wizard-nav-item-warning-icon {
-  margin-left: var(--pf-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
 .cluster-wizard .cluster-wizard-step__footer {
@@ -15,16 +15,16 @@
   display: block !important;
 }
 
-.cluster-wizard.pf-c-wizard {
-  --pf-c-wizard__nav--Width: 19rem;
+.cluster-wizard.pf-v5-c-wizard {
+  --pf-v5-c-wizard__nav--Width: 19rem;
 }
 
-.pf-c-wizard__inner-wrap {
+.pf-v5-c-wizard__inner-wrap {
   overflow: auto;
 }
 
 @media (min-width: 768px) {
-  .cluster-wizard .cluster-wizard-step .pf-c-wizard__main {
+  .cluster-wizard .cluster-wizard-step .pf-v5-c-wizard__main {
     /* That breaks scrollbar in the ClusterDeployment wizard. As a fix, the "cluster-wizard" class is on the ClusterWizard and CreateClusterWizard only. */
     overflow: inherit !important;
   }

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { WizardBody, WizardBodyProps } from '@patternfly/react-core';
+import { WizardBody, WizardBodyProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import './ClusterWizardStep.css';
 
@@ -10,7 +9,7 @@ type ClusterWizardStepProps = {
   navigation?: React.ReactNode;
 };
 
-const ClusterWizardStep = ({
+export const ClusterWizardStep = ({
   navigation,
   footer,
   children,
@@ -18,16 +17,16 @@ const ClusterWizardStep = ({
   // activeStep is required, but we're not passing it. Using the cast to avoid TS error
   const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (
-    <div className={css(styles.wizardOuterWrap, 'cluster-wizard-step')}>
-      <div className={css(styles.wizardInnerWrap)}>
+    <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
+      <div className={css('pf-v5-c-wizard__inner-wrap')}>
         {navigation}
         <WizardBody aria-labelledby="step-id" hasNoBodyPadding={false} activeStep={activeStep}>
           {children}
         </WizardBody>
       </div>
-      {footer && <div className="pf-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
+      {footer && <div className="pf-v5-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
     </div>
   );
 };
 
-export default ClusterWizardStep;
+// export default ClusterWizardStep;

package/lib/common/components/clusterWizard/ClusterWizardStepValidationsAlert.tsx

@@ -10,7 +10,10 @@ import {
   ListItem,
 } from '@patternfly/react-core';
 import { checkHostValidations, WizardStepsValidationMap } from './validationsInfoUtils';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  LastInstallationPreparation,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/clusters';
 import { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
 import { ClusterWizardStepHostStatusDeterminationObject } from '../../types/hosts';
@@ -20,6 +23,7 @@ import {
 } from './validationsInfoUtils';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { stringToJSON } from '../../utils';
+import { UISettingsValues } from '../../types';
 
 type ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType extends string> = {
   currentStepId: ClusterWizardStepsType;
@@ -28,6 +32,8 @@ type ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType extends strin
   hosts: ClusterWizardStepHostStatusDeterminationObject[];
   wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType>;
   children?: React.ReactNode;
+  lastInstallationPreparation?: LastInstallationPreparation | undefined;
+  uiSettings?: UISettingsValues;
 };
 
 const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string>({
@@ -37,7 +43,13 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
   hosts,
   wizardStepsValidationsMap,
   children,
+  lastInstallationPreparation,
+  uiSettings,
 }: ClusterWizardStepValidationsAlertProps<ClusterWizardStepsType>) => {
+  const [showInstallAlert, setShowInstallAlert] = React.useState(
+    lastInstallationPreparation && lastInstallationPreparation.status === 'failed',
+  );
+
   const { failedClusterValidations, failedHostnameValidations } = React.useMemo(() => {
     const reducedValidationsInfo = getWizardStepClusterValidationsInfo(
       validationsInfo || {},
@@ -64,6 +76,15 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
     };
   }, [validationsInfo, currentStepId, wizardStepsValidationsMap, hosts]);
 
+  React.useEffect(() => {
+    if (
+      lastInstallationPreparation?.reason?.includes('manifest') &&
+      uiSettings?.customManifestsUpdated
+    ) {
+      setShowInstallAlert(false);
+    }
+  }, [lastInstallationPreparation, uiSettings]);
+
   const isClusterReady =
     getWizardStepClusterStatus(
       currentStepId,
@@ -111,6 +132,15 @@ const ClusterWizardStepValidationsAlert = <ClusterWizardStepsType extends string
           </Alert>
         </AlertGroup>
       )}
+      {showInstallAlert && (
+        <AlertGroup>
+          <Alert variant={AlertVariant.danger} title="Error in preparing installation" isInline>
+            <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>
+              <FlexItem>{lastInstallationPreparation?.reason}</FlexItem>
+            </Flex>
+          </Alert>
+        </AlertGroup>
+      )}
     </>
   );
 };

package/lib/common/components/clusterWizard/ReviewHostsInventory.tsx

@@ -1,9 +1,10 @@
-import { Table, TableBody, TableVariant } from '@patternfly/react-table';
 import * as React from 'react';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import type { Inventory, Host } from '@openshift-assisted/types/assisted-installer-service';
 import { getEnabledHosts } from '../hosts';
 import { getSimpleHardwareInfo } from '../hosts/hardwareInfo';
 import { fileSize, stringToJSON } from '../../utils';
+import { genericTableRowKey } from '../ui';
 
 const ReviewHostsInventory = ({ hosts = [] }: { hosts?: Host[] }) => {
   const rows = React.useMemo(() => {
@@ -29,31 +30,41 @@ const ReviewHostsInventory = ({ hosts = [] }: { hosts?: Host[] }) => {
 
     return [
       {
-        cells: ['Hosts', summary.count],
+        cells: [{ title: 'Hosts' }, { title: summary.count }],
+        rowId: 'hosts',
       },
       {
-        cells: ['Total cores', summary.cores],
+        cells: [{ title: 'Total cores' }, { title: summary.cores }],
+        rowId: 'total-cores',
       },
       {
-        cells: ['Total memory', fileSize(summary.memory, 2, 'iec')],
+        cells: [{ title: 'Total memory' }, { title: fileSize(summary.memory, 2, 'iec') }],
+        rowId: 'total-memory',
       },
       {
-        cells: ['Total storage', fileSize(summary.fs, 2, 'si')],
+        cells: [{ title: 'Total storage' }, { title: fileSize(summary.fs, 2, 'si') }],
+        rowId: 'total-storage',
       },
     ];
   }, [hosts]);
 
   return (
     <Table
-      rows={rows}
       data-testid="review-host-inventory-table"
-      cells={['', '']}
       variant={TableVariant.compact}
       borders={false}
       aria-label="Cluster summary table"
       className="review-table"
     >
-      <TableBody />
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`}>{cell.title}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -5,8 +5,7 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+
 import {
   ValidationsInfo as ClusterValidationsInfo,
   Validation as ClusterValidation,
@@ -31,6 +30,7 @@ import {
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { getKeys, stringToJSON } from '../../utils';
+import { UiIcon } from '../ui';
 
 const AllValidationsPassed = () => {
   const { t } = useTranslation();
@@ -121,9 +121,9 @@ const FailingValidation = <S extends string>({
 
   let icon;
   if (severity === 'warning') {
-    icon = <ExclamationTriangleIcon color={warningColor.value} />;
+    icon = <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
   } else {
-    icon = <ExclamationCircleIcon color={dangerColor.value} size="sm" />;
+    icon = <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
   }
 
   return (

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,7 +79,9 @@ export const getClusterDetailsInitialValues = ({
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'none',
+    customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
+    controlPlaneCount: cluster?.controlPlaneCount || 3,
   };
 };
 
@@ -88,7 +93,6 @@ export const getClusterDetailsValidationSchema = ({
   validateUniqueName,
   isOcm,
   t,
-  newFeatureSupportLevels,
 }: {
   usedClusterNames: string[];
   featureSupportLevels?: FeatureSupportLevelData;
@@ -97,9 +101,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 +121,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,7 +32,9 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
+  customOpenshiftSelect: OpenshiftVersionOptionType | null;
   userManagedNetworking: boolean;
+  controlPlaneCount: number;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {
@@ -67,3 +70,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}