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

package/src/components/app/TestResult/TestResultInfo/TestResultInfoStatuses.tsx

@@ -0,0 +1,31 @@
+import lineAlertsAlertCircle from "@/assets/svg/line-alerts-alert-circle.svg";
+import lineGeneralEye from "@/assets/svg/line-general-eye.svg";
+import lineIconBomb2 from "@/assets/svg/line-icon-bomb-2.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { useI18n } from "@/stores";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+const icons = {
+  flaky: lineIconBomb2.id,
+  known: lineAlertsAlertCircle.id,
+  muted: lineGeneralEye.id,
+};
+
+export const TestResultInfoStatuses = ({ statuses }) => {
+  const { t } = useI18n("filters");
+  return (
+    <div className={styles["test-result-info-statuses"]}>
+      {statuses.map(([status], key: number) => {
+        const title = t(status);
+
+        return (
+          <div key={key} className={styles["test-result-info-status"]}>
+            <SvgIcon className={styles["metadata-icon"]} id={icons[status]} size={"s"} />
+            {capitalize(title)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -1,7 +1,7 @@
 import { formatDuration } from "@allurereport/core-api";
-import * as test from "node:test";
-import { FunctionalComponent } from "preact";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
+import { TestResultInfoStatuses } from "@/components/app/TestResult/TestResultInfo/TestResultInfoStatuses";
 import { TestResultNavigation } from "@/components/app/TestResult/TestResultNavigation";
 import { TestResultPrevStatuses } from "@/components/app/TestResult/TestResultPrevStatuses";
 import { TestResultSeverity } from "@/components/app/TestResult/TestResultSeverity";
@@ -19,11 +19,12 @@ export type TestResultInfoProps = {
 };
 
 export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
-  const { name, status, duration, labels, history, retries, attachments, stop } = testResult ?? {};
+  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
   const formattedDuration = formatDuration(duration);
   const fullDate = stop && timestampToDate(stop);
   const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
   const { t } = useI18n("ui");
+  const statuses = Object.entries({ flaky, muted, known }).filter(([, value]) => value);
 
   const Content = () => {
     return (
@@ -37,6 +38,7 @@ export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testR
           {Boolean(status) && <TestResultStatus status={status} />}
           {Boolean(history?.length) && <TestResultPrevStatuses history={history} />}
           <TestResultSeverity severity={severity} />
+          {Boolean(statuses.length) && <TestResultInfoStatuses statuses={statuses} />}
           <TooltipWrapper tooltipText={fullDate}>
             <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
               {formattedDuration}

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

@@ -31,3 +31,20 @@
   gap: 4px;
   align-items: center;
 }
+
+.test-result-info-statuses {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.test-result-info-status {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}

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,43 @@ 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 && !testResult?.hidden && (
               <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 +64,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/TestResultPrevStatuses/index.tsx

@@ -1,11 +1,11 @@
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { FunctionalComponent } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import LineShapesDotCircle from "@/assets/svg/line-shapes-dot-circle.svg";
+import { useTestResultTabsContext } from "@/components/app/TestResult/TestResultTabs";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Text } from "@/components/commons/Typography";
+import { navigateTo, openInNewTab } from "@/index";
 import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
@@ -13,7 +13,7 @@ import * as styles from "./styles.scss";
 
 const TestResultPrevStatus = ({ item }) => {
   return (
-    <div className={styles["test-result-prev-status"]}>
+    <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
       <SvgIcon id={LineShapesDotCircle.id} className={styles[`status-${item?.status}`]} />
     </div>
   );
@@ -41,7 +41,7 @@ export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesP
   return (
     <div className={styles["test-result-prev-statuses"]}>
       {history?.slice(0, 6).map((item, key) => (
-        <div className={styles["test-result-prev-status"]}>
+        <div key={key} className={styles["test-result-prev-status"]}>
           <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
             <TestResultPrevStatus item={item} />
           </TooltipWrapper>

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/TestResult/TestResultTeardown/index.tsx

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
+import type { AllureAwesomeTestResult } from "types";
 import lineHelpersFlag from "@/assets/svg/line-helpers-flag.svg";
 import { TestResultDropdown } from "@/components/app/TestResult/TestResultDropdown";
 import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";

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

@@ -1,5 +1,5 @@
-import { FunctionComponent, FunctionalComponent } from "preact";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionComponent, FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import * as styles from "@/components/app/BaseLayout/styles.scss";
 import { TestResultAttachmentView } from "@/components/app/TestResult/TestResultAttachmentsView";
 import TestResultEmpty from "@/components/app/TestResult/TestResultEmpty";

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>
   );
 };
 

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

@@ -1,10 +1,11 @@
-import { Statistic, statusesList } from "@allurereport/core-api";
+import { type Statistic, statusesList } from "@allurereport/core-api";
 import { clsx } from "clsx";
-import { FunctionComponent } from "preact";
+import { type FunctionComponent } from "preact";
 import { ArrowButton } from "@/components/app/ArrowButton";
 import { Loadable } from "@/components/commons/Loadable";
 import { Text } from "@/components/commons/Typography";
 import { statsStore } from "@/stores";
+import { treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 interface TreeHeaderProps {
@@ -12,15 +13,14 @@ interface TreeHeaderProps {
   categoryTitle: string;
   isOpened: boolean;
   toggleTree: () => void;
-  statusFilter?: string;
 }
 
-const maxWidthTab: number = 140;
-const minWidthTab: number = 46;
+const maxWidthTab = 140;
+const minWidthTab = 46;
 // to make the progress bar more visually responsive for smaller values,
 // we can adjust the formula by adding an offset to stretch the lower part
 // of the logarithmic scale
-const offset: number = 10;
+const offset = 10;
 
 const progress = (current: number, total: number) => {
   const logOffset = Math.log(offset);
@@ -31,10 +31,11 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
   categoryTitle,
   isOpened,
   toggleTree,
-  statusFilter = "total",
   statistic,
   ...rest
 }) => {
+  const { status: statusFilter } = treeFiltersStore.value;
+
   return (
     <Loadable
       source={statsStore}
@@ -49,8 +50,8 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
                   value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
               )
               .map(({ status, value }) => {
-                const className = clsx(styles[`tree-header-bar-item`], styles[status]);
-                const style = { flexGrow: `${value}` };
+                const className = clsx(styles["tree-header-bar-item"], styles[status]);
+                const style = { flexGrow: value };
 
                 return (
                   <div key={status} className={className} style={style}>
@@ -61,9 +62,9 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
           : null;
 
         return (
-          <div {...rest} className={styles["tree-header"]} onClick={toggleTree}>
-            <ArrowButton isOpened={isOpened} />
-            <Text size="m" bold className={styles["tree-header-title"]}>
+          <div data-testid="tree-header" {...rest} className={styles["tree-header"]} onClick={toggleTree}>
+            <ArrowButton data-testid="tree-arrow" isOpened={isOpened} />
+            <Text data-testid="tree-header-title" size="m" bold className={styles["tree-header-title"]}>
               {categoryTitle}
             </Text>
             {treeHeaderBar && (

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

@@ -10,14 +10,18 @@ interface TreeItemProps {
   status: TestStatus;
   duration?: number;
   id: string;
+  groupOrder: number;
 }
 
-export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, status, duration, id, ...rest }) => {
+export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, groupOrder, status, duration, id, ...rest }) => {
   const formattedDuration = formatDuration(duration);
 
   return (
     <div {...rest} className={styles["tree-item"]} onClick={() => navigateTo(id)}>
       <TreeItemIcon status={status} />
+      <span data-testid="tree-leaf-order" class={styles.order}>
+        {groupOrder}
+      </span>
       <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
         {name}
       </Text>

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

@@ -1,25 +1,29 @@
-import type { TestStatus } from "@allurereport/core-api";
+import { useEffect } from "preact/hooks";
 import { useTabsContext } from "@/components/app/Tabs";
 import Tree from "@/components/app/Tree/Tree";
+import { Button } from "@/components/commons/Button";
 import { Loadable } from "@/components/commons/Loadable";
 import { PageLoader } from "@/components/commons/PageLoader";
 import { Text } from "@/components/commons/Typography";
 import { useI18n } from "@/stores/locale";
-import { treeStore } from "@/stores/tree";
+import { clearTreeFilters, filteredTree, noTests, noTestsFound, setTreeStatus, treeStore } from "@/stores/tree";
+import type { AllureAwesomeStatus } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export const TreeList = () => {
   const { t } = useI18n("empty");
   const { currentTab } = useTabsContext();
 
+  useEffect(() => {
+    setTreeStatus(currentTab as AllureAwesomeStatus);
+  }, [currentTab]);
+
   return (
     <Loadable
       source={treeStore}
       renderLoader={() => <PageLoader />}
-      renderData={(treeData) => {
-        const { groups, leaves } = treeData?.root ?? {};
-
-        if (!groups && !leaves) {
+      renderData={() => {
+        if (noTests.value) {
           return (
             <div className={styles["tree-list"]}>
               <div className={styles["tree-empty-results"]}>
@@ -29,9 +33,29 @@ export const TreeList = () => {
           );
         }
 
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearTreeFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
         return (
           <div className={styles["tree-list"]}>
-            <Tree groups={groups} leaves={leaves} statusFilter={currentTab as TestStatus} root />
+            <Tree tree={filteredTree.value} statusFilter={currentTab as AllureAwesomeStatus} root />
           </div>
         );
       }}

package/src/components/app/Tree/styles.scss

@@ -49,7 +49,6 @@
   padding: 6px 8px 6px 6px;
   transition: background-color 300ms;
   gap: 4px;
-  align-items: center;
   cursor: pointer;
   position: relative;
 
@@ -159,12 +158,25 @@
 }
 
 .tree-empty-results {
-  display: flex;
   padding: 44px 24px;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
 }
 
 .tree-empty-results-title {
   color: var(--on-text-secondary);
 }
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+  width: 24px;
+}