@openshift-assisted/ui-lib 2.51.2 → 2.52.1

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

@@ -39,7 +39,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
-  const pullSecret = usePullSecret();
   const {
     error: errorOCPVersions,
     loading: loadingOCPVersions,
@@ -47,6 +46,9 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   } = useOpenShiftVersionsContext();
   const location = useLocation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const fetchedPullSecret = usePullSecret(isSingleClusterFeatureEnabled);
+  /** With a cluster resource, never pre-fill the form with a pull secret (API does not return it); new-cluster flow uses the hook default. */
+  const pullSecretForForm = cluster ? '' : fetchedPullSecret ?? '';
 
   const handleClusterUpdate = React.useCallback(
     async (clusterId: Cluster['id'], params: ClusterDetailsUpdateParams) => {
@@ -59,7 +61,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           params,
         );
         dispatch(updateCluster(updatedCluster));
-
         canNextClusterDetails({ cluster: updatedCluster }) && clusterWizardContext.moveNext();
       } catch (e) {
         handleApiError(e, () =>
@@ -140,7 +141,12 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;
-  if (pullSecret === undefined || !managedDomains || loadingOCPVersions || !usedClusterNames) {
+  if (
+    (!cluster && fetchedPullSecret === undefined) ||
+    !managedDomains ||
+    loadingOCPVersions ||
+    !usedClusterNames
+  ) {
     return (
       <ClusterWizardStep navigation={navigation}>
         <LoadingState />
@@ -162,7 +168,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   return (
     <ClusterDetailsForm
       cluster={cluster}
-      pullSecret={pullSecret}
+      pullSecret={pullSecretForForm}
       managedDomains={managedDomains}
       ocpVersions={versions}
       usedClusterNames={usedClusterNames}

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

@@ -81,14 +81,19 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         ) {
           resetPlatform = 'baremetal';
         }
-        const params = ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
+        const params = ClusterDetailsService.getClusterUpdateParams(
+          values,
+          resetPlatform,
+          cluster,
+          infraEnv,
+        );
         await handleClusterUpdate(cluster.id, params);
       } else {
-        const params = ClusterDetailsService.getClusterCreateParams(values);
+        const params = ClusterDetailsService.getClusterCreateParams(values, infraEnv);
         await handleClusterCreate(params);
       }
     },
-    [cluster, handleClusterCreate, handleClusterUpdate],
+    [cluster, infraEnv, handleClusterCreate, handleClusterUpdate],
   );
 
   const handleOnNext = React.useCallback(
@@ -166,11 +171,11 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
                   <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                    <TechnologyPreview />
                     <InstallDisconnectedSwitch isDisabled={!!cluster} />
                     <span>
                       {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
                     </span>
+                    <TechnologyPreview />
                   </Flex>
                 </GridItem>
               )}

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

@@ -13,16 +13,13 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { defaultWizardSteps, staticIpFormViewSubSteps } from './constants';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { getStaticIpInfo } from '../clusterConfiguration/staticIp/data/fromInfraEnv';
-import {
-  AssistedInstallerOCMPermissionTypesListType,
-  useAlerts,
-  isThirdPartyCNI,
-} from '../../../common';
+import { AssistedInstallerOCMPermissionTypesListType, useAlerts } from '../../../common';
 import useSetClusterPermissions from '../../hooks/useSetClusterPermissions';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { useUISettings } from '../../hooks';
 import { AlertVariant } from '@patternfly/react-core';
 import { useFeature } from '../../hooks/use-feature';
+import { isThirdPartyCNI } from '../../../common/types/networkType';
 import { isOciPlatformType } from '../utils';
 
 const addStepToClusterWizard = (

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

@@ -19,6 +19,7 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
+
   return (
     <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
       {getCurrentStep(currentStepId)}

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

@@ -3,34 +3,23 @@ import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core'
 import { Link } from 'react-router-dom-v5-compat';
 import { isInOcm } from '../../../common/api';
 
-const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
-  <PageSection hasBodyWrapper={false}>
-    {(clusterName || isInOcm) && (
-      <Breadcrumb data-testid="cluster-breadcrumbs">
-        {isInOcm && (
-          <BreadcrumbItem
-            data-testid="cluster-list-breadcrumb"
-            render={() => <Link to={'/cluster-list'}>Cluster List</Link>}
-          />
-        )}
-
-        {clusterName ? (
+const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {
+  return (
+    !isInOcm && (
+      <PageSection hasBodyWrapper={false}>
+        <Breadcrumb data-testid="cluster-breadcrumbs">
           <BreadcrumbItem data-testid="assisted-clusters-breadcrumb">
             <Link to={`..`}>Assisted Clusters</Link>
           </BreadcrumbItem>
-        ) : (
-          <BreadcrumbItem isActive data-testid="assisted-clusters-breadcrumb">
-            Assisted Clusters
-          </BreadcrumbItem>
-        )}
-        {clusterName && (
-          <BreadcrumbItem data-testid="cluster-breadcrumb" isActive>
-            {clusterName}
-          </BreadcrumbItem>
-        )}
-      </Breadcrumb>
-    )}
-  </PageSection>
-);
+          {clusterName && (
+            <BreadcrumbItem data-testid="cluster-breadcrumb" isActive>
+              {clusterName}
+            </BreadcrumbItem>
+          )}
+        </Breadcrumb>
+      </PageSection>
+    )
+  );
+};
 
 export default ClusterBreadcrumbs;

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

@@ -15,7 +15,6 @@ import {
 import ClustersTable from './ClustersTable';
 import { fetchClustersAsync, deleteCluster } from '../../store/slices/clusters/slice';
 import { handleApiError, getApiErrorMessage } from '../../../common/api';
-import ClusterBreadcrumbs from './ClusterBreadcrumbs';
 import { ClustersService } from '../../services';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import ClusterPollingErrorModal from '../clusterDetail/ClusterPollingErrorModal';
@@ -106,7 +105,6 @@ const Clusters = () => {
       } else {
         return (
           <>
-            <ClusterBreadcrumbs />
             <PageSection hasBodyWrapper={false}>
               <Content component="h1">Assisted Clusters</Content>
             </PageSection>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Table,
+  TableText,
   Thead,
   Tr,
   Th,
@@ -167,7 +168,7 @@ const ClustersTable = ({ rows, deleteCluster }: ClustersTableProps) => {
                 width={col.cellWidth as BaseCellProps['width']}
                 sort={getSortParams(i)}
               >
-                {col.title}
+                <TableText>{col.title}</TableText>
               </Th>
             ))}
             <Th key="col-action" />
@@ -176,15 +177,14 @@ const ClustersTable = ({ rows, deleteCluster }: ClustersTableProps) => {
         <Tbody>
           {sortedRows.map((row, i) => (
             <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
-              {row.cells?.map((cell, j) => (
-                <Td
-                  dataLabel={columns[j].title}
-                  key={`cell-${i}-${j}`}
-                  {...(cell as HumanizedSortable).props}
-                >
-                  {(cell as HumanizedSortable)?.title}
-                </Td>
-              ))}
+              {row.cells?.map((cell, j) => {
+                const humanized = cell as HumanizedSortable;
+                return (
+                  <Td dataLabel={columns[j].title} key={`cell-${i}-${j}`} {...humanized.props}>
+                    <TableText wrapModifier="breakWord">{humanized?.title}</TableText>
+                  </Td>
+                );
+              })}
               <Td isActionCell>
                 <ActionsColumn
                   items={[

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

@@ -13,7 +13,7 @@ import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 import { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
 import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 
-const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) => {
+export const NewClusterPage = () => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
@@ -24,7 +24,7 @@ const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) =
           >
             <OpenShiftVersionsContextProvider>
               <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
-                {children}
+                <ClusterBreadcrumbs clusterName="New cluster" />
                 <PageSection hasBodyWrapper={false} isFilled>
                   <AssistedInstallerHeader />
                 </PageSection>
@@ -41,10 +41,3 @@ const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) =
     </AlertsContextProvider>
   );
 };
-
-export const NewSingleClusterPage = () => <NewClusterPageGeneric />;
-export const NewClusterPage = () => (
-  <NewClusterPageGeneric>
-    <ClusterBreadcrumbs clusterName="New cluster" />
-  </NewClusterPageGeneric>
-);

package/lib/ocm/hooks/usePullSecret.ts

@@ -1,27 +1,52 @@
 import React from 'react';
-import { getApiErrorMessage, handleApiError } from '../../common/api';
+import { getApiErrorMessage, handleApiError, isInOcm } from '../../common/api';
 import { useAlerts } from '../../common';
 import { AccessTokenAPI } from '../../common/api/accounts-management-service/access-token-api';
 
-export default function usePullSecret() {
+/**
+ * Standalone / disconnected UI: bridge serves GET /pull-secret from a mounted manifest
+ * (see assisted-disconnected-ui proxy).
+ */
+async function fetchPullSecretFromBridge(): Promise<string | undefined> {
+  const res = await fetch('/api/pull-secret', { credentials: 'same-origin' });
+  if (!res.ok) {
+    throw new Error(`Unexpected status code ${res.status}`);
+  }
+  const text = (await res.text()).trim();
+  return text || undefined;
+}
+
+export default function usePullSecret(isSingleClusterFeatureEnabled?: boolean) {
   const [pullSecret, setPullSecret] = React.useState<string>();
   const { addAlert } = useAlerts();
 
   const getPullSecret = React.useCallback(async () => {
     try {
-      const accessTokenCfg = await AccessTokenAPI.fetchPullSecret();
-      if (accessTokenCfg) {
-        setPullSecret(JSON.stringify(accessTokenCfg)); // unmarshalled response as a string
-      } else {
-        setPullSecret('');
+      if (isInOcm) {
+        const accessTokenCfg = await AccessTokenAPI.fetchPullSecret();
+        if (accessTokenCfg) {
+          setPullSecret(JSON.stringify(accessTokenCfg)); // unmarshalled response as a string
+        } else {
+          setPullSecret('');
+        }
+        return;
       }
+
+      if (isSingleClusterFeatureEnabled) {
+        const fromBridge = await fetchPullSecretFromBridge();
+        setPullSecret(fromBridge ?? '');
+        return;
+      }
+
+      // Non-OCM multinode flow: user enters pull secret manually.
+      setPullSecret('');
     } catch (e) {
       handleApiError(e, (e) => {
         setPullSecret('');
         addAlert({ title: 'Failed to retrieve pull secret', message: getApiErrorMessage(e) });
       });
     }
-  }, [addAlert]);
+  }, [addAlert, isSingleClusterFeatureEnabled]);
 
   React.useEffect(() => {
     if (!pullSecret) {

package/lib/ocm/services/ClusterDetailsService.ts

@@ -33,8 +33,18 @@ const getExistingClusterCpuArchitecture = (infraEnv: InfraEnv) => {
   return infraEnv.cpuArchitecture || getDefaultCpuArchitecture();
 };
 
+const ntpSourceForCluster = (cluster?: Cluster, infraEnv?: InfraEnv): string | undefined => {
+  const fromCluster = cluster?.additionalNtpSource?.trim();
+  const fromInfra = infraEnv?.additionalNtpSources?.trim();
+  const merged = fromCluster || fromInfra;
+  return merged || undefined;
+};
+
 const ClusterDetailsService = {
-  getClusterCreateParams(values: OcmClusterDetailsValues): ClusterCreateParamsWithStaticNetworking {
+  getClusterCreateParams(
+    values: OcmClusterDetailsValues,
+    infraEnv?: InfraEnv,
+  ): ClusterCreateParamsWithStaticNetworking {
     const params: ClusterCreateParamsWithStaticNetworking = {
       name: values.name,
       controlPlaneCount: toNumber(values.controlPlaneCount),
@@ -72,12 +82,19 @@ const ClusterDetailsService = {
       delete params.platform;
     }
 
+    const ntp = ntpSourceForCluster(undefined, infraEnv);
+    if (ntp) {
+      params.additionalNtpSource = ntp;
+    }
+
     return params;
   },
 
   getClusterUpdateParams(
     values: OcmClusterDetailsValues,
     platform: PlatformType,
+    cluster?: Cluster,
+    infraEnv?: InfraEnv,
   ): ClusterDetailsUpdateParams {
     const params: ClusterDetailsUpdateParams = {
       name: values.name,
@@ -98,6 +115,11 @@ const ClusterDetailsService = {
           : { type: platform };
     }
 
+    const ntp = ntpSourceForCluster(cluster, infraEnv);
+    if (ntp) {
+      params.additionalNtpSource = ntp;
+    }
+
     return params;
   },
 

package/lib/ocm/services/ClustersService.ts

@@ -40,7 +40,7 @@ const ClustersService = {
       pullSecret: params.pullSecret,
       clusterId: cluster.id,
       openshiftVersion: params.openshiftVersion,
-      cpuArchitecture: params.cpuArchitecture as InfraEnvCreateParams['cpuArchitecture'],
+      cpuArchitecture: params.cpuArchitecture,
       staticNetworkConfig: params.staticNetworkConfig,
     };
 

package/lib/ocm/services/types.ts

@@ -7,7 +7,7 @@ import {
 
 export type ClusterDetailsUpdateParams = Pick<
   V2ClusterUpdateParams,
-  'name' | 'baseDnsDomain' | 'pullSecret' | 'platform'
+  'name' | 'baseDnsDomain' | 'pullSecret' | 'platform' | 'additionalNtpSource'
 >;
 
 export type ClusterCreateParamsWithStaticNetworking = ClusterCreateParams & {

package/package.json

@@ -1,14 +1,14 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.51.2",
-    "@openshift-assisted/types": "2.51.2",
-    "@openshift-console/dynamic-plugin-sdk": "1.0.0",
+    "@openshift-assisted/locales": "2.52.1",
+    "@openshift-assisted/types": "2.52.1",
+    "@openshift-console/dynamic-plugin-sdk": "^4.19.1",
     "@patternfly/patternfly": "6.4.0",
-    "@patternfly/react-code-editor": "6.4.0",
-    "@patternfly/react-core": "6.4.0",
+    "@patternfly/react-code-editor": "6.4.1",
+    "@patternfly/react-core": "6.4.1",
     "@patternfly/react-icons": "6.4.0",
     "@patternfly/react-styles": "6.4.0",
-    "@patternfly/react-table": "6.4.0",
+    "@patternfly/react-table": "6.4.1",
     "@patternfly/react-tokens": "6.4.0",
     "@react-hook/resize-observer": "^2.0.2",
     "axios-case-converter": "^0.11.1",
@@ -41,7 +41,7 @@
     "@types/humanize-plus": "^1.8.0",
     "@types/js-yaml": "^4.0.1",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.14.6",
+    "@types/node": "^24.0.0",
     "@types/react": "18.2.37",
     "@types/react-autosuggest": "^10.1.5",
     "@types/react-dom": "18.2.15",
@@ -93,11 +93,11 @@
     "@sentry/browser": "^5.9 || ^6",
     "axios": "^1.13.5",
     "i18next": "^20.4 || ^21",
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.44.0 || ^0.55.0",
     "react": "^18",
     "react-dom": "^18",
     "react-i18next": ">11.7.3",
-    "react-monaco-editor": "^0.55.0",
+    "react-monaco-editor": "^0.55.0 || ^0.59.0",
     "react-redux": "^8.0.5",
     "react-router-dom-v5-compat": "^6.30.3",
     "redux": "^4",
@@ -136,5 +136,5 @@
       ]
     }
   },
-  "version": "2.51.2"
+  "version": "2.52.1"
 }