@openshift-assisted/ui-lib 2.54.2 → 2.55.1

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,68 +1,47 @@
 import * as React from 'react';
-import {
-  ClusterWizardStep,
-  TechnologyPreview,
-  ExternalLink,
-  OCP_RELEASES_PAGE,
-  StaticTextField,
-  useTranslation,
-} from '../../../../common';
+import { ClusterWizardStep, TechnologyPreview, StaticTextField } from '../../../../common';
 import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
-import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
-import { Formik } from 'formik';
+
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
 
 const BasicStep = () => {
-  const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
 
   return (
-    <Formik
-      initialValues={{}}
-      onSubmit={() => {
-        // nothing to do
-      }}
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={<ClusterWizardFooter onNext={moveNext} />}
     >
-      <ClusterWizardStep
-        navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
-      >
-        <WithErrorBoundary title="Failed to load Basic step">
-          <Grid hasGutter>
-            <GridItem>
-              <Content component="h2">Basic information</Content>
-            </GridItem>
-            <GridItem>
-              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                <TechnologyPreview />
-                <InstallDisconnectedSwitch />
-                <span>
-                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                </span>
-              </Flex>
-            </GridItem>
-            <GridItem>
-              <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
-                  <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-                    <span data-ouia-id="openshift-releases-link">
-                      {t('ai:Learn more about OpenShift releases')}
-                    </span>
-                  </ExternalLink>
-                </OcmOpenShiftVersion>
-                <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
-                  x86_64
-                </StaticTextField>
-              </Form>
-            </GridItem>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
-    </Formik>
+      <WithErrorBoundary title="Failed to load Basic step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Basic information</Content>
+          </GridItem>
+          <GridItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+              <TechnologyPreview />
+              <InstallDisconnectedSwitch />
+              <span>I'm installing on a disconnected/air-gapped/secured environment</span>
+            </Flex>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-basic-info__form">
+              <StaticTextField name="openshiftVersion" label="OpenShift version">
+                {DISCONNECTED_OPENSHIFT_VERSION}
+              </StaticTextField>
+              <StaticTextField name="cpuArchitecture" label="CPU architecture">
+                x86_64
+              </StaticTextField>
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
   );
 };
 

