@allurereport/web-awesome 3.0.0 → 3.1.0

package/src/stores/treeFilters/utils.ts

@@ -0,0 +1,132 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import { MAX_ARRAY_FIELD_VALUES, getCurrentUrl } from "@allurereport/web-commons";
+import { PARAMS, STATUSES, TRANSITIONS } from "./constants";
+import type {
+  AwesomeArrayFieldFilter,
+  AwesomeBooleanFieldFilter,
+  AwesomeFilter,
+  AwesomeFilterGroupSimple,
+  Filters,
+} from "./model";
+
+export const truncateArrayFieldValues = (values: string[]): string[] => {
+  return values.slice(0, MAX_ARRAY_FIELD_VALUES);
+};
+
+export const getTagsFilterUrl = (tags: string[]): string => {
+  const url = new URL(window.location.pathname, window.location.origin);
+
+  tags.forEach((tag) => {
+    url.searchParams.append("tags", tag);
+  });
+
+  return url.toString();
+};
+
+export const validateTransition = (transition: string): transition is TestStatusTransition => {
+  return TRANSITIONS.includes(transition as TestStatusTransition);
+};
+
+export const validateStatus = (status: string): status is TestStatus => {
+  return STATUSES.includes(status as TestStatus);
+};
+
+export const migrateFilterParam = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const currentUrl = new URL(getCurrentUrl());
+
+  const hasFilterParam = currentUrl.searchParams.has("filter");
+
+  if (!hasFilterParam) {
+    return;
+  }
+
+  const filtersParam = currentUrl.searchParams.getAll("filter") ?? [];
+
+  const retryParamFromFilter = filtersParam.includes("retry");
+  const flakyParamFromFilter = filtersParam.includes("flaky");
+  const retryParamFromUrl = currentUrl.searchParams.get("retry") === "true";
+  const flakyParamFromUrl = currentUrl.searchParams.get("flaky") === "true";
+  const transitionParamFromUrl = currentUrl.searchParams.get("transition") ?? undefined;
+  const transitionParam = filtersParam.find((filter) => validateTransition(filter));
+
+  if (retryParamFromFilter || retryParamFromUrl) {
+    currentUrl.searchParams.set("retry", "true");
+  } else {
+    currentUrl.searchParams.delete("retry");
+  }
+
+  if (flakyParamFromFilter || flakyParamFromUrl) {
+    currentUrl.searchParams.set("flaky", "true");
+  } else {
+    currentUrl.searchParams.delete("flaky");
+  }
+
+  if (transitionParamFromUrl || transitionParam) {
+    currentUrl.searchParams.set("transition", transitionParam ?? "");
+  } else {
+    currentUrl.searchParams.delete("transition");
+  }
+
+  currentUrl.searchParams.delete("filter");
+
+  window.history.replaceState(null, "", currentUrl.toString());
+  window.dispatchEvent(new Event("replaceState"));
+};
+
+export const constructFilterParams = (filters: Filters) => {
+  const params = new URLSearchParams();
+
+  if (filters.query) {
+    params.set(PARAMS.QUERY, filters.query);
+  }
+
+  if (filters.status) {
+    params.set(PARAMS.STATUS, filters.status);
+  }
+
+  if (filters.flaky) {
+    params.set(PARAMS.FLAKY, "true");
+  }
+
+  if (filters.retry) {
+    params.set(PARAMS.RETRY, "true");
+  }
+
+  if (filters.transition) {
+    filters.transition.forEach((transition) => {
+      params.set(PARAMS.TRANSITION, transition);
+    });
+  }
+
+  if (filters.tags) {
+    filters.tags.forEach((tag) => {
+      params.set(PARAMS.TAGS, tag);
+    });
+  }
+
+  if (filters.status) {
+    params.set(PARAMS.STATUS, filters.status);
+  }
+
+  return params;
+};
+
+export const isRetryFilter = (filter: AwesomeFilter): filter is AwesomeBooleanFieldFilter => {
+  return filter.type === "field" && filter.value.type === "boolean" && filter.value.key === "retry";
+};
+
+export const isFlakyFilter = (filter: AwesomeFilter): filter is AwesomeBooleanFieldFilter => {
+  return filter.type === "field" && filter.value.type === "boolean" && filter.value.key === "flaky";
+};
+
+export const isTagFilter = (filter: AwesomeFilter): filter is AwesomeArrayFieldFilter => {
+  return filter.type === "field" && filter.value.type === "array" && filter.value.key === "tags";
+};
+
+export const isTransitionFilter = (filter: AwesomeFilter): filter is AwesomeFilterGroupSimple => {
+  return filter.type === "group" && filter.fieldKey === "transition";
+};

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/persist.ts

@@ -0,0 +1,23 @@
+class AllurePersistError extends Error {
+  constructor(
+    message: string,
+    public readonly originalError?: Error,
+  ) {
+    super(message);
+    this.name = "AllurePersistError";
+  }
+
+  get message(): string {
+    return `${this.name}: ${this.message}${this.originalError ? `\n${this.originalError.message}` : ""}`;
+  }
+}
+
+export const persist = <T>(pair: [string, T], storage: Storage = localStorage) => {
+  const [key, value] = pair;
+  try {
+    storage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(new AllurePersistError(`Failed to persist ${key} to ${storage.name}`, e as Error));
+  }
+};

package/src/utils/tree.ts

@@ -1,7 +1,7 @@
 import type { RecursiveTree } from "@allurereport/web-components/global";
 import type { AwesomeTreeLeaf } from "types";
 
-type Localizer = (data: string) => string;
+type Localizer = (data: string, params?: Record<string, unknown>) => string;
 
 type Localizers = {
   tooltip: Localizer;
@@ -9,10 +9,17 @@ type Localizers = {
 
 export const createLeafLocalizer =
   (t: Localizers) =>
-  (leaf: AwesomeTreeLeaf): AwesomeTreeLeaf => ({
-    ...leaf,
-    transitionTooltip: t.tooltip(leaf.transition),
-  });
+  (leaf: AwesomeTreeLeaf): AwesomeTreeLeaf => {
+    const tooltips = {
+      transition: t.tooltip(leaf.transition),
+      flaky: leaf.flaky && t.tooltip("flaky"),
+      retries: leaf.retriesCount && t.tooltip("retries", { count: leaf.retriesCount }),
+    };
+    return {
+      ...leaf,
+      tooltips,
+    };
+  };
 
 export const createTreeLocalizer =
   (t: Localizers) =>

package/src/utils/treeFilters.ts

@@ -11,91 +11,79 @@ import {
   ordinal,
   reverse,
 } from "@allurereport/core-api";
-import type { TreeFiltersState, TreeSortBy } from "@/stores/tree";
+import type { SortBy } from "@/stores/treeSort";
 import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
 
-export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
-  const queryMatched = !filterOptions?.query || leaf.name.toLowerCase().includes(filterOptions.query.toLowerCase());
-  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 malfuctionedMatched = !filterOptions?.filter?.malfunctioned || leaf.transition === "malfunctioned";
-
-  return [
-    queryMatched,
-    statusMatched,
-    flakyMatched,
-    retryMatched,
-    newMatched,
-    fixedMatched,
-    regressedMatched,
-    malfuctionedMatched,
-  ].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]);
+
+  if (filterPredicate) {
+    leaves = leaves.filter(filterPredicate);
+  }
 
-  const comparator = leafComparator(filterOptions);
-  return filteredLeaves.sort(comparator);
+  const comparator = leafComparator(sortBy);
+  return leaves.sort(comparator);
 };
 
 /**
@@ -107,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) =>
@@ -120,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);
   });
 
@@ -141,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 />);