Fix regression of omittig the plan name mandatory

Reference: https://issues.redhat.com/browse/MTV-1845 Add back the 'plan name' mandatory field to be visible and set in the plan creation's wizard step 2, since otherwise creating the plan is blocked by the plan creation use cases. Signed-off-by: Sharon Gratch <[email protected]>
kubev2v · Dec 19, 2024 · f5cc768 · f5cc768
1 parent 487ee0d
commit f5cc768
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
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
@@ -158,6 +158,7 @@
   "Edit migration plan transfer network": "Edit migration plan transfer network",
   "Edit NetworkMap": "Edit NetworkMap",
   "Edit Plan": "Edit Plan",
+  "Edit plan name": "Edit plan name",
   "Edit Precopy interval (minutes)": "Edit Precopy interval (minutes)",
   "Edit Provider": "Edit Provider",
   "Edit Provider Credentials": "Edit Provider Credentials",
@@ -267,6 +268,7 @@
   "Multiple NICs on the same network": "Multiple NICs on the same network",
   "Name": "Name",
   "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.": "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.",
+  "Name is required and must be a unique within a namespace and valid Kubernetes name.": "Name is required and must be a unique within a namespace and valid Kubernetes name.",
   "Namespace": "Namespace",
   "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n               An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n               Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.",
   "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.",

diff --git a/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx b/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
@@ -5,7 +5,6 @@ import { VmData } from 'src/modules/Providers/views';
 import { useCreateVmMigrationData } from 'src/modules/Providers/views/migrate';
 import {
   PageAction,
-  setPlanName,
   setProjectName as setProjectNameAction,
 } from 'src/modules/Providers/views/migrate/reducer/actions';
 import { CreateVmMigrationPageState } from 'src/modules/Providers/views/migrate/types';
@@ -20,7 +19,6 @@ import { PlanCreatePageState } from '../states';
 import { ChipsToolbarProviders } from './ChipsToolbarProviders';
 import { createProviderCardItems } from './createProviderCardItems';
 import { FiltersToolbarProviders } from './FiltersToolbarProviders';
-import { PlanNameTextField } from './PlanNameTextField';
 import { ProjectNameSelect } from './ProjectNameSelect';
 
 export type PlanCreateFormProps = {
@@ -42,7 +40,6 @@ export type PlanCreateFormProps = {
 export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   providers,
   filterState,
-  state,
   projectName,
   filterDispatch,
   dispatch,
@@ -61,17 +58,6 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   return (
     <div className="forklift-create-provider-edit-section">
       <Form isWidthLimited className="forklift-section-secret-edit">
-        <PlanNameTextField
-          isRequired
-          value={state.underConstruction.plan.metadata.name}
-          validated={state.validation.planName}
-          isDisabled={state.flow.editingDone}
-          onChange={(_, value) => {
-            dispatch(setPlanName(value?.trim() ?? ''));
-            setData({ ...data, planName: value });
-          }}
-        />
-
         <ProjectNameSelect
           value={projectName}
           options={providerNamespaces.map((namespace) => ({

diff --git a/...orklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/...orklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { FilterableSelect } from 'src/components';
 import SectionHeading from 'src/components/headers/SectionHeading';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
@@ -21,6 +21,7 @@ import {
   FormSelectOption,
   Stack,
   StackItem,
+  TextInput,
 } from '@patternfly/react-core';
 
 import { DetailsItem, getIsTarget } from '../../../utils';
@@ -33,11 +34,13 @@ import {
   removeAlert,
   replaceNetworkMapping,
   replaceStorageMapping,
+  setPlanName,
   setPlanTargetNamespace,
   setPlanTargetProvider,
 } from '../reducer/actions';
 import { CreateVmMigrationPageState, NetworkAlerts, StorageAlerts } from '../types';
 
+import { EditableDescriptionItem } from './EditableDescriptionItem';
 import { MappingList } from './MappingList';
 import { MappingListHeader } from './MappingListHeader';
 import { StateAlerts } from './StateAlerts';
@@ -140,9 +143,17 @@ export const PlansCreateForm = ({
     alerts,
   } = state;
 
+  const [isNameEdited, setIsNameEdited] = useState(true);
+
   const networkMessages = buildNetworkMessages(t);
   const storageMessages = buildStorageMessages(t);
 
+  const onChangePlan: (value: string, event: React.FormEvent<HTMLInputElement>) => void = (
+    value,
+  ) => {
+    dispatch(setPlanName(value?.trim() ?? ''));
+  };
+
   const onChangeTargetProvider: (
     value: string,
     event: React.FormEvent<HTMLSelectElement>,
@@ -159,6 +170,39 @@ export const PlansCreateForm = ({
           default: '1Col',
         }}
       >
+        {isNameEdited || validation.planName === 'error' ? (
+          <Form isWidthLimited>
+            <FormGroupWithHelpText
+              label={t('Plan name')}
+              isRequired
+              fieldId="planName"
+              validated={validation.planName}
+              helperTextInvalid={t(
+                'Name is required and must be a unique within a namespace and valid Kubernetes name.',
+              )}
+            >
+              <TextInput
+                spellCheck="false"
+                isRequired
+                type="text"
+                id="planName"
+                value={plan.metadata.name}
+                validated={validation.planName}
+                isDisabled={flow.editingDone}
+                onChange={(e, v) => onChangePlan(v, e)}
+              />
+            </FormGroupWithHelpText>
+          </Form>
+        ) : (
+          <EditableDescriptionItem
+            title={t('Plan name')}
+            content={plan.metadata.name}
+            ariaEditLabel={t('Edit plan name')}
+            onEdit={() => setIsNameEdited(true)}
+            isDisabled={flow.editingDone}
+          />
+        )}
+
         <SectionHeading
           text={t('Source provider')}
           className="forklift--create-vm-migration-plan--section-header"