@antelopejs/dms 0.7.1 → 0.7.3

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}}",

package/frontend-vue/tests/table-actions-search-label.test.ts

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TableActions from "../layers/dms-ui/app/build/components/table/Actions.vue";
+import { FULL_TABLE_CHROME } from "../layers/dms-ui/app/build/composables/table-view/utils/chrome";
+
+vi.mock("../layers/dms-ui/app/build/components/table/Menu.vue", () => ({
+  default: { render: () => null },
+}));
+
+vi.mock("../layers/dms-ui/app/build/components/form/SearchInput.vue", () => ({
+  default: { render: () => null },
+}));
+
+const PassThrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const ButtonStub = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("button", slots.default?.()),
+});
+
+const InputStub = defineComponent({
+  setup: () => () => h("input"),
+});
+
+let app: App | undefined;
+
+function mountActions(searchPlaceholder: string | undefined, search = "") {
+  const Host = defineComponent({
+    setup() {
+      provide(
+        "tableSharedData",
+        shallowRef({
+          activeCapabilities: ref({
+            search: true,
+            filters: false,
+            sorting: false,
+          }),
+          labeledColumns: ref([]),
+          globalFilterState: ref(search),
+          columnFiltersState: ref([]),
+          paginationState: ref({ pageIndex: 0, pageSize: 10 }),
+          filtersRowOpenState: ref(false),
+          hasCustomSort: ref(false),
+          displays: [],
+          activeDisplayState: ref("table"),
+          kanbanGroupByOptions: [],
+          kanbanGroupByState: ref(undefined),
+          onFiltersCleared: () => undefined,
+          emits: () => undefined,
+        }),
+      );
+      return () =>
+        h(TableActions, {
+          searchPlaceholder,
+          chrome: { ...FULL_TABLE_CHROME, refresh: false, menu: false },
+        });
+    },
+  });
+  app = createApp(Host);
+  for (const [name, stub] of Object.entries({
+    UButton: ButtonStub,
+    UInput: InputStub,
+    UKbd: PassThrough,
+    UPopover: PassThrough,
+    UDropdownMenu: PassThrough,
+    UTooltip: PassThrough,
+    UIcon: PassThrough,
+  })) {
+    app.component(name, stub);
+  }
+  const container = document.createElement("div");
+  app.mount(container);
+  return container;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("defineShortcuts", () => undefined);
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    ui: { icons: { close: "close", plus: "plus", ellipsis: "ellipsis" } },
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (value: string) =>
+      value.startsWith("$") ? `translated:${value.slice(1)}` : value,
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("table toolbar search", () => {
+  it("names the button opening the search", () => {
+    const container = mountActions(undefined);
+    expect(container.querySelector("button")?.getAttribute("aria-label")).toBe(
+      "dms.table.search_open",
+    );
+  });
+
+  it("uses the configured placeholder, which also names the field", async () => {
+    const container = mountActions("$page.members.search", "ada");
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe(
+      "translated:page.members.search",
+    );
+    expect(input?.getAttribute("aria-label")).toBe(
+      "translated:page.members.search",
+    );
+  });
+
+  it("falls back to the default placeholder as the field's name", async () => {
+    const container = mountActions(undefined, "ada");
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe(
+      "dms.table.search_placeholder",
+    );
+    expect(input?.getAttribute("aria-label")).toBe(
+      "dms.table.search_placeholder",
+    );
+  });
+});

package/frontend-vue/tests/table-clear-filters.test.ts

@@ -148,6 +148,18 @@ describe("clearTableFilters", () => {
     ).toBe(true);
   });
 
+  it("counts the hidden filters of the page URL as filters", () => {
+    const state = { ...createState(), hiddenFiltersApply: ref(true) };
+    expect(isTableNarrowed(state)).toBe(true);
+    // Nothing the user could clear: no clear action is offered.
+    expect(clearableTableFilters(state)).toEqual({
+      filters: false,
+      search: false,
+    });
+    state.hiddenFiltersApply.value = false;
+    expect(isTableNarrowed(state)).toBe(false);
+  });
+
   it("ignores a search the active display does not apply", () => {
     const state = {
       ...createState({ globalFilter: "a" }),
@@ -244,6 +256,16 @@ describe("table empty state", () => {
     expect(state.globalFilter.value).toBe("");
   });
 
+  it("says no row matches, not that there are none yet, under hidden filters", () => {
+    const container = mountEmpty({
+      ...createState(),
+      hiddenFiltersApply: ref(true),
+    });
+    expect(container.textContent).toContain("dms.table.no_results_title");
+    expect(container.textContent).not.toContain("dms.table.empty_title");
+    expect(container.querySelector("button")).toBeNull();
+  });
+
   it("offers no clear action when only default filters narrow the rows", () => {
     const container = mountEmpty(
       createState({ columnFilters: [pinnedStatus("open")] }),

package/frontend-vue/tests/table-empty-body-viewport.test.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const tableSource = readFileSync(
+  resolve(__dirname, "../layers/dms-ui/app/build/components/table/Table.vue"),
+  "utf8",
+);
+
+describe("table empty body", () => {
+  it("centres on the visible part of a table wider than its card", () => {
+    expect(tableSource).toMatch(
+      /emptyBody:\s*"sticky start-0 w-\[var\(--dms-table-viewport,auto\)\]"/,
+    );
+    expect(tableSource).toMatch(
+      /<div :class="uiTable\.emptyBody\(\)">\s*<TableEmpty/,
+    );
+  });
+
+  it("knows the visible width of every table, not only expandable ones", () => {
+    expect(tableSource).toMatch(
+      /"--dms-table-viewport":\s*tableViewportWidth\.value > 0/,
+    );
+  });
+});

package/frontend-vue/tests/table-metric-cells.test.ts

@@ -103,6 +103,28 @@ describe("metric cells", () => {
     expect(cell.innerHTML).toContain("text-error");
   });
 
+  it("tones a status pill by the row's tone field before the column's map", () => {
+    const options = { tones: { "404": "info" }, toneField: "statusTone" };
+    const pill = (row: Record<string, unknown>) =>
+      render(formatters.get("status_pill")!(404, "en-GB", options, row))
+        .innerHTML;
+
+    expect(pill({ statusTone: "warning" })).toContain("text-warning");
+    app?.unmount();
+    expect(pill({ statusTone: "not-a-tone" })).toContain("text-info");
+    app?.unmount();
+    expect(
+      render(
+        formatters.get("status_pill")!(
+          503,
+          "en-GB",
+          { toneField: "statusTone" },
+          { statusTone: "error" },
+        ),
+      ).innerHTML,
+    ).toContain("text-error");
+  });
+
   it("draws a progress bar with its figures", () => {
     const cell = render(
       formatters.get("progress")!(