@allurereport/web-awesome 3.0.1 → 3.1.0

package/src/stores/sections.ts

@@ -1,63 +1,50 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { effect, signal } from "@preact/signals";
-import { navigateTo, parseHash, route } from "@/stores/router";
+import { computed, effect } from "@preact/signals";
 import type { AwesomeReportOptions } from "../../types.js";
+import { navigateToRoot, navigateToSection, sectionRoute } from "./router";
 
 const DEFAULT_SECTION = "default";
-type Section = string;
 
-export const currentSection = signal<Section>("");
-export const availableSections = signal<Section[]>([]);
+type Section = "timeline" | "charts" | "default";
 
-const updateSectionState = (section: Section): void => {
-  currentSection.value = section;
-  document.documentElement.setAttribute("data-section", section);
-  globalThis.localStorage.setItem("chosenSection", section);
-};
+const reportOptions = getReportOptions<AwesomeReportOptions>();
+const defaultSectionFromReportOptions: Section = (reportOptions?.defaultSection as Section) ?? "default";
 
-export const setSection = (chosenSection: Section): void => {
-  const isDefaultSection = chosenSection === DEFAULT_SECTION;
-  const isValidSection = availableSections.value?.includes(chosenSection);
-  const isSectionChanged = currentSection.value !== chosenSection;
+export const availableSections = (reportOptions?.sections ?? []) as Section[];
 
-  updateSectionState(chosenSection);
+const onInit = () => {
+  const isSectionRoute = sectionRoute.peek().matches;
+  const isDefaultSection = defaultSectionFromReportOptions === DEFAULT_SECTION;
+  const isValidSection = availableSections.includes(defaultSectionFromReportOptions);
 
-  if (isDefaultSection) {
-    navigateTo({ category: "" });
-    return;
-  }
-
-  if (isSectionChanged && isValidSection) {
-    navigateTo({ category: chosenSection });
+  if (!isSectionRoute && !isDefaultSection && isValidSection) {
+    navigateToSection({ section: defaultSectionFromReportOptions });
   }
 };
 
-export const getSection = () => {
-  const { category } = parseHash();
-  availableSections.value = getReportOptions<AwesomeReportOptions>()?.sections ?? [];
-  const defaultSectionFromReportOptions = getReportOptions<AwesomeReportOptions>()?.defaultSection ?? "";
-  const sectionFromUrl = parseHash().category;
-  const sectionFromLS =
-    globalThis.localStorage.getItem("chosenSection") === ""
-      ? ""
-      : globalThis.localStorage.getItem("chosenSection") || defaultSectionFromReportOptions;
-  currentSection.value = sectionFromUrl || sectionFromLS;
-
-  if (category) {
-    setSection(category);
-    return;
+onInit();
+
+export const currentSection = computed(() => sectionRoute.value.params.section ?? "default");
+
+effect(() => {
+  const section = currentSection.value;
+
+  if (section) {
+    document.documentElement.setAttribute("data-section", section);
   }
+});
+
+export const setSection = (chosenSection: Section | string): void => {
+  const isDefaultSection = chosenSection === DEFAULT_SECTION;
+  const isValidSection = availableSections.includes(chosenSection as Section);
+  const isSectionChanged = currentSection.peek() !== chosenSection;
 
-  if (sectionFromLS) {
-    setSection(sectionFromLS);
+  if (isDefaultSection) {
+    navigateToRoot();
     return;
   }
 
-  setSection("");
+  if (isSectionChanged && isValidSection) {
+    navigateToSection({ section: chosenSection as "timeline" | "charts" });
+  }
 };
-
-effect(() => {
-  const category = route.value.category;
-
-  setSection(category || "");
-});

package/src/stores/stats.ts

@@ -20,7 +20,7 @@ export const statsByEnvStore = signal<StoreSignalState<Record<string, Statistic>
 
 export const fetchReportStats = async () => {
   reportStatsStore.value = {
-    ...reportStatsStore.value,
+    ...reportStatsStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -43,7 +43,7 @@ export const fetchReportStats = async () => {
 };
 
 export const fetchEnvStats = async (envs: string[]) => {
-  const envsToFetch = envs.filter((env) => !statsByEnvStore.value.data?.[env]);
+  const envsToFetch = envs.filter((env) => !statsByEnvStore.peek().data?.[env]);
 
   // all envs have already been fetched
   if (envsToFetch.length === 0) {
@@ -51,7 +51,7 @@ export const fetchEnvStats = async (envs: string[]) => {
   }
 
   statsByEnvStore.value = {
-    ...statsByEnvStore.value,
+    ...statsByEnvStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -73,7 +73,7 @@ export const fetchEnvStats = async (envs: string[]) => {
     };
   } catch (err) {
     statsByEnvStore.value = {
-      ...statsByEnvStore.value,
+      ...statsByEnvStore.peek(),
       error: err.message,
       loading: false,
     };

package/src/stores/testResult.ts

@@ -0,0 +1,5 @@
+import { computed } from "@preact/signals";
+import { testResultRoute } from "./router";
+
+export const trCurrentTab = computed(() => testResultRoute.value.params.tab ?? "overview");
+export const currentTrId = computed(() => testResultRoute.value.params.testResultId);

package/src/stores/testResults.ts

@@ -32,7 +32,7 @@ export const fetchTestResultNav = async (env?: string) => {
     };
   } catch (err) {
     testResultNavStore.value = {
-      ...testResultNavStore.value,
+      ...testResultNavStore.peek(),
       error: err.message,
       loading: false,
     };
@@ -40,12 +40,14 @@ export const fetchTestResultNav = async (env?: string) => {
 };
 
 export const fetchTestResult = async (testResultId: string) => {
-  if (!testResultId || (testResultStore.value.data && testResultId in testResultStore.value.data)) {
+  const trData = testResultStore.peek().data;
+
+  if (!testResultId || (trData && testResultId in trData)) {
     return;
   }
 
   testResultStore.value = {
-    ...testResultStore.value,
+    ...testResultStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -56,13 +58,13 @@ export const fetchTestResult = async (testResultId: string) => {
     });
 
     testResultStore.value = {
-      data: { ...testResultStore.value.data, [testResultId]: data },
+      data: { ...testResultStore.peek().data, [testResultId]: data },
       error: undefined,
       loading: false,
     };
   } catch (err) {
     testResultStore.value = {
-      ...testResultStore.value,
+      ...testResultStore.peek(),
       error: err.message,
       loading: false,
     };

package/src/stores/tree.ts

@@ -1,11 +1,12 @@
-import { fetchReportJsonData } from "@allurereport/web-commons";
+import { buildFilterPredicate, fetchReportJsonData } from "@allurereport/web-commons";
 import type { RecursiveTree } from "@allurereport/web-components/global";
 import { computed, effect, signal } from "@preact/signals";
 import type { AwesomeTree, AwesomeTreeGroup } from "types";
 import type { StoreSignalState } from "@/stores/types";
 import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
 import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
-import { treeDirection, treeFilter, treeQuery, treeSortBy, treeStatus } from "./treeFilters";
+import { treeFilters } from "./treeFilters/store";
+import { sortBy } from "./treeSort";
 
 export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
   loading: true,
@@ -36,7 +37,7 @@ export const toggleTree = (id: string) => {
 };
 
 export const fetchEnvTreesData = async (envs: string[]) => {
-  const envsToFetch = envs.filter((env) => !treeStore.value.data?.[env]);
+  const envsToFetch = envs.filter((env) => !treeStore.peek().data?.[env]);
 
   // all envs have already been fetched
   if (envsToFetch.length === 0) {
@@ -44,7 +45,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
   }
 
   treeStore.value = {
-    ...treeStore.value,
+    ...treeStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -54,7 +55,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
       envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`, { bustCache: true })),
     );
 
-    const previous = treeStore.value.data;
+    const previous = treeStore.peek().data;
     treeStore.value = {
       data: envsToFetch.reduce(
         (acc, env, index) => {
@@ -70,7 +71,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
     };
   } catch (e) {
     treeStore.value = {
-      ...treeStore.value,
+      ...treeStore.peek(),
       error: e.message,
       loading: false,
     };
@@ -79,6 +80,16 @@ export const fetchEnvTreesData = async (envs: string[]) => {
 
 const treeEntries = computed(() => (treeStore.value.data ? Object.entries(treeStore.value.data) : []));
 
+const alwaysTruePredicate = () => true;
+
+const filterPredicate = computed(() => {
+  if (treeFilters.value.length === 0) {
+    return alwaysTruePredicate;
+  }
+
+  return buildFilterPredicate(treeFilters.value);
+});
+
 export const filteredTree = computed(() => {
   return treeEntries.value.reduce(
     (acc, [key, value]) => {
@@ -87,17 +98,13 @@ export const filteredTree = computed(() => {
       }
 
       const { root, leavesById, groupsById } = value;
+
       const tree = createRecursiveTree({
         group: root as AwesomeTreeGroup,
         leavesById,
         groupsById,
-        filterOptions: {
-          query: treeQuery.value,
-          status: treeStatus.value,
-          filter: treeFilter.value,
-          sortBy: treeSortBy.value,
-          direction: treeDirection.value,
-        },
+        filterPredicate: filterPredicate.value,
+        sortBy: sortBy.value,
       });
 
       return Object.assign(acc, {

package/src/stores/treeFilters/actions.ts

@@ -1,67 +1,63 @@
-import type { TestStatusTransition } from "@allurereport/core-api";
-import { batch } from "@preact/signals";
-import type { AwesomeStatus } from "types";
-import { treeDirection, treeFilter, treeQuery, treeSortBy, treeStatus } from ".";
-import { transitionFiltersList } from "./constants";
-import type { TreeDirection, TreeSortBy } from "./types";
-
-export const clearTreeFilters = () => {
-  batch(() => {
-    treeQuery.value = "";
-    treeStatus.value = "total";
-    treeFilter.value = {
-      flaky: false,
-      retry: false,
-      new: false,
-      fixed: false,
-      regressed: false,
-      malfunctioned: false,
-    };
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import { ReportFetchError, fetchReportJsonData, setParams } from "@allurereport/web-commons";
+import { PARAMS } from "./constants";
+import type { TreeFiltersData } from "./model";
+import { treeTags } from "./store";
+
+export const setQueryFilter = (query?: string) => {
+  setParams({
+    key: PARAMS.QUERY,
+    value: query?.trim() === "" ? undefined : query,
   });
 };
 
-export const setTreeQuery = (query: string) => {
-  treeQuery.value = query;
+export const setStatusFilter = (status?: TestStatus) => {
+  setParams({
+    key: PARAMS.STATUS,
+    value: status,
+  });
 };
 
-export const setTreeStatus = (status: AwesomeStatus) => {
-  treeStatus.value = status;
+export const setFlakyFilter = (flaky?: boolean) => {
+  setParams({
+    key: PARAMS.FLAKY,
+    value: flaky ? "true" : undefined,
+  });
 };
 
-export const setTreeSortBy = (sortBy: TreeSortBy) => {
-  treeSortBy.value = sortBy;
+export const setRetryFilter = (retry?: boolean) => {
+  setParams({
+    key: PARAMS.RETRY,
+    value: retry ? "true" : undefined,
+  });
 };
 
-export const setTreeDirection = (direction: TreeDirection) => {
-  treeDirection.value = direction;
+export const setTransitionFilter = (transitions: TestStatusTransition[]) => {
+  setParams({
+    key: PARAMS.TRANSITION,
+    value: transitions,
+  });
 };
 
-export const setFilters = (filters: Record<string, boolean>) => {
-  treeFilter.value = {
-    ...treeFilter.peek(),
-    ...filters,
-  };
+export const setTagsFilter = (tags: string[]) => {
+  setParams({
+    key: PARAMS.TAGS,
+    value: tags,
+  });
 };
 
-export const setTestTypeFilter = (testType: "flaky" | "retry", value: boolean) => {
-  treeFilter.value = {
-    ...treeFilter.peek(),
-    [testType]: value,
-  };
-};
+export const fetchTreeFiltersData = async () => {
+  try {
+    const response = await fetchReportJsonData<TreeFiltersData>("widgets/tree-filters.json", { bustCache: true });
+
+    treeTags.value = response.tags;
+  } catch (error) {
+    if (error instanceof ReportFetchError && error.response.status === 404) {
+      treeTags.value = [];
+      return;
+    }
 
-export const setTransitionFilter = (transition: TestStatusTransition, value: boolean) => {
-  treeFilter.value = {
-    ...treeFilter.peek(),
-    ...transitionFiltersList.reduce(
-      (acc, t) => {
-        acc[t] = false;
-        if (t === transition) {
-          acc[t] = value;
-        }
-        return acc;
-      },
-      {} as Record<TestStatusTransition, boolean>,
-    ),
-  };
+    // eslint-disable-next-line no-console
+    console.error("Failed to fetch tree filters data:\n\n", error);
+  }
 };

package/src/stores/treeFilters/constants.ts

@@ -1,7 +1,13 @@
-import type { TestStatusTransition } from "@allurereport/core-api";
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
 
-export const testTypeFiltersList = ["flaky", "retry"];
+export const TRANSITIONS: TestStatusTransition[] = ["new", "fixed", "regressed", "malfunctioned"];
+export const STATUSES: TestStatus[] = ["passed", "failed", "skipped", "broken", "unknown"];
 
-export const transitionFiltersList = ["new", "fixed", "regressed", "malfunctioned"] as TestStatusTransition[];
-
-export const filtersList = [...testTypeFiltersList, ...transitionFiltersList] as const;
+export const PARAMS = {
+  QUERY: "query",
+  STATUS: "status",
+  FLAKY: "flaky",
+  RETRY: "retry",
+  TRANSITION: "transition",
+  TAGS: "tags",
+} as const;

package/src/stores/treeFilters/model.ts

@@ -0,0 +1,51 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import type {
+  ArrayField,
+  BooleanField,
+  Field,
+  FieldFilter,
+  FieldFilterGroup,
+  StringField,
+} from "@allurereport/web-commons";
+import type { AwesomeTreeLeaf } from "types";
+
+export type Filters = {
+  query?: string;
+  status?: TestStatus;
+  flaky?: boolean;
+  retry?: boolean;
+  transition?: TestStatusTransition[];
+  tags?: string[];
+};
+
+export type AwesomeFieldFilter = FieldFilter<keyof AwesomeTreeLeaf>;
+
+export type AwesomeFieldFilterGroup = FieldFilterGroup<keyof AwesomeTreeLeaf> & {
+  fieldKey?: keyof AwesomeTreeLeaf;
+};
+
+export type AwesomeFilterGroupSimple = AwesomeFieldFilterGroup & {
+  value: AwesomeFieldFilter[];
+};
+
+export type AwesomeFilter = AwesomeFieldFilter | AwesomeFilterGroupSimple;
+
+export type AwesomeField = Field<keyof AwesomeTreeLeaf>;
+
+export type AwesomeBooleanField = BooleanField<keyof AwesomeTreeLeaf>;
+
+export type AwesomeStringFieldFilter = AwesomeFieldFilter & {
+  value: StringField<keyof AwesomeTreeLeaf>;
+};
+
+export type AwesomeArrayFieldFilter = AwesomeFieldFilter & {
+  value: ArrayField<keyof AwesomeTreeLeaf>;
+};
+
+export type AwesomeBooleanFieldFilter = AwesomeFieldFilter & {
+  value: AwesomeBooleanField;
+};
+
+export type TreeFiltersData = {
+  tags: string[];
+};