From a226f567b1d1e8eae6201c2a9dd2bfe73287a752 Mon Sep 17 00:00:00 2001
From: Joachim Schuler <jschuler@redhat.com>
Date: Fri, 22 Nov 2024 14:08:56 -0500
Subject: [PATCH] MTV-1690: Plan wizard - Step 2 - Update mappings section

Signed-off-by: Joachim Schuler <jschuler@redhat.com>
---
 .../en/plugin__forklift-console-plugin.json   |  9 ++-
 .../ProvidersCreateVmMigration.style.css      | 33 +++++++-
 .../migrate/components/MappingListHeader.tsx  | 34 ++++++++
 .../migrate/components/MappingListItem.tsx    | 79 +++++++++++--------
 .../migrate/components/PlansCreateForm.tsx    | 59 ++++++++------
 5 files changed, 152 insertions(+), 62 deletions(-)
 create mode 100644 packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListHeader.tsx

diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
index e3448bcb9..44091eea9 100644
--- a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
+++ b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -271,6 +271,7 @@
   "Network Map name re-generated": "Network Map name re-generated",
   "Network map:": "Network map:",
   "Network mapping is empty, make sure no mappings are required for this migration plan.": "Network mapping is empty, make sure no mappings are required for this migration plan.",
+  "Network mappings": "Network mappings",
   "Network mappings have been re-generated": "Network mappings have been re-generated",
   "Network mappings is empty": "Network mappings is empty",
   "NetworkAttachmentDefinitions": "NetworkAttachmentDefinitions",
@@ -439,8 +440,11 @@
   "Something is wrong, the data was not loaded due to an error, please try to reload the page.": "Something is wrong, the data was not loaded due to an error, please try to reload the page.",
   "Something is wrong, the secret was not loaded, please try to reload the page.": "Something is wrong, the secret was not loaded, please try to reload the page.",
   "source": "source",
+  "Source": "Source",
+  "Source network": "Source network",
   "Source Only": "Source Only",
   "Source provider": "Source provider",
+  "Source storage": "Source storage",
   "Specify a list of passphrases for the Linux Unified Key Setup (LUKS)-encrypted devices for the VMs that you want to migrate.": "Specify a list of passphrases for the Linux Unified Key Setup (LUKS)-encrypted devices for the VMs that you want to migrate.",
   "Specify the type of source provider. Allowed values are ova, ovirt, vsphere,\n      openshift, and openstack. This label is needed to verify the credentials are correct when the remote system is accessible and, for RHV, to retrieve the Manager CA certificate when\n      a third-party certificate is specified.": "Specify the type of source provider. Allowed values are ova, ovirt, vsphere,\n      openshift, and openstack. This label is needed to verify the credentials are correct when the remote system is accessible and, for RHV, to retrieve the Manager CA certificate when\n      a third-party certificate is specified.",
   "Staging": "Staging",
@@ -450,12 +454,12 @@
   "Status": "Status",
   "Status details": "Status details",
   "Storage": "Storage",
-  "Storage and network mappings": "Storage and network mappings",
   "Storage classes": "Storage classes",
   "Storage domains": "Storage domains",
   "Storage Map name re-generated": "Storage Map name re-generated",
   "Storage map:": "Storage map:",
   "Storage mapping is empty, make sure no mappings are required for this migration plan.": "Storage mapping is empty, make sure no mappings are required for this migration plan.",
+  "Storage mappings": "Storage mappings",
   "Storage mappings have been re-generated": "Storage mappings have been re-generated",
   "Storage mappings is empty": "Storage mappings is empty",
   "StorageMap details": "StorageMap details",
@@ -464,10 +468,13 @@
   "StorageMaps for virtualization": "StorageMaps for virtualization",
   "Storages used by the selected VMs": "Storages used by the selected VMs",
   "Succeeded": "Succeeded",
+  "Target": "Target",
   "Target and Source": "Target and Source",
   "Target namespace": "Target namespace",
   "Target namespace.": "Target namespace.",
+  "Target network": "Target network",
   "Target provider": "Target provider",
+  "Target storage": "Target storage",
   "Tasks": "Tasks",
   "Template": "Template",
   "Tenant": "Tenant",
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigration.style.css b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigration.style.css
index e9b69137a..7da8b3625 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigration.style.css
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigration.style.css
@@ -11,6 +11,28 @@
   max-width: 55rem;
 }
 
