Merge pull request #1418 from sgratch/fix-regression-of-dismissed-pla…

…n-name-in-wizard

Fix regression of omitting the 'plan name' mandatory field from the wizard

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.",

packages/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) => ({

packages/forklift-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"