jazz-tools 0.19.0 → 0.19.2

package/src/inspector/utils/history.ts

@@ -0,0 +1,49 @@
+import type { JsonObject, JsonValue, RawCoMap, Role } from "cojson";
+import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+
+export function restoreCoMapToTimestamp(
+  coValue: RawCoMap,
+  timestamp: number,
+  removeUnknownProperties: boolean,
+): void {
+  const myRole = coValue.group.myRole();
+
+  if (
+    myRole === undefined ||
+    !(["admin", "manager", "writer", "writerOnly"] as Role[]).includes(myRole)
+  ) {
+    return;
+  }
+
+  const newCoValue = coValue.atTime(timestamp).toJSON() as JsonObject | null;
+  const oldCoValue = coValue.toJSON() as JsonObject;
+
+  if (newCoValue === null) return;
+
+  let changes: MapOpPayload<string, JsonValue | undefined>[] = [];
+
+  if (removeUnknownProperties) {
+    for (const key in oldCoValue) {
+      if (!(key in newCoValue)) {
+        changes.push({
+          op: "del",
+          key,
+        });
+      }
+    }
+  }
+
+  for (const key in newCoValue) {
+    if (newCoValue[key] !== oldCoValue[key]) {
+      changes.push({
+        op: "set",
+        key,
+        value: newCoValue[key],
+      });
+    }
+  }
+
+  if (changes.length > 0) {
+    coValue.core.makeTransaction(changes, "private");
+  }
+}

package/src/inspector/utils/transactions-changes.ts

@@ -0,0 +1,98 @@
+import type {
+  AccountRole,
+  BinaryStreamStart,
+  CoID,
+  RawCoValue,
+  Role,
+} from "cojson";
+import type { ListOpPayload } from "cojson/dist/coValues/coList.js";
+import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+import type {
+  BinaryStreamChunk,
+  BinaryStreamEnd,
+} from "cojson/dist/coValues/coStream.js";
+import { isCoId } from "../viewer/types";
+
+export const isGroupExtension = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "extend">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "extend";
+};
+
+export const isGroupExtendRevocation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "revoked">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "revoked";
+};
+
+export const isGroupPromotion = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`parent_co_${string}`, AccountRole>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.startsWith("parent_co_");
+};
+
+export const isUserPromotion = (
+  change: any,
+): change is Extract<MapOpPayload<CoID<RawCoValue>, Role>, { op: "set" }> => {
+  return (
+    change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone")
+  );
+};
+
+export const isKeyRevelation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`${string}_for_${string}`, string>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.includes("_for_");
+};
+
+export const isPropertySet = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "set" }> => {
+  return change?.op === "set" && "key" in change && "value" in change;
+};
+export const isPropertyDeletion = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "del" }> => {
+  return change?.op === "del" && "key" in change;
+};
+
+export const isItemAppend = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "app" }> => {
+  return change?.op === "app" && "after" in change && "value" in change;
+};
+export const isItemPrepend = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "pre" }> => {
+  return change?.op === "pre" && "before" in change && "value" in change;
+};
+
+export const isItemDeletion = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "del" }> => {
+  return change?.op === "del" && "insertion" in change;
+};
+
+export const isStreamStart = (change: any): change is BinaryStreamStart => {
+  return change?.type === "start" && "mimeType" in change;
+};
+
+export const isStreamChunk = (change: any): change is BinaryStreamChunk => {
+  return change?.type === "chunk" && "chunk" in change;
+};
+
+export const isStreamEnd = (change: any): change is BinaryStreamEnd => {
+  return change?.type === "end";
+};

package/src/inspector/viewer/co-map-view.tsx

