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 d81060800..701b473ba 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;
+}) => (
+
+);
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 = ({
-
+
,
-
+
,
]}
/>
@@ -132,6 +142,7 @@ export const MappingListItem: FC = ({
id={`mapping_list_item_${index}`}
aria-label={t('Actions')}
aria-labelledby=""
+ className="pf-v5-u-align-items-center"
>