From be359f9c517491e99dfe830e537218f5e6d9ac41 Mon Sep 17 00:00:00 2001
From: Aayush Srivastava <aayushsrivastava.work@gmail.com>
Date: Sun, 12 Jan 2025 13:38:30 +0530
Subject: [PATCH] Ensure that the Table defaults to the page that will contain
 the selected row when it is first mounted

---
 .../features/assemble-freight/chart-table.tsx |  5 ++
 .../assemble-freight/commit-table.tsx         |  5 ++
 .../features/assemble-freight/image-table.tsx | 81 ++++++++++---------
 ui/src/utils/pagination.test.ts               | 14 ++++
 ui/src/utils/pagination.ts                    | 12 +++
 5 files changed, 80 insertions(+), 37 deletions(-)
 create mode 100644 ui/src/utils/pagination.test.ts
 create mode 100644 ui/src/utils/pagination.ts

diff --git a/ui/src/features/assemble-freight/chart-table.tsx b/ui/src/features/assemble-freight/chart-table.tsx
index dc77ff321c..7fca8b4c9d 100644
--- a/ui/src/features/assemble-freight/chart-table.tsx
+++ b/ui/src/features/assemble-freight/chart-table.tsx
@@ -1,4 +1,6 @@
+import { calculatePageForSelectedRow } from '@ui/utils/pagination';
 import { Radio, Table } from 'antd';
