jazz-tools 0.18.31 → 0.18.33

package/src/inspector/tests/viewer/history-view.test.tsx

@@ -0,0 +1,246 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createJazzTestAccount, setupJazzTestSync } from "jazz-tools/testing";
+import { co, z } from "jazz-tools";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { HistoryView } from "../../viewer/history-view";
+import { setup } from "goober";
+import React from "react";
+
+function extractAction(row: HTMLElement | null | undefined) {
+  if (!row) return "";
+  // index 0: author, index 1: action, index 2: timestamp
+  return row.querySelectorAll("td")?.[1]?.textContent ?? "";
+}
+
+function extractActions(): string[] {
+  // slice 2 to skip header and filters
+  return screen.getAllByRole("row").slice(2).map(extractAction);
+}
+
+describe("HistoryView", async () => {
+  const account = await setupJazzTestSync();
+  const account2 = await createJazzTestAccount();
+
+  beforeAll(() => {
+    // setup goober
+    setup(React.createElement);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render a history card", async () => {
+    const value = co
+      .map({
+        foo: z.string(),
+      })
+      .create({ foo: "bar" }, account);
+
+    render(
+      <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+    );
+
+    expect(
+      screen.getAllByText('Property "foo" has been set to "bar"'),
+    ).toHaveLength(1);
+  });
+
+  describe("co.map", () => {
+    it("should render co.map changes", async () => {
+      const value = co
+        .map({
+          pet: z.string(),
+          age: z.number(),
+          certified: z.boolean().optional(),
+        })
+        .create({ pet: "dog", age: 10, certified: false }, account);
+
+      value.$jazz.set("pet", "cat");
+      value.$jazz.set("age", 20);
+      value.$jazz.set("certified", true);
+      value.$jazz.delete("certified");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        'Property "pet" has been set to "dog"',
+        'Property "age" has been set to "10"',
+        'Property "certified" has been set to "false"',
+        'Property "pet" has been set to "cat"',
+        'Property "age" has been set to "20"',
+        'Property "certified" has been set to "true"',
+        'Property "certified" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(screen.getAllByRole("row")).toHaveLength(history.length + 2);
+
+      await waitFor(() => {
+        expect(screen.getAllByRole("row")[2]?.textContent).toContain(
+          account.$jazz.id,
+        );
+      });
+
+      expect(extractActions()).toEqual(history);
+    });
+  });
+
+  describe("co.list", () => {
+    it("should render simple co.list changes", async () => {
+      const value = co.list(z.string()).create(["dog", "cat"], account);
+
+      value.$jazz.push("bird");
+
+      value.$jazz.splice(1, 0, "fish");
+
+      value.$jazz.shift();
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"dog" has been appended',
+        '"cat" has been appended',
+        '"bird" has been inserted after "cat"',
+        '"fish" has been inserted after "dog"',
+        '"dog" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render changes of a co.list of co.maps", async () => {
+      const Animal = co.map({
+        pet: z.string(),
+        age: z.number(),
+        certified: z.boolean(),
+      });
+
+      const dog = Animal.create(
+        { pet: "dog", age: 10, certified: false },
+        account,
+      );
+      const cat = Animal.create(
+        { pet: "cat", age: 20, certified: true },
+        account,
+      );
+      const fish = Animal.create(
+        { pet: "fish", age: 30, certified: false },
+        account,
+      );
+      const bird = Animal.create(
+        { pet: "bird", age: 40, certified: true },
+        account,
+      );
+
+      const value = co.list(Animal).create([dog, cat], account);
+
+      value.$jazz.push(bird);
+
+      value.$jazz.splice(1, 0, fish);
+
+      value.$jazz.shift();
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        `"${dog.$jazz.id}" has been appended`,
+        `"${cat.$jazz.id}" has been appended`,
+        `"${bird.$jazz.id}" has been inserted after "${cat.$jazz.id}"`,
+        `"${fish.$jazz.id}" has been inserted after "${dog.$jazz.id}"`,
+        `"${dog.$jazz.id}" has been deleted`,
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+  });
+
+  describe("co.group", () => {
+    it("should render co.group changes", async () => {
+      const group = co.group().create(account);
+
+      const group2 = co.group().create(account);
+
+      group.addMember(group2, "writer");
+
+      group.addMember(account2, "reader");
+      group.removeMember(account2);
+
+      const group3 = co.group().create(account);
+      group3.addMember(group, "inherit");
+
+      const { container } = render(
+        <HistoryView coValue={group.$jazz.raw} node={group.$jazz.localNode} />,
+      );
+
+      const history = [
+        `${account.$jazz.id} has been promoted to admin`,
+        expect.stringContaining(` has been revealed to `), // key revelation
+        expect.stringContaining('Property "readKey" has been set to'),
+        `Group ${group2.$jazz.id} has been promoted to writer`,
+        expect.stringContaining(" has been revealed to"),
+        `${account2.$jazz.id} has been promoted to reader`,
+        expect.stringContaining(" has been revealed to"),
+        // Member revocation: key rotation
+        expect.stringContaining(" has been revealed to"),
+        expect.stringContaining(" has been revealed to"),
+        expect.stringContaining('Property "readKey" has been set to'),
+        expect.stringContaining(" has been revealed to"),
+        `${account2.$jazz.id} has been revoked`,
+
+        // Group extension
+        // `Group become a member of ${group3.$jazz.id}`,
+      ].toReversed(); // Default sort is descending
+
+      const historyPage1 = history.slice(0, 10);
+      const historyPage2 = history.slice(10, 20);
+
+      // Page 1: 10 rows
+      expect(extractActions()).toEqual(historyPage1);
+
+      // Go to page 2
+      fireEvent.click(screen.getByText("»"));
+
+      // Page 2: 3 rows
+      expect(extractActions()).toEqual(historyPage2);
+    });
+  });
+
+  describe("co.account", () => {
+    it("should render co.account changes", async () => {
+      const account = await createJazzTestAccount({
+        creationProps: {
+          name: "John Doe",
+        },
+      });
+
+      const history = [
+        expect.stringContaining(' has been set to "admin"'),
+        expect.stringContaining(" has been revealed to "),
+        expect.stringContaining('Property "readKey" has been set to '),
+        `Property "profile" has been set to "${account.profile!.$jazz.id}"`,
+      ].toReversed(); // Default sort is descending
+
+      render(
+        <HistoryView
+          coValue={account.$jazz.raw}
+          node={account.$jazz.localNode}
+        />,
+      );
+
+      expect(extractActions()).toEqual(history);
+    });
+  });
+});

package/src/inspector/ui/data-table.tsx

@@ -0,0 +1,265 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+import { Button } from "./button";
+import { Input } from "./input";
+
+export type ColumnDef<T> = {
+  id: string;
+  header: string;
+  accessor: (row: T) => React.ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+  sortFn?: (a: T, b: T) => number;
+  filterFn?: (row: T, filterValue: string) => boolean;
+};
+
+export type SortConfig = {
+  columnId: string;
+  direction: "asc" | "desc";
+} | null;
+
+export type DataTableProps<T> = {
+  columns: ColumnDef<T>[];
+  data: T[];
+  pageSize?: number;
+  initialSort?: SortConfig;
+  getRowKey: (row: T, index: number) => string;
+  emptyMessage?: string;
+};
+
+export function DataTable<T>({
+  columns,
+  data,
+  pageSize = 10,
+  initialSort = null,
+  getRowKey,
+  emptyMessage = "No data available",
+}: DataTableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortConfig, setSortConfig] = useState<SortConfig>(initialSort);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+
+  // Apply filtering
+  const filteredData = useMemo(() => {
+    return data.filter((row) => {
+      return Object.entries(filters).every(([columnId, filterValue]) => {
+        if (!filterValue) return true;
+
+        const column = columns.find((col) => col.id === columnId);
+        if (!column?.filterable) return true;
+
+        if (column.filterFn) {
+          return column.filterFn(row, filterValue);
+        }
+
+        // Default filter: convert to string and check inclusion
+        const cellValue = String(column.accessor(row));
+        return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+      });
+    });
+  }, [data, filters, columns]);
+
+  // Apply sorting
+  const sortedData = useMemo(() => {
+    if (!sortConfig) return filteredData;
+
+    const column = columns.find((col) => col.id === sortConfig.columnId);
+    if (!column?.sortable) return filteredData;
+
+    const sorted = [...filteredData].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b);
+      }
+
+      // Default sort: compare string values
+      const aValue = String(column.accessor(a));
+      const bValue = String(column.accessor(b));
+      return aValue.localeCompare(bValue);
+    });
+
+    return sortConfig.direction === "desc" ? sorted.reverse() : sorted;
+  }, [filteredData, sortConfig, columns]);
+
+  // Calculate pagination
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const showPagination = sortedData.length > pageSize;
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedData = sortedData.slice(startIndex, endIndex);
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters]);
+
+  const handleSort = (columnId: string) => {
+    const column = columns.find((col) => col.id === columnId);
+    if (!column?.sortable) return;
+
+    setSortConfig((current) => {
+      if (current?.columnId === columnId) {
+        if (current.direction === "asc") {
+          return { columnId, direction: "desc" };
+        }
+        return null; // Remove sorting
+      }
+      return { columnId, direction: "asc" };
+    });
+  };
+
+  const handleFilterChange = (columnId: string, value: string) => {
+    setFilters((current) => ({
+      ...current,
+      [columnId]: value,
+    }));
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHeader key={column.id}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    cursor: column.sortable ? "pointer" : "default",
+                  }}
+                  onClick={() => handleSort(column.id)}
+                >
+                  <span>{column.header}</span>
+                  {column.sortable && (
+                    <span
+                      style={{
+                        fontSize: "12px",
+                        opacity: 0.7,
+                      }}
+                    >
+                      {sortConfig?.columnId === column.id
+                        ? sortConfig.direction === "asc"
+                          ? "↑"
+                          : "↓"
+                        : "↕"}
+                    </span>
+                  )}
+                </div>
+              </TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {columns.some((column) => column.filterable) && (
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell key={column.id}>
+                  {column.filterable && (
+                    <Input
+                      label="Filter"
+                      hideLabel
+                      type="search"
+                      placeholder={`Filter ${column.header.toLowerCase()}`}
+                      value={filters[column.id] || ""}
+                      onChange={(e) =>
+                        handleFilterChange(column.id, e.target.value)
+                      }
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          )}
+          {paginatedData.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={columns.length}>
+                <div
+                  style={{
+                    textAlign: "center",
+                    padding: "20px",
+                    opacity: 0.6,
+                  }}
+                >
+                  {emptyMessage}
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : (
+            paginatedData.map((row, index) => (
+              <TableRow key={getRowKey(row, startIndex + index)}>
+                {columns.map((column) => (
+                  <TableCell key={column.id}>{column.accessor(row)}</TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+
+      {showPagination && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginTop: "16px",
+            padding: "8px 0",
+          }}
+        >
+          <div style={{ fontSize: "14px", opacity: 0.7 }}>
+            Showing {startIndex + 1} to {Math.min(endIndex, sortedData.length)}{" "}
+            of {sortedData.length} entries
+            {Object.keys(filters).some((key) => filters[key]) &&
+              ` (filtered from ${data.length})`}
+          </div>
+          <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+            <Button
+              variant="secondary"
+              onClick={() => handlePageChange(1)}
+              disabled={currentPage === 1}
+            >
+              ««
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => handlePageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+            >
+              «
+            </Button>
+            <span style={{ fontSize: "14px" }}>
+              Page {currentPage} of {totalPages}
+            </span>
+            <Button
+              variant="secondary"
+              onClick={() => handlePageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+            >
+              »
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => handlePageChange(totalPages)}
+              disabled={currentPage === totalPages}
+            >
+              »»
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/inspector/ui/index.ts

@@ -3,3 +3,4 @@ export { Icon } from "./icon.js";
 export { Modal } from "./modal.js";
 export { Input } from "./input.js";
 export { Select } from "./select.js";
+export { DataTable } from "./data-table.js";