jazz-tools 0.19.2 → 0.19.4

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

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { afterEach, assert, beforeAll, describe, expect, it } from "vitest";
 import { createJazzTestAccount, setupJazzTestSync } from "jazz-tools/testing";
 import { co, z } from "jazz-tools";
 import {
@@ -578,4 +578,312 @@ describe("CoMapView", async () => {
       });
     });
   });
+
+  describe("Permissions", () => {
+    it("should disable Add Property button for reader account", async () => {
+      const reader = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(reader, "reader");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+
+      const valueOnReader = await schema.load(value.$jazz.id, {
+        loadAs: reader,
+      });
+      assert(valueOnReader.$isLoaded);
+      const data = valueOnReader.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnReader.$jazz.raw}
+          data={data}
+          node={reader.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const addButton = screen.getByTitle("Add Property");
+      expect(addButton).toBeDefined();
+      expect((addButton as HTMLButtonElement).disabled).toBe(true);
+    });
+
+    it("should enable Add Property button for writer account", async () => {
+      const writer = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(writer, "writer");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+
+      const valueOnWriter = await schema.load(value.$jazz.id, {
+        loadAs: writer,
+      });
+      assert(valueOnWriter.$isLoaded);
+      const data = valueOnWriter.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnWriter.$jazz.raw}
+          data={data}
+          node={writer.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const addButton = screen.getByTitle("Add Property");
+      expect(addButton).toBeDefined();
+      expect((addButton as HTMLButtonElement).disabled).toBe(false);
+    });
+
+    it("should hide restore buttons for reader account when multiple timestamps exist", async () => {
+      const reader = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(reader, "reader");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+
+      const valueOnReader = await schema.load(value.$jazz.id, {
+        loadAs: reader,
+      });
+      assert(valueOnReader.$isLoaded);
+      const data = valueOnReader.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnReader.$jazz.raw}
+          data={data}
+          node={reader.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Select Timestamp")).toBeDefined();
+      });
+
+      expect(screen.queryByText("Restore")).toBeNull();
+      expect(screen.queryByRole("checkbox")).toBeNull();
+    });
+
+    it("should show restore buttons for writer account when multiple timestamps exist", async () => {
+      const writer = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(writer, "writer");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+      await sleep(2);
+      value.$jazz.set("pet", "cat");
+
+      const valueOnWriter = await schema.load(value.$jazz.id, {
+        loadAs: writer,
+      });
+      assert(valueOnWriter.$isLoaded);
+      const data = valueOnWriter.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnWriter.$jazz.raw}
+          data={data}
+          node={writer.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const restoreButton = screen.getByTitle("Timeline");
+      fireEvent.click(restoreButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Restore")).toBeDefined();
+      });
+
+      expect(screen.getByRole("checkbox")).toBeDefined();
+    });
+
+    it("should hide edit buttons in GridView for reader account", async () => {
+      const reader = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(reader, "reader");
+
+      const schema = co.map({
+        pet: z.string(),
+        age: z.number(),
+      });
+
+      const value = schema.create({ pet: "dog", age: 10 }, group);
+
+      const valueOnReader = await schema.load(value.$jazz.id, {
+        loadAs: reader,
+      });
+      assert(valueOnReader.$isLoaded);
+      const data = valueOnReader.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnReader.$jazz.raw}
+          data={data}
+          node={reader.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("pet")).toBeDefined();
+      expect(screen.getByText("age")).toBeDefined();
+
+      const editButtons = screen.queryAllByLabelText("Edit");
+      const deleteButtons = screen.queryAllByLabelText("Delete");
+
+      expect(editButtons).toHaveLength(0);
+      expect(deleteButtons).toHaveLength(0);
+    });
+
+    it("should show edit buttons in GridView for writer account", async () => {
+      const writer = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(writer, "writer");
+
+      const schema = co.map({
+        pet: z.string(),
+        age: z.number(),
+      });
+
+      const value = schema.create({ pet: "dog", age: 10 }, group);
+
+      const valueOnWriter = await schema.load(value.$jazz.id, {
+        loadAs: writer,
+      });
+      assert(valueOnWriter.$isLoaded);
+      const data = valueOnWriter.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnWriter.$jazz.raw}
+          data={data}
+          node={writer.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("pet")).toBeDefined();
+      expect(screen.getByText("age")).toBeDefined();
+
+      const editButtons = screen.queryAllByLabelText("Edit");
+      const deleteButtons = screen.queryAllByLabelText("Delete");
+
+      expect(editButtons.length).toBeGreaterThan(0);
+      expect(deleteButtons.length).toBeGreaterThan(0);
+    });
+
+    it("should enable Add Property button for admin account", async () => {
+      const admin = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(admin, "admin");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+
+      const valueOnAdmin = await schema.load(value.$jazz.id, {
+        loadAs: admin,
+      });
+      assert(valueOnAdmin.$isLoaded);
+      const data = valueOnAdmin.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnAdmin.$jazz.raw}
+          data={data}
+          node={admin.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const addButton = screen.getByTitle("Add Property");
+      expect(addButton).toBeDefined();
+      expect((addButton as HTMLButtonElement).disabled).toBe(false);
+    });
+
+    it("should enable Add Property button for manager account", async () => {
+      const manager = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(manager, "manager");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+
+      const valueOnManager = await schema.load(value.$jazz.id, {
+        loadAs: manager,
+      });
+      assert(valueOnManager.$isLoaded);
+      const data = valueOnManager.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnManager.$jazz.raw}
+          data={data}
+          node={manager.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const addButton = screen.getByTitle("Add Property");
+      expect(addButton).toBeDefined();
+      expect((addButton as HTMLButtonElement).disabled).toBe(false);
+    });
+
+    it("should enable Add Property button for writeOnly account", async () => {
+      const writeOnly = await createJazzTestAccount();
+      const group = co.group().create({ owner: account });
+      group.addMember(writeOnly, "writeOnly");
+
+      const schema = co.map({
+        pet: z.string(),
+      });
+
+      const value = schema.create({ pet: "dog" }, group);
+
+      const valueOnWriteOnly = await schema.load(value.$jazz.id, {
+        loadAs: writeOnly,
+      });
+      assert(valueOnWriteOnly.$isLoaded);
+      const data = valueOnWriteOnly.$jazz.raw.toJSON() as JsonObject;
+
+      render(
+        <CoMapView
+          coValue={valueOnWriteOnly.$jazz.raw}
+          data={data}
+          node={writeOnly.$jazz.localNode}
+          onNavigate={() => {}}
+        />,
+      );
+
+      const addButton = screen.getByTitle("Add Property");
+      expect(addButton).toBeDefined();
+      expect((addButton as HTMLButtonElement).disabled).toBe(false);
+    });
+  });
 });

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

