@antelopejs/dms 0.7.1 → 0.7.2

package/frontend-vue/tests/drawer-target-direction.test.ts

@@ -0,0 +1,205 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+  watch,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useActionTargets } from "../layers/dms-ui/app/build/composables/actions/useActionTargets";
+import type { ActionTarget } from "../layers/dms-ui/app/composables/table-view/types/action-target";
+
+vi.mock("reka-ui", () => {
+  const passThrough = defineComponent({
+    setup: (_props, { slots }) => () => h("div", slots.default?.()),
+  });
+  return {
+    DialogTitle: passThrough,
+    DialogDescription: passThrough,
+    VisuallyHidden: passThrough,
+  };
+});
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("a drawer action target's direction", () => {
+  const opened: Array<Record<string, unknown>> = [];
+
+  const mountTargets = () => {
+    let targets: ReturnType<typeof useActionTargets> | undefined;
+    app = createApp(
+      defineComponent({
+        setup() {
+          targets = useActionTargets({
+            api: vi.fn() as never,
+            pageId: "page",
+            componentId: "table",
+            handleApiError: vi.fn(),
+          });
+          return () => h("div");
+        },
+      }),
+    );
+    app.mount(host);
+    return targets!;
+  };
+
+  const drawerTarget = (
+    direction?: "right" | "left" | "top" | "bottom",
+  ): ActionTarget => ({
+    type: "drawer",
+    component: { componentName: "Inspector" },
+    ...(direction && { direction }),
+  });
+
+  beforeEach(() => {
+    opened.length = 0;
+    vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+      processApiMessage: (text: string) => text,
+    }));
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+    vi.stubGlobal("useModal", () => ({ open: vi.fn() }));
+    vi.stubGlobal("useDrawer", () => ({
+      open: (options: Record<string, unknown>) => {
+        opened.push(options);
+        return {
+          result: new Promise(() => {}),
+          close: vi.fn(),
+          patch: vi.fn(),
+        };
+      },
+    }));
+    vi.stubGlobal("useExportJob", () => ({ runJob: vi.fn() }));
+    vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn(async () => true) }));
+    vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+    vi.stubGlobal("resolveDmsComponent", () =>
+      defineComponent({ render: () => null }),
+    );
+  });
+
+  it("opens a toolbar or header button's drawer from the edge it names", async () => {
+    const targets = mountTargets();
+    targets.handleCustomButton({
+      label: "Inspect",
+      target: drawerTarget("right"),
+    });
+    await vi.waitFor(() => expect(opened).toHaveLength(1));
+    expect(opened[0]!.direction).toBe("right");
+  });
+
+  it("opens a row action's drawer from the edge it names", async () => {
+    const targets = mountTargets();
+    targets.handleCustomRowAction(
+      { label: "Inspect", target: drawerTarget("left") },
+      { _id: "r1" },
+    );
+    await vi.waitFor(() => expect(opened).toHaveLength(1));
+    expect(opened[0]!.direction).toBe("left");
+  });
+
+  it("leaves the direction to the drawer when the target names none", async () => {
+    const targets = mountTargets();
+    targets.handleCustomButton({ label: "Inspect", target: drawerTarget() });
+    await vi.waitFor(() => expect(opened).toHaveLength(1));
+    expect(opened[0]!.direction).toBe(undefined);
+  });
+});
+
+describe("the drawer container", () => {
+  interface DrawerStubProps {
+    direction?: string;
+    ui?: Record<string, string>;
+  }
+
+  const rendered = reactive<DrawerStubProps>({});
+
+  const mountDrawer = async (props: Record<string, unknown>) => {
+    const { default: DynamicDrawer } = await import(
+      "../layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue"
+    );
+    app = createApp({
+      setup: () => () =>
+        h(DynamicDrawer, {
+          title: "Inspector",
+          containerId: "drawer-1",
+          component: defineComponent({ render: () => null }),
+          ...props,
+        }),
+    });
+    app.component(
+      "UDrawer",
+      defineComponent({
+        props: { direction: String, ui: Object },
+        setup(stubProps, { slots }) {
+          return () => {
+            Object.assign(rendered, stubProps);
+            return h("div", [slots.header?.(), slots.body?.()]);
+          };
+        },
+      }),
+    );
+    app.component(
+      "UContainer",
+      defineComponent({
+        setup: (_props, { slots }) => () =>
+          h("div", { "data-container": "" }, slots.default?.()),
+      }),
+    );
+    app.component("UButton", () => h("button"));
+    app.component("USkeleton", () => h("span"));
+    app.mount(host);
+    await nextTick();
+  };
+
+  beforeEach(() => {
+    rendered.direction = undefined;
+    rendered.ui = undefined;
+    vi.stubGlobal("ref", ref);
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("watch", watch);
+    vi.stubGlobal("provide", provide);
+    vi.stubGlobal("useLeaveGuard", () => ({
+      executeGuards: async () => true,
+      clearGuards: vi.fn(),
+    }));
+    vi.stubGlobal("useDmsRoute", () => reactive({ path: "/" }));
+  });
+
+  it("slides in from the bottom, full width, by default", async () => {
+    await mountDrawer({});
+    expect(rendered.direction).toBe("bottom");
+    expect(rendered.ui?.content).toBe(undefined);
+    const containers = host.querySelectorAll("[data-container]");
+    expect(containers[0]!.className).toContain("max-sm:px-0");
+    expect(containers[0]!.className).not.toContain("lg:px-0");
+  });
+
+  it("is a side sheet as wide as a side panel from the right", async () => {
+    await mountDrawer({ direction: "right" });
+    expect(rendered.direction).toBe("right");
+    expect(rendered.ui?.content).toBe("w-[440px]");
+    const containers = host.querySelectorAll("[data-container]");
+    expect(containers[0]!.className).toContain("px-0 sm:px-0 lg:px-0");
+  });
+});

