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

package/src/stores/locale.ts

@@ -1,15 +1,14 @@
-import { getReportOptions } from "@allurereport/web-commons";
+import { formatDuration } from "@allurereport/core-api";
+import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale, 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 "@/i18n/constants";
-import type { AllureAwesomeReportOptions } from "../../types.js";
-
-const { reportLanguage } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+import type { AwesomeReportOptions } from "types";
 
 const namespaces = [
   "empty",
   "execution",
   "filters",
+  "filters.description",
   "search",
   "severity",
   "sort-by",
@@ -22,31 +21,36 @@ const namespaces = [
   "welcome",
   "controls",
   "errors",
-];
+  "split",
+  "modal",
+  "environments",
+  "charts",
+  "sections",
+  "timeline",
+  "transitions",
+] as const;
 
 export const currentLocale = signal<LangLocale>("en" as LangLocale);
+export const currentLocaleIso = computed(() => LANG_LOCALE[currentLocale.value]?.iso ?? LANG_LOCALE.en.iso);
+export const currentLocaleIsRTL = computed(() => ["ar", "he", "fa"].includes(currentLocale.value));
 
-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 = () => {
+export const getLocale = async () => {
+  const { reportLanguage } = getReportOptions<AwesomeReportOptions>() ?? {};
   const locale = localStorage.getItem("currentLocale") || reportLanguage || DEFAULT_LOCALE;
-  setLocale(locale as LangLocale);
+
+  await setLocale(locale as LangLocale);
 };
 
-i18next
+export const waitForI18next = i18next
   .use({
     type: "backend",
-    async read(language: LangLocale, namespace: string, callback: (errorValue: unknown, translations: null) => void) {
-      await import(`@/i18n/locales/${language}.json`)
-        .then((resources) => {
+    read: async (
+      language: LangLocale,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null) => void,
+    ) => {
+      await import(`@/locales/${language}.json`)
+        .then((resources: Record<string, null>) => {
           callback(null, resources[namespace]);
         })
         .catch((error) => {
@@ -58,13 +62,57 @@ i18next
     lng: currentLocale.value,
     fallbackLng: "en",
     ns: namespaces,
-    interpolation: {
-      escapeValue: false,
-    },
+    interpolation: { escapeValue: false },
+  })
+  .then(() => {
+    i18next.services.formatter.add("capitalize", (value) => {
+      return value.charAt(0).toLocaleUpperCase() + value.slice(1);
+    });
+    i18next.services.formatter.add("timestamp_date", (value: number, lng, options) => {
+      const formatter = new Intl.DateTimeFormat(lng, {
+        ...options,
+        month: "numeric",
+        day: "numeric",
+        year: "numeric",
+      });
+      return formatter.format(value);
+    });
+    i18next.services.formatter.add("timestamp_long", (value: number, lng, options) => {
+      const formatter = new Intl.DateTimeFormat(lng, {
+        ...options,
+        month: "numeric",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        hour12: false,
+      });
+      return formatter.format(value).replace(",", ` ${i18next.t("ui:at")}`);
+    });
+    i18next.services.formatter.add("timestamp_long_no_seconds", (value: number, lng, options) => {
+      const formatter = new Intl.DateTimeFormat(lng, {
+        ...options,
+        month: "numeric",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        hour12: false,
+      });
+      return formatter.format(value).replace(",", ` ${i18next.t("ui:at")}`);
+    });
+    i18next.services.formatter.add("format_duration", (value: number) => {
+      return formatDuration(value);
+    });
   });
 
-export const useI18n = (namespace?: string) => {
-  const t = computed(() => (key: string, options?: TOptions) => i18next.t(key, { ns: namespace, ...options }));
+export const useI18n = (namespace: (typeof namespaces)[number]) => {
+  const t = computed(
+    () =>
+      (key: string, options: TOptions = {}) =>
+        i18next.t(key, { ns: namespace, ...options }),
+  );
 
   return {
     t: t.value,
@@ -73,7 +121,7 @@ export const useI18n = (namespace?: string) => {
 };
 
 export const setLocale = async (locale: LangLocale) => {
-  await i18next.changeLanguage(locale);
-  localStorage.setItem("currentLocale", locale);
+  await i18next.changeLanguage(locale as string);
+  localStorage.setItem("currentLocale", locale as string);
   currentLocale.value = locale;
 };

package/src/stores/modal.ts

@@ -0,0 +1,22 @@
+import type { ModalDataProps } from "@allurereport/web-components";
+import { signal } from "@preact/signals";
+
+export const isModalOpen = signal(false);
+
+export const modalData = signal<ModalDataProps>({
+  data: null,
+  preview: false,
+  component: null,
+  isModalOpen: isModalOpen.value,
+  closeModal: null,
+  title: "",
+});
+
+export const openModal = (props: ModalDataProps) => {
+  modalData.value = { ...props };
+  isModalOpen.value = true;
+};
+
+export const closeModal = () => {
+  isModalOpen.value = false;
+};

package/src/stores/qualityGate.ts

@@ -0,0 +1,28 @@
+import { QualityGateValidationResult } from "@allurereport/plugin-api";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import { type StoreSignalState } from "./types";
+
+export const qualityGateStore = signal<StoreSignalState<QualityGateValidationResult[]>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchQualityGateResults = async () => {
+  try {
+    const data = await fetchReportJsonData<QualityGateValidationResult[]>("widgets/quality-gate.json");
+
+    qualityGateStore.value = {
+      data,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    qualityGateStore.value = {
+      ...qualityGateStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/router.ts

@@ -0,0 +1,108 @@
+import { computed, signal } from "@preact/signals";
+
+type NavigateToObject = {
+  category?: string;
+  params?: {
+    testResultId?: string | null;
+    subTab?: string | null;
+  };
+};
+
+type Route = {
+  category?: string;
+  params?: {
+    testResultId?: string | null;
+    subTab?: string | null;
+  };
+};
+
+export const parseHash = (): Route => {
+  const hash = globalThis.location.hash.replace(/^#/, "").trim();
+  const parts = hash.split("/").filter(Boolean);
+  const [first, second] = parts;
+
+  if (parts.length === 0) {
+    return {};
+  }
+
+  if (parts.length === 1) {
+    if (/^[a-f0-9]{32,}$/.test(first)) {
+      return { params: { testResultId: first } };
+    }
+    return { category: first || "", params: { testResultId: second } };
+  }
+
+  if (parts.length === 2) {
+    if (/^[a-f0-9]{32,}$/.test(first)) {
+      return {
+        params: {
+          testResultId: first,
+          subTab: second,
+        },
+      };
+    }
+
+    return {
+      category: first,
+      params: {
+        testResultId: second,
+      },
+    };
+  }
+
+  if (parts.length === 3) {
+    const [category, testResultId, subTab] = parts;
+    return { category, params: { testResultId, subTab } };
+  }
+
+  return {};
+};
+
+export const route = signal<Route>(parseHash());
+
+export const handleHashChange = () => {
+  const newRoute = parseHash();
+
+  if (
+    newRoute.category !== route.value?.category ||
+    newRoute.params?.testResultId !== route.value.params?.testResultId ||
+    newRoute.params?.subTab !== route.value.params?.subTab
+  ) {
+    route.value = { ...newRoute };
+  }
+};
+
+export const navigateTo = (path: NavigateToObject | string) => {
+  let newHash = "";
+
+  if (typeof path === "string") {
+    newHash = path.startsWith("#") ? path.slice(1) : path;
+  } else {
+    const { category, params = {} } = path;
+    const parts: string[] = [];
+
+    if (category) {
+      parts.push(category);
+    }
+
+    if (params.testResultId) {
+      parts.push(params.testResultId);
+    }
+
+    if (params.subTab) {
+      parts.push(params.subTab);
+    }
+
+    newHash = parts.join("/");
+  }
+
+  history.pushState(null, "", `#${newHash}`);
+  handleHashChange();
+};
+
+export const openInNewTab = (path: string) => {
+  window.open(`#${path}`, "_blank");
+};
+
+export const activeTab = computed(() => route.value.category || "");
+export const activeSubTab = computed(() => route.value.params?.subTab || "overview");

package/src/stores/sections.ts

@@ -0,0 +1,63 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { effect, signal } from "@preact/signals";
+import { navigateTo, parseHash, route } from "@/stores/router";
+import type { AwesomeReportOptions } from "../../types.js";
+
+const DEFAULT_SECTION = "default";
+type Section = string;
+
+export const currentSection = signal<Section>("");
+export const availableSections = signal<Section[]>([]);
+
+const updateSectionState = (section: Section): void => {
+  currentSection.value = section;
+  document.documentElement.setAttribute("data-section", section);
+  globalThis.localStorage.setItem("chosenSection", section);
+};
+
+export const setSection = (chosenSection: Section): void => {
+  const isDefaultSection = chosenSection === DEFAULT_SECTION;
+  const isValidSection = availableSections.value?.includes(chosenSection);
+  const isSectionChanged = currentSection.value !== chosenSection;
+
+  updateSectionState(chosenSection);
+
+  if (isDefaultSection) {
+    navigateTo({ category: "" });
+    return;
+  }
+
+  if (isSectionChanged && isValidSection) {
+    navigateTo({ category: chosenSection });
+  }
+};
+
+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;
+  }
+
+  if (sectionFromLS) {
+    setSection(sectionFromLS);
+    return;
+  }
+
+  setSection("");
+};
+
+effect(() => {
+  const category = route.value.category;
+
+  setSection(category || "");
+});

package/src/stores/stats.ts

@@ -2,8 +2,9 @@ import type { Statistic } from "@allurereport/core-api";
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
+import type { AwesomeTree } from "../../types";
 
-export const statsStore = signal<StoreSignalState<Statistic>>({
+export const reportStatsStore = signal<StoreSignalState<Statistic>>({
   loading: true,
   error: undefined,
   data: {
@@ -11,26 +12,70 @@ export const statsStore = signal<StoreSignalState<Statistic>>({
   },
 });
 
-export const fetchStats = async () => {
-  statsStore.value = {
-    ...statsStore.value,
+export const statsByEnvStore = signal<StoreSignalState<Record<string, Statistic>>>({
+  loading: true,
+  error: undefined,
+  data: {},
+});
+
+export const fetchReportStats = async () => {
+  reportStatsStore.value = {
+    ...reportStatsStore.value,
     loading: true,
     error: undefined,
   };
 
   try {
-    const res = await fetchReportJsonData<Statistic>("widgets/allure_statistic.json");
+    const res = await fetchReportJsonData<Statistic>("widgets/statistic.json", { bustCache: true });
 
-    statsStore.value = {
+    reportStatsStore.value = {
       data: res,
       error: undefined,
       loading: false,
     };
   } catch (err) {
-    statsStore.value = {
+    reportStatsStore.value = {
       data: { total: 0 },
       error: err.message,
       loading: false,
     };
   }
 };
+
+export const fetchEnvStats = async (envs: string[]) => {
+  const envsToFetch = envs.filter((env) => !statsByEnvStore.value.data?.[env]);
+
+  // all envs have already been fetched
+  if (envsToFetch.length === 0) {
+    return;
+  }
+
+  statsByEnvStore.value = {
+    ...statsByEnvStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const data = await Promise.all(
+      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/statistic.json`, { bustCache: true })),
+    );
+
+    statsByEnvStore.value = {
+      data: envs.reduce((acc, env, index) => {
+        return {
+          ...acc,
+          [env]: data[index],
+        };
+      }, {}),
+      loading: false,
+      error: undefined,
+    };
+  } catch (err) {
+    statsByEnvStore.value = {
+      ...statsByEnvStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/testResults.ts

@@ -1,27 +1,29 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
-import { type AllureAwesomeTestResult } from "../../types";
+import { type AwesomeTestResult } from "../../types";
 import { type StoreSignalState } from "./types";
 
-export type TestResultsStoreState = Record<string, AllureAwesomeTestResult>;
+export type TrStoreState = Record<string, AwesomeTestResult>;
 
-export type TestResultNavStoreState = string[];
+export type TrNavStoreState = string[];
 
-export const testResultStore = signal<StoreSignalState<TestResultsStoreState>>({
+export const testResultStore = signal<StoreSignalState<TrStoreState>>({
   loading: true,
   error: undefined,
   data: undefined,
 });
 
-export const testResultNavStore = signal<StoreSignalState<TestResultNavStoreState>>({
+export const testResultNavStore = signal<StoreSignalState<TrNavStoreState>>({
   loading: true,
   error: undefined,
   data: undefined,
 });
 
-export const fetchTestResultNav = async () => {
+export const fetchTestResultNav = async (env?: string) => {
   try {
-    const data = await fetchReportJsonData<string[]>("widgets/nav.json");
+    const data = await fetchReportJsonData<string[]>(env ? `widgets/${env}/nav.json` : "widgets/nav.json", {
+      bustCache: true,
+    });
 
     testResultNavStore.value = {
       data,
@@ -38,7 +40,7 @@ export const fetchTestResultNav = async () => {
 };
 
 export const fetchTestResult = async (testResultId: string) => {
-  if (!testResultId) {
+  if (!testResultId || (testResultStore.value.data && testResultId in testResultStore.value.data)) {
     return;
   }
 
@@ -49,7 +51,9 @@ export const fetchTestResult = async (testResultId: string) => {
   };
 
   try {
-    const data = await fetchReportJsonData<AllureAwesomeTestResult>(`data/test-results/${testResultId}.json`);
+    const data = await fetchReportJsonData<AwesomeTestResult>(`data/test-results/${testResultId}.json`, {
+      bustCache: true,
+    });
 
     testResultStore.value = {
       data: { ...testResultStore.value.data, [testResultId]: data },

package/src/stores/theme.ts

@@ -1,33 +1,30 @@
 import { getReportOptions } from "@allurereport/web-commons";
+import type { Theme } from "@allurereport/web-components";
 import { signal } from "@preact/signals";
-import type { AllureAwesomeReportOptions } from "../../types.js";
+import type { AwesomeReportOptions } from "../../types.js";
 
-type Theme = "light" | "dark";
+export const themeStore = signal<Theme>("auto");
 
-const { theme } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+export const setTheme = (mode: "light" | "dark" | "auto") => {
+  themeStore.value = mode;
 
-export const themeStore = signal<Theme>("light");
+  try {
+    window.localStorage.setItem("theme", mode);
+  } catch {}
 
-export const setTheme = (newTheme: Theme): void => {
-  themeStore.value = newTheme;
-  document.documentElement.setAttribute("data-theme", newTheme);
-  window.localStorage.setItem("theme", newTheme);
+  document.documentElement.setAttribute("data-theme", mode);
 };
 
 export const toggleTheme = () => {
-  setTheme(themeStore.value === "light" ? "dark" : "light");
+  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<AwesomeReportOptions>() ?? {};
   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);
+  setTheme(themeFromLS);
 };

package/src/stores/timeline.ts

@@ -0,0 +1,39 @@
+import type { TestResult } from "@allurereport/core-api";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export type TimlineTr = Pick<
+  TestResult,
+  "id" | "name" | "status" | "flaky" | "hidden" | "labels" | "environment" | "start" | "stop" | "duration"
+>;
+
+export const timelineStore = signal<StoreSignalState<TimlineTr[]>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTimelineData = async () => {
+  timelineStore.value = {
+    ...timelineStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<TimlineTr[]>("widgets/timeline.json", { bustCache: true });
+
+    timelineStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    timelineStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};