From b32a9debceb711adfaa817cc733743c086e6e90e Mon Sep 17 00:00:00 2001
From: Martin Reinhardt <contact@martinreinhardt-online.de>
Date: Fri, 7 Jun 2019 10:26:39 +0200
Subject: [PATCH] [KEYCLOAK-10018] Adding search highlight with text match

---
 .../base/admin/resources/js/controllers/groups.js      | 10 ++++++++++
 .../base/admin/resources/partials/group-list.html      |  4 ++--
 .../theme/keycloak/admin/resources/css/styles.css      |  8 +++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/groups.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/groups.js
index 2b918f91a9..0488059783 100755
--- a/themes/src/main/resources/theme/base/admin/resources/js/controllers/groups.js
+++ b/themes/src/main/resources/theme/base/admin/resources/js/controllers/groups.js
@@ -66,6 +66,16 @@ module.controller('GroupListCtrl', function($scope, $route, $q, realm, Groups, G
                     "subGroups": sortGroups('name', groups)
                 }
             ];
+            if (angular.isDefined(search) && search !== '') {
+                // Add highlight for concrete text match
+                setTimeout(function () {
+                    document.querySelectorAll('span').forEach(function (element) {
+                        if (element.textContent.indexOf(search) != -1) {
+                            angular.element(element).addClass('highlight');
+                        }
+                    });
+                }, 500);
+            }
         }, function (failed) {
             Notifications.error(failed);
         });
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/group-list.html b/themes/src/main/resources/theme/base/admin/resources/partials/group-list.html
index 97a568d998..731e28d42c 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/group-list.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/group-list.html
@@ -8,7 +8,7 @@
                 <div class="form-inline">
                     <div class="form-group">
                         <div class="input-group">
-                            <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
+                            <input type="text" autofocus placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
                             <div class="input-group-addon">
                                 <i class="fa fa-search" id="groupSearch" ng-click="searchGroup()"></i>
                             </div>
@@ -47,4 +47,4 @@
     </div>
 </div>
 
-<kc-menu></kc-menu>
\ No newline at end of file
+<kc-menu></kc-menu>
diff --git a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
index c846ed73ab..507f0a1e23 100755
--- a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
+++ b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
@@ -220,7 +220,7 @@ th.w-40 {
 
 .sidebar-pf .nav-pills > li > a:hover{
   background: #393f44;
-  border-color:#292e34; 
+  border-color:#292e34;
   border-left-color: #393f44;
   color: #fff;
 }
@@ -423,3 +423,9 @@ div[tree-model] li .deactivate_selected {
     font-weight: bold;
     padding: 1px 5px;
 }
+
+/* search highlighting */
+
+div[tree-model] li .highlight {
+    background-color: #aaddff;
+}