@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/tests/header-actions.test.ts

@@ -0,0 +1,191 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+  type App,
+  type Ref,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import DashboardHeader from "../layers/dms-layout/app/build/components/layout/DashboardHeader.vue";
+import {
+  BUILDER_ACTION_ID,
+  type HeaderAction,
+  registerHeaderAction,
+  useHeaderActions,
+} from "../layers/dms-layout/app/composables/useHeaderActions";
+import { useSidePanel } from "../layers/dms-layout/app/composables/useSidePanel";
+
+vi.mock(
+  "../layers/dms-layout/app/build/components/notification/NotificationPopover.vue",
+  () => ({ default: () => null }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/components/layout/QuickActionsPopover.vue",
+  () => ({ default: () => null }),
+);
+vi.mock("#dms-core/app/build/composables/page/usePageRecordLabel", () => ({
+  usePageRecordLabel: () => ({ label: ref(null) }),
+}));
+
+const ACTIVE_COLOR = "primary";
+const IDLE_COLOR = "neutral";
+const PANEL_ID = "demo:panel";
+
+let sharedState: Map<string, Ref<unknown>>;
+let app: App | undefined;
+
+interface CookieOptions {
+  default?: () => unknown;
+}
+
+function useDmsState<T>(key: string, init?: () => T): Ref<T> {
+  if (!sharedState.has(key)) sharedState.set(key, ref(init?.()));
+  return sharedState.get(key) as Ref<T>;
+}
+
+function useDmsCookie<T>(name: string, options: CookieOptions = {}): Ref<T> {
+  return useDmsState(`cookie:${name}`, () => options.default?.() ?? null);
+}
+
+const ButtonStub = defineComponent({
+  inheritAttrs: false,
+  props: { color: String, onClick: Function },
+  setup:
+    (props, { attrs }) =>
+    () =>
+      h("button", {
+        "aria-label": attrs["aria-label"],
+        "aria-pressed": attrs["aria-pressed"],
+        "data-color": props.color,
+        onClick: () => props.onClick?.(),
+      }),
+});
+
+const SlotsStub = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", [slots.leading?.(), slots.right?.(), slots.default?.()]),
+});
+
+function installRuntime(): void {
+  const runtime: Record<string, unknown> = {
+    computed,
+    BUILDER_ACTION_ID,
+    buildBreadcrumbTarget: () => null,
+    buildFavoritePage: () => null,
+    useDmsAppConfig: () => ({ ui: { icons: {} } }),
+    useDmsCookie,
+    useDmsRoute: () => reactive({ path: "/", query: {} }),
+    useDmsState,
+    useFavoritePages: () => ({ isFavorite: () => false }),
+    useHeaderActions,
+    useHomepage: () => "/",
+    useI18n: () => ({ t: (key: string) => key }),
+    useSiteLayout: () => ({ findMatchingRoute: () => null }),
+    useTranslation: () => ({
+      processI18n: (value: string) => value.replace(/^\$/, "t:"),
+    }),
+  };
+  Object.entries(runtime).forEach(([name, value]) =>
+    vi.stubGlobal(name, value),
+  );
+}
+
+function mountHeader(): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  app = createApp(DashboardHeader);
+  app.component("UButton", ButtonStub);
+  ["UDashboardNavbar", "UTooltip", "UBreadcrumb", "UDropdownMenu"].forEach(
+    (name) => app?.component(name, SlotsStub),
+  );
+  app.mount(host);
+  return host;
+}
+
+function button(host: HTMLElement, label: string): HTMLButtonElement | null {
+  return host.querySelector(`button[aria-label="${label}"]`);
+}
+
+function action(id: string, extra: Partial<HeaderAction> = {}): HeaderAction {
+  return { id, icon: "i-ph-star", label: id, ...extra };
+}
+
+beforeEach(() => {
+  sharedState = new Map();
+  installRuntime();
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+describe("header action registry", () => {
+  it("keeps an action linked to a side panel without any callable", () => {
+    registerHeaderAction(action("panel", { sidePanelId: PANEL_ID }));
+    registerHeaderAction(action("stripped"));
+    const { actions } = useHeaderActions();
+    expect(actions.value.map((entry) => entry.id)).toEqual(["panel"]);
+  });
+});
+
+describe("header action buttons", () => {
+  it("renders the active state of every action, not only the builder's", async () => {
+    const isOn = ref(false);
+    registerHeaderAction(
+      action("toggle", { onSelect: vi.fn(), isActive: () => isOn.value }),
+    );
+    registerHeaderAction(action("plain", { onSelect: vi.fn() }));
+    const host = mountHeader();
+    const toggle = button(host, "toggle");
+    expect(toggle?.dataset.color).toBe(IDLE_COLOR);
+    expect(toggle?.getAttribute("aria-pressed")).toBe("false");
+    isOn.value = true;
+    await nextTick();
+    expect(toggle?.dataset.color).toBe(ACTIVE_COLOR);
+    expect(toggle?.getAttribute("aria-pressed")).toBe("true");
+    expect(button(host, "plain")?.hasAttribute("aria-pressed")).toBe(false);
+  });
+
+  it("toggles a linked side panel and derives its state from it", async () => {
+    registerHeaderAction(
+      action("panel", { label: "$panel.toggle", sidePanelId: PANEL_ID }),
+    );
+    const host = mountHeader();
+    const toggle = button(host, "t:panel.toggle");
+    const { isOpen } = useSidePanel(PANEL_ID);
+    toggle?.click();
+    await nextTick();
+    expect(isOpen.value).toBe(true);
+    expect(toggle?.dataset.color).toBe(ACTIVE_COLOR);
+    toggle?.click();
+    await nextTick();
+    expect(isOpen.value).toBe(false);
+    expect(toggle?.dataset.color).toBe(IDLE_COLOR);
+  });
+
+  it("keeps the builder action in its slot, running its own callables", async () => {
+    const onSelect = vi.fn();
+    registerHeaderAction(
+      action(BUILDER_ACTION_ID, {
+        label: "Edit",
+        onSelect,
+        isActive: () => true,
+      }),
+    );
+    const host = mountHeader();
+    const builder = button(host, "Edit");
+    builder?.click();
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(builder?.dataset.color).toBe(ACTIVE_COLOR);
+  });
+});

package/frontend-vue/tests/invites-edit-modal.test.ts

@@ -0,0 +1,157 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { createI18n } from "vue-i18n";
+import { Color } from "../layers/dms-core/app/types/color";
+import { HttpMethod } from "../layers/dms-core/app/types/http";
+import { normalizeActionConfig } from "../layers/dms-core/app/utils/row-action-rule-evaluator";
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import { useTranslation } from "../layers/dms-core/app/composables/translation/useTranslation";
+import { useEventedAction } from "../layers/dms-core/app/composables/useEventedAction";
+import core from "../layers/dms-core/i18n/locales/core-en-GB.json";
+import ui from "../layers/dms-ui/i18n/locales/ui-en-GB.json";
+import layout from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
+
+vi.mock("../layers/dms-ui/app/components/form/Form.vue", () => ({
+  default: { name: "DmsForm" },
+}));
+
+type Messages = Record<string, unknown>;
+const merge = (target: Messages, source: Messages): Messages => {
+  for (const [key, value] of Object.entries(source)) {
+    const current = target[key];
+    target[key] =
+      current && typeof current === "object" && typeof value === "object"
+        ? merge({ ...(current as Messages) }, value as Messages)
+        : value;
+  }
+  return target;
+};
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: { en: merge(merge(merge({}, core), ui), layout) as never },
+});
+const t = i18n.global.t as (...args: unknown[]) => string;
+
+const INVITE = { _id: "invite-1", email: "zz-invitee@example.com" };
+const INVITES_PAGE = "/settings/workspace/invites";
+
+const modal = { close: vi.fn() };
+const openModal = vi.fn(() => modal);
+const navigateDms = vi.fn();
+const refresh = vi.fn();
+
+/**
+ * The row actions of the invitations table, configured as the server
+ * serializes it: the edit form opens in a medium modal under the
+ * "Edit invitation" texts, and no form page URL is handed down.
+ */
+async function invitesRowActions() {
+  const { useTableRowActions } = await import(
+    "../layers/dms-ui/app/build/composables/table-view/useTableViewRowActions"
+  );
+  return useTableRowActions({
+    api: vi.fn() as never,
+    location: "/api/tables/admin-invites",
+    componentId: "table",
+    pageId: "settings.workspace.invites",
+    labelKey: "email",
+    formContainer: {
+      type: "modal",
+      size: "md",
+      pages: {
+        edit: {
+          displayName: "$page.settings.invites.form.edit_title",
+          description: "$page.settings.invites.form.edit_description",
+        },
+      },
+    } as never,
+    formComponents: {
+      edit: {
+        componentName: "DmsForm",
+        options: {
+          fields: [],
+          fetchUrl: "/api/tables/admin-invites/get?id={{params.id}}",
+          submitUrl: "/api/tables/admin-invites/edit?id={{params.id}}",
+        },
+      } as never,
+    },
+    refreshCallback: refresh,
+  });
+}
+
+beforeEach(() => {
+  const globals: Record<string, unknown> = {
+    ref,
+    Color,
+    HttpMethod,
+    normalizeActionConfig,
+    interpolateUrl,
+    useTranslation,
+    useEventedAction,
+    useI18n: () => ({ t, locale: ref("en") }),
+    useToast: () => ({ add: vi.fn() }),
+    useConfirm: () => ({ confirm: vi.fn() }),
+    useAuthFetch: () => ({ $authFetch: vi.fn() }),
+    useModal: () => ({ open: openModal }),
+    useDrawer: () => ({ open: vi.fn() }),
+    useDmsRoute: () => ({ query: {}, path: INVITES_PAGE }),
+    useExportJob: () => ({ runJob: vi.fn() }),
+    useComponentEvent: () => ({ sendComponentEvent: vi.fn() }),
+    navigateDms,
+    resolveDmsComponent: vi.fn(),
+  };
+  for (const [name, value] of Object.entries(globals)) {
+    vi.stubGlobal(name, value);
+  }
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+describe("Invitations table: Edit invitation", () => {
+  it("opens the form in a modal over the list, not on a page", async () => {
+    const { editRow } = await invitesRowActions();
+    await editRow(INVITE);
+
+    expect(navigateDms).not.toHaveBeenCalled();
+    expect(openModal).toHaveBeenCalledTimes(1);
+    const [opened] = openModal.mock.calls[0] as unknown as [
+      {
+        title: string;
+        description: string;
+        size: string;
+        componentOptions: Record<string, unknown>;
+      },
+    ];
+    expect(opened.title).toBe("Edit invitation · zz-invitee@example.com");
+    expect(opened.description).toBe(
+      "The name, roles and language the invitee gets on accepting.",
+    );
+    expect(opened.size).toBe("md");
+    expect(opened.componentOptions.fetchUrl).toBe(
+      "/api/tables/admin-invites/get?id=invite-1",
+    );
+    expect(opened.componentOptions.submitUrl).toBe(
+      "/api/tables/admin-invites/edit?id=invite-1",
+    );
+  });
+
+  it("closes the modal and refreshes the list once saved", async () => {
+    const { editRow } = await invitesRowActions();
+    await editRow(INVITE);
+
+    const [opened] = openModal.mock.calls[0] as unknown as [
+      { componentOptions: { onSuccessCallback: () => void } },
+    ];
+    opened.componentOptions.onSuccessCallback();
+
+    expect(modal.close).toHaveBeenCalledTimes(1);
+    expect(refresh).toHaveBeenCalledTimes(1);
+  });
+});

package/frontend-vue/tests/layout-banners.test.ts

@@ -56,12 +56,22 @@ const AlertStub = defineComponent({
     () =>
       h("div", { "data-color": props.color, "data-icon": props.icon }, [
         slots.description?.(),
+        slots.actions?.(),
         props.close
           ? h("button", { onClick: () => emit("update:open", false) }, "close")
           : null,
       ]),
 });
 
+interface ButtonStubProps {
+  label?: string;
+  to?: string;
+  color?: string;
+}
+
+const ButtonStub = (props: ButtonStubProps) =>
+  h("a", { href: props.to, "data-action-color": props.color }, props.label);
+
 const BannerContent = defineComponent({
   props: { days: { type: Number, required: true } },
   setup: (props) => () => h("strong", `${props.days} days left`),
@@ -69,6 +79,7 @@ const BannerContent = defineComponent({
 
 function mountable(root: App): App {
   root.component("UAlert", AlertStub);
+  root.component("UButton", ButtonStub);
   root.component("BannerContent", BannerContent);
   return root;
 }
@@ -86,6 +97,13 @@ beforeEach(() => {
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (key: string) => key.replace(/^\$/, "t:"),
   }));
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, named?: Record<string, unknown>) =>
+      named && Object.keys(named).length
+        ? `t:${key}:${JSON.stringify(named)}`
+        : `t:${key}`,
+    locale: ref("en"),
+  }));
   vi.stubGlobal("useLayoutBanners", useLayoutBanners);
   vi.stubGlobal(
     "resolveLayoutBannerPresentation",
@@ -187,6 +205,44 @@ describe("DashboardBanners", () => {
     ]);
   });
 
