[fix] search is not cleaned when clicking on the inventory tab (#216)

someengineering · May 16, 2024 · e358d2f · e358d2f
1 parent 76a7923
commit e358d2f
Show file tree

Hide file tree

Showing 18 changed files with 113 additions and 204 deletions.
diff --git a/src/pages/panel/inventory/InventoryAdvanceSearch.tsx b/src/pages/panel/inventory/InventoryAdvanceSearch.tsx
@@ -27,27 +27,18 @@ import { InventoryAdvanceSearchInfo } from './InventoryAdvanceSearchInfo'
 import { InventoryForm, InventoryFormsSkeleton } from './inventory-form'
 
 interface InventoryAdvanceSearchProps {
-  value: string
-  onChange: (value?: string, hide?: string) => void
   hasChanges: boolean
   hasError: boolean
 }
 
 type TabsType = 'form' | 'advance'
 
-export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError, hasChanges }: InventoryAdvanceSearchProps) => {
+export const InventoryAdvanceSearch = ({ hasError, hasChanges }: InventoryAdvanceSearchProps) => {
   const [focused, setIsFocused] = useState(false)
   const [tab, setTab] = useState<TabsType>('form')
-  const {
-    update: {
-      current: { updateQuery, reset },
-    },
-    error,
-    uiSimpleQuery,
-    q,
-  } = useFixQueryParser()
-  const [searchCritValue, setSearchCritValue] = useState(!searchCrit && searchCrit !== 'all' ? '' : searchCrit)
-  const hasSomethingExtra = !!q && q !== 'all' && !uiSimpleQuery()
+  const { updateQuery, reset, error, uiSimpleQuery, q } = useFixQueryParser()
+  const [searchCritValue, setSearchCritValue] = useState(!q && q !== 'all' ? '' : q)
+  const hasSomethingExtra = !!q && q !== 'all' && !uiSimpleQuery
 
   const timeoutRef = useRef<number>()
 
@@ -58,7 +49,6 @@ export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError,
         window.clearTimeout(timeoutRef.current)
       }
       timeoutRef.current = window.setTimeout(() => {
-        onChange(value)
         try {
           updateQuery(value)
         } catch (e) {
@@ -67,13 +57,12 @@ export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError,
         timeoutRef.current = undefined
       }, panelUI.inputChangeDebounce)
     },
-    [onChange, updateQuery],
+    [updateQuery],
   )
 
   useEffect(() => {
     setSearchCritValue(q)
-    onChange(q)
-  }, [q, onChange])
+  }, [q])
 
   useEffect(
     () => () => {
@@ -92,19 +81,9 @@ export const InventoryAdvanceSearch = ({ value: searchCrit, onChange, hasError,
     handleChangeValue(value)
   }
 
-  useEffect(() => {
-    setSearchCritValue(!searchCrit ? '' : searchCrit)
-    try {
-      updateQuery(!searchCrit ? '' : searchCrit)
-    } catch (e) {
-      console.info(e, !searchCrit ? '' : searchCrit)
-    }
-  }, [searchCrit, updateQuery])
-
   const handleReset = () => {
     reset()
     setSearchCritValue('')
-    onChange('')
     updateQuery('')
   }
 

diff --git a/src/pages/panel/inventory/InventoryPage.tsx b/src/pages/panel/inventory/InventoryPage.tsx
@@ -45,14 +45,9 @@ export default function InventoryPage() {
   return (
     <NetworkErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
       <Suspense fallback={<LoadingSuspenseFallback />}>
-        <FixQueryProvider searchQuery={searchCrit}>
+        <FixQueryProvider searchQuery={searchCrit} onChange={setSearchCrit}>
           <NetworkErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-            <InventoryAdvanceSearch
-              value={searchCrit}
-              onChange={setSearchCrit}
-              hasError={!!searchCrit && hasError}
-              hasChanges={hasChanges}
-            />
+            <InventoryAdvanceSearch hasError={!!searchCrit && hasError} hasChanges={hasChanges} />
           </NetworkErrorBoundary>
           <NetworkErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
             <ResourceDetail />

diff --git a/src/pages/panel/inventory/inventory-form/InventoryForm.tsx b/src/pages/panel/inventory/inventory-form/InventoryForm.tsx
@@ -34,8 +34,7 @@ function removeDuplicates<T>(data?: T[], basedOn?: keyof T) {
 }
 
 export const InventoryForm = () => {
-  const { account: selectedAccount, cloud: selectedCloud, region: selectedRegion, is } = useFixQueryParser()
-  const selectedKind = is()
+  const { account: selectedAccount, cloud: selectedCloud, region: selectedRegion, is: selectedKinds } = useFixQueryParser()
   const { selectedWorkspace } = useUserProfile()
   const { data: originalStartData, error } = useQuery({
     queryKey: ['workspace-inventory-search-start', selectedWorkspace?.id],
@@ -136,12 +135,12 @@ export const InventoryForm = () => {
       }
       result.push(currentResult.filter((cloud) => cloud))
     }
-    const selectedKindCloud = processedStartData.kinds.filter(({ id }) => selectedKind?.kinds.includes(id)).map(({ cloud }) => cloud)
+    const selectedKindCloud = processedStartData.kinds.filter(({ id }) => selectedKinds?.kinds.includes(id)).map(({ cloud }) => cloud)
     if (selectedKindCloud.length) {
       result.push(selectedKindCloud)
     }
     return result
-  }, [processedStartData, selectedAccount, selectedCloud, selectedKind, selectedRegion])
+  }, [processedStartData, selectedAccount, selectedCloud, selectedKinds?.kinds, selectedRegion])
   const selectedClouds = useMemo(() => {
     return Array.from(new Set(preDefinedFiltersSelectedClouds.flat()))
   }, [preDefinedFiltersSelectedClouds])

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormAccount.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormAccount.tsx
@@ -9,12 +9,7 @@ import { termValueToStringArray } from './utils'
 import { AutoCompletePreDefinedItems } from './utils/getAutoCompleteFromKey'
 
 export const InventoryFormAccount = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    account,
-    update: {
-      current: { setPredicate, deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { account, setPredicate, deletePredicate } = useFixQueryParser()
   const [open, setOpen] = useState<HTMLDivElement | null>(null)
   const values = termValueToStringArray(account?.value)
   const accountOptions = useMemo(() => {

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormCloud.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormCloud.tsx
@@ -9,12 +9,7 @@ import { termValueToStringArray } from './utils'
 import { AutoCompletePreDefinedItems } from './utils/getAutoCompleteFromKey'
 
 export const InventoryFormCloud = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    cloud,
-    update: {
-      current: { deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { cloud, deletePredicate } = useFixQueryParser()
   const [open, setOpen] = useState<HTMLDivElement | null>(null)
   const values = termValueToStringArray(cloud?.value)
   return values.length ? (

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormCloudValues.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormCloudValues.tsx
@@ -16,12 +16,7 @@ interface InventoryFormCloudValuesProps {
 }
 
 export const InventoryFormCloudValues = ({ preItems, onClose, open, values, withAddButton }: InventoryFormCloudValuesProps) => {
-  const {
-    cloud,
-    update: {
-      current: { setPredicate, deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { cloud, setPredicate, deletePredicate } = useFixQueryParser()
   const curValues = values ?? termValueToStringArray(cloud?.value)
   const cloudOptions = useMemo(() => {
     const valuesToAdd = [...curValues]

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormFullTextSearch.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormFullTextSearch.tsx
@@ -2,11 +2,7 @@ import { FullTextTerm, useFixQueryParser } from 'src/shared/fix-query-parser'
 import { InventoryFormFullTextSearchValue } from './InventoryFormFullTextSearchValue'
 
 export const InventoryFormFullTextSearchItem = ({ fullTextSearch }: { fullTextSearch?: FullTextTerm }) => {
-  const {
-    update: {
-      current: { updateFullTextSearch },
-    },
-  } = useFixQueryParser()
+  const { updateFullTextSearch } = useFixQueryParser()
   return (
     <>
       <InventoryFormFullTextSearchValue
@@ -23,6 +19,6 @@ export const InventoryFormFullTextSearches = () => {
   return fullTextSearches.length ? (
     fullTextSearches.map((fullTextSearch, i) => <InventoryFormFullTextSearchItem fullTextSearch={fullTextSearch} key={i} />)
   ) : (
-    <InventoryFormFullTextSearchItem />
+    <InventoryFormFullTextSearchItem key={0} />
   )
 }
diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormFullTextSearchValue.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormFullTextSearchValue.tsx
@@ -3,7 +3,7 @@ import ClearIcon from '@mui/icons-material/Clear'
 import SearchIcon from '@mui/icons-material/Search'
 import { Box, ButtonBase, Stack, TextField, alpha, outlinedInputClasses } from '@mui/material'
 import { useDebounce } from '@uidotdev/usehooks'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { panelUI } from 'src/shared/constants'
 
 interface InventoryFormFullTextSearchValueProps {
@@ -14,12 +14,18 @@ interface InventoryFormFullTextSearchValueProps {
 export const InventoryFormFullTextSearchValue = ({ onChange, fullTextSearch }: InventoryFormFullTextSearchValueProps) => {
   const [value, setValue] = useState(fullTextSearch ?? '')
   const debouncedValue = useDebounce(value, panelUI.fastInputChangeDebounce)
+  const prevDebouncedValue = useRef(value)
   const [focused, setFocused] = useState(false)
+
   useEffect(() => {
     setValue(fullTextSearch)
   }, [fullTextSearch])
+
   useEffect(() => {
-    onChange(debouncedValue)
+    if (prevDebouncedValue.current !== debouncedValue) {
+      onChange(debouncedValue)
+      prevDebouncedValue.current = debouncedValue
+    }
   }, [debouncedValue, onChange])
 
   return (

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormKind.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormKind.tsx
@@ -8,14 +8,8 @@ import { InventoryFormField } from './InventoryFormField'
 import { AutoCompletePreDefinedItems } from './utils/getAutoCompleteFromKey'
 
 export const InventoryFormKind = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    is,
-    update: {
-      current: { setIs, deleteIs },
-    },
-  } = useFixQueryParser()
-  const term = is()
-  const values = term?.kinds ?? []
+  const { is, setIs, deleteIs } = useFixQueryParser()
+  const values = is?.kinds ?? []
   const termOptions = useMemo(() => {
     const valuesToAdd = [...values]
     const result = [...preItems.kinds]
@@ -36,7 +30,7 @@ export const InventoryFormKind = ({ preItems }: { preItems: AutoCompletePreDefin
   return (
     <>
       <InventoryFormField
-        value={term}
+        value={is}
         label={t`Kinds`}
         onClick={(e) => setOpen(e.currentTarget)}
         onClear={deleteIs}

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormMore.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormMore.tsx
@@ -45,11 +45,7 @@ const InventoryFormMoreFab = ({
 }
 
 export const InventoryFormMore = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    update: {
-      current: { setPredicate },
-    },
-  } = useFixQueryParser()
+  const { setPredicate } = useFixQueryParser()
   const [open, setOpen] = useState<HTMLDivElement | null>(null)
   const [openClouds, setOpenClouds] = useState<HTMLDivElement | null>(null)
   const [openRegions, setOpenRegions] = useState<HTMLDivElement | null>(null)

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormMoreValue.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormMoreValue.tsx
@@ -98,7 +98,7 @@ export const InventoryFormMoreValue = ({
         <Stack direction="row" flexWrap={{ xs: 'wrap', md: 'nowrap' }} pt={2}>
           <InventoryFormFilterRowProperty
             kinds={preItems?.kinds.map((i) => i.value) ?? []}
-            selectedKinds={is()?.kinds ?? null}
+            selectedKinds={is?.kinds ?? null}
             defaultValue={pathStr?.startsWith('tags.') ? pathStr.split('.').slice(1).join('.') : pathStr}
             onChange={({ fqn, op, property, value }) => {
               if (fqn && property) {

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormRegion.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormRegion.tsx
@@ -9,12 +9,7 @@ import { termValueToStringArray } from './utils'
 import { AutoCompletePreDefinedItems } from './utils/getAutoCompleteFromKey'
 
 export const InventoryFormRegion = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    region,
-    update: {
-      current: { deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { region, deletePredicate } = useFixQueryParser()
   const [open, setOpen] = useState<HTMLDivElement | null>(null)
   const values = termValueToStringArray(region?.value)
   return values.length ? (

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormRegionValues.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormRegionValues.tsx
@@ -14,12 +14,7 @@ interface InventoryFormRegionValuesProps {
 }
 
 export const InventoryFormRegionValues = ({ preItems, onClose, open, values, withAddButton }: InventoryFormRegionValuesProps) => {
-  const {
-    region,
-    update: {
-      current: { setPredicate, deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { region, setPredicate, deletePredicate } = useFixQueryParser()
   const curValues = values ?? termValueToStringArray(region?.value)
   const regionOptions = useMemo(() => {
     const valuesToAdd = [...curValues]

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx
@@ -4,12 +4,7 @@ import { IconButton, Stack, Tooltip } from '@mui/material'
 import { useFixQueryParser } from 'src/shared/fix-query-parser'
 
 export const InventoryFormReset = () => {
-  const {
-    q,
-    update: {
-      current: { reset },
-    },
-  } = useFixQueryParser()
+  const { q, reset } = useFixQueryParser()
   return q && q !== 'all' ? (
     <Stack pt={1} pr={1} order={1} alignSelf="stretch" alignItems="end" flexGrow={1}>
       <Tooltip title={t`Clear the search`}>

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormRest.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormRest.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { DefaultPropertiesKeys, FixQueryContextValue, Predicate, useFixQueryParser } from 'src/shared/fix-query-parser'
+import { DefaultPropertiesKeys, Predicate, useFixQueryParser } from 'src/shared/fix-query-parser'
 import { InventoryFormField } from './InventoryFormField'
 import { InventoryFormValue } from './InventoryFormValue'
 import { AutoCompletePreDefinedItems } from './utils'
@@ -8,15 +8,12 @@ const INDEX_STARTS_FROM = 7
 
 interface InventoryFormRestItemProps {
   term: Predicate
-  update: FixQueryContextValue['update']
   index: number
   preItems: AutoCompletePreDefinedItems
 }
 
-const InventoryFormRestItem = ({ term, update, index, preItems }: InventoryFormRestItemProps) => {
-  const {
-    current: { deletePredicate, setPredicate },
-  } = update
+const InventoryFormRestItem = ({ term, index, preItems }: InventoryFormRestItemProps) => {
+  const { deletePredicate, setPredicate } = useFixQueryParser()
   const path = term.path.toString()
   return (
     <>
@@ -40,18 +37,18 @@ const InventoryFormRestItem = ({ term, update, index, preItems }: InventoryFormR
 }
 
 export const InventoryFormRest = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const { query, update } = useFixQueryParser()
+  const { predicates: noFilterPredicates } = useFixQueryParser()
 
   const predicates = useMemo(
     () =>
-      query.predicates().filter((term) => !Object.values(DefaultPropertiesKeys).includes(term.path.toString() as DefaultPropertiesKeys)),
-    [query],
+      noFilterPredicates.filter((term) => !Object.values(DefaultPropertiesKeys).includes(term.path.toString() as DefaultPropertiesKeys)),
+    [noFilterPredicates],
   )
 
   return (
     <>
       {predicates.map((term, i) => (
-        <InventoryFormRestItem key={i} term={term} update={update} index={i} preItems={preItems} />
+        <InventoryFormRestItem key={i} term={term} index={i} preItems={preItems} />
       ))}
     </>
   )

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormSeverity.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormSeverity.tsx
@@ -13,12 +13,7 @@ import { termValueToStringArray } from './utils'
 import { AutoCompletePreDefinedItems } from './utils/getAutoCompleteFromKey'
 
 export const InventoryFormSeverity = ({ preItems }: { preItems: AutoCompletePreDefinedItems }) => {
-  const {
-    severity,
-    update: {
-      current: { setPredicate, deletePredicate },
-    },
-  } = useFixQueryParser()
+  const { severity, setPredicate, deletePredicate } = useFixQueryParser()
   const [open, setOpen] = useState<HTMLDivElement | null>(null)
   const values = termValueToStringArray(severity?.value)
   const severityOptions = useMemo(() => {

diff --git a/src/pages/panel/inventory/inventory-form/InventoryFormTagsValue.tsx b/src/pages/panel/inventory/inventory-form/InventoryFormTagsValue.tsx
@@ -74,7 +74,7 @@ export const InventoryFormTagsValue = ({ onChange, onClose, open, defaultValue,
         <Stack direction="row" flexWrap={{ xs: 'wrap', md: 'nowrap' }} pt={2}>
           <InventoryFormFilterRowProperty
             kinds={preItems?.kinds.map((i) => i.value) ?? []}
-            selectedKinds={is()?.kinds ?? null}
+            selectedKinds={is?.kinds ?? null}
             defaultForcedValue="tags"
             onChange={({ fqn, op, property, value }) => {
               if (fqn && property) {