[#607] Edit an existing RHV migration plan

app/javascript/react/screens/App/Overview/Overview.js

@@ -254,7 +254,8 @@ class Overview extends React.Component {
       scheduleMigrationModal,
       scheduleMigrationPlan,
       scheduleMigration,
-      plansMutatedWithMappingInfo
+      plansMutatedWithMappingInfo,
+      showPlanWizardEditModeAction
     } = this.props;
 
     const inProgressRequestsTransformationMappings = () => {
@@ -348,6 +349,7 @@ class Overview extends React.Component {
               scheduleMigrationPlan={scheduleMigrationPlan}
               scheduleMigration={scheduleMigration}
               plansMutatedWithMappingInfo={plansMutatedWithMappingInfo}
+              showPlanWizardEditModeAction={showPlanWizardEditModeAction}
             />
           )}
           {hasSufficientProviders ? (
@@ -432,6 +434,7 @@ Overview.propTypes = {
   isContinuingToPlan: PropTypes.bool,
   planWizardId: PropTypes.string,
   continueToPlanAction: PropTypes.func,
+  showPlanWizardEditModeAction: PropTypes.func,
   shouldReloadMappings: PropTypes.bool,
   fetchClustersAction: PropTypes.func,
   fetchClustersUrl: PropTypes.string,

app/javascript/react/screens/App/Overview/OverviewActions.js

@@ -31,7 +31,8 @@ import {
   V2V_SCHEDULE_MIGRATION,
   V2V_SET_MIGRATIONS_FILTER,
   V2V_TOGGLE_SCHEDULE_MIGRATION_MODAL,
-  YES_TO_DELETE_AND_HIDE_DELETE_CONFIRMATION_MODAL
+  YES_TO_DELETE_AND_HIDE_DELETE_CONFIRMATION_MODAL,
+  SHOW_PLAN_WIZARD_EDIT_MODE
 } from './OverviewConstants';
 
 export const showConfirmModalAction = modalOptions => ({
@@ -56,6 +57,13 @@ export const showPlanWizardAction = id => dispatch => {
   });
 };
 
+export const showPlanWizardEditModeAction = id => dispatch => {
+  dispatch({
+    type: SHOW_PLAN_WIZARD_EDIT_MODE,
+    editingPlanId: id
+  });
+};
+
 export const fetchProvidersAction = () => dispatch => {
   dispatch({
     type: FETCH_PROVIDERS,

app/javascript/react/screens/App/Overview/OverviewConstants.js

@@ -3,6 +3,7 @@ export const SHOW_MAPPING_WIZARD = 'SHOW_MAPPING_WIZARD';
 export const HIDE_MAPPING_WIZARD = 'HIDE_MAPPING_WIZARD';
 export const MAPPING_WIZARD_EXITED = 'MAPPING_WIZARD_EXITED';
 export const SHOW_PLAN_WIZARD = 'SHOW_PLAN_WIZARD';
+export const SHOW_PLAN_WIZARD_EDIT_MODE = 'SHOW_PLAN_WIZARD_EDIT_MODE';
 export const HIDE_PLAN_WIZARD = 'HIDE_PLAN_WIZARD';
 export const PLAN_WIZARD_EXITED = 'PLAN_WIZARD_EXITED';
 export const PLAN_WIZARD_NEXT = 'PLAN_WIZARD_NEXT';

app/javascript/react/screens/App/Overview/OverviewReducer.js

@@ -42,7 +42,8 @@ import {
   FETCH_NETWORKS,
   FETCH_DATASTORES,
   V2V_TOGGLE_SCHEDULE_MIGRATION_MODAL,
-  V2V_SCHEDULE_MIGRATION
+  V2V_SCHEDULE_MIGRATION,
+  SHOW_PLAN_WIZARD_EDIT_MODE
 } from './OverviewConstants';
 
 import { planTransmutation, sufficientProviders } from './helpers';
@@ -52,7 +53,8 @@ export const initialState = Immutable({
   hideMappingWizard: true,
   planWizardVisible: false,
   hidePlanWizard: true,
-  planWizardId: null,
+  planWizardId: null, // id of infrastructure mapping to use for new plan
+  editingPlanId: null, // id of migration plan to edit
   hasSufficientProviders: false,
   isRejectedProviders: false,
   isFetchingProviders: false,
@@ -138,8 +140,20 @@ export default (state = initialState, action) => {
         planWizardId: (payload && payload.id) || null
       });
     }
+    case SHOW_PLAN_WIZARD_EDIT_MODE: {
+      const { editingPlanId } = action;
+      return Immutable.merge(state, {
+        planWizardVisible: true,
+        hidePlanWizard: false,
+        planWizardId: null,
+        editingPlanId
+      });
+    }
     case HIDE_PLAN_WIZARD:
-      return state.set('hidePlanWizard', true).set('planWizardId', null);
+      return state
+        .set('hidePlanWizard', true)
+        .set('planWizardId', null)
+        .set('editingPlanId', null);
     case PLAN_WIZARD_EXITED:
       return state.set('planWizardVisible', false);
     case `${FETCH_PROVIDERS}_PENDING`:

app/javascript/react/screens/App/Overview/__test__/__snapshots__/index.test.js.snap

@@ -61,6 +61,7 @@ Object {
   "showDeleteConfirmationModalAction": [Function],
   "showMappingWizardAction": [Function],
   "showPlanWizardAction": [Function],
+  "showPlanWizardEditModeAction": [Function],
   "toggleScheduleMigrationModal": [Function],
   "transformationMappings": Array [],
   "transformationPlans": Array [],

app/javascript/react/screens/App/Overview/components/Migrations/Migrations.js

@@ -39,7 +39,8 @@ const Migrations = ({
   scheduleMigrationModal,
   scheduleMigrationPlan,
   scheduleMigration,
-  plansMutatedWithMappingInfo
+  plansMutatedWithMappingInfo,
+  showPlanWizardEditModeAction
 }) => {
   const filterOptions = [
     MIGRATIONS_FILTERS.notStarted,
@@ -125,6 +126,7 @@ const Migrations = ({
               plansMutatedWithMappingInfo={plansMutatedWithMappingInfo}
               deleteTransformationPlanAction={deleteTransformationPlanAction}
               deleteTransformationPlanUrl={deleteTransformationPlanUrl}
+              showPlanWizardEditModeAction={showPlanWizardEditModeAction}
             />
           )}
           {activeFilter === MIGRATIONS_FILTERS.inProgress && (
@@ -216,7 +218,8 @@ Migrations.propTypes = {
   scheduleMigrationModal: PropTypes.bool,
   scheduleMigrationPlan: PropTypes.object,
   scheduleMigration: PropTypes.func,
-  plansMutatedWithMappingInfo: PropTypes.bool
+  plansMutatedWithMappingInfo: PropTypes.bool,
+  showPlanWizardEditModeAction: PropTypes.func
 };
 Migrations.defaultProps = {
   transformationPlans: [],

app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { noop, Button, ListView, Grid, Icon, Spinner, Toolbar, Sort, DropdownKebab } from 'patternfly-react';
+import { noop, Button, ListView, Grid, Icon, Spinner, Toolbar, Sort, DropdownKebab, MenuItem } from 'patternfly-react';
 import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
 import OverviewEmptyState from '../OverviewEmptyState/OverviewEmptyState';
 import ScheduleMigrationModal from '../ScheduleMigrationModal/ScheduleMigrationModal';
@@ -61,7 +61,8 @@ class MigrationsNotStartedList extends React.Component {
       fetchTransformationPlansUrl,
       plansMutatedWithMappingInfo,
       deleteTransformationPlanAction,
-      deleteTransformationPlanUrl
+      deleteTransformationPlanUrl,
+      showPlanWizardEditModeAction
     } = this.props;
     const sortedMigrations = this.sortedMigrations();
 
@@ -92,6 +93,8 @@ class MigrationsNotStartedList extends React.Component {
                     const migrationScheduled = plan.schedules && plan.schedules[0].run_at.start_time;
                     const isMissingMapping = !plan.infraMappingName;
 
+                    const editPlanDisabled = isMissingMapping || loading === plan.href;
+
                     return (
                       <ListView.Item
                         stacked
@@ -124,6 +127,16 @@ class MigrationsNotStartedList extends React.Component {
                             </Button>
                             <StopPropagationOnClick>
                               <DropdownKebab id={`${plan.id}-kebab`} pullRight>
+                                <MenuItem
+                                  onClick={e => {
+                                    e.stopPropagation();
+                                    if (!editPlanDisabled) showPlanWizardEditModeAction(plan.id);
+                                  }}
+                                  disabled={editPlanDisabled}
+                                  style={{ display: 'none' }} // Edit Plan is disabled until https://github.com/ManageIQ/manageiq/pull/17989 is ready
+                                >
+                                  {__('Edit')}
+                                </MenuItem>
                                 <DeleteMigrationMenuItem
                                   showConfirmModalAction={showConfirmModalAction}
                                   hideConfirmModalAction={hideConfirmModalAction}
@@ -228,7 +241,8 @@ MigrationsNotStartedList.propTypes = {
   fetchTransformationPlansUrl: PropTypes.string,
   plansMutatedWithMappingInfo: PropTypes.bool,
   deleteTransformationPlanAction: PropTypes.func,
-  deleteTransformationPlanUrl: PropTypes.string
+  deleteTransformationPlanUrl: PropTypes.string,
+  showPlanWizardEditModeAction: PropTypes.func
 };
 MigrationsNotStartedList.defaultProps = {
   migrateClick: noop,

app/javascript/react/screens/App/Overview/screens/PlanWizard/PlanWizard.js

@@ -9,7 +9,7 @@ import componentRegistry from '../../../../../../components/componentRegistry';
 import PlanWizardGeneralStep from '../PlanWizard/components/PlanWizardGeneralStep';
 import PlanWizardScheduleStep from '../PlanWizard/components/PlanWizardScheduleStep';
 
-import { stepIDs } from './PlanWizardConstants';
+import { stepIDs, overwriteCsvConfirmModalProps } from './PlanWizardConstants';
 
 class PlanWizard extends React.Component {
   planWizardVMStepContainer = componentRegistry.markup('PlanWizardVMStepContainer');
@@ -111,7 +111,8 @@ class PlanWizard extends React.Component {
       hideConfirmModalAction,
       showAlertAction,
       hideAlertAction,
-      setMetadataWithNextButtonClickedAction
+      setMetadataWithNextButtonClickedAction,
+      editingPlan
     } = this.props;
 
     const wizardSteps = this.getWizardSteps();
@@ -125,6 +126,17 @@ class PlanWizard extends React.Component {
         return;
       }
       hideAlertAction();
+
+      if (editingPlan && planWizardGeneralStep.values.vm_choice_radio === 'vms_via_csv') {
+        showConfirmModalAction({
+          ...overwriteCsvConfirmModalProps,
+          onConfirm: () => {
+            hideConfirmModalAction();
+            this.goToStepId(stepIDs.vmStep);
+          }
+        });
+        return;
+      }
     }
 
     if (
@@ -149,7 +161,13 @@ class PlanWizard extends React.Component {
         onConfirm
       });
     } else if (activeStep.id === stepIDs.scheduleStep) {
-      const plansBody = createMigrationPlans(planWizardGeneralStep, planWizardVMStep, planWizardAdvancedOptionsStep);
+      const isEditing = !!editingPlan;
+      const plansBody = createMigrationPlans(
+        planWizardGeneralStep,
+        planWizardVMStep,
+        planWizardAdvancedOptionsStep,
+        isEditing
+      );
 
       setPlanScheduleAction(planWizardScheduleStep.values.migration_plan_choice_radio);
       setPlansBodyAction(plansBody);
@@ -185,7 +203,8 @@ class PlanWizard extends React.Component {
       planWizardExitedAction,
       alertText,
       alertType,
-      hideAlertAction
+      hideAlertAction,
+      editingPlan
     } = this.props;
 
     const wizardSteps = this.getWizardSteps();
@@ -207,9 +226,13 @@ class PlanWizard extends React.Component {
           !this.props.planWizardVMStep.values.selectedVms ||
           this.props.planWizardVMStep.values.selectedVms.length === 0));
 
+    const saveButtonLabel = editingPlan ? __('Save') : __('Create');
+
+    const wizardTitle = editingPlan ? __('Edit Migration Plan') : __('Create Migration Plan');
+
     return (
       <Wizard show={!hidePlanWizard} onClose={hidePlanWizardAction} onExited={planWizardExitedAction}>
-        <Wizard.Header onClose={hidePlanWizardAction} title={__('Migration Plan Wizard')} />
+        <Wizard.Header onClose={hidePlanWizardAction} title={wizardTitle} />
 
         <Wizard.Body>
           <PlanWizardBody
@@ -239,7 +262,7 @@ class PlanWizard extends React.Component {
             onClick={onFinalStep ? hidePlanWizardAction : this.nextStep}
             disabled={disableNextStep}
           >
-            {onFinalStep ? __('Close') : currentStepProp === stepIDs.scheduleStep ? __('Create') : __('Next')}
+            {onFinalStep ? __('Close') : currentStepProp === stepIDs.scheduleStep ? saveButtonLabel : __('Next')}
             <Icon type="fa" name="angle-right" />
           </Button>
         </Wizard.Footer>
@@ -268,7 +291,8 @@ PlanWizard.propTypes = {
   alertText: PropTypes.string,
   alertType: PropTypes.string,
   setMetadataWithBackButtonClickedAction: PropTypes.func,
-  setMetadataWithNextButtonClickedAction: PropTypes.func
+  setMetadataWithNextButtonClickedAction: PropTypes.func,
+  editingPlan: PropTypes.object
 };
 PlanWizard.defaultProps = {
   hidePlanWizard: true,

app/javascript/react/screens/App/Overview/screens/PlanWizard/PlanWizardConstants.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import { Icon } from 'patternfly-react';
+
 export const V2V_SET_PLANS_BODY = 'V2V_SET_PLANS_BODY';
 export const V2V_SET_PLAN_SCHEDULE = 'V2V_SET_PLAN_SCHEDULE';
 export const V2V_PLAN_WIZARD_SHOW_ALERT = 'V2V_PLAN_WIZARD_SHOW_ALERT';
@@ -11,3 +14,17 @@ export const stepIDs = {
   scheduleStep: 'planWizardScheduleStep',
   resultsStep: 'planWizardResultsStep'
 };
+
+export const overwriteCsvConfirmModalProps = {
+  title: __('Overwrite Import File'),
+  body: (
+    <React.Fragment>
+      <p>{__('Importing a new VM list file will overwrite the contents of the existing list.')}</p>
+      <p>{__('Are you sure you want to import a new file?')}</p>
+    </React.Fragment>
+  ),
+  icon: <Icon className="confirm-warning-icon" type="pf" name="warning-triangle-o" />,
+  confirmButtonLabel: __('Import'),
+  dialogClassName: 'plan-wizard-confirm-modal',
+  backdropClassName: 'plan-wizard-confirm-backdrop'
+};

app/javascript/react/screens/App/Overview/screens/PlanWizard/PlanWizardSelectors.js

@@ -1,6 +1,10 @@
+export const findEditingPlan = (transformationPlans, editingPlanId) =>
+  editingPlanId && transformationPlans.find(plan => plan.id === editingPlanId);
+
 export const planWizardOverviewFilter = overview => ({
   hidePlanWizard: overview.hidePlanWizard,
-  transformationMappings: overview.transformationMappings
+  transformationMappings: overview.transformationMappings,
+  editingPlan: findEditingPlan(overview.transformationPlans, overview.editingPlanId)
 });
 
 export const planWizardFormFilter = form => ({

app/javascript/react/screens/App/Overview/screens/PlanWizard/__tests__/__snapshots__/index.test.js.snap

@@ -4,6 +4,7 @@ exports[`Plan Wizard integration test should mount the PlanWizard with mapStateT
 Object {
   "alertText": undefined,
   "alertType": undefined,
+  "editingPlan": undefined,
   "hideAlertAction": [Function],
   "hideConfirmModalAction": [Function],
   "hidePlanWizard": false,

app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/PlanWizardAdvancedOptionsStep.js

@@ -5,13 +5,18 @@ import { Form, Spinner } from 'patternfly-react';
 
 import PlanWizardAdvancedOptionsStepTable from './components/PlanWizardAdvancedOptionsStepTable/PlanWizardAdvancedOptionsStepTable';
 import { BootstrapSelect } from '../../../../../common/forms/BootstrapSelect';
+import { preselectPlaybooksForVms } from './helpers';
 
 class PlanWizardAdvancedOptionsStep extends Component {
   constructor(props) {
     super(props);
 
     if (props.vms.length === 0) {
-      props.setVmsAction(props.vmStepSelectedVms);
+      if (!props.editingPlan) {
+        props.setVmsAction(props.vmStepSelectedVms);
+      } else {
+        props.setVmsAction(preselectPlaybooksForVms(props.editingPlan, props.vmStepSelectedVms));
+      }
     }
   }
 
@@ -90,7 +95,8 @@ PlanWizardAdvancedOptionsStep.propTypes = {
   vms: PropTypes.array,
   setVmsAction: PropTypes.func,
   vmStepSelectedVms: PropTypes.array,
-  change: PropTypes.func
+  change: PropTypes.func,
+  editingPlan: PropTypes.object
 };
 
 PlanWizardAdvancedOptionsStep.defaultProps = {
@@ -99,13 +105,5 @@ PlanWizardAdvancedOptionsStep.defaultProps = {
 
 export default reduxForm({
   form: 'planWizardAdvancedOptionsStep',
-  initialValues: {
-    playbookVms: {
-      preMigration: [],
-      postMigration: []
-    },
-    preMigrationPlaybook: '',
-    postMigrationPlaybook: ''
-  },
   destroyOnUnmount: false
 })(PlanWizardAdvancedOptionsStep);

app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardAdvancedOptionsStep/helpers.js

@@ -0,0 +1,22 @@
+export const getVMStepSelectedVms = (allVms, selectedVms) => allVms.filter(vm => selectedVms.includes(vm.id));
+
+// Property can be 'pre_service' or 'post_service'.
+// Returns an array of vm ids which have a truthy value for that property in the plan being edited.
+export const getVmIdsWithProperty = (editingPlan, property, vmStepSelectedVms) => {
+  const actions =
+    editingPlan && editingPlan.options && editingPlan.options.config_info && editingPlan.options.config_info.actions;
+  if (!actions) return [];
+  const actionsWithProperty = actions.filter(action => action[property]);
+  const vmIds = actionsWithProperty.map(action => action.vm_id);
+  return vmIds.filter(id => vmStepSelectedVms.some(vm => vm.id === id));
+};
+
+export const preselectPlaybooksForVms = (editingPlan, vms) => {
+  const vmIdsWithPreService = getVmIdsWithProperty(editingPlan, 'pre_service', vms);
+  const vmIdsWithPostService = getVmIdsWithProperty(editingPlan, 'post_service', vms);
+  return vms.map(vm => ({
+    ...vm,
+    preMigration: vmIdsWithPreService.some(id => id === vm.id),
+    postMigration: vmIdsWithPostService.some(id => id === vm.id)
+  }));
+};