+import { useState } from 'react';
 
 export const ChartTable = ({
   versions,
@@ -9,9 +11,12 @@ export const ChartTable = ({
   selected: string | undefined;
   select: (version?: string) => void;
 }) => {
+  const [defaultPage] = useState<number>(() => calculatePageForSelectedRow(selected, versions, (version) => version));
+
   return (
     <Table
       dataSource={versions.map((version) => ({ version }))}
+      pagination={{ defaultCurrent: defaultPage }}
       columns={[
         {
           width: '50px',
diff --git a/ui/src/features/assemble-freight/commit-table.tsx b/ui/src/features/assemble-freight/commit-table.tsx
index eaefaa4f66..afe468e24d 100644
--- a/ui/src/features/assemble-freight/commit-table.tsx
+++ b/ui/src/features/assemble-freight/commit-table.tsx
@@ -4,6 +4,8 @@ import { DiscoveredCommit } from '@ui/gen/v1alpha1/generated_pb';
 import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { TruncatedCopyable } from './truncated-copyable';
+import { calculatePageForSelectedRow } from '@ui/utils/pagination';
+import { useState } from 'react';
 
 export const CommitTable = ({
   commits,
@@ -14,10 +16,13 @@ export const CommitTable = ({
   selected: DiscoveredCommit | undefined;
   select: (commit?: DiscoveredCommit) => void;
 }) => {
+  const [defaultPage] = useState<number>(() => calculatePageForSelectedRow(selected, commits, (commit) => commit.id));
+
   return (
     <>
       <Table
         dataSource={commits}
+        pagination={{ defaultCurrent: defaultPage }}
         columns={[
           {
             render: (record: DiscoveredCommit) => (
diff --git a/ui/src/features/assemble-freight/image-table.tsx b/ui/src/features/assemble-freight/image-table.tsx
index 9d1bcc3ea0..a3e43ac8bf 100644
--- a/ui/src/features/assemble-freight/image-table.tsx
+++ b/ui/src/features/assemble-freight/image-table.tsx
@@ -6,6 +6,8 @@ import { DiscoveredImageReference } from '@ui/gen/v1alpha1/generated_pb';
 import { timestampDate } from '@ui/utils/connectrpc-utils';
 
 import { TruncatedCopyable } from './truncated-copyable';
+import { useState } from 'react';
+import { calculatePageForSelectedRow } from '@ui/utils/pagination';
 
 export const ImageTable = ({
   references,
@@ -15,41 +17,46 @@ export const ImageTable = ({
   references: DiscoveredImageReference[];
   selected: DiscoveredImageReference | undefined;
   select: (reference?: DiscoveredImageReference) => void;
-}) => (
-  <>
-    <Table
-      dataSource={references}
-      columns={[
-        {
-          render: (record: DiscoveredImageReference) => (
-            <Radio
-              checked={selected?.tag === record?.tag}
-              onClick={() => select(selected === record ? undefined : record)}
-            />
-          )
-        },
-        { title: 'Tag', dataIndex: 'tag' },
-        {
-          title: 'Digest',
-          render: (record: DiscoveredImageReference) => <TruncatedCopyable text={record?.digest} />
-        },
-        {
-          title: 'Source Repo',
-          render: (record: DiscoveredImageReference) =>
-            record?.gitRepoURL ? (
-              <a href={record?.gitRepoURL} target='_blank' rel='noreferrer'>
-                {record?.gitRepoURL}
-              </a>
-            ) : (
-              <FontAwesomeIcon icon={faQuestionCircle} className='text-gray-400' />
+}) => {
+  const [defaultPage] = useState<number>(() => calculatePageForSelectedRow(selected, references, (ref) => ref.tag));
+
+  return (
+    <>
+      <Table
+        dataSource={references}
+        pagination={{ defaultCurrent: defaultPage }}
+        columns={[
+          {
+            render: (record: DiscoveredImageReference) => (
+              <Radio
+                checked={selected?.tag === record?.tag}
+                onClick={() => select(selected === record ? undefined : record)}
+              />
             )
-        },
-        {
-          title: 'Created At',
-          render: (record: DiscoveredImageReference) =>
-            timestampDate(record.createdAt)?.toLocaleString()
-        }
-      ]}
-    />
-  </>
-);
+          },
+          { title: 'Tag', dataIndex: 'tag' },
+          {
+            title: 'Digest',
+            render: (record: DiscoveredImageReference) => <TruncatedCopyable text={record?.digest} />
+          },
+          {
+            title: 'Source Repo',
+            render: (record: DiscoveredImageReference) =>
+              record?.gitRepoURL ? (
+                <a href={record?.gitRepoURL} target='_blank' rel='noreferrer'>
+                  {record?.gitRepoURL}
+                </a>
+              ) : (
+                <FontAwesomeIcon icon={faQuestionCircle} className='text-gray-400' />
+              )
+          },
+          {
+            title: 'Created At',
+            render: (record: DiscoveredImageReference) =>
+              timestampDate(record.createdAt)?.toLocaleString()
+          }
+        ]}
+      />
+    </>
+  )
+};
diff --git a/ui/src/utils/pagination.test.ts b/ui/src/utils/pagination.test.ts
new file mode 100644
index 0000000000..23082ca2e4
--- /dev/null
+++ b/ui/src/utils/pagination.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+import { calculatePageForSelectedRow } from "./pagination";
+
+describe("calculatePageForSelectedRow", () => {
+    test.each([
+        [undefined, ["a", "b", "c"], (option: string) => option, 1],
+        ["a", ["a", "b", "c"], (option: string) => option, 1],
+        ["j", ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"], (option: string) => option, 1],
+        ["k", ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"], (option: string) => option, 2],
+    ])('selectedOption: %s, options: %s, key: %s, expectedPage: %s', (selectedOption, options, key, expectedPage) => {
+        const page = calculatePageForSelectedRow(selectedOption, options, key);
+        expect(page).toBe(expectedPage);
+    });
+});
diff --git a/ui/src/utils/pagination.ts b/ui/src/utils/pagination.ts
new file mode 100644
index 0000000000..a8cd94ea95
--- /dev/null
+++ b/ui/src/utils/pagination.ts
@@ -0,0 +1,12 @@
+export function calculatePageForSelectedRow<T>(selectedOption: T | undefined, options: T[], key: (option: T) => string): number {
+    const pageSize = 10;
+
+    if (selectedOption) {
+        const index = options.findIndex((option) => key(option) === key(selectedOption));
+        if (index >= 0) {
+            const page = Math.floor(index / pageSize) + 1;
+            return page;
+        }
+    }
+    return 1;
+}