package/frontend-vue/tests/empty-state-late-slots.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { createApp, defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import EmptyState from "../layers/dms-ui/app/components/empty-state/EmptyState.vue";
+
+vi.mock("../layers/dms-ui/app/components/icon-well/IconWell.vue", () => ({
+  default: { render: () => null },
+}));
+
+let app: App | undefined;
+
+function mountWithLateSlots() {
+  const shown = ref(false);
+  app = createApp({
+    render: () =>
+      h(
+        EmptyState,
+        { title: "No tables" },
+        shown.value
+          ? {
+              default: () => "Create one to start.",
+              actions: () => h("a", { href: "/new" }, "New table"),
+            }
+          : {},
+      ),
+  });
+  app.component("UButton", defineComponent({ setup: () => () => h("button") }));
+  const container = document.createElement("div");
+  app.mount(container);
+  return { container, shown };
+}
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+});
+
+describe("empty state slots", () => {
+  it("shows an actions slot the parent adds after the first render", async () => {
+    const { container, shown } = mountWithLateSlots();
+    expect(container.querySelector("a")).toBeNull();
+
+    shown.value = true;
+    await nextTick();
+    expect(container.querySelector("a")?.textContent).toBe("New table");
+    expect(container.textContent).toContain("Create one to start.");
+
+    shown.value = false;
+    await nextTick();
+    expect(container.querySelector("a")).toBeNull();
+    expect(container.textContent).not.toContain("Create one to start.");
+  });
+});

