@allurereport/web-awesome 3.0.0-beta.4 → 3.0.0-beta.5

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-d31bd53e.js"
+  "main.js": "app-7aa8b012.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -22,7 +22,8 @@
     "build:prod:multi": "webpack --mode production",
     "build:dev:single": "SINGLE_FILE_MODE=1 webpack --mode development",
     "build:dev:multi": "webpack --mode development",
-    "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest run"
   },
   "browserslist": [
     "last 1 version",
@@ -30,8 +31,8 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.4",
-    "@allurereport/web-commons": "3.0.0-beta.4",
+    "@allurereport/core-api": "3.0.0-beta.5",
+    "@allurereport/web-commons": "3.0.0-beta.5",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -57,6 +58,10 @@
     "@types/prismjs": "^1",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/runner": "^2.1.8",
+    "@vitest/snapshot": "^2.1.8",
+    "allure-vitest": "^3.0.7",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
     "css-loader": "^7.1.2",
@@ -78,6 +83,7 @@
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^7.0.1",
+    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
@@ -85,6 +91,7 @@
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
+    "vitest": "^2.1.8",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",

package/src/components/app/ArrowButton/index.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { FunctionalComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import lineChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import * as styles from "./styles.scss";
@@ -18,9 +18,10 @@ export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
   iconSize = "xs",
   className,
   icon,
+  ...rest
 }) => {
   return (
-    <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])}>
+    <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])} {...rest}>
       <SvgIcon
         id={icon || lineChevronDown.id}
         size={iconSize}

package/src/components/app/BaseLayout/index.tsx

@@ -1,4 +1,4 @@
-import { ensureReportDataReady } from "@allurereport/web-commons";
+import { ensureReportDataReady, getReportOptions } from "@allurereport/web-commons";
 import { useEffect } from "preact/compat";
 import { Footer } from "@/components/app/Footer";
 import MainReport from "@/components/app/MainReport";
@@ -6,11 +6,10 @@ import Modal from "@/components/app/Modal";
 import TestResult from "@/components/app/TestResult";
 import { Loadable } from "@/components/commons/Loadable";
 import { PageLoader } from "@/components/commons/PageLoader";
-import { fetchStats, getTheme } from "@/stores";
-import { getLocale } from "@/stores";
+import { fetchStats, getLocale, getTheme } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
 import { fetchEnvInfo } from "@/stores/envInfo";
