@allurereport/web-awesome 3.0.1 → 3.1.0

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

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,
     };