+.forklift-page-mapping-list--header {
+  max-width: 55rem;
+  font-weight: bold;
+  border: 0;
+  display: none;
+}
+
+/* stylelint-disable-next-line selector-disallowed-list */
+.forklift-page-mapping-list--header .pf-v5-c-data-list__item {
+  border: 0;
+}
+
+.forklift-page-mapping-list--header-action-spacer {
+  width: 46px;
+}
+
+@media screen and (min-width: 768px) {
+  .forklift-page-mapping-list--header {
+    display: block !important;
+  }
+}
+
 .forklift-page-resource-link-in-description-item {
   padding-left: 8px;
 }
@@ -21,8 +43,17 @@
 
 .forklift--create-vm-migration-plan--section-header {
   margin-bottom: 0;
+  justify-content: start;
+  align-items: center;
 }
 
 .forklift--create-vm-migration-plan--form-actions {
   margin-top: var(--pf-global--spacer--md);
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+  /* stylelint-disable-next-line selector-disallowed-list */
+  .forklift-page-mapping-list .pf-v5-c-form__group-label {
+    display: none !important;
+  }
+}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListHeader.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListHeader.tsx
new file mode 100644
index 000000000..5f235cdb9
--- /dev/null
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListHeader.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+} from '@patternfly/react-core';
+
+export const MappingListHeader = ({
+  sourceHeading,
+  destinationHeading,
+}: {
+  sourceHeading: string;
+  destinationHeading: string;
+}) => (
+  <DataList isCompact aria-label="" className="forklift-page-mapping-list--header">
+    <DataListItem aria-labelledby="">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="source">{sourceHeading}</DataListCell>,
+            <DataListCell key="destination">{destinationHeading}</DataListCell>,
+          ]}
+        />
+        <DataListAction aria-label="empty" id="empty" aria-labelledby="" aria-hidden>
+          <div className="forklift-page-mapping-list--header-action-spacer"></div>
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
index 9b9b6dc67..f546bca63 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/MappingListItem.tsx
@@ -9,6 +9,8 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  Form,
+  FormGroup,
 } from '@patternfly/react-core';
 import {
   Select,
@@ -89,42 +91,50 @@ export const MappingListItem: FC<MappingListItemProps> = ({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="source">
-              <Select
-                variant={SelectVariant.single}
-                aria-label=""
-                onToggle={setToggleSrcOpen}
-                onSelect={onSelectSource}
-                selections={source}
-                isOpen={isSrcOpen}
-                isDisabled={isDisabled}
-                aria-labelledby=""
-                isGrouped
-                menuAppendTo={() => document.body}
-              >
-                <SelectGroup label={usedSourcesLabel} key="usedSources">
-                  {toGroup(usedSources, noSourcesLabel, source)}
-                </SelectGroup>
-                <SelectGroup label={generalSourcesLabel} key="generalSources">
-                  {toGroup(generalSources, noSourcesLabel, source)}
-                </SelectGroup>
-              </Select>
+              <Form>
+                <FormGroup label={t('Source')}>
+                  <Select
+                    variant={SelectVariant.single}
+                    aria-label=""
+                    onToggle={setToggleSrcOpen}
+                    onSelect={onSelectSource}
+                    selections={source}
+                    isOpen={isSrcOpen}
+                    isDisabled={isDisabled}
+                    aria-labelledby=""
+                    isGrouped
+                    menuAppendTo={() => document.body}
+                  >
+                    <SelectGroup label={usedSourcesLabel} key="usedSources">
+                      {toGroup(usedSources, noSourcesLabel, source)}
+                    </SelectGroup>
+                    <SelectGroup label={generalSourcesLabel} key="generalSources">
+                      {toGroup(generalSources, noSourcesLabel, source)}
+                    </SelectGroup>
+                  </Select>
+                </FormGroup>
+              </Form>
             </DataListCell>,
             <DataListCell key="destination">
-              <Select
-                variant={SelectVariant.single}
-                aria-label=""
-                onToggle={setToggleTrgOpen}
-                onSelect={onSelectDestination}
-                selections={destination}
-                isOpen={isTrgOpen}
-                isDisabled={isDisabled}
-                aria-labelledby=""
-                menuAppendTo={() => document.body}
-              >
-                {destinations.map((label) => (
-                  <SelectOption value={label} key={label} />
-                ))}
-              </Select>
+              <Form>
+                <FormGroup label={t('Target')}>
+                  <Select
+                    variant={SelectVariant.single}
+                    aria-label=""
+                    onToggle={setToggleTrgOpen}
+                    onSelect={onSelectDestination}
+                    selections={destination}
+                    isOpen={isTrgOpen}
+                    isDisabled={isDisabled}
+                    aria-labelledby=""
+                    menuAppendTo={() => document.body}
+                  >
+                    {destinations.map((label) => (
+                      <SelectOption value={label} key={label} />
+                    ))}
+                  </Select>
+                </FormGroup>
+              </Form>
             </DataListCell>,
           ]}
         />
@@ -132,6 +142,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
           id={`mapping_list_item_${index}`}
           aria-label={t('Actions')}
           aria-labelledby=""
+          className="pf-v5-u-align-items-center"
         >
           <Button
             onClick={onClick}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
index aa712ab5f..12c4fe6eb 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
@@ -40,6 +40,7 @@ import { CreateVmMigrationPageState, NetworkAlerts, StorageAlerts } from '../typ
 
 import { EditableDescriptionItem } from './EditableDescriptionItem';
 import { MappingList } from './MappingList';
+import { MappingListHeader } from './MappingListHeader';
 import { StateAlerts } from './StateAlerts';
 
 const buildNetworkMessages = (
@@ -294,23 +295,23 @@ export const PlansCreateForm = ({
         </Form>
 
         <SectionHeading
-          text={t('Storage and network mappings')}
+          text={t('Network mappings')}
           className="forklift--create-vm-migration-plan--section-header"
-        />
+        >
+          <ResourceLink
+            groupVersionKind={NetworkMapModelGroupVersionKind}
+            namespace={netMap.metadata?.namespace}
+            name={netMap.metadata?.name}
+            className="forklift-page-resource-link-in-description-item"
+            linkTo={false}
+          />
+        </SectionHeading>
 
         <DescriptionListGroup>
-          <DescriptionListTerm>
-            <span className="forklift-page-editable-description-item">
-              {t('Network map:')}
-              <ResourceLink
-                groupVersionKind={NetworkMapModelGroupVersionKind}
-                namespace={netMap.metadata?.namespace}
-                name={netMap.metadata?.name}
-                className="forklift-page-resource-link-in-description-item"
-                linkTo={false}
-              />
-            </span>
-          </DescriptionListTerm>
+          <MappingListHeader
+            sourceHeading={t('Source network')}
+            destinationHeading={t('Target network')}
+          />
           <DescriptionListDescription className="forklift-page-mapping-list">
             <StateAlerts
               variant={AlertVariant.danger}
@@ -344,19 +345,25 @@ export const PlansCreateForm = ({
             />
           </DescriptionListDescription>
         </DescriptionListGroup>
+
+        <SectionHeading
+          text={t('Storage mappings')}
+          className="forklift--create-vm-migration-plan--section-header"
+        >
+          <ResourceLink
+            groupVersionKind={StorageMapModelGroupVersionKind}
+            namespace={storageMap.metadata?.namespace}
+            name={storageMap.metadata?.name}
+            className="forklift-page-resource-link-in-description-item"
+            linkTo={false}
+          />
+        </SectionHeading>
+
         <DescriptionListGroup>
-          <DescriptionListTerm>
-            <span className="forklift-page-editable-description-item">
-              {t('Storage map:')}
-              <ResourceLink
-                groupVersionKind={StorageMapModelGroupVersionKind}
-                namespace={storageMap.metadata?.namespace}
-                name={storageMap.metadata?.name}
-                className="forklift-page-resource-link-in-description-item"
-                linkTo={false}
-              />
-            </span>
-          </DescriptionListTerm>
+          <MappingListHeader
+            sourceHeading={t('Source storage')}
+            destinationHeading={t('Target storage')}
+          />
           <DescriptionListDescription className="forklift-page-mapping-list">
             <StateAlerts
               variant={AlertVariant.danger}