From f42df05ff9e69595ca030261c0ab560aebeaa8f4 Mon Sep 17 00:00:00 2001
From: phix <peter.hicks@astronomer.io>
Date: Tue, 7 Nov 2023 11:13:43 -0800
Subject: [PATCH] Fixes stale and empty search value.

---
 web/src/components/search/Search.tsx         | 56 ++++++++++----------
 web/src/components/search/SearchListItem.tsx |  5 +-
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/web/src/components/search/Search.tsx b/web/src/components/search/Search.tsx
index fde2e5cee0..7f4b971e89 100644
--- a/web/src/components/search/Search.tsx
+++ b/web/src/components/search/Search.tsx
@@ -27,22 +27,22 @@ const i18next = require('i18next')
 const INITIAL_SEARCH_FILTER = [
   {
     text: i18next.t('search.filter.all'),
-    value: 'All'
+    value: 'All',
   },
   {
     icon: faCog,
     foregroundColor: theme.palette.common.white,
     backgroundColor: theme.palette.primary.main,
     text: i18next.t('search.filter.jobs'),
-    value: 'JOB'
+    value: 'JOB',
   },
   {
     icon: faDatabase,
     foregroundColor: theme.palette.common.white,
     backgroundColor: theme.palette.primary.main,
     text: i18next.t('search.filter.datasets'),
-    value: 'DATASET'
-  }
+    value: 'DATASET',
+  },
 ]
 
 const INITIAL_SEARCH_SORT_FILTER = [
@@ -55,12 +55,12 @@ const INITIAL_SEARCH_SORT_FILTER = [
   },
   {
     text: i18next.t('search.filter.updated'),
-    value: 'UPDATE_AT'
+    value: 'UPDATE_AT',
   },
   {
     text: i18next.t('search.filter.name'),
-    value: 'NAME'
-  }
+    value: 'NAME',
+  },
 ]
 
 interface StateProps {
@@ -97,7 +97,7 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
     props.fetchSearch(q, filter, sort)
   }
 
-  debounce(fetchSearch, 300) // TODO check if we need to move it in a useEffect []
+  debounce(fetchSearch, 300)
 
   const location = useLocation()
   React.useEffect(() => {
@@ -107,10 +107,9 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
 
   const onSearch = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setState({ ...state, search: event.target.value, open: true })
-
-    setTimeout(() => {
-      fetchSearch(state.search, state.filter.toUpperCase(), state.sort.toUpperCase())
-    }, 1)
+    if (event.target.value.length > 0) {
+      fetchSearch(event.target.value, state.filter.toUpperCase(), state.sort.toUpperCase())
+    }
   }
 
   const onSelectFilter = (label: string) => {
@@ -241,7 +240,9 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
                   {props.searchResults.size === 0 && (
                     <Box m={2} display={'flex'} alignItems={'center'} justifyContent={'center'}>
                       <MqText>
-                        {isSearching || !isSearchingInit ? i18next.t('search.status') : i18next.t('search.none')}
+                        {isSearching || !isSearchingInit
+                          ? i18next.t('search.status')
+                          : i18next.t('search.none')}
                       </MqText>
                     </Box>
                   )}
@@ -284,20 +285,21 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
                           <Box key={result[0].group + index}>
                             {result.map((listItem) => {
                               return (
-                                <SearchListItem
-                                  key={listItem.name}
-                                  searchResult={listItem}
-                                  search={state.search}
-                                  selected={listItem.name === state.selected}
-                                  onClick={(nodeName) => {
-                                    setState({
-                                      ...state,
-                                      open: false,
-                                      search: nodeName,
-                                    })
-                                    props.setSelectedNode(listItem.nodeId)
-                                  }}
-                                />
+                                <React.Fragment key={listItem.name}>
+                                  <SearchListItem
+                                    searchResult={listItem}
+                                    search={state.search}
+                                    selected={listItem.name === state.selected}
+                                    onClick={(nodeName) => {
+                                      setState({
+                                        ...state,
+                                        open: false,
+                                        search: nodeName,
+                                      })
+                                      props.setSelectedNode(listItem.nodeId)
+                                    }}
+                                  />
+                                </React.Fragment>
                               )
                             })}
                           </Box>
diff --git a/web/src/components/search/SearchListItem.tsx b/web/src/components/search/SearchListItem.tsx
index 934eb8b853..4a08680862 100644
--- a/web/src/components/search/SearchListItem.tsx
+++ b/web/src/components/search/SearchListItem.tsx
@@ -15,7 +15,6 @@ import React from 'react'
 import moment from 'moment'
 
 interface OwnProps {
-  key: string | number
   searchResult: SearchResult
   search: string
   onClick: (nodeName: string) => void
@@ -30,7 +29,6 @@ const searchResultIcon: { [key in JobOrDataset]: JSX.Element } = {
 type DkSearchListItemProps = OwnProps
 
 const SearchListItem: React.FC<DkSearchListItemProps> = ({
-  key,
   searchResult,
   search,
   onClick,
@@ -43,7 +41,6 @@ const SearchListItem: React.FC<DkSearchListItemProps> = ({
   const searchMatchIndex = name.toLowerCase().indexOf(search.toLowerCase())
   return (
     <RouterLink
-      key={key}
       style={{
         textDecoration: 'none',
       }}
@@ -69,7 +66,7 @@ const SearchListItem: React.FC<DkSearchListItemProps> = ({
           '&:hover, &.selected': {
             backgroundColor: darken(theme.palette.background.paper, 0.02),
           },
-          '&:nth-child(even)': {
+          '&:nth-pf-type(even)': {
             backgroundColor: darken(theme.palette.background.paper, 0.2),
             '&:hover, &.selected': {
               backgroundColor: darken(theme.palette.background.paper, 0.02),