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

package/src/stores/tree.ts

@@ -1,53 +1,102 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
-import { computed, signal } from "@preact/signals";
-import type { AllureAwesomeStatus, AllureAwesomeTree, AllureAwesomeTreeGroup } from "types";
+import type { RecursiveTree } from "@allurereport/web-components/global";
+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 TreeFilters = "flaky" | "retry" | "new" | "fixed" | "regressed" | "malfunctioned";
 export type TreeFiltersState = {
   query: string;
-  status: AllureAwesomeStatus;
+  status: AwesomeStatus;
   filter: Record<TreeFilters, boolean>;
   sortBy: TreeSortBy;
   direction: TreeDirection;
 };
 
-export const treeStore = signal<StoreSignalState<AllureAwesomeTree>>({
+export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
   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 noTests = computed(() => {
+  return Object.values(treeStore?.value?.data ?? {}).every(
+    ({ leavesById }) => !leavesById || !Object.keys(leavesById).length,
+  );
+});
+
+export const collapsedTrees = signal(new Set(loadFromLocalStorage<string[]>("collapsedTrees", [])));
+
+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,
+      fixed: false,
+      regressed: false,
+      malfunctioned: 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 AllureAwesomeTreeGroup,
-    leavesById,
-    groupsById,
-    filterOptions: treeFiltersStore.value,
-  });
+  return Object.entries(treeStore.value.data).reduce(
+    (acc, [key, value]) => {
+      if (!value) {
+        return acc;
+      }
+
+      const { root, leavesById, groupsById } = value;
+      const tree = createRecursiveTree({
+        group: root as AwesomeTreeGroup,
+        leavesById,
+        groupsById,
+        filterOptions: treeFiltersStore.value,
+      });
+
+      return Object.assign(acc, {
+        [key]: tree,
+      });
+    },
+    {} as Record<string, RecursiveTree>,
+  );
 });
 
 export const noTestsFound = computed(() => {
-  return isRecursiveTreeEmpty(filteredTree.value);
+  return Object.values(filteredTree.value).every(isRecursiveTreeEmpty);
 });
 
 export const clearTreeFilters = () => {
@@ -58,6 +107,9 @@ export const clearTreeFilters = () => {
       flaky: false,
       retry: false,
       new: false,
+      fixed: false,
+      regressed: false,
+      malfunctioned: false,
     },
     sortBy: "order",
     direction: "asc",
@@ -71,7 +123,7 @@ export const setTreeQuery = (query: string) => {
   };
 };
 
