Use ui classic redux and router

.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
     $: true,
     __: true,
     n__: true,
-    sprintf: true
+    sprintf: true,
+    ManageIQ: true
   },
   extends: [
     'standard',
@@ -23,6 +24,12 @@ module.exports = {
     'prettier/prettier': 'error',
     camelcase: 'off',
     'jsx-a11y/anchor-is-valid': 'off',
+    'jsx-a11y/label-has-for': [ 2, {
+      'required': {
+          'some': [ 'nesting', 'id' ]
+      },
+      'allowChildren': true,
+    }],
     'import/prefer-default-export': 'off',
     'no-underscore-dangle': 'off',
     'no-param-reassign': 'off',

app/assets/stylesheets/manageiq-v2v/base.scss

@@ -1 +1,5 @@
 @import '../../../javascript/react/app.scss';
+
+.react-wrapper {
+  height: 100%;
+}

app/javascript/components/index.js

@@ -16,144 +16,66 @@ import IsoDate from './dates/IsoDate';
 import LongDateTime from './dates/LongDateTime';
 import RelativeDateTime from './dates/RelativeDateTime';
 import ShortDateTime from './dates/ShortDateTime';
-import ManageIQV2V from '../react';
 
+/**
+ * NOTE: This should not exist, predefining (default) props should be in components not in some registry
+ * This should be deleted and all the data should be moved to popper location.
+ * If you want to achieve adaptability, the simplest way is to move it into some redux store and connect components that need this
+ */
 export const coreComponents = [
   {
     name: 'MappingWizardContainer',
     type: MappingWizardContainer,
-    data: {},
     store: true
   },
   {
     name: 'MappingWizardClustersStepContainer',
     type: MappingWizardClustersStepContainer,
-    data: {
-      fetchSourceClustersUrl:
-        '/api/clusters?expand=resources' +
-        '&attributes=ext_management_system.emstype,v_parent_datacenter,ext_management_system.name' +
-        '&filter[]=ext_management_system.emstype=vmwarews',
-      fetchTargetComputeUrls: {
-        rhevm:
-          '/api/clusters?expand=resources' +
-          '&attributes=ext_management_system.emstype,v_parent_datacenter,ext_management_system.name,hosts' +
-          '&filter[]=ext_management_system.emstype=rhevm',
-        openstack: '/api/cloud_tenants?expand=resources&attributes=ext_management_system.name'
-      },
-      queryHostsUrl: '/api/hosts?attributes=tags'
-    },
     store: true
   },
   {
     name: 'MappingWizardDatastoresStepContainer',
     type: MappingWizardDatastoresStepContainer,
-    data: {
-      fetchStoragesUrls: {
-        source: 'api/clusters',
-        rhevm: 'api/clusters',
-        openstack: 'api/cloud_tenants'
-      }
-    },
     store: true
   },
   {
     name: 'MappingWizardNetworksStepContainer',
     type: MappingWizardNetworksStepContainer,
-    data: {
-      fetchNetworksUrls: {
-        source: 'api/clusters',
-        rhevm: 'api/clusters',
-        openstack: 'api/cloud_tenants'
-      }
-    },
     store: true
   },
   {
     name: 'MappingWizardResultsStepContainer',
-    type: MappingWizardResultsStepContainer,
-    data: {
-      postMappingsUrl: 'api/transformation_mappings'
-    }
+    type: MappingWizardResultsStepContainer
   },
   {
     name: 'PlanWizardVMStepContainer',
-    type: PlanWizardVMStepContainer,
-    data: {
-      validateVmsUrl: '/api/transformation_mappings'
-    }
+    type: PlanWizardVMStepContainer
   },
   {
     name: 'PlanWizardResultsStepContainer',
-    type: PlanWizardResultsStepContainer,
-    data: {
-      postPlansUrl: '/api/service_templates'
-    }
+    type: PlanWizardResultsStepContainer
   },
   {
     name: 'PlanWizardContainer',
     type: PlanWizardContainer,
     data: {
-      url: '/api/migrationPlans'
+      url: '/api/migrationPlans' // did not find this prop in the PlanWizard component
     },
     store: true
   },
   {
     name: 'PlanWizardAdvancedOptionsStepContainer',
     type: PlanWizardAdvancedOptionsStepContainer,
-    data: {
-      fetchPlaybooksUrl: "/api/service_templates/?filter[]=type='ServiceTemplateAnsiblePlaybook'&expand=resources"
-    },
     store: true
   },
   {
     name: 'OverviewContainer',
     type: OverviewContainer,
-    data: {
-      archiveTransformationPlanUrl: '/api/service_templates',
-      fetchTransformationMappingsUrl:
-        'api/transformation_mappings?expand=resources' +
-        '&attributes=transformation_mapping_items,service_templates' +
-        '&sort_by=updated_at' +
-        '&sort_order=desc',
-      fetchTransformationPlansUrl:
-        '/api/service_templates/?' +
-        "filter[]=type='ServiceTemplateTransformationPlan'" +
-        '&filter[]=active=true' +
-        '&expand=resources,schedules' +
-        '&attributes=name,description,miq_requests,options,created_at' +
-        '&sort_by=updated_at' +
-        '&sort_order=desc',
-      fetchServiceTemplateAnsiblePlaybooksUrl:
-        '/api/service_templates/?' +
-        "filter[]=type='ServiceTemplateAnsiblePlaybook'" +
-        '&expand=resources' +
-        '&attributes=name,description,created_at',
-      fetchArchivedTransformationPlansUrl:
-        '/api/service_templates/?' +
-        "filter[]=type='ServiceTemplateTransformationPlan'" +
-        '&filter[]=archived=true' +
-        '&expand=resources' +
-        '&attributes=name,description,miq_requests,options,created_at' +
-        '&sort_by=updated_at' +
-        '&sort_order=desc',
-      fetchClustersUrl:
-        'api/clusters/' +
-        '?attributes=ext_management_system.emstype,v_parent_datacenter,ext_management_system.name,lans,storages' +
-        '&expand=resources',
-      fetchNetworksUrl: 'api/lans/?expand=resources',
-      fetchDatastoresUrl: 'api/data_stores?expand=resources'
-    },
     store: true
   },
   {
     name: 'PlanContainer',
     type: PlanContainer,
-    data: {
-      fetchPlanUrl: '/api/service_templates',
-      fetchTasksForAllRequestsForPlanUrl: '/api/requests?expand=resource&attributes=miq_request_tasks',
-      fetchOrchestrationStackUrl: '/api/orchestration_stacks',
-      cancelPlanRequestTasksUrl: '/api/request_tasks'
-    },
     store: true
   },
   {
@@ -185,8 +107,7 @@ export const coreComponents = [
     type: IsoDate,
     data: true,
     store: false
-  },
-  { name: 'manageiq-v2v', type: ManageIQV2V }
+  }
 ];
 
 export const componentSettings = component => coreComponents.find(n => n.type === component);

app/javascript/packs/migration.js

@@ -1,7 +1,8 @@
 import './polyfills';
 import componentRegistry from '../components/componentRegistry';
-import { coreComponents } from '../components';
 import { mount } from '../components/mounter';
+import App from '../react/';
+import { coreComponents } from '../components';
 
 componentRegistry.registerMultiple(coreComponents);
 
@@ -10,5 +11,6 @@ window.v2v = {
   componentRegistry
 };
 
+ManageIQ.component.addReact('manageiq-v2v', App);
 // Another way to mount the component is via JS - e.g.
 // v2v.mount('manageiq-v2v', '#reactRoot');

app/javascript/react/config/config.js

@@ -3,11 +3,11 @@ import PlanContainer from '../screens/App/Plan';
 
 export const links = [
   {
-    path: 'migration/',
+    path: '',
     component: OverviewContainer
   },
   {
-    path: 'migration/plan/:id',
+    path: 'plan/:id',
     component: PlanContainer
   }
 ];

app/javascript/react/index.js

@@ -1,19 +1,43 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { ConnectedRouter } from 'connected-react-router';
+import { connect } from 'react-redux';
+import { Spinner } from 'patternfly-react';
+import PropTypes from 'prop-types';
 import Routes from './config/Routes';
-import store from '../redux';
 import NotificationList from './screens/App/common/NotificationList';
+import createReducers from '../redux/reducers';
 
 // todo: convert this to use ManageIQ.redux.addReducer, ManageIQ.redux.store
 // <Provider store={store}>{componentRegistry.markup(component, data, store)}</Provider>,
-export default () => (
-  <Provider store={store}>
-    <Router>
-      <React.Fragment>
-        <NotificationList />
-        <Routes store={store} />
-      </React.Fragment>
-    </Router>
-  </Provider>
-);
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    ManageIQ.redux.addReducer(createReducers());
+    ManageIQ.redux.store.dispatch({ type: 'init' });
+  }
+
+  render() {
+    if (!this.props.isLoaded)
+      return (
+        <div className="row cards-pf">
+          <Spinner loading />
+        </div>
+      );
+    return (
+      <ConnectedRouter history={ManageIQ.redux.history}>
+        <React.Fragment>
+          <NotificationList />
+          <Routes store={ManageIQ.redux.store} />
+        </React.Fragment>
+      </ConnectedRouter>
+    );
+  }
+}
+
+App.propTypes = {
+  isLoaded: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = ({ overview }) => ({ isLoaded: !!overview });
+
+export default connect(mapStateToProps)(App);

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

@@ -182,10 +182,7 @@ class Overview extends React.Component {
     });
   };
 
