(iggy) branch master updated: fix(web): fix incorrect navigation path in messages pagination (#2364)

[piotr]

This is an automated email from the ASF dual-hosted git repository.

piotr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/iggy.git


The following commit(s) were added to refs/heads/master by this push:
     new 5d9cfb3ec fix(web): fix incorrect navigation path in messages 
pagination (#2364)
5d9cfb3ec is described below

commit 5d9cfb3ec85c5bf4552774c84a87b92631e82be1
Author: Piotr Ziółko <50527113+piotrzio...@users.noreply.github.com>
AuthorDate: Mon Nov 17 22:18:22 2025 +0100

    fix(web): fix incorrect navigation path in messages pagination (#2364)
---
 .../[partitionId=i32]/messages/+page.svelte        | 40 +++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git 
a/web/src/routes/dashboard/streams/[streamId=i32]/topics/[topicId=i32]/partitions/[partitionId=i32]/messages/+page.svelte
 
b/web/src/routes/dashboard/streams/[streamId=i32]/topics/[topicId=i32]/partitions/[partitionId=i32]/messages/+page.svelte
index 11e5909c5..7dd212dc8 100644
--- 
a/web/src/routes/dashboard/streams/[streamId=i32]/topics/[topicId=i32]/partitions/[partitionId=i32]/messages/+page.svelte
+++ 
b/web/src/routes/dashboard/streams/[streamId=i32]/topics/[topicId=i32]/partitions/[partitionId=i32]/messages/+page.svelte
@@ -9,6 +9,7 @@
   import Paginator from '$lib/components/Paginator.svelte';
   import type { MessagePartition } from '$lib/domain/Message';
   import type { TopicDetails } from '$lib/domain/TopicDetails';
+  import { SvelteURLSearchParams } from 'svelte/reactivity';
 
   interface Props {
     data: {
@@ -23,9 +24,6 @@
   let { data }: Props = $props();
   let topic = $derived(data.topic);
   let partitionMessages = $derived(data.partitionMessages);
-  let prevPage = $derived(
-    
`/dashboard/streams/${page.params.streamId}/topics/${page.params.topicId}/partitions/`
-  );
 
   let direction = $state(page.url.searchParams.get('direction') || 'desc');
   let currentPage = $state(1);
@@ -33,22 +31,33 @@
     Math.ceil((partitionMessages.currentOffset + 1) / data.pagination.count)
   );
 
-  async function loadPage(page: number) {
+  async function loadPage(pageNum: number) {
     const messagesPerPage = data.pagination.count;
     const totalMessages = partitionMessages.currentOffset + 1;
 
     let offset: number;
     if (direction === 'desc') {
-      offset = Math.max(0, totalMessages - page * messagesPerPage);
+      offset = Math.max(0, totalMessages - pageNum * messagesPerPage);
     } else {
-      offset = (page - 1) * messagesPerPage;
+      offset = (pageNum - 1) * messagesPerPage;
     }
 
-    const url = new URL(window.location.href);
-    url.searchParams.set('offset', offset.toString());
-    url.searchParams.set('direction', direction);
-    await goto(resolve(url.toString()), { keepFocus: true, noScroll: true });
-    currentPage = page;
+    const searchParams = new SvelteURLSearchParams();
+    searchParams.set('offset', offset.toString());
+    searchParams.set('direction', direction);
+
+    // TODO: https://github.com/sveltejs/kit/issues/14750
+    await goto(
+        // eslint-disable-next-line svelte/no-navigation-without-resolve
+      resolve(
+        
`/dashboard/streams/${page.params.streamId}/topics/${page.params.topicId}/partitions/${page.params.partitionId}/messages`
+      ) + `?${searchParams}`,
+      {
+        keepFocus: true,
+        noScroll: true
+      }
+    );
+    currentPage = pageNum;
   }
 
   function onPageChange(event: CustomEvent<number>) {
@@ -63,7 +72,14 @@
 </script>
 
 <div class="h-[80px] flex text-xs items-center pl-2 pr-5">
-  <Button variant="rounded" class="mr-5" onclick={() => 
goto(resolve(prevPage))}>
+  <Button
+    variant="rounded"
+    class="mr-5"
+    onclick={() =>
+      goto(
+        
resolve(`/dashboard/streams/${page.params.streamId}/topics/${page.params.topicId}`)
+      )}
+  >
     <Icon name="arrowLeft" class="h-[40px] w-[30px]" />
   </Button>