Resolves: MTV-3742 | Standartize plan mappings tab

Signed-off-by: Aviv Turgeman <[email protected]>

Author: avivtur

locales/en/plugin__forklift-console-plugin.json

@@ -210,7 +210,6 @@
   "Click on \"Create migration plan\".": "Click on \"Create migration plan\".",
   "Click the pencil for setting provider web UI link": "Click the pencil for setting provider web UI link",
   "Click the update credentials button to save your changes, button is disabled until a change is detected.": "Click the update credentials button to save your changes, button is disabled until a change is detected.",
-  "Click the update mappings button to save your changes, button is disabled until a change is detected.": "Click the update mappings button to save your changes, button is disabled until a change is detected.",
   "Close": "Close",
   "Cloud computing platform that controls large pools of resources": "Cloud computing platform that controls large pools of resources",
   "Cloud computing virtualization platform": "Cloud computing virtualization platform",
@@ -292,7 +291,6 @@
   "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.": "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.",
   "Delete": "Delete",
   "Delete {{model.label}}": "Delete {{model.label}}",
-  "Delete mapping": "Delete mapping",
   "Delete network map": "Delete network map",
   "Delete plan": "Delete plan",
   "Delete provider": "Delete provider",
@@ -336,7 +334,6 @@
   "Edit default transfer network": "Edit default transfer network",
   "Edit description": "Edit description",
   "Edit labels": "Edit labels",
-  "Edit mappings": "Edit mappings",
   "Edit migration plan target project": "Edit migration plan target project",
   "Edit migration plan transfer network": "Edit migration plan transfer network",
   "Edit network map": "Edit network map",
@@ -629,7 +626,6 @@
   "Network map is required.": "Network map is required.",
   "Network map name": "Network map name",
   "Network map YAML": "Network map YAML",
-  "Network map:": "Network map:",
   "Network maps": "Network maps",
   "Network maps ensure that the network configurations of your migrating virtual machines (VMs) are correctly translated and applied in the target environment.": "Network maps ensure that the network configurations of your migrating virtual machines (VMs) are correctly translated and applied in the target environment.",
   "Network name template": "Network name template",
@@ -652,7 +648,6 @@
   "No network mappings selected": "No network mappings selected",
   "No network maps found": "No network maps found",
   "No network maps found in project <1>{namespace}</1>.": "No network maps found in project <1>{namespace}</1>.",
-  "No networks in this category": "No networks in this category",
   "No node selectors defined": "No node selectors defined",
   "No options available": "No options available",
   "No owner": "No owner",
@@ -673,7 +668,6 @@
   "No storage maps found": "No storage maps found",
   "No storage maps found in project <1>{namespace}</1>.": "No storage maps found in project <1>{namespace}</1>.",
   "No storages available": "No storages available",
-  "No storages in this category": "No storages in this category",
   "No value for provider web UI link": "No value for provider web UI link",
   "No VMs have been selected": "No VMs have been selected",
   "Node": "Node",
@@ -682,7 +676,6 @@
   "Node labels": "Node labels",
   "Node selector enables constraining virtual machines scheduling to specific nodes, based on node labels. Adding labels below will  schedule virtual machines only on nodes which contain the specified labels.": "Node selector enables constraining virtual machines scheduling to specific nodes, based on node labels. Adding labels below will  schedule virtual machines only on nodes which contain the specified labels.",
   "None": "None",
-  "Not available": "Not available",
   "Not in": "Not in",
   "Not Ready": "Not Ready",
   "not started": "not started",
@@ -735,10 +728,8 @@
   "OpenStack token for authentication using a user name. [required]": "OpenStack token for authentication using a user name. [required]",
   "Operator": "Operator",
   "Other networks present on the source provider": "Other networks present on the source provider",
-  "Other networks present on the source provider ": "Other networks present on the source provider ",
   "Other settings (optional)": "Other settings (optional)",
   "Other storages present on the source provider": "Other storages present on the source provider",
-  "Other storages present on the source provider ": "Other storages present on the source provider ",
   "OvaPath": "OvaPath",
   "Overview": "Overview",
   "Owner": "Owner",
@@ -969,7 +960,6 @@
   "Storage map name": "Storage map name",
   "Storage map type": "Storage map type",
   "Storage map YAML": "Storage map YAML",
-  "Storage map:": "Storage map:",
   "Storage maps": "Storage maps",
   "Storage maps define how the storage of source VMs will be provisioned on the target cluster by linking source storage entities to target storage classes.": "Storage maps define how the storage of source VMs will be provisioned on the target cluster by linking source storage entities to target storage classes.",
   "Storage product": "Storage product",
