From ae12145f2dee909306f9ae7a8a1715558fc4bd75 Mon Sep 17 00:00:00 2001
From: Chetan Banavikalmutt <chetanrns1997@gmail.com>
Date: Mon, 23 Nov 2020 23:16:58 +0530
Subject: [PATCH] feat: Click on search icon must focus on search area (#4801)

Fixes: #4791

Signed-off-by: Chetan Banavikalmutt <chetanrns1997@gmail.com>
---
 .../applications-list/applications-list.scss         |  4 ++++
 .../applications-list/applications-list.tsx          | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
index 4fdb1fa383..59499c18eb 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.scss
+++ b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -188,6 +188,10 @@
             position: absolute;
             bottom: 0.6em;
             left: -1.5em;
+            cursor: pointer;
+            &:hover {
+                color: $argo-color-gray-6;
+            }    
         }
         i.fa-times {
             cursor: pointer;
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index 0b771566df..6e1e727dbc 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -163,6 +163,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
     const [createApi, setCreateApi] = React.useState(null);
     const clusters = React.useMemo(() => services.clusters.list(), []);
     const [isAppCreatePending, setAppCreatePending] = React.useState(false);
+    const searchBar = React.useRef<HTMLDivElement>(null);
 
     const loaderRef = React.useRef<DataLoader>();
     function refreshApp(appName: string) {
@@ -273,8 +274,15 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                     <div className='columns small-12 xxlarge-2'>
                                                         <Query>
                                                             {q => (
-                                                                <div className='applications-list__search'>
-                                                                    <i className='fa fa-search' />
+                                                                <div className='applications-list__search' ref={searchBar}>
+                                                                    <i
+                                                                        className='fa fa-search'
+                                                                        onClick={() => {
+                                                                            if (searchBar.current) {
+                                                                                searchBar.current.querySelector('input').focus();
+                                                                            }
+                                                                        }}
+                                                                    />
                                                                     {q.get('search') && (
                                                                         <i className='fa fa-times' onClick={() => ctx.navigation.goto('.', {search: null}, {replace: true})} />
                                                                     )}