@@ -17,6 +17,8 @@ import { HistoryView } from "../../viewer/history-view";
 import { setup } from "goober";
 import React from "react";
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 function extractAction(row: HTMLElement | null | undefined) {
   if (!row) return "";
   // index 0: author, index 1: action, index 2: timestamp
@@ -30,7 +32,6 @@ function extractActions(): string[] {
 
 describe("HistoryView", async () => {
   const account = await setupJazzTestSync();
-  const account2 = await createJazzTestAccount();
 
   beforeAll(() => {
     // setup goober
@@ -270,7 +271,138 @@ describe("HistoryView", async () => {
     });
   });
 
-  describe("co.group", () => {
+  describe("co.plaintext", () => {
+    it("should render co.plaintext initial append in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      expect(extractActions()).toEqual(['"hello" has been appended']);
+    });
+
+    it("should render co.plaintext appends in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("hello world");
+      value.$jazz.applyDiff("hello world!");
+
+      expect(value.$jazz.raw.toString()).toEqual("hello world!");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '" world" has been inserted after "o"',
+        '"!" has been inserted after " "', // it is after " " because previous action is reversed
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete in tail", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("hell");
+
+      expect(value.$jazz.raw.toString()).toEqual("hell");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '"o" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete in head", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("ello");
+
+      expect(value.$jazz.raw.toString()).toEqual("ello");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '"h" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete history of multiple old insertions in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      await sleep(2);
+      value.$jazz.applyDiff("hello world");
+      await sleep(2);
+      value.$jazz.applyDiff("hed");
+
+      expect(value.$jazz.raw.toString()).toEqual("hed");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '" world" has been inserted after "o"',
+        '"lod" has been deleted',
+        '" worl" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext insertBefore in history", async () => {
+      const value = co.plainText().create("world", account);
+      await sleep(2);
+      value.insertBefore(0, "Hello, ");
+
+      expect(value.$jazz.raw.toString()).toEqual("Hello, world");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"world" has been appended',
+        '"H" has been inserted before "w"',
+        '"ello, " has been inserted after "H"',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext insertAfter in history", async () => {
+      const value = co.plainText().create("world", account);
+      await sleep(2);
+      value.insertAfter(0, "Hello, ");
+
+      expect(value.$jazz.raw.toString()).toEqual("wHello, orld");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"world" has been appended',
+        '"Hello, " has been inserted after "w"',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+  });
+
+  describe("co.group", async () => {
+    const account2 = await createJazzTestAccount();
+
     it("should render co.group changes", async () => {
       const group = co.group().create(account);
 

package/src/inspector/utils/history.ts

@@ -1,5 +1,172 @@
-import type { JsonObject, JsonValue, RawCoMap, Role } from "cojson";
+import type {
+  JsonObject,
+  JsonValue,
+  OpID,
+  RawCoMap,
+  RawCoPlainText,
+  RawCoValue,
+  Role,
+} from "cojson";
+import { stringifyOpID } from "cojson";
+import type { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
 import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+import * as TransactionChanges from "./transactions-changes";
+import type {
+  DeletionOpPayload,
+  InsertionOpPayload,
+} from "cojson/dist/coValues/coList.js";
+
+export function areSameOpIds(
+  opId1: OpID | string,
+  opId2: OpID | string,
+): boolean {
+  if (typeof opId1 === "string" || typeof opId2 === "string") {
+    return opId1 === opId2;
+  }
+
+  return (
+    opId1.sessionID === opId2.sessionID &&
+    opId1.txIndex === opId2.txIndex &&
+    opId1.changeIdx === opId2.changeIdx
+  );
+}
+
+export function isCoPlainText(coValue: RawCoValue): coValue is RawCoPlainText {
+  return coValue.type === "coplaintext";
+}
+
+export function getTransactionChanges(
+  tx: VerifiedTransaction,
+  coValue: RawCoValue,
+): JsonValue[] {
+  if (tx.isValid === false && tx.tx.privacy === "private") {
+    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
+    if (!readKey) {
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`,
+      ];
+    }
+
+    return (
+      coValue.core.verified.decryptTransaction(
+        tx.txID.sessionID,
+        tx.txID.txIndex,
+        readKey,
+      ) ?? []
+    );
+  }
+
+  // Trying to collapse multiple changes into a single action in the history
+  if (isCoPlainText(coValue)) {
+    if (tx.changes === undefined || tx.changes.length === 0) return [];
+    const firstChange = tx.changes[0]!;
+
+    if (
+      TransactionChanges.isItemAppend(firstChange) &&
+      tx.changes.every(
+        (c) =>
+          TransactionChanges.isItemAppend(c) &&
+          areSameOpIds(c.after, firstChange.after),
+      )
+    ) {
+      const changes = tx.changes as InsertionOpPayload<string>[];
+      if (firstChange.after !== "start") {
+        changes.reverse();
+      }
+
+      return [
+        {
+          op: "app",
+          value: changes.map((c) => c.value).join(""),
+          after: firstChange.after,
+        },
+      ];
+    }
+
+    if (
+      TransactionChanges.isItemPrepend(firstChange) &&
+      tx.changes.every(
+        (c) =>
+          TransactionChanges.isItemPrepend(c) &&
+          areSameOpIds(c.before, firstChange.before),
+      )
+    ) {
+      const changes = tx.changes as InsertionOpPayload<string>[];
+      if (firstChange.before !== "end") {
+        changes.reverse();
+      }
+
+      return [
+        {
+          op: "pre",
+          value: changes.map((c) => c.value).join(""),
+          before: firstChange.before,
+        },
+      ];
+    }
+
+    if (
+      TransactionChanges.isItemDeletion(firstChange) &&
+      tx.changes.every((c) => TransactionChanges.isItemDeletion(c))
+    ) {
+      const coValueBeforeDeletions = coValue.atTime(tx.madeAt - 1);
+
+      // Verify if the deleted chars are consecutive
+      function changesAreConsecutive(changes: DeletionOpPayload[]): boolean {
+        if (changes.length < 2) return false;
+        const mapping = coValueBeforeDeletions.mapping.idxAfterOpID;
+
+        for (let i = 1; i < changes.length; ++i) {
+          const prevIdx = mapping[stringifyOpID(changes[i - 1]!.insertion)];
+          const currIdx = mapping[stringifyOpID(changes[i]!.insertion)];
+          if (currIdx !== prevIdx && currIdx !== (prevIdx ?? -2) + 1) {
+            return false;
+          }
+        }
+        return true;
+      }
+
+      if (changesAreConsecutive(tx.changes)) {
+        // Group the deletions by insertion.sessionID-txIndex
+        // This is to help the readability of deletions that act on different previous transactions
+        const groupedBySession: Map<string, DeletionOpPayload[]> = new Map();
+        for (const change of tx.changes) {
+          const group = `${change.insertion.sessionID}-${change.insertion.txIndex}`;
+          if (!groupedBySession.has(group)) groupedBySession.set(group, []);
+          groupedBySession.get(group)!.push(change);
+        }
+
+        return Array.from(groupedBySession.values()).map((changes) => {
+          const stringDeleted = changes
+            // order by txIndex and changeIdx
+            .toSorted((a, b) => {
+              if (a.insertion.txIndex === b.insertion.txIndex) {
+                return a.insertion.changeIdx - b.insertion.changeIdx;
+              }
+
+              return a.insertion.txIndex - b.insertion.txIndex;
+            })
+            // extract the single char from the insertions
+            .map((c) =>
+              coValueBeforeDeletions.get(
+                coValueBeforeDeletions.mapping.idxAfterOpID[
+                  stringifyOpID(c.insertion)
+                ]!,
+              ),
+            )
+            .join("");
+
+          return {
+            op: "custom",
+            action: `"${stringDeleted}" has been deleted`,
+          };
+        });
+      }
+    }
+  }
+
+  return tx.changes ?? (tx.tx as any).changes ?? [];
+}
 
 export function restoreCoMapToTimestamp(
   coValue: RawCoMap,

package/src/inspector/utils/permissions.ts

@@ -0,0 +1,10 @@
+import { Role } from "cojson";
+
+export function isWriter(role: Role | undefined): boolean {
+  return (
+    role === "writer" ||
+    role === "admin" ||
+    role === "manager" ||
+    role === "writeOnly"
+  );
+}