@antelopejs/dms 0.7.0 → 0.7.2

package/frontend-vue/tests/block-route-params.test.ts

@@ -17,6 +17,7 @@ import {
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   replaceUrlVariables,
+  resolveTextVariables,
   resolveUrlVariables,
 } from "../layers/dms-ui/app/build/utils/urlVariables";
 
@@ -96,6 +97,53 @@ describe("resolveUrlVariables", () => {
     );
   });
 
+  it("encodes the values it fills, so each stays one parameter", () => {
+    expect(
+      resolveUrlVariables("/api/log/{{params.id}}?route={{query.route}}", {
+        routeParams: { id: "a b" },
+        routeQuery: { route: "GET /api/a?b=c&d" },
+      }),
+    ).toBe("/api/log/a%20b?route=GET%20%2Fapi%2Fa%3Fb%3Dc%26d");
+  });
+
+  // The router keeps the page path percent-encoded, and route parameters are
+  // read from it.
+  it("does not encode a route parameter twice", () => {
+    expect(
+      replaceUrlVariables("/api/ws/{{params.id}}", {
+        routeParams: { id: "caf%C3%A9%20bar" },
+        routeQuery: {},
+      }),
+    ).toBe("/api/ws/caf%C3%A9%20bar");
+    expect(
+      replaceUrlVariables("/api/ws/{{params.id}}", {
+        routeParams: { id: "100%" },
+        routeQuery: {},
+      }),
+    ).toBe("/api/ws/100%25");
+  });
+
+  it("writes response values as answered", () => {
+    expect(
+      replaceUrlVariables("{{response.redirectPath}}&tab={{query.tab}}", {
+        routeQuery: { tab: "a&b" },
+        response: { redirectPath: "/settings/users?invited=1" },
+      }),
+    ).toBe("/settings/users?invited=1&tab=a%26b");
+  });
+
+  it("fills a plain value without encoding it", () => {
+    expect(
+      resolveTextVariables("{{query.status}} / {{params.id}}", {
+        routeParams: { id: "ws-1" },
+        routeQuery: { status: "on hold" },
+      }),
+    ).toBe("on hold / ws-1");
+    expect(resolveTextVariables("{{query.status}}", { routeQuery: {} })).toBe(
+      undefined,
+    );
+  });
+
   it("leaves a URL without tokens as it is", () => {
     expect(resolveUrlVariables("/api/plain", { routeQuery: {} })).toBe(
       "/api/plain",

package/frontend-vue/tests/code-block.test.ts

@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type App, createApp, h, ref } from "vue";
+
+const data = ref<Record<string, unknown> | null>(null);
+const error = ref<unknown>(null);
+const isLoading = ref(false);
+const fetchOptions = vi.fn();
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: (options: unknown) => {
+    fetchOptions(options);
+    return { data, isLoading, error, refresh: async () => {} };
+  },
+}));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+
+let app: App | undefined;
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve));
+let host: HTMLDivElement;
+
+async function mount(path: string, props: Record<string, unknown>) {
+  const { default: component } = await import(path);
+  app = createApp({ setup: () => () => h(component, props) });
+  for (const name of ["UIcon", "USkeleton", "UButton"]) {
+    app.component(name, (_, { attrs }) =>
+      h("i", { ...attrs, "data-stub": name }),
+    );
+  }
+  app.mount(host);
+  await flushPromises();
+  await vi.dynamicImportSettled();
+  await flushPromises();
+}
+
+const mountSnippet = (props: Record<string, unknown>) =>
+  mount("../layers/dms-ui/app/components/code-snippet/CodeSnippet.vue", props);
+const mountBlock = (props: Record<string, unknown>) =>
+  mount("../layers/dms-ui/app/components/blocks/CodeBlock.vue", {
+    componentId: "code",
+    pageId: "page",
+    ...props,
+  });
+
+const pre = () => host.querySelector("pre")!;
+const copyButton = () => host.querySelector("button");
+
+beforeEach(() => {
+  data.value = null;
+  error.value = null;
+  isLoading.value = false;
+  fetchOptions.mockClear();
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("DmsCodeSnippet", () => {
+  it("highlights the code in its language, under a head naming it", async () => {
+    await mountSnippet({
+      code: '{ "id": 1 }',
+      language: "json",
+      title: "Body",
+    });
+    expect(pre().textContent).toBe('{ "id": 1 }');
+    expect(pre().querySelector('[style*="--ui-info"]')?.textContent).toBe(
+      '"id"',
+    );
+    expect(host.textContent).toContain("Body");
+    expect(host.textContent).toContain("JSON");
+    expect(copyButton()).not.toBeNull();
+  });
+
+  it("reads an alias as its language", async () => {
+    await mountSnippet({ code: "pnpm install", language: "bash" });
+    expect(pre().dataset.language).toBe("shell");
+    expect(host.textContent).toContain("Shell");
+  });
+
+  it("drops the copy button and the head when nothing is left to show", async () => {
+    await mountSnippet({ code: "plain words", copy: false });
+    expect(copyButton()).toBeNull();
+    expect(pre().previousElementSibling).toBeNull();
+  });
+
+  it("wraps long lines or scrolls them, and caps the height in lines", async () => {
+    await mountSnippet({ code: "a\nb\nc", wrap: true, maxLines: 2 });
+    expect(pre().className).toContain("whitespace-pre-wrap");
+    expect(pre().style.maxHeight).toBe("54px");
+    app?.unmount();
+    await mountSnippet({ code: "a" });
+    expect(pre().className).toContain("whitespace-pre");
+    expect(pre().className).not.toContain("whitespace-pre-wrap");
+    expect(pre().style.maxHeight).toBe("");
+  });
+});
+
+describe("CodeBlock", () => {
+  it("shows its static code and title", async () => {
+    await mountBlock({ code: "SELECT 1", language: "sql", title: "Query" });
+    expect(pre().textContent).toBe("SELECT 1");
+    expect(host.textContent).toContain("Query");
+  });
+
+  it("replaces the code and the language with what its route answers", async () => {
+    data.value = { code: "echo hi", language: "shell" };
+    await mountBlock({
+      code: "old",
+      language: "json",
+      fetchUrl: "/api/snippet",
+    });
+    expect(fetchOptions).toHaveBeenCalledWith(
+      expect.objectContaining({ fetchUrl: "/api/snippet" }),
+    );
+    expect(pre().textContent).toBe("echo hi");
+    expect(pre().dataset.language).toBe("shell");
+  });
+
+  it("draws placeholder lines until the first answer", async () => {
+    isLoading.value = true;
+    await mountBlock({ fetchUrl: "/api/snippet" });
+    expect(host.querySelector("pre")).toBeNull();
+    expect(host.querySelector("[aria-busy]")).not.toBeNull();
+  });
+
+  it("offers a retry when the first load fails", async () => {
+    error.value = new Error("network");
+    await mountBlock({ fetchUrl: "/api/snippet" });
+    expect(host.querySelector("pre")).toBeNull();
+    expect(host.textContent).toContain("dms.blocks.load_error");
+  });
+});
+
+describe("EmptyState block", () => {
+  it("shows a snippet between its text and its actions", async () => {
+    await mount("../layers/dms-ui/app/components/blocks/EmptyStateBlock.vue", {
+      title: "No email sent yet",
+      code: { content: "await mail.send({ to })", language: "typescript" },
+    });
+    expect(pre().textContent).toBe("await mail.send({ to })");
+    expect(host.textContent).toContain("TypeScript");
+    expect(copyButton()).not.toBeNull();
+  });
+});

package/frontend-vue/tests/code-highlight.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import {
+  type CodeToken,
+  highlightCode,
+} from "../layers/dms-ui/app/build/utils/codeHighlight";
+import { resolveCodeLanguage } from "../layers/dms-ui/app/build/utils/codeLanguages";
+
+const KEYWORD = "var(--ui-primary)";
+const STRING = "var(--ui-success)";
+const NUMBER = "var(--ui-warning)";
+const COMMENT = "var(--ui-text-dimmed)";
+const PROPERTY = "var(--ui-info)";
+
+const colorOf = (tokens: CodeToken[], text: string) =>
+  tokens.find((token) => token.text === text)?.style?.color;
+
+const joined = (tokens: CodeToken[]) =>
+  tokens.map((token) => token.text).join("");
+
+describe("read-only code highlighting", () => {
+  it("keeps every character of the code, in order", () => {
+    const code = '{\n  "name": "media",\n  "size": 42\n}';
+    expect(joined(highlightCode(code, "json"))).toBe(code);
+  });
+
+  it("colours JSON keys, strings and numbers", () => {
+    const tokens = highlightCode('{ "name": "media", "size": 42 }', "json");
+    expect(colorOf(tokens, '"name"')).toBe(PROPERTY);
+    expect(colorOf(tokens, '"media"')).toBe(STRING);
+    expect(colorOf(tokens, "42")).toBe(NUMBER);
+  });
+
+  it("reads TypeScript, SQL and HTML with the editor's languages", () => {
+    expect(
+      colorOf(highlightCode("const x: number = 1;", "typescript"), "const"),
+    ).toBe(KEYWORD);
+    expect(
+      colorOf(highlightCode("SELECT id FROM users", "sql"), "SELECT"),
+    ).toBe(KEYWORD);
+    expect(colorOf(highlightCode('<a href="/">x</a>', "html"), "a")).toBe(
+      KEYWORD,
+    );
+  });
+
+  it("marks a shell command, its flags, strings, variables and comments", () => {
+    const code =
+      'curl -X POST "$API_URL" \\\n  -H "Accept: json" # send\necho $HOME | grep root';
+    const tokens = highlightCode(code, "shell");
+    expect(joined(tokens)).toBe(code);
+    expect(colorOf(tokens, "curl")).toBe(KEYWORD);
+    expect(colorOf(tokens, "-X")).toBe(PROPERTY);
+    expect(colorOf(tokens, '"$API_URL"')).toBe(STRING);
+    expect(colorOf(tokens, "-H")).toBe(PROPERTY);
+    expect(colorOf(tokens, "# send")).toBe(COMMENT);
+    expect(colorOf(tokens, "echo")).toBe(KEYWORD);
+    expect(colorOf(tokens, "$HOME")).toBe(NUMBER);
+    expect(colorOf(tokens, "grep")).toBe(KEYWORD);
+    expect(colorOf(tokens, "root")).toBeUndefined();
+  });
+
+  it("shows plain text and unknown languages as written", () => {
+    expect(highlightCode("SELECT 1", "text")).toEqual([{ text: "SELECT 1" }]);
+    expect(highlightCode("x = 1", "cobol")).toEqual([{ text: "x = 1" }]);
+  });
+
+  it("reads the usual aliases as their language", () => {
+    expect(resolveCodeLanguage("bash")).toBe("shell");
+    expect(resolveCodeLanguage("TS")).toBe("typescript");
+    expect(resolveCodeLanguage("plain")).toBe("text");
+    expect(resolveCodeLanguage(undefined)).toBe("text");
+  });
+});

package/frontend-vue/tests/composed-text-blocks.test.ts

@@ -57,6 +57,11 @@ vi.mock(
   () => ({ useComponentEvent: () => ({}) }),
 );
 
+vi.mock(
+  "../layers/dms-ui/app/build/composables/actions/useActionTargets",
+  () => ({ useActionTargets: () => ({ handleCustomButton: () => {} }) }),
+);
+
 // The generic components only lay out what the block resolved: their props
 // are what is checked here.
 const propsProbe = (name: string, keys: string[]) => ({

package/frontend-vue/tests/composed-text-more-blocks.test.ts

@@ -0,0 +1,391 @@
+// @vitest-environment jsdom
+/**
+ * ActivityFeed, Meter, TopListCard and NavCardGrid draw a composed text
+ * wherever they draw a text — from their options or from the JSON their
+ * route answers — in the reader's language, and keep drawing plain and `$`
+ * strings as before.
+ */
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  reactive,
+  ref,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { resolveI18nKey } from "../layers/dms-core/app/composables/translation/useTranslation";
+import { setRegionalPreferencesSource } from "../layers/dms-core/app/utils/regional";
+
+const NOW = Date.UTC(2026, 9, 10, 12);
+const THREE_MINUTES_AGO = new Date(NOW - 3 * 60 * 1000).toISOString();
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: {
+    en: {
+      mail: {
+        to_review:
+          "no message to review | {count} message to review | {count} messages to review",
+        bounced: "{count} bounced on {list}",
+        device: "{browser} on {os}",
+        signed_in: "Signed in on {device}",
+        sent: "Sent {when}",
+      },
+      media: {
+        files: "{count} file | {count} files",
+        used: "{size} used",
+        quota: "{used} of {total}",
+        library: "Library",
+        new: "New",
+      },
+      api: { last_call: "Last call {at}" },
+    },
+    fr: {
+      mail: {
+        to_review:
+          "aucun message à traiter | {count} message à traiter | {count} messages à traiter",
+        bounced: "{count} rejetés sur {list}",
+        device: "{browser} sous {os}",
+        signed_in: "Connexion sur {device}",
+        sent: "Envoyé {when}",
+      },
+      media: {
+        files: "{count} fichier | {count} fichiers",
+        used: "{size} utilisés",
+        quota: "{used} sur {total}",
+        library: "Médiathèque",
+        new: "Nouveau",
+      },
+      api: { last_call: "Dernier appel {at}" },
+    },
+  },
+});
+
+const meterData = ref<Record<string, unknown> | null>(null);
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => ({ items: [] }),
+}));
+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: () => ({}) }),
+);
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: meterData,
+    isLoading: ref(false),
+    error: ref(null),
+    refresh: async () => {},
+  }),
+}));
+vi.mock(
+  "#dms-layout/app/build/composables/navigation/useCategoryNavCards",
+  () => ({
+    useCategoryNavCards: () => ({ cards: computed(() => []) }),
+    usePreviewEntryVeil: () => ({
+      state: () => null,
+      label: () => "",
+      detail: () => undefined,
+      isActive: ref(false),
+    }),
+  }),
+);
+
+// The generic components only lay out what the block resolved: their props
+// are what is checked here.
+const { propsProbe } = vi.hoisted(() => ({
+  propsProbe: (name: string, keys: string[]) => async () => {
+    const vue = await import("vue");
+    return {
+      default: vue.defineComponent({
+        props: keys,
+        setup:
+          (props, { slots }) =>
+          () =>
+            vue.h("div", [
+              vue.h("pre", { "data-probe": name }, JSON.stringify(props)),
+              slots.default?.(),
+            ]),
+      }),
+    };
+  },
+}));
+vi.mock(
+  "../layers/dms-ui/app/components/activity/ActivityItem.vue",
+  propsProbe("activity-item", ["title", "subtitle", "trailing"]),
+);
+vi.mock(
+  "../layers/dms-ui/app/components/meter/Meter.vue",
+  propsProbe("meter", ["label", "hint", "valueLabel", "segments"]),
+);
+vi.mock(
+  "../layers/dms-ui/app/components/card/NavCard.vue",
+  propsProbe("nav-card", ["title", "description", "state", "tag", "readout"]),
+);
+vi.mock(
+  "../layers/dms-ui/app/build/components/permission/PermissionVeil.vue",
+  propsProbe("veil", []),
+);
+
+const ActivityFeed = (
+  await import("../layers/dms-ui/app/components/activity-feed/ActivityFeed.vue")
+).default;
+const MeterBlock = (
+  await import("../layers/dms-ui/app/components/meter/MeterBlock.vue")
+).default;
+const TopListRow = (
+  await import(
+    "../layers/dms-ui/app/components/top-list/internal/TopListRow.vue"
+  )
+).default;
+const NavCardGridBlock = (
+  await import("../layers/dms-ui/app/components/blocks/NavCardGridBlock.vue")
+).default;
+
+const mounted: Array<{ unmount: () => void }> = [];
+const plainSpaces = (text: string) => text.replace(/[\u00a0\u202f]/g, " ");
+
+function mount(component: Component, props: Record<string, unknown>) {
+  const root = document.createElement("div");
+  const app = createApp(component, props);
+  app.component(
+    "DmsCard",
+    defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h("div", slots.default?.()),
+    }),
+  );
+  app.mount(root);
+  mounted.push(app);
+  return root;
+}
+
+function probes(root: HTMLElement, name: string): Record<string, unknown>[] {
+  return [...root.querySelectorAll(`[data-probe="${name}"]`)].map((probe) =>
+    JSON.parse(plainSpaces(probe.textContent ?? "{}")),
+  );
+}
+
+const count = (value: number) => ({ type: "count", value });
+
+beforeEach(() => {
+  vi.useFakeTimers({ now: NOW, toFake: ["Date"] });
+  i18n.global.locale.value = "en";
+  meterData.value = null;
+  setRegionalPreferencesSource(() => ({ timeZone: "UTC" }));
+  vi.stubGlobal("useI18n", () => ({
+    t: i18n.global.t,
+    locale: i18n.global.locale,
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string, params?: Record<string, unknown> | null) =>
+      resolveI18nKey(i18n.global.t, key, params),
+  }));
+  vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  setRegionalPreferencesSource(() => ({}));
+  vi.useRealTimers();
+});
+
+describe("ActivityFeed", () => {
+  const items = [
+    {
+      id: "review",
+      title: { key: "mail.to_review", params: { count: count(3) } },
+      meta: [
+        {
+          key: "mail.sent",
+          params: { when: { type: "relative", value: THREE_MINUTES_AGO } },
+        },
+        "Inbox",
+      ],
+      time: { key: "media.new" },
+    },
+    {
+      id: "bounced",
+      title: "$mail.bounced",
+      params: { count: count(1284), list: "Newsletter" },
+    },
+    {
+      id: "legacy",
+      title: "$mail.signed_in",
+      meta: ["$mail.device"],
+      params: { device: "$mail.device", browser: "Chrome", os: "Windows" },
+    },
+  ];
+
+  it("composes titles, details and the trailing text of its entries", () => {
+    const root = mount(ActivityFeed, { items, groupByDay: false, card: false });
+
+    expect(probes(root, "activity-item")).toEqual([
+      {
+        title: "3 messages to review",
+        subtitle: "Sent 3 minutes ago · Inbox",
+        trailing: "New",
+      },
+      { title: "1,284 bounced on Newsletter" },
+      {
+        title: "Signed in on Chrome on Windows",
+        subtitle: "Chrome on Windows",
+      },
+    ]);
+  });
+
+  it("picks the plural form of a `$` title from its count value, in French", () => {
+    i18n.global.locale.value = "fr";
+    const root = mount(ActivityFeed, {
+      items: [
+        { title: "$mail.to_review", params: { count: count(1) } },
+        {
+          title: "$mail.signed_in",
+          params: { device: "$mail.device", browser: "Firefox", os: "Linux" },
+        },
+      ],
+      groupByDay: false,
+      card: false,
+    });
+
+    expect(probes(root, "activity-item").map((item) => item.title)).toEqual([
+      "1 message à traiter",
+      "Connexion sur Firefox sous Linux",
+    ]);
+  });
+});
+
+describe("MeterBlock", () => {
+  it("composes the hint, the value text and the segment legends", () => {
+    i18n.global.locale.value = "fr";
+    const root = mount(MeterBlock, {
+      label: "$media.library",
+      hint: { key: "media.files", params: { count: count(2) } },
+      valueLabel: {
+        key: "media.quota",
+        params: {
+          used: { type: "number", value: 0.42, format: "percent" },
+          total: "10 Go",
+        },
+      },
+      segments: [
+        {
+          value: 3,
+          label: { key: "media.files", params: { count: count(1) } },
+        },
+        { value: 2, label: "Plain" },
+      ],
+    });
+
+    expect(probes(root, "meter")).toEqual([
+      {
+        label: "Médiathèque",
+        hint: "2 fichiers",
+        valueLabel: "42 % sur 10 Go",
+        segments: [
+          { value: 3, label: "1 fichier" },
+          { value: 2, label: "Plain" },
+        ],
+      },
+    ]);
+  });
+
+  it("composes the texts its route answers", () => {
+    meterData.value = {
+      value: 4,
+      max: 10,
+      hint: { key: "media.used", params: { size: "4 GB" } },
+    };
+    const root = mount(MeterBlock, { fetchUrl: "/api/storage" });
+
+    expect(probes(root, "meter")[0]?.hint).toBe("4 GB used");
+  });
+});
+
+describe("TopListRow", () => {
+  it("composes the title and the description of a row", () => {
+    i18n.global.locale.value = "fr";
+    const root = mount(TopListRow, {
+      item: {
+        id: "orders",
+        title: "$media.library",
+        description: {
+          key: "api.last_call",
+          params: { at: { type: "relative", value: THREE_MINUTES_AGO } },
+        },
+        value: 12,
+      },
+      showRank: false,
+      rankLabel: "1",
+      rankClass: "",
+      hasAnyIcon: false,
+      showSparkline: false,
+      sparklineAccent: "primary",
+      showDelta: false,
+      formattedValue: "12",
+    });
+
+    expect(plainSpaces(root.textContent ?? "")).toContain("Médiathèque");
+    expect(plainSpaces(root.textContent ?? "")).toContain(
+      "Dernier appel il y a 3 minutes",
+    );
+  });
+
+  it("keeps a plain title as written", () => {
+    const root = mount(TopListRow, {
+      item: { id: 1, title: "GET /orders", value: 1 },
+      showRank: false,
+      rankLabel: "1",
+      rankClass: "",
+      hasAnyIcon: false,
+      showSparkline: false,
+      sparklineAccent: "primary",
+      showDelta: false,
+      formattedValue: "1",
+    });
+
+    expect(root.textContent).toContain("GET /orders");
+  });
+});
+
+describe("NavCardGridBlock", () => {
+  it("composes the title, description, tag, state and readout of a card", () => {
+    const root = mount(NavCardGridBlock, {
+      items: [
+        {
+          icon: "i-ph-images",
+          to: "/media",
+          title: { key: "media.library" },
+          description: "$media.new",
+          tag: { key: "media.new" },
+          state: { key: "media.files", params: { count: count(1284) } },
+          readout: [{ key: "media.used", params: { size: "4 GB" } }, "plain"],
+        },
+      ],
+    });
+
+    expect(probes(root, "nav-card")).toEqual([
+      {
+        title: "Library",
+        description: "New",
+        tag: "New",
+        state: "1,284 files",
+        readout: ["4 GB used", "plain"],
+      },
+    ]);
+  });
+});