@openshift-assisted/ui-lib 2.49.0 → 2.50.0

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/yamlViewValidationSchema.tsx

@@ -1,12 +1,15 @@
 import * as Yup from 'yup';
-import { ArrayElementType, macAddressValidationSchema } from '../../../../../../common';
+import {
+  ArrayElementType,
+  getIncorrectFileTypeMessage,
+  macAddressValidationSchema,
+} from '../../../../../../common';
 import { YamlViewValues } from '../../data/dataTypes';
 import {
   getUniqueValidationSchema,
   UniqueStringArrayExtractor,
 } from '../../commonValidationSchemas';
 import {
-  INCORRECT_TYPE_FILE_MESSAGE,
   getMaxFileSizeMessage,
   validateFileSize,
   validateFileType,
@@ -15,13 +18,13 @@ import {
   HostStaticNetworkConfig,
   MacInterfaceMap,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { TFunction } from 'i18next';
 
-const requiredMsg = 'A value is required';
-
-const networkYamlValidationSchema = Yup.string()
-  .required(requiredMsg)
-  .test('file-size-limit', getMaxFileSizeMessage, validateFileSize)
-  .test('file-type-yaml', INCORRECT_TYPE_FILE_MESSAGE, validateFileType);
+const networkYamlValidationSchema = (t: TFunction) =>
+  Yup.string()
+    .required('Required field')
+    .test('file-size-limit', getMaxFileSizeMessage(t), validateFileSize)
+    .test('file-type-yaml', getIncorrectFileTypeMessage(t), validateFileType);
 
 const getAllMacAddresses: UniqueStringArrayExtractor<YamlViewValues> = (
   values: YamlViewValues,
@@ -59,24 +62,26 @@ const getInterfaceNamesInCurrentHost: UniqueStringArrayExtractor<YamlViewValues>
   });
 };
 
-const macInterfaceMapValidationSchema = Yup.array<MacInterfaceMap>().of(
-  Yup.object({
-    macAddress: macAddressValidationSchema
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getAllMacAddresses)),
-    logicalNicName: Yup.string()
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
-      .max(15, 'Interface name must be 15 characters at most.')
-      .matches(/^\S+$/, 'Interface name can not contain spaces.'),
-  }),
-);
-
-export const yamlViewValidationSchema = Yup.object({
-  hosts: Yup.array<HostStaticNetworkConfig>().of(
-    Yup.object().shape({
-      networkYaml: networkYamlValidationSchema,
-      macInterfaceMap: macInterfaceMapValidationSchema,
+const macInterfaceMapValidationSchema = (t: TFunction) =>
+  Yup.array<MacInterfaceMap>().of(
+    Yup.object({
+      macAddress: macAddressValidationSchema(t)
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getAllMacAddresses)),
+      logicalNicName: Yup.string()
+        .required('Required field')
+        .concat(getUniqueValidationSchema(getInterfaceNamesInCurrentHost))
+        .max(15, 'Interface name must be 15 characters at most.')
+        .matches(/^\S+$/, 'Interface name can not contain spaces.'),
     }),
-  ),
-});
+  );
+
+export const yamlViewValidationSchema = (t: TFunction) =>
+  Yup.object({
+    hosts: Yup.array<HostStaticNetworkConfig>().of(
+      Yup.object().shape({
+        networkYaml: networkYamlValidationSchema(t),
+        macInterfaceMap: macInterfaceMapValidationSchema(t),
+      }),
+    ),
+  });

package/lib/ocm/components/clusterDetail/ResetClusterModal.tsx

