@allurereport/web-awesome 3.0.1 → 3.2.0

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[];
+};

package/src/stores/treeFilters/store.ts

@@ -1,73 +1,273 @@
-import { batch, computed, effect, signal } from "@preact/signals";
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import { getParamValue, getParamValues } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
 import type { AwesomeStatus } from "types";
-import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
-import { persist } from "@/utils/persist";
-import { transitionFiltersList } from "./constants";
-import type { TreeDirection, TreeFilters, TreeFiltersState, TreeSortBy } from "./types";
-
-export const treeQuery = signal<string>("");
-export const treeStatus = signal<AwesomeStatus>("total");
-export const treeSortBy = signal<TreeSortBy>("order");
-export const treeDirection = signal<TreeDirection>("asc");
-export const treeFilter = signal<Record<TreeFilters, boolean>>({
-  flaky: false,
-  retry: false,
-  new: false,
-  fixed: false,
-  regressed: false,
-  malfunctioned: false,
+import {
+  setFlakyFilter,
+  setQueryFilter,
+  setRetryFilter,
+  setStatusFilter,
+  setTagsFilter,
+  setTransitionFilter,
+} from "./actions";
+import { PARAMS } from "./constants";
+import type {
+  AwesomeArrayFieldFilter,
+  AwesomeBooleanFieldFilter,
+  AwesomeFilter,
+  AwesomeFilterGroupSimple,
+  AwesomeStringFieldFilter,
+} from "./model";
+import {
+  isFlakyFilter,
+  isRetryFilter,
+  isTagFilter,
+  isTransitionFilter,
+  validateStatus,
+  validateTransition,
+} from "./utils";
+
+export const treeTags = signal<string[]>([]);
+
+const hasTreeTags = computed(() => treeTags.value.length > 0);
+
+const urlQueryFilter = computed<string | undefined>(() => {
+  const queryValue = getParamValue(PARAMS.QUERY) ?? "";
+
+  if (queryValue.trim() === "") {
+    return undefined;
+  }
+
+  return queryValue;
 });
 
-const initialized = signal(false);
-
-const init = () => {
-  const initialState = loadFromLocalStorage<TreeFiltersState>("treeFilters", {
-    query: "",
-    status: "total",
-    filter: {
-      flaky: false,
-      retry: false,
-      new: false,
-      fixed: false,
-      regressed: false,
-      malfunctioned: false,
-    },
-    sortBy: "order",
-    direction: "asc",
-  });
-
-  batch(() => {
-    treeQuery.value = initialState.query;
-    treeStatus.value = initialState.status;
-    treeSortBy.value = initialState.sortBy;
-    treeDirection.value = initialState.direction;
-    treeFilter.value = initialState.filter;
-    initialized.value = true;
-  });
+const urlStatusFilter = computed<TestStatus | undefined>(() => {
+  const status = getParamValue(PARAMS.STATUS) ?? undefined;
+
+  if (status && validateStatus(status)) {
+    return status;
+  }
+
+  return undefined;
+});
+
+const urlFlakyFilter = computed(() => getParamValue(PARAMS.FLAKY) === "true");
+const urlRetryFilter = computed(() => getParamValue(PARAMS.RETRY) === "true");
+
+const EMPTY_TRANSITIONS: TestStatusTransition[] = [];
+
+const urlTransitionFilter = computed(() => {
+  const transitions = getParamValues(PARAMS.TRANSITION) ?? EMPTY_TRANSITIONS;
+
+  if (transitions.length === 0) {
+    return EMPTY_TRANSITIONS;
+  }
+
+  return transitions.filter((transition) => validateTransition(transition));
+});
+
+const EMPTY_TAGS: string[] = [];
+
+const urlTagsFilter = computed<string[]>(() => {
+  const tags = getParamValues(PARAMS.TAGS) ?? EMPTY_TAGS;
+
+  if (tags.length === 0) {
+    return EMPTY_TAGS;
+  }
+
+  if (treeTags.value.length === 0) {
+    return tags;
+  }
+
+  return tags.filter((tag) => treeTags.value.includes(tag));
+});
+
+const treeStatusFilter = computed<AwesomeStringFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "AND",
+  value: {
+    key: "status",
+    value: urlStatusFilter.value,
+    type: "string",
+    strict: false,
+  },
+}));
+
+export const treeQueryFilter = computed<AwesomeFilterGroupSimple>(() => {
+  return {
+    type: "group",
+    logicalOperator: "AND",
+    value: [
+      {
+        type: "field",
+        logicalOperator: "OR",
+        value: {
+          key: "name",
+          value: urlQueryFilter.value,
+          type: "string",
+          strict: false,
+        },
+      },
+      {
+        type: "field",
+        logicalOperator: "OR",
+        value: {
+          key: "id",
+          value: urlQueryFilter.value,
+          type: "string",
+          strict: false,
+        },
+      },
+    ],
+  };
+});
+
+export const treeQueryFilterValue = computed(() => treeQueryFilter.value.value[0].value.value as string);
+
+export const setTreeQueryFilter = (query: string) => {
+  setQueryFilter(query);
 };
 
