fix(search): Reeeset pagination when search value changes

deo002 · heliocastro · commit d1e0917097c9 · 2025-11-27T10:20:42.000+01:00
diff --git a/src/app/[locale]/admin/bulkreleaseedit/components/ReleaseEditPage.tsx b/src/app/[locale]/admin/bulkreleaseedit/components/ReleaseEditPage.tsx
@@ -409,6 +409,10 @@ export default function BulkReleaseEdit(): JSX.Element {
                     ),
                 )
                 const response = await ApiUtils.GET(queryUrl, session.data.user.access_token, signal)
+                if (response.status === StatusCodes.NO_CONTENT) {
+                    setReleaseData([])
+                    return
+                }
                 if (response.status !== StatusCodes.OK) {
                     const err = (await response.json()) as ErrorDetails
                     throw new Error(err.message)
@@ -441,6 +445,16 @@ export default function BulkReleaseEdit(): JSX.Element {
         reloadKey,
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        search,
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
@@ -474,8 +488,8 @@ export default function BulkReleaseEdit(): JSX.Element {
         },
     })
 
-    const doSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        setSearch(event.currentTarget.value)
+    const doSearch = (value: string) => {
+        setSearch(value)
         setReloadKey(reloadKey + 1)
     }
 
diff --git a/src/app/[locale]/admin/licenseTypes/components/LicenseTypesDetail.tsx b/src/app/[locale]/admin/licenseTypes/components/LicenseTypesDetail.tsx
@@ -169,9 +169,9 @@ export default function LicenseTypesDetail(): ReactNode {
         setLicenseTypeName(licenseTypeName)
     }
 
-    const doSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const doSearch = (value: string) => {
         setQuickFilter({
-            search: event.currentTarget.value,
+            search: value,
         })
     }
 
diff --git a/src/app/[locale]/admin/obligations/components/Obligations.tsx b/src/app/[locale]/admin/obligations/components/Obligations.tsx
@@ -295,9 +295,19 @@ function Obligations(): ReactNode {
         },
     })
 
-    const doSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        search,
+    ])
+
+    const doSearch = (value: string) => {
         setSearch({
-            search: event.currentTarget.value,
+            search: value,
         })
     }
 
