@antelopejs/dms 0.4.4 → 0.4.6

package/frontend-vue/layers/dms-ui/app/composables/tab/types/props.ts

@@ -1,8 +1,10 @@
 import type { TabItem } from "./item";
 
+// A tab set is also used directly in hand-written pages, outside any
+// registered component: the ids exist only for server-driven ones.
 interface TabComponentProps {
-  componentId: string;
-  pageId: string;
+  componentId?: string;
+  pageId?: string;
   routeParams?: Record<string, string>;
   watchActions?: WatchAction[];
   childCount?: number;

package/frontend-vue/layers/dms-ui/app/composables/tab/useTab.ts

@@ -80,14 +80,14 @@ export function useTab(
   };
 
   watch(activeTab, async (newTab, oldTab) => {
-    if (newTab !== oldTab) {
+    if (newTab === oldTab) return;
+    if (props.componentId) {
       sendComponentEvent(TabEvents.TAB_CHANGE, props.componentId, {
         previousTab: Number.parseInt(oldTab, 10),
         currentTab: Number.parseInt(newTab, 10),
       });
-
-      await updateUrl(newTab);
     }
+    await updateUrl(newTab);
   });
 
   watch(

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/column.ts

@@ -19,7 +19,7 @@ export interface ReadonlyBehavior {
 export interface TableViewColumn {
   id: string;
   header: string;
-  visible?: boolean;
+  isVisible?: boolean;
   order?: number;
   accessorKey: string;
   listable: boolean;

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/custom-button.ts

@@ -3,6 +3,8 @@ import type { ActionTarget } from "./action-target";
 export type CustomButtonVariant = "solid" | "outline" | "ghost" | "link";
 
 export interface CustomButton {
+  /** Set when a quick action can press the button. */
+  id?: string;
   label: string;
   icon?: string;
   variant?: CustomButtonVariant;

package/frontend-vue/layers/dms-ui/app/types/quick-actions.ts

@@ -1,7 +1,7 @@
 /**
- * How an `openForm` quick action reaches its table view: it routes to the
- * action's page with these query parameters, and the table view opens its
- * creation form when it mounts. Carried by the URL rather than a window event
+ * How an `openForm` or `button` quick action reaches its table view: it routes
+ * to the action's page with these query parameters, and the table view opens
+ * its creation form, or presses the named button, when it mounts. Carried by the URL rather than a window event
  * so the action works from any page — the listener would otherwise have to
  * exist before the navigation that creates it.
  */
@@ -9,3 +9,38 @@ export const QUICK_ACTION_QUERY_KEY = "quickAction";
 export const QUICK_ACTION_ADD = "add";
 /** Which table view answers, when the page mounts more than one. */
 export const QUICK_ACTION_COMPONENT_KEY = "quickActionComponent";
+export const QUICK_ACTION_BUTTON = "button";
+/** Which of the table view's custom buttons a `button` quick action presses. */
+export const QUICK_ACTION_BUTTON_KEY = "quickActionButton";
+
+export type QuickActionIntent =
+  | { kind: "add" }
+  | { kind: "button"; button: string };
+
+type QuickActionQuery = Record<string, unknown>;
+
+const intentReaders: Record<
+  string,
+  (query: QuickActionQuery) => QuickActionIntent | undefined
+> = {
+  [QUICK_ACTION_ADD]: () => ({ kind: "add" }),
+  [QUICK_ACTION_BUTTON]: (query) => {
+    const button = query[QUICK_ACTION_BUTTON_KEY];
+    return typeof button === "string" ? { kind: "button", button } : undefined;
+  },
+};
+
+/**
+ * What the route asks the table view `componentId` to run. A page may mount
+ * several table views, so the quick action always names the one it means —
+ * resolved server-side — and only that one answers.
+ */
+export function readQuickActionIntent(
+  query: QuickActionQuery,
+  componentId: string | undefined,
+): QuickActionIntent | undefined {
+  if (query[QUICK_ACTION_COMPONENT_KEY] !== componentId) return undefined;
+  const action = query[QUICK_ACTION_QUERY_KEY];
+  if (typeof action !== "string") return undefined;
+  return intentReaders[action]?.(query);
+}

package/frontend-vue/tests/admin-invite-email.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createI18n } from "vue-i18n";
+import AdminInvite from "../layers/dms-layout/app/emails/EmailAdminInvite.vue";
+import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
+import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
+
+const EMAIL_ELEMENTS = ["EHtml", "EHead", "EBody", "EContainer", "ESection"];
+const LEAF_ELEMENTS = ["EText", "EHeading", "EButton"];
+
+function passthrough(tag: string) {
+  return defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        h(tag, slots.default?.()),
+  });
+}
+
+async function renderInvite(
+  props: Record<string, unknown>,
+  locale = "en",
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({}));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({ public: {} }));
+  const app = createSSRApp(AdminInvite, {
+    email: "invitee@local.test",
+    signupLink: "https://app.local/auth/signup?token=t",
+    expiresInDays: 7,
+    ...props,
+  });
+  app.use(
+    createI18n({
+      legacy: false,
+      locale,
+      fallbackLocale: "en",
+      messages: { en, fr },
+    }),
+  );
+  EMAIL_ELEMENTS.forEach((name) => app.component(name, passthrough("div")));
+  LEAF_ELEMENTS.forEach((name) => app.component(name, passthrough("p")));
+  app.component("EImg", passthrough("img"));
+  app.component("EHr", passthrough("hr"));
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html.replace(/<!--[^>]*-->/g, "").replace(/&#39;/g, "'");
+}
+
+describe("EmailAdminInvite", () => {
+  it("keeps today's generic wording without any name", async () => {
+    const html = await renderInvite({});
+    expect(html).toContain("You're Invited!");
+    expect(html).toContain(
+      "You've been invited to join our platform. Click the button below to create your account:",
+    );
+    expect(html).toContain("This invitation expires in 7 days.");
+  });
+
+  it("names the workspace, the platform and the inviter", async () => {
+    const html = await renderInvite({
+      workspaceName: "Storefront",
+      platformName: "Acme",
+      inviterName: "Ada",
+    });
+    expect(html).toContain("You're invited to Storefront");
+    expect(html).toContain("Ada invited you to join Storefront on Acme.");
+  });
+
+  it("names the platform when the workspace is unknown", async () => {
+    const html = await renderInvite({ platformName: "Acme" });
+    expect(html).toContain("You've been invited to join Acme.");
+  });
+
+  it("writes the email in French", async () => {
+    const html = await renderInvite(
+      { workspaceName: "Storefront", platformName: "Acme" },
+      "fr",
+    );
+    expect(html).toContain("Vous êtes invité à rejoindre Storefront");
+    expect(html).toContain(
+      "Vous avez été invité à rejoindre Storefront sur Acme.",
+    );
+    expect(html).toContain("Cette invitation expire dans 7 jours.");
+  });
+});

package/frontend-vue/tests/api-error-title.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { resolveApiErrorTitle } from "../layers/dms-core/app/composables/useApiError";
+
+describe("resolveApiErrorTitle", () => {
+  it("titles a 4xx response as a refused request", () => {
+    expect(resolveApiErrorTitle({ statusCode: 403 })).toBe(
+      "error.request_refused.title",
+    );
+    expect(resolveApiErrorTitle({ status: 422 })).toBe(
+      "error.request_refused.title",
+    );
+  });
+
+  it("titles a 5xx response as a server error", () => {
+    expect(resolveApiErrorTitle({ statusCode: 502 })).toBe("error.500.title");
+  });
+
+  it("titles an error without a status as a server error", () => {
+    expect(resolveApiErrorTitle(new Error("network down"))).toBe(
+      "error.500.title",
+    );
+    expect(resolveApiErrorTitle(undefined)).toBe("error.500.title");
+  });
+});

package/frontend-vue/tests/auth-middleware-error.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type Middleware = (to: unknown) => Promise<unknown>;
+
+const pageError = { value: null as { statusCode: number } | null };
+const navigateDms = vi.fn();
+
+beforeEach(() => {
+  vi.resetModules();
+  vi.stubGlobal("defineDmsMiddleware", (handler: Middleware) => handler);
+  vi.stubGlobal("useError", () => pageError);
+  vi.stubGlobal("abortNavigation", () => false);
+  vi.stubGlobal("navigateDms", navigateDms);
+  vi.stubGlobal("useSiteLayout", () => ({
+    siteLayout: { value: {} },
+    findMatchingRoute: () => ({ metadata: {} }),
+  }));
+  vi.stubGlobal("useUserSession", () => ({ loggedIn: { value: false } }));
+});
+
+afterEach(() => {
+  pageError.value = null;
+  navigateDms.mockReset();
+  vi.unstubAllGlobals();
+});
+
+async function loadMiddleware(): Promise<Middleware> {
+  const module = await import("../layers/dms-auth/app/middleware/auth");
+  return module.default as unknown as Middleware;
+}
+
+const privateRoute = {
+  path: "/projects/project",
+  fullPath: "/projects/project",
+  matched: [{}],
+  meta: { auth: true },
+};
+
+describe("auth middleware", () => {
+  it("aborts without throwing when the page already raised an error", async () => {
+    pageError.value = { statusCode: 404 };
+    const middleware = await loadMiddleware();
+
+    await expect(middleware(privateRoute)).resolves.toBe(false);
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+
+  it("still sends a signed-out visitor to the login page", async () => {
+    const middleware = await loadMiddleware();
+
+    await middleware(privateRoute);
+
+    expect(navigateDms).toHaveBeenCalledWith({
+      path: "/auth",
+      query: { redirect: "/projects/project" },
+    });
+  });
+});

package/frontend-vue/tests/breadcrumb-target.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { buildBreadcrumbTarget } from "../layers/dms-layout/app/utils/breadcrumb";
+
+const PAGE = { layoutUrl: "/projects/project/pagelayout" };
+const PROJECT_PAGE = {
+  ...PAGE,
+  validation: { requiredQueryParams: ["project"] },
+};
+
+describe("buildBreadcrumbTarget", () => {
+  it("links a page without query requirements to its bare path", () => {
+    expect(
+      buildBreadcrumbTarget("/projects", PAGE, { project: "p1" }),
+    ).to.equal("/projects");
+  });
+
+  it("gives a category without a page no link", () => {
+    expect(buildBreadcrumbTarget("/projects", {}, {})).to.equal(undefined);
+  });
+
+  it("carries only the query values an ancestor page requires", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: "p 1&x",
+        service: "s1",
+      }),
+    ).to.equal("/projects/project?project=p+1%26x");
+  });
+
+  it("gives no link when a required query value is missing", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        service: "s1",
+      }),
+    ).to.equal(undefined);
+  });
+
+  it("gives no link when a required query value is empty or repeated", () => {
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: "",
+      }),
+    ).to.equal(undefined);
+    expect(
+      buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {
+        project: ["a", "b"],
+      }),
+    ).to.equal(undefined);
+  });
+});

