feat: Click on search icon must focus on search area (argoproj#4801)

Fixes: argoproj#4791 Signed-off-by: Chetan Banavikalmutt <[email protected]>
dajudge · Nov 23, 2020 · ae12145 · ae12145
1 parent 7950900
commit ae12145
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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})} />
  )}