From 355f64532b66d83e8a937372435b8eb42be1423f Mon Sep 17 00:00:00 2001
From: Liz Blanchard <lblanchard@redhat.com>
Date: Mon, 19 Mar 2018 19:16:56 -0400
Subject: [PATCH] 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 | 11 +++++++++++
 src/js/components/roles/NodesAssignment.js     | 16 ----------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/js/components/deployment_plan/RolesStep.js b/src/js/components/deployment_plan/RolesStep.js
index 765c58d5..1dc0b5c0 100644
--- a/src/js/components/deployment_plan/RolesStep.js
+++ b/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>
   );
 };
diff --git a/src/js/components/roles/NodesAssignment.js b/src/js/components/roles/NodesAssignment.js
index 6ca50e1e..06f87e26 100644
--- a/src/js/components/roles/NodesAssignment.js
+++ b/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>
   );
 };