package/frontend-vue/tests/button-disabled-theme.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { twMerge } from "tailwind-merge";
+import appConfig from "../layers/dms-layout/app/app.config";
+
+// Nuxt UI 4's own button base, which the app config is merged over.
+const NUXT_UI_BUTTON_BASE =
+  "rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75";
+
+describe("button theme", () => {
+  const merged = twMerge(NUXT_UI_BUTTON_BASE, appConfig.ui.button.slots.base);
+
+  it("fades disabled buttons past Nuxt UI's default", () => {
+    expect(merged).toContain("disabled:opacity-50");
+    expect(merged).toContain("aria-disabled:opacity-50");
+    expect(merged).not.toContain("opacity-75");
+  });
+
+  it("cancels the press effect on a disabled button", () => {
+    expect(merged).toContain("disabled:active:scale-100");
+  });
+});

package/frontend-vue/tests/chart-nested-donut.test.ts

@@ -0,0 +1,97 @@
+import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
+import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
+import type { ChartType } from "../layers/dms-ui/app/composables/chart/types";
+
+const CARD_SERIES = [
+  {
+    name: "Plans",
+    data: [
+      { x: "Starter", y: 3 },
+      { x: "Pro", y: 5, label: "Pro plan" },
+    ],
+  },
+];
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: (options: { fetchUrl?: string }) => ({
+    data: ref(options.fetchUrl ? { value: 8, series: CARD_SERIES } : null),
+    isLoading: ref(false),
+  }),
+}));
+
+interface CircularOptions {
+  labels?: string[];
+}
+
+const PlotProbe = defineComponent({
+  props: {
+    options: { type: Object as PropType<CircularOptions>, required: true },
+    series: { type: Array as PropType<unknown[]>, required: true },
+  },
+  setup: (props) => () =>
+    h("output", [
+      h("span", { class: "labels" }, JSON.stringify(props.options.labels)),
+      h("span", { class: "series" }, JSON.stringify(props.series)),
+    ]),
+});
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const SLOT_COMPONENTS = [
+  "DmsCard",
+  "DmsClientOnly",
+  "UIcon",
+  "USkeleton",
+  "DmsTrendBadge",
+  "DmsSparkline",
+  "UBadge",
+];
+
+async function renderNested(type: ChartType) {
+  const app = createSSRApp({
+    render: () =>
+      h(
+        ChartCard,
+        {
+          title: "Plans",
+          componentId: "card",
+          pageId: "donut",
+          fetchUrl: "/plans",
+        },
+        () => h(Chart, { type, componentId: "plot", pageId: "donut" }),
+      ),
+  });
+  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
+  app.component("DmsApexChartHost", PlotProbe);
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("circular chart nested in a ChartCard", () => {
+  it.each<ChartType>(["donut", "pie"])(
+    "draws the card's first series as %s slices",
+    async (type) => {
+      const html = await renderNested(type);
+      expect(html).not.toContain("dms.chart.no_data");
+      expect(html).toContain(
+        'class="labels">[&quot;Starter&quot;,&quot;Pro plan&quot;]',
+      );
+      expect(html).toContain(`class="series">[3,5]`);
+    },
+  );
+});

package/frontend-vue/tests/error-page-message.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  type App,
+} from "vue";
+import ErrorPage from "../layers/dms-layout/app/error.vue";
+import {
+  HTTP_FORBIDDEN,
+  HTTP_NOT_FOUND,
+  HTTP_UNAUTHORIZED,
+} from "../layers/dms-core/app/utils/http-status";
+
+const TECHNICAL_MESSAGE = "DMS backend request failed";
+
+let app: App;
+let host: HTMLDivElement;
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+function installRuntime() {
+  Object.entries({
+    computed,
+    ref,
+    onMounted,
+    HTTP_FORBIDDEN,
+    HTTP_NOT_FOUND,
+    HTTP_UNAUTHORIZED,
+  }).forEach(([key, value]) => vi.stubGlobal(key, value));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useDmsRouter", () => ({ back: vi.fn() }));
+  vi.stubGlobal("useHomepage", () => "/");
+  vi.stubGlobal("useSessionRecovery", () => ({
+    loggedIn: ref(true),
+    reconcileSession: vi.fn(),
+    redirectToAuth: vi.fn(),
+  }));
+}
+
+function mountError(statusCode: number) {
+  app = createApp(ErrorPage, {
+    error: { statusCode, message: TECHNICAL_MESSAGE },
+  });
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("DmsAppLogo", Passthrough);
+  app.component("DmsCard", Passthrough);
+  app.component("Icon", Passthrough);
+  app.component("UButton", Passthrough);
+  app.mount(host);
+  return host.textContent ?? "";
+}
+
+beforeEach(() => {
+  installRuntime();
+  host = document.createElement("div");
+});
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it.each([HTTP_NOT_FOUND, HTTP_FORBIDDEN])(
+  "keeps the technical cause off the %i card",
+  (statusCode) => {
+    const text = mountError(statusCode);
+    expect(text).toContain(`error.${statusCode}.description`);
+    expect(text).not.toContain(TECHNICAL_MESSAGE);
+  },
+);
+
+it("still shows the message of an unexpected error", () => {
+  expect(mountError(500)).toContain(TECHNICAL_MESSAGE);
+});