-init();
+const treeRetryFilter = computed<AwesomeBooleanFieldFilter>(() => {
+  return {
+    type: "field",
+    logicalOperator: "OR",
+    value: {
+      key: "retry",
+      value: !!urlRetryFilter.value,
+      type: "boolean",
+    },
+  };
+});
+
+const treeFlakyFilter = computed<AwesomeBooleanFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "OR",
+  value: {
+    key: "flaky",
+    value: !!urlFlakyFilter.value,
+    type: "boolean",
+  },
+}));
+
+const treeTransitionFilter = computed<AwesomeFilterGroupSimple>(() => ({
+  type: "group",
+  logicalOperator: "AND",
+  fieldKey: "transition",
+  value: urlTransitionFilter.value.map((transition) => ({
+    type: "field",
+    value: {
+      key: "transition",
+      value: transition,
+      type: "string",
+      logicalOperator: "OR",
+      strict: true,
+    },
+  })),
+}));
 
-const treeFiltersState = computed(() => ({
-  query: treeQuery.value,
-  status: treeStatus.value,
-  sortBy: treeSortBy.value,
-  direction: treeDirection.value,
-  filter: treeFilter.value,
+const treeTagsFilter = computed<AwesomeArrayFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "AND",
+  value: {
+    key: "tags",
+    value: urlTagsFilter.value,
+    type: "array",
+    strict: false,
+  },
 }));
 
-effect(() => {
-  if (!initialized.value) {
-    return;
+export const treeQuickFilters = computed<AwesomeFilter[]>(() => [
+  treeRetryFilter.value,
+  treeFlakyFilter.value,
+  treeTransitionFilter.value,
+  treeTagsFilter.value,
+]);
+
+export const treeFilters = computed(() => {
+  const filters: AwesomeFilter[] = [];
+
+  if (treeQueryFilterValue.value) {
+    filters.push(treeQueryFilter.value);
+  }
+
+  const hasBothRetryAndFlaky = urlRetryFilter.value && urlFlakyFilter.value;
+
+  if (hasBothRetryAndFlaky) {
+    filters.push({
+      type: "group",
+      logicalOperator: "AND",
+      value: [
+        { ...treeRetryFilter.value, logicalOperator: "OR" },
+        { ...treeFlakyFilter.value, logicalOperator: "OR" },
+      ],
+    });
+  }
+
+  if (!hasBothRetryAndFlaky && urlRetryFilter.value) {
+    filters.push({ ...treeRetryFilter.value, logicalOperator: "AND" });
+  }
+
+  if (!hasBothRetryAndFlaky && urlFlakyFilter.value) {
+    filters.push({ ...treeFlakyFilter.value, logicalOperator: "AND" });
+  }
+
+  if (urlTransitionFilter.value.length > 0) {
+    filters.push(treeTransitionFilter.value);
+  }
+
+  if (urlTagsFilter.value.length > 0) {
+    filters.push(treeTagsFilter.value);
+  }
+
+  if (urlStatusFilter.value) {
+    filters.push(treeStatusFilter.value);
   }
 
-  persist(["treeFilters", treeFiltersState.value]);
+  return filters;
 });
 
-export const transitionFilters = computed(() =>
-  transitionFiltersList.map((transition) => [transition, treeFilter.value[transition]] as const),
-);
+export const setTreeFilter = (filter: AwesomeFilter) => {
+  if (isTransitionFilter(filter)) {
+    const transitions: TestStatusTransition[] = [];
 
-export const testTypeFilters = computed(() =>
-  (["flaky", "retry"] as const).map((testType) => [testType, treeFilter.value[testType]] as const),
-);
+    for (const v of filter.value) {
+      if (v.type === "field" && v.value.type === "string" && v.value.key === "transition") {
+        transitions.push(v.value.value as TestStatusTransition);
+      }
+    }
+
+    setTransitionFilter(transitions);
+  }
+
+  if (isRetryFilter(filter)) {
+    setRetryFilter(filter.value.value);
+  }
+
+  if (isFlakyFilter(filter)) {
+    setFlakyFilter(filter.value.value);
+  }
+
+  if (
+    isTagFilter(filter) &&
+    // Apply tags filter only if there are tags to filter by
+    hasTreeTags.peek()
+  ) {
+    setTagsFilter(filter.value.value);
+  }
+};
+
+export const treeStatus = computed<AwesomeStatus>(() => urlStatusFilter.value ?? "total");
+
+export const setTreeStatus = (status: AwesomeStatus) => {
+  setStatusFilter(status === "total" ? undefined : status);
+};
+
+export const clearTreeFilters = () => {
+  setQueryFilter("");
+  setRetryFilter(false);
+  setFlakyFilter(false);
+  setTransitionFilter([]);
+  setTagsFilter([]);
+  setStatusFilter();
+};

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";
+};