@openshift-assisted/ui-lib 2.56.1 → 2.56.2

package/lib/ocm/components/wizard/steps/staticIp/data/nmstateYaml.ts

@@ -37,6 +37,19 @@ export const getProtocolVersionIdx = (protocolVersion: ProtocolVersion): number
   return protocolVersion === ProtocolVersion.ipv4 ? 0 : 1;
 };
 
+export const getRouteGateway = (
+  routesConfig: NmstateRoutesConfig[],
+  protocolVersion: ProtocolVersion,
+): string => {
+  const route = routesConfig.find(
+    (config) => config.destination === ROUTE_DESTINATIONS[protocolVersion],
+  );
+  if (!route) {
+    return '';
+  }
+  return route['next-hop-address'];
+};
+
 export const yamlToNmstateObject = (yaml: string): Nmstate => {
   return load(yaml) as Nmstate;
 };
@@ -74,6 +87,9 @@ export const getProtocolType = (comments: string[]): StaticProtocolType | null =
   if (machineNetworks[ProtocolVersion.ipv4]) {
     return 'ipv4';
   }
+  if (machineNetworks[ProtocolVersion.ipv6]) {
+    return 'ipv6';
+  }
   return null;
 };
 

package/lib/ocm/components/wizard/steps/staticIp/data/protocolVersion.ts

@@ -1,14 +1,12 @@
 import { Address4, Address6 } from 'ip-address';
 import { ProtocolVersion, StaticProtocolType } from './dataTypes';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const showIpv4 = (protocolType: StaticProtocolType) => {
-  //always true untill we allow only ipv6
-  return true;
+  return protocolType !== 'ipv6';
 };
 
 export const showIpv6 = (protocolType: StaticProtocolType) => {
-  return protocolType === 'dualStack';
+  return protocolType !== 'ipv4';
 };
 
 export const showProtocolVersion = (
@@ -22,9 +20,13 @@ export const showProtocolVersion = (
 };
 
 export const getShownProtocolVersions = (protocolType: StaticProtocolType): ProtocolVersion[] => {
-  return protocolType === 'dualStack'
-    ? [ProtocolVersion.ipv4, ProtocolVersion.ipv6]
-    : [ProtocolVersion.ipv4];
+  if (protocolType === 'dualStack') {
+    return [ProtocolVersion.ipv4, ProtocolVersion.ipv6];
+  }
+  if (protocolType === 'ipv6') {
+    return [ProtocolVersion.ipv6];
+  }
+  return [ProtocolVersion.ipv4];
 };
 
 export const getProtocolVersionLabel = (protocolVersion: ProtocolVersion) =>

package/lib/ocm/components/wizard/utils/_wizardTransition.test.ts

@@ -8,7 +8,15 @@ import {
   Validation as HostValidation,
 } from '../../../../common/types/hosts';
 
-import { canNextClusterDetails, canNextHostDiscovery, canNextStorage } from './wizardTransition';
+import {
+  canNextClusterDetails,
+  canNextHostDiscovery,
+  canNextStorage,
+  disconnectedSteps,
+} from './wizardTransition';
+import { getWizardNavEntries } from '../wizardComponents/ClusterWizardNavigation';
+import { getDisconnectedWizardStepIds } from '../clusterWizardContext/utils';
+import { StaticIpView } from '../steps/staticIp/data';
 
 const clusterBase: Cluster = {
   kind: 'Cluster',
@@ -440,3 +448,54 @@ describe('OCM wizard transition of Storage', () => {
     expect(canNextStorage({ cluster })).toBe(true);
   });
 });
+
+describe('Disconnected wizard step ids', () => {
+  test('starts with the three base disconnected steps', () => {
+    expect(getDisconnectedWizardStepIds()).toEqual(disconnectedSteps);
+    expect(getDisconnectedWizardStepIds('dhcp-selected')).toEqual(disconnectedSteps);
+  });
+
+  test('inserts static IP form steps and removes them again for DHCP', () => {
+    const withStatic = getDisconnectedWizardStepIds(StaticIpView.FORM);
+    expect(withStatic).toEqual([
+      'disconnected-basic',
+      'static-ip-network-wide-configurations',
+      'static-ip-host-configurations',
+      'disconnected-optional-configurations',
+      'disconnected-review',
+    ]);
+    expect(getDisconnectedWizardStepIds('dhcp-selected')).toEqual(disconnectedSteps);
+  });
+
+  test('inserts the YAML static IP step', () => {
+    expect(getDisconnectedWizardStepIds(StaticIpView.YAML)).toEqual([
+      'disconnected-basic',
+      'static-ip-yaml-view',
+      'disconnected-optional-configurations',
+      'disconnected-review',
+    ]);
+  });
+});
+
+describe('Wizard nav visual numbers', () => {
+  test('numbers review as 3 when static IP steps are absent', () => {
+    const entries = getWizardNavEntries(disconnectedSteps);
+    expect(entries.map((entry) => [entry.stepId, entry.visualNumber])).toEqual([
+      ['disconnected-basic', 1],
+      ['disconnected-optional-configurations', 2],
+      ['disconnected-review', 3],
+    ]);
+  });
+
+  test('keeps a single number for form-view static IP and numbers review as 4', () => {
+    const entries = getWizardNavEntries(getDisconnectedWizardStepIds(StaticIpView.FORM));
+    expect(
+      entries.map((entry) => [entry.stepId, entry.visualNumber, entry.isStaticIpFormGroup]),
+    ).toEqual([
+      ['disconnected-basic', 1, false],
+      ['static-ip-network-wide-configurations', 2, true],
+      ['disconnected-optional-configurations', 3, false],
+      ['disconnected-review', 4, false],
+    ]);
+  });
+});