-  redirectTo = path => {
-    const { history } = this.props;
-    history.push(path);
-  };
+  redirectTo = path => this.props.redirectTo(path);
 
   render() {
     const {
@@ -463,6 +460,44 @@ Overview.propTypes = {
   scheduleMigration: PropTypes.func,
   fetchServiceTemplateAnsiblePlaybooksAction: PropTypes.func,
   fetchServiceTemplateAnsiblePlaybooksUrl: PropTypes.string,
-  serviceTemplatePlaybooks: PropTypes.array
+  serviceTemplatePlaybooks: PropTypes.array,
+  redirectTo: PropTypes.func.isRequired
+};
+
+Overview.defaultProps = {
+  archiveTransformationPlanUrl: '/api/service_templates',
+  fetchTransformationMappingsUrl:
+    'api/transformation_mappings?expand=resources' +
+    '&attributes=transformation_mapping_items,service_templates' +
+    '&sort_by=updated_at' +
+    '&sort_order=desc',
+  fetchTransformationPlansUrl:
+    '/api/service_templates/?' +
+    "filter[]=type='ServiceTemplateTransformationPlan'" +
+    '&filter[]=active=true' +
+    '&expand=resources,schedules' +
+    '&attributes=name,description,miq_requests,options,created_at' +
+    '&sort_by=updated_at' +
+    '&sort_order=desc',
+  fetchServiceTemplateAnsiblePlaybooksUrl:
+    '/api/service_templates/?' +
+    "filter[]=type='ServiceTemplateAnsiblePlaybook'" +
+    '&expand=resources' +
+    '&attributes=name,description,created_at',
+  fetchArchivedTransformationPlansUrl:
+    '/api/service_templates/?' +
+    "filter[]=type='ServiceTemplateTransformationPlan'" +
+    '&filter[]=archived=true' +
+    '&expand=resources' +
+    '&attributes=name,description,miq_requests,options,created_at' +
+    '&sort_by=updated_at' +
+    '&sort_order=desc',
+  fetchClustersUrl:
+    'api/clusters/' +
+    '?attributes=ext_management_system.emstype,v_parent_datacenter,ext_management_system.name,lans,storages' +
+    '&expand=resources',
+  fetchNetworksUrl: 'api/lans/?expand=resources',
+  fetchDatastoresUrl: 'api/data_stores?expand=resources'
 };
+
 export default Overview;

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

@@ -5,6 +5,7 @@ Object {
   "activeTransformationPlans": Array [],
   "addNotificationAction": [Function],
   "archiveTransformationPlanAction": [Function],
+  "archiveTransformationPlanUrl": "/api/service_templates",
   "clusters": Array [],
   "continueToPlanAction": [Function],
   "createTransformationPlanRequestAction": [Function],
@@ -47,6 +48,7 @@ Object {
   "networks": Array [],
   "notStartedTransformationPlans": Array [],
   "planWizardVisible": false,
+  "redirectTo": [Function],
   "removeNotificationAction": [Function],
   "retryMigrationAction": [Function],
   "scheduleMigration": [Function],

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

@@ -27,7 +27,11 @@ const unUsedMappingInPlans = (mappingToDelete, notStartedTransformationPlans, fi
 
     const deleteMessageAboutPlansUsingMapping = (
       <div className="warning-modal-body-enable-scrollbar">
-        <strong>{planNames.map(plan => <ul key={plan.id}>{plan.name}</ul>)}</strong>
+        <strong>
+          {planNames.map(plan => (
+            <ul key={plan.id}>{plan.name}</ul>
+          ))}
+        </strong>
       </div>
     );
     return (

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

@@ -7,7 +7,7 @@ const InProgressWithDetailCard = ({ plan, failedOverlay, handleClick, children }
   <InProgressCard
     onClick={e => {
       if (!e.target.classList.contains('pficon-error-circle-o')) {
-        handleClick(`/migration/plan/${plan.id}`);
+        handleClick(`/plan/${plan.id}`);
       }
     }}
     className="in-progress"

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

@@ -73,7 +73,8 @@ const Migrations = ({
               }}
             >
               <Icon type="pf" name="add-circle-o" />
-              &nbsp;{__('Create Migration Plan')}
+              &nbsp;
+              {__('Create Migration Plan')}
             </a>
           </div>
         </div>