-import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import { fetchTestResult, fetchTestResultNav, testResultStore } from "@/stores/testResults";
 import { fetchTreeData, treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
@@ -23,12 +22,13 @@ export const BaseLayout = ({ testResultId }) => {
   useEffect(() => {
     if (testResultId) {
       fetchTestResult(testResultId);
+      fetchTestResultNav();
     } else {
       Promise.all([
         ensureReportDataReady(),
         fetchStats(),
         fetchPieChartData(),
-        fetchTreeData("suites"),
+        fetchTreeData(),
         fetchEnvInfo(),
       ]);
     }

package/src/components/app/ReportBody/Filters.tsx

@@ -2,18 +2,16 @@ import notificationBoxIcon from "@/assets/svg/line-alerts-notification-box.svg";
 import refreshIcon from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
 import settingsIcon from "@/assets/svg/line-general-settings-1.svg";
 import zapIcon from "@/assets/svg/line-general-zap.svg";
-import { useReportContentContext } from "@/components/app/ReportBody/context";
 import { Button } from "@/components/commons/Button";
 import { Menu } from "@/components/commons/Menu";
 import { Toggle } from "@/components/commons/Toggle";
 import { useI18n } from "@/stores/locale";
+import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 export const Filters = () => {
   const { t } = useI18n("filters");
-  const { filter, setFilter } = useReportContentContext();
-
-  const { flaky, retry, new: isNew } = filter;
+  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
   const hasFilter = flaky || retry || isNew;
 
   return (
@@ -26,6 +24,7 @@ export const Filters = () => {
             size="m"
             style="outline"
             isActive={isOpened}
+            data-testid="filters-button"
             onClick={onClick}
           />
         </div>
@@ -36,7 +35,7 @@ export const Filters = () => {
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("flaky") })}
           onClick={() => {
-            setFilter("flaky", !flaky);
+            setTreeFilter("flaky", !flaky);
           }}
           leadingIcon={zapIcon.id}
           rightSlot={
@@ -45,7 +44,8 @@ export const Filters = () => {
                 focusable={false}
                 value={flaky}
                 label={t("enable-filter", { filter: t("flaky") })}
-                onChange={(value) => setFilter("flaky", value)}
+                data-testid="flaky-filter"
+                onChange={(value) => setTreeFilter("flaky", value)}
               />
             </div>
           }
@@ -55,7 +55,7 @@ export const Filters = () => {
         <Menu.Item
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("retry") })}
-          onClick={() => setFilter("retry", !retry)}
+          onClick={() => setTreeFilter("retry", !retry)}
           leadingIcon={refreshIcon.id}
           rightSlot={
             <div className={styles.filterToggle}>
@@ -63,7 +63,8 @@ export const Filters = () => {
                 focusable={false}
                 value={retry}
                 label={t("enable-filter", { filter: t("retry") })}
-                onChange={(value) => setFilter("retry", value)}
+                data-testid="retry-filter"
+                onChange={(value) => setTreeFilter("retry", value)}
               />
             </div>
           }
@@ -73,7 +74,7 @@ export const Filters = () => {
         <Menu.Item
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("new") })}
-          onClick={() => setFilter("new", !isNew)}
+          onClick={() => setTreeFilter("new", !isNew)}
           leadingIcon={notificationBoxIcon.id}
           rightSlot={
             <div className={styles.filterToggle}>
@@ -81,7 +82,8 @@ export const Filters = () => {
                 focusable={false}
                 value={isNew}
                 label={t("enable-filter", { filter: t("new") })}
-                onChange={(value) => setFilter("new", value)}
+                data-testid="new-filter"
+                onChange={(value) => setTreeFilter("new", value)}
               />
             </div>
           }

package/src/components/app/ReportBody/HeaderActions.tsx

@@ -1,14 +1,14 @@
 import { useI18n } from "@/stores/locale";
+import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
 import { SearchBox } from "../../commons/SearchBox";
 import { Filters } from "./Filters";
-import { useReportContentContext } from "./context";
 import * as styles from "./styles.scss";
 
 const Search = () => {
-  const { setQuery, query } = useReportContentContext();
+  const { query } = treeFiltersStore.value;
   const { t } = useI18n("search");
 
-  return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setQuery} />;
+  return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setTreeQuery} />;
 };
 
 export const HeaderActions = () => {

package/src/components/app/ReportBody/SortBy.tsx

@@ -5,12 +5,12 @@ import sortAscIcon from "@/assets/svg/line-arrows-sort-line-asc.svg";
 import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
 import switchVerticalIcon from "@/assets/svg/line-arrows-switch-vertical-1.svg";
 import { useI18n } from "@/stores/locale";
+import { setTreeDirection, setTreeSortBy, treeFiltersStore } from "@/stores/tree";
 import { DropdownButton } from "../../commons/Button";
 import { Link } from "../../commons/Link";
 import { Menu } from "../../commons/Menu";
 import { SvgIcon } from "../../commons/SvgIcon";
 import { Text } from "../../commons/Typography";
-import { useReportContentContext } from "./context";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
@@ -21,7 +21,7 @@ export const SortBy = () => {
   const { t: sortByLocale } = useI18n("sort-by");
   const { t: sortByValuesLocale } = useI18n("sort-by.values");
   const { t: sortByDirectionsLocale } = useI18n("sort-by.directions");
-  const { direction, sortBy, setSortBy, setDirection } = useReportContentContext();
+  const { sortBy, direction } = treeFiltersStore.value;
 
   const displayedSortByValue = sortByValuesLocale(sortBy);
   const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
@@ -72,16 +72,16 @@ export const SortBy = () => {
               )}
             >
               <Menu.Section>
-                <Menu.ItemWithCheckmark onClick={() => setSortBy("order")} isChecked={sortBy === "order"}>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("order")} isChecked={sortBy === "order"}>
                   {sortByValuesLocale("order")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setSortBy("duration")} isChecked={sortBy === "duration"}>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("duration")} isChecked={sortBy === "duration"}>
                   {sortByValuesLocale("duration")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setSortBy("status")} isChecked={sortBy === "status"}>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("status")} isChecked={sortBy === "status"}>
                   {sortByValuesLocale("status")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
                   {sortByValuesLocale("alphabet")}
                 </Menu.ItemWithCheckmark>
               </Menu.Section>
@@ -111,14 +111,14 @@ export const SortBy = () => {
             >
               <Menu.Section>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setDirection("asc")}
+                  onClick={() => setTreeDirection("asc")}
                   leadingIcon={sortAscIcon.id}
                   isChecked={direction === "asc"}
                 >
                   {sortByDirectionsLocale(`${sortBy}-asc`)}
                 </Menu.ItemWithCheckmark>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setDirection("desc")}
