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.

README.md

@@ -53,11 +53,12 @@ The host app only needs to provide a `config` object.
 - `scope.locked` (optional): keeps the UI inside that bounded slice.
 - `strict` (optional): prevents extra boundary context and uses exact context matching for override lists.
 - `features` (optional): which screens are allowed to render. `[]` renders no feature UI.
-- `capabilities` (optional): per-feature action switches such as create, delete, ramp, and execute.
+- `capabilities` (optional): per-feature action switches for create, update, and delete.
 - `filters.defaultConfigPrefix` (optional): restricts default config keys and override values.
 - `theme` (optional): color, typography, spacing, and radius overrides.
 - `layout` (optional): host-controlled shell, modal, and alert sizing.
 - `ui` (optional): host-owned notifications, confirmation, layering, and boundary-filter controls.
+- `ui.featureControls` (optional): host-owned UI edit toggles for embeddable feature pages.
 - `messages` (optional): host overrides for visible SDK copy.
 
 The embeddable UI currently uses its own fetch-based REST client. It does not call a host-installed Superposition SDK directly. If your host app already talks to Superposition through its own backend or SDK, expose or proxy those REST endpoints from the host and point `apiBaseUrl` at that proxy.
@@ -179,6 +180,10 @@ The embeddable UI currently uses its own fetch-based REST client. It does not ca
   },
   "ui": {
     "showBoundaryFilter": false,
+    "featureControls": {
+      "config": { "editable": true },
+      "dimensions": { "editable": true }
+    },
     "modalZIndex": 1200,
     "alertZIndex": 1200
   },
@@ -211,7 +216,7 @@ strict: true,
 ```
 
 If you leave `scope.context` out, the overrides UI is view-only unless
-`capabilities.overrides.editContext` is enabled. The backend is responsible
+`capabilities.overrides.update` is enabled. The backend is responsible
 for authorizing create and edit actions — if the token lacks permission,
 the backend will reject the request.
 
@@ -226,6 +231,9 @@ the List Contexts API as `dimension[...]` query params; strict mode sends
 `readOnly` is still the fastest way to disable all mutating actions. Use
 `capabilities` when the host needs more precise control.
 
+When a feature appears in `capabilities`, omitted actions default to `false`.
+That makes `capabilities` an explicit allowlist rather than a partial override.
+
 For overrides, create and update actions are controlled by `capabilities`.
 The backend enforces authorization — if the request lacks valid credentials,
 it will be rejected.
@@ -251,6 +259,10 @@ ui: {
     hostModal.render({ title, children, footer, onClose }),
   portalContainer: "#host-overlays",
   showBoundaryFilter: false,
+  featureControls: {
+    config: { editable: true },
+    dimensions: { editable: true },
+  },
 },
 ```
 

__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,8 +56,46 @@ 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");
   });
+
+  it("normalizes missing audit data to an empty page", async () => {
+    const api = auditLogsApi(client);
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      headers: new Headers({ "content-length": "20" }),
+      json: () => Promise.resolve({ total_pages: 0, total_items: 0 }),
+    });
+
+    await expect(api.list()).resolves.toEqual({
+      total_pages: 0,
+      total_items: 0,
+      data: [],
+    });
+  });
+
+  it("returns an empty page when backend reports no audit records", async () => {
+    const api = auditLogsApi(client);
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404,
+      text: () =>
+        Promise.resolve(
+          JSON.stringify({
+            message: "No records found. Please refine or correct your search parameters",
+          }),
+        ),
+    });
+
+    await expect(api.list()).resolves.toEqual({
+      total_pages: 0,
+      total_items: 0,
+      data: [],
+    });
+  });
 });

__tests__/api/resolve.test.ts

@@ -24,17 +24,59 @@ 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?merge_strategy=MERGE");
+    expect(init.method).toBe("POST");
+    expect(init.body).toBe(
+      JSON.stringify({ context: { region: "ap-south-1", city: "blr" } }),
+    );
+  });
+
+  it("calls POST /config/resolve/detailed and normalizes detailed config rows", async () => {
+    const api = resolveApi(client);
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      headers: new Headers({ "content-length": "300" }),
+      json: () =>
+        Promise.resolve({
+          "checkout.title": {
+            value: "Fast Checkout",
+            schema: { type: "string" },
+            description: "Checkout title",
+          },
+        }),
+    });
+
+    await expect(
+      api.resolveDetailed(
+        { region: "ap-south-1" },
+        { prefix: ["checkout."], mergeStrategy: "MERGE" },
+      ),
+    ).resolves.toMatchObject({
+      total_pages: 1,
+      total_items: 1,
+      data: [
+        {
+          key: "checkout.title",
+          value: "Fast Checkout",
+          schema: { type: "string" },
+          description: "Checkout title",
+        },
+      ],
+    });
 
     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/detailed?prefix=checkout.&merge_strategy=MERGE",
     );
-    expect(init.method).toBe("GET");
-    expect(init.body).toBeUndefined();
+    expect(init.method).toBe("POST");
+    expect(init.body).toBe(JSON.stringify({ context: { region: "ap-south-1" } }));
   });
 
   it("calls GET /config for the cached config contract", async () => {
@@ -58,9 +100,7 @@ describe("resolveApi", () => {
     });
 
     const [url, init] = mockFetch.mock.calls[0];
-    expect(url).toBe(
-      "https://superposition.test/config?dimension[region]=ap-south-1",
-    );
+    expect(url).toBe("https://superposition.test/config?dimension[region]=ap-south-1");
     expect(init.method).toBe("GET");
   });
 });

__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;
@@ -30,19 +33,10 @@ describe("Table", () => {
     expect(screen.getByText("25 years")).toBeDefined();
   });
 
-  it("shows empty message when no data", () => {
-    render(
-      <Table
-        columns={columns}
-        data={[]}
-        keyExtractor={(r: Row) => r.id}
-        emptyMessage="Nothing here"
-        emptyDescription="Add a row to populate this table."
-      />,
-    );
-
-    expect(screen.getByText("Nothing here")).toBeDefined();
-    expect(screen.getByText("Add a row to populate this table.")).toBeDefined();
+  it("renders with empty data", () => {
+    expect(() =>
+      render(<Table columns={columns} data={[]} keyExtractor={(r: Row) => r.id} />),
+    ).not.toThrow();
   });
 
   it("shows loading state", () => {
@@ -55,7 +49,7 @@ describe("Table", () => {
       />,
     );
 
-    expect(screen.getByText("Loading...")).toBeDefined();
+    expect(screen.getByText("Loading data...")).toBeDefined();
   });
 
   it("calls onRowClick when row is clicked", () => {
@@ -91,6 +85,115 @@ 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}
+            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,