Update Manage Roles link to be Inline Button

This patch changes the Manage Roles link on the deployment plan
page to be a button. It also moves it to be inline with all
other main buttons on the page.

Note that the Save and Cancel buttons when changing the number
on nodes assigned to roles will remain floating to the right.

Change-Id: I8e5069c276e49d810554db81d71c06e62223fc56
Closes-Bug: #1757014

src/js/components/deployment_plan/RolesStep.js

@@ -28,6 +28,7 @@ import {
   getTotalAssignedNodesCount
 } from '../../selectors/nodesAssignment';
 import { InlineLoader } from '../ui/Loader';
+import { Link } from 'react-router-dom';
 import NodesActions from '../../actions/NodesActions';
 import Roles from '../roles/Roles';
 import RolesActions from '../../actions/RolesActions';
@@ -41,6 +42,10 @@ const messages = defineMessages({
     id: 'RolesStep.loadingParameters',
     defaultMessage: 'Loading Parameters...'
   },
+  manageRoles: {
+    id: 'RolesStep.manageRoles',
+    defaultMessage: 'Manage Roles'
+  },
   nodesAvailableToAssign: {
     id: 'RolesStep.nodesAvailableToAssign',
     defaultMessage:
@@ -100,6 +105,12 @@ const RolesStep = ({
         fetchNodes={fetchNodes}
         loaded={rolesLoaded && nodesLoaded && flavorsLoaded}
       />
+      <Link
+        className="btn btn-default"
+        to={`/plans/${currentPlanName}/select-roles`}
+      >
+        <FormattedMessage {...messages.manageRoles} />
+      </Link>
     </div>
   );
 };

src/js/components/roles/NodesAssignment.js

@@ -15,9 +15,7 @@
  */
 
 import { connect } from 'react-redux';
-import { defineMessages, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { Link } from 'react-router-dom';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { startCase } from 'lodash';
@@ -32,14 +30,6 @@ import { getRoles } from '../../selectors/roles';
 import NodesAssignmentForm from './NodesAssignmentForm';
 import ParametersActions from '../../actions/ParametersActions';
 import RoleCard from './RoleCard';
-import FloatingToolbar from '../ui/FloatingToolbar';
-
-const messages = defineMessages({
-  manageRolesLink: {
-    id: 'NodesAssignment.manageRolesLink',
-    defaultMessage: 'Manage Roles'
-  }
-});
 
 const NodesAssignment = ({
   assignedNodesCountsByRole,
@@ -72,12 +62,6 @@ const NodesAssignment = ({
           );
         })}
       </div>
-      <FloatingToolbar bottom right>
-        <Link to={`/plans/${currentPlanName}/select-roles`}>
-          <span className="pficon pficon-maintenance" />{' '}
-          <FormattedMessage {...messages.manageRolesLink} />
-        </Link>
-      </FloatingToolbar>
     </NodesAssignmentForm>
   );
 };