@@ -0,0 +1,312 @@
+import { JsonObject, LocalNode, RawCoMap } from "cojson";
+import { PageInfo } from "./types";
+import { GridView } from "./grid-view.js";
+import { useState, useMemo } from "react";
+import { Button, Icon, Input, Modal } from "../ui";
+import { styled } from "goober";
+import { restoreCoMapToTimestamp } from "../utils/history";
+import { CoValueEditor } from "./co-value-editor.js";
+
+export function CoMapView({
+  coValue,
+  data,
+  node,
+  onNavigate,
+}: {
+  coValue: RawCoMap;
+  data: JsonObject;
+  node: LocalNode;
+  onNavigate: (pages: PageInfo[]) => void;
+}) {
+  return (
+    <>
+      <GridView
+        data={data}
+        onNavigate={onNavigate}
+        node={node}
+        coValue={coValue}
+      />
+      <div>
+        <AddPropertyModal coValue={coValue} node={node} />{" "}
+        <RestoreSnapshotModal coValue={coValue} />
+      </div>
+    </>
+  );
+}
+
+function AddPropertyModal({
+  coValue,
+  node,
+}: {
+  coValue: RawCoMap;
+  node: LocalNode;
+}) {
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState(false);
+  const [propertyName, setPropertyName] = useState("");
+
+  const openAddPropertyModal = () => {
+    setIsAddPropertyModalOpen(true);
+    setPropertyName("");
+  };
+
+  const handleCancel = () => {
+    setIsAddPropertyModalOpen(false);
+    setPropertyName("");
+  };
+
+  return (
+    <>
+      <Button
+        title="Add Property"
+        variant="secondary"
+        onClick={openAddPropertyModal}
+      >
+        <Icon name="edit" />
+      </Button>
+
+      <Modal
+        isOpen={isAddPropertyModalOpen}
+        onClose={handleCancel}
+        heading="Add Property"
+        showButtons={false}
+      >
+        <Input
+          label="Property Name"
+          value={propertyName}
+          onChange={(e) => setPropertyName(e.target.value)}
+          placeholder="Enter property name"
+        />
+        {propertyName && (
+          <EditorContainer>
+            <CoValueEditor
+              node={node}
+              property={propertyName}
+              value={undefined}
+              coValue={coValue}
+              onCancel={handleCancel}
+            />
+          </EditorContainer>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+function RestoreSnapshotModal({ coValue }: { coValue: RawCoMap }) {
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = useState(false);
+
+  const timestamps = useMemo(
+    () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
+    [coValue.core.verifiedTransactions.length],
+  );
+
+  const coMapAtSelectedIndex = useMemo(() => {
+    if (selectedIndex === -1) return null;
+    return coValue.atTime(timestamps[selectedIndex]!).toJSON() as JsonObject;
+  }, [coValue, timestamps, selectedIndex]);
+
+  const openRestoreModal = () => {
+    setIsRestoreModalOpen(true);
+    setSelectedIndex(timestamps.length - 1);
+  };
+
+  const handleRestore = () => {
+    if (timestamps.length < 2) return;
+    if (timestamps.length === 0) return;
+
+    const selectedTimestamp = timestamps[selectedIndex];
+    if (selectedTimestamp === undefined) return;
+
+    restoreCoMapToTimestamp(
+      coValue,
+      selectedTimestamp,
+      removeUnknownProperties,
+    );
+
+    setIsRestoreModalOpen(false);
+  };
+
+  const handleClose = () => {
+    setIsRestoreModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button title="Timeline" variant="secondary" onClick={openRestoreModal}>
+        <Icon name="history" />
+      </Button>
+
+      <Modal
+        isOpen={isRestoreModalOpen}
+        onClose={handleClose}
+        heading="Timeline"
+        confirmText="Restore"
+        cancelText="Cancel"
+        onConfirm={handleRestore}
+        onCancel={handleClose}
+        showButtons={timestamps.length > 1}
+      >
+        {timestamps.length > 1 && (
+          <>
+            <RangeContainer>
+              <RangeLabel>Select Timestamp</RangeLabel>
+              <RangeInput
+                type="range"
+                min={0}
+                max={Math.max(0, timestamps.length - 1)}
+                value={selectedIndex}
+                onChange={(e) => setSelectedIndex(Number(e.target.value))}
+                disabled={timestamps.length === 0}
+              />
+              <TimestampDisplay>
+                {timestamps[selectedIndex] !== undefined
+                  ? new Date(timestamps[selectedIndex]!).toISOString()
+                  : "No timestamps available"}
+              </TimestampDisplay>
+            </RangeContainer>
+
+            <CheckboxContainer>
+              <CheckboxInput
+                type="checkbox"
+                id="remove-unknown-properties"
+                checked={removeUnknownProperties}
+                onChange={(e) => setRemoveUnknownProperties(e.target.checked)}
+              />
+              <CheckboxLabel htmlFor="remove-unknown-properties">
+                Remove unknown properties (properties that don't exist in the
+                selected snapshot)
+              </CheckboxLabel>
+            </CheckboxContainer>
+          </>
+        )}
+
+        {timestamps.length > 0 && timestamps[selectedIndex] !== undefined && (
+          <PreviewSection>
+            <PreviewLabel>State at that time:</PreviewLabel>
+            <PreviewPre>
+              {JSON.stringify(coMapAtSelectedIndex, null, 2)}
+            </PreviewPre>
+          </PreviewSection>
+        )}
+
+        {timestamps.length < 2 && (
+          <div style={{ color: "var(--j-text-color)" }}>
+            At least 2 timestamps are required to restore a snapshot.
+          </div>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+const PreviewSection = styled("div")`
+  margin-top: 1.5rem;
+`;
+
+const PreviewLabel = styled("div")`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--j-text-color-strong);
+`;
+
+const PreviewPre = styled("pre")`
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--j-text-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+
+const RangeContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const RangeLabel = styled("label")`
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  font-size: 0.875rem;
+`;
+
+const RangeInput = styled("input")`
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--j-radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--j-foreground);
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const TimestampDisplay = styled("div")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  padding: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  text-align: center;
+`;
+
+const CheckboxContainer = styled("div")`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1rem;
+`;
+
+const CheckboxInput = styled("input")`
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--j-primary-color);
+`;
+
+const CheckboxLabel = styled("label")`
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  cursor: pointer;
+  line-height: 1.25rem;
+`;
+
+const EditorContainer = styled("div")`
+  margin-top: 1rem;
+`;

package/src/inspector/viewer/co-value-editor.tsx

@@ -0,0 +1,164 @@
+import { LocalNode, RawCoValue } from "cojson";
+import { JsonValue } from "cojson";
+import { useState } from "react";
+import { styled } from "goober";
+import { Button } from "../ui/button.js";
+import { Select } from "../ui/select.js";
+
+type ValueType =
+  | "number"
+  | "string"
+  | "true"
+  | "false"
+  | "object"
+  | "null"
+  | "undefined";
+
+export function CoValueEditor({
+  node,
+  property,
+  value,
+  coValue,
+  onCancel,
+}: {
+  node: LocalNode;
+  property: string;
+  value: JsonValue | undefined;
+  coValue: RawCoValue;
+  onCancel: () => void;
+}) {
+  const getInitialType = (): ValueType => {
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") return "string";
+    if (typeof value === "boolean") return value ? "true" : "false";
+    if (typeof value === "object") return "object";
+    return "undefined";
+  };
+
+  const [selectedType, setSelectedType] = useState<ValueType>(getInitialType());
+  const [editValue, setEditValue] = useState(
+    value === undefined || value === null
+      ? ""
+      : typeof value === "object"
+        ? JSON.stringify(value, null, 2)
+        : String(value),
+  );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let newValue;
+    switch (selectedType) {
+      case "null":
+        newValue = null;
+        break;
+      case "undefined":
+        newValue = undefined;
+        break;
+      case "true":
+        newValue = true;
+        break;
+      case "false":
+        newValue = false;
+        break;
+      case "number":
+        newValue = parseFloat(editValue);
+        break;
+      case "string":
+        newValue = editValue;
+        break;
+      case "object":
+        newValue = JSON.parse(editValue);
+        break;
+      default:
+        throw new Error(`Invalid type: ${selectedType}`);
+    }
+
+    coValue.core.makeTransaction(
+      [
+        {
+          op: "set",
+          key: property,
+          value: newValue,
+        },
+      ],
+      "private",
+    );
+
+    onCancel();
+  };
+
+  const showTextarea =
+    selectedType === "number" ||
+    selectedType === "string" ||
+    selectedType === "object";
+
+  return (
+    <EditForm onSubmit={handleSubmit}>
+      <Select
+        label="Type"
+        value={selectedType}
+        onChange={(e) => {
+          setSelectedType(e.target.value as ValueType);
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <option value="number">number</option>
+        <option value="string">string</option>
+        <option value="true">true</option>
+        <option value="false">false</option>
+        <option value="object">object</option>
+        <option value="null">null</option>
+        <option value="undefined">undefined</option>
+      </Select>
+      {showTextarea && (
+        <StyledTextarea
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      <FormActions>
+        <Button type="button" variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="primary">
+          Submit
+        </Button>
+      </FormActions>
+    </EditForm>
+  );
+}
+
+const EditForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const StyledTextarea = styled("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const FormActions = styled("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;