@antelopejs/dms 0.7.20 → 0.8.0

package/frontend-vue/layers/dms-ui/app/composables/chart/useApexChart.ts

@@ -1,11 +1,13 @@
 import { computed } from "vue";
 import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
 import { buildAnnotations } from "./apexAnnotations";
-import { buildPlotOptions } from "./apexPlotOptions";
+import { buildPlotOptions, ringFitsSliceLabels } from "./apexPlotOptions";
+import { buildAutoYRange, formatPlainAxisValue } from "./apexYRange";
 import { isReducedMotionActive } from "../../build/utils/accessibilityPreferences";
 import {
   axisLabelStyle,
   buildDataLabels,
+  dataLabelOffset,
   buildGrid,
   buildLegend,
   buildMarkers,
@@ -286,36 +288,6 @@ function applySeriesStroke(
 
 const HIGH_CONTRAST_YAXIS_TYPES: ChartType[] = ["radar"];
 
-const DEFAULT_Y_RANGE_PADDING = 0.08;
-const ZERO_BOUND_MAGNITUDE = 1;
-
-function buildAutoYRange(input: UseApexChartInput): Record<string, unknown> {
-  if (!input.autoYRange || APEX_TYPE_CONFIGS[input.type].isCircular) return {};
-  const requested = input.autoYRange.padding ?? DEFAULT_Y_RANGE_PADDING;
-  const padding =
-    Number.isFinite(requested) && requested >= 0
-      ? requested
-      : DEFAULT_Y_RANGE_PADDING;
-  const bounds = (input.annotations ?? [])
-    .flatMap((annotation) => [annotation.y, annotation.y2])
-    .filter(
-      (value): value is number =>
-        typeof value === "number" && Number.isFinite(value),
-    );
-  const lower = bounds.reduce((min, value) => Math.min(min, value), Infinity);
-  const upper = bounds.reduce((max, value) => Math.max(max, value), -Infinity);
-  return {
-    min: (nativeMin: number) => {
-      const min = Math.min(nativeMin, lower);
-      return min - (Math.abs(min) || ZERO_BOUND_MAGNITUDE) * padding;
-    },
-    max: (nativeMax: number) => {
-      const max = Math.max(nativeMax, upper);
-      return max + (Math.abs(max) || ZERO_BOUND_MAGNITUDE) * padding;
-    },
-  };
-}
-
 function buildYAxis(
   input: UseApexChartInput,
   theme: ApexThemeColors,
@@ -331,9 +303,8 @@ function buildYAxis(
     yaxis.min = input.yRange.min;
     yaxis.max = input.yRange.max;
   }
-  if (input.yAxisFormatter) {
-    (yaxis.labels as Record<string, unknown>).formatter = input.yAxisFormatter;
-  }
+  (yaxis.labels as Record<string, unknown>).formatter =
+    input.yAxisFormatter ?? formatPlainAxisValue;
   return yaxis;
 }
 
@@ -387,20 +358,50 @@ function applyMixedSeriesDefs(
   });
 }
 