package/lib/ocm/components/clusterWizard/disconnected/OptionalConfigurationsStep.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import { AlertVariant } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  ClusterWizardStep,
+  PullSecret,
+  UploadSSH,
+  handleApiError,
+  getApiErrorMessage,
+  isInOcm,
+  pullSecretValidationSchema,
+  sshPublicKeyValidationSchema,
+  useAlerts,
+  useTranslation,
+} from '../../../../common';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { InfraEnvsAPI, ClustersAPI } from '../../../services/apis';
+import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+
+const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
+const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
+
+type OptionalConfigurationsValues = {
+  sshPublicKey: string;
+  pullSecret: string;
+};
+
+type OptionalConfigurationsFormProps = {
+  defaultPullSecret?: string;
+  isSubmitting: boolean;
+};
+
+const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
+  defaultPullSecret,
+  isSubmitting,
+}) => {
+  const { moveBack } = useClusterWizardContext();
+  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+
+  return (
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          onBack={moveBack}
+          isSubmitting={isSubmitting}
+          isNextDisabled={!isValid}
+        />
+      }
+    >
+      <WithErrorBoundary title="Failed to load Optional configurations step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Optional configurations</Content>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-optional-config__form">
+              <UploadSSH />
+              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+const OptionalConfigurationsStep = () => {
+  const { t } = useTranslation();
+  const {
+    moveNext,
+    disconnectedCluster,
+    setDisconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
+  } = useClusterWizardContext();
+  const { addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const defaultPullSecret = usePullSecret();
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object({
+        sshPublicKey: sshPublicKeyValidationSchema(t),
+        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+      }),
+    [t],
+  );
+
+  const initialValues: OptionalConfigurationsValues = {
+    sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: OptionalConfigurationsValues) => {
+      clearAlerts();
+      setIsSubmitting(true);
+      try {
+        const pullSecretToUse = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
+
+        if (disconnectedCluster?.id && disconnectedInfraEnv?.id) {
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, {
+            sshAuthorizedKey: values.sshPublicKey,
+          });
+          setDisconnectedInfraEnv(updatedInfraEnv);
+        } else {
+          const { data: cluster } = await ClustersAPI.registerDisconnected({
+            name: DISCONNECTED_CLUSTER_NAME,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+          });
+          setDisconnectedCluster(cluster);
+
+          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
+            name: 'disconnected-infra-env',
+            pullSecret: pullSecretToUse,
+            clusterId: cluster.id,
+            imageType: DISCONNECTED_IMAGE_TYPE,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+            sshAuthorizedKey: values.sshPublicKey || undefined,
+          });
+          setDisconnectedInfraEnv(createdInfraEnv);
+        }
+
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save optional configurations',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<OptionalConfigurationsValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <OptionalConfigurationsForm
+        defaultPullSecret={defaultPullSecret}
+        isSubmitting={isSubmitting}
+      />
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -26,15 +26,13 @@ import {
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
-
-const downloadUrl =
-  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
 
 const ReviewStep = () => {
-  const { moveBack } = useClusterWizardContext();
+  const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
   const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
@@ -50,8 +48,8 @@ const ReviewStep = () => {
         footer={
           <ClusterWizardFooter
             onNext={() => {
-              downloadUrl && saveAs(downloadUrl);
-              navigate('/cluster-list');
+              saveAs(disconnectedInfraEnv?.downloadUrl ?? '');
+              void navigate('/cluster-list');
             }}
             onBack={moveBack}
             nextButtonText="Download ISO"
@@ -98,11 +96,15 @@ const ReviewStep = () => {
             <DescriptionList isHorizontal>
               <DescriptionListGroup>
                 <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.20</DescriptionListDescription>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.openshiftVersion ?? DISCONNECTED_OPENSHIFT_VERSION}
+                </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>CPU architecture</DescriptionListTerm>
-                <DescriptionListDescription>x86_64</DescriptionListDescription>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+                </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>ISO size</DescriptionListTerm>

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

@@ -34,6 +34,7 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
+  | 'disconnected-optional-configurations'
   | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
@@ -52,6 +53,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
+  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -323,6 +325,7 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
+const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -338,6 +341,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   review: reviewStepValidationsMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
+  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { isInOcm } from '../../../common/api';
 
 const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams, Navigate } from 'react-router-dom-v5-compat';
+import { useParams, Navigate } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { PageSection, Content } from '@patternfly/react-core';
 import {

package/lib/ocm/components/clusters/Clusters.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Button, ButtonVariant, Content, PageSection } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
 import {
@@ -85,7 +85,7 @@ const Clusters = () => {
             primaryAction={
               <Button
                 variant={ButtonVariant.primary}
-                onClick={() => navigate(`~new`)}
+                onClick={() => void navigate(`~new`)}
                 id="empty-state-new-cluster-button"
                 data-ouia-id="button-create-new-cluster"
               >

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import {
   Toolbar,
   ToolbarItem,
@@ -172,7 +172,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         </CustomToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}
-          onClick={() => navigate(`~new`)}
+          onClick={() => void navigate(`~new`)}
           id="button-create-new-cluster"
           data-ouia-id="button-create-new-cluster"
         >

package/lib/ocm/components/ui/Buttons/BackButton.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps } from 'react-router-dom-v5-compat';
+import { Link, LinkProps } from 'react-router';
 import type { ButtonProps } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 import React from 'react';

package/lib/ocm/services/ClustersService.ts

@@ -5,6 +5,7 @@ import type {
 } from '../components/clusterConfiguration/manifestsConfiguration/data/dataTypes';
 import type {
   Cluster,
+  DisconnectedClusterCreateParams,
   Host,
   InfraEnvCreateParams,
   UpdateManifestParams,
@@ -122,6 +123,10 @@ const ClustersService = {
     return cluster;
   },
 
+  registerDisconnected(params: DisconnectedClusterCreateParams) {
+    return ClustersAPI.registerDisconnected(params);
+  },
+
   transformFormViewManifest(manifest: CustomManifestValues) {
     return {
       folder: manifest.folder,

package/lib/ocm/store/slices/clusters/selectors.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { createSelector } from '@reduxjs/toolkit';
+import type { Selector } from 'reselect';
 import type { IRow, IRowData } from '@patternfly/react-table';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import type { TFunction } from 'i18next';
 import {
   DASH,
@@ -22,7 +23,7 @@ const selectClusters = (state: RootStateDay1) =>
   state.clusters.data.filter((c) => c.kind !== 'DisconnectedCluster');
 const clustersUIState = (state: RootStateDay1) => state.clusters.uiState;
 
-export const selectClustersUIState = createSelector(
+export const selectClustersUIState: (state: RootStateDay1) => ResourceUIState = createSelector(
   [selectClusters, clustersUIState],
   (clusters, uiState): ResourceUIState => {
     const { LOADED, EMPTY } = ResourceUIState;
@@ -95,13 +96,14 @@ const clusterToClusterTableRow = (cluster: Cluster, t: TFunction): IRow => {
 export const getClusterTableStatusCell = (rowData: IRowData) =>
   rowData?.cells?.[3] as HumanizedSortable;
 
-export const selectClusterTableRows = (t: TFunction) => {
+export const selectClusterTableRows = (t: TFunction): Selector<RootStateDay1, ClusterTableRows> => {
   return createSelector(
     selectClusters,
     (clusters): ClusterTableRows => clusters.map((c) => clusterToClusterTableRow(c, t)),
   );
 };
 
-export const selectClusterNames = createSelector(selectClusters, (clusters) =>
-  clusters.map((c) => c.name),
+export const selectClusterNames: Selector<RootStateDay1, (string | undefined)[]> = createSelector(
+  selectClusters,
+  (clusters) => clusters.map((c) => c.name),
 );

package/lib/ocm/store/slices/feature-flags/selectors.ts

@@ -1,12 +1,15 @@
 import type { FeatureListType } from '../../../../common/features/featureGate';
 import type { RootStateDay1 } from '../../store-day1';
 import { createSelector } from '@reduxjs/toolkit';
+import type { Selector } from 'reselect';
 
 export const selectFeatureFlagsSlice = (state: RootStateDay1) => state.featureFlags;
 
-export const isFeatureEnabled = (featureId: keyof FeatureListType) =>
+export const isFeatureEnabled = (
+  featureId: keyof FeatureListType,
+): Selector<RootStateDay1, boolean> =>
   createSelector(
     selectFeatureFlagsSlice,
-    (featureFlags: ReturnType<typeof selectFeatureFlagsSlice>) =>
+    (featureFlags: ReturnType<typeof selectFeatureFlagsSlice>): boolean =>
       featureFlags.data[featureId] ?? false,
   );

package/lib/ocm/store/slices/infra-envs/selectors.ts

@@ -1,10 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
+import type { Selector } from 'reselect';
 import type { RootStateDay1 } from '../../store-day1';
 import type { CpuArchitecture } from '../../../../common';
+import type { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export const selectInfraEnvsSlice = (state: RootStateDay1) => state.infraEnvs;
 export const selectInfraEnvByCpuArchitecture = createSelector(
   [selectInfraEnvsSlice, (_: RootStateDay1, cpuArchitecture: CpuArchitecture) => cpuArchitecture],
-  (infraEnvs, cpuArchitecture) =>
+  (infraEnvs, cpuArchitecture): InfraEnv | undefined =>
     infraEnvs.find((infraEnv) => infraEnv.cpuArchitecture === cpuArchitecture),
-);
+) as Selector<RootStateDay1, InfraEnv | undefined, [CpuArchitecture]>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.54.2",
-    "@openshift-assisted/types": "2.54.2",
-    "@openshift-console/dynamic-plugin-sdk": "^4.19.1",
+    "@openshift-assisted/locales": "2.55.1",
+    "@openshift-assisted/types": "2.55.1",
+    "@openshift-console/dynamic-plugin-sdk": "^4.22.0",
     "@patternfly/patternfly": "6.4.0",
     "@patternfly/react-code-editor": "6.4.1",
     "@patternfly/react-core": "6.4.1",
@@ -13,7 +13,7 @@
     "@react-hook/resize-observer": "^2.0.2",
     "axios-case-converter": "^0.11.1",
     "camel-case": "^4.1.2",
-    "cidr-tools": "^4.3.0",
+    "cidr-tools": "^12.1.1",
     "classnames": "^2.3.1",
     "file-saver": "^2.0.2",
     "filesize.js": "^2.0.0",
@@ -41,7 +41,7 @@
     "@types/humanize-plus": "^1.8.2",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.12.4",
+    "@types/node": "^24.13.3",
     "@types/react": "18.2.37",
     "@types/react-autosuggest": "^10.1.5",
     "@types/react-dom": "18.2.15",
@@ -91,7 +91,7 @@
   "peerDependencies": {
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^5.9 || ^6",
-    "axios": "^1.15.2",
+    "axios": "^1.18.1",
     "i18next": "^20.4 || ^21",
     "monaco-editor": "^0.44.0 || ^0.55.0",
     "react": "^18",
@@ -99,7 +99,7 @@
     "react-i18next": ">11.7.3",
     "react-monaco-editor": "^0.55.0 || ^0.59.0",
     "react-redux": "^8.0.5",
-    "react-router-dom-v5-compat": "^6.30.3",
+    "react-router": "^7.17.0",
     "redux": "^4.2.1",
     "uuid": "^8.1",
     "yup": "^1.4.0"
@@ -136,5 +136,5 @@
       ]
     }
   },
-  "version": "2.54.2"
+  "version": "2.55.1"
 }