solve some naming and types issues

packages/web-awesome/src/components/app/Tree/Tree.tsx

@@ -5,13 +5,13 @@ import { useState } from "preact/hooks";
 import TreeItem from "@/components/app/Tree/TreeItem";
 import { Text } from "@/components/commons/Typography";
 import { useI18n } from "@/stores";
-import type { AllureAwesomeOrderedTree, AllureAwesomeStatus } from "../../../../types";
+import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus } from "../../../../types";
 import TreeHeader from "./TreeHeader";
 import * as styles from "./styles.scss";
 
 interface TreeProps {
   statistic?: Statistic;
-  tree: AllureAwesomeOrderedTree;
+  tree: AllureAwesomeRecursiveTree;
   name?: string;
   root?: boolean;
   statusFilter?: AllureAwesomeStatus;
@@ -23,7 +23,7 @@ const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, st
   const toggleTree = () => {
     setIsOpen(!isOpened);
   };
-  const emptyTree = !tree?.groups?.length && !tree?.leaves?.length;
+  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
 
   if (emptyTree) {
     return (
@@ -42,7 +42,7 @@ const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, st
         [styles.root]: root,
       })}
     >
-      {tree?.groups?.map?.((subTree) => (
+      {tree?.trees?.map?.((subTree) => (
         <Tree
           key={subTree.nodeId}
           name={subTree.name}

packages/web-awesome/src/stores/tree.ts

@@ -1,8 +1,8 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { computed, signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
-import { fillTree, isFilledTreeEmpty } from "@/utils/treeFilters";
-import type { AllureAwesomeStatus } from "../../types";
+import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
+import type {AllureAwesomeStatus, AllureAwesomeTree, AllureAwesomeTreeGroup} from "../../types";
 
 export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
 export type TreeDirection = "asc" | "desc";
@@ -15,7 +15,7 @@ export type TreeFiltersState = {
   direction: TreeDirection;
 };
 
-export const treeStore = signal<StoreSignalState<any>>({
+export const treeStore = signal<StoreSignalState<AllureAwesomeTree>>({
   loading: true,
   error: undefined,
   data: undefined,
@@ -38,16 +38,16 @@ export const treeFiltersStore = signal<TreeFiltersState>({
 export const filteredTree = computed(() => {
   const { root, leavesById, groupsById } = treeStore.value.data;
 
-  return fillTree({
-    group: root,
+  return createRecursiveTree({
+    group: root as AllureAwesomeTreeGroup,
     leavesById,
     groupsById,
     filterOptions: treeFiltersStore.value,
   });
 });
 
 export const noTestsFound = computed(() => {
-  return isFilledTreeEmpty(filteredTree.value);
+  return isRecursiveTreeEmpty(filteredTree.value);
 });
 
 export const clearTreeFilters = () => {
@@ -110,7 +110,7 @@ export const fetchTreeData = async (treeName: string) => {
   };
 
   try {
-    const res = await fetchReportJsonData(`widgets/${treeName}.json`);
+    const res = await fetchReportJsonData<AllureAwesomeTree>(`widgets/${treeName}.json`);
 
     treeStore.value = {
       data: res,

packages/web-awesome/src/utils/treeFilters.ts

@@ -1,5 +1,5 @@
 import type { TreeFiltersState } from "@/stores/tree";
-import type { AllureAwesomeOrderedTree, AllureAwesomeTree, AllureAwesomeTreeGroup } from "../../types";
+import type { AllureAwesomeRecursiveTree, AllureAwesomeTree, AllureAwesomeTreeGroup } from "../../types";
 
 const statusOrder = {
   failed: 1,
@@ -54,25 +54,30 @@ export const filterLeaves = (
   });
 };
 
-export const fillTree = (payload: {
+/**
+ * Fills the given tree from generator and returns recursive tree which includes leaves data instead of their IDs
+ * Filters leaves when `filterOptions` property is provided
+ * @param payload
+ */
+export const createRecursiveTree = (payload: {
   group: AllureAwesomeTreeGroup;
   groupsById: AllureAwesomeTree["groupsById"];
   leavesById: AllureAwesomeTree["leavesById"];
   filterOptions?: TreeFiltersState;
-}): AllureAwesomeOrderedTree => {
+}): AllureAwesomeRecursiveTree => {
   const { group, groupsById, leavesById, filterOptions } = payload;
 
   return {
     ...group,
     leaves: filterLeaves(group.leaves, leavesById, filterOptions),
-    groups: group?.groups
+    trees: group?.groups
       ?.filter((groupId) => {
         const subGroup = groupsById[groupId];
 
         return subGroup?.leaves?.length || subGroup?.groups?.length;
       })
       ?.map((groupId) =>
-        fillTree({
+        createRecursiveTree({
           group: groupsById[groupId],
           groupsById,
           leavesById,
@@ -82,14 +87,14 @@ export const fillTree = (payload: {
   };
 };
 
-export const isFilledTreeEmpty = (tree: AllureAwesomeTreeGroup) => {
-  if (!tree.groups?.length && !tree.leaves?.length) {
+export const isRecursiveTreeEmpty = (tree: AllureAwesomeRecursiveTree) => {
+  if (!tree.trees?.length && !tree.leaves?.length) {
     return true;
   }
 
   if (tree.leaves?.length) {
     return false;
   }
 
-  return tree.groups?.every((group) => isFilledTreeEmpty(group));
+  return tree.trees?.every((subTree) => isRecursiveTreeEmpty(subTree));
 };

packages/web-awesome/test/utils/treeFilters.test.ts

@@ -1,6 +1,6 @@
 import { type TestResult } from "@allurereport/core-api";
 import { describe, expect, it } from "vitest";
-import { fillTree, filterLeaves } from "../../src/utils/treeFilters.js";
+import { createRecursiveTree, filterLeaves } from "../../src/utils/treeFilters.js";
 import type { AllureAwesomeTestResult } from "../../types.js";
 
 describe("utils > treeFilters", () => {
@@ -393,7 +393,7 @@ describe("utils > treeFilters", () => {
           groups: [],
         },
       };
-      const result = fillTree({
+      const result = createRecursiveTree({
         group,
         leavesById,
         groupsById,

packages/web-awesome/types.d.ts

@@ -54,14 +54,17 @@ export type AllureAwesomeTestResult = Omit<
   groupOrder?: number;
 };
 
-export type AllureAwesomeTree = TreeData<AllureAwesomeTestResult, DefaultTreeGroup>;
-
 export type AllureAwesomeTreeLeaf = AllureAwesomeTestResult & { nodeId: string };
 
 export type AllureAwesomeTreeGroup = WithChildren & DefaultTreeGroup & { nodeId: string };
 
-export type AllureAwesomeOrderedTree = DefaultTreeGroup & {
+export type AllureAwesomeTree = TreeData<AllureAwesomeTreeLeaf, AllureAwesomeTreeGroup>;
+
+/**
+ * Tree which contains tree leaves instead of their IDs and recursive trees structure instead of groups
+ */
+export type AllureAwesomeRecursiveTree = DefaultTreeGroup & {
   nodeId: string;
   leaves: AllureAwesomeTreeLeaf[];
-  groups: AllureAwesomeOrderedTree[];
+  trees: AllureAwesomeRecursiveTree[];
 };