package/frontend-vue/tests/flow-canvas-delete-badge.test.ts

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { createApp, h, type App } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import FlowCanvas from "../layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue";
+
+vi.mock("@vue-flow/core", async () => {
+  const vue = await import("vue");
+  const selectedNodes = vue.ref([
+    {
+      id: "users",
+      computedPosition: { x: 10, y: 20 },
+      dimensions: { width: 100, height: 40 },
+    },
+  ]);
+  const Slotted = vue.defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        vue.h("div", slots.default?.()),
+  });
+  return {
+    VueFlow: Slotted,
+    Panel: Slotted,
+    PanelPosition: {
+      TopLeft: "top-left",
+      TopCenter: "top-center",
+      TopRight: "top-right",
+      BottomLeft: "bottom-left",
+      BottomCenter: "bottom-center",
+      BottomRight: "bottom-right",
+    },
+    useVueFlow: () => ({
+      viewport: vue.ref({ x: 0, y: 0, zoom: 1 }),
+      getSelectedNodes: selectedNodes,
+      zoomTo: () => undefined,
+    }),
+  };
+});
+
+vi.mock("@vue-flow/background", () => ({
+  Background: { render: () => null },
+}));
+vi.mock("@vue-flow/controls", () => ({
+  Controls: { render: () => null },
+  ControlButton: { render: () => null },
+}));
+vi.mock("@vue-flow/minimap", () => ({ MiniMap: { render: () => null } }));
+
+let app: App | undefined;
+
+function mountCanvas(props: Record<string, unknown>) {
+  const deleted: string[][] = [];
+  app = createApp({
+    render: () =>
+      h(FlowCanvas, {
+        deletableNodes: true,
+        ...props,
+        onDeleteNodes: (ids: string[]) => deleted.push(ids),
+      }),
+  });
+  const container = document.createElement("div");
+  app.mount(container);
+  return { root: container.firstElementChild as HTMLElement, deleted };
+}
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+});
+
+const BADGE = ".dms-flow-canvas__delete-button";
+
+describe("flow canvas delete badge", () => {
+  it("draws a delete badge on a selected node by default", () => {
+    const { root, deleted } = mountCanvas({});
+    const badge = root.querySelector<HTMLButtonElement>(BADGE);
+    expect(badge).not.toBeNull();
+    badge!.click();
+    expect(deleted).toEqual([["users"]]);
+  });
+
+  it("hides the badge on request and keeps keyboard deletion", () => {
+    const { root, deleted } = mountCanvas({ deleteBadge: false });
+    expect(root.querySelector(BADGE)).toBeNull();
+    root.dispatchEvent(new KeyboardEvent("keydown", { key: "Delete" }));
+    expect(deleted).toEqual([["users"]]);
+  });
+});

package/frontend-vue/tests/form-redirect-placeholders.test.ts

@@ -35,6 +35,17 @@ describe("page-mode form redirect", () => {
     ).toEqual({ path: "/workspaces/ws-42" });
   });
 
