@openshift-assisted/ui-lib 2.50.0 → 2.51.0

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

@@ -5,7 +5,7 @@ import {
   DetailList,
   getDefaultCpuArchitecture,
   isDualStack,
-  NETWORK_TYPE_SDN,
+  NETWORK_TYPE_LABELS,
   selectApiVip,
   selectIngressVip,
   selectIpv4Cidr,
@@ -25,11 +25,7 @@ type ClusterPropertiesProps = {
 };
 
 export const getNetworkType = (clusterNetworkType: Cluster['networkType']): string => {
-  let networkType: string;
-  clusterNetworkType === NETWORK_TYPE_SDN
-    ? (networkType = 'Software-Defined Networking (SDN)')
-    : (networkType = 'Open Virtual Network (OVN)');
-  return networkType;
+  return NETWORK_TYPE_LABELS[clusterNetworkType || ''];
 };
 
 export const getManagementType = ({ userManagedNetworking }: Cluster): string => {

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

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { UiIcon, hostStatus } from '../../../common';
+import { ExpandableSection, Icon } from '@patternfly/react-core';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import { hostStatus } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import { getHostsWithTimeout, getMostSevereHostStatus } from './utils';
-import { ExpandableSection } from '@patternfly/react-core';
-import './HostInventoryExpandable.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+
+import './HostInventoryExpandable.css';
 
 type HostInventoryExpandableProps = {
   cluster: Cluster;
@@ -33,7 +35,11 @@ const HostInventoryExpandable = ({ cluster }: HostInventoryExpandableProps) => {
   const mostSevereHostStatus = getMostSevereHostStatus(hosts);
   const hostStatusDef = mostSevereHostStatus ? hostStatus(t)[mostSevereHostStatus] : null;
   const someHostHasTimeout = getHostsWithTimeout(hosts);
-  const warningIcon = <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+  const warningIcon = (
+    <Icon size="sm" status="warning">
+      <ExclamationTriangleIcon />
+    </Icon>
+  );
   return (
     <ExpandableSection
       toggleContent={

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { UiIcon, getOpenshiftVersionText } from '../../../common';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { getOpenshiftVersionText } from '../../../common';
+import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
@@ -18,7 +19,9 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
     <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
       </Popover>
     </Content>
   );

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

@@ -4,6 +4,7 @@ import {
   Button,
   ButtonVariant,
   Content,
+  Icon,
   Modal,
   ModalBody,
   ModalFooter,
@@ -16,7 +17,7 @@ import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { calculateCollectedLogsCount } from '../clusters/utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { ErrorState, LoadingState, UiIcon } from '../../../common';
+import { ErrorState, LoadingState } from '../../../common';
 import { ClustersAPI } from '../../services/apis';
 
 const ResetClusterModal: React.FC = () => {
@@ -87,8 +88,10 @@ const ResetClusterModal: React.FC = () => {
         </Content>
 
         <Content component="p">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
-          available after the installation is reset.
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>{' '}
+          Logs won't be available after the installation is reset.
         </Content>
 
         <Content component="p">Are you sure you want to reset the cluster?</Content>

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,13 +46,11 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   } = useOpenShiftVersionsContext();
   const location = useLocation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const defaultPullSecret = usePullSecret();
+  const pullSecret = isSingleClusterFeatureEnabled ? infraEnv?.pullSecret || '' : defaultPullSecret;
 
   const handleClusterUpdate = React.useCallback(
-    async (
-      clusterId: Cluster['id'],
-      params: ClusterDetailsUpdateParams,
-      addCustomManifests: boolean,
-    ) => {
+    async (clusterId: Cluster['id'], params: ClusterDetailsUpdateParams) => {
       clearAlerts();
 
       try {
@@ -62,7 +59,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           cluster?.tags,
           params,
         );
-        await clusterWizardContext.updateUISettings({ addCustomManifests });
         dispatch(updateCluster(updatedCluster));
 
         canNextClusterDetails({ cluster: updatedCluster }) && clusterWizardContext.moveNext();
@@ -79,7 +75,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   );
 
   const handleClusterCreate = React.useCallback(
-    async (params: ClusterCreateParamsWithStaticNetworking, addCustomManifests: boolean) => {
+    async (params: ClusterCreateParamsWithStaticNetworking) => {
       clearAlerts();
       try {
         const searchParams = new URLSearchParams(location.search);
@@ -107,14 +103,23 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         );
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
-        const uiPatch: UISettingsValues = { addCustomManifests };
         if (isAssistedMigration) {
-          //For Assisted Migration we need to enable virtualization bundle
-          uiPatch.bundlesSelected = ['virtualization'];
-          uiPatch.isAssistedMigration = true;
+          try {
+            const uiPatch: UISettingsValues = {
+              bundlesSelected: ['virtualization'],
+              isAssistedMigration: true,
+            };
+            await UISettingService.update(cluster.id, uiPatch);
+            await clusterWizardContext.updateUISettings(uiPatch);
+          } catch (uiError) {
+            handleApiError(uiError, () =>
+              addAlert({
+                title: 'Failed to update UI settings',
+                message: getApiErrorMessage(uiError),
+              }),
+            );
+          }
         }
-        await UISettingService.update(cluster.id, uiPatch);
-        await clusterWizardContext.updateUISettings(uiPatch); // keeps local state current
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),

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

@@ -42,11 +42,10 @@ type ClusterDetailsFormProps = {
   ocpVersions: OpenshiftVersionOptionType[];
   usedClusterNames: string[];
   navigation: React.ReactNode;
-  handleClusterCreate: (params: ClusterCreateParams, addCustomManifests: boolean) => Promise<void>;
+  handleClusterCreate: (params: ClusterCreateParams) => Promise<void>;
   handleClusterUpdate: (
     clusterId: Cluster['id'],
     params: ClusterDetailsUpdateParams,
-    addCustomManifests: boolean,
   ) => Promise<void>;
 };
 
@@ -63,7 +62,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     navigation,
   } = props;
 
-  const { customManifestsStep, moveNext } = useClusterWizardContext();
+  const { moveNext } = useClusterWizardContext();
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { clearAlerts } = useAlerts();
@@ -82,10 +81,10 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
           resetPlatform = 'baremetal';
         }
         const params = ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
-        await handleClusterUpdate(cluster.id, params, values.addCustomManifest);
+        await handleClusterUpdate(cluster.id, params);
       } else {
         const params = ClusterDetailsService.getClusterCreateParams(values);
-        await handleClusterCreate(params, values.addCustomManifest);
+        await handleClusterCreate(params);
       }
     },
     [cluster, handleClusterCreate, handleClusterUpdate],
@@ -118,9 +117,8 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
-        addCustomManifests: customManifestsStep,
       }),
-    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search, customManifestsStep],
+    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search],
   );
 
   const { t } = useTranslation();

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

@@ -13,8 +13,6 @@ export type ClusterWizardContextType = {
   wizardStepIds: ClusterWizardStepsType[];
   onUpdateStaticIpView(view: StaticIpView): void;
   onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void;
-  setCustomManifestsStep(addCustomManifest: boolean): void;
-  customManifestsStep: boolean;
   wizardPerPage: number;
   setWizardPerPage: (perPage: number) => void;
   updateUISettings: (data: UISettingsValues) => Promise<void>;
@@ -23,12 +21,6 @@ export type ClusterWizardContextType = {
   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

@@ -19,6 +19,7 @@ import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-
 import { useUISettings } from '../../hooks';
 import { AlertVariant } from '@patternfly/react-core';
 import { useFeature } from '../../hooks/use-feature';
+import { isOciPlatformType, isThirdPartyCNI } from '../utils';
 
 const addStepToClusterWizard = (
   wizardStepIds: ClusterWizardStepsType[],
@@ -50,7 +51,7 @@ const removeStepFromClusterWizard = (
 const getWizardStepIds = (
   wizardStepIds: ClusterWizardStepsType[] | undefined,
   staticIpView?: StaticIpView | 'dhcp-selected',
-  customManifestsStep?: boolean,
+
   isSingleClusterFeatureEnabled?: boolean,
 ): ClusterWizardStepsType[] => {
   let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...defaultWizardSteps];
@@ -64,11 +65,6 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (customManifestsStep) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['custom-manifests']);
-  } else {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'custom-manifests', 1);
-  }
   if (isSingleClusterFeatureEnabled) {
     stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
   }
@@ -119,14 +115,10 @@ const ClusterWizardContextProvider = ({
   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 {
@@ -143,10 +135,13 @@ const ClusterWizardContextProvider = ({
   React.useEffect(() => {
     if (!UISettingsLoading) {
       const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
-      const customManifestsStepEnabled = !!uiSettings?.addCustomManifests;
-      const customManifestsStepNeedsToBeFilled = !!(
-        uiSettings?.addCustomManifests && !uiSettings?.customManifestsAdded
-      );
+      let customManifestsRequired = false;
+      if (cluster) {
+        customManifestsRequired =
+          isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+      }
+      const customManifestsStepNeedsToBeFilled =
+        customManifestsRequired && !uiSettings?.customManifestsAdded;
 
       const requiredStepId = getClusterWizardFirstStep(
         locationState,
@@ -155,11 +150,10 @@ const ClusterWizardContextProvider = ({
         cluster?.hosts,
         customManifestsStepNeedsToBeFilled,
       );
-
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-        customManifestsStepEnabled,
+
         isSingleClusterFeatureEnabled,
       );
 
@@ -173,7 +167,6 @@ const ClusterWizardContextProvider = ({
 
       setWizardStepIds(firstStepIds);
       setClusterPermissions(cluster, permissions);
-      setCustomManifestsStep(!!uiSettings?.addCustomManifests);
     }
 
     if (
@@ -215,7 +208,7 @@ const ClusterWizardContextProvider = ({
         const newStepIds = getWizardStepIds(
           wizardStepIds,
           staticIpInfo.view,
-          customManifestsStep,
+
           isSingleClusterFeatureEnabled,
         );
         setWizardStepIds(newStepIds);
@@ -230,18 +223,6 @@ const ClusterWizardContextProvider = ({
       setCurrentStepId(stepId);
     };
 
-    const onSetAddCustomManifestsStep = (addCustomManifest: boolean) => {
-      setCustomManifestsStep(addCustomManifest);
-      setWizardStepIds(
-        getWizardStepIds(
-          wizardStepIds,
-          undefined,
-          addCustomManifest,
-          isSingleClusterFeatureEnabled,
-        ),
-      );
-    };
-
     return {
       moveBack(): void {
         clearAlerts();
@@ -269,14 +250,7 @@ const ClusterWizardContextProvider = ({
             getDisconnectedWizardStepIds(disconnectedWizardStepIds, view),
           );
         } else {
-          setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              view,
-              customManifestsStep,
-              isSingleClusterFeatureEnabled,
-            ),
-          );
+          setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
         }
       },
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
@@ -298,18 +272,13 @@ const ClusterWizardContextProvider = ({
               getWizardStepIds(
                 wizardStepIds,
                 StaticIpView.FORM,
-                customManifestsStep,
+
                 isSingleClusterFeatureEnabled,
               ),
             );
           } else {
             setWizardStepIds(
-              getWizardStepIds(
-                wizardStepIds,
-                'dhcp-selected',
-                customManifestsStep,
-                isSingleClusterFeatureEnabled,
-              ),
+              getWizardStepIds(wizardStepIds, 'dhcp-selected', isSingleClusterFeatureEnabled),
             );
           }
         }
@@ -317,8 +286,6 @@ const ClusterWizardContextProvider = ({
       wizardStepIds: wizardStepIds,
       currentStepId,
       setCurrentStepId: onSetCurrentStepId,
-      customManifestsStep,
-      setCustomManifestsStep: onSetAddCustomManifestsStep,
       wizardPerPage,
       setWizardPerPage,
       uiSettings,
@@ -334,16 +301,11 @@ const ClusterWizardContextProvider = ({
       },
       disconnectedInfraEnv,
       setDisconnectedInfraEnv,
-      disconnectedFormPullSecret,
-      setDisconnectedFormPullSecret,
-      disconnectedFormEditPullSecret,
-      setDisconnectedFormEditPullSecret,
     };
   }, [
     wizardStepIds,
     currentStepId,
     infraEnv,
-    customManifestsStep,
     wizardPerPage,
     isSingleClusterFeatureEnabled,
     clearAlerts,
@@ -353,8 +315,6 @@ const ClusterWizardContextProvider = ({
     connectedWizardStepIds,
     disconnectedWizardStepIds,
     disconnectedInfraEnv,
-    disconnectedFormPullSecret,
-    disconnectedFormEditPullSecret,
   ]);
 
   if (!contextValue) {

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

@@ -23,6 +23,7 @@ export const defaultWizardSteps: ClusterWizardStepsType[] = [
   'host-discovery',
   'storage',
   'networking',
+  'custom-manifests',
   'review',
 ];