add key pane

awx/ui/client/src/access/addPermissions/addPermissions.block.less

@@ -83,6 +83,8 @@
     margin-top: 10px;
     margin-bottom: 20px;
     color: #848992;
+    display: flex;
+    align-items: center;
 }
 
 .AddPermissions-directionNumber {
@@ -90,9 +92,7 @@
     font-weight: bold;
     border-radius: 50%;
     background-color: @default-list-header-bg;
-    padding-left: 6px;
-    padding-right: 1px;
-    padding-bottom: 3px;
+    padding: 2px 6px;
     margin-right: 10px;
 }
 
@@ -164,3 +164,51 @@
 .AddPermissions .select2-search__field {
     text-transform: uppercase;
 }
+
+.AddPermissions-keyToggle {
+    margin-left: auto;
+    text-transform: uppercase;
+    padding: 3px 9px;
+    font-size: 12px;
+    background-color: @default-bg;
+    border-radius: 5px;
+    color: @default-interface-txt;
+    border: 1px solid @default-second-border;
+    cursor: pointer;
+}
+
+.AddPermissions-keyToggle:hover {
+    background-color: @default-tertiary-bg;
+}
+
+.AddPermissions-keyToggle.is-active {
+    background-color: @default-link;
+    border-color: @default-link;
+    color: @default-bg;
+}
+
+.AddPermissions-keyPane {
+    margin: 20px 0;
+    border-radius: 5px;
+    padding: 15px;
+    padding-bottom: 0px;
+    border: 1px solid @default-second-border;
+    color: @default-interface-txt;
+}
+
+.AddPermissions-keyRow {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+}
+
+.AddPermissions-keyName {
+    flex: 1 0 auto;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding-bottom: 3px;
+}
+
+.AddPermissions-keyDescription {
+    flex: 1 0 auto;
+}

awx/ui/client/src/access/addPermissions/addPermissions.controller.js

@@ -51,6 +51,12 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
                     .roles[key].description };
         });
 
+    scope.showKeyPane = false;
+
+    scope.toggleKeyPane = function() {
+        scope.showKeyPane = !scope.showKeyPane;
+    };
+
     // handle form tab changes
     scope.toggleFormTabs = function(list) {
         scope.usersSelected = (list === 'users');

awx/ui/client/src/access/addPermissions/addPermissions.partial.html

@@ -58,6 +58,23 @@
                         2.
                     </span>
                     Please assign roles to the selected users/teams
+                    <div class="AddPermissions-keyToggle"
+                        ng-class="{'is-active': showKeyPane}"
+                        ng-click="toggleKeyPane()">
+                        Key
+                    </div>
+                </div>
+                <div class="AddPermissions-keyPane"
+                    ng-show="showKeyPane">
+                    <div class="AddPermissions-keyRow"
+                        ng-repeat="key in roleKey">
+                        <div class="AddPermissions-keyName">
+                            {{ key.name }}
+                        </div>
+                        <div class="AddPermissions-keyDescription">
+                            {{ key.description }}
+                        </div>
+                    </div>
                 </div>
                 <form name="userForm" novalidate>
                     <ng-form name="userRoleForm">