@antelopejs/dms 0.7.9 → 0.7.10

package/frontend-vue/layers/dms-core/app/composables/period/presetResolvers.ts

@@ -67,7 +67,7 @@ function endOfYear(date: Date, yearOffset = 0): Date {
 
 const PRESET_RANGE_RESOLVERS: Record<
   Exclude<PeriodPreset, "custom">,
-  (now: Date) => PeriodRange
+  (now: Date) => PeriodRange | null
 > = {
   "last-hour": (now) => ({ from: addHours(now, -1), to: now }),
   "last-24h": (now) => ({ from: addDays(now, -1), to: now }),
@@ -112,6 +112,7 @@ const PRESET_RANGE_RESOLVERS: Record<
     from: startOfYear(now, -1),
     to: endOfYear(now, -1),
   }),
+  all: () => null,
 };
 
 const RELATIVE_PRESETS = new Set<PeriodPreset>(["last-hour", "last-24h"]);
@@ -130,13 +131,13 @@ export function isRelativePreset(preset: PeriodPreset): boolean {
  *
  * Calendar presets snap to day boundaries (start-of-day to end-of-day), while
  * the relative ones (`last-hour`, `last-24h`) keep instant bounds so an ops
- * dashboard can read sub-day granularity.
+ * dashboard can read sub-day granularity. `all` has no bounds: `null`.
  */
 export function resolvePresetRange(
   preset: PeriodPreset,
   now: Date,
   fallbackRange: PeriodRange,
-): PeriodRange {
+): PeriodRange | null {
   if (preset === "custom") return fallbackRange;
   return PRESET_RANGE_RESOLVERS[preset](now);
 }

package/frontend-vue/layers/dms-core/app/composables/period/types.ts

@@ -12,6 +12,7 @@ export type PeriodPreset =
   | "last-quarter"
   | "ytd"
   | "last-year"
+  | "all"
   | "custom";
 
 export type PeriodComparison =
@@ -28,7 +29,8 @@ export interface PeriodRange {
 export interface PeriodState {
   preset: PeriodPreset;
   comparison: PeriodComparison;
-  range: PeriodRange;
+  /** The window, or `null` for `all`: every period, with no bounds. */
+  range: PeriodRange | null;
   compareRange: PeriodRange | null;
   key: string;
 }

package/frontend-vue/layers/dms-core/app/composables/period/usePeriod.ts

@@ -100,8 +100,8 @@ function buildKey(state: Omit<PeriodState, "key">): string {
   return [
     state.preset,
     state.comparison,
-    state.range.from.toISOString(),
-    state.range.to.toISOString(),
+    state.range ? state.range.from.toISOString() : "-",
+    state.range ? state.range.to.toISOString() : "-",
     state.compareRange ? state.compareRange.from.toISOString() : "-",
     state.compareRange ? state.compareRange.to.toISOString() : "-",
   ].join("|");

package/frontend-vue/layers/dms-core/app/composables/period/usePeriodScope.ts

@@ -67,14 +67,21 @@ export function usePeriodScope(
   });
 }
 
+/**
+ * `url` with `state` as query parameters: `from` / `to`, `compareFrom` /
+ * `compareTo` when a comparison range is set, `preset` and `comparison`.
+ * Every period (`all`) has no bounds, so it sends no `from` / `to`.
+ */
 export function appendPeriodToUrl(
   url: string | undefined,
   state: PeriodState | null,
 ): string | undefined {
   if (!url || !state) return url;
   const params = new URLSearchParams();
-  params.set("from", state.range.from.toISOString());
-  params.set("to", state.range.to.toISOString());
+  if (state.range) {
+    params.set("from", state.range.from.toISOString());
+    params.set("to", state.range.to.toISOString());
+  }
   if (state.compareRange) {
     params.set("compareFrom", state.compareRange.from.toISOString());
     params.set("compareTo", state.compareRange.to.toISOString());

package/frontend-vue/layers/dms-core/app/composables/realtime/usePageRealtime.ts

@@ -12,27 +12,59 @@ export interface PageRealtimeApi {
   pageId: Ref<string | undefined>;
 }
 
+interface PageClaim {
+  pageId: string | undefined;
+}
+
+/**
+ * Every mounted page instance holding a page id, in the order each last set it.
+ * A page remounted at the same path (only its query changed) sets up its new
+ * instance before or after the old one is disposed, depending on the
+ * transition; the session follows the latest live claim, so neither order
+ * drops the page.
+ */
+const pageClaims: PageClaim[] = [];
+
+const applyLatestClaim = (user: UserRealtimeApi): void => {
+  void user.setPage(pageClaims.at(-1)?.pageId ?? null);
+};
+
+const raiseClaim = (claim: PageClaim): void => {
+  const index = pageClaims.indexOf(claim);
+  if (index !== -1) pageClaims.splice(index, 1);
+  pageClaims.push(claim);
+};
+
+const dropClaim = (claim: PageClaim): void => {
+  const index = pageClaims.indexOf(claim);
+  if (index !== -1) pageClaims.splice(index, 1);
+};
+
 export function usePageRealtime(
   pageId: MaybeRefOrGetter<string>,
 ): PageRealtimeApi {
   const user: UserRealtimeApi = useUserRealtime();
   const resolvedPageId = computed(() => toValue(pageId) || undefined);
-  let lastSet: string | undefined;
-
-  watch(
-    resolvedPageId,
-    (next) => {
-      lastSet = next;
-      void user.setPage(next ?? null);
-    },
-    { immediate: true },
-  );
-
-  onScopeDispose(() => {
-    if (user.pageId.value === lastSet) {
-      void user.setPage(null);
-    }
-  });
+
+  if (import.meta.env.SSR) {
+    // No dispose runs on the server, so a claim there would never be released.
+    void user.setPage(resolvedPageId.value ?? null);
+  } else {
+    const claim: PageClaim = { pageId: undefined };
+    watch(
+      resolvedPageId,
+      (next) => {
+        claim.pageId = next;
+        raiseClaim(claim);
+        applyLatestClaim(user);
+      },
+      { immediate: true },
+    );
+    onScopeDispose(() => {
+      dropClaim(claim);
+      applyLatestClaim(user);
+    });
+  }
 
   return {
     subscribe: user.subscribe,

package/frontend-vue/layers/dms-core/app/composables/realtime/useUserRealtime.ts

@@ -60,6 +60,7 @@ interface UserRealtimeState {
   appliedPageId: Ref<string | null>;
   handlers: Map<string, Set<RealtimeTopicHandler>>;
   snapshots: Map<string, RealtimeSnapshotEvent>;
+  reconciling: Promise<void>;
   cancelConnect?: () => void;
 }
 
@@ -247,7 +248,7 @@ const callPageEndpoint = async (
   });
 };
 
-const reconcilePage = async (
+const applyDesiredPage = async (
   state: UserRealtimeState,
   baseUrl: string,
 ): Promise<void> => {
@@ -259,9 +260,24 @@ const reconcilePage = async (
   // A reconnect during the call replaced the session: the page is applied to
   // the dead one, and the new one still needs it.
   if (state.sessionId.value !== sessionId) return;
-  if ((state.pageId.value ?? null) === desired) {
-    state.appliedPageId.value = desired;
-  }
+  state.appliedPageId.value = desired;
+};
+
+/**
+ * Runs one page call at a time. Two overlapping calls would each compare the
+ * desired page with what the server held before either landed: an unsubscribe
+ * in flight followed by a subscribe to the same page would skip the
+ * subscribe, and the session would end up with no page at all.
+ */
+const reconcilePage = (
+  state: UserRealtimeState,
+  baseUrl: string,
+): Promise<void> => {
+  const run = state.reconciling
+    .catch(() => undefined)
+    .then(() => applyDesiredPage(state, baseUrl));
+  state.reconciling = run;
+  return run;
 };
 
 /**
@@ -290,6 +306,7 @@ const buildApi = (): UserRealtimeApi => {
     appliedPageId,
     handlers: new Map(),
     snapshots: new Map(),
+    reconciling: Promise.resolve(),
   };
 
   const config = useDmsRuntimeConfig();

package/frontend-vue/layers/dms-core/app/composables/user/usePreferences.ts

@@ -1,74 +1,106 @@
-import { isObject } from "../../utils/type-check";
+import {
+  decodePreferencesTree,
+  encodePreferencesTree,
+  fitPreferencesBudget,
+  isBranch,
+  markWritten,
+  PREFERENCES_COOKIE_NAME,
+  readAt,
+  writeAt,
+} from "../../build/composables/user/preferencesCookie";
+import { clearLocalTableEntries } from "../../build/composables/user/tablePreferences";
 
 export interface UserPreferences {
   [key: string]: unknown;
 }
 
-const COOKIE_NAME = "user-preferences";
 const COOKIE_MAX_AGE_ONE_YEAR = 60 * 60 * 24 * 365;
 
+/**
+ * The cookie the preferences were kept in up to `@antelopejs/dms` 0.7.9, as
+ * URI-encoded JSON that grew with every table the user opened. It is not
+ * read: the browser deletes it, so that it stops weighing on every request.
+ */
+const LEGACY_COOKIE_NAME = "user-preferences";
+
+/**
+ * The most the preferences cookie may weigh, name and value together.
+ * Browsers drop a cookie over 4 KB, and every request carries it next to the
+ * session cookies under the server's 16 KB header limit.
+ */
+export const MAX_PREFERENCES_COOKIE_BYTES = 3 * 1024;
+
+// A plain copy, as the cookie will read it back: the refs hand out reactive
+// proxies, which a caller may keep mutating after the write.
+const toPlain = <T>(value: T): T =>
+  value === undefined ? value : (JSON.parse(JSON.stringify(value)) as T);
+
+const expireLegacyCookie = (): void => {
+  if (typeof document === "undefined") return;
+  const isPresent = document.cookie
+    .split(/;\s*/)
+    .some((entry) => entry.startsWith(`${LEGACY_COOKIE_NAME}=`));
+  if (isPresent) document.cookie = `${LEGACY_COOKIE_NAME}=; path=/; max-age=0`;
+};
+
+/**
+ * The user's preferences, kept in the `dms-preferences` cookie so that a
+ * server render reads them too: a tree addressed by dotted paths, stored as
+ * base64url JSON. The cookie is bounded by `MAX_PREFERENCES_COOKIE_BYTES`:
+ * past it, the table view states, then the remembered periods, written least
+ * recently are dropped, and a write that would not fit even then is refused.
+ */
 export const usePreferences = () => {
-  const preferenceCookie = useDmsCookie<UserPreferences>(COOKIE_NAME, {
-    default: () => ({}),
+  const preferenceCookie = useDmsCookie<string>(PREFERENCES_COOKIE_NAME, {
+    default: () => "",
     maxAge: COOKIE_MAX_AGE_ONE_YEAR,
     sameSite: "lax",
     secure: true,
   });
-
-  const preferences = ref<UserPreferences>(preferenceCookie.value);
-
-  const getPreference = <T = unknown>(keyPath: string, defaultValue?: T): T => {
-    const keys = keyPath.split(".");
-    let current: unknown = preferences.value;
-
-    for (const key of keys) {
-      if (current && isObject(current) && key in current) {
-        current = (current as Record<string, unknown>)[key];
-      } else {
-        return defaultValue as T;
+  expireLegacyCookie();
+
+  // The cookie ref is shared by name, so every caller decodes the same value.
+  const tree = computed<UserPreferences>(() =>
+    typeof preferenceCookie.value === "string"
+      ? decodePreferencesTree(preferenceCookie.value)
+      : {},
+  );
+
+  const commit = (next: UserPreferences): boolean => {
+    if (!fitPreferencesBudget(next, MAX_PREFERENCES_COOKIE_BYTES)) {
+      if (import.meta.env.DEV) {
+        console.warn(
+          `[DMS] A preference was not saved: the "${PREFERENCES_COOKIE_NAME}" cookie would exceed ${MAX_PREFERENCES_COOKIE_BYTES} bytes.`,
+        );
       }
+      return false;
     }
+    preferenceCookie.value = encodePreferencesTree(next);
+    return true;
+  };
 
-    return current as T;
+  const getPreference = <T = unknown>(keyPath: string, defaultValue?: T): T => {
+    const value = readAt(tree.value, keyPath.split("."));
+    return (value === undefined ? defaultValue : value) as T;
   };
 
   const setPreference = (keyPath: string, value: unknown): void => {
     const keys = keyPath.split(".");
-    const lastKey = keys.pop()!;
-
-    let current = preferences.value;
-
-    for (const key of keys) {
-      if (!current[key] || !isObject(current[key])) {
-        current[key] = {};
-      }
-      current = current[key] as UserPreferences;
-    }
-
-    (current as Record<string, unknown>)[lastKey] = value;
-
-    preferenceCookie.value = preferences.value;
+    const next = toPlain(tree.value);
+    writeAt(next, keys, toPlain(value));
+    markWritten(next, keys);
+    commit(next);
   };
 
   const removePreference = (keyPath: string): void => {
     const keys = keyPath.split(".");
     const lastKey = keys.pop()!;
+    const next = toPlain(tree.value);
+    const parent = keys.length === 0 ? next : readAt(next, keys);
+    if (!isBranch(parent) || !(lastKey in parent)) return;
 
-    let current = preferences.value;
-
-    for (const key of keys) {
-      if (!current[key] || !isObject(current[key])) {
-        return;
-      }
-      current = current[key] as UserPreferences;
-    }
-
-    if (lastKey in current) {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete (current as Record<string, unknown>)[lastKey];
-    }
-
-    preferenceCookie.value = preferences.value;
+    Reflect.deleteProperty(parent, lastKey);
+    commit(next);
   };
 
   const updatePreference = <T = unknown>(
@@ -81,12 +113,12 @@ export const usePreferences = () => {
   };
 
   const clearAllPreferences = (): void => {
-    preferences.value = {};
-    preferenceCookie.value = {};
+    preferenceCookie.value = "";
+    clearLocalTableEntries();
   };
 
   return {
-    preferences: readonly(computed(() => preferences.value)),
+    preferences: readonly(tree),
 
     getPreference,
     setPreference,

package/frontend-vue/layers/dms-core/app/types/confirm-dialog.ts

@@ -30,6 +30,39 @@ export type ConfirmDialogColor =
   | "info"
   | "neutral";
 
+/**
+ * A file a dialog's secondary action downloads (backend
+ * `ConfirmDialogDownloadTarget`), fetched with the user's session.
+ */
+export interface ConfirmDialogDownloadTarget {
+  type: "download";
+  url: string;
+  /** Saved under; the response's `Content-Disposition` name, else the URL's. */
+  filename?: string;
+}
+
+/** A link opened by a dialog's secondary action. */
+export interface ConfirmDialogLinkTarget {
+  type: "external";
+  url: string;
+  newTab?: boolean;
+}
+
+/** Where a dialog's secondary action leads (backend `ConfirmDialogSecondaryTarget`). */
+export type ConfirmDialogSecondaryTarget =
+  | ConfirmDialogLinkTarget
+  | ConfirmDialogDownloadTarget;
+
+/**
+ * A button next to cancel and confirm, running its target with the dialog
+ * left open (backend `ConfirmDialogSecondaryAction`).
+ */
+export interface ConfirmDialogSecondaryAction {
+  label: string;
+  icon?: string;
+  target: ConfirmDialogSecondaryTarget;
+}
+
 /**
  * The dialog an action asks in before it runs (backend `ConfirmDialog`),
  * the same for every action. Texts are i18n keys (with `$`) or literals,
@@ -44,6 +77,8 @@ export interface ConfirmDialog {
   confirmLabel?: string;
   cancelLabel?: string;
   impact?: ConfirmDialogImpact[];
+  /** A button next to cancel and confirm, leaving the dialog open. */
+  secondaryAction?: ConfirmDialogSecondaryAction;
   /** The action cannot run: the dialog only explains why. */
   blocked?: boolean;
   /** Text the user must type to confirm. */

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

@@ -445,6 +445,7 @@
       "preset_aria": "Preset",
       "comparison_aria": "Comparison",
       "custom_range_aria": "Custom range",
+      "since": "since {from}",
       "presets": {
         "last-hour": "Last hour",
         "last-24h": "Last 24 hours",
@@ -459,6 +460,7 @@
         "last-quarter": "Last quarter",
         "ytd": "Year to date",
         "last-year": "Last year",
+        "all": "All time",
         "custom": "Custom"
       },
       "comparisons": {

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

@@ -445,6 +445,7 @@
       "preset_aria": "Préréglage",
       "comparison_aria": "Comparaison",
       "custom_range_aria": "Plage personnalisée",
+      "since": "depuis {from}",
       "presets": {
         "last-hour": "Dernière heure",
         "last-24h": "24 dernières heures",
@@ -459,6 +460,7 @@
         "last-quarter": "Trimestre dernier",
         "ytd": "Année en cours",
         "last-year": "Année dernière",
+        "all": "Toute la période",
         "custom": "Personnalisé"
       },
       "comparisons": {

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardPageBody.vue

@@ -13,6 +13,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
   /** Space between the page header and the page. */
   headerClass?: string;
 }
@@ -23,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
   headerClass: "pb-6",
 });
 
@@ -58,7 +64,10 @@ const PAGE_SLOT_CLASS =
     :class="props.headerClass"
   >
     <template #actions>
-      <PageHeaderActionsOutlet :actions="props.headerActions" />
+      <PageHeaderActionsOutlet
+        :actions="props.headerActions"
+        :served-query="props.headerActionsQuery"
+      />
     </template>
   </PageHeader>
   <div :class="isPageLoading ? 'hidden' : PAGE_SLOT_CLASS">

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue

@@ -15,6 +15,10 @@ import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
 import { runMountedQuickAction } from "#dms-ui/app/build/utils/quickActionTargets";
 import { useActionTargets } from "#dms-ui/app/build/composables/actions/useActionTargets";
 import { refreshPageBlocks } from "#dms-ui/app/utils/blockRefresh";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "#dms-ui/app/build/utils/urlVariables";
 import {
   dispatchQuickActionTarget,
   findServedQuickAction,
@@ -111,6 +115,32 @@ function baseButton(action: LayoutHeaderAction): ButtonProps {
 }
 
 type LinkTarget = Extract<ActionTarget, { type: "page" | "external" }>;
+type UrlTarget = Extract<ActionTarget, { url: string }>;
+
+const hasTargetUrl = (target: ActionTarget): target is UrlTarget =>
+  typeof (target as Partial<UrlTarget>).url === "string";
+
+// The values of the page a target's URL may name: a button declared once on
+// the page leads to the record the page shows (`{{params.id}}`) or keeps its
+// scope (`?workspace={{query.workspace}}`), following the URL as it changes.
+const pageUrlValues = computed(() => ({
+  routeParams: siteLayout.findMatchingRoute(route.path)?.params,
+  routeQuery: route.query as Record<string, unknown>,
+}));
+
+function withPageValues(action: LayoutHeaderAction): LayoutHeaderAction {
+  const { target } = action;
+  if (!target || !hasTargetUrl(target) || !hasUrlVariables(target.url)) {
+    return action;
+  }
+  return {
+    ...action,
+    target: {
+      ...target,
+      url: resolveLinkVariables(target.url, pageUrlValues.value),
+    },
+  };
+}
 
 // A link target (without a confirmation) renders as a link: middle click and
 // "open in a new tab" keep working.
@@ -157,8 +187,9 @@ function resolveQuickActionButton(
 }
 
 function resolveAction(
-  action: LayoutHeaderAction,
+  declared: LayoutHeaderAction,
 ): ResolvedHeaderAction | null {
+  const action = withPageValues(declared);
   const base = baseButton(action);
   const disabledReason =
     action.disabled && action.disabledReason

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue

@@ -4,13 +4,23 @@ import PageHeaderActionBar, {
   type LayoutHeaderAction,
 } from "./PageHeaderActionBar.vue";
 import { injectPageHeaderActionsHost } from "../../../composables/layout/usePageHeaderActions";
+import { useServedHeaderActions } from "../../../composables/layout/useServedHeaderActions";
 
 interface PageHeaderActionsOutletProps {
   /** Header buttons declared by the backend page (`headerActions`). */
   actions: LayoutHeaderAction[];
+  /** The page query the server resolved their availability for. */
+  servedQuery?: Record<string, string>;
 }
 
-const props = defineProps<PageHeaderActionsOutletProps>();
+const props = withDefaults(defineProps<PageHeaderActionsOutletProps>(), {
+  servedQuery: undefined,
+});
+
+const actions = useServedHeaderActions({
+  actions: () => props.actions,
+  servedQuery: () => props.servedQuery,
+});
 
 const ROOT_SELECTOR = "[data-dms-page-header-actions]";
 // The actions take their own full-width row below `md`, the end of the
@@ -26,7 +36,7 @@ onServerPrefetch(() => host?.whenReady());
 
 const pageActions = computed(() => host?.actions.value ?? null);
 const hasActions = computed(
-  () => props.actions.length > 0 || !!pageActions.value,
+  () => actions.value.length > 0 || !!pageActions.value,
 );
 
 // Hydrating before the page has set up: its actions are not known yet, but
@@ -56,7 +66,7 @@ const showsServerMarkup = computed(
     data-dms-page-header-actions
     :class="ROOT_CLASS"
   >
-    <PageHeaderActionBar :actions="props.actions" />
+    <PageHeaderActionBar :actions="actions" />
     <component :is="pageActions" v-if="pageActions" />
   </div>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/RowSidePanel.vue

@@ -5,9 +5,12 @@
  * among the rows the table shows, previous and next (J and K too) and close
  * (Escape too). Below it, the module's component receives the row as a
  * drawer's component does, mounted anew on each row. The position follows the
- * table: a refresh that moves or drops the row updates it.
+ * table: a refresh that moves or drops the row updates it. A row the link
+ * names but its route answered 404 for shows the "not found" state instead,
+ * with a close button.
  */
 import { computed, onBeforeUnmount, onMounted } from "vue";
+import DmsEmptyState from "#dms-ui/app/components/empty-state/EmptyState.vue";
 import {
   listenRowPanelClose,
   listenRowSteps,
@@ -46,8 +49,20 @@ const componentProps = computed(() => ({
   navigation: navigation.value,
 }));
 
+const heading = computed(() => content.value?.rowTitle || content.value?.title);
+
 const close = () => closeRowSidePanel();
 
+const notFoundActions = computed(() => [
+  {
+    label: t("side_panel.close"),
+    icon: "i-ph-x",
+    color: "neutral" as const,
+    variant: "outline" as const,
+    onClick: close,
+  },
+]);
+
 let stopKeys: Array<() => void> = [];
 
 onMounted(() => {
@@ -74,7 +89,7 @@ onBeforeUnmount(() => {
         <h2
           class="text-highlighted truncate text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]"
         >
-          {{ content.title }}
+          {{ heading }}
         </h2>
         <p
           v-if="position"
@@ -122,7 +137,16 @@ onBeforeUnmount(() => {
       </div>
     </header>
     <div class="min-h-0 flex-1 overflow-y-auto p-4">
-      <Suspense>
+      <DmsEmptyState
+        v-if="content.notFound"
+        data-dms-row-side-panel-not-found
+        variant="no-result"
+        :title="content.notFound.title"
+        :description="content.notFound.description"
+        :actions="notFoundActions"
+        class="py-10"
+      />
+      <Suspense v-else>
         <component
           :is="content.component"
           :key="content.rowKey"