@allurereport/web-awesome 3.0.1 → 3.2.0

package/src/stores/treeSort.ts

@@ -0,0 +1,71 @@
+import { getParamValue, hasParam, setParams } from "@allurereport/web-commons";
+import { computed, effect } from "@preact/signals";
+
+export type SortByDirection = "asc" | "desc";
+export type SortByField = "order" | "duration" | "status" | "name";
+export type SortBy = `${SortByField},${SortByDirection}`;
+
+const DEFAULT_SORT_BY: SortBy = "order,asc";
+
+export const DIRECTIONS: SortByDirection[] = ["asc", "desc"];
+
+export const SORT_BY_STORAGE_KEY = "ALLURE_REPORT_SORT_BY";
+export const SORT_BY_FIELDS: SortByField[] = ["order", "duration", "status", "name"];
+
+const SORT_BY_PARAM = "sortBy";
+
+const hasSortByParam = computed(() => hasParam(SORT_BY_PARAM));
+
+export const setSortBy = (sortByValue: SortBy) => {
+  if (hasSortByParam.peek()) {
+    setParams({
+      key: SORT_BY_PARAM,
+      value: undefined,
+    });
+  }
+
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  localStorage.setItem(SORT_BY_STORAGE_KEY, sortByValue);
+};
+
+const validateSortBy = (sortByValue: string): sortByValue is SortBy => {
+  const parts = sortByValue.split(",");
+  if (parts.length !== 2) {
+    return false;
+  }
+  const [field, direction] = parts;
+
+  return SORT_BY_FIELDS.includes(field as SortByField) && DIRECTIONS.includes(direction as SortByDirection);
+};
+
+export const sortBy = computed<SortBy>(() => {
+  const urlSortBy = getParamValue(SORT_BY_PARAM) ?? undefined;
+
+  // SortBy from URL is taking precedence over the storage value
+  if (urlSortBy && validateSortBy(urlSortBy.toLowerCase())) {
+    return urlSortBy.toLowerCase() as SortBy;
+  }
+
+  if (typeof window === "undefined") {
+    return DEFAULT_SORT_BY;
+  }
+
+  const storageSortBy = localStorage.getItem(SORT_BY_STORAGE_KEY);
+
+  if (storageSortBy && validateSortBy(storageSortBy.toLowerCase())) {
+    return storageSortBy.toLowerCase() as SortBy;
+  }
+
+  return DEFAULT_SORT_BY;
+});
+
+effect(() => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  localStorage.setItem(SORT_BY_STORAGE_KEY, sortBy.value);
+});

package/src/stores/variables.ts

