@openshift-assisted/ui-lib 2.14.6-cim → 2.15.0-cim

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -6,9 +6,12 @@ import {
   Split,
   SplitItem,
   Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
@@ -20,11 +23,13 @@ import {
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  NewFeatureSupportLevelData,
+  GetFeatureDisabledReason,
+  GetFeatureSupportLevel,
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { useFeature } from '../../../hooks/use-feature';
 
 const INPUT_NAME = 'platform';
 const fieldId = getFieldId(INPUT_NAME, 'input');
@@ -45,7 +50,7 @@ export type ExternalPlatformInfo = {
 
 const getDisabledReasonForExternalPlatform = (
   isSNO: boolean,
-  newFeatureSupportLevelContext: NewFeatureSupportLevelData,
+  getFeatureDisabledReason: GetFeatureDisabledReason,
   platform: PlatformType,
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
   cpuArchitecture?: SupportedCpuArchitecture,
@@ -58,7 +63,7 @@ const getDisabledReasonForExternalPlatform = (
   ) {
     return `Plaform integration is not supported for Single-Node OpenShift with the selected CPU architecture.`;
   } else {
-    return newFeatureSupportLevelContext.getFeatureDisabledReason(
+    return getFeatureDisabledReason(
       ExternalPlaformIds[platform] as FeatureId,
       featureSupportLevelData ?? undefined,
       cpuArchitecture,
@@ -66,35 +71,47 @@ const getDisabledReasonForExternalPlatform = (
   }
 };
 
+const isAvailablePlatform = (platform: PlatformType, isDisconnected?: boolean) => {
+  if (isDisconnected && platform === 'nutanix') {
+    return false;
+  }
+  return platform !== undefined;
+};
+
 const getExternalPlatformTypes = (
   isSNO: boolean,
-  newFeatureSupportLevelContext: NewFeatureSupportLevelData,
+  getFeatureSupportLevel: GetFeatureSupportLevel,
+  getFeatureDisabledReason: GetFeatureDisabledReason,
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
   cpuArchitecture?: SupportedCpuArchitecture,
+  isDisconnected?: boolean,
 ): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
   const platforms = ['none', 'nutanix', 'external', 'vsphere'] as PlatformType[];
 
-  return platforms.filter(Boolean).reduce(
-    (a, platform) => ({
-      ...a,
-      [platform]: {
-        label: ExternalPlatformLabels[platform],
-        href: ExternalPlatformLinks[platform],
-        disabledReason: getDisabledReasonForExternalPlatform(
-          isSNO,
-          newFeatureSupportLevelContext,
-          platform,
-          featureSupportLevelData ?? undefined,
-          cpuArchitecture,
-        ),
-        supportLevel: newFeatureSupportLevelContext.getFeatureSupportLevel(
-          ExternalPlaformIds[platform] as FeatureId,
-          featureSupportLevelData ?? undefined,
-        ),
-      },
-    }),
-    {},
-  );
+  const newPlatform = platforms
+    .filter((platform) => isAvailablePlatform(platform, isDisconnected))
+    .reduce(
+      (a, platform) => ({
+        ...a,
+        [platform]: {
+          label: ExternalPlatformLabels[platform],
+          href: ExternalPlatformLinks[platform],
+          disabledReason: getDisabledReasonForExternalPlatform(
+            isSNO,
+            getFeatureDisabledReason,
+            platform,
+            featureSupportLevelData ?? undefined,
+            cpuArchitecture,
+          ),
+          supportLevel: getFeatureSupportLevel(
+            ExternalPlaformIds[platform] as FeatureId,
+            featureSupportLevelData ?? undefined,
+          ),
+        },
+      }),
+      {},
+    );
+  return newPlatform;
 };
 
 export const areAllExternalPlatformIntegrationDisabled = (
@@ -124,30 +141,41 @@ export const ExternalPlatformDropdown = ({
   const [externalPlatformTypes, setExternalPlatformTypes] = React.useState<
     Partial<{ [key in PlatformType]: ExternalPlatformInfo }>
   >({});
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const tooltipDropdownDisabled = getReasonForDropdownDisabled(
     isSNO,
     cpuArchitecture ? architectureData[cpuArchitecture].label : '',
   );
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string) => {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string): void => {
     event.stopPropagation(); // Stop event propagation here
     window.open(href, '_blank');
   };
-  const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
+
+  const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
+
   React.useEffect(() => {
     // Calculate updated externalPlatformTypes based on the dependencies
     const updatedExternalPlatformTypes = getExternalPlatformTypes(
       isSNO,
-      newFeatureSupportLevelContext,
+      getFeatureSupportLevel,
+      getFeatureDisabledReason,
       featureSupportLevelData,
       cpuArchitecture,
+      isSingleClusterFeatureEnabled,
     );
 
     // Update the state with the new externalPlatformTypes
     setExternalPlatformTypes(updatedExternalPlatformTypes);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [featureSupportLevelData, cpuArchitecture, isSNO]);
+  }, [
+    featureSupportLevelData,
+    cpuArchitecture,
+    isSNO,
+    isSingleClusterFeatureEnabled,
+    getFeatureSupportLevel,
+    getFeatureDisabledReason,
+  ]);
 
   const dropdownIsDisabled = React.useMemo(() => {
     return areAllExternalPlatformIntegrationDisabled(externalPlatformTypes);
@@ -174,7 +202,12 @@ export const ExternalPlatformDropdown = ({
     ] as ExternalPlatformInfo;
 
     return (
-      <DropdownItem key={platform} id={platform} isAriaDisabled={disabledReason !== undefined}>
+      <DropdownItem
+        value={platform}
+        key={platform}
+        id={platform}
+        isAriaDisabled={disabledReason !== undefined}
+      >
         <Split>
           <SplitItem>
             <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
@@ -209,29 +242,17 @@ export const ExternalPlatformDropdown = ({
     );
   });
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const selectedPlatform = event?.currentTarget.id as PlatformType;
-      setValue(selectedPlatform);
-      setOpen(false);
-      onChange(selectedPlatform);
-    },
-    [setOpen, setValue, onChange],
-  );
-
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-        isDisabled={dropdownIsDisabled}
-      >
-        {externalPlatformTypes[field.value as PlatformType]?.label}
-      </DropdownToggle>
-    ),
-    [externalPlatformTypes, field, dropdownIsDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={dropdownIsDisabled}
+      isExpanded={isOpen}
+    >
+      {externalPlatformTypes[field.value as PlatformType]?.label}
+    </MenuToggle>
   );
 
   return (
@@ -247,15 +268,20 @@ export const ExternalPlatformDropdown = ({
         distance={7}
       >
         <Dropdown
-          {...field}
-          id={fieldId}
-          dropdownItems={enabledItems}
+          id={`${fieldId}-dropdown`}
           toggle={toggle}
           isOpen={isOpen}
-          className="pf-v5-u-w-100"
-          onSelect={onSelect}
-          disabled={dropdownIsDisabled}
-        />
+          onOpenChange={() => setOpen(!isOpen)}
+          onSelect={(event) => {
+            const selectedPlatform = event?.currentTarget.id as PlatformType;
+            setValue(selectedPlatform);
+            setOpen(false);
+            onChange(selectedPlatform);
+          }}
+          shouldFocusToggleOnSelect
+        >
+          <DropdownList>{enabledItems}</DropdownList>
+        </Dropdown>
       </Tooltip>
     </FormGroup>
   );

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -1,53 +1,56 @@
 import React from 'react';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
-import {
-  ExposedOperatorNames,
-  hasEnabledOperators,
-  genericTableRowKey,
-  operatorLabels,
-} from '../../../../common';
-import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { genericTableRowKey } from '../../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { TableSummaryExpandable } from './TableSummaryExpandable';
+import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
-  const { t } = useTranslation();
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const operatorNames = operatorLabels(t, featureSupportLevel);
+  const opSpecs = useOperatorSpecs();
+  const rows = React.useMemo(
+    () =>
+      cluster.monitoredOperators
+        ?.filter(({ name }) => !!name && !!opSpecs[name])
+        .map((op) => {
+          const opId = op.name as string;
+          return {
+            rowId: `operator-${opId}`,
+            cells: [
+              { title: opSpecs[opId].title },
+              {
+                title: 'Enabled',
+                props: { 'data-testid': `operator-${opId}` },
+              },
+            ],
+          };
+        }),
+    [cluster.monitoredOperators, opSpecs],
+  );
 
-  const rows = React.useMemo(() => {
-    return ExposedOperatorNames.filter((operator) =>
-      hasEnabledOperators(cluster.monitoredOperators, operator),
-    ).map((operator) => ({
-      rowId: `operator-${operator}`,
-      cells: [
-        { title: operatorNames[operator] },
-        {
-          title: 'Enabled',
-          props: { 'data-testid': `operator-${operator}` },
-        },
-      ],
-    }));
-  }, [cluster.monitoredOperators, operatorNames]);
+  if (!rows?.length) {
+    return null;
+  }
 
   return (
-    <Table
-      variant={TableVariant.compact}
-      borders={false}
-      aria-label={'Operators review table'}
-      className="review-table"
-    >
-      <Tbody>
-        {rows.map((row, i) => (
-          <Tr key={genericTableRowKey(row.rowId)}>
-            {row.cells.map((cell, j) => (
-              <Td key={`cell-${i}-${j}`} {...cell.props}>
-                {cell.title}
-              </Td>
-            ))}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+    <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
+      <Table
+        variant={TableVariant.compact}
+        borders={false}
+        aria-label={'Operators review table'}
+        className="review-table"
+      >
+        <Tbody>
+          {rows.map((row, i) => (
+            <Tr key={genericTableRowKey(row.rowId)}>
+              {row.cells.map((cell, j) => (
+                <Td key={`cell-${i}-${j}`} {...cell.props}>
+                  {cell.title}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableSummaryExpandable>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewStep.tsx

@@ -16,7 +16,7 @@ import './ReviewCluster.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
-  const { addAlert } = useAlerts();
+  const { addAlert, clearAlerts } = useAlerts();
   const clusterWizardContext = useClusterWizardContext();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const [isStartingInstallation, setIsStartingInstallation] = useStateSafely(false);
@@ -40,6 +40,7 @@ const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
   }, [cluster, isStartingInstallation, isViewerMode, clusterWizardContext]);
 
   const handleClusterInstall = async () => {
+    clearAlerts();
     setIsStartingInstallation(true);
     try {
       const { data } = await ClustersService.install(cluster.id, cluster.tags);

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -3,15 +3,10 @@ import { ExpandableSection } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
-  hasEnabledOperators,
   isClusterPlatformTypeVM,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
   ReviewHostsInventory,
   SupportedPlatformType,
   RenderIf,
-  OPERATOR_NAME_MCE,
 } from '../../../../common';
 import {
   ReviewClusterDetailTable,
@@ -26,11 +21,6 @@ import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests'
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
-  const showOperatorsSummary =
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_CNV) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_ODF) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_LVM) ||
-    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE);
   const { customManifests } = useClusterCustomManifests(cluster.id, false);
   return (
     <>
@@ -38,11 +28,7 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
         <ReviewClusterDetailTable cluster={cluster} />
       </TableSummaryExpandable>
 
-      {showOperatorsSummary && (
-        <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
-          <ReviewOperatorsTable cluster={cluster} />
-        </TableSummaryExpandable>
-      )}
+      <ReviewOperatorsTable cluster={cluster} />
 
       <TableSummaryExpandable title={'Host inventory'} id={'host-inventory-expandable'}>
         <>

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -234,7 +234,7 @@ export const getIpIsNotNetworkOrBroadcastAddressSchema = (
     (value) => {
       const subnetAddr = getAddressObject(subnet, protocolVersion);
       if (!subnetAddr) {
-        return false;
+        return true;
       } else {
         const subnetStart = subnetAddr?.startAddress().correctForm();
         const subnetEnd = subnetAddr?.endAddress().correctForm();

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsSelect.tsx

@@ -11,7 +11,7 @@ const bondsList = [
   { value: 'balance-rr', label: 'Balance-rr (0)', default: false },
   { value: 'active-backup', label: 'Active-Backup (1)', default: true },
   { value: 'balance-xor', label: 'Balance-xor (2)', default: false },
-  { value: 'broadcast', label: 'Broadcast (3)', default: false },
+  { value: 'broadcase', label: 'Broadcase (3)', default: false },
   { value: '802.3ad', label: '802.3ad (4)', default: false },
   { value: 'balance-tlb', label: 'Balance-tlb (5)', default: false },
   { value: 'balance-alb', label: 'Balance-alb (6)', default: false },

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -76,7 +76,7 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
               />{' '}
               <OcmInputField
                 name={`${fieldName}.bondSecondaryInterface`}
-                label="Port 2 MAC Adddress"
+                label="Port 2 MAC Address"
                 data-testid={`bond-secondary-interface-${hostIdx}`}
                 isRequired
               />

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.tsx

@@ -18,11 +18,22 @@ const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
 }) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const emptyValues = React.useMemo(() => getEmptyValues(), []);
-  const { isSubmitting, isValid, touched, errors, values } = useFormikContext<StaticIpFormValues>();
+  const { isSubmitting, isValid, touched, errors, values, initialValues, submitForm } =
+    useFormikContext<StaticIpFormValues>();
+
   const isEmpty = React.useMemo<boolean>(() => {
     return isEqual(values, emptyValues);
   }, [values, emptyValues]);
+
   const isAutoSaveRunning = useFormikAutoSave();
+
+  React.useEffect(() => {
+    if (!isEqual(emptyValues, initialValues)) {
+      void submitForm();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   React.useEffect(() => {
     onFormStateChange({ isSubmitting, isAutoSaveRunning, isValid, touched, errors, isEmpty });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -89,13 +100,7 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
 
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={onSubmit}
-      validate={validate}
-      validateOnMount
-      enableReinitialize
-    >
+    <Formik initialValues={initialValues} onSubmit={onSubmit} validate={validate} validateOnMount>
       <Form>
         {children}
         <AutosaveWithParentUpdate<StaticIpFormValues>

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -62,10 +62,10 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     switch (clusterWizardContext.currentStepId) {
       case 'static-ip-yaml-view':
         return <YamlView {...viewProps} />;
-      case 'static-ip-host-configurations':
-        return <FormViewHosts {...viewProps} />;
       case 'static-ip-network-wide-configurations':
         return <FormViewNetworkWide {...viewProps} />;
+      case 'static-ip-host-configurations':
+        return <FormViewHosts {...viewProps} />;
       default:
         throw `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`;
     }
@@ -85,11 +85,13 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
         </Text>
       </TextContent>
 
-      <StaticIpViewRadioGroup
-        initialView={initialStaticIpInfo.view}
-        confirmOnChangeView={confirmOnChangeView}
-        onChangeView={onChangeView}
-      />
+      {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
+        <StaticIpViewRadioGroup
+          initialView={initialStaticIpInfo.view}
+          confirmOnChangeView={confirmOnChangeView}
+          onChangeView={onChangeView}
+        />
+      )}
       {initialStaticIpInfo.isDataComplete && isoRegenerationAlert}
       {content}
     </Grid>

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -112,8 +112,6 @@ const getNmstateObject = (
           ),
         );
       }
-      // eslint-disable-next-line no-console
-      console.log(interfaces);
     }
 
     routeConfigs.push(

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateYaml.ts

@@ -119,7 +119,7 @@ export const getInterface = (
       name: nicName,
       type: NmstateInterfaceType.BOND,
       state: 'up',
-      ...protocolConfigs,
+      ...(networkWide.useVlan ? {} : protocolConfigs),
       'link-aggregation': {
         mode: bondType,
         options: {

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

@@ -145,35 +145,45 @@ const AssistedInstallerDetailCard = ({
 
   const isOutdatedClusterData = uiState === ResourceUIState.POLLING_ERROR;
 
-  return (
-    <HistoryRouter history={history} basename={basename}>
-      <AlertsContextProvider>
-        <OpenShiftVersionsContextProvider>
-          <SentryErrorMonitorContextProvider>
-            <ModalDialogsContextProvider>
-              <ClusterDefaultConfigurationProvider
-                loadingUI={<LoadingCard />}
-                errorUI={<LoadingDefaultConfigFailedCard />}
+  const clusterDetailCard = (
+    <AlertsContextProvider>
+      <OpenShiftVersionsContextProvider>
+        <SentryErrorMonitorContextProvider>
+          <ModalDialogsContextProvider>
+            <ClusterDefaultConfigurationProvider
+              loadingUI={<LoadingCard />}
+              errorUI={<LoadingDefaultConfigFailedCard />}
+            >
+              <NewFeatureSupportLevelProvider
+                loadingUi={<LoadingCard />}
+                cluster={cluster}
+                cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
+                openshiftVersion={cluster.openshiftVersion}
+                platformType={cluster.platform?.type}
               >
-                <NewFeatureSupportLevelProvider
-                  loadingUi={<LoadingCard />}
-                  cluster={cluster}
-                  cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
-                  openshiftVersion={cluster.openshiftVersion}
-                  platformType={cluster.platform?.type}
-                >
-                  {content}
-                </NewFeatureSupportLevelProvider>
-                {isOutdatedClusterData && <ClusterPollingErrorModal />}
-                <CancelInstallationModal />
-                <ResetClusterModal />
-                <DiscoveryImageModal />
-              </ClusterDefaultConfigurationProvider>
-            </ModalDialogsContextProvider>
-          </SentryErrorMonitorContextProvider>
-        </OpenShiftVersionsContextProvider>
-      </AlertsContextProvider>
-    </HistoryRouter>
+                {content}
+              </NewFeatureSupportLevelProvider>
+              {isOutdatedClusterData && <ClusterPollingErrorModal />}
+              <CancelInstallationModal />
+              <ResetClusterModal />
+              <DiscoveryImageModal />
+            </ClusterDefaultConfigurationProvider>
+          </ModalDialogsContextProvider>
+        </SentryErrorMonitorContextProvider>
+      </OpenShiftVersionsContextProvider>
+    </AlertsContextProvider>
+  );
+
+  return (
+    <>
+      {history ? (
+        <HistoryRouter history={history} basename={basename || '/'}>
+          {clusterDetailCard}
+        </HistoryRouter>
+      ) : (
+        <BrowserRouter>{clusterDetailCard}</BrowserRouter>
+      )}
+    </>
   );
 };