package/lib/ocm/components/wizard/wizardComponents/ClusterWizardNavigation.tsx

@@ -8,6 +8,30 @@ import {
   ClusterWizardStepsType,
   isStaticIpStep,
 } from '../utils/wizardTransition';
+
+export type WizardNavEntry = {
+  stepId: ClusterWizardStepsType;
+  visualNumber: number;
+  isStaticIpFormGroup: boolean;
+};
+
+export const getWizardNavEntries = (wizardStepIds: ClusterWizardStepsType[]): WizardNavEntry[] => {
+  const entries: WizardNavEntry[] = [];
+  let i = 0;
+  let visualNumber = 1;
+  while (i < wizardStepIds.length) {
+    const stepId = wizardStepIds[i];
+    if (stepId === 'static-ip-network-wide-configurations') {
+      entries.push({ stepId, visualNumber, isStaticIpFormGroup: true });
+      i += 2;
+    } else {
+      entries.push({ stepId, visualNumber, isStaticIpFormGroup: false });
+      i += 1;
+    }
+    visualNumber += 1;
+  }
+  return entries;
+};
 import { useClusterWizardContext } from '../clusterWizardContext/ClusterWizardContext';
 import { staticIpFormViewSubSteps, wizardStepNames } from '../constants';
 import WizardNavItem from '../../../../common/components/ui/WizardNavItem';
@@ -48,7 +72,11 @@ export const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
     return stepId === 'cluster-details' ? false : isStepIdxAfterCurrent(idx);
   };
 
-  const getNavItem = (idx: number, stepId: ClusterWizardStepsType): ReactNode => {
+  const getNavItem = (
+    idx: number,
+    stepId: ClusterWizardStepsType,
+    visualNumber: number,
+  ): ReactNode => {
     return (
       <WizardNavItem
         stepIndex={idx}
@@ -60,11 +88,12 @@ export const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
         data-testid={`cluster-wizard-nav-item-${stepId}`}
+        style={{ '--cluster-wizard-step-number': `"${visualNumber}"` } as React.CSSProperties}
       />
     );
   };
 
-  const getStaticIpFormViewNavItem = (idx: number): ReactNode => {
+  const getStaticIpFormViewNavItem = (idx: number, visualNumber: number): ReactNode => {
     return (
       <WizardNavItem
         stepIndex={idx}
@@ -74,13 +103,14 @@ export const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
         data-testid={`cluster-wizard-nav-item-static-network-configuration-form-view`}
+        style={{ '--cluster-wizard-step-number': `"${visualNumber}"` } as React.CSSProperties}
       >
         <WizardNav
           isInnerList
           data-testid="cluster-wizard-nav-item-static-network-configuration-form-view-inner-list"
         >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
-            return getNavItem(idx + subIdx, stepId);
+            return getNavItem(idx + subIdx, stepId, visualNumber);
           })}
         </WizardNav>
       </WizardNavItem>
@@ -88,20 +118,13 @@ export const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   };
 
   const getWizardNavItems = (): ReactNode[] => {
-    const navItems: ReactNode[] = [];
-    let i = 0;
-    while (i < clusterWizardContext.wizardStepIds.length) {
-      const stepId = clusterWizardContext.wizardStepIds[i];
-      if (stepId !== 'static-ip-network-wide-configurations') {
-        navItems.push(getNavItem(i, stepId));
-        i += 1;
-      } else {
-        navItems.push(getStaticIpFormViewNavItem(i));
-        //skip iteration on form view sub steps
-        i += 2;
+    return getWizardNavEntries(clusterWizardContext.wizardStepIds).map((entry) => {
+      const idx = clusterWizardContext.wizardStepIds.indexOf(entry.stepId);
+      if (entry.isStaticIpFormGroup) {
+        return getStaticIpFormViewNavItem(idx, entry.visualNumber);
       }
-    }
-    return navItems;
+      return getNavItem(idx, entry.stepId, entry.visualNumber);
+    });
   };
 
   return <WizardNav data-testid="cluster-wizard-nav">{getWizardNavItems()}</WizardNav>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.56.1",
-    "@openshift-assisted/types": "2.56.1",
+    "@openshift-assisted/locales": "2.56.2",
+    "@openshift-assisted/types": "2.56.2",
     "@openshift-console/dynamic-plugin-sdk": "^4.22.0",
     "@patternfly/patternfly": "6.4.0",
     "@patternfly/react-code-editor": "6.4.1",
@@ -136,5 +136,5 @@
       ]
     }
   },
-  "version": "2.56.1"
+  "version": "2.56.2"
 }