@@ -12,7 +12,7 @@ export const variables = signal<StoreSignalState<Record<string, Variables>>>({
 
 export const fetchVariables = async (env: string = "default") => {
   variables.value = {
-    ...variables.value,
+    ...variables.peek(),
     loading: true,
     error: undefined,
   };
@@ -24,7 +24,7 @@ export const fetchVariables = async (env: string = "default") => {
 
     variables.value = {
       data: {
-        ...variables.value.data,
+        ...variables.peek().data,
         [env]: res,
       },
       error: undefined,
@@ -32,7 +32,7 @@ export const fetchVariables = async (env: string = "default") => {
     };
   } catch (e) {
     variables.value = {
-      ...variables.value,
+      ...variables.peek(),
       error: e.message,
       loading: false,
     };

package/src/utils/ownerAddress.ts

@@ -0,0 +1,92 @@
+/**
+ * Parses owner string per RFC 2822 (Internet Message Format).
+ * Supports: "Display Name <email@example.com>", "Display Name <https://url>",
+ * plain "email@example.com", plain "https://url", or plain text.
+ */
+const RFC2822_ADDRESS = /^([^<>]+)\s+<\s*(\S*)\s*>$/;
+
+type UrlOwnerAddress = {
+  displayName: string;
+  url: string;
+  type: "url";
+};
+
+type EmailOwnerAddress = {
+  displayName: string;
+  email: string;
+  type: "email";
+};
+
+export type OwnerAddress =
+  | UrlOwnerAddress
+  | EmailOwnerAddress
+  | {
+      displayName: string;
+      type: "none";
+    };
+
+const isValidUrl = (value: string): boolean => {
+  try {
+    const u = new URL(value);
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Simple email validation: local@domain.tld, domain part must not start with dot.
+ * Rejects invalid forms like "user@.example.com".
+ */
+const isValidEmail = (value: string): boolean => {
+  const simpleEmail = /^[^\s@]+@[^\s.@][^\s@]*\.[^\s@]+$/;
+  return simpleEmail.test(value);
+};
+
+/**
+ * Quick check to avoid regex on plain text (no @, :, or <).
+ */
+const isLikelyAddress = (input: string): boolean => {
+  return input.includes("@") || input.includes(":") || input.includes("<");
+};
+
+/**
+ * Parses a single owner value into display name and optional link (mailto or URL).
+ * Returns null for null/empty input.
+ */
+export const parseOwnerAddress = (maybeAddress: string): OwnerAddress => {
+  if (!maybeAddress || maybeAddress.trim() === "") {
+    return { displayName: "", type: "none" };
+  }
+
+  if (!isLikelyAddress(maybeAddress)) {
+    return { displayName: maybeAddress, type: "none" };
+  }
+
+  let displayName = maybeAddress;
+  let urlOrEmail = maybeAddress;
+
+  const match = maybeAddress.match(RFC2822_ADDRESS);
+  if (match) {
+    displayName = match[1].trim();
+    urlOrEmail = match[2];
+  }
+
+  // e.g.: John Doe <>
+  if (urlOrEmail === "") {
+    return { displayName, type: "none" };
+  }
+
+  // e.g.: John Doe <https://example.com> or plain https://...
+  if (isValidUrl(urlOrEmail)) {
+    return { displayName, url: urlOrEmail, type: "url" };
+  }
+
+  // e.g.: John Doe <mail@example.com> or plain mail@...
+  if (isValidEmail(urlOrEmail)) {
+    return { displayName, email: urlOrEmail, type: "email" };
+  }
+
+  // Non-compliant: treat as plain text
+  return { displayName: maybeAddress, type: "none" };
+};

package/src/utils/time.ts

@@ -1,4 +1,5 @@
-import { useI18n } from "@/stores/locale";
+import { getLocaleDateTimeOverride } from "@allurereport/web-commons";
+import { currentLocale, currentLocaleIso, useI18n } from "@/stores/locale";
 
 const defaultOptions: Intl.DateTimeFormatOptions = {
   month: "numeric",
@@ -12,7 +13,20 @@ const defaultOptions: Intl.DateTimeFormatOptions = {
 
 export const timestampToDate = (timestamp: number, options = defaultOptions) => {
   const date = new Date(timestamp);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useI18n("ui");
 
-  return new Intl.DateTimeFormat("en-US", options).format(date).replace(",", ` ${t("at")}`);
+  const kind = options.second ? "dateTime" : options.hour || options.minute ? "dateTimeNoSeconds" : "date";
+  const override = getLocaleDateTimeOverride(currentLocale.value, kind);
+  const formatter = new Intl.DateTimeFormat(override?.locale ?? (currentLocaleIso.value as string), {
+    ...options,
+    ...(override?.options ?? {}),
+  });
+  const formatted = formatter.format(date);
+
+  if (override?.includeAtSeparator === false || override?.stripComma) {
+    return formatted.replace(",", "");
+  }
+
+  return formatted.replace(",", ` ${t("at")}`);
 };

package/src/utils/treeFilters.ts

@@ -11,103 +11,79 @@ import {
   ordinal,
   reverse,
 } from "@allurereport/core-api";
-import type { TreeFiltersState, TreeSortBy } from "@/stores/treeFilters";
+import type { SortBy } from "@/stores/treeSort";
 import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
 
-const matchesName = (name: string, query: string) => {
-  return name.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-};
-
-const matchesNodeId = (nodeId: string, query: string) => {
-  return nodeId.toLowerCase() === query.toLocaleLowerCase();
-};
-
-export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
-  const queryMatched =
-    !filterOptions?.query ||
-    matchesName(leaf.name, filterOptions.query) ||
-    matchesNodeId(leaf.nodeId, filterOptions.query);
-
-  const statusMatched =
-    !filterOptions?.status || filterOptions?.status === "total" || leaf.status === filterOptions.status;
-  const flakyMatched = !filterOptions?.filter?.flaky || leaf.flaky;
-  const retryMatched = !filterOptions?.filter?.retry || leaf.retry;
-  const newMatched = !filterOptions?.filter?.new || leaf.transition === "new";
-  const fixedMatched = !filterOptions?.filter?.fixed || leaf.transition === "fixed";
-  const regressedMatched = !filterOptions?.filter?.regressed || leaf.transition === "regressed";
-  const malfunctionedMatched = !filterOptions?.filter?.malfunctioned || leaf.transition === "malfunctioned";
-
-  return [
-    queryMatched,
-    statusMatched,
-    flakyMatched,
-    retryMatched,
-    newMatched,
-    fixedMatched,
-    regressedMatched,
-    malfunctionedMatched,
-  ].every(Boolean);
-};
-
-const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+const leafComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
   const typedCompareBy = compareBy<TreeLeaf<AwesomeTreeLeaf>>;
   switch (sortBy) {
-    case "order":
+    case "order,asc":
+    case "order,desc":
       return typedCompareBy("groupOrder", ordinal());
-    case "duration":
+    case "duration,asc":
+    case "duration,desc":
       return typedCompareBy("duration", ordinal());
-    case "alphabet":
+    case "name,asc":
+    case "name,desc":
       return typedCompareBy("name", alphabetically());
-    case "status":
+    case "status,asc":
+    case "status,desc":
       return typedCompareBy("status", byStatus());
     default:
       // eslint-disable-next-line no-console
-      console.error(`unsupported comparator ${sortBy}`);
+      console.warn(`unsupported comparator ${sortBy as string}`);
       return () => 0;
   }
 };
 
-const groupComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<DefaultTreeGroup> => {
+const groupComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
   const typedCompareBy = compareBy<DefaultTreeGroup>;
   switch (sortBy) {
-    case "alphabet":
+    case "name,desc":
+    case "name,asc":
       return typedCompareBy("name", alphabetically());
-    case "order":
-    case "duration":
-    case "status":
+    case "order,desc":
+    case "order,asc":
+    case "duration,desc":
+    case "duration,asc":
+    case "status,desc":
+    case "status,asc":
       return typedCompareBy("statistic", byStatistic());
     default:
       // eslint-disable-next-line no-console
-      console.error(`unsupported comparator ${sortBy}`);
+      console.warn(`unsupported comparator ${sortBy as string}`);
       return () => 0;
   }
 };
 
-export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
-  const cmp = leafComparatorByTreeSortBy(filterOptions.sortBy);
-  const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
+export const leafComparator = (sortBy: SortBy = "status,asc"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+  const cmp = leafComparatorByTreeSortBy(sortBy);
+  const directional = sortBy.split(",")[1] === "asc" ? cmp : reverse(cmp);
   // apply fallback sorting by name
   return andThen([directional, compareBy("name", alphabetically())]);
 };
 
-export const groupComparator = (filterOptions: TreeFiltersState): Comparator<DefaultTreeGroup> => {
-  const cmp = groupComparatorByTreeSortBy(filterOptions.sortBy);
-  const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
+export const groupComparator = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
+  const cmp = groupComparatorByTreeSortBy(sortBy);
+  const directional = sortBy.split(",")[1] === "asc" ? cmp : reverse(cmp);
   // apply fallback sorting by name
   return andThen([directional, compareBy("name", alphabetically())]);
 };
 
 export const filterLeaves = (
-  leaves: string[] = [],
+  leafIds: string[] = [],
   leavesById: AwesomeTree["leavesById"],
-  filterOptions: TreeFiltersState,
+  filterPredicate: (item: AwesomeTreeLeaf) => boolean,
+  sortBy: SortBy = "status,asc",
 ) => {
-  const filteredLeaves = [...leaves]
-    .map((leafId) => leavesById[leafId])
-    .filter((leaf: TreeLeaf<AwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
+  let leaves = [...leafIds].map((leafId) => leavesById[leafId]);
 
-  const comparator = leafComparator(filterOptions);
-  return filteredLeaves.sort(comparator);
+  if (filterPredicate) {
+    leaves = leaves.filter(filterPredicate);
+  }
+
+  const comparator = leafComparator(sortBy);
+  return leaves.sort(comparator);
 };
 
 /**
@@ -119,12 +95,14 @@ export const createRecursiveTree = (payload: {
   group: AwesomeTreeGroup;
   groupsById: AwesomeTree["groupsById"];
   leavesById: AwesomeTree["leavesById"];
-  filterOptions?: TreeFiltersState;
+  filterPredicate: (item: AwesomeTreeLeaf) => boolean;
+  sortBy: SortBy;
 }): AwesomeRecursiveTree => {
-  const { group, groupsById, leavesById, filterOptions } = payload;
+  const { group, groupsById, leavesById, filterPredicate, sortBy } = payload;
   const groupLeaves: string[] = group.leaves ?? [];
 
-  const leaves = filterLeaves(groupLeaves, leavesById, filterOptions);
+  const leaves = filterLeaves(groupLeaves, leavesById, filterPredicate, sortBy);
+
   const trees =
     group.groups
       ?.map((groupId) =>
@@ -132,20 +110,24 @@ export const createRecursiveTree = (payload: {
           group: groupsById[groupId],
           groupsById,
           leavesById,
-          filterOptions,
+          filterPredicate,
+          sortBy,
         }),
       )
       ?.filter((rt) => !isRecursiveTreeEmpty(rt)) ?? [];
 
   const statistic: Statistic = emptyStatistic();
+
   trees.forEach((rt: AwesomeRecursiveTree) => {
     if (rt.statistic) {
       const additional: Statistic = rt.statistic;
+
       mergeStatistic(statistic, additional);
     }
   });
   leaves.forEach((leaf) => {
     const status: TestStatus = leaf.status;
+
     incrementStatistic(statistic, status);
   });
 
@@ -153,7 +135,7 @@ export const createRecursiveTree = (payload: {
     ...group,
     statistic,
     leaves,
-    trees: trees.sort(groupComparator(filterOptions)),
+    trees: trees.sort(groupComparator(sortBy)),
   };
 };
 

package/test/components/Header.test.tsx

@@ -1,10 +1,11 @@
-import { getReportOptions } from "@allurereport/web-commons";
+import * as webCommons from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
 import { cleanup, render, screen } from "@testing-library/preact";
-import { Mock, beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Header } from "@/components/Header";
 import { CiInfo } from "@/components/Header/CiInfo";
-import { route } from "@/stores/router";
-import { availableSections } from "@/stores/sections";
+import type * as routerModule from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
 
 const fixtures = {
   ci: {
@@ -12,64 +13,60 @@ const fixtures = {
   },
 };
 
-vi.mock("@allurereport/web-commons", () => ({
-  getReportOptions: vi.fn().mockReturnValue({}),
-}));
-vi.mock("@/stores/router", async () => {
-  const { signal } = await import("@preact/signals");
+// Create a controllable route signal
+const mockRouteParams = signal<{ testResultId?: string; tab?: string }>({});
 
-  return {
-    route: signal({}),
-  };
-});
-vi.mock("@/stores/sections", async () => {
-  const { signal } = await import("@preact/signals");
-
-  return {
-    availableSections: signal([]),
-  };
-});
+// Mock UI components to simplify tests
 vi.mock("@/components/HeaderControls", () => ({
-  HeaderControls: () => <div data-testid="header-controls"></div>,
+  HeaderControls: () => <div data-testid="header-controls" />,
 }));
+
 vi.mock("@/components/SectionPicker", () => ({
-  SectionPicker: () => <div data-testid="section-picker"></div>,
+  SectionPicker: () => <div data-testid="section-picker" />,
 }));
+
 vi.mock("@/components/TestResult/TrHeader/TrBreadcrumbs", () => ({
-  TrBreadcrumbs: () => <div data-testid="breadcrumbs"></div>,
+  TrBreadcrumbs: () => <div data-testid="breadcrumbs" />,
 }));
+
 vi.mock("@/components/Header/CiInfo", () => ({
-  // CiInfo: vi.fn().mockReturnValue(<div data-testid="ci-info"></div>),
-  CiInfo: vi.fn().mockImplementation(() => <div data-testid="ci-info"></div>),
+  CiInfo: vi.fn().mockImplementation(() => <div data-testid="ci-info" />),
 }));
 
+// Mock router module with controllable testResultRoute
+vi.mock("@/stores/router", async (importOriginal) => {
+  const actual = await importOriginal<typeof routerModule>();
+  const { computed: computedFn } = await import("@preact/signals");
+
+  return {
+    ...actual,
+    testResultRoute: computedFn(() => {
+      const params = mockRouteParams.value;
+      const hasTestResultId = params.testResultId !== undefined;
+      return {
+        matches: hasTestResultId,
+        params: params || {},
+      };
+    }),
+  };
+});
+
 beforeEach(() => {
   vi.clearAllMocks();
   cleanup();
-  route.value = {};
-  availableSections.value = [];
+  mockRouteParams.value = {};
+  testResultStore.value = {
+    loading: false,
+    error: undefined,
+    data: undefined,
+  };
+  vi.spyOn(webCommons, "getReportOptions").mockReturnValue({});
 });
 
 describe("components > Header", () => {
-  it("should render sections picker when there are sections available", () => {
-    availableSections.value = ["section1", "section2"];
-
-    render(<Header />);
-
-    expect(screen.getByTestId("section-picker")).toBeInTheDocument();
-  });
-
-  it("shouldn't render sections picker when there are no sections available", () => {
-    render(<Header />);
-
-    expect(screen.queryByTestId("section-picker")).not.toBeInTheDocument();
-  });
-
   it("should render ci info only when testResultId route parameter doesn't exists and ci report option is available", () => {
-    route.value = {
-      params: {},
-    };
-    (getReportOptions as Mock).mockReturnValue({
+    mockRouteParams.value = {};
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -80,12 +77,10 @@ describe("components > Header", () => {
   });
 
   it("shouldn't render ci info when testResultId route parameter exists", () => {
-    route.value = {
-      params: {
-        testResultId: "1",
-      },
+    mockRouteParams.value = {
+      testResultId: "1",
     };
-    (getReportOptions as Mock).mockReturnValue({
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -96,12 +91,10 @@ describe("components > Header", () => {
   });
 
   it("should render breadcrumbs when testResultId route parameter exists", () => {
-    route.value = {
-      params: {
-        testResultId: "1",
-      },
+    mockRouteParams.value = {
+      testResultId: "1",
     };
-    (getReportOptions as Mock).mockReturnValue({
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -111,9 +104,7 @@ describe("components > Header", () => {
   });
 
   it("shouldn't render breadcrumbs when testResultId route parameter doesn't exists", () => {
-    route.value = {
-      params: {},
-    };
+    mockRouteParams.value = {};
 
     render(<Header />);
 

package/test/utils/ownerAddress.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import { parseOwnerAddress } from "../../src/utils/ownerAddress.js";
+
+describe("utils > ownerAddress", () => {
+  describe("parseOwnerAddress", () => {
+    it("returns none type with empty displayName for null input", () => {
+      const result = parseOwnerAddress(null as unknown as string);
+      expect(result).toEqual({ displayName: "", type: "none" });
+    });
+
+    it("returns none type with empty displayName for empty input", () => {
+      const result = parseOwnerAddress("");
+      expect(result).toEqual({ displayName: "", type: "none" });
+    });
+
+    it("returns none type for whitespace-only input", () => {
+      const result = parseOwnerAddress("   ");
+      expect(result).toEqual({ displayName: "", type: "none" });
+    });
+
+    it("parses RFC 2822 string with email", () => {
+      const input = "John Doe < john.doe@example.com >";
+      const result = parseOwnerAddress(input);
+      expect(result.displayName).toBe("John Doe");
+      expect(result.type).toBe("email");
+      expect("email" in result && result.email).toBe("john.doe@example.com");
+    });
+
+    it("parses RFC 2822 string with URL", () => {
+      const input = "John Doe <https://github.com/@john.doe>";
+      const result = parseOwnerAddress(input);
+      expect(result.displayName).toBe("John Doe");
+      expect(result.type).toBe("url");
+      expect("url" in result && result.url).toBe("https://github.com/@john.doe");
+    });
+
+    it("returns only displayName (type none) for empty RFC 2822 address", () => {
+      const result = parseOwnerAddress("John Doe <>");
+      expect(result.displayName).toBe("John Doe");
+      expect(result.type).toBe("none");
+    });
+
+    it("returns displayName for plain text input", () => {
+      const result = parseOwnerAddress("John Doe");
+      expect(result.displayName).toBe("John Doe");
+      expect(result.type).toBe("none");
+    });
+
+    it("returns email type and mailto for plain email", () => {
+      const email = "john.doe@example.com";
+      const result = parseOwnerAddress(email);
+      expect(result.displayName).toBe(email);
+      expect(result.type).toBe("email");
+      expect("email" in result && result.email).toBe(email);
+    });
+
+    it("returns url type for plain valid URL", () => {
+      const url = "https://github.com/john.doe";
+      const result = parseOwnerAddress(url);
+      expect(result.displayName).toBe(url);
+      expect(result.type).toBe("url");
+      expect("url" in result && result.url).toBe(url);
+    });
+
+    it("returns only displayName (type none) for invalid URL", () => {
+      const result = parseOwnerAddress("htp:/www.example.com/page");
+      expect(result.displayName).toBe("htp:/www.example.com/page");
+      expect(result.type).toBe("none");
+    });
+
+    it("returns only displayName (type none) for invalid email", () => {
+      const result = parseOwnerAddress("user@.example.com");
+      expect(result.displayName).toBe("user@.example.com");
+      expect(result.type).toBe("none");
+    });
+
+    it("returns invalid RFC 2822 address unchanged as plain text", () => {
+      const result = parseOwnerAddress("John Doe <john@@doe>");
+      expect(result.displayName).toBe("John Doe <john@@doe>");
+      expect(result.type).toBe("none");
+    });
+
+    it("accepts http URL", () => {
+      const result = parseOwnerAddress("http://example.com");
+      expect(result.type).toBe("url");
+      expect("url" in result && result.url).toBe("http://example.com");
+    });
+  });
+});