-export const setTreeStatus = (status: AllureAwesomeStatus) => {
+export const setTreeStatus = (status: AwesomeStatus) => {
   treeFiltersStore.value = {
     ...treeFiltersStore.value,
     status,
@@ -102,7 +154,14 @@ export const setTreeFilter = (filterKey: TreeFilters, value: boolean) => {
   };
 };
 
-export const fetchTreeData = async () => {
+export const fetchEnvTreesData = async (envs: string[]) => {
+  const envsToFetch = envs.filter((env) => !treeStore.value.data?.[env]);
+
+  // all envs have already been fetched
+  if (envsToFetch.length === 0) {
+    return;
+  }
+
   treeStore.value = {
     ...treeStore.value,
     loading: true,
@@ -110,12 +169,23 @@ export const fetchTreeData = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<AllureAwesomeTree>("widgets/tree.json");
+    const data = await Promise.all(
+      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`, { bustCache: true })),
+    );
 
+    const previous = treeStore.value.data;
     treeStore.value = {
-      data: res,
-      error: undefined,
+      data: envsToFetch.reduce(
+        (acc, env, index) => {
+          return {
+            ...acc,
+            [env]: data[index],
+          };
+        },
+        { ...previous },
+      ),
       loading: false,
+      error: undefined,
     };
   } catch (e) {
     treeStore.value = {

package/src/stores/variables.ts

@@ -0,0 +1,40 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export type Variables = Record<string, any>;
+
+export const variables = signal<StoreSignalState<Record<string, Variables>>>({
+  loading: false,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchVariables = async (env: string = "default") => {
+  variables.value = {
+    ...variables.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<string[]>(env ? `widgets/${env}/variables.json` : "widgets/variables.json", {
+      bustCache: true,
+    });
+
+    variables.value = {
+      data: {
+        ...variables.value.data,
+        [env]: res,
+      },
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    variables.value = {
+      ...variables.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/styles.scss

@@ -0,0 +1,66 @@
+.main {
+  position: relative;
+  max-width: 1920px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  &:hover {
+    .split {
+      opacity: 1;
+    }
+  }
+}
+
+.layout {
+  flex: 1 1 auto;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.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;
+  }
+}
+
+.layout-base {
+  max-width: 920px;
+  margin: auto;
+}
+
+.layout-split {
+}

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/time.ts

@@ -13,5 +13,6 @@ const defaultOptions: Intl.DateTimeFormatOptions = {
 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")}`);
 };

package/src/utils/tree.ts

@@ -0,0 +1,23 @@
+import type { RecursiveTree } from "@allurereport/web-components/global";
+import type { AwesomeTreeLeaf } from "types";
+
+type Localizer = (data: string) => string;
+
+type Localizers = {
+  tooltip: Localizer;
+};
+
+export const createLeafLocalizer =
+  (t: Localizers) =>
+  (leaf: AwesomeTreeLeaf): AwesomeTreeLeaf => ({
+    ...leaf,
+    transitionTooltip: t.tooltip(leaf.transition),
+  });
+
+export const createTreeLocalizer =
+  (t: Localizers) =>
+  (tree: RecursiveTree): RecursiveTree => ({
+    ...tree,
+    leaves: tree.leaves.length ? tree.leaves.map(createLeafLocalizer(t)) : tree.leaves,
+    trees: tree.trees.length ? tree.trees.map(createTreeLocalizer(t)) : tree.trees,
+  });

package/src/utils/treeFilters.ts

@@ -12,27 +12,33 @@ import {
   reverse,
 } from "@allurereport/core-api";
 import type { TreeFiltersState, TreeSortBy } from "@/stores/tree";
-import type {
-  AllureAwesomeRecursiveTree,
-  AllureAwesomeTree,
-  AllureAwesomeTreeGroup,
-  AllureAwesomeTreeLeaf,
-} from "../../types";
+import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
 
-export const isIncluded = (leaf: TreeLeaf<AllureAwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
+export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
   const queryMatched = !filterOptions?.query || leaf.name.toLowerCase().includes(filterOptions.query.toLowerCase());
   const statusMatched =
     !filterOptions?.status || filterOptions?.status === "total" || leaf.status === filterOptions.status;
   const flakyMatched = !filterOptions?.filter?.flaky || leaf.flaky;
   const retryMatched = !filterOptions?.filter?.retry || leaf.retry;
-  // TODO: at this moment we don't have a new field implementation even in the generator
-  // const newMatched = !filterOptions?.filter?.new || leaf.new;
+  const newMatched = !filterOptions?.filter?.new || leaf.transition === "new";
+  const fixedMatched = !filterOptions?.filter?.fixed || leaf.transition === "fixed";
+  const regressedMatched = !filterOptions?.filter?.regressed || leaf.transition === "regressed";
+  const malfuctionedMatched = !filterOptions?.filter?.malfunctioned || leaf.transition === "malfunctioned";
 
-  return [queryMatched, statusMatched, flakyMatched, retryMatched].every(Boolean);
+  return [
+    queryMatched,
+    statusMatched,
+    flakyMatched,
+    retryMatched,
+    newMatched,
+    fixedMatched,
+    regressedMatched,
+    malfuctionedMatched,
+  ].every(Boolean);
 };
 
-const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AllureAwesomeTreeLeaf>> => {
-  const typedCompareBy = compareBy<TreeLeaf<AllureAwesomeTreeLeaf>>;
+const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+  const typedCompareBy = compareBy<TreeLeaf<AwesomeTreeLeaf>>;
   switch (sortBy) {
     case "order":
       return typedCompareBy("groupOrder", ordinal());
@@ -65,7 +71,7 @@ const groupComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<
   }
 };
 
-export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AllureAwesomeTreeLeaf>> => {
+export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
   const cmp = leafComparatorByTreeSortBy(filterOptions.sortBy);
   const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
   // apply fallback sorting by name
@@ -81,12 +87,12 @@ export const groupComparator = (filterOptions: TreeFiltersState): Comparator<Def
 
 export const filterLeaves = (
   leaves: string[] = [],
-  leavesById: AllureAwesomeTree["leavesById"],
+  leavesById: AwesomeTree["leavesById"],
   filterOptions: TreeFiltersState,
 ) => {
   const filteredLeaves = [...leaves]
     .map((leafId) => leavesById[leafId])
-    .filter((leaf: TreeLeaf<AllureAwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
+    .filter((leaf: TreeLeaf<AwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
 
   const comparator = leafComparator(filterOptions);
   return filteredLeaves.sort(comparator);
@@ -98,11 +104,11 @@ export const filterLeaves = (
  * @param payload
  */
 export const createRecursiveTree = (payload: {
-  group: AllureAwesomeTreeGroup;
-  groupsById: AllureAwesomeTree["groupsById"];
-  leavesById: AllureAwesomeTree["leavesById"];
+  group: AwesomeTreeGroup;
+  groupsById: AwesomeTree["groupsById"];
+  leavesById: AwesomeTree["leavesById"];
   filterOptions?: TreeFiltersState;
-}): AllureAwesomeRecursiveTree => {
+}): AwesomeRecursiveTree => {
   const { group, groupsById, leavesById, filterOptions } = payload;
   const groupLeaves: string[] = group.leaves ?? [];
 
@@ -120,7 +126,7 @@ export const createRecursiveTree = (payload: {
       ?.filter((rt) => !isRecursiveTreeEmpty(rt)) ?? [];
 
   const statistic: Statistic = emptyStatistic();
-  trees.forEach((rt: AllureAwesomeRecursiveTree) => {
+  trees.forEach((rt: AwesomeRecursiveTree) => {
     if (rt.statistic) {
       const additional: Statistic = rt.statistic;
       mergeStatistic(statistic, additional);
@@ -139,7 +145,7 @@ export const createRecursiveTree = (payload: {
   };
 };
 
-export const isRecursiveTreeEmpty = (tree: AllureAwesomeRecursiveTree): boolean => {
+export const isRecursiveTreeEmpty = (tree: AwesomeRecursiveTree): boolean => {
   if (!tree.trees?.length && !tree.leaves?.length) {
     return true;
   }

package/test/components/Header/CiInfo.test.tsx

@@ -0,0 +1,177 @@
+import { CiType } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
+import { cleanup, render, screen } from "@testing-library/preact";
+import { h } from "preact";
+import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
+import { CiInfo } from "@/components/Header/CiInfo";
+
+const fixtures = {
+  pullRequestUrl: "https://github.com/repo/pull/123",
+  jobUrl: "https://github.com/repo/actions/runs/123",
+  jobRunUrl: "https://github.com/repo/actions/runs/123/jobs/456",
+  pullRequestName: "PR #123",
+  jobName: "Build Job",
+  jobRunName: "Run #456",
+};
+
+vi.mock("@allurereport/web-components", async () => {
+  const { CiType } = await import("@allurereport/core-api");
+
+  return {
+    Text: (props: { children: string }) => <span>{props.children}</span>,
+    SvgIcon: (props: { id: string; size?: string }) => <span data-testid="icon">{props.id}</span>,
+    allureIcons: {
+      amazon: "amazon",
+      azure: "azure",
+      bitbucket: "bitbucket",
+      circleci: "circle",
+      drone: "drone",
+      github: "github",
+      gitlab: "gitlab",
+      jenkins: "jenkins",
+    },
+  };
+});
+vi.mock("@allurereport/web-commons", async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    getReportOptions: vi.fn(),
+  };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+describe("components > Header > CiInfo", () => {
+  it("should render well-known CI icon", () => {
+    const ciTypes: CiType[] = [
+      CiType.Amazon,
+      CiType.Azure,
+      CiType.Bitbucket,
+      CiType.Circle,
+      CiType.Drone,
+      CiType.Github,
+      CiType.Gitlab,
+      CiType.Jenkins,
+    ];
+
+    for (const type of ciTypes) {
+      (getReportOptions as Mock).mockReturnValueOnce({
+        ci: {
+          pullRequestUrl: fixtures.pullRequestUrl,
+          type,
+        },
+      });
+
+      cleanup();
+      render(<CiInfo />);
+
+      expect(screen.getByTestId("icon")).toHaveTextContent(type);
+    }
+  });
+
+  it("shouldn't render icon for unknown CI", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        type: undefined,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
+  });
+
+  it("should render there is no link to use", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {},
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("should presence pull request url as href when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        pullRequestUrl: fixtures.pullRequestUrl,
+        jobUrl: fixtures.jobUrl,
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.pullRequestUrl);
+  });
+
+  it("should presence use job run url as href when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobUrl: fixtures.jobUrl,
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobRunUrl);
+  });
+
+  it("should use job url as href when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobRunUrl);
+  });
+
+  it("should presence pull request name as text when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        pullRequestUrl: fixtures.pullRequestUrl,
+        pullRequestName: fixtures.pullRequestName,
+        jobName: fixtures.jobName,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveTextContent(fixtures.pullRequestName);
+  });
+
+  it("should presence job run name as text when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobUrl: fixtures.jobUrl,
+        jobName: fixtures.jobName,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobRunName);
+  });
+
+  it("should presence job name as text when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobRunUrl: fixtures.jobRunUrl,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobRunName);
+  });
+});