diff --git a/src/app/[locale]/admin/users/components/UserAdministration.tsx b/src/app/[locale]/admin/users/components/UserAdministration.tsx
@@ -326,6 +326,16 @@ export default function UserAdminstration(): JSX.Element {
         session,
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        params.toString(),
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
diff --git a/src/app/[locale]/admin/vendors/components/VendorsList.tsx b/src/app/[locale]/admin/vendors/components/VendorsList.tsx
@@ -110,6 +110,7 @@ export default function VendorsList(): JSX.Element {
     const [numVendors, setNumVendors] = useState<null | number>(null)
     const [delVendor, setDelVendor] = useState<Vendor | null>(null)
     const session = useSession()
+    const [search, setSearch] = useState({})
 
     useEffect(() => {
         if (session.status === 'unauthenticated') {
@@ -243,7 +244,10 @@ export default function VendorsList(): JSX.Element {
                 const queryUrl = CommonUtils.createUrlWithParams(
                     `vendors`,
                     Object.fromEntries(
-                        Object.entries(pageableQueryParam).map(([key, value]) => [
+                        Object.entries({
+                            ...pageableQueryParam,
+                            ...search,
+                        }).map(([key, value]) => [
                             key,
                             String(value),
                         ]),
@@ -318,6 +322,22 @@ export default function VendorsList(): JSX.Element {
         },
     })
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        search,
+    ])
+
+    const doSearch = (value: string) => {
+        setSearch({
+            searchText: value,
+        })
+    }
+
     const handleExportSpreadsheet = async () => {
         try {
             const session = await getSession()
@@ -343,7 +363,10 @@ export default function VendorsList(): JSX.Element {
             <div className='container page-content'>
                 <div className='row'>
                     <div className='col-lg-2'>
-                        <QuickFilter id='vendorSearch' />
+                        <QuickFilter
+                            id='vendorSearch'
+                            searchFunction={doSearch}
+                        />
                     </div>
                     <div className='col-lg-10'>
                         <div className='row d-flex justify-content-between'>
diff --git a/src/app/[locale]/components/components/ComponentsTable.tsx b/src/app/[locale]/components/components/ComponentsTable.tsx
@@ -251,6 +251,16 @@ export default function ComponentsTable({ setNumberOfComponent }: Props) {
         session,
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        params.toString(),
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
diff --git a/src/app/[locale]/licenses/components/LicensePage.tsx b/src/app/[locale]/licenses/components/LicensePage.tsx
@@ -41,9 +41,19 @@ function LicensePage(): ReactNode {
     const { data: session, status } = useSession()
     const deleteLicense = params.get('delete')
 
-    const doSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        search,
+    ])
+
+    const doSearch = (value: string) => {
         setSearch({
-            searchText: event.currentTarget.value,
+            searchText: value,
         })
     }
 
diff --git a/src/app/[locale]/packages/components/Packages.tsx b/src/app/[locale]/packages/components/Packages.tsx
@@ -358,6 +358,16 @@ function Packages(): ReactNode {
         status,
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        params.toString(),
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
diff --git a/src/app/[locale]/projects/components/Projects.tsx b/src/app/[locale]/projects/components/Projects.tsx
@@ -389,6 +389,16 @@ function Project(): JSX.Element {
         params.toString(),
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        params.toString(),
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
diff --git a/src/app/[locale]/vulnerabilities/components/Vulnerabilities.tsx b/src/app/[locale]/vulnerabilities/components/Vulnerabilities.tsx
@@ -280,6 +280,16 @@ function Vulnerabilities(): ReactNode {
         session,
     ])
 
+    useEffect(() => {
+        setPageableQueryParam({
+            page: 0,
+            page_entries: 10,
+            sort: '',
+        })
+    }, [
+        params.toString(),
+    ])
+
     const table = useReactTable({
         data: memoizedData,
         columns,
diff --git a/src/components/sw360/AdvancedSearch/AdvancedSearch.tsx b/src/components/sw360/AdvancedSearch/AdvancedSearch.tsx
@@ -46,7 +46,6 @@ function AdvancedSearch({ title = 'Advanced Search', fields, enableExactMatch =
     const [createdOnSearchOption, setCreatedOnSearchOption] = useState('')
     const [isUsersPage, setIsUsersPage] = useState(false)
     const [isPackagesPage, setIsPackagesPage] = useState(false)
-    const [isExactMatch, setIsExactMatch] = useState<boolean>(false)
 
     const handleSearchParam = (event: React.ChangeEvent<HTMLInputElement & HTMLSelectElement>) => {
         setSearchParam((prev: SearchParams) => ({
@@ -72,9 +71,6 @@ function AdvancedSearch({ title = 'Advanced Search', fields, enableExactMatch =
     const submitSearch = () => {
         const currentUrl = new URL(window.location.href)
         const searchUrl = new URL(currentUrl.origin + currentUrl.pathname)
-        searchUrl.searchParams.append('allDetails', 'true')
-        if (isExactMatch) searchUrl.searchParams.append('luceneSearch', 'false')
-        else searchUrl.searchParams.append('luceneSearch', 'true')
         Object.entries(searchParams).forEach(([key, value]: Array<string>) => {
             if (!CommonUtils.isNullEmptyOrUndefinedString(value)) {
                 searchUrl.searchParams.append(key, value)
@@ -240,7 +236,6 @@ function AdvancedSearch({ title = 'Advanced Search', fields, enableExactMatch =
                                     id='exactMatch'
                                     checked={searchParams.exactMatch === 'true'}
                                     onChange={(e) => {
-                                        setIsExactMatch(e.target.checked)
                                         setSearchParam((prev) => ({
                                             ...prev,
                                             exactMatch: e.target.checked ? 'true' : '',
diff --git a/src/components/sw360/QuickFilter/QuickFilter.tsx b/src/components/sw360/QuickFilter/QuickFilter.tsx
@@ -9,11 +9,25 @@
 
 'use client'
 
-import React, { type JSX } from 'react'
+import React, { type JSX, useRef } from 'react'
 import { Form } from 'react-bootstrap'
 import { QuickFilterProps } from './QuickFilter.types'
 
 function QuickFilter({ id, searchFunction, title = 'Quick Filter' }: QuickFilterProps): JSX.Element {
+    const debounceRef = useRef<NodeJS.Timeout | null>(null)
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value
+
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current)
+        }
+
+        debounceRef.current = setTimeout(() => {
+            searchFunction?.(value)
+        }, 700)
+    }
+
     return (
         <div className='card-deck'>
             <div
@@ -33,7 +47,7 @@ function QuickFilter({ id, searchFunction, title = 'Quick Filter' }: QuickFilter
                                 type='text'
                                 size='sm'
                                 name={title}
-                                onKeyUp={searchFunction}
+                                onChange={handleChange}
                             />
                         </Form.Group>
                     </Form>
diff --git a/src/components/sw360/QuickFilter/QuickFilter.types.ts b/src/components/sw360/QuickFilter/QuickFilter.types.ts
@@ -9,6 +9,6 @@
 
 export interface QuickFilterProps {
     id: string
-    searchFunction?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    searchFunction?: (value: string) => void
     title?: string
 }

Original file line number	Diff line number	Diff line change
`@@ -169,9 +169,9 @@ export default function LicenseTypesDetail(): ReactNode {`
`169`	`169`	`setLicenseTypeName(licenseTypeName)`
`170`	`170`	`}`
`171`	`171`
`172`		`- const doSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {`
	`172`	`+ const doSearch = (value: string) => {`
`173`	`173`	`setQuickFilter({`
`174`		`- search: event.currentTarget.value,`
	`174`	`+ search: value,`
`175`	`175`	`})`
`176`	`176`	`}`
`177`	`177`