@@ -1004,7 +994,6 @@
   "The commercial product name or model of the storage system being used. This helps ensure the correct features and APIs will be used.": "The commercial product name or model of the storage system being used. This helps ensure the correct features and APIs will be used.",
   "The current certificate does not match the certificate fetched from URL. Manually validate the fingerprint before proceeding.": "The current certificate does not match the certificate fetched from URL. Manually validate the fingerprint before proceeding.",
   "The default setting is \"Providers default,\" which uses the default network configured for your source and target providers. You can select a specific NetworkAttachmentDefinition from the dropdown list if you want to use a dedicated network for migration data to improve performance or security.": "The default setting is \"Providers default,\" which uses the default network configured for your source and target providers. You can select a specific NetworkAttachmentDefinition from the dropdown list if you want to use a dedicated network for migration data to improve performance or security.",
-  "The edit mappings button is disabled if the plan started running and at least one virtual machine was migrated successfully or when the plan status does not enable editing.": "The edit mappings button is disabled if the plan started running and at least one virtual machine was migrated successfully or when the plan status does not enable editing.",
   "The Manager CA certificate unless it was replaced by a third-party certificate, in which case, enter the Manager Apache CA certificate.": "The Manager CA certificate unless it was replaced by a third-party certificate, in which case, enter the Manager Apache CA certificate.",
   "The mapping data from the inventory is not available, {{resourcesError}}.": "The mapping data from the inventory is not available, {{resourcesError}}.",
   "The password for the ESXi host admin": "The password for the ESXi host admin",
@@ -1030,10 +1019,8 @@
   "The provider is not ready.": "The provider is not ready.",
   "The repository or virtualization platform you want to migrate your virtual machines from into the OpenShift cluster.": "The repository or virtualization platform you want to migrate your virtual machines from into the OpenShift cluster.",
   "The Secret was not loaded. Try reloading the page or check if the secret exists. ": "The Secret was not loaded. Try reloading the page or check if the secret exists. ",
-  "The source mapping data from the inventory is not available: {{resourcesError}}.": "The source mapping data from the inventory is not available: {{resourcesError}}.",
   "The storage device or partition that contains the root filesystem. For example, naming a root device \"sdb2/boot/dev\" would mean to use the second partition on the first hard drive.": "The storage device or partition that contains the root filesystem. For example, naming a root device \"sdb2/boot/dev\" would mean to use the second partition on the first hard drive.",
   "The target project is the project, within your selected target provider, that your virtual machines will be migrated to. This is different from the project that your migration plan will be created in and where your provider was created.": "The target project is the project, within your selected target provider, that your virtual machines will be migrated to. This is different from the project that your migration plan will be created in and where your provider was created.",
-  "The target storage mapping data from the inventory is not available: {{resourcesError}}.": "The target storage mapping data from the inventory is not available: {{resourcesError}}.",
   "The uploaded file name extension should be .ova": "The uploaded file name extension should be .ova",
   "The URL is invalid. URL should include the schema, for example: https://example.com:6443.": "The URL is invalid. URL should include the schema, for example: https://example.com:6443.",
   "The URL is required. URL should include the schema and path, for example: https://rhv-host-example.com/ovirt-engine/api": "The URL is required. URL should include the schema and path, for example: https://rhv-host-example.com/ovirt-engine/api",
@@ -1087,7 +1074,6 @@
   "Unknown power state": "Unknown power state",
   "Unsupported provider type": "Unsupported provider type",
   "Update credentials": "Update credentials",
-  "Update mappings": "Update mappings",
   "Updated": "Updated",
   "updating the hooks will override the current configuration.": "updating the hooks will override the current configuration.",
   "updating the LUKS decryption keys will override the current configuration.": "updating the LUKS decryption keys will override the current configuration.",

src/components/headers/SectionHeadingWithEdit.tsx

