@allurereport/web-classic 3.0.0-beta.10

package/src/stores/categories.ts

@@ -0,0 +1,127 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import type { AwesomeStatus, AwesomeTree, AwesomeTreeGroup } 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: AwesomeStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};
+
+export const categoriesStore = signal<StoreSignalState<AwesomeTree>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const noTests = computed(() => !Object.keys(categoriesStore?.value?.data?.leavesById).length);
+
+export const categoriesFiltersStore = signal<TreeFiltersState>({
+  query: "",
+  status: "total",
+  filter: {
+    flaky: false,
+    retry: false,
+    new: false,
+  },
+  sortBy: "order",
+  direction: "asc",
+});
+
+export const filteredCategories = computed(() => {
+  const { root, leavesById, groupsById } = categoriesStore.value.data;
+
+  return createRecursiveTree({
+    group: root as AwesomeTreeGroup,
+    leavesById,
+    groupsById,
+    filterOptions: categoriesFiltersStore.value,
+  });
+});
+
+export const noTestsFound = computed(() => {
+  return isRecursiveTreeEmpty(filteredCategories.value);
+});
+
+export const clearCategoriesFilters = () => {
+  categoriesFiltersStore.value = {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  };
+};
+
+export const setCategoriesQuery = (query: string) => {
+  categoriesFiltersStore.value = {
+    ...categoriesFiltersStore.value,
+    query,
+  };
+};
+
+export const setCategoriesStatus = (status: AwesomeStatus) => {
+  categoriesFiltersStore.value = {
+    ...categoriesFiltersStore.value,
+    status,
+  };
+};
+
+export const setCategoriesSortBy = (sortBy: TreeSortBy) => {
+  categoriesFiltersStore.value = {
+    ...categoriesFiltersStore.value,
+    sortBy,
+  };
+};
+
+export const setCategoriesDirection = (direction: TreeDirection) => {
+  categoriesFiltersStore.value = {
+    ...categoriesFiltersStore.value,
+    direction,
+  };
+};
+
+export const setCategoriesFilter = (filterKey: TreeFilters, value: boolean) => {
+  categoriesFiltersStore.value = {
+    ...categoriesFiltersStore.value,
+    filter: {
+      ...categoriesFiltersStore.value.filter,
+      [filterKey]: value,
+    },
+  };
+};
+
+export const fetchCategoriesData = async () => {
+  categoriesStore.value = {
+    ...categoriesStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<AwesomeTree>("widgets/categories.json");
+
+    categoriesStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    categoriesStore.value = {
+      ...categoriesStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/chart.ts

@@ -0,0 +1,32 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import { StoreSignalState } from "@/stores/types";
+
+export const pieChartStore = signal<StoreSignalState<any>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchPieChartData = async () => {
+  pieChartStore.value = {
+    ...pieChartStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData("widgets/allure_pie_chart.json");
+
+    pieChartStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    pieChartStore.value = {
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/envInfo.ts

@@ -0,0 +1,34 @@
+import type { EnvironmentItem } from "@allurereport/core-api";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export const envInfoStore = signal<StoreSignalState<EnvironmentItem[]>>({
+  loading: false,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchEnvInfo = async () => {
+  envInfoStore.value = {
+    ...envInfoStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<EnvironmentItem[]>("widgets/allure_environment.json");
+
+    envInfoStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    envInfoStore.value = {
+      ...envInfoStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/index.ts

@@ -0,0 +1,4 @@
+export * from "./theme";
+export type * from "./types";
+export * from "./stats";
+export * from "./locale";

package/src/stores/locale.ts

@@ -0,0 +1,83 @@
+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 { AwesomeReportOptions } from "../../types.js";
+
+const { reportLanguage } = getReportOptions<AwesomeReportOptions>() ?? {};
+
+const namespaces = [
+  "empty",
+  "execution",
+  "filters",
+  "search",
+  "severity",
+  "sort-by",
+  "sort-by.directions",
+  "sort-by.values",
+  "statuses",
+  "tabs",
+  "testSummary",
+  "ui",
+  "welcome",
+  "controls",
+  "errors",
+  "nav",
+];
+
+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 { AwesomeStatus, AwesomeTree, AwesomeTreeGroup } 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: AwesomeStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};
+
+export const packagesStore = signal<StoreSignalState<AwesomeTree>>({
+  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 AwesomeTreeGroup,
+    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: AwesomeStatus) => {
+  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<AwesomeTree>("widgets/packages.json");
+
+    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");
+
+    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 AwesomeTestResult } from "types";
+import { type StoreSignalState } from "./types";
+
+export type TestResultsStoreState = Record<string, AwesomeTestResult>;
+
+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");
+
+    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<AwesomeTestResult>(`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,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { AwesomeReportOptions } from "../../types.js";
+
+type Theme = "light" | "dark";
+
+const { theme } = getReportOptions<AwesomeReportOptions>() ?? {};
+
+export const themeStore = signal<Theme>("light");
+
+export const setTheme = (newTheme: Theme): void => {
+  themeStore.value = newTheme;
+  document.documentElement.setAttribute("data-theme", newTheme);
+  window.localStorage.setItem("theme", newTheme);
+};
+
+export const toggleTheme = () => {
+  setTheme(themeStore.value === "light" ? "dark" : "light");
+};
+
+export const getTheme = () => {
+  const themeFromLS = (window.localStorage.getItem("theme") as Theme | null) || (theme as Theme);
+
+  if (themeFromLS) {
+    setTheme(themeFromLS);
+    return;
+  }
+
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const initialTheme = prefersDarkScheme ? "dark" : "light";
+
+  setTheme(initialTheme);
+};