Merge pull request #769 from mzazrivec/fix_vertical_menu

Fix vertical navigation menu for v2v

(cherry picked from commit 8957e39)

https://bugzilla.redhat.com/show_bug.cgi?id=1642104

app/controllers/migration_controller.rb

@@ -5,8 +5,14 @@ class MigrationController < ApplicationController
   after_action :cleanup_action
 
   def index
-    # this sets the active menu item, must match the item name in lib/manageiq-v2v/engine.rb
-    @layout = 'migration'
+    @layout = case request.path
+              when '/migration/overview', /^\/migration\/plan\/.*/
+                'overview'
+              when '/migration/mappings'
+                'mappings'
+              when '/migration/settings'
+                'settings'
+              end
     @page_title = _('Migration')
   end
 

app/javascript/react/config/Routes.js

@@ -14,7 +14,7 @@ const Routes = ({ store }) =>
         <Route
           exact
           key={path}
-          path={`/${path}`}
+          path={path}
           render={props => {
             if (props.match.isExact) {
               return (
@@ -28,7 +28,7 @@ const Routes = ({ store }) =>
         />
       );
     }
-    return <Route exact key={path} path={`/${path}`} />;
+    return <Route exact key={path} path={path} />;
   });
 
 Routes.propTypes = {

app/javascript/react/config/config.js

@@ -5,19 +5,19 @@ import MappingsContainer from '../screens/App/Mappings';
 
 export const links = [
   {
-    path: '',
+    path: '/migration/overview',
     component: OverviewContainer
   },
   {
-    path: 'settings',
+    path: '/migration/settings',
     component: Settings
   },
   {
-    path: 'plan/:id',
+    path: '/migration/plan/:id',
     component: PlanContainer
   },
   {
-    path: 'mappings',
+    path: '/migration/mappings',
     component: MappingsContainer
   }
 ];

app/javascript/react/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConnectedRouter } from 'connected-react-router';
+import { BrowserRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { Spinner } from 'patternfly-react';
 import PropTypes from 'prop-types';
@@ -21,12 +21,12 @@ class App extends React.Component {
         </div>
       );
     return (
-      <ConnectedRouter history={ManageIQ.redux.history}>
+      <BrowserRouter>
         <React.Fragment>
           <NotificationList />
           <Routes store={ManageIQ.redux.store} />
         </React.Fragment>
-      </ConnectedRouter>
+      </BrowserRouter>
     );
   }
 }

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

