feat: added single page for audit rows

Author: sauraww

PRODUCT.md

@@ -0,0 +1,33 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Superposition Embeddable UI is used by developers, platform operators, product engineers, and workspace administrators who need to inspect and manage configuration, dimensions, overrides, and audit activity from within a host application.
+
+## Product Purpose
+
+The library provides embeddable admin surfaces for Superposition configuration management. Success means a host app can mount focused, trustworthy workflows that feel native to Juspay product tooling while remaining easy to scope, theme, and integrate.
+
+## Brand Personality
+
+Precise, composed, operational. The UI should feel like a dependable control surface for high-stakes configuration work, not a decorative dashboard.
+
+## Anti-references
+
+Avoid bespoke controls that diverge from Blend, marketing-style layouts, oversized empty states, heavy gradients, nested cards, and dense inline styling that makes the interface feel detached from the design system.
+
+## Design Principles
+
+- Blend first: use Blend components, tokens, states, and spacing as the primary interface vocabulary.
+- Keep operators in flow: filters, tables, forms, and actions should be predictable, compact, and quick to scan.
+- Make scope visible: workspace, boundary context, feature gates, and read-only limits should be clear without adding visual noise.
+- Favor structured detail: use consistent key-value rows, tags, and tables for configuration data instead of ad hoc text blocks.
+- Preserve host control: redesigns must keep the embeddable API, custom modal hooks, theming hooks, and scoped behavior intact.
+
+## Accessibility & Inclusion
+
+Target accessible defaults through Blend primitives, keyboard-friendly controls, visible focus states, readable contrast, and layouts that remain usable in constrained embedded containers.

__tests__/api/audit-logs.test.ts

@@ -41,6 +41,10 @@ describe("auditLogsApi", () => {
         tables: ["contexts", "default_configs"],
         action: ["UPDATE"],
         username: "alice",
+        dimension_params: {
+          "dimension[cid]": "swiggy",
+          "dimension[merchant_id]": "merchant_123",
+        },
         sort_by: "asc",
       },
     );