+  // The page path the router hands over is already percent-encoded: the path
+  // sent back is the one the page was reached at.
+  it("sends back an encoded page path as it was", () => {
+    expect(
+      resolveFormSuccessTarget(
+        EDIT_REDIRECT,
+        routeOf(EDIT_PATTERN, "/workspaces/ws%2042/invoiceTable/inv-7/edit"),
+      ),
+    ).toEqual({ path: "/workspaces/ws%2042" });
+  });
+
   it("carries back the declared query params only", () => {
     expect(
       resolveFormSuccessTarget(

package/frontend-vue/tests/key-value-list-copy.test.ts

@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+/**
+ * A KeyValueList row with `copy` draws a copy button next to its value, from
+ * static items as from the items a `fetchUrl` answers; `copyValue` copies
+ * another text than the one shown.
+ */
+import { createApp, defineComponent, h, reactive, ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: { en: { dms: { button: { copy: "Copy", copied: "Copied" } } } },
+});
+
+const copied: string[] = [];
+
+// jsdom has no clipboard: the button's copy lands in `copied` instead.
+vi.mock("@vueuse/core", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@vueuse/core")>()),
+  useClipboard: () => ({
+    copy: async (text: string) => {
+      copied.push(text);
+    },
+    copied: ref(false),
+  }),
+}));
+
+let fetchedItems: unknown[] = [];
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => ({ items: fetchedItems }),
+}));
+vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+
+const KeyValueListBlock = (
+  await import("../layers/dms-ui/app/components/blocks/KeyValueListBlock.vue")
+).default;
+
+const SETTLE_MS = 50;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+const mounted: Array<{ unmount: () => void }> = [];
+
+function render(props: Record<string, unknown>): HTMLElement {
+  const root = document.createElement("div");
+  const app = createApp(KeyValueListBlock, { card: false, ...props });
+  app.component("UIcon", defineComponent({ render: () => h("i") }));
+  app.component("USkeleton", defineComponent({ render: () => h("span") }));
+  app.mount(root);
+  mounted.push(app);
+  return root;
+}
+
+function copyButtons(root: HTMLElement): HTMLButtonElement[] {
+  return [...root.querySelectorAll<HTMLButtonElement>("button[title]")];
+}
+
+beforeEach(() => {
+  fetchedItems = [];
+  copied.splice(0);
+  vi.stubGlobal("useI18n", () => ({
+    t: i18n.global.t,
+    locale: i18n.global.locale,
+  }));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("KeyValueList copy button", () => {
+  it("copies the shown value of a row that asks for it, and only those", async () => {
+    const root = render({
+      items: [
+        { label: "Endpoint", value: "https://api.example.com", copy: true },
+        { label: "Plan", value: "Business" },
+        { label: "Token", value: null, copy: true },
+      ],
+    });
+
+    const buttons = copyButtons(root);
+    expect(buttons).toHaveLength(1);
+    buttons[0]!.click();
+    await settle();
+    expect(copied).toEqual(["https://api.example.com"]);
+  });
+
+  it("copies copyValue rather than the shown text, from fetched items", async () => {
+    fetchedItems = [
+      {
+        label: "Thumbnail",
+        value: "thumb.webp",
+        copyValue: "https://cdn.example.com/media/42/thumb.webp",
+      },
+    ];
+    const root = render({ fetchUrl: "/api/media/42/urls" });
+    await settle();
+
+    copyButtons(root)[0]!.click();
+    await settle();
+    expect(copied).toEqual(["https://cdn.example.com/media/42/thumb.webp"]);
+  });
+});

package/frontend-vue/tests/master-detail-layout.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it } from "vitest";
+import { type App, createApp, h, nextTick } from "vue";
+
+const ITEMS = [
+  { value: "a", label: "Alpha" },
+  { value: "b", label: "Beta" },
+];
+// The former `lg` viewport breakpoint, now read off the component's own width.
+const SIDE_BY_SIDE_COLUMNS = "@5xl:grid-cols-[380px_minmax(0,1fr)]";
+const VIEWPORT_VARIANT = /(?:^|\s)(?:sm|md|lg|xl|2xl):/;
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount() {
+  const { default: MasterDetail } = await import(
+    "../layers/dms-ui/app/components/master-detail/MasterDetail.vue"
+  );
+  app = createApp({
+    setup: () => () =>
+      h(
+        MasterDetail,
+        { items: ITEMS, modelValue: "a" },
+        { default: () => h("p", "detail") },
+      ),
+  });
+  app.component("UIcon", () => h("i"));
+  app.mount(host);
+  await nextTick();
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+});
+
+it("lays the panes out from its own width, not the viewport's", async () => {
+  await mount();
+  const container = host.firstElementChild as HTMLElement;
+  const grid = container.firstElementChild as HTMLElement;
+  expect(container.classList).toContain("@container");
+  expect(grid.classList).toContain("grid-cols-1");
+  expect(grid.classList).toContain(SIDE_BY_SIDE_COLUMNS);
+  for (const element of host.querySelectorAll("*")) {
+    expect(element.getAttribute("class") ?? "").not.toMatch(VIEWPORT_VARIANT);
+  }
+});

package/frontend-vue/tests/mono-cell-truncate.test.ts

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import MonoCell from "../layers/dms-ui/app/build/components/table/MonoCell.vue";
+
+const ButtonStub = defineComponent({
+  setup: () => () => h("button"),
+});
+
+let app: App | undefined;
+
+function mountCell(copy: boolean) {
+  app = createApp({
+    render: () => h(MonoCell, { value: "a-very-long-identifier", copy }),
+  });
+  app.component("UButton", ButtonStub);
+  const container = document.createElement("div");
+  app.mount(container);
+  return container.firstElementChild as HTMLElement;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useToast", () => ({ add: () => undefined }));
+  vi.stubGlobal("Color", { success: "success" });
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("mono cell", () => {
+  it("holds its root to the cell's width so a long value can truncate", () => {
+    const root = mountCell(true);
+    expect(root.classList).toContain("flex");
+    expect(root.classList).not.toContain("inline-flex");
+    expect(root.classList).toContain("max-w-full");
+    expect(root.classList).toContain("min-w-0");
+    const value = root.querySelector("span");
+    expect(value?.classList).toContain("truncate");
+    expect(value?.getAttribute("title")).toBe("a-very-long-identifier");
+  });
+
+  it("keeps the copy button at its size beside the value", () => {
+    const root = mountCell(true);
+    expect(root.querySelector("button")?.classList).toContain("shrink-0");
+  });
+});

package/frontend-vue/tests/nav-card-grid-empty-category.test.ts

@@ -105,6 +105,7 @@ beforeEach(() => {
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (text: string) => text,
   }));