package/frontend-vue/tests/favorite-page.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildFavoritePage,
+  isFavoritePathValid,
+} from "../layers/dms-layout/app/utils/favorites";
+
+const translate = (text: string) =>
+  text.startsWith("$") ? `t(${text.slice(1)})` : text;
+
+const SETTINGS_PAGE = {
+  id: "settings",
+  displayName: "$page.settings.title",
+  icon: "i-ph-gear",
+};
+const PROJECT_PAGE = {
+  id: "project",
+  displayName: "$cloud.project.title",
+  icon: "i-ph-cube",
+  validation: { requiredQueryParams: ["project"] },
+};
+
+const ROUTES: Record<string, typeof SETTINGS_PAGE | typeof PROJECT_PAGE> = {
+  "/settings": SETTINGS_PAGE,
+  "/projects/project": PROJECT_PAGE,
+};
+const resolveRoute = (path: string) =>
+  ROUTES[path] ? { metadata: ROUTES[path] } : null;
+
+describe("buildFavoritePage", () => {
+  it("keeps a plain page on its path and its translatable display name", () => {
+    expect(
+      buildFavoritePage({
+        path: "/settings",
+        metadata: SETTINGS_PAGE,
+        query: { tab: "general" },
+        translate,
+      }),
+    ).toEqual({
+      id: "settings",
+      path: "/settings",
+      title: "$page.settings.title",
+      icon: "i-ph-gear",
+    });
+  });
+
+  it("keeps the query a page requires and names it after the page and its values", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project",
+        metadata: PROJECT_PAGE,
+        query: { project: "p 1", service: "s1" },
+        translate,
+      }),
+    ).toEqual({
+      id: "/projects/project?project=p+1",
+      path: "/projects/project?project=p+1",
+      title: "t(cloud.project.title) · p 1",
+      icon: "i-ph-cube",
+    });
+  });
+
+  it("joins every required query value in the title", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project/service",
+        metadata: {
+          ...PROJECT_PAGE,
+          validation: { requiredQueryParams: ["project", "service"] },
+        },
+        query: { project: "p1", service: "s1" },
+        translate,
+      })?.title,
+    ).toBe("t(cloud.project.title) · p1 · s1");
+  });
+
+  it("gives no favorite when a required query value is missing", () => {
+    expect(
+      buildFavoritePage({
+        path: "/projects/project",
+        metadata: PROJECT_PAGE,
+        query: {},
+        translate,
+      }),
+    ).toBe(null);
+  });
+});
+
+describe("isFavoritePathValid", () => {
+  it("accepts favorites of plain pages, with or without a query", () => {
+    expect(isFavoritePathValid("/settings", resolveRoute)).toBe(true);
+    expect(isFavoritePathValid("/settings?tab=x", resolveRoute)).toBe(true);
+  });
+
+  it("accepts a favorite carrying the query its page requires", () => {
+    expect(
+      isFavoritePathValid("/projects/project?project=p+1", resolveRoute),
+    ).toBe(true);
+  });
+
+  it("drops favorites that match no page or lack a required query value", () => {
+    expect(isFavoritePathValid("/unknown", resolveRoute)).toBe(false);
+    expect(isFavoritePathValid("/projects/project", resolveRoute)).toBe(false);
+  });
+});

package/frontend-vue/tests/icon-aria-hidden.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const ICON_TAG = /<(?:UIcon|Icon)\b[^>]*?>/gs;
+const STATIC_ARIA_HIDDEN = /(?<![:\w-])aria-hidden=/;
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+describe("icon aria-hidden bindings", () => {
+  // The icon hands its attributes to Iconify's component, whose `ariaHidden`
+  // prop is a Boolean: a static attribute reaches it as the string "true".
+  it("binds aria-hidden on icons as a boolean", () => {
+    const offenders = walk(join(process.cwd(), "layers"))
+      .filter((path) => path.endsWith(".vue"))
+      .flatMap((path) =>
+        [...readFileSync(path, "utf8").matchAll(ICON_TAG)]
+          .filter(([tag]) => STATIC_ARIA_HIDDEN.test(tag))
+          .map(() => relative(process.cwd(), path)),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+});