Extend Toolbar directive to include sort dropdown

awx/ui/client/lib/components/components.strings.js

@@ -113,6 +113,12 @@ function ComponentsStrings (BaseString) {
     ns.list = {
         DEFAULT_EMPTY_LIST: t.s('Please add items to this list.')
     };
+
+    ns.toolbar = {
+        COMPACT: t.s('Compact'),
+        EXPANDED: t.s('Expanded'),
+        SORT_BY: t.s('SORT BY')
+    };
 }
 
 ComponentsStrings.$inject = ['BaseStringService'];

awx/ui/client/lib/components/list/_index.less

@@ -96,6 +96,43 @@
     }
 }
 
+.at-List-toolbarDropdown {
+    border-top-right-radius: @at-border-radius;
+    padding: 2px 10px;
+
+    &:hover {
+        cursor: pointer;
+        background: @at-gray-f2;
+    }
+
+    &-toggle {
+        background: none;
+        border: none;
+        padding: 0;
+    }
+
+    &-toggleText {
+        margin-right: 10px;
+    }
+
+    &-menu {
+        border-bottom-left-radius: @at-border-radius;
+        border-bottom-right-radius: @at-border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        left: auto;
+        margin: 0;
+        right: 0;
+        width: 100%;
+    }
+
+    &-menuHeader {
+        color: @at-gray-646972;
+        font-weight: bold;
+        pointer-events: none;
+    }
+}
+
 .at-List-container {
     border: @at-border-default-width solid @at-color-list-border;
     border-radius: @at-border-radius;

awx/ui/client/lib/components/list/list-toolbar.directive.js

@@ -1,5 +1,12 @@
 const templateUrl = require('~components/list/list-toolbar.partial.html');
 
+function AtListToolbar (strings) {
+    const vm = this || {};
+    vm.strings = strings;
+}
+
+AtListToolbar.$inject = ['ComponentsStrings'];
+
 function atListToolbar () {
     return {
         restrict: 'E',
@@ -9,9 +16,14 @@ function atListToolbar () {
         scope: {
             onExpand: '=',
             onCollapse: '=',
-            sortOnly: '=',
             isCollapsed: '=',
-        }
+            onSort: '<',
+            sortOnly: '=',
+            sortOptions: '<',
+            sortValue: '<'
+        },
+        controller: AtListToolbar,
+        controllerAs: 'vm'
     };
 }
 

awx/ui/client/lib/components/list/list-toolbar.partial.html

@@ -1,5 +1,24 @@
 <div class="at-List-toolbar--attached">
-  <div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">Compact</div>
-  <div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">Expanded</div>
-  <div class="at-List-toolbar-item">Sort</div>
+    <div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">{{ vm.strings.get('toolbar.COMPACT') }}</div>
+    <div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">{{ vm.strings.get('toolbar.EXPANDED') }}</div>
+    <div class="at-List-toolbarDropdown dropdown">
+        <button
+            class="at-List-toolbarDropdown-toggle dropdown-toggle"
+            data-display="static"
+            data-toggle="dropdown">
+            <span class="at-List-toolbarDropdown-toggleText">{{ sortValue.label }}</span>
+            <i class="fa fa-angle-down" aria-hidden="true"></i>
+        </button>
+        <ul class="at-List-toolbarDropdown-menu dropdown-menu">
+            <li class="at-List-toolbarDropdown-menuHeader dropdown-item">
+                {{ vm.strings.get('toolbar.SORT_BY') }}
+            </li>
+            <li
+                class="dropdown-item"
+                ng-repeat="option in sortOptions"
+                ng-click="onSort(option)">
+                {{ option.label }}
+            </li>
+        </ul>
+    </div>
 </div>