Add a fast Create Plan page - step 7

Changes: 1. improve layout by wrapping title and info alert with a drawer. Now the only component pushing the VM table down is the namespace bar. 2. disable all edits when create action is triggered a) for description items - hide pencil icon b) for form components - propagate isDisabled flag 3. remove 'Create and start' button 4. rename 'Create and edit' to 'Create' Signed-off-by: Radoslaw Szwajkowski <[email protected]>
kubev2v · Feb 9, 2024 · 5026f2c · 5026f2c
1 parent 7f52e8d
commit 5026f2c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 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
@@ -68,9 +68,8 @@
   "Controls the interval at which a new snapshot is requested prior to initiating a warm migration. The default value is 60 minutes.": "Controls the interval at which a new snapshot is requested prior to initiating a warm migration. The default value is 60 minutes.",
   "Copied": "Copied",
   "Copy": "Copy",
+  "Create": "Create",
   "Create a migration plan and select VMs from the source provider for migration.": "Create a migration plan and select VMs from the source provider for migration.",
-  "Create and edit": "Create and edit",
-  "Create and start": "Create and start",
   "Create migration plan": "Create migration plan",
   "Create NetworkMap": "Create NetworkMap",
   "Create new provider": "Create new provider",

diff --git a/...ift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigrationPage.tsx b/...ift-console-plugin/src/modules/Providers/views/migrate/ProvidersCreateVmMigrationPage.tsx
@@ -37,21 +37,21 @@ const ProvidersCreateVmMigrationPage: FC = () => {
 
   return (
     <PageSection variant="light">
-      <Alert
-        className="co-alert forklift--create-vm-migration-plan--alert"
-        customIcon={<BellIcon />}
-        variant="info"
-        title={t('How to create a migration plan')}
-      >
-        <Trans t={t} ns="plugin__forklift-console-plugin">
-          To migrate virtual machines select target provider, namespace, mappings and click the{' '}
-          <strong>Create</strong> button to crete the plan.
-        </Trans>
-      </Alert>
-
-      <SectionHeading text={t('Select migration target')} />
+      <PlansCreateForm state={state} dispatch={dispatch}>
+        <Alert
+          className="co-alert forklift--create-vm-migration-plan--alert"
+          customIcon={<BellIcon />}
+          variant="info"
+          title={t('How to create a migration plan')}
+        >
+          <Trans t={t} ns="plugin__forklift-console-plugin">
+            To migrate virtual machines select target provider, namespace, mappings and click the{' '}
+            <strong>Create</strong> button to crete the plan.
+          </Trans>
+        </Alert>
 
-      <PlansCreateForm state={state} dispatch={dispatch} />
+        <SectionHeading text={t('Select migration target')} />
+      </PlansCreateForm>
       {state.flow.apiError && (
         <Alert
           className="co-alert co-alert--margin-top"
@@ -73,18 +73,14 @@ const ProvidersCreateVmMigrationPage: FC = () => {
         <FlexItem>
           <Button
             variant="primary"
-            isDisabled={Object.values(state.validation).some(
-              (validation) => validation === 'error',
-            )}
+            isDisabled={
+              !!state.flow.apiError ||
+              Object.values(state.validation).some((validation) => validation === 'error')
+            }
             isLoading={isLoading}
             onClick={() => dispatch(startCreate())}
           >
-            {t('Create and edit')}
-          </Button>
-        </FlexItem>
-        <FlexItem>
-          <Button variant="secondary" isDisabled={true} isLoading={isLoading}>
-            {t('Create and start')}
+            {t('Create')}
           </Button>
         </FlexItem>
         <FlexItem>

diff --git a/...console-plugin/src/modules/Providers/views/migrate/components/EditableDescriptionItem.tsx b/...console-plugin/src/modules/Providers/views/migrate/components/EditableDescriptionItem.tsx
@@ -15,7 +15,8 @@ export const EditableDescriptionItem: FC<{
   content: ReactNode;
   ariaEditLabel: string;
   onEdit: () => void;
-}> = ({ title, content, ariaEditLabel = 'Edit', onEdit }) => (
+  isDisabled?: boolean;
+}> = ({ title, content, ariaEditLabel = 'Edit', onEdit, isDisabled = false }) => (
   <DescriptionListGroup>
     <DescriptionListTerm>{title}</DescriptionListTerm>
     <DescriptionListDescription>
@@ -25,9 +26,9 @@ export const EditableDescriptionItem: FC<{
           className="forklift-page-editable-description-item-button"
           style={{ paddingTop: 0 }}
           variant="plain"
-          icon={<PencilAltIcon />}
-          aria-label={ariaEditLabel}
-          onClick={onEdit}
+          {...(isDisabled
+            ? {}
+            : { icon: <PencilAltIcon />, onClick: onEdit, 'aria-Label': ariaEditLabel })}
         />
       </div>
     </DescriptionListDescription>

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
@@ -74,6 +74,7 @@ const buildStorageMessages = (
 });
 
 export const PlansCreateForm = ({
+  children,
   state: {
     underConstruction: { plan, netMap, storageMap },
     validation,
@@ -99,6 +100,7 @@ export const PlansCreateForm = ({
   },
   dispatch,
 }: {
+  children?;
   state: CreateVmMigrationPageState;
   dispatch: (action: PageAction<unknown, unknown>) => void;
 }) => {
@@ -137,6 +139,7 @@ export const PlansCreateForm = ({
         }
       >
         <DrawerContentBody>
+          {children}
           <DescriptionList
             className="forklift-create-provider-edit-section"
             columnModifier={{
@@ -160,6 +163,7 @@ export const PlansCreateForm = ({
                     id="planName"
                     value={plan.metadata.name}
                     validated={validation.planName}
+                    isDisabled={flow.editingDone}
                     onChange={(value) => dispatch(setPlanName(value?.trim() ?? ''))}
                   />
                 </FormGroup>
@@ -170,6 +174,7 @@ export const PlansCreateForm = ({
                 content={plan.metadata.name}
                 ariaEditLabel={t('Edit plan name')}
                 onEdit={() => setIsNameEdited(true)}
+                isDisabled={flow.editingDone}
               />
             )}
             <DetailsItem
@@ -211,6 +216,7 @@ export const PlansCreateForm = ({
                     onChange={(value) => dispatch(setPlanTargetProvider(value))}
                     validated={validation.targetProvider}
                     id="targetProvider"
+                    isDisabled={flow.editingDone}
                   >
                     {[
                       <FormSelectOption
@@ -247,6 +253,7 @@ export const PlansCreateForm = ({
                 }
                 ariaEditLabel={t('Edit target provider')}
                 onEdit={() => setIsTargetProviderEdited(true)}
+                isDisabled={flow.editingDone}
               />
             )}
             {isTargetNamespaceEdited ||
@@ -264,6 +271,7 @@ export const PlansCreateForm = ({
                     onChange={(value) => dispatch(setPlanTargetNamespace(value))}
                     validated={validation.targetNamespace}
                     id="targetNamespace"
+                    isDisabled={flow.editingDone}
                   >
                     {[
                       <FormSelectOption
@@ -302,6 +310,7 @@ export const PlansCreateForm = ({
                 }
                 ariaEditLabel={t('Edit target namespace')}
                 onEdit={() => setIsTargetNamespaceEdited(true)}
+                isDisabled={flow.editingDone}
               />
             )}
             <DescriptionListGroup>