fix: branch tag page navigation with search query (#10383)

* 9a0726 fix: branch tag page navigation with search query

Author: rkapoor10

packages/ui/src/utils/utils.ts

@@ -54,3 +54,25 @@ export const getErrorMessage = (error: Error | string | null, defaultMessage: st
     (get(error, 'data.error', get(error, 'data.message', get(error, 'message', error))) as string) || defaultMessage
   )
 }
+
+/**
+ * Build pagination link with page number and optional search query
+ * @param pageNumber - The page number to navigate to
+ * @param searchQuery - Optional search query to preserve in URL
+ * @returns Query string for pagination link
+ */
+export function buildPaginationLink(pageNumber: number, searchQuery?: string | null): string {
+  const params = new URLSearchParams()
+  params.set('page', pageNumber.toString())
+  if (searchQuery) {
+    params.set('query', searchQuery)
+  }
+  return `?${params.toString()}`
+}
+
+export function createPaginationLinks(xPrevPage: number, xNextPage: number, searchQuery?: string | null) {
+  const getPrevPageLink = () => buildPaginationLink(xPrevPage, searchQuery)
+  const getNextPageLink = () => buildPaginationLink(xNextPage, searchQuery)
+
+  return { getPrevPageLink, getNextPageLink }
+}

packages/ui/src/views/repo/repo-branch/repo-branch-list-view.tsx

@@ -2,6 +2,7 @@ import { FC, useCallback, useMemo } from 'react'
 
 import { Button, IconV2, Layout, ListActions, NoData, Pagination, SearchInput, Text } from '@/components'
 import { useTranslation } from '@/context'
+import { createPaginationLinks } from '@/utils'
 import { SandboxLayout } from '@/views'
 import { cn } from '@utils/cn'
 
@@ -40,13 +41,10 @@ export const RepoBranchListView: FC<RepoBranchListViewProps> = ({
   const noBranches = !branchList?.length && !isLoading && !isDirtyList
   const noSearchResults = !branchList?.length && !isLoading && isDirtyList
 
-  const getPrevPageLink = useCallback(() => {
-    return `?page=${xPrevPage}`
-  }, [xPrevPage])
-
-  const getNextPageLink = useCallback(() => {
-    return `?page=${xNextPage}`
-  }, [xNextPage])
+  const { getPrevPageLink, getNextPageLink } = useMemo(
+    () => createPaginationLinks(xPrevPage, xNextPage, searchQuery),
+    [xPrevPage, xNextPage, searchQuery]
+  )
 
   const canShowPagination = useMemo(() => {
     return !isLoading && !!branchList.length

packages/ui/src/views/repo/repo-tags/repo-tags-list-page.tsx

@@ -4,6 +4,7 @@ import { Button, IconV2, Layout, ListActions, Pagination, SearchInput, Text } fr
 import { useTranslation } from '@/context'
 import { RepoTagsListViewProps, SandboxLayout } from '@/views'
 import { cn } from '@utils/cn'
+import { createPaginationLinks } from '@utils/utils'
 
 import { RepoTagsList } from './components/repo-tags-list'
 
@@ -37,13 +38,10 @@ export const RepoTagsListView: FC<RepoTagsListViewProps> = ({
     return page !== 1 || !!searchQuery
   }, [page, searchQuery])
 
-  const getPrevPageLink = useCallback(() => {
-    return `?page=${xPrevPage}`
-  }, [xPrevPage])
-
-  const getNextPageLink = useCallback(() => {
-    return `?page=${xNextPage}`
-  }, [xNextPage])
+  const { getPrevPageLink, getNextPageLink } = useMemo(
+    () => createPaginationLinks(xPrevPage, xNextPage, searchQuery),
+    [xPrevPage, xNextPage, searchQuery]
+  )
 
   const canShowPagination = useMemo(() => {
     return !isLoading && !!tagsList.length