@@ -52,6 +56,8 @@ describe("auditLogsApi", () => {
     expect(url).toContain("table=contexts,default_configs");
     expect(url).toContain("action=UPDATE");
     expect(url).toContain("username=alice");
+    expect(url).toContain("dimension[cid]=swiggy");
+    expect(url).toContain("dimension[merchant_id]=merchant_123");
     expect(url).toContain("sort_by=asc");
     expect(url).toContain("from_date=2024-05-01T00%3A00%3A00.000Z");
     expect(url).toContain("to_date=2024-05-02T23%3A59%3A59.999Z");

__tests__/api/resolve.test.ts

@@ -24,17 +24,19 @@ describe("resolveApi", () => {
     vi.restoreAllMocks();
   });
 
-  it("calls GET /config/resolve with dimension query params", async () => {
+  it("calls POST /config/resolve with context in the request body", async () => {
     const api = resolveApi(client);
 
-    await api.resolve({ region: "ap-south-1", city: "blr" }, "DEEP");
+    await api.resolve({ region: "ap-south-1", city: "blr" }, "MERGE");
 
     const [url, init] = mockFetch.mock.calls[0];
     expect(url).toBe(
-      "https://superposition.test/config/resolve?dimension[region]=ap-south-1&dimension[city]=blr&merge_strategy=DEEP",
+      "https://superposition.test/config/resolve?merge_strategy=MERGE",
+    );
+    expect(init.method).toBe("POST");
+    expect(init.body).toBe(
+      JSON.stringify({ context: { region: "ap-south-1", city: "blr" } }),
     );
-    expect(init.method).toBe("GET");
-    expect(init.body).toBeUndefined();
   });
 
   it("calls GET /config for the cached config contract", async () => {

__tests__/components/Table.test.tsx

@@ -1,6 +1,9 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FormEvent } from "react";
 import { resolveTableSerialNumberProps, Table } from "../../src/components/Table";
+import { SuperpositionUIProvider } from "../../src/providers/SuperpositionUIProvider";
 
 interface Row {
   id: string;
@@ -91,6 +94,116 @@ describe("Table", () => {
     expect(screen.getByText("11").style.textAlign).toBe("left");
   });
 
+  it("keeps Blend table controls from submitting host forms", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+    const onPageSizeChange = vi.fn();
+
+    render(
+      <form onSubmit={onSubmit}>
+        <SuperpositionUIProvider
+          config={{ apiBaseUrl: "/api", orgId: "org", workspace: "ws" }}
+        >
+          <Table
+            columns={columns}
+            data={data}
+            keyExtractor={(row) => row.id}
+            pagination={{
+              currentPage: 1,
+              pageSize: 10,
+              totalRows: 25,
+              pageSizeOptions: [10, 20],
+            }}
+            onPageChange={vi.fn()}
+            onPageSizeChange={onPageSizeChange}
+            showSettings
+            enableColumnManager
+            columnManagerAlwaysSelected={["name"]}
+          />
+        </SuperpositionUIProvider>
+      </form>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Manage columns" }));
+    await user.click(
+      screen.getByRole("button", { name: "Select number of rows per page" }),
+    );
+    await user.click(await screen.findByText("20"));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onPageSizeChange).toHaveBeenCalledWith(20);
+  });
+
+  it("keeps rows-per-page warning-free on narrow screens", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+    const onPageSizeChange = vi.fn();
+    const originalInnerWidth = window.innerWidth;
+    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 500,
+    });
+    window.dispatchEvent(new Event("resize"));
+
+    try {
+      render(
+        <form onSubmit={onSubmit}>
+          <SuperpositionUIProvider
+            config={{ apiBaseUrl: "/api", orgId: "org", workspace: "ws" }}
+          >
+            <Table
+              columns={columns}
+              data={data}
+              keyExtractor={(row) => row.id}
+              pagination={{
+                currentPage: 1,
+                pageSize: 10,
+                totalRows: 25,
+                pageSizeOptions: [10, 20],
+              }}
+              onPageChange={vi.fn()}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </SuperpositionUIProvider>
+        </form>,
+      );
+
+      await user.click(
+        screen.getByRole("button", { name: "Select number of rows per page" }),
+      );
+      await user.click(await screen.findByText("20 / page"));
+
+      const consoleMessages = consoleErrorSpy.mock.calls
+        .flat()
+        .map((message) => String(message));
+
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(onPageSizeChange).toHaveBeenCalledWith(20);
+      expect(
+        consoleMessages.some(
+          (message) =>
+            message.includes("Function components cannot be given refs") ||
+            message.includes("enableVirtualization"),
+        ),
+      ).toBe(false);
+    } finally {
+      consoleErrorSpy.mockRestore();
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+      window.dispatchEvent(new Event("resize"));
+    }
+  });
+
   it("resolves serial number options from embeddable config", () => {
     expect(resolveTableSerialNumberProps({ serialNumber: true }, 21)).toEqual({
       showSerialNumber: true,

__tests__/components/Tooltip.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Tooltip } from "../../src/components/Tooltip";
+
+describe("Tooltip", () => {
+    it("applies aria-describedby to the interactive child", () => {
+        render(
+            <Tooltip content="Helpful details">
+                <button type="button" aria-describedby="existing-description">
+                    Hover me
+                </button>
+            </Tooltip>,
+        );
+
+        const trigger = screen.getByRole("button", { name: "Hover me" });
+        const tooltip = screen.getByRole("tooltip", { name: "Helpful details" });
+
+        expect(trigger.getAttribute("aria-describedby")).toContain("existing-description");
+        expect(trigger.getAttribute("aria-describedby")).toContain(tooltip.id);
+        expect(trigger.parentElement?.getAttribute("aria-describedby")).toBeNull();
+    });
+});