+                  onClick={() => setTreeDirection("desc")}
                   leadingIcon={sortDescIcon.id}
                   isChecked={direction === "desc"}
                 >

package/src/components/app/ReportBody/context.tsx

@@ -1,6 +1,5 @@
 import { type ComponentChildren, createContext } from "preact";
 import { useCallback, useContext, useReducer } from "preact/hooks";
-import { capitalize } from "@/utils/capitalize";
 
 export type SortBy = "order" | "duration" | "status" | "alphabet";
 export type Direction = "asc" | "desc";

package/src/components/app/Tabs/index.tsx

@@ -10,7 +10,7 @@ type TabsContextT = {
 
 const TabsContext = createContext<TabsContextT | null>(null);
 
-export function useTabsContext() {
+export const useTabsContext = () => {
   const context = useContext(TabsContext);
 
   if (!context) {
@@ -18,7 +18,7 @@ export function useTabsContext() {
   }
 
   return context;
-}
+};
 
 export const TabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
   const { children, initialTab } = props;
@@ -39,7 +39,6 @@ export const Tab = (props: { id: string; children: ComponentChildren }) => {
   const { id, children, ...rest } = props;
   const { currentTab, setCurrentTab } = useTabsContext();
   const isCurrentTab = currentTab === id;
-
   const handleTabClick = () => {
     if (isCurrentTab) {
       return;

package/src/components/app/TestResult/TestResultDescription/index.tsx

@@ -1,13 +1,13 @@
+import { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { MetadataButton } from "@/components/app/MetadataButton";
 import { Text } from "@/components/commons/Typography";
-import * as styles from "./styles.scss";
-import { FunctionalComponent } from "preact";
 import { AllureAwesomeTestResult } from "../../../../../types";
+import * as styles from "./styles.scss";
 
 export type TestResultDescriptionProps = {
   description: AllureAwesomeTestResult["description"];
-}
+};
 
 export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);

package/src/components/app/TestResult/TestResultNavigation/index.tsx

@@ -1,5 +1,5 @@
-import { FunctionalComponent } from "preact";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import LineArrowsChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
 import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
 import { IconButton } from "@/components/commons/Button";
@@ -8,7 +8,7 @@ import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Code } from "@/components/commons/Typography";
 import { navigateTo } from "@/index";
 import { useI18n } from "@/stores";
-import { treeStore } from "@/stores/tree";
+import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
@@ -20,47 +20,44 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
   const { fullName, id: testResultId } = testResult ?? {};
   const id = testResultId || "";
   const { t: tooltip } = useI18n("controls");
+  const FullName = () => {
+    return (
+      <div data-testid="test-result-fullname" className={styles["test-result-fullName"]}>
+        <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+          <IconButton
+            data-testid="test-result-fullname-copy"
+            style={"ghost"}
+            size={"s"}
+            icon={LineGeneralCopy3.id}
+            onClick={() => copyToClipboard(fullName)}
+          />
+        </TooltipWrapper>
+        <Code tag={"div"} size={"s"} className={styles["test-result-fullName-text"]}>
+          {fullName && fullName}
+        </Code>
+      </div>
+    );
+  };
 
   return (
     <Loadable
-      source={treeStore}
-      renderData={(treeData) => {
-        const leaves = treeData && Object.keys(treeData?.leavesById);
-        const currentIndex = id && leaves?.findIndex((leave) => leave === id) + 1;
-        const allTestResults = leaves?.length;
-
-        const FullName = () => {
-          return (
-            <div data-testid="test-result-fullname" className={styles["test-result-fullName"]}>
-              <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
-                <IconButton
-                  data-testid="test-result-fullname-copy"
-                  style={"ghost"}
-                  size={"s"}
-                  icon={LineGeneralCopy3.id}
-                  onClick={() => copyToClipboard(fullName)}
-                />
-              </TooltipWrapper>
-              <Code tag={"div"} size={"s"} className={styles["test-result-fullName-text"]}>
-                {fullName && fullName}
-              </Code>
-            </div>
-          );
-        };
+      source={testResultNavStore}
+      renderData={(data) => {
+        const currentIndex = data.indexOf(id) + 1;
 
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}
-            {allTestResults && (
+            {data && (
               <div className={styles["test-result-navigator"]}>
-                <TooltipWrapper tooltipText={tooltip("nextTR")}>
+                <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
                   <IconButton
                     icon={LineArrowsChevronDown.id}
                     style={"ghost"}
-                    isDisabled={currentIndex === allTestResults}
-                    data-testid="test-result-nav-next"
-                    onClick={() => navigateTo(leaves[currentIndex])}
-                    className={styles["test-result-nav-next"]}
+                    isDisabled={currentIndex === data.length}
+                    data-testid="test-result-nav-prev"
+                    className={styles["test-result-nav-prev"]}
+                    onClick={() => navigateTo(data[currentIndex])}
                   />
                 </TooltipWrapper>
                 <Code
@@ -68,15 +65,15 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
                   size={"s"}
                   className={styles["test-result-navigator-numbers"]}
                 >
-                  {currentIndex}/{allTestResults}
+                  {currentIndex}/{data.length}
                 </Code>
-                <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
+                <TooltipWrapper tooltipText={tooltip("nextTR")}>
                   <IconButton
                     icon={LineArrowsChevronDown.id}
                     style={"ghost"}
                     isDisabled={currentIndex <= 1}
-                    data-testid="test-result-nav-prev"
-                    onClick={() => navigateTo(leaves[currentIndex - 2])}
+                    data-testid="test-result-nav-next"
+                    onClick={() => navigateTo(data[currentIndex - 2])}
                   />
                 </TooltipWrapper>
               </div>

package/src/components/app/TestResult/TestResultNavigation/styles.scss

@@ -40,7 +40,7 @@
   font-weight: 400;
 }
 
-.test-result-nav-next {
+.test-result-nav-prev {
   transform: rotate(-180deg);
   &:active {
     transform: scale(var(--allure-btn-pressed-scale)) rotate(-180deg);

package/src/components/app/TestResult/TestResultSteps/attachment.tsx

@@ -1,16 +1,14 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { modalData } from "@/components/app/Modal";
+import { HtmlAttachmentPreview } from "@/components/app/TestResult/TestResultSteps/HtmlAttachmentPreview";
 import { AttachmentCode } from "@/components/app/TestResult/TestResultSteps/attachmentCode";
 import { AttachmentImage } from "@/components/app/TestResult/TestResultSteps/attachmentImage";
 import { AttachmentVideo } from "@/components/app/TestResult/TestResultSteps/attachmentVideo";
 import { EmptyComponent } from "@/components/app/TestResult/TestResultSteps/wrongAttachment";
 import { Spinner } from "@/components/commons/Spinner";
 import { type Attachments, attachmentType, fetchAttachment } from "@/utils/attachments";
-import {
-  HtmlAttachmentPreview
-} from "@/components/app/TestResult/TestResultSteps/HtmlAttachmentPreview";
-import { modalData } from "@/components/app/Modal";
 import * as styles from "./styles.scss";
 
 const componentsByAttachmentType = {
@@ -63,8 +61,8 @@ export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({
 
   // temp solution before modal component refactoring
   if (CurrentPreviewComponent && previewable && modalData.value.preview) {
-    return <CurrentPreviewComponent attachment={attachment} item={item} />
+    return <CurrentPreviewComponent attachment={attachment} item={item} />;
   }
 
-  return CurrentComponent ? <CurrentComponent attachment={attachment} item={item} /> : <EmptyComponent />
+  return CurrentComponent ? <CurrentComponent attachment={attachment} item={item} /> : <EmptyComponent />;
 };

package/src/components/app/Tree/Tree.tsx

@@ -1,121 +1,74 @@
-import type { Statistic, TestStatus, WithChildren } from "@allurereport/core-api";
+import type { Statistic } from "@allurereport/core-api";
 import cx from "clsx";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
-import { useReportContentContext } from "@/components/app/ReportBody/context";
 import TreeItem from "@/components/app/Tree/TreeItem";
-import { Loadable } from "@/components/commons/Loadable";
-import { PageLoader } from "@/components/commons/PageLoader";
-import { Text } from "@/components/commons/Typography";
-import { useI18n } from "@/stores";
-import { treeStore } from "@/stores/tree";
-import { filterGroups, filterLeaves } from "@/utils/treeFilters";
+import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus } from "../../../../types";
 import TreeHeader from "./TreeHeader";
 import * as styles from "./styles.scss";
 
 interface TreeProps {
   statistic?: Statistic;
-  leaves?: WithChildren["leaves"];
-  groups?: WithChildren["groups"];
+  tree: AllureAwesomeRecursiveTree;
   name?: string;
   root?: boolean;
-  statusFilter?: TestStatus;
+  statusFilter?: AllureAwesomeStatus;
 }
 
-const Tree: FunctionComponent<TreeProps> = ({ statusFilter, root, name, leaves = [], groups = [], statistic }) => {
+const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
   const [isOpened, setIsOpen] = useState(statistic === undefined || !!statistic.failed || !!statistic.broken);
-  const { t } = useI18n("empty");
+  const toggleTree = () => {
+    setIsOpen(!isOpened);
+  };
+  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
 
-  return (
-    <Loadable
-      source={treeStore}
-      renderLoader={() => <PageLoader />}
-      renderData={(treeData) => {
-        const reportContext = useReportContentContext();
-        const toggleTree = () => {
-          setIsOpen(!isOpened);
-        };
-        const leavesToRender = filterLeaves(leaves, treeData?.leavesById, statusFilter, reportContext);
-        const groupsToRender = filterGroups(
-          groups,
-          treeData?.groupsById,
-          treeData?.leavesById,
-          statusFilter,
-          reportContext,
-        );
-        if (!groupsToRender.length && !leavesToRender.length) {
-          return (
-            <div className={styles["tree-list"]}>
-              <div className={styles["tree-empty-results"]}>
-                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
-              </div>
-            </div>
-          );
-        }
-
-        const treeContent = isOpened && (
-          <div
-            className={cx({
-              [styles["tree-content"]]: true,
-              [styles.root]: root,
-            })}
-          >
-            {groupsToRender.map((groupId) => {
-              const group = treeData?.groupsById?.[groupId];
-
-              if (!group) {
-                return null;
-              }
-
-              return (
-                <Tree
-                  key={group.nodeId}
-                  name={group.name}
-                  leaves={group.leaves}
-                  groups={group.groups}
-                  statistic={group.statistic}
-                  statusFilter={statusFilter}
-                />
-              );
-            })}
-            {leavesToRender.map((leafId) => {
-              const leaf = treeData?.leavesById?.[leafId];
+  if (emptyTree) {
+    return null;
+  }
 
-              if (!leaf) {
-                return null;
-              }
-
-              return (
-                <TreeItem
-                  data-testid="tree-leaf"
-                  key={leaf.nodeId}
-                  id={leaf.nodeId}
-                  name={leaf.name}
-                  status={leaf.status}
-                  duration={leaf.duration}
-                />
-              );
-            })}
-          </div>
-        );
+  const treeContent = isOpened && (
+    <div
+      data-testid="tree-content"
+      className={cx({
+        [styles["tree-content"]]: true,
+        [styles.root]: root,
+      })}
+    >
+      {tree?.trees?.map?.((subTree) => (
+        <Tree
+          key={subTree.nodeId}
+          name={subTree.name}
+          tree={subTree}
+          statistic={subTree.statistic}
+          statusFilter={statusFilter}
+        />
+      ))}
+      {tree?.leaves?.map?.((leaf) => (
+        <TreeItem
+          data-testid="tree-leaf"
+          key={leaf.nodeId}
+          id={leaf.nodeId}
+          name={leaf.name}
+          status={leaf.status}
+          groupOrder={leaf.groupOrder}
+          duration={leaf.duration}
+        />
+      ))}
+    </div>
+  );
 
-        return (
-          <div className={styles.tree}>
-            {name && (
-              <TreeHeader
-                categoryTitle={name}
-                isOpened={isOpened}
-                toggleTree={toggleTree}
-                statusFilter={statusFilter}
-                statistic={statistic}
-                data-testid="tree-group-header"
-              />
-            )}
-            {treeContent}
-          </div>
-        );
-      }}
-    />
+  return (
+    <div className={styles.tree}>
+      {name && (
+        <TreeHeader
+          categoryTitle={name}
+          isOpened={isOpened}
+          toggleTree={toggleTree}
+          statistic={statistic}
+        />
+      )}
+      {treeContent}
+    </div>
   );
 };