Add toggle-able dropdown for workflow key

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less

@@ -151,9 +151,7 @@
     color: @default-interface-txt;
 }
 .WorkflowLegend-maker--left {
-    display: flex;
     flex: 1 0 auto;
-    padding-left: 20px;
 }
 .WorkflowLegend-maker--right {
     flex: 0 0 215px;
@@ -213,16 +211,20 @@
     padding-right: 20px;
     position:relative;
 }
+
+.Key-menuIcon,
 .WorkflowMaker-manualControlsIcon {
     color: @default-icon;
     vertical-align: middle;
     font-size: 1.2em;
     margin-left: 10px;
 }
+.Key-menuIcon:hover,
 .WorkflowMaker-manualControlsIcon:hover {
     color: @default-link-hov;
     cursor: pointer;
 }
+.Key-menuIcon--active,
 .WorkflowMaker-manualControlsIcon--active {
     color: @default-link-hov;
 }
@@ -248,3 +250,67 @@
 .WorkflowMaker-formTab {
     margin-right: 10px;
 }
+
+.Key-list {
+    margin: 0;
+    padding: 20px;
+    position: absolute;
+    background-color: @default-bg;
+    border: 1px solid @default-list-header-bg;
+}
+.Key-listItem {
+    display: flex;
+    padding: 0;
+    margin: 5px 0 0 0;
+}
+.Key-listItemContent {
+    margin: 0;
+    line-height: 20px;
+}
+.Key-listItemContent--circle {
+    line-height: 28px;
+}
+
+.Key-icon {
+    height: 3px;
+    width: 20px;
+    margin: 9px 5px 9px 0px;
+}
+.Key-heading {
+    font-weight: 700;
+    margin: 0 0 10px;
+    line-height: 0;
+    padding: 0;
+}
+.Key-icon--success {
+    background-color: @submit-button-bg;
+}
+.Key-icon--fail {
+    background-color: @default-err;
+}
+.Key-icon--always {
+    background-color: @default-link;
+}
+.Key-icon--warning {
+    background: @default-warning;
+}
+.Key-icon--default {
+    background: @default-icon;
+}
+.Key-icon--circle {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    color: @default-bg;
+    text-align: center;
+    line-height: 20px;
+    margin: 4px 5px 5px 0px;
+}
+.Key-details {
+    display: flex;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    border: 1px solid @default-no-items-bord;
+    margin-top:10px;
+}

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js

@@ -35,6 +35,10 @@ export default ['$scope', 'WorkflowService', 'GetBasePath', 'TemplatesService',
          $scope.associateRequests = [];
          $scope.disassociateRequests = [];
 
+        $scope.showKey = false;
+        $scope.toggleKey = () => $scope.showKey = !$scope.showKey;
+        $scope.keyClassList = `{ 'Key-menuIcon--active': showKey }`;
+
         function init() {
 
             let allNodes = [];

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html

@@ -33,27 +33,36 @@
         <div class="WorkflowMaker-contentLeft">
             <div class="WorkflowLegend-maker">
                 <div class="WorkflowLegend-maker--left">
-                    <div class="WorkflowLegend-legendItem">KEY:</div>
-                    <div class="WorkflowLegend-legendItem">
-                        <div class="WorkflowLegend-onSuccessLegend"></div>
-                        <div>On Success</div>
-                    </div>
-                    <div class="WorkflowLegend-legendItem">
-                        <div class="WorkflowLegend-onFailLegend"></div>
-                        <div>On Fail</div>
-                    </div>
-                    <div class="WorkflowLegend-legendItem">
-                        <div class="WorkflowLegend-alwaysLegend"></div>
-                        <div>Always</div>
-                    </div>
-                    <div class="WorkflowLegend-legendItem">
-                        <div class="WorkflowLegend-letterCircle">P</div>
-                        <div>Project Sync</div>
-                    </div>
-                    <div class="WorkflowLegend-legendItem">
-                        <div class="WorkflowLegend-letterCircle">I</div>
-                        <div>Inventory Sync</div>
-                    </div>
+                    <i ng-class="{{ keyClassList }}" class="fa fa-key Key-menuIcon" ng-click="toggleKey()"></i>
+                    <ul ng-show="showKey" class="Key-list noselect">
+                        <li class="Key-listItem">
+                            <p class="Key-heading">KEY</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--success"></div>
+                            <p class="Key-listItemContent">On Success</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--fail"></div>
+                            <p class="Key-listItemContent">On Fail</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--always"></div>
+                            <p class="Key-listItemContent">Always</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--circle Key-icon--default">P</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Project Sync</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--circle Key-icon--default">I</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Inventory Sync</p>
+                        </li>
+                        <li class="Key-listItem">
+                            <div class="Key-icon Key-icon--circle Key-icon--warning">!</div>
+                            <p class="Key-listItemContent Key-listItemContent--circle">Warning</p>
+                        </li>
+                    </ul>
                 </div>
                 <div class="WorkflowLegend-maker--right">
                     <span class="WorkflowMaker-totalJobs">TOTAL TEMPLATES</span>