@allurereport/web-awesome 3.0.0-beta.10

package/src/stores/locale.ts

@@ -0,0 +1,75 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import i18next, { type TOptions } from "i18next";
+import type { AwesomeReportOptions } from "types";
+import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale } from "@/i18n/constants";
+
+const namespaces = [
+  "empty",
+  "execution",
+  "filters",
+  "search",
+  "severity",
+  "sort-by",
+  "sort-by.directions",
+  "sort-by.values",
+  "statuses",
+  "tabs",
+  "testSummary",
+  "ui",
+  "welcome",
+  "controls",
+  "errors",
+  "split",
+  "modal",
+];
+
+export const currentLocale = signal<LangLocale>("en" as LangLocale);
+export const currentLocaleIso = computed(() => LANG_LOCALE[currentLocale.value].iso);
+export const currentLocaleIsRTL = computed(() => ["ar", "he", "fa"].includes(currentLocale.value));
+
+export const getLocale = async () => {
+  const { reportLanguage } = getReportOptions<AwesomeReportOptions>() ?? {};
+  const locale = localStorage.getItem("currentLocale") || reportLanguage || DEFAULT_LOCALE;
+
+  await setLocale(locale as LangLocale);
+};
+
+export const waitForI18next = i18next
+  .use({
+    type: "backend",
+    read: async (
+      language: LangLocale,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null) => void,
+    ) => {
+      await import(`@/i18n/locales/${language}.json`)
+        .then((resources: Record<string, null>) => {
+          callback(null, resources[namespace]);
+        })
+        .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 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/router.ts

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

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/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 || (testResultStore.value.data && testResultId in testResultStore.value.data)) {
+    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,32 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { AwesomeReportOptions } from "../../types.js";
+
+type Theme = "light" | "dark";
+
+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 { 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);
+};

package/src/stores/tree.ts

@@ -0,0 +1,157 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { computed, effect, signal } from "@preact/signals";
+import type { AwesomeStatus, AwesomeTree, AwesomeTreeGroup } from "types";
+import type { StoreSignalState } from "@/stores/types";
+import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
+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 treeStore = signal<StoreSignalState<AwesomeTree>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const noTests = computed(() => !Object.keys(treeStore?.value?.data?.leavesById).length);
+
+const loadedFromLS = loadFromLocalStorage<string[]>("collapsedTrees", []);
+export const collapsedTrees = signal(new Set(loadedFromLS as string[]));
+
+effect(() => {
+  localStorage.setItem("collapsedTrees", JSON.stringify([...collapsedTrees.value]));
+});
+
+export const toggleTree = (id: string) => {
+  const newSet = new Set(collapsedTrees.value);
+  if (newSet.has(id)) {
+    newSet.delete(id);
+  } else {
+    newSet.add(id);
+  }
+  collapsedTrees.value = newSet;
+};
+
+export const selectedFilters = signal(new Set(loadFromLocalStorage("selectedFilters", []) as []));
+
+effect(() => {
+  localStorage.setItem("selectedFilters", JSON.stringify([...selectedFilters.value]));
+});
+
+export const treeFiltersStore = signal<TreeFiltersState>(
+  loadFromLocalStorage<TreeFiltersState>("treeFilters", {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  }) as TreeFiltersState,
+);
+
+effect(() => {
+  localStorage.setItem("treeFilters", JSON.stringify(treeFiltersStore.value));
+});
+
+export const filteredTree = computed(() => {
+  const { root, leavesById, groupsById } = treeStore.value.data;
+
+  return createRecursiveTree({
+    group: root as AwesomeTreeGroup,
+    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: AwesomeStatus) => {
+  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<AwesomeTree>("widgets/tree.json");
+
+    treeStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    treeStore.value = {
+      ...treeStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/types.ts

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

package/src/styles.scss

@@ -0,0 +1,45 @@
+.main {
+  position: relative;
+  max-width: 1920px;
+  margin: 0 auto;
+
+  &:hover {
+    .split {
+      opacity: 1;
+    }
+  }
+}
+
+.split {
+  opacity: 0;
+  position: absolute;
+  left: 128px;
+  top: 8px;
+}
+
+.loader {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-base-secondary);
+  background-blend-mode: saturation;
+  flex-direction: column;
+  gap: 16px;
+  transition:
+    opacity 100ms,
+    background-color 200ms;
+
+  visibility: hidden;
+  opacity: 0;
+
+  &.loading {
+    z-index: 10;
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/src/types/globals.d.ts

@@ -0,0 +1,13 @@
+declare module "*.svg" {
+  const content: {
+    id: string;
+  };
+
+  export default content;
+}
+
+declare module "*.scss" {
+  const content: Record<string, string>;
+
+  export = content;
+}

package/src/types/window.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    reportDataReady: boolean;
+    reportData: Record<string, any>;
+  }
+}
+
+export {};

package/src/utils/capitalize.ts

@@ -0,0 +1,6 @@
+export const capitalize = (str: string) => {
+  if (!str) {
+    return;
+  }
+  return str.charAt(0).toLocaleUpperCase() + str.slice(1);
+};

package/src/utils/copyToClipboard.ts

@@ -0,0 +1,16 @@
+export const copyToClipboard = async (text: string) => {
+  if (navigator.clipboard) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
+};

package/src/utils/isMac.ts

@@ -0,0 +1,8 @@
+export const testPlatform = (re: RegExp) => {
+  // @ts-ignore
+  const platform: string = window?.navigator?.userAgentData?.platform ?? window?.navigator?.platform;
+
+  return platform ? re.test(platform) : false;
+};
+
+export const isMac = testPlatform(/^Mac/i);

package/src/utils/loadFromLocalStorage.ts

@@ -0,0 +1,8 @@
+export const loadFromLocalStorage = <T>(key: string, defaultValue?: T): T => {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? (JSON.parse(stored) as T) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+};

package/src/utils/statuses.ts

@@ -0,0 +1,55 @@
+import type { DefaultTreeGroup, DefaultTreeLeaf, TestStatus, TreeData } from "@allurereport/core-api";
+
+export type Stats = Record<TestStatus, number> & { total?: number };
+
+const emptyStat: Stats = { failed: 0, broken: 0, passed: 0, skipped: 0, unknown: 0 };
+
+const statisticByIds = (tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>, ids: string[]): Stats => {
+  return ids
+    .map((id) => tree.leavesById[id])
+    .filter((v) => v)
+    .reduce(
+      (prev, current) => {
+        prev[current.status]++;
+        return prev;
+      },
+      { ...emptyStat },
+    );
+};
+
+const mergeStats = (stat1: Stats, stat2: Stats): Stats => {
+  Object.keys(stat1).forEach((key) => {
+    stat1[key as TestStatus] += stat2[key as TestStatus];
+  });
+  return stat1;
+};
+
+export const getGroupStatistics = (
+  tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>,
+  groupId: string,
+  statusFilter?: string,
+): Stats => {
+  const group = tree.groupsById[groupId];
+  let stat: Stats = { ...emptyStat };
+
+  if (group?.leaves?.length) {
+    stat = mergeStats(stat, statisticByIds(tree, group.leaves));
+  }
+
+  if (group?.groups?.length) {
+    for (const subGroupId of group.groups) {
+      const subGroupStat = getGroupStatistics(tree, subGroupId, statusFilter);
+      stat = mergeStats(stat, subGroupStat);
+    }
+  }
+
+  return stat;
+};
+
+export const getStatistics = (tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>) =>
+  tree.root.groups
+    ?.map((groupId) => {
+      const stat = getGroupStatistics(tree, groupId);
+      return { name: tree.groupsById[groupId].name, statistic: stat };
+    })
+    ?.sort((a, b) => a.name.localeCompare(b.name)) ?? [];

package/src/utils/time.ts

@@ -0,0 +1,17 @@
+import { useI18n } from "@/stores/locale";
+
+const defaultOptions: Intl.DateTimeFormatOptions = {
+  month: "numeric",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  hour12: false,
+};
+
+export const timestampToDate = (timestamp: number, options = defaultOptions) => {
+  const date = new Date(timestamp);
+  const { t } = useI18n("ui");
+  return new Intl.DateTimeFormat("en-US", options).format(date).replace(",", ` ${t("at")}`);
+};