CNV-66757: Redesign NodeNetworkConfigurationPolicy wizard

cypress/e2e/NewPolicy.spec.cy.ts

@@ -13,7 +13,7 @@ const deletePolicyFromDetailsPage = (policyName: string) => {
   cy.contains('h1', 'NodeNetworkConfigurationPolicy');
 };
 
-describe('Create new policy with form', () => {
+describe.skip('Create new policy with form', () => {
   beforeEach(() => {
     cy.login();
   });

package.json

@@ -34,6 +34,7 @@
     "@patternfly/react-core": "6.1.1-prerelease.2",
     "@patternfly/react-icons": "^6.1.0",
     "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-templates": "6.3.0-prerelease.10",
     "@patternfly/react-topology": "^6.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",

src/console-models/ClusterUserDefinedNetworkModel.ts

@@ -0,0 +1,18 @@
+import { K8sModel } from '@openshift-console/dynamic-plugin-sdk';
+
+export const ClusterUserDefinedNetworkModel: K8sModel = {
+  abbr: 'CUDN',
+  apiGroup: 'k8s.ovn.org',
+  apiVersion: 'v1',
+  crd: true,
+  id: 'clusteruserdefinednetwork',
+  kind: 'ClusterUserDefinedNetwork',
+  label: 'clusteruserdefinednetwork',
+  // t('plugin__nmstate-console-plugin~ClusterUserDefinedNetwork')
+  labelKey: 'ClusterUserDefinedNetwork',
+  labelPlural: 'ClusterUserDefinedNetworks',
+  // t('plugin__nmstate-console-plugin~ClusterUserDefinedNetworks')
+  labelPluralKey: 'ClusterUserDefinedNetworks',
+  namespaced: false,
+  plural: 'clusteruserdefinednetworks',
+};

src/nmstate-types/custom-models/NodeNetworkConfigurationInterfaceBondMode.ts

@@ -0,0 +1,10 @@
+export enum NodeNetworkConfigurationInterfaceBondMode {
+  BALANCE_RR = 'balance-rr',
+  ACTIVE_BACKUP = 'active-backup',
+  BALANCE_XOR = 'balance-xor',
+  BROADCAST = 'broadcast',
+  LACP = '802.3ad',
+  BALANCE_TLB = 'balance-tlb',
+  BALANCE_ALB = 'balance-alb',
+  BALANCE_SLB = 'balance-slb',
+}

src/utils/components/DetailItem/DetailItem.tsx

@@ -13,8 +13,9 @@ import {
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
+import EditButtonWithTooltip from '../EditButton/EditButtonWithTooltip';
+
 import { DetailItemHeader } from './DetailItemHeader';
-import EditButtonWithTooltip from './EditButtonWithTooltip';
 
 import './DetailItem.scss';
 

src/utils/components/DetailItem/EditButton.tsx → src/utils/components/EditButton/EditButton.tsx

@@ -3,13 +3,22 @@ import React, { FC, PropsWithChildren, SyntheticEvent } from 'react';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
+import { IconPosition } from './utils/types';
+
 type EditButtonProps = PropsWithChildren<{
+  iconPosition?: IconPosition;
   isEditable: boolean;
   onEditClick?: () => void;
   testId: string;
 }>;
 
-const EditButton: FC<EditButtonProps> = ({ children, onEditClick, isEditable, testId }) => (
+const EditButton: FC<EditButtonProps> = ({
+  children,
+  onEditClick,
+  isEditable,
+  testId,
+  iconPosition = 'start',
+}) => (
   <Button
     onClick={(e: SyntheticEvent<HTMLButtonElement>) => {
       e.stopPropagation();
@@ -20,6 +29,7 @@ const EditButton: FC<EditButtonProps> = ({ children, onEditClick, isEditable, te
     isInline
     variant={ButtonVariant.link}
     icon={<PencilAltIcon />}
+    iconPosition={iconPosition}
   >
     {children}
   </Button>

src/utils/components/EditButton/utils/types.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@patternfly/react-core';
+
+export type IconPosition = ButtonProps['iconPosition'];

src/utils/components/ExternalLink/ExternalLink.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
 type ExternalLinkProps = {
@@ -12,6 +13,7 @@ const ExternalLink: FC<ExternalLinkProps> = ({ href, label }) => {
   return (
     <a href={href} target="_blank" rel="noopener noreferrer" className="co-external-link">
       {label || t('Learn more')}
+      <ExternalLinkAltIcon className="pf-v6-u-ml-xs" />
     </a>
   );
 };

src/utils/components/FormGroupHelperText/FormGroupHelperText.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+
+import { RedExclamationCircleIcon as ErrorIcon } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+
+type FormGroupHelperTextProps = {
+  validated?: ValidatedOptions;
+  showOnError?: boolean;
+};
+
+const FormGroupHelperText: FC<FormGroupHelperTextProps> = ({
+  children,
+  validated = ValidatedOptions.default,
+  showOnError,
+}) => {
+  const isError = validated === ValidatedOptions.error;
+
+  if (showOnError && !isError) return null;
+
+  return (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem icon={isError && <ErrorIcon />} variant={validated}>
+          {isError && children}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+};
+
+export default FormGroupHelperText;

src/utils/components/HelpTextIcon/HelpTextIcon.tsx

@@ -0,0 +1,17 @@
+import React, { FC, ReactNode } from 'react';
+
+import { Popover } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+
+type HelpTextIconProps = {
+  headerContent?: ReactNode;
+  bodyContent?: ReactNode;
+};
+
+const HelpTextIcon: FC<HelpTextIconProps> = ({ bodyContent, headerContent }) => (
+  <Popover bodyContent={bodyContent} headerContent={headerContent}>
+    <HelpIcon />
+  </Popover>
+);
+
+export default HelpTextIcon;

src/utils/components/HelpTextIcon/TextWithHelpIcon.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from 'react';
+
+import HelpTextIcon from '@utils/components/HelpTextIcon/HelpTextIcon';
+
+type TextWithHelpIconProps = {
+  helpBodyContent: ReactNode;
+  helpHeaderContent?: ReactNode;
+  text: ReactNode;
+};
+
+const TextWithHelpIcon: FC<TextWithHelpIconProps> = ({
+  helpBodyContent,
+  helpHeaderContent,
+  text,
+}) => {
+  return (
+    <>
+      <span className="pf-v6-u-mr-xs">{text}</span>
+      <HelpTextIcon bodyContent={helpBodyContent} headerContent={helpHeaderContent} />
+    </>
+  );
+};
+
+export default TextWithHelpIcon;

src/utils/components/PolicyForm/PolicyForm.tsx

@@ -18,13 +18,14 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { HelpIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { getName } from '@utils/components/resources/selectors';
 
 import NodeSelectorModal from '../NodeSelectorModal/NodeSelectorModal';
 
 import ApplySelectorCheckbox from './components/ApplySelectorCheckbox';
 import PolicyFormOVSBridgeMapping from './components/PolicyFormOVSBridgeMapping';
+import { doesOVSBridgeExist } from './utils/utils';
 import PolicyInterfacesExpandable from './PolicyInterfaceExpandable';
-import { doesOVSBridgeExist } from './utils';
 
 import './policy-form.scss';
 
@@ -114,7 +115,7 @@ const PolicyForm: FC<PolicyFormProps> = ({ policy, setPolicy, createForm = false
           type="text"
           id="policy-name"
           name="policy-name"
-          value={policy?.metadata?.name}
+          value={getName(policy)}
           isDisabled={!createForm}
           onChange={(_, newName) =>
             setPolicy((draftPolicy) => {

src/utils/components/PolicyForm/PolicyInterface.tsx

@@ -29,8 +29,8 @@ import { OVN_BRIDGE_MAPPINGS } from '@utils/resources/ovn/constants';
 import BondConfiguration from './components/BondConfiguration';
 import IPConfiguration from './components/IPConfiguration';
 import PortConfiguration from './components/PortConfiguration';
-import { INTERFACE_TYPE_LABEL, NETWORK_STATES, onInterfaceChangeType } from './constants';
-import { doesOVSBridgeExist, validateInterfaceName } from './utils';
+import { INTERFACE_TYPE_LABEL, NETWORK_STATES, onInterfaceChangeType } from './utils/constants';
+import { doesOVSBridgeExist, validateInterfaceName } from './utils/utils';
 
 type PolicyInterfaceProps = {
   id: number;

src/utils/components/PolicyForm/PolicyInterfaceExpandable.tsx

@@ -15,9 +15,9 @@ import { MinusCircleIcon } from '@patternfly/react-icons';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
 import DeleteInterfaceModal from './components/DeleteInterfaceModal';
-import { onInterfaceChangeType } from './constants';
+import { onInterfaceChangeType } from './utils/constants';
+import { doesOVSBridgeExist, getExpandableTitle } from './utils/utils';
 import PolicyInterface from './PolicyInterface';
-import { doesOVSBridgeExist, getExpandableTitle } from './utils';
 
 type PolicyInterfacesExpandableProps = {
   policy: V1NodeNetworkConfigurationPolicy;

src/utils/components/PolicyForm/PolicyWizard/InterfacesStep.tsx

@@ -13,7 +13,7 @@ import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 import { getPolicyInterfaces, getPolicyInterfacesByType } from '@utils/resources/policies/utils';
 
 import PolicyFormOVSBridgeMapping from '../components/PolicyFormOVSBridgeMapping';
-import { doesOVSBridgeExist } from '../utils';
+import { doesOVSBridgeExist } from '../utils/utils';
 
 import InterfaceDetailsExpandableSection from './components/InterfaceDetailsExpandableSection';
 

src/utils/components/PolicyForm/PolicyWizard/PolicyWizard.tsx

@@ -2,18 +2,27 @@ import React, { FC, MouseEventHandler, useCallback, useState } from 'react';
 import { useNMStateTranslation } from 'src/utils/hooks/useNMStateTranslation';
 import { Updater } from 'use-immer';
 
-import { InterfaceType, V1NodeNetworkConfigurationPolicy } from '@kubevirt-ui/kubevirt-api/nmstate';
+import { V1NodeNetworkConfigurationPolicy } from '@kubevirt-ui/kubevirt-api/nmstate';
 import { Wizard, WizardStep } from '@patternfly/react-core';
+import NodesConfigurationStep from '@utils/components/PolicyForm/PolicyWizard/steps/NodesConfigurationStep/NodesConfigurationStep';
+import SettingsStep from '@utils/components/PolicyForm/PolicyWizard/steps/SettingsStep/SettingsStep';
+import { getOVNLocalnet } from '@utils/components/PolicyForm/PolicyWizard/utils/selectors';
+import { ConnectionOption } from '@utils/components/PolicyForm/PolicyWizard/utils/types';
+import {
+  getUplinkConnectionOption,
+  uplinkSettingsValid,
+} from '@utils/components/PolicyForm/PolicyWizard/utils/utils';
+import { getName } from '@utils/components/resources/selectors';
 import { isEmpty } from '@utils/helpers';
 
-import { ensureNoEmptyBridgeMapping } from '../utils';
+import { ensureNoEmptyBridgeMapping } from '../utils/utils';
 
-import BasicInfoStep from './BasicInfoStep';
-import InterfacesStep from './InterfacesStep';
-import ReviewStep from './ReviewStep';
+import NetworkIdentity from './steps/NetworkIdentity/NetworkIdentity';
+import ReviewStep from './steps/ReviewStep/ReviewStep';
+import UplinkConnectionStep from './steps/UplinkConnectionStep/UplinkConnectionStep';
 
 import '../policy-form.scss';
-import './policy-wizard.scss';
+import './PolicyWizard.scss';
 
 type PolicyWizardProps = {
   policy: V1NodeNetworkConfigurationPolicy;
@@ -53,76 +62,49 @@ const PolicyWizard: FC<PolicyWizardProps> = ({
     <Wizard
       onSave={onFormSubmit}
       onClose={onClose}
-      onStepChange={(event, currentStep) => {
+      onStepChange={(_, currentStep) => {
         onStepChange?.(currentStep.id);
       }}
       className="nmstate-policy-wizard policy-form-content"
     >
       <WizardStep
-        footer={{ isNextDisabled: isEmpty(policy.metadata.name) }}
-        id="policy-wizard-basicinfo"
-        name={t('Basic policy info')}
+        footer={{ isNextDisabled: isEmpty(getOVNLocalnet(policy)) }}
+        id="policy-wizard-network-identity"
+        name={t('Network identity')}
       >
-        <BasicInfoStep policy={policy} setPolicy={setPolicy} />
+        <NetworkIdentity policy={policy} setPolicy={setPolicy} />
       </WizardStep>
       <WizardStep
-        id="policy-wizard-interfaces"
-        name={t('Policy interfaces')}
-        footer={{
-          nextButtonProps: { isLoading: loading },
-          isNextDisabled: loading,
-          nextButtonText: t('Save'),
-        }}
-        steps={[
-          <WizardStep
-            name={t('Basic interfaces')}
-            id="policy-wizard-basic-interfaces"
-            key="policy-wizard-basic-interfaces"
-          >
-            <InterfacesStep
-              policy={policy}
-              setPolicy={setPolicy}
-              interfaceTypes={[InterfaceType.ETHERNET]}
-              label={t('Ethernet')}
-            />
-          </WizardStep>,
-          <WizardStep
-            name={t('Bonding')}
-            id="policy-wizard-bonding-interfaces"
-            key="policy-wizard-bonding-interfaces"
-          >
-            <InterfacesStep
-              policy={policy}
-              setPolicy={setPolicy}
-              interfaceTypes={[InterfaceType.BOND]}
-              label={t('Bonding')}
-            />
-          </WizardStep>,
-          <WizardStep
-            name={t('Bridging')}
-            id="policy-wizard-bridge-interfaces"
-            key="policy-wizard-bridge-interfaces"
-          >
-            <InterfacesStep
-              policy={policy}
-              setPolicy={setPolicy}
-              interfaceTypes={[InterfaceType.LINUX_BRIDGE, InterfaceType.OVS_BRIDGE]}
-              label={t('Bridging')}
-            />
-          </WizardStep>,
-        ]}
-      ></WizardStep>
-
+        footer={{ isNextDisabled: isEmpty(getName(policy)) }}
+        id="policy-wizard-basic-info"
+        name={t('Nodes configuration')}
+      >
+        <NodesConfigurationStep policy={policy} setPolicy={setPolicy} />
+      </WizardStep>
+      <WizardStep
+        id="policy-wizard-uplink-connection"
+        name={t('Uplink connection')}
+        footer={{ isNextDisabled: !uplinkSettingsValid(policy) }}
+      >
+        <UplinkConnectionStep policy={policy} setPolicy={setPolicy} />
+      </WizardStep>
+      <WizardStep
+        name={t('Settings')}
+        id="policy-wizard-configuration"
+        isDisabled={getUplinkConnectionOption(policy) === ConnectionOption.BREX}
+      >
+        <SettingsStep policy={policy} setPolicy={setPolicy} />
+      </WizardStep>
       <WizardStep
         footer={{
-          isNextDisabled: isEmpty(policy.metadata.name),
+          isNextDisabled: isEmpty(getName(policy)),
           nextButtonProps: { isLoading: loading },
-          nextButtonText: t('Create policy'),
+          nextButtonText: t('Create network'),
         }}
         id="policy-wizard-review"
         name={t('Review and create')}
       >
-        <ReviewStep policy={policy} error={error} />
+        <ReviewStep policy={policy} creationError={error} setPolicy={setPolicy} />
       </WizardStep>
     </Wizard>
   );

src/utils/components/PolicyForm/PolicyWizard/components/BridgeType.tsx

@@ -10,8 +10,8 @@ import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 import { OVN_BRIDGE_MAPPINGS } from '@utils/resources/ovn/constants';
 import { getOVNConfiguration } from '@utils/resources/policies/getters';
 
-import { INTERFACE_TYPE_LABEL, onInterfaceChangeType } from '../../constants';
-import { doesOVSBridgeExist } from '../../utils';
+import { INTERFACE_TYPE_LABEL, onInterfaceChangeType } from '../../utils/constants';
+import { doesOVSBridgeExist } from '../../utils/utils';
 
 type BridgeTypeProps = {
   policyInterface?: NodeNetworkConfigurationInterface;