@@ -79,7 +79,8 @@ const ResetClusterModal: React.FC = () => {
         </Content>
 
         <Content component="p">
-          <strong>Download the installation logs</strong> to troubleshoot or report a bug.
+          <span className="pf-v6-u-font-weight-bold">Download the installation logs</span> to
+          troubleshoot or report a bug.
           <br />
           Currently, {collectedLogsPercentage}% of the installation logs were collected and are
           ready for download.

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -147,7 +147,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   if (!cluster && errorOCPVersions) {
     return (
       <ClusterWizardStep navigation={navigation}>
-        <ErrorState title="Failed to retrieve OpenShift versions" />
+        <ErrorState
+          title={errorOCPVersions.title || 'Failed to retrieve OpenShift versions'}
+          content={errorOCPVersions.message || 'No OpenShift versions available.'}
+        />
       </ClusterWizardStep>
     );
   }

package/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -9,7 +9,6 @@ import {
   ClusterWizardStepHeader,
   getClusterDetailsValidationSchema,
   getRichTextValidation,
-  CpuArchitecture,
   useAlerts,
   TechnologyPreview,
 } from '../../../common';
@@ -179,18 +178,10 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               <GridItem span={12} lg={10} xl={9} xl2={7}>
                 <OcmClusterDetailsFormFields
                   versions={ocpVersions}
-                  forceOpenshiftVersion={
-                    isSingleClusterFeatureEnabled
-                      ? ocpVersions[0].version
-                      : cluster?.openshiftVersion
-                  }
-                  isPullSecretSet={!!cluster?.pullSecretSet}
                   defaultPullSecret={pullSecret}
                   isOcm={isInOcm}
                   managedDomains={managedDomains}
-                  clusterExists={!!cluster}
-                  clusterCpuArchitecture={cluster?.cpuArchitecture as CpuArchitecture}
-                  clusterId={cluster?.id}
+                  cluster={cluster}
                 />
               </GridItem>
             </Grid>

package/lib/ocm/components/clusterWizard/ClusterWizardContext.tsx

@@ -3,6 +3,7 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -20,6 +21,14 @@ export type ClusterWizardContextType = {
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
+  /** Last pull secret submitted in disconnected Optional configurations (restored when going back from Review) */
+  disconnectedFormPullSecret?: string;
+  setDisconnectedFormPullSecret: (value: string | undefined) => void;
+  /** Whether "Edit pull secret" was checked when user last clicked Next (restored when going back from Review) */
+  disconnectedFormEditPullSecret?: boolean;
+  setDisconnectedFormEditPullSecret: (value: boolean) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -76,6 +76,33 @@ const getWizardStepIds = (
   return stepsCopy;
 };
 
+// Same logic as getWizardStepIds but for disconnected flow
+// Adds static IP steps after 'disconnected-optional-configurations' instead of 'cluster-details'
+const getDisconnectedWizardStepIds = (
+  wizardStepIds: ClusterWizardStepsType[] | undefined,
+  staticIpView?: StaticIpView | 'dhcp-selected',
+): ClusterWizardStepsType[] => {
+  let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...disconnectedSteps];
+  if (staticIpView === StaticIpView.YAML) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'disconnected-optional-configurations', [
+      'static-ip-yaml-view',
+    ]);
+  } else if (staticIpView === StaticIpView.FORM) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
+    stepsCopy = addStepToClusterWizard(
+      stepsCopy,
+      'disconnected-optional-configurations',
+      staticIpFormViewSubSteps,
+    );
+  } else if (staticIpView === 'dhcp-selected') {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
+  }
+
+  return stepsCopy;
+};
+
 const ClusterWizardContextProvider = ({
   children,
   cluster,
@@ -89,9 +116,17 @@ const ClusterWizardContextProvider = ({
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const [currentStepId, setCurrentStepId] = React.useState<ClusterWizardStepsType>();
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
+  const [disconnectedWizardStepIds, setDisconnectedWizardStepIds] =
+    React.useState<ClusterWizardStepsType[]>(disconnectedSteps);
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>(
+    infraEnv,
+  );
+  const [disconnectedFormPullSecret, setDisconnectedFormPullSecret] = React.useState<string>();
+  const [disconnectedFormEditPullSecret, setDisconnectedFormEditPullSecret] =
+    React.useState<boolean>();
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -103,7 +138,7 @@ const ClusterWizardContextProvider = ({
   const { clearAlerts, addAlert, alerts } = useAlerts();
   const setClusterPermissions = useSetClusterPermissions();
 
-  const wizardStepIds = installDisconnected ? disconnectedSteps : connectedWizardStepIds;
+  const wizardStepIds = installDisconnected ? disconnectedWizardStepIds : connectedWizardStepIds;
 
   React.useEffect(() => {
     if (!UISettingsLoading) {
@@ -162,17 +197,29 @@ const ClusterWizardContextProvider = ({
 
     const handleMoveFromStaticIp = () => {
       //if static ip view change wasn't persisted, moving from static ip step should change the wizard steps to match the view in the infra env
-      const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
+      const currentInfraEnv = installDisconnected ? disconnectedInfraEnv : infraEnv;
+      const staticIpInfo = currentInfraEnv ? getStaticIpInfo(currentInfraEnv) : undefined;
       if (!staticIpInfo) {
         throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
       }
-      const newStepIds = getWizardStepIds(
-        wizardStepIds,
-        staticIpInfo.view,
-        customManifestsStep,
-        isSingleClusterFeatureEnabled,
-      );
-      setWizardStepIds(newStepIds);
+
+      if (installDisconnected) {
+        // For disconnected wizard, update wizard steps directly (same pattern as connected)
+        const newStepIds = getDisconnectedWizardStepIds(
+          disconnectedWizardStepIds,
+          staticIpInfo.view,
+        );
+        setDisconnectedWizardStepIds(newStepIds);
+      } else {
+        // For connected wizard, update wizard steps directly
+        const newStepIds = getWizardStepIds(
+          wizardStepIds,
+          staticIpInfo.view,
+          customManifestsStep,
+          isSingleClusterFeatureEnabled,
+        );
+        setWizardStepIds(newStepIds);
+      }
     };
 
     const onSetCurrentStepId = (stepId: ClusterWizardStepsType) => {
@@ -216,31 +263,57 @@ const ClusterWizardContextProvider = ({
         } else {
           setCurrentStepId('static-ip-network-wide-configurations');
         }
-        setWizardStepIds(
-          getWizardStepIds(wizardStepIds, view, customManifestsStep, isSingleClusterFeatureEnabled),
-        );
-      },
-      onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
-        if (type === HostsNetworkConfigurationType.STATIC) {
-          setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              StaticIpView.FORM,
-              customManifestsStep,
-              isSingleClusterFeatureEnabled,
-            ),
+        if (installDisconnected) {
+          // For disconnected wizard, update wizard steps (same pattern as connected)
+          setDisconnectedWizardStepIds(
+            getDisconnectedWizardStepIds(disconnectedWizardStepIds, view),
           );
         } else {
           setWizardStepIds(
             getWizardStepIds(
               wizardStepIds,
-              'dhcp-selected',
+              view,
               customManifestsStep,
               isSingleClusterFeatureEnabled,
             ),
           );
         }
       },
+      onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
+        if (installDisconnected) {
+          // For disconnected wizard, update wizard steps (same pattern as connected)
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            setDisconnectedWizardStepIds(
+              getDisconnectedWizardStepIds(disconnectedWizardStepIds, StaticIpView.FORM),
+            );
+          } else {
+            setDisconnectedWizardStepIds(
+              getDisconnectedWizardStepIds(disconnectedWizardStepIds, 'dhcp-selected'),
+            );
+          }
+        } else {
+          // For connected wizard, update wizard steps directly
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            setWizardStepIds(
+              getWizardStepIds(
+                wizardStepIds,
+                StaticIpView.FORM,
+                customManifestsStep,
+                isSingleClusterFeatureEnabled,
+              ),
+            );
+          } else {
+            setWizardStepIds(
+              getWizardStepIds(
+                wizardStepIds,
+                'dhcp-selected',
+                customManifestsStep,
+                isSingleClusterFeatureEnabled,
+              ),
+            );
+          }
+        }
+      },
       wizardStepIds: wizardStepIds,
       currentStepId,
       setCurrentStepId: onSetCurrentStepId,
@@ -259,6 +332,12 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
+      disconnectedFormPullSecret,
+      setDisconnectedFormPullSecret,
+      disconnectedFormEditPullSecret,
+      setDisconnectedFormEditPullSecret,
     };
   }, [
     wizardStepIds,
@@ -271,8 +350,11 @@ const ClusterWizardContextProvider = ({
     uiSettings,
     updateUISettings,
     installDisconnected,
-    setInstallDisconnected,
     connectedWizardStepIds,
+    disconnectedWizardStepIds,
+    disconnectedInfraEnv,
+    disconnectedFormPullSecret,
+    disconnectedFormEditPullSecret,
   ]);
 
   if (!contextValue) {

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -17,6 +17,8 @@ import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
+import ClustersService from '../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../common/api';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -71,6 +73,7 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
+  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -80,19 +83,37 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
+  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts } = useAlerts();
+  const { alerts, addAlert } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { currentStepId } = useClusterWizardContext();
   const { resetSingleClusterDialog } = useModalDialogsContext();
+  const { setDisconnectedInfraEnv } = useClusterWizardContext();
 
-  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
+  const handleCancel = React.useCallback(async () => {
+    if (disconnectedClusterId) {
+      try {
+        await ClustersService.remove(disconnectedClusterId);
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to remove cluster',
+            message: getApiErrorMessage(e),
+          }),
+        );
+      }
+    }
+    setDisconnectedInfraEnv(undefined);
+    navigate('/cluster-list');
+  }, [navigate, setDisconnectedInfraEnv, addAlert, disconnectedClusterId]);
 
-  const handleReset = React.useCallback(() => {
-    resetSingleClusterDialog.open({ cluster });
-  }, [resetSingleClusterDialog, cluster]);
+  const handleReset = React.useCallback(
+    () => resetSingleClusterDialog.open({ cluster }),
+    [resetSingleClusterDialog, cluster],
+  );
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,7 +4,10 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
+import DisconnectedStaticIp from './disconnected/DisconnectedStaticIp';
 import { ClusterWizardStepsType } from './wizardTransition';
+import { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
   switch (currentStepId) {
@@ -12,6 +15,12 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
+    case 'static-ip-yaml-view':
+    case 'static-ip-network-wide-configurations':
+    case 'static-ip-host-configurations':
+      return <DisconnectedStaticIp />;
     default:
       return <ClusterDetails />;
   }
@@ -20,9 +29,11 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
   return (
-    <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId)}
-    </div>
+    <ModalDialogsContextProvider>
+      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
+        {getCurrentStep(currentStepId)}
+      </div>
+    </ModalDialogsContextProvider>
   );
 };
 

package/lib/ocm/components/clusterWizard/OpenShiftVersionsContext.tsx

@@ -23,6 +23,7 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
   const [allVersions, setAllVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
   const [latestVersions, setLatestVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
   const [error, setError] = React.useState<{ title: string; message: string }>();
+  const [isLoading, setIsLoading] = React.useState(true);
 
   const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
     return versions.sort((version1, version2) =>
@@ -30,8 +31,11 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
     );
   };
 
-  const getVersions = React.useCallback(
-    async (latest: boolean, setVersions: (versions: OpenshiftVersionOptionType[]) => void) => {
+  React.useEffect(() => {
+    const getVersions = async (
+      latest: boolean,
+      setVersions: (versions: OpenshiftVersionOptionType[]) => void,
+    ) => {
       try {
         const { data } = await SupportedOpenshiftVersionsAPI.list(latest);
 
@@ -49,7 +53,15 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
           };
         }) as OpenshiftVersionOptionType[];
 
-        setVersions(sortVersions(versions));
+        const sorted = sortVersions(versions);
+        setVersions(sorted);
+
+        if (!latest && sorted.length === 0) {
+          setError({
+            title: 'Failed to retrieve list of supported OpenShift versions.',
+            message: 'No OpenShift versions available.',
+          });
+        }
       } catch (e) {
         handleApiError(e, (e) => {
           setError({
@@ -58,21 +70,13 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
           });
         });
       }
-    },
-    [],
-  );
+    };
 
-  React.useEffect(() => {
-    if (!allVersions.length) {
-      void getVersions(false, setAllVersions);
-    }
-  }, [allVersions, getVersions]);
-
-  React.useEffect(() => {
-    if (!latestVersions.length) {
-      void getVersions(true, setLatestVersions);
-    }
-  }, [getVersions, latestVersions]);
+    void Promise.allSettled([
+      getVersions(false, setAllVersions),
+      getVersions(true, setLatestVersions),
+    ]).finally(() => setIsLoading(false));
+  }, []);
 
   const findVersionItemByVersion = React.useCallback(
     (version: OpenShiftVersion) => {
@@ -111,7 +115,7 @@ export const OpenShiftVersionsContextProvider = ({ children }: { children: React
       value={{
         allVersions,
         latestVersions,
-        loading: !error && (allVersions?.length === 0 || latestVersions?.length === 0),
+        loading: !error && isLoading,
         error,
         isSupportedOpenShiftVersion,
         getCpuArchitectures,

package/lib/ocm/components/clusterWizard/OperatorsSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExpandableSection, Stack, StackItem } from '@patternfly/react-core';
+import { Content, ExpandableSection, Stack, StackItem } from '@patternfly/react-core';
 import {
   Bundle,
   Cluster,
@@ -106,7 +106,7 @@ const OperatorsSelect = ({
             return (
               <React.Fragment key={categoryName}>
                 <StackItem>
-                  <strong>{categoryName}</strong>
+                  <Content className="pf-v6-u-font-weight-bold">{categoryName}</Content>
                 </StackItem>
                 {categoryOperators.map((spec) => (
                   <StackItem key={spec.operatorKey}>

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [