Add empty state to groups search result

src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UserGroupsController($scope, $timeout, $location, userService, userGroupsResource, 
+    function UserGroupsController($scope, $timeout, $location, $filter, userService, userGroupsResource, 
         formHelper, localizationService, listViewHelper) {
 
         var vm = this;
@@ -31,6 +31,7 @@
                         ug.hasAccess = user.userGroups.indexOf(ug.alias) !== -1 || user.userGroups.indexOf("admin") !== -1;
                         return ug;
                     });
+                    vm.filteredUserGroups = vm.userGroups;
 
                     vm.loading = false;
                 });
@@ -118,6 +119,14 @@
             vm.selection = [];
         }
 
+        var unbindFilterWatcher = $scope.$watch("vm.filter", function (newVal, oldVal) {
+            vm.filteredUserGroups = $filter('filter')(vm.userGroups, vm.filter);
+        });
+
+        $scope.$on("$destroy", function () {
+            unbindFilterWatcher();
+        });
+
         onInit();
 
     }

src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html

@@ -70,7 +70,7 @@
         </div>
     </div>
 
-    <div class="umb-table" ng-if="!vm.loading">
+    <div class="umb-table" ng-if="!vm.loading && vm.filteredUserGroups.length">
 
         <div class="umb-table-head">
             <div class="umb-table-row">
@@ -84,7 +84,7 @@
 
         <div class="umb-table-body">
             <div class="umb-table-row"
-                ng-repeat="group in vm.userGroups | filter:vm.filter track by $index"
+                ng-repeat="group in vm.filteredUserGroups track by $index"
                 ng-click="vm.selectUserGroup(group, $index, $event)"
                 ng-class="{'-selected': group.selected, '-selectable': group.hasAccess && group.alias !== 'admin' && group.alias !== 'translator'}">
 
@@ -119,4 +119,9 @@
         </div>
     </div>
 
+    <!-- Empty states -->
+    <umb-empty-state ng-if="!vm.loading && !vm.filteredUserGroups.length" position="center">
+        <localize key="general_searchNoResult"></localize>
+    </umb-empty-state>
+
 </div>