kubevirt: refactor createNicRow to NICModal

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx

@@ -10,6 +10,8 @@ import {
   WizardStep,
 } from '@patternfly/react-core';
 import * as _ from 'lodash';
+import { useShowErrorToggler } from '../../hooks/use-show-error-toggler';
+import { getDialogUIError } from '../../utils/strings';
 import { ALL_VM_WIZARD_TABS, VMWizardProps, VMWizardTab } from './types';
 import {
   hasStepAllRequiredFilled,
@@ -37,22 +39,14 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
   stepData,
   isCreateTemplate,
 }) => {
-  const [showError, setShowError] = React.useState(false);
-  const [prevIsValid, setPrevIsValid] = React.useState(false);
-
+  const [showError, setShowError, checkValidity] = useShowErrorToggler();
   return (
     <WizardContextConsumer>
       {({ onNext, onBack, onClose, activeStep, goToStepById }: WizardContext) => {
         const activeStepID = activeStep.id as VMWizardTab;
         const isLocked = _.some(ALL_VM_WIZARD_TABS, (id) => isStepLocked(stepData, id));
         const isValid = isStepValid(stepData, activeStepID);
-
-        if (isValid !== prevIsValid) {
-          setPrevIsValid(isValid);
-          if (isValid) {
-            setShowError(false);
-          }
-        }
+        checkValidity(isValid);
 
         const isFirstStep = activeStepID === VMWizardTab.VM_SETTINGS;
         const isFinishingStep = [VMWizardTab.REVIEW, VMWizardTab.RESULT].includes(activeStepID);
@@ -65,11 +59,7 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
           <footer className={css(styles.wizardFooter)}>
             {!isValid && showError && (
               <Alert
-                title={
-                  hasStepAllRequiredFilled(stepData, activeStepID)
-                    ? 'Please correct the invalid fields.'
-                    : 'Please fill in all required fields.'
-                }
+                title={getDialogUIError(hasStepAllRequiredFilled(stepData, activeStepID))}
                 isInline
                 variant="danger"
                 className="kubevirt-create-vm-modal__footer-error"

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/networks-tab-initial-state.ts

@@ -1,4 +1,4 @@
-import { NetworkBinding, NetworkType, POD_NETWORK } from '../../../../constants/vm';
+import { NetworkInterfaceType, NetworkType, POD_NETWORK } from '../../../../constants/vm';
 
 export const podNetwork = {
   rootNetwork: {},
@@ -9,7 +9,7 @@ export const podNetwork = {
   editable: true,
   edit: false,
   networkType: NetworkType.POD,
-  binding: NetworkBinding.MASQUERADE,
+  binding: NetworkInterfaceType.MASQUERADE,
 };
 
 export const getNetworksInitialState = () => ({

frontend/packages/kubevirt-plugin/src/components/form/form-select-placeholder-option.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { FormSelectOption } from '@patternfly/react-core';
 
+export const asFormSelectValue = (value) => value || '';
+
 // renders only when props change (shallow compare)
 export const FormSelectPlaceholderOption: React.FC<FormSelectPlaceholderOptionProps> = ({
   placeholder,

frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.scss

@@ -0,0 +1,3 @@
+.kubevirt-create-nic-modal__buttons {
+  text-align: left;
+}

frontend/packages/kubevirt-plugin/src/components/modals/modal/modal-footer.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Alert, Button, ButtonVariant } from '@patternfly/react-core';
+import { LoadingInline } from '@console/internal/components/utils';
+import { prefixedID } from '../../../utils';
+
+import './modal-footer.scss';
+
+type ModalErrorMessageProps = {
+  message: string;
+};
+
+export const ModalErrorMessage: React.FC<ModalErrorMessageProps> = ({ message }) => (
+  <Alert
+    isInline
+    className="co-alert co-alert--scrollable"
+    variant="danger"
+    title="An error occurred"
+  >
+    <div className="co-pre-line">{message}</div>
+  </Alert>
+);
+
+type ModalSimpleErrorMessageProps = {
+  message: string;
+};
+
+export const ModalSimpleErrorMessage: React.FC<ModalSimpleErrorMessageProps> = ({ message }) => (
+  <Alert isInline className="co-alert" variant="danger" title={message} />
+);
+
+type ModalFooterProps = {
+  id?: string;
+  errorMessage?: string;
+  isSimpleError?: boolean;
+  onSubmit: (e) => void;
+  onCancel: (e) => void;
+  isDisabled?: boolean;
+  submitButtonText?: string;
+  cancelButtonText?: string;
+};
+
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  id,
+  errorMessage = null,
+  isDisabled = false,
+  isSimpleError = false,
+  onSubmit,
+  onCancel,
+  submitButtonText = 'Add',
+  cancelButtonText = 'Cancel',
+}) => (
+  <footer className="co-m-btn-bar modal-footer kubevirt-create-nic-modal__buttons">
+    {errorMessage && isSimpleError && <ModalSimpleErrorMessage message={errorMessage} />}
+    {errorMessage && !isSimpleError && <ModalErrorMessage message={errorMessage} />}
+    <Button
+      variant={ButtonVariant.primary}
+      onClick={onSubmit}
+      id={prefixedID(id, 'submit')}
+      disabled={isDisabled}
+    >
+      {submitButtonText}
+    </Button>
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={onCancel}
+      id={prefixedID(id, 'cancel')}
+      disabled={isDisabled}
+    >
+      {cancelButtonText}
+    </Button>
+    {isDisabled && <LoadingInline />}
+  </footer>
+);

frontend/packages/kubevirt-plugin/src/components/modals/nic-modal/index.ts

@@ -0,0 +1 @@
+export * from './nic-modal';

frontend/packages/kubevirt-plugin/src/components/modals/nic-modal/nic-modal-enhanced.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Firehose, FirehoseResult } from '@console/internal/components/utils';
+import { createModalLauncher, ModalComponentProps } from '@console/internal/components/factory';
+import { k8sPatch, K8sResourceKind } from '@console/internal/module/k8s';
+import { getName, getNamespace } from '@console/shared/src';
+import { getLoadedData, getResource } from '../../../utils';
+import { NetworkAttachmentDefinitionModel } from '../../../models';
+import { NetworkType } from '../../../constants/vm';
+import { getInterfaces, getUsedNetworks, asVM, getVMLikeModel } from '../../../selectors/vm';
+import { NetworkInterfaceWrapper } from '../../../k8s/wrapper/vm/network-interface-wrapper';
+import { VMLikeEntityKind } from '../../../types';
+import { getAddNicPatches } from '../../../k8s/patches/vm/vm-nic-patches';
+import { getSimpleName } from '../../../selectors/utils';
+import { NetworkWrapper } from '../../../k8s/wrapper/vm/network-wrapper';
+import { NICModal } from './nic-modal';
+
+const NICModalFirehoseComponent: React.FC<NICModalFirehoseComponentProps> = (props) => {
+  const { nic, network, vmLikeEntity, vmLikeEntityLoading, ...restProps } = props;
+
+  const vmLikeFinal = getLoadedData(vmLikeEntityLoading, vmLikeEntity); // default old snapshot before loading a new one
+  const vm = asVM(vmLikeFinal);
+
+  const nicWrapper = nic ? NetworkInterfaceWrapper.initialize(nic) : NetworkInterfaceWrapper.EMPTY;
+  const networkWrapper = network ? NetworkWrapper.initialize(network) : NetworkWrapper.EMPTY;
+
+  const usedNetworksChoices = getUsedNetworks(vm);
+
+  const usedInterfacesNames: Set<string> = new Set(
+    getInterfaces(vm)
+      .map(getSimpleName)
+      .filter((n) => n && n !== nicWrapper.getName()),
+  );
+
+  const usedMultusNetworkNames: Set<string> = new Set(
+    usedNetworksChoices
+      .filter(
+        (usedNetwork) =>
+          usedNetwork.getType() === NetworkType.MULTUS &&
+          usedNetwork.getMultusNetworkName() !== networkWrapper.getMultusNetworkName(),
+      )
+      .map((usedNetwork) => usedNetwork.getMultusNetworkName()),
+  );
+
+  const allowPodNetwork =
+    networkWrapper.isPodNetwork() ||
+    !usedNetworksChoices.find((usedNetwork) => usedNetwork.isPodNetwork());
+
+  const onSubmit = (resultNetworkInterfaceWrapper, resultNetworkWrapper) =>
+    k8sPatch(
+      getVMLikeModel(vmLikeEntity),
+      vmLikeEntity,
+      getAddNicPatches(vmLikeEntity, {
+        nic: NetworkInterfaceWrapper.mergeWrappers(
+          nicWrapper,
+          resultNetworkInterfaceWrapper,
+        ).asResource(),
+        network: NetworkWrapper.mergeWrappers(networkWrapper, resultNetworkWrapper).asResource(),
+        oldNICName: nicWrapper.getName(),
+        oldNetworkName: networkWrapper.getName(),
+      }),
+    );
+
+  return (
+    <NICModal
+      {...restProps}
+      usedInterfacesNames={usedInterfacesNames}
+      usedMultusNetworkNames={usedMultusNetworkNames}
+      allowPodNetwork={allowPodNetwork}
+      nic={nicWrapper}
+      network={networkWrapper}
+      onSubmit={onSubmit}
+    />
+  );
+};
+
+type NICModalFirehoseComponentProps = ModalComponentProps & {
+  nic?: any;
+  network?: any;
+  nads?: FirehoseResult<K8sResourceKind[]>;
+  vmLikeEntityLoading?: FirehoseResult<VMLikeEntityKind>;
+  vmLikeEntity: VMLikeEntityKind;
+};
+
+const NICModalFirehose: React.FC<NICModalFirehoseProps> = (props) => {
+  const { hasNADs, vmLikeEntity, ...restProps } = props;
+
+  const namespace = getNamespace(vmLikeEntity);
+  const name = getName(vmLikeEntity);
+
+  const resources = [
+    getResource(getVMLikeModel(vmLikeEntity), {
+      name,
+      namespace,
+      prop: 'vmLikeEntityLoading',
+      isList: false,
+    }),
+  ];
+
+  if (hasNADs) {
+    resources.push(
+      getResource(NetworkAttachmentDefinitionModel, {
+        namespace,
+        prop: 'nads',
+        optional: true,
+      }),
+    );
+  }
+
+  return (
+    <Firehose resources={resources}>
+      <NICModalFirehoseComponent vmLikeEntity={vmLikeEntity} {...restProps} />
+    </Firehose>
+  );
+};
+
+type NICModalFirehoseProps = ModalComponentProps & {
+  vmLikeEntity: VMLikeEntityKind;
+  nic?: any;
+  network?: any;
+  hasNADs: boolean;
+};
+
+const cloneVMModalStateToProps = ({ k8s }) => {
+  const hasNADs = !!k8s.getIn(['RESOURCES', 'models', NetworkAttachmentDefinitionModel.kind]);
+  return {
+    hasNADs,
+  };
+};
+
+const NICModalConnected = connect(cloneVMModalStateToProps)(NICModalFirehose);
+
+export const nicModalEnhanced = createModalLauncher(NICModalConnected);