+  vi.stubGlobal("useI18n", () => ({ t: String, locale: ref("en") }));
 });
 
 afterEach(() => {

package/frontend-vue/tests/page-fill-height.test.ts

@@ -90,9 +90,9 @@ const FLOW_PAGE_MARKUP =
   '<h1 class="text-highlighted text-2xl font-[650] leading-[1.2] tracking-[-0.03em]"><!--[-->Explorer<!--]--></h1><!--v-if--></div><!--[--><!--[--><!-- eslint-disable vue/no-v-html --><!--v-if--><!--]--><!--]--></section>' +
   '<div class="contents [html[data-dms-role-preview=pending]_&amp;]:hidden"><!--[--><!--[--><!--[-->' +
   '<div class="dms-page-stack space-y-6">' +
-  '<div class="">' +
+  '<div class="empty:hidden">' +
   '<section data-component="stats" page-id="tools.explorer" layout-path="stats"></section></div>' +
-  '<div class="">' +
+  '<div class="empty:hidden">' +
   '<section data-component="explorer" page-id="tools.explorer" layout-path="explorer"></section></div></div><!----><!--]--><!--]--><!--]--></div>' +
   PAGE_SKELETON_MARKUP +
   "<!----><!--]--><!--]--><!--]--></div></div><!--[--><!----><!--]--></div><!----></div>";
@@ -124,8 +124,12 @@ const Container: FunctionalComponent = (_, { attrs, slots }) =>
   h("div", { ...attrs, class: ["w-full", attrs.class] }, slots.default?.());
 Container.inheritAttrs = false;
 
+// A component id starting with `hidden` stands for a block that has nothing
+// to show (a fetched Banner the route answered `null`): it renders nothing.
 const PageComponent: FunctionalComponent<{ componentId: string }> = (props) =>
-  h("section", { "data-component": props.componentId });
+  props.componentId.startsWith("hidden")
+    ? null
+    : h("section", { "data-component": props.componentId });
 PageComponent.props = ["componentId"];
 
 const FillHeightProbe: FunctionalComponent = () =>
@@ -299,6 +303,19 @@ describe("DefaultLayout without fillHeight", () => {
   });
 });
 
+describe("a block that renders nothing", () => {
+  it("leaves an empty wrapper the stack hides, so it takes no gap", async () => {
+    pageLayout.value = withComponents("hiddenBanner", "stats");
+    const host = parse(await renderInLayout({}, CatchAllPage));
+    const [banner, stats] = Array.from(
+      host.querySelectorAll(".dms-page-stack > div"),
+    );
+    expect(banner?.matches(":empty")).toBe(true);
+    expectClasses(banner, "empty:hidden");
+    expect(stats?.matches(":empty")).toBe(false);
+  });
+});
+
 describe("DefaultLayout with fillHeight", () => {
   it("makes the page region a flex column with a minimum height", async () => {
     const host = parse(

package/frontend-vue/tests/route-param-occurrences.test.ts

@@ -89,6 +89,15 @@ describe("form URL variables on a repeated placeholder", () => {
     ).toBe("/workspaces/ws-1/invoices/row-7");
   });
 
+  it("encodes an occurrence like any parameter", () => {
+    expect(
+      replaceUrlVariables("/workspaces/{{params.id:1}}/rows", {
+        routeParams: { id: "row-7", "id:1": "ws 1/2", "id:2": "row-7" },
+        routeQuery: {},
+      }),
+    ).toBe("/workspaces/ws%201%2F2/rows");
+  });
+
   it("leaves an indexed token that no occurrence answers alone", () => {
     expect(replaceUrlVariables("/invoices/{{params.id:3}}", context)).toBe(
       "/invoices/{{params.id:3}}",