From 81480f203de41be7beec380b1d61892dd198c732 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 28 Jan 2021 14:56:46 +0100
Subject: [PATCH] :bug: Show lens icon in search dashboard

---
 .../main/partials/dashboard-sidebar.scss      |  7 +++++--
 .../src/app/main/ui/dashboard/sidebar.cljs    | 20 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
index 3fdd61e57..eca4e70e2 100644
--- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
@@ -277,7 +277,7 @@
       border-color: $color-black;
     }
 
-    .clear-search {
+    .search, .clear-search {
       align-items: center;
       cursor: pointer;
       display: flex;
@@ -289,7 +289,6 @@
       svg {
         fill: $color-gray-30;
         height: 15px;
-        transform: rotate(45deg);
         width: 15px;
 
         &:hover {
@@ -297,6 +296,10 @@
         }
       }
     }
+
+    .clear-search svg {
+      transform: rotate(45deg);
+    }
   }
 
   &.profile-bar {
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index a1d771ab0..7804168de 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -75,12 +75,14 @@
 (mf/defc sidebar-search
   [{:keys [search-term team-id locale] :as props}]
   (let [search-term (or search-term "")
+        focused?    (mf/use-state false)
         emit!       (mf/use-memo #(f/debounce st/emit! 500))
 
         on-search-focus
         (mf/use-callback
          (mf/deps team-id)
          (fn [event]
+           (reset! focused? true)
            (let [target (dom/get-target event)
                  value (dom/get-value target)]
              (dom/select-text! target)
@@ -88,6 +90,11 @@
                (emit! (rt/nav :dashboard-search {:team-id team-id} {}))
                (emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value}))))))
 
+        on-search-blur
+        (mf/use-callback
+         (fn [event]
+           (reset! focused? false)))
+
         on-search-change
         (mf/use-callback
          (mf/deps team-id)
@@ -114,11 +121,18 @@
        :default-value search-term
        :auto-complete "off"
        :on-focus on-search-focus
+       :on-blur on-search-blur
        :on-change on-search-change
        :ref #(when % (set! (.-value %) search-term))}]
-     [:div.clear-search
-      {:on-click on-clear-click}
-      i/close]]))
+
+     (if (or @focused? (not (empty? search-term)))
+       [:div.clear-search
+        {:on-click on-clear-click}
+        i/close]
+
+       [:div.search
+        {:on-click on-clear-click}
+        i/search])]))
 
 (mf/defc teams-selector-dropdown
   [{:keys [team profile locale] :as props}]