@@ -17,6 +17,7 @@ type SectionHeadingWithEditProps = Omit<
 >;
 
 const SectionHeadingWithEdit: FC<SectionHeadingWithEditProps> = ({
+  children,
   'data-testid': dataTestId,
   editable = true,
   onClick,
@@ -41,7 +42,9 @@ const SectionHeadingWithEdit: FC<SectionHeadingWithEditProps> = ({
           </Button>
         </Flex>
       }
-    />
+    >
+      {children}
+    </SectionHeading>
   );
 };
 

src/components/mappings/network-mappings/SourceNetworkField.tsx

@@ -0,0 +1,113 @@
+import { useMemo } from 'react';
+import {
+  type Control,
+  Controller,
+  type FieldValues,
+  type Path,
+  type UseFormTrigger,
+  useWatch,
+} from 'react-hook-form';
+import EmptyCategorySelectOption from 'src/plans/components/EmptyCategorySelectOption';
+import {
+  NetworkMapFieldId,
+  type NetworkMapping,
+} from 'src/plans/create/steps/network-map/constants';
+import type { MappingValue } from 'src/plans/create/types';
+
+import Select from '@components/common/Select';
+import { SelectGroup, SelectList, SelectOption } from '@patternfly/react-core';
+import { getDuplicateValues, isEmpty } from '@utils/helpers';
+import { useForkliftTranslation } from '@utils/i18n';
+
+import { isNetworkMappingDisabled } from './utils/utils';
+
+type SourceNetworkFieldProps<T extends FieldValues> = {
+  fieldId: Path<T>;
+  control: Control<T>;
+  trigger: UseFormTrigger<T>;
+  usedSourceNetworks: MappingValue[];
+  otherSourceNetworks: MappingValue[];
+};
+
+const SourceNetworkField = <T extends FieldValues>({
+  control,
+  fieldId,
+  otherSourceNetworks,
+  trigger,
+  usedSourceNetworks,
+}: SourceNetworkFieldProps<T>) => {
+  const { t } = useForkliftTranslation();
+  const networkMappings: NetworkMapping[] = useWatch({
+    control,
+    name: NetworkMapFieldId.NetworkMap as Path<T>,
+  });
+
+  const allNetworks = useMemo(
+    () => [...usedSourceNetworks, ...otherSourceNetworks],
+    [usedSourceNetworks, otherSourceNetworks],
+  );
+  const duplicateNames = useMemo(
+    () => getDuplicateValues(allNetworks, (network) => network.name),
+    [allNetworks],
+  );
+
+  return (
+    <Controller
+      name={fieldId}
+      control={control}
+      render={({ field }) => (
+        <Select
+          ref={field.ref}
+          id={fieldId}
+          testId={`source-network-${fieldId}`}
+          value={(field.value as MappingValue).name}
+          onSelect={async (_event, value) => {
+            field.onChange(value);
+            await trigger(fieldId);
+          }}
+          placeholder={t('Select source network')}
+        >
+          <SelectGroup label={t('Networks used by the selected VMs')}>
+            <SelectList>
+              {isEmpty(usedSourceNetworks) ? (
+                <EmptyCategorySelectOption resourceName="networks" />
+              ) : (
+                usedSourceNetworks.map((usedNetwork) => (
+                  <SelectOption
+                    key={usedNetwork.name}
+                    value={usedNetwork}
+                    description={duplicateNames.has(usedNetwork.name) ? usedNetwork.id : null}
+                    isDisabled={isNetworkMappingDisabled(networkMappings, usedNetwork)}
+                  >
+                    {usedNetwork.name}
+                  </SelectOption>
+                ))
+              )}
+            </SelectList>
+          </SelectGroup>
+
+          <SelectGroup label={t('Other networks present on the source provider')}>
+            <SelectList>
+              {isEmpty(otherSourceNetworks) ? (
+                <EmptyCategorySelectOption resourceName="networks" />
+              ) : (
+                otherSourceNetworks?.map((otherNetwork) => (
+                  <SelectOption
+                    key={otherNetwork.name}
+                    value={otherNetwork}
+                    description={duplicateNames.has(otherNetwork.name) ? otherNetwork.id : null}
+                    isDisabled={isNetworkMappingDisabled(networkMappings, otherNetwork)}
+                  >
+                    {otherNetwork.name}
+                  </SelectOption>
+                ))
+              )}
+            </SelectList>
+          </SelectGroup>
+        </Select>
+      )}
+    />
+  );
+};
+
+export default SourceNetworkField;

src/components/mappings/network-mappings/TargetNetworkField.tsx

@@ -0,0 +1,96 @@
+import { type FC, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import type { MappingValue } from 'src/plans/create/types';
+import { IgnoreNetwork } from 'src/plans/details/tabs/Mappings/utils/constants';
+
+import Select from '@components/common/Select';
+import { Divider, SelectList, SelectOption } from '@patternfly/react-core';
+import { isEmpty } from '@utils/helpers';
+import { useForkliftTranslation } from '@utils/i18n';
+
+type TargetNetworkFieldProps = {
+  fieldId: string;
+  targetNetworks: MappingValue[] | Record<string, MappingValue>;
+  showIgnoreNetworkOption?: boolean;
+  emptyStateMessage?: string;
+  isDisabled?: boolean;
+  triggerFieldId?: string;
+};
+
+const TargetNetworkField: FC<TargetNetworkFieldProps> = ({
+  emptyStateMessage,
+  fieldId,
+  isDisabled,
+  showIgnoreNetworkOption,
+  targetNetworks,
+  triggerFieldId,
+}) => {
+  const { control, trigger } = useFormContext();
+  const { t } = useForkliftTranslation();
+
+  // Normalize targetNetworks to an array of [key, MappingValue] tuples
+  const networksEntries = useMemo(
+    () =>
+      Array.isArray(targetNetworks)
+        ? targetNetworks.map((network) => [network.id ?? network.name, network] as const)
+        : Object.entries(targetNetworks),
+    [targetNetworks],
+  );
+
+  const hasNetworks = useMemo(() => !isEmpty(networksEntries), [networksEntries]);
+
+  return (
+    <Controller
+      name={fieldId}
+      control={control}
+      render={({ field }) => (
+        <Select
+          ref={field.ref}
+          id={fieldId}
+          testId="network-map-target-network-select"
+          value={(field.value as MappingValue)?.name}
+          onSelect={async (_event, value) => {
+            field.onChange(value);
+            if (triggerFieldId) {
+              await trigger(triggerFieldId);
+              return;
+            }
+
+            await trigger();
+          }}
+          placeholder={t('Select target network')}
+          isDisabled={isDisabled}
+        >
+          <SelectList>
+            {!hasNetworks && emptyStateMessage ? (
+              <SelectOption key="empty" isDisabled>
+                {emptyStateMessage}
+              </SelectOption>
+            ) : (
+              <>
+                {networksEntries.map(([key, network]) => (
+                  <SelectOption key={key} value={network}>
+                    {network.name}
+                  </SelectOption>
+                ))}
+                {showIgnoreNetworkOption && (
+                  <>
+                    <Divider />
+                    <SelectOption
+                      key={IgnoreNetwork.Type}
+                      value={{ id: IgnoreNetwork.Type, name: IgnoreNetwork.Label }}
+                    >
+                      {IgnoreNetwork.Label}
+                    </SelectOption>
+                  </>
+                )}
+              </>
+            )}
+          </SelectList>
+        </Select>
+      )}
+    />
+  );
+};
+
+export default TargetNetworkField;

src/components/mappings/network-mappings/utils/utils.ts

@@ -0,0 +1,14 @@
+import {
+  NetworkMapFieldId,
+  type NetworkMapping,
+} from 'src/plans/create/steps/network-map/constants';
+import type { MappingValue } from 'src/plans/create/types';
+
+export const isNetworkMappingDisabled = (
+  networkMappings: NetworkMapping[],
+  usedNetwork: MappingValue,
+) => {
+  return networkMappings?.some(
+    (mapping: NetworkMapping) => mapping[NetworkMapFieldId.SourceNetwork].id === usedNetwork.id,
+  );
+};

src/networkMaps/create/fields/CreateNetworkMapFieldTable.tsx

@@ -5,6 +5,7 @@ import { getNetworkMapFieldId } from 'src/networkMaps/utils/getNetworkMapFieldId
 import useTargetNetworks from 'src/utils/hooks/useTargetNetworks';
 
 import FieldBuilderTable from '@components/FieldBuilderTable/FieldBuilderTable';
+import TargetNetworkField from '@components/mappings/network-mappings/TargetNetworkField';
 import { isEmpty } from '@utils/helpers';
 import { useForkliftTranslation } from '@utils/i18n';
 
@@ -13,7 +14,6 @@ import { NetworkMapFieldId } from '../../utils/types';
 import type { CreateNetworkMapFormData } from '../types';
 
 import InventorySourceNetworkField from './InventorySourceNetworkField';
-import TargetNetworkField from './TargetNetworkField';
 import { validateNetworkMaps } from './utils';
 
 const CreateNetworkMapFieldTable: FC = () => {
@@ -76,6 +76,10 @@ const CreateNetworkMapFieldTable: FC = () => {
           <TargetNetworkField
             fieldId={getNetworkMapFieldId(NetworkMapFieldId.TargetNetwork, index)}
             targetNetworks={targetNetworks}
+            emptyStateMessage={t(
+              'Select a target provider and project to list available target networks',
+            )}
+            isDisabled={isSubmitting}
           />,
         ],
       }))}