+const RAW_OPTION_PATH_SEPARATOR = ".";
+
+function parseRawOptionValue(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function isOptionSection(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Set `value` at a dotted path ("markers.size"), copying each section on the
+ * way so the generated options are not mutated. A key without a dot replaces
+ * its whole section, as it always has.
+ */
+function setOptionPath(
+  options: Record<string, unknown>,
+  path: string[],
+  value: unknown,
+): Record<string, unknown> {
+  const [head, ...rest] = path;
+  if (head === undefined) return options;
+  if (rest.length === 0) return { ...options, [head]: value };
+  const section = isOptionSection(options[head]) ? options[head] : {};
+  return { ...options, [head]: setOptionPath(section, rest, value) };
+}
+
 function injectRawOptions(
   options: Record<string, unknown>,
   rawOptions: Array<{ key: string; value: string }> | undefined,
 ): Record<string, unknown> {
-  if (!rawOptions || rawOptions.length === 0) return options;
-  const merged: Record<string, unknown> = { ...options };
-  for (const entry of rawOptions) {
-    try {
-      merged[entry.key] = JSON.parse(entry.value);
-    } catch {
-      merged[entry.key] = entry.value;
-    }
-  }
-  return merged;
+  return (rawOptions ?? []).reduce(
+    (merged, entry) =>
+      setOptionPath(
+        merged,
+        entry.key.split(RAW_OPTION_PATH_SEPARATOR),
+        parseRawOptionValue(entry.value),
+      ),
+    options,
+  );
 }
 
 const RANGE_AREA_APEX_TYPE = "rangeArea";
@@ -465,8 +466,11 @@ function buildBaseOptions(
     chart: buildChartConfig(input, theme.muted),
     colors: seriesColors,
     dataLabels: buildDataLabels(
-      config.supportsDataLabels || input.showLabels === true,
+      (config.supportsDataLabels || input.showLabels === true) &&
+        ringFitsSliceLabels(input),
       theme,
+      config.isCircular,
+      dataLabelOffset(input),
     ),
     stroke: buildStroke(
       input,
@@ -600,10 +604,6 @@ function applyOptionalSections(
   if (isCircular) {
     baseOptions.labels = buildCircularLabels(input.donutData).labels;
   }
-
-  if (input.type === "scatter" && input.pointSize !== undefined) {
-    baseOptions.markers = { size: input.pointSize };
-  }
 }
 
 function projectSeries(

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartTheme.ts

@@ -11,6 +11,11 @@ const SHADE_TOKEN =
 const CSS_VARIABLE = /^--[\w-]+$/;
 const CSS_VARIABLE_FUNCTION = /^var\((--[\w-]+)\)$/;
 const COLOR_CHANNEL_MAX = 255;
+const PERCENT_SCALE = 100;
+const PERCENT_SUFFIX = "%";
+/** CSS Color 4 `rgb(R G B / A)`, which Apex cannot parse: it splits on commas. */
+const SPACE_SEPARATED_RGB =
+  /^rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+%?)\s*)?\)$/i;
 const DEFAULT_PALETTE = [
   "--dms-chart-1",
   "--dms-chart-2",
@@ -34,6 +39,20 @@ function isHexLike(value: string): boolean {
   return HEX_PREFIXES.some((prefix) => value.startsWith(prefix));
 }
 
+function alphaValue(alpha: string): number {
+  if (!alpha.endsWith(PERCENT_SUFFIX)) return Number(alpha);
+  return Number(alpha.slice(0, -PERCENT_SUFFIX.length)) / PERCENT_SCALE;
+}
+
+/** Rewrite a space-separated `rgb()` in the comma form Apex reads. */
+function toCommaSeparatedRgb(color: string): string {
+  const match = SPACE_SEPARATED_RGB.exec(color);
+  if (!match) return color;
+  const [, red, green, blue, alpha] = match;
+  if (alpha === undefined) return `rgb(${red}, ${green}, ${blue})`;
+  return `rgba(${red}, ${green}, ${blue}, ${alphaValue(alpha)})`;
+}
+
 const colorProbeCache = new Map<string, string>();
 
 /** Invalidate resolved colors before consumers recompute for a theme change. */
@@ -105,7 +124,7 @@ function colorVariable(value: string): string | undefined {
 /** Resolve semantic colors, shade tokens and global CSS variables for Apex. */
 export function resolveChartColor(value: string | undefined): string {
   const colorName = value ?? DEFAULT_COLOR_NAME;
-  if (isHexLike(colorName)) return colorName;
+  if (isHexLike(colorName)) return toCommaSeparatedRgb(colorName);
   const variable = colorVariable(colorName);
   if (!variable) return colorName;
   return readCssVariable(variable, SAFE_HEX_FALLBACK);

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

@@ -76,7 +76,7 @@ export interface ConfirmOptions
  */
 export interface ConfirmFromOptions {
   /**
-   * Fill-ins of the URL's `{placeholders}` and of the dialog's texts (a
+   * Fill-ins of the URL's `{{row.X}}` tokens and of the dialog's texts (a
    * record's fields); the dialog's own `params` win in its texts.
    */
   params?: Record<string, unknown>;

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

@@ -59,4 +59,6 @@ export interface FormProps extends FormComponentProps {
   redirectOnSuccess?: string;
   /** Field of the loaded row a page form names in the breadcrumb. */
   labelKey?: string;
+  /** Without the record `fetchUrl` names, "No entry selected", no fields. */
+  requiresRecord?: boolean;
 }

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -9,10 +9,11 @@ import type { FormField, FormFieldOrGroup } from "./types/field";
 import { isFieldGroup } from "./types/field";
 import { resolveResponseToast } from "../../build/utils/responseWarning";
 import { processFieldI18n } from "../../build/utils/fieldOptionsI18n";
+import { orderFormEntries } from "../../build/composables/form/formEntryOrder";
 import {
   type ReplaceUrlVariablesContext,
   hasUrlVariables,
-  replaceUrlVariables,
+  resolveLinkVariables,
   resolveTextVariables,
   resolveUrlVariables,
 } from "../../build/utils/urlVariables";
@@ -90,16 +91,17 @@ export function cloneFormValue(
 
 /**
  * Whether a form offers to save: once it has an address and a field someone
- * can fill in, unless its `saveMode` is `none`.
+ * can fill in, unless its `saveMode` is `none`. An `action` form does
+ * something even with nothing to fill in, so it needs only the address.
  */
 export function formShowsActions(
-  options: Pick<FormProps, "saveMode" | "submitUrl">,
+  options: Pick<FormProps, "saveMode" | "submitUrl" | "kind">,
   fields: ReadonlyArray<{ disabled?: boolean }>,
 ): boolean {
   return (
     options.saveMode !== "none" &&
     !!options.submitUrl &&
-    !fields.every((field) => field.disabled)
+    (options.kind === "action" || !fields.every((field) => field.disabled))
   );
 }
 
@@ -573,7 +575,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
   );
 
   const fields = computed<FormFieldOrGroup[]>(() =>
-    props.fields.map((item) => {
+    orderFormEntries(props.fields).map((item) => {
       if (isFieldGroup(item)) {
         return {
           ...item,
@@ -770,7 +772,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     showSubmitNotice(response);
     props.onSuccessCallback?.(response, plainData);
     if (props.redirectOnSuccess) {
-      const target = replaceUrlVariables(
+      const target = resolveLinkVariables(
         props.redirectOnSuccess,
         buildUrlContext(response as Record<string, unknown> | undefined),
       );

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

@@ -31,7 +31,7 @@ export interface SidePanelTargetOptions {
  */
 export interface DownloadActionTarget {
   type: "download";
-  /** Takes the `{field}` and `{{params.X}}` / `{{query.X}}` tokens. */
+  /** Takes the `{{row.field}}` and `{{params.X}}` / `{{query.X}}` tokens. */
   url: string;
   /** Saved under; the response's `Content-Disposition` name, else the URL's. */
   filename?: string;

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

@@ -224,7 +224,7 @@ export interface TableViewSourceCapabilities {
 /** Where a `TableView.fromSource` table reads its rows (backend `source`). */
 export interface TableViewSourceConfig {
   fetchUrl: string;
-  /** Route answering one row, `{id}` its id (backend `fetchRowUrl`). */
+  /** Route answering one row, `{{row.id}}` its id (backend `fetchRowUrl`). */
   fetchRowUrl?: string;
   capabilities: TableViewSourceCapabilities;
   /** Id of the `PeriodSelector` whose period is sent to `fetchUrl`. */
@@ -294,9 +294,9 @@ export interface TableViewConfig<T extends Data>
   routeParamFilters?: RouteParamFilters;
   routeParams?: Record<string, string>;
   tabs?: TableViewTab[];
-  /** Displays this table view offers, beyond the implicit built-in `table`. */
+  /** Displays this table view offers, in order; the built-in `table` alone when left out. */
   displays?: TableViewDisplayConfig[];
-  /** Display shown by default when the user has no saved preference. Defaults to "table". */
+  /** Display shown by default when the user has no saved preference. Defaults to the first display. */
   defaultDisplay?: string;
   /** Expandable rows: caret column + detail band. */
   expandable?: TableViewExpandableConfig;

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

@@ -214,7 +214,13 @@ export interface TableViewDisplayContext<T = Record<string, unknown>> {
   items: T[];
   /** Full column metadata (types, labels, accessor keys) — for field rendering. */
   columns: TableViewColumn[];
+  /** The shared query is in flight: a first read or any re-read. */
   loading: boolean;
+  /**
+   * No answer has arrived yet: draw a skeleton. A re-read keeps the rows,
+   * or the empty state, on screen; swapping either for a skeleton flashes.
+   */
+  firstPageLoading: boolean;
 
   selection: TableViewDisplaySelection;
   pagination: TableViewDisplayPagination;

package/frontend-vue/layers/dms-ui/app/utils/bannerToneIcons.ts

@@ -0,0 +1,13 @@
+import type { SemanticColor } from "./semanticTint";
+
+/** The tones a banner washes with. */
+export type BannerTone = Exclude<SemanticColor, "neutral">;
+
+/** The icon a banner shows for its tone when it is given none. */
+export const BANNER_TONE_ICONS: Record<BannerTone, string> = {
+  info: "i-ph-info",
+  success: "i-ph-check-circle",
+  warning: "i-ph-warning",
+  error: "i-ph-warning-circle",
+  primary: "i-ph-sparkle",
+};

package/frontend-vue/layers/dms-ui/app/utils/cascader.ts

@@ -201,3 +201,29 @@ export function buildCascaderPathLabels(
   }
   return labels;
 }
+
+function asPickedRow(item: unknown): CascaderRow | undefined {
+  return typeof item === "object" && item !== null
+    ? (item as CascaderRow)
+    : undefined;
+}
+
+/**
+ * The label path of a picked value — an id, or a row carrying its id and its
+ * own label — resolved against the flat list of rows once it is there; its
+ * own label, or its id, until then or when the list does not hold it.
+ */
+export function cascaderValuePath(
+  item: unknown,
+  keyMapping: CascaderKeyMapping,
+  rows?: CascaderRow[],
+): string[] {
+  const row = asPickedRow(item);
+  const ownLabel = row ? rowValue(row, keyMapping.label) : undefined;
+  const id = row
+    ? rowValue(row, keyMapping.value)
+    : rowValue({ id: item }, "id");
+  if (!id) return ownLabel ? [ownLabel] : [];
+  const labels = rows ? buildCascaderPathLabels(rows, keyMapping, id) : [];
+  return labels.length > 0 ? labels : [ownLabel ?? id];
+}

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -284,6 +284,8 @@
         "error_description": "Check your connection, then try again. Nothing can be saved until the entry loads.",
         "forbidden_title": "You can't view this entry",
         "forbidden_description": "Your role doesn't let you view this entry, so the form can't open on its current values. Ask an administrator for access.",
+        "missing_title": "No entry selected",
+        "missing_description": "This form shows one entry, and the address names none. Open it from an entry to see its values.",
         "retry": "Try again"
       },
       "select_date": "Select date",
@@ -335,6 +337,8 @@
       },
       "file": {
         "count": "{count} file(s)",
+        "drop_prompt": "Drop a file or browse",
+        "drop_prompt_multiple": "Drop files or browse",
         "max_size": "Max size: {size}",
         "uploaded_files": "Uploaded files",
         "rejected_title": "File not added",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -285,6 +285,8 @@
         "error_description": "Vérifiez votre connexion, puis réessayez. Rien ne peut être enregistré tant que l'élément n'est pas chargé.",
         "forbidden_title": "Vous ne pouvez pas voir cet élément",
         "forbidden_description": "Votre rôle ne vous permet pas de voir cet élément, le formulaire ne peut donc pas s'ouvrir sur ses valeurs actuelles. Demandez l'accès à un administrateur.",
+        "missing_title": "Aucun élément sélectionné",
+        "missing_description": "Ce formulaire affiche un élément, et l'adresse n'en désigne aucun. Ouvrez-le depuis un élément pour voir ses valeurs.",
         "retry": "Réessayer"
       },
       "select_date": "Sélectionner une date",
@@ -336,6 +338,8 @@
       },
       "file": {
         "count": "{count} fichier(s)",
+        "drop_prompt": "Glisser un fichier ou parcourir",
+        "drop_prompt_multiple": "Glisser des fichiers ou parcourir",
         "max_size": "Taille max : {size}",
         "uploaded_files": "Fichiers téléversés",
         "rejected_title": "Fichier non ajouté",

package/frontend-vue/tests/activity-feed-fill-height.test.ts

@@ -87,6 +87,13 @@ it("keeps each day's separator on top of the scrolled entries", async () => {
   expect(html).toMatch(/<div[^>]*class="[^"]*\bsticky top-0\b[^"]*"[^>]*><h3/);
 });
 
+it("keeps the fold button in sight at the foot of the scrolled entries", async () => {
+  const html = await render({ fillHeight: true, visibleItems: 3 });
+  expect(html).toMatch(
+    /class="dms-activity-feed__fold[^"]*\bsticky bottom-0\b[^"]*"/,
+  );
+});
+
 it("names the region after the feed when it has no title", async () => {
   const area = scrollArea(await render({ fillHeight: true, title: undefined }));
   expect(area).toContain('aria-label="dms.activity_feed.list_label"');

package/frontend-vue/tests/banner-tone-icon.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+/**
+ * A DmsBanner given no icon shows its tone's, as the Banner block does: a
+ * check on success, an "i" on info. An icon given wins.
+ */
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, expect, it, vi } from "vitest";
+
+vi.mock("../layers/dms-ui/app/components/icon-well/IconWell.vue", () => ({
+  default: defineComponent({
+    props: { icon: { type: String, default: undefined } },
+    setup: (props) => () => h("i", { "data-icon": props.icon }),
+  }),
+}));
+
+const { default: DmsBanner } = await import(
+  "../layers/dms-ui/app/components/banner/Banner.vue"
+);
+
+const UAlert = defineComponent({
+  setup:
+    (_props, { slots }) =>
+    () =>
+      h("div", [slots.leading?.()]),
+});
+
+let app: App | undefined;
+
+afterEach(() => app?.unmount());
+
+function iconOf(props: Record<string, unknown>): string | null {
+  const host = document.createElement("div");
+  app = createApp({ render: () => h(DmsBanner, { title: "Notice", ...props }) });
+  app.component("UAlert", UAlert);
+  app.mount(host);
+  return host.querySelector("[data-icon]")?.getAttribute("data-icon") ?? null;
+}
+
+it.each([
+  ["warning", "i-ph-warning"],
+  ["success", "i-ph-check-circle"],
+  ["info", "i-ph-info"],
+  ["error", "i-ph-warning-circle"],
+  ["primary", "i-ph-sparkle"],
+])("shows the %s tone's icon when given none", (tone, icon) => {
+  expect(iconOf({ tone })).toBe(icon);
+});
+
+it("keeps the warning icon of its default tone", () => {
+  expect(iconOf({})).toBe("i-ph-warning");
+});
+
+it("shows the icon it is given whatever the tone", () => {
+  expect(iconOf({ tone: "success", icon: "i-ph-rocket" })).toBe("i-ph-rocket");
+});

package/frontend-vue/tests/builtin-emails.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it, vi } from "vitest";
+import { type Component, createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createI18n } from "vue-i18n";
+import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
+import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
+
+interface EmailModule {
+  default: Component;
+}
+
+const emailModules = import.meta.glob<EmailModule>(
+  "../layers/dms-layout/app/emails/*.vue",
+  { eager: true },
+);
+
+const PUBLIC_BASE = "https://admin.example.com";
+const PUBLIC_PNG_LOGO = "/images/logo.png";
+const SVG_LOGO = "/images/logo.svg";
+const ELEMENTS: Record<string, string> = {
+  EHtml: "html",
+  EHead: "head",
+  EBody: "body",
+  EContainer: "div",
+  ESection: "section",
+  EHeading: "h1",
+  EText: "p",
+  EButton: "a",
+  EImg: "img",
+  EHr: "hr",
+  EPreview: "span",
+};
+
+function element(tag: string) {
+  return defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { attrs, slots }) =>
+      () =>
+        h(tag, { src: attrs.src }, slots.default?.()),
+  });
+}
+
+function templateName(path: string): string {
+  return path.split("/").pop()?.replace(".vue", "") ?? path;
+}
+
+const EMAIL_PROPS = {
+  userName: "Ada",
+  newEmail: "ada@new.test",
+  expiresIn: "24 hours",
+  expiresInHours: 24,
+  partial: true,
+  failedSources: ["media"],
+};
+
+async function renderEmail(
+  component: Component,
+  logo: string,
+  locale = "en",
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    branding: { logo: { default: { light: logo } } },
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { clientBaseUrl: PUBLIC_BASE } },
+  }));
+  const app = createSSRApp(component, EMAIL_PROPS);
+  app.use(
+    createI18n({
+      legacy: false,
+      locale,
+      fallbackLocale: "en",
+      messages: { en, fr },
+    }),
+  );
+  Object.entries(ELEMENTS).forEach(([name, tag]) =>
+    app.component(name, element(tag)),
+  );
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html;
+}
+
+const templates = Object.entries(emailModules).map(
+  ([path, module]) => [templateName(path), module.default] as const,
+);
+
+describe("built-in emails", () => {
+  it.each(templates)(
+    "%s leaves out a logo mail clients cannot load",
+    async (_name, component) => {
+      const html = await renderEmail(component, SVG_LOGO);
+      expect(html).not.toContain("<img");
+    },
+  );
+
+  it.each(templates)("%s draws a public PNG logo", async (_name, component) => {
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO);
+    expect(html).toContain(`<img src="${PUBLIC_BASE}${PUBLIC_PNG_LOGO}"`);
+  });
+
+  it.each(templates)("%s is written in French", async (_name, component) => {
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO, "fr");
+    expect(html).toContain("Bonjour");
+    expect(html).not.toMatch(/Hello|If you/);
+  });
+
+  it("words the code lifetime in the recipient's language", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailResetPassword",
+    )!;
+    expect(await renderEmail(component, PUBLIC_PNG_LOGO)).toContain(
+      "This code expires in 24 hours.",
+    );
+    expect(await renderEmail(component, PUBLIC_PNG_LOGO, "fr")).toContain(
+      "Ce code expire dans 24 heures.",
+    );
+  });
+
+  it("marks a partial export in French", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailExportReady",
+    )!;
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO, "fr");
+    expect(html).toContain("<strong>incomplet</strong>");
+    expect(html.replace(/<!--[^>]*-->/g, "")).toContain("— media.");
+  });
+
+  it("puts the two-factor disclaimer under the separator", async () => {
+    const [, component] = templates.find(
+      ([name]) => name === "EmailTwoFactor",
+    )!;
+    const html = await renderEmail(component, PUBLIC_PNG_LOGO);
+    const separator = html.indexOf("<hr>");
+    expect(separator).toBeGreaterThan(-1);
+    expect(html.indexOf("If you did not attempt to sign in")).toBeGreaterThan(
+      separator,
+    );
+  });
+});

package/frontend-vue/tests/cascader.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   buildCascaderPathLabels,
   buildCascaderTree,
+  cascaderValuePath,
   findCascaderNode,
   flattenCascaderTree,
   formatCascaderPath,
@@ -177,6 +178,32 @@ describe("buildCascaderPathLabels", () => {
   });
 });
 
+describe("cascaderValuePath", () => {
+  it("resolves a picked id, or a picked row, to its path", () => {
+    expect(cascaderValuePath("speakers", keyMapping, categories)).toEqual([
+      "Electronics",
+      "Audio",
+      "Speakers",
+    ]);
+    expect(
+      cascaderValuePath({ _id: "tv", name: "TV" }, keyMapping, categories),
+    ).toEqual(["Electronics", "Video", "TV"]);
+  });
+
+  it("shows a picked row's own label, or its id, until the rows are there", () => {
+    expect(cascaderValuePath({ _id: "tv", name: "TV" }, keyMapping)).toEqual([
+      "TV",
+    ]);
+    expect(cascaderValuePath("tv", keyMapping)).toEqual(["tv"]);
+    expect(cascaderValuePath("nope", keyMapping, categories)).toEqual(["nope"]);
+  });
+
+  it("has no path for nothing picked", () => {
+    expect(cascaderValuePath(null, keyMapping, categories)).toEqual([]);
+    expect(cascaderValuePath({ name: "Loose" }, keyMapping)).toEqual(["Loose"]);
+  });
+});
+
 describe("resolveCascaderKeyMapping", () => {
   it("falls back to default keys", () => {
     expect(resolveCascaderKeyMapping()).toEqual({