@antelopejs/dms 0.4.4 → 0.4.5

package/frontend-vue/layers/dms-ui/app/build/types/tree.ts

@@ -1,4 +1,5 @@
 import type { LinkProps, NavigationMenuItem } from "@nuxt/ui";
+import { buildLinkWithQuery } from "#dms-core/app/utils/routePath";
 
 export interface TreeItem extends LinkProps {
   id: string;
@@ -29,18 +30,13 @@ function isExcludedFromRoot(item: SiteLayoutTree): boolean {
 
 // A registered entry links to its own slug, narrowed by the query parameters it
 // declares so a single page (with `validation.requiredQueryParams`) can back
-// several entries. `exactQuery: "partial"` keeps sibling entries of that page
-// from all highlighting at once while tolerating unrelated query parameters.
-export function buildMenuItemTarget(
-  item: SiteLayoutTree,
-): MenuItemTarget | string | undefined {
+// several entries. The sidebar tells those sibling entries apart itself (see
+// `isMenuItemActive`), so the link stays a plain string.
+export function buildMenuItemTarget(item: SiteLayoutTree): string | undefined {
   if (!item.layoutUrl) {
     return undefined;
   }
-  if (!item.query || Object.keys(item.query).length === 0) {
-    return item.fullSlug;
-  }
-  return { path: item.fullSlug, query: item.query };
+  return buildLinkWithQuery(item.fullSlug, item.query);
 }
 
 function buildNavigationItem(
@@ -54,7 +50,6 @@ function buildNavigationItem(
     label: item.displayName,
     icon: item.icon,
     to,
-    ...(typeof to === "object" ? { exactQuery: "partial" } : {}),
     variant: item.variant,
     status: item.status,
     children: children.length > 0 ? children : undefined,

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/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/menu-navigation.test.ts

@@ -29,10 +29,16 @@ describe("buildMenuItemTarget", () => {
     expect(buildMenuItemTarget(node({}))).to.equal("/project");
   });
 
-  it("returns a path/query target when the entry declares a query", () => {
+  it("returns a string link carrying the query the entry declares", () => {
     expect(
       buildMenuItemTarget(node({ query: { project: "invoicer" } })),
-    ).to.deep.equal({ path: "/project", query: { project: "invoicer" } });
+    ).to.equal("/project?project=invoicer");
+  });
+
+  it("encodes the query values of the link", () => {
+    expect(
+      buildMenuItemTarget(node({ query: { project: "a b&c", env: "prod" } })),
+    ).to.equal("/project?project=a+b%26c&env=prod");
   });
 
   it("returns no target for a category that has no page behind it", () => {
@@ -45,11 +51,11 @@ describe("buildMenuItemTarget", () => {
 describe("isMenuItemActive with query entries", () => {
   const invoicer = {
     fullId: "cloud.projects.invoicer",
-    to: { path: "/project", query: { project: "invoicer" } },
+    to: "/project?project=invoicer",
   };
   const resto = {
     fullId: "cloud.projects.resto",
-    to: { path: "/project", query: { project: "resto" } },
+    to: "/project?project=resto",
   };
 
   it("highlights only the entry matching the current query", () => {
@@ -63,6 +69,22 @@ describe("isMenuItemActive with query entries", () => {
     expect(isMenuItemActive(invoicer, null, current)).to.equal(true);
   });
 
+  it("tells apart entries whose query values share a prefix", () => {
+    const current = route("/project", { project: "invoicer-2" });
+    expect(isMenuItemActive(invoicer, null, current)).to.equal(false);
+  });
+
+  it("stays active on the entry's sub-routes carrying its query", () => {
+    const current = route("/project/settings", { project: "invoicer" });
+    expect(isMenuItemActive(invoicer, null, current)).to.equal(true);
+  });
+
+  it("still accepts an object target", () => {
+    const entry = { to: { path: "/project", query: { project: "invoicer" } } };
+    const current = route("/project", { project: "invoicer" });
+    expect(isMenuItemActive(entry, null, current)).to.equal(true);
+  });
+
   it("stays inactive on the same path without the entry's query", () => {
     expect(isMenuItemActive(invoicer, null, route("/project"))).to.equal(false);
   });
@@ -86,11 +108,8 @@ describe("addActiveStateToMenuItems", () => {
   it("marks a single query entry active across a group", () => {
     const groups = [
       [
-        {
-          id: "invoicer",
-          to: { path: "/project", query: { project: "invoicer" } },
-        },
-        { id: "resto", to: { path: "/project", query: { project: "resto" } } },
+        { id: "invoicer", to: "/project?project=invoicer" },
+        { id: "resto", to: "/project?project=resto" },
       ],
     ];
 
@@ -100,7 +119,17 @@ describe("addActiveStateToMenuItems", () => {
       route("/project", { project: "resto" }),
     );
 
-    expect(group?.[0]?.active).to.equal(undefined);
+    expect(group?.[0]?.active).to.equal(false);
     expect(group?.[1]?.active).to.equal(true);
   });
+
+  it("leaves the native highlighting of an inactive plain entry alone", () => {
+    const [group] = addActiveStateToMenuItems(
+      [[{ id: "orders", to: "/orders" }]],
+      null,
+      route("/invoices"),
+    );
+
+    expect(group?.[0]?.active).to.equal(undefined);
+  });
 });

package/frontend-vue/tests/relation-badges.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { buildRelationBadges } from "../layers/dms-ui/app/build/composables/data-types/relationBadges";
+
+describe("buildRelationBadges", () => {
+  it("reads each resolved related row through the label key", () => {
+    expect(
+      buildRelationBadges([{ name: "Admin" }, { name: "Billing" }], "name"),
+    ).to.deep.equal({ visible: ["Admin", "Billing"], hidden: [] });
+  });
+
+  it("folds the labels past the limit into the hidden list", () => {
+    const roles = ["A", "B", "C", "D", "E"].map((name) => ({ name }));
+    expect(buildRelationBadges(roles, "name", 3)).to.deep.equal({
+      visible: ["A", "B", "C"],
+      hidden: ["D", "E"],
+    });
+  });
+
+  it("shows a raw id when the relation was not resolved", () => {
+    expect(buildRelationBadges(["role-1"], "name").visible).to.deep.equal([
+      "role-1",
+    ]);
+  });
+
+  it("drops items without a label and renders nothing for no value", () => {
+    expect(buildRelationBadges([{ other: "x" }, null], "name")).to.deep.equal({
+      visible: [],
+      hidden: [],
+    });
+    expect(buildRelationBadges([], "name").visible).to.deep.equal([]);
+  });
+});

package/frontend-vue/tests/user-language.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useUserLanguage } from "../layers/dms-layout/app/composables/profile/useUserLanguage";
+
+interface LanguageHarness {
+  setLocale: ReturnType<typeof vi.fn>;
+  authFetch: ReturnType<typeof vi.fn>;
+  refreshUser: ReturnType<typeof vi.fn>;
+}
+
+function stubComposables(authFetch = vi.fn(async () => ({}))): LanguageHarness {
+  const harness: LanguageHarness = {
+    setLocale: vi.fn(async () => {}),
+    authFetch,
+    refreshUser: vi.fn(async () => {}),
+  };
+  vi.stubGlobal("useDmsApp", () => ({
+    $i18n: { setLocale: harness.setLocale },
+  }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: harness.authFetch }));
+  vi.stubGlobal("useUserSession", () => ({
+    user: { value: { name: "Ada", email: "ada@example.com", language: "en" } },
+    fetch: harness.refreshUser,
+  }));
+  return harness;
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("useUserLanguage", () => {
+  it("applies the language and stores it on the user's profile", async () => {
+    const harness = stubComposables();
+
+    await useUserLanguage().changeLanguage("fr");
+
+    expect(harness.setLocale).toHaveBeenCalledWith("fr");
+    expect(harness.authFetch).toHaveBeenCalledWith("/settings/user/profile", {
+      method: "POST",
+      body: { name: "Ada", email: "ada@example.com", language: "fr" },
+    });
+    expect(harness.refreshUser).toHaveBeenCalled();
+  });
+
+  it("keeps the applied language when the profile update fails", async () => {
+    const harness = stubComposables(
+      vi.fn(async () => {
+        throw new Error("offline");
+      }),
+    );
+
+    await expect(useUserLanguage().changeLanguage("fr")).resolves.toBe(
+      undefined,
+    );
+    expect(harness.setLocale).toHaveBeenCalledWith("fr");
+    expect(harness.refreshUser).not.toHaveBeenCalled();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"