+  it("composes a text from its parameters and draws the banner's buttons", async () => {
+    serveBanners([
+      banner({
+        key: "past-due",
+        variant: "error",
+        text: {
+          key: "saas.banner.past_due",
+          params: {
+            invoice: "INV-42",
+            amount: { type: "money", value: 2900, currency: "EUR" },
+          },
+        },
+        actions: [
+          { label: "Invoices", to: "/billing/invoices" },
+          { label: "$saas.banner.pay", to: "/billing?pay=1" },
+        ],
+      }),
+    ]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const links = [...document.querySelectorAll("a")].map((node) => ({
+      label: node.textContent,
+      href: node.getAttribute("href"),
+      color: node.getAttribute("data-action-color"),
+    }));
+
+    expect(document.body.textContent).toContain(
+      't:saas.banner.past_due:{"invoice":"INV-42","amount":"€29.00"}',
+    );
+    expect(links).toEqual([
+      { label: "Invoices", href: "/billing/invoices", color: "neutral" },
+      { label: "t:saas.banner.pay", href: "/billing?pay=1", color: "error" },
+    ]);
+  });
+
   // The server reads the same cookie, so a dismissed banner never reaches the
   // page only to be removed on hydration.
   it("leaves a dismissed banner out of the server-rendered page", async () => {

package/frontend-vue/tests/member-role-picker.test.ts

@@ -225,3 +225,29 @@ it("waits for the form's values before showing the pills", async () => {
   await mountPicker({ loading: true });
   expect(host.querySelectorAll("button[data-value]")).toHaveLength(0);
 });
+
+it("warns while a picked role amounts to owner-level access, not for an owner", async () => {
+  authFetch.mockResolvedValue({
+    ...ROLE_OPTIONS,
+    roles: ROLE_OPTIONS.roles.map((role) =>
+      role._id === "admin"
+        ? { ...role, warnings: ["$page.settings.roles.warning.members"] }
+        : role,
+    ),
+  });
+  const warning = () =>
+    host.querySelector("[data-role-owner-level]")?.textContent?.trim();
+  await mountPicker({ ownerField: "isTenantOwner" });
+
+  await toggle("Finance");
+  expect(warning()).toBeUndefined();
+
+  await toggle("Admin");
+  expect(warning()).toBe(
+    "page.settings.members.invite.roles_owner_level Admin",
+  );
+
+  formState.value = { isTenantOwner: true };
+  await flush();
+  expect(warning()).toBeUndefined();
+});

package/frontend-vue/tests/menu-hidden-page.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import { convertSiteLayoutTreeToTreeItems } from "../layers/dms-ui/app/build/types/tree";
+
+// A page the viewer may open but whose every block is hidden from them is
+// served out of the menu (`hasAccess: false`, name kept): an Invitations-only
+// role got a Members entry that opened on "nothing to show for you". The
+// pages nested under it keep their own entries, and opening it leads to the
+// first of them.
+
+type TreeNode = NonNullable<
+  Parameters<typeof convertSiteLayoutTreeToTreeItems>[0]
+>;
+
+interface NodeFixture {
+  id: string;
+  fullId: string;
+  hasAccess?: boolean;
+  layoutUrl?: string;
+  children?: NodeFixture[];
+}
+
+function node({ children = [], ...fixture }: NodeFixture): TreeNode {
+  return {
+    displayName: fixture.id,
+    fullSlug: `/${fixture.fullId.replaceAll(".", "/")}`,
+    ...fixture,
+    children: Object.fromEntries(
+      children.map((child) => [child.id, node(child)]),
+    ),
+    childrenOrders: children.map((child) => child.id),
+  } as unknown as TreeNode;
+}
+
+const page = (
+  fullId: string,
+  hasAccess = true,
+  children: NodeFixture[] = [],
+) => ({
+  id: fullId.split(".").pop()!,
+  fullId,
+  hasAccess,
+  layoutUrl: `/${fullId}/pagelayout`,
+  children,
+});
+
+function tree(members: NodeFixture, extra: NodeFixture[] = []): TreeNode {
+  return node({
+    id: "",
+    fullId: "",
+    children: [
+      {
+        id: "workspace",
+        fullId: "workspace",
+        hasAccess: true,
+        children: [members, page("workspace.roles"), ...extra],
+      },
+    ],
+  });
+}
+
+function sidebarIds(root: TreeNode): string[] {
+  const ids = (items: Array<{ fullId?: unknown; children?: unknown }>) =>
+    items.flatMap((item): string[] => [
+      String(item.fullId),
+      ...ids((item.children as typeof items | undefined) ?? []),
+    ]);
+  return ids(convertSiteLayoutTreeToTreeItems(root).flat());
+}
+
+describe("the sidebar", () => {
+  it("lists the reachable pages nested under a page left out of it", () => {
+    const root = tree(
+      page("workspace.members", false, [page("workspace.members.invites")]),
+    );
+    expect(sidebarIds(root)).toEqual([
+      "workspace",
+      "workspace.members.invites",
+      "workspace.roles",
+    ]);
+  });
+
+  it("still drops a group left out of it, with what it holds", () => {
+    const root = tree(page("workspace.members"), [
+      {
+        id: "billing",
+        fullId: "workspace.billing",
+        hasAccess: false,
+        children: [page("workspace.billing.invoices")],
+      },
+    ]);
+    expect(sidebarIds(root)).not.toContain("workspace.billing.invoices");
+  });
+});