feat(ui): add infinite scroll pagination to chat completions/responses logs table (#2466)

## Summary:

This commit adds infinite scroll pagination to the chat completions and
responses tables.


## Test Plan:
  1. Run unit tests: npm run test
  2. Manual testing: Navigate to chat
  completions/responses pages
  3. Verify infinite scroll triggers when approaching
  bottom
  4. Added playwright tests: npm run test:e2e

llama_stack/ui/components/responses/responses-table.test.tsx

@@ -15,26 +15,60 @@ jest.mock("next/navigation", () => ({
 // Mock helper functions
 jest.mock("@/lib/truncate-text");
 
+// Mock the client
+jest.mock("@/lib/client", () => ({
+  client: {
+    responses: {
+      list: jest.fn(),
+    },
+  },
+}));
+
+// Mock the usePagination hook
+const mockLoadMore = jest.fn();
+jest.mock("@/hooks/usePagination", () => ({
+  usePagination: jest.fn(() => ({
+    data: [],
+    status: "idle",
+    hasMore: false,
+    error: null,
+    loadMore: mockLoadMore,
+  })),
+}));
+
 // Import the mocked functions
 import { truncateText as originalTruncateText } from "@/lib/truncate-text";
 
+// Import the mocked hook
+import { usePagination } from "@/hooks/usePagination";
+const mockedUsePagination = usePagination as jest.MockedFunction<
+  typeof usePagination
+>;
+
 // Cast to jest.Mock for typings
 const truncateText = originalTruncateText as jest.Mock;
 
 describe("ResponsesTable", () => {
-  const defaultProps = {
-    data: [] as OpenAIResponse[],
-    isLoading: false,
-    error: null,
-  };
+  const defaultProps = {};
 
   beforeEach(() => {
     // Reset all mocks before each test
     mockPush.mockClear();
     truncateText.mockClear();
+    mockLoadMore.mockClear();
+    jest.clearAllMocks();
 
     // Default pass-through implementation
     truncateText.mockImplementation((text: string | undefined) => text);
+
+    // Default hook return value
+    mockedUsePagination.mockReturnValue({
+      data: [],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
   });
 
   test("renders without crashing with default props", () => {
@@ -65,7 +99,16 @@ describe("ResponsesTable", () => {
       ],
     };
 
-    render(<ResponsesTable {...defaultProps} data={[mockResponse]} />);
+    // Configure the mock to return our test data
+    mockedUsePagination.mockReturnValue({
+      data: [mockResponse],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
+
+    render(<ResponsesTable {...defaultProps} />);
 
     const row = screen.getByText("Test input").closest("tr");
     if (row) {
@@ -77,10 +120,16 @@ describe("ResponsesTable", () => {
   });
 
   describe("Loading State", () => {
-    test("renders skeleton UI when isLoading is true", () => {
-      const { container } = render(
-        <ResponsesTable {...defaultProps} isLoading={true} />,
-      );
+    test("renders skeleton UI when status is loading", () => {
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "loading",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ResponsesTable {...defaultProps} />);
 
       // Check for skeleton in the table caption
       const tableCaption = container.querySelector("caption");
@@ -105,42 +154,50 @@ describe("ResponsesTable", () => {
   });
 
   describe("Error State", () => {
-    test("renders error message when error prop is provided", () => {
+    test("renders error message when error is provided", () => {
       const errorMessage = "Network Error";
-      render(
-        <ResponsesTable
-          {...defaultProps}
-          error={{ name: "Error", message: errorMessage }}
-        />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "error",
+        hasMore: false,
+        error: { name: "Error", message: errorMessage } as Error,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(
-        screen.getByText(`Error fetching data: ${errorMessage}`),
+        screen.getByText("Unable to load chat completions"),
       ).toBeInTheDocument();
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
 
-    test("renders default error message when error.message is not available", () => {
-      render(
-        <ResponsesTable
-          {...defaultProps}
-          error={{ name: "Error", message: "" }}
-        />,
-      );
-      expect(
-        screen.getByText("Error fetching data: An unknown error occurred"),
-      ).toBeInTheDocument();
-    });
+    test.each([{ name: "Error", message: "" }, {}])(
+      "renders default error message when error has no message",
+      (errorObject) => {
+        mockedUsePagination.mockReturnValue({
+          data: [],
+          status: "error",
+          hasMore: false,
+          error: errorObject as Error,
+          loadMore: mockLoadMore,
+        });
 
-    test("renders default error message when error prop is an object without message", () => {
-      render(<ResponsesTable {...defaultProps} error={{} as Error} />);
-      expect(
-        screen.getByText("Error fetching data: An unknown error occurred"),
-      ).toBeInTheDocument();
-    });
+        render(<ResponsesTable {...defaultProps} />);
+        expect(
+          screen.getByText("Unable to load chat completions"),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText(
+            "An unexpected error occurred while loading the data.",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
   });
 
   describe("Empty State", () => {
     test('renders "No responses found." and no table when data array is empty', () => {
-      render(<ResponsesTable data={[]} isLoading={false} error={null} />);
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("No responses found.")).toBeInTheDocument();
 
       // Ensure that the table structure is NOT rendered in the empty state
@@ -151,7 +208,7 @@ describe("ResponsesTable", () => {
 
   describe("Data Rendering", () => {
     test("renders table caption, headers, and response data correctly", () => {
-      const mockResponses = [
+      const mockResponses: OpenAIResponse[] = [
         {
           id: "resp_1",
           object: "response" as const,
@@ -196,9 +253,15 @@ describe("ResponsesTable", () => {
         },
       ];
 
-      render(
-        <ResponsesTable data={mockResponses} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: mockResponses,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
 
       // Table caption
       expect(
@@ -246,9 +309,15 @@ describe("ResponsesTable", () => {
         ],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("Simple string input")).toBeInTheDocument();
     });
 
@@ -272,9 +341,15 @@ describe("ResponsesTable", () => {
         ],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("Array input text")).toBeInTheDocument();
     });
 
@@ -294,9 +369,15 @@ describe("ResponsesTable", () => {
         ],
       };
 
-      const { container } = render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ResponsesTable {...defaultProps} />);
 
       // Find the input cell (first cell in the data row) and verify it's empty
       const inputCell = container.querySelector("tbody tr td:first-child");
@@ -323,9 +404,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("Simple string output")).toBeInTheDocument();
     });
 
@@ -349,9 +436,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("Array output text")).toBeInTheDocument();
     });
 
@@ -374,9 +467,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(
         screen.getByText('search_function({"query": "test"})'),
       ).toBeInTheDocument();
@@ -400,9 +499,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(screen.getByText("simple_function({})")).toBeInTheDocument();
     });
 
@@ -423,9 +528,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       expect(
         screen.getByText("web_search_call(status: completed)"),
       ).toBeInTheDocument();
@@ -449,9 +560,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       // Should contain the JSON stringified version
       expect(screen.getByText(/unknown_call/)).toBeInTheDocument();
     });
@@ -472,9 +589,15 @@ describe("ResponsesTable", () => {
         input: [{ type: "message", content: "input" }],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
       // Should contain the JSON stringified version of the output array
       expect(screen.getByText(/unknown_type/)).toBeInTheDocument();
     });
@@ -520,18 +643,21 @@ describe("ResponsesTable", () => {
         ],
       };
 
-      render(
-        <ResponsesTable data={[mockResponse]} isLoading={false} error={null} />,
-      );
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
 
       // The truncated text should be present for both input and output
       const truncatedTexts = screen.getAllByText(
         longInput.slice(0, 10) + "...",
       );
       expect(truncatedTexts.length).toBe(2); // one for input, one for output
-      truncatedTexts.forEach((textElement) =>
-        expect(textElement).toBeInTheDocument(),
-      );
     });
   });
 });