@@ -165,7 +165,7 @@ class Mappings extends Component {
       <React.Fragment>
         <Toolbar>
           <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
-          <Breadcrumb.Item href="/migration">{__('Migration')}</Breadcrumb.Item>
+          <Breadcrumb.Item href="/migration/overview">{__('Migration')}</Breadcrumb.Item>
           <Breadcrumb.Item active>{__('Infrastructure Mappings')}</Breadcrumb.Item>
         </Toolbar>
         <Spinner
@@ -293,16 +293,16 @@ Mappings.propTypes = {
 };
 
 Mappings.defaultProps = {
-  fetchCloudNetworksUrl: 'api/cloud_networks?expand=resources',
+  fetchCloudNetworksUrl: '/api/cloud_networks?expand=resources',
   fetchCloudTenantsUrl:
-    'api/cloud_tenants?expand=resources&attributes=ext_management_system.name,cloud_networks,cloud_volume_types',
-  fetchCloudVolumeTypesUrl: 'api/cloud_volume_types?expand=resources',
+    '/api/cloud_tenants?expand=resources&attributes=ext_management_system.name,cloud_networks,cloud_volume_types',
+  fetchCloudVolumeTypesUrl: '/api/cloud_volume_types?expand=resources',
   fetchClustersUrl:
-    'api/clusters/' +
+    '/api/clusters/' +
     '?attributes=ext_management_system.emstype,v_parent_datacenter,ext_management_system.name,lans,storages' +
     '&expand=resources',
-  fetchDatastoresUrl: 'api/data_stores?expand=resources',
-  fetchNetworksUrl: 'api/lans/?expand=resources',
+  fetchDatastoresUrl: '/api/data_stores?expand=resources',
+  fetchNetworksUrl: '/api/lans/?expand=resources',
   fetchTransformationMappingsUrl: FETCH_TRANSFORMATION_MAPPINGS_URL,
   fetchArchivedTransformationPlansUrl: FETCH_ARCHIVED_TRANSFORMATION_PLANS_URL,
   fetchTransformationPlansUrl: FETCH_TRANSFORMATION_PLANS_URL

app/javascript/react/screens/App/Mappings/MappingsConstants.js

@@ -13,7 +13,7 @@ export const SHOW_V2V_DELETE_CONFIRMATION_MODAL = 'SHOW_V2V_DELETE_CONFIRMATION_
 export const YES_TO_DELETE_AND_HIDE_DELETE_CONFIRMATION_MODAL = 'YES_TO_DELETE_AND_HIDE_DELETE_CONFIRMATION_MODAL';
 
 export const FETCH_TRANSFORMATION_MAPPINGS_URL =
-  'api/transformation_mappings?expand=resources' +
+  '/api/transformation_mappings?expand=resources' +
   '&attributes=transformation_mapping_items,service_templates' +
   '&sort_by=updated_at' +
   '&sort_order=desc';

app/javascript/react/screens/App/Mappings/screens/MappingWizard/components/MappingWizardDatastoresStep/MappingWizardDatastoresStepConstants.js

@@ -8,9 +8,9 @@ export const QUERY_ATTRIBUTES = {
 };
 
 export const FETCH_STORAGE_URLS = {
-  source: 'api/clusters',
-  rhevm: 'api/clusters',
-  openstack: 'api/cloud_tenants'
+  source: '/api/clusters',
+  rhevm: '/api/clusters',
+  openstack: '/api/cloud_tenants'
 };
 
 export const STORAGE_ATTRIBUTES = {

app/javascript/react/screens/App/Mappings/screens/MappingWizard/components/MappingWizardNetworksStep/MappingWizardNetworksStepConstants.js

@@ -9,9 +9,9 @@ export const QUERY_ATTRIBUTES = {
 };
 
 export const FETCH_NETWORK_URLS = {
-  source: 'api/clusters',
-  rhevm: 'api/clusters',
-  openstack: 'api/cloud_tenants',
+  source: '/api/clusters',
+  rhevm: '/api/clusters',
+  openstack: '/api/cloud_tenants',
   public: '/api/providers'
 };
 

app/javascript/react/screens/App/Mappings/screens/MappingWizard/components/MappingWizardResultsStep/MappingWizardResultsStep.js

@@ -51,7 +51,7 @@ class MappingWizardResultsStep extends React.Component {
 
   onContinueToPlanWizard = id => {
     this.props.continueToPlanAction(id);
-    this.props.redirectTo('/');
+    this.props.redirectTo('/migration/overview');
   };
 
   render() {
@@ -118,7 +118,7 @@ MappingWizardResultsStep.propTypes = {
   redirectTo: PropTypes.func
 };
 MappingWizardResultsStep.defaultProps = {
-  postMappingsUrl: 'api/transformation_mappings',
+  postMappingsUrl: '/api/transformation_mappings',
   postTransformMappingsAction: noop,
   transformationsBody: {},
   isPostingMappings: true,

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

@@ -328,7 +328,7 @@ class Overview extends React.Component {
                 description={__('Create an infrastructure mapping to later be used by a migration plan')}
                 buttonText={__('Create Infrastructure Mapping')}
                 showWizardAction={() => {
-                  this.redirectTo('/mappings');
+                  this.redirectTo('/migration/mappings');
                   openMappingWizardOnTransitionAction();
                 }}
                 className="full-page-empty"

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(`/plan/${plan.id}`);
+        handleClick(`/migration/plan/${plan.id}`);
       }
     }}
     className="in-progress"

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

@@ -191,7 +191,7 @@ const MigrationsCompletedList = ({
                         onClick={e => {
                           e.stopPropagation();
 
-                          redirectTo(`/plan/${plan.id}`);
+                          redirectTo(`/migration/plan/${plan.id}`);
                         }}
                         key={plan.id}
                         leftContent={

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

@@ -87,7 +87,7 @@ const MigrationsNotStartedList = ({
                         stacked
                         className="plans-not-started-list__list-item"
                         onClick={() => {
-                          redirectTo(`/plan/${plan.id}`);
+                          redirectTo(`/migration/plan/${plan.id}`);
                         }}
                         actions={
                           <div>

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

@@ -29,7 +29,7 @@ test('clicking on a plan fires redirectTo with the path to its details page', ()
     .at(0)
     .simulate('click');
 
-  expect(redirectTo).toHaveBeenLastCalledWith(`/plan/${notStartedPlan.id}`);
+  expect(redirectTo).toHaveBeenLastCalledWith(`/migration/plan/${notStartedPlan.id}`);
 });
 
 test.skip('clicking on the Migrate button fires migrateClick with the correct API endpoint', () => {

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

@@ -119,7 +119,7 @@ PlanWizardInstancePropertiesStep.propTypes = {
 
 PlanWizardInstancePropertiesStep.defaultProps = {
   fetchOpenstackTenantUrl: '/api/cloud_tenants',
-  bestFitFlavorUrl: 'api/transformation_mappings',
+  bestFitFlavorUrl: '/api/transformation_mappings',
   queryOpenstackTenantAttributes: ['flavors', 'security_groups', 'default_security_group']
 };
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Immutable from 'seamless-immutable';
-import { Link } from 'react-router-dom';
 import { Breadcrumb, Spinner, Icon } from 'patternfly-react';
 import Toolbar from '../../../config/Toolbar';
 import PlanRequestDetailList from './components/PlanRequestDetailList/PlanRequestDetailList';
@@ -165,7 +164,7 @@ class Plan extends React.Component {
         <Toolbar>
           <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
           <li>
-            <Link to="/">{__('Migration')}</Link>
+            <a href="/migration/overview">{__('Migration')}</a>
           </li>
           {!isRejectedPlan &&
             planName && (

app/javascript/react/screens/App/common/NotificationList/NotificationList.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TimedToastNotification, ToastNotificationList } from 'patternfly-react';
-import { Link } from 'react-router-dom';
 
 class NotificationList extends React.Component {
   render() {
@@ -25,7 +24,7 @@ class NotificationList extends React.Component {
               </span>
               {notification.actionEnabled && (
                 <div className="pull-right toast-pf-action">
-                  <Link to={`/plan/${notification.data.id}`}>{__('View Details')}</Link>
+                  <a href={`/migration/plan/${notification.data.id}`}>{__('View Details')}</a>
                 </div>
               )}
             </TimedToastNotification>

app/javascript/redux/actions/routerActions.js

@@ -1,8 +1,3 @@
-import { push } from 'connected-react-router';
-
-export const redirectTo = path => (dispatch, getState) => {
-  // NOTE: to avoid pushing the same path to history and throwing error
-  if (getState().router.location.pathname !== path) {
-    dispatch(push(path));
-  }
+export const redirectTo = path => () => {
+  window.DoNav(path);
 };

config/routes.rb

@@ -1,6 +1,9 @@
 # ManageIQ::V2V::Engine.routes.draw do
 Rails.application.routes.draw do
-  match '/migration' => 'migration#index', :via => [:get]
+  match '/migration' => redirect('/migration/overview'), :via => [:get]
+  match '/migration/overview' => 'migration#index', :via => [:get]
+  match '/migration/mappings' => 'migration#index', :via => [:get]
+  match '/migration/plan/:id' => 'migration#index', :via => [:get]
   match 'migration/*page' => 'migration#index', :via => [:get]
 
   get "migration_log/download_migration_log(/:id)",

lib/manageiq/v2v/engine.rb

@@ -13,9 +13,9 @@ def vmdb_plugin?
     initializer 'plugin' do
       Menu::CustomLoader.register(
         Menu::Section.new(:migration, N_("Migration"), 'fa fa-plus', [
-          Menu::Item.new('migration', N_("Overview"), 'migration', {:feature => 'migration', :any => true}, '/migration'),
-          Menu::Item.new('mappings', N_("Infrastructure Mappings"), 'mappings', {:feature => 'mappings', :any => true}, '/migration#/mappings'),
-          Menu::Item.new('settings', N_("Migration Settings"), 'migration_settings', {:feature => 'migration_settings', :any => true}, '/migration#/settings')
+          Menu::Item.new('overview', N_("Overview"), 'migration', {:feature => 'migration', :any => true}, '/migration/overview'),
+          Menu::Item.new('mappings', N_("Infrastructure Mappings"), 'mappings', {:feature => 'mappings', :any => true}, '/migration/mappings'),
+          Menu::Item.new('settings', N_("Migration Settings"), 'migration_settings', {:feature => 'migration_settings', :any => true}, '/migration/settings')
         ], nil, nil, nil, nil, :compute)
       )
     end