@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/stores/locale.ts

@@ -0,0 +1,84 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import i18next, { type TOptions } from "i18next";
+import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale } from "@/translations/constants";
+import type { ClassicReportOptions } from "../../types.js";
+
+const { reportLanguage } = getReportOptions<ClassicReportOptions>() ?? {};
+
+const namespaces = [
+  "empty",
+  "execution",
+  "filters",
+  "search",
+  "severity",
+  "sort-by",
+  "sort-by.directions",
+  "sort-by.values",
+  "statuses",
+  "tabs",
+  "testSummary",
+  "ui",
+  "welcome",
+  "controls",
+  "errors",
+  "nav",
+  "charts",
+];
+
+export const currentLocale = signal<LangLocale>("" as LangLocale);
+
+export const currentLocaleIso = computed(() => {
+  const locale = currentLocale.value;
+
+  return LANG_LOCALE[locale].iso;
+});
+
+export const currentLocaleIsRTL = computed(() => {
+  return ["ar", "he", "fa"].includes(currentLocale.value as string);
+});
+
+export const getLocale = () => {
+  const locale = localStorage.getItem("currentLocale") || reportLanguage || DEFAULT_LOCALE;
+  setLocale(locale as LangLocale);
+};
+
+i18next
+  .use({
+    type: "backend",
+    read: async (
+      language: LangLocale,
+      namespace: string,
+      callback: (errorValue: unknown, translations: Record<string, string> | null) => void,
+    ) => {
+      try {
+        const resources = await import(`@/translations/${language}.json`);
+        callback(null, (resources[namespace] as Record<string, string>) || null);
+      } catch (error) {
+        callback(error, null);
+      }
+    },
+  })
+  .init({
+    lng: currentLocale.value,
+    fallbackLng: "en",
+    ns: namespaces,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export const useI18n = (namespace?: string) => {
+  const t = computed(() => (key: string, options?: TOptions) => i18next.t(key, { ns: namespace, ...options }));
+
+  return {
+    t: t.value,
+    currentLocale: currentLocale.value,
+  };
+};
+
+export const setLocale = async (locale: LangLocale) => {
+  await i18next.changeLanguage(locale);
+  localStorage.setItem("currentLocale", locale);
+  currentLocale.value = locale;
+};

package/src/stores/packages.ts

@@ -0,0 +1,127 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import type { ClassicStatus, ClassicTree, ClassicTreeGroup } from "types";
+import type { StoreSignalState } from "@/stores/types";
+import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
+
+export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
+export type TreeDirection = "asc" | "desc";
+export type TreeFilters = "flaky" | "retry" | "new";
+export type TreeFiltersState = {
+  query: string;
+  status: ClassicStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};
+
+export const packagesStore = signal<StoreSignalState<ClassicTree>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const noTests = computed(() => !Object.keys(packagesStore?.value?.data?.leavesById).length);
+
+export const packagesFiltersStore = signal<TreeFiltersState>({
+  query: "",
+  status: "total",
+  filter: {
+    flaky: false,
+    retry: false,
+    new: false,
+  },
+  sortBy: "order",
+  direction: "asc",
+});
+
+export const filteredPackages = computed(() => {
+  const { root, leavesById, groupsById } = packagesStore.value.data;
+
+  return createRecursiveTree({
+    group: root as ClassicTreeGroup,
+    leavesById,
+    groupsById,
+    filterOptions: packagesFiltersStore.value,
+  });
+});
+
+export const noTestsFound = computed(() => {
+  return isRecursiveTreeEmpty(filteredPackages.value);
+});
+
+export const clearPackagesFilters = () => {
+  packagesFiltersStore.value = {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  };
+};
+
+export const setPackagesQuery = (query: string) => {
+  packagesFiltersStore.value = {
+    ...packagesFiltersStore.value,
+    query,
+  };
+};
+
+export const setPackagesStatus = (status: ClassicStatus) => {
+  packagesFiltersStore.value = {
+    ...packagesFiltersStore.value,
+    status,
+  };
+};
+
+export const setPackagesSortBy = (sortBy: TreeSortBy) => {
+  packagesFiltersStore.value = {
+    ...packagesFiltersStore.value,
+    sortBy,
+  };
+};
+
+export const setPackagesDirection = (direction: TreeDirection) => {
+  packagesFiltersStore.value = {
+    ...packagesFiltersStore.value,
+    direction,
+  };
+};
+
+export const setPackagesFilter = (filterKey: TreeFilters, value: boolean) => {
+  packagesFiltersStore.value = {
+    ...packagesFiltersStore.value,
+    filter: {
+      ...packagesFiltersStore.value.filter,
+      [filterKey]: value,
+    },
+  };
+};
+
+export const fetchPackagesData = async () => {
+  packagesStore.value = {
+    ...packagesStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<ClassicTree>("widgets/packages.json", { bustCache: true });
+
+    packagesStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    packagesStore.value = {
+      ...packagesStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/router.ts

@@ -0,0 +1,55 @@
+import { computed, signal } from "@preact/signals";
+
+type NavigateToString = string;
+type NavigateToObject = {
+  tabName?: string;
+  params?: {
+    id?: string | null;
+    testResultId?: string | null;
+  };
+};
+
+const parseHash = () => {
+  const hash = globalThis.location.hash.slice(1);
+  const [tabName, ...params] = hash.split("/");
+  return {
+    tabName: tabName,
+    params: { id: params[0] || null, testResultId: params[1] || null },
+  };
+};
+
+export const route = signal(parseHash());
+
+export const handleHashChange = () => {
+  const newRoute = parseHash();
+
+  if (
+    newRoute.tabName !== route.value.tabName ||
+    newRoute.params.id !== route.value.params.id ||
+    newRoute.params.testResultId !== route.value.params.testResultId
+  ) {
+    route.value = newRoute;
+  }
+};
+
+export const navigateTo = (path: NavigateToString | NavigateToObject) => {
+  let newHash = "";
+
+  if (typeof path === "string") {
+    newHash = path.startsWith("#") ? path.slice(1) : path;
+  } else {
+    const { tabName = "overview", params = {} } = path;
+    const { id = null, testResultId = null } = params;
+    newHash = `${tabName}/${id || ""}/${testResultId || ""}`;
+  }
+
+  history.pushState(null, "", `#${newHash}`);
+
+  handleHashChange();
+};
+
+export const openInNewTab = (path: string) => {
+  window.open(`#${path}`, "_blank");
+};
+
+export const activeTab = computed(() => route.value.tabName);

package/src/stores/stats.ts

@@ -0,0 +1,36 @@
+import type { Statistic } from "@allurereport/core-api";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export const statsStore = signal<StoreSignalState<Statistic>>({
+  loading: true,
+  error: undefined,
+  data: {
+    total: 0,
+  },
+});
+
+export const fetchStats = async () => {
+  statsStore.value = {
+    ...statsStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<Statistic>("widgets/allure_statistic.json", { bustCache: true });
+
+    statsStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    statsStore.value = {
+      data: { total: 0 },
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/tabs.ts

@@ -0,0 +1,7 @@
+import { signal } from "@preact/signals";
+
+export const currentTab = signal<string | undefined>("total");
+
+export const setCurrentTab = (tab: string) => {
+  currentTab.value = tab;
+};

package/src/stores/testResults.ts

@@ -0,0 +1,66 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import { type ClassicTestResult } from "types";
+import { type StoreSignalState } from "./types";
+
+export type TestResultsStoreState = Record<string, ClassicTestResult>;
+
+export type TestResultNavStoreState = string[];
+
+export const testResultStore = signal<StoreSignalState<TestResultsStoreState>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const testResultNavStore = signal<StoreSignalState<TestResultNavStoreState>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTestResultNav = async () => {
+  try {
+    const data = await fetchReportJsonData<string[]>("widgets/nav.json", { bustCache: true });
+
+    testResultNavStore.value = {
+      data,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    testResultNavStore.value = {
+      ...testResultNavStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};
+
+export const fetchTestResult = async (testResultId: string) => {
+  if (!testResultId) {
+    return;
+  }
+
+  testResultStore.value = {
+    ...testResultStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const data = await fetchReportJsonData<ClassicTestResult>(`data/test-results/${testResultId}.json`);
+
+    testResultStore.value = {
+      data: { ...testResultStore.value.data, [testResultId]: data },
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    testResultStore.value = {
+      ...testResultStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/theme.ts

@@ -0,0 +1,30 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import type { Theme } from "@allurereport/web-components";
+import { signal } from "@preact/signals";
+import type { ClassicReportOptions } from "../../types.js";
+
+export const themeStore = signal<Theme>("auto");
+
+export const setTheme = (mode: "light" | "dark" | "auto") => {
+  themeStore.value = mode;
+
+  try {
+    window.localStorage.setItem("theme", mode);
+  } catch {}
+
+  document.documentElement.setAttribute("data-theme", mode);
+};
+
+export const toggleTheme = () => {
+  const order = ["light", "dark", "auto"];
+  const current = themeStore.value;
+  const next = order[(order.indexOf(current) + 1) % order.length] as Theme;
+  setTheme(next);
+};
+
+export const getTheme = () => {
+  const { theme } = getReportOptions<ClassicReportOptions>() ?? {};
+  const themeFromLS = (window.localStorage.getItem("theme") as Theme | null) || (theme as Theme);
+
+  setTheme(themeFromLS);
+};

package/src/stores/tree.ts

@@ -0,0 +1,127 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import type { ClassicStatus, ClassicTree, ClassicTreeGroup } from "types";
+import type { StoreSignalState } from "@/stores/types";
+import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
+
+export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
+export type TreeDirection = "asc" | "desc";
+export type TreeFilters = "flaky" | "retry" | "new";
+export type TreeFiltersState = {
+  query: string;
+  status: ClassicStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};
+
+export const treeStore = signal<StoreSignalState<ClassicTree>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const noTests = computed(() => !Object.keys(treeStore?.value?.data?.leavesById).length);
+
+export const treeFiltersStore = signal<TreeFiltersState>({
+  query: "",
+  status: "total",
+  filter: {
+    flaky: false,
+    retry: false,
+    new: false,
+  },
+  sortBy: "order",
+  direction: "asc",
+});
+
+export const filteredTree = computed(() => {
+  const { root, leavesById, groupsById } = treeStore.value.data;
+
+  return createRecursiveTree({
+    group: root as ClassicTreeGroup,
+    leavesById,
+    groupsById,
+    filterOptions: treeFiltersStore.value,
+  });
+});
+
+export const noTestsFound = computed(() => {
+  return isRecursiveTreeEmpty(filteredTree.value);
+});
+
+export const clearTreeFilters = () => {
+  treeFiltersStore.value = {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  };
+};
+
+export const setTreeQuery = (query: string) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    query,
+  };
+};
+
+export const setTreeStatus = (status: ClassicStatus) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    status,
+  };
+};
+
+export const setTreeSortBy = (sortBy: TreeSortBy) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    sortBy,
+  };
+};
+
+export const setTreeDirection = (direction: TreeDirection) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    direction,
+  };
+};
+
+export const setTreeFilter = (filterKey: TreeFilters, value: boolean) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    filter: {
+      ...treeFiltersStore.value.filter,
+      [filterKey]: value,
+    },
+  };
+};
+
+export const fetchTreeData = async () => {
+  treeStore.value = {
+    ...treeStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<ClassicTree>("widgets/tree.json", { bustCache: true });
+
+    treeStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    treeStore.value = {
+      ...treeStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/trend.ts

@@ -0,0 +1,36 @@
+import { createCharts, fetchReportJsonData } from "@allurereport/web-commons";
+import type { ChartsData, ChartsResponse, UIChartsData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export const trendStore = signal<StoreSignalState<UIChartsData>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTrendData = async () => {
+  trendStore.value = {
+    ...trendStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<ChartsResponse>("widgets/charts.json", { bustCache: true });
+
+    const data = "general" in res && "byEnv" in res ? res.general : res;
+
+    trendStore.value = {
+      data: createCharts(data as ChartsData),
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    trendStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/types.ts

@@ -0,0 +1,5 @@
+export interface StoreSignalState<T> {
+  error?: string;
+  loading: boolean;
+  data?: T;
+}