@allurereport/web-awesome 3.6.0 → 3.6.1

package/dist/single/{app-bbd6e33664f6d94cfaac.js.LICENSE.txt → app-16786ab64ac3e094685f.js.LICENSE.txt}

@@ -1,4 +1,4 @@
-/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
+/*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */
 
 /**
      * Prism: Lightweight, robust, elegant syntax highlighting

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-bbd6e33664f6d94cfaac.js"
+  "main.js": "app-16786ab64ac3e094685f.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -27,11 +27,11 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.6.0",
-    "@allurereport/core-api": "3.6.0",
-    "@allurereport/plugin-api": "3.6.0",
-    "@allurereport/web-commons": "3.6.0",
-    "@allurereport/web-components": "3.6.0",
+    "@allurereport/charts-api": "3.6.1",
+    "@allurereport/core-api": "3.6.1",
+    "@allurereport/plugin-api": "3.6.1",
+    "@allurereport/web-commons": "3.6.1",
+    "@allurereport/web-components": "3.6.1",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

package/src/components/Header/styles.scss

@@ -1,7 +1,7 @@
 .above {
-  margin-bottom: 12px;
   display: flex;
   width: 100%;
+  min-width: 0;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
@@ -28,6 +28,7 @@
 
 .right {
   margin-left: auto;
+  flex: none;
   display: flex;
   gap: 4px;
   align-items: center;

package/src/components/SectionSwitcher/styles.scss

@@ -1,4 +1,4 @@
 .layout {
   flex: 1 1 auto;
-  overflow: hidden;
+  height: 85vh;
 }

package/src/components/SideBySide/index.tsx

@@ -15,7 +15,7 @@ const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element })
 
     const splitter = Split([`.${styles["side-left"]}`, `.${styles["side-right"]}`], {
       sizes,
-      gutterSize: 7,
+      gutterSize: 4,
       gutter: (): HTMLElement => {
         const gutter = document.createElement("div");
         gutter.className = `${styles.gutter}`;

package/src/components/SideBySide/styles.scss

@@ -1,7 +1,6 @@
 .side {
   width: 100%;
   margin: 0;
-  overflow: hidden;
   display: flex;
   max-width: 1920px;
   justify-content: space-between;
@@ -17,15 +16,17 @@
 
 .side-left {
   margin-right: auto;
-  transition: width 50ms;
-  will-change: width;
+  border-radius: 12px 0 0 12px;
+  box-shadow: var(--shadow-small);
+  overflow: hidden;
 }
 
 .side-right {
   flex: 1 1 auto;
   margin-left: auto;
-  transition: width 200ms;
-  will-change: width, height;
+  border-radius: 0 12px 12px 0;
+  box-shadow: var(--shadow-small);
+  overflow: hidden;
 }
 
 [dir="ltr"] {

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

@@ -11,8 +11,9 @@ export const TrDropdown: FunctionalComponent<{
   title: string;
   icon: string;
   counter: number;
+  actions?: preact.ComponentChildren;
   className?: ClassValue;
-}> = ({ isOpened, setIsOpen, title, icon, counter, className }) => {
+}> = ({ isOpened, setIsOpen, title, icon, counter, actions, className }) => {
   return (
     <div className={clsx(styles["test-result-dropdown"], className)} onClick={() => setIsOpen(!isOpened)}>
       <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
@@ -20,6 +21,11 @@ export const TrDropdown: FunctionalComponent<{
         <SvgIcon id={icon} />
         <Text bold>{title}</Text>
         <Counter count={counter} size="s" />
+        {actions ? (
+          <div className={styles["test-result-dropdown-actions"]} onClick={(event) => event.stopPropagation()}>
+            {actions}
+          </div>
+        ) : null}
       </div>
     </div>
   );

package/src/components/TestResult/TrDropdown/styles.scss

@@ -32,3 +32,10 @@
     background: var(--bg-control-flat-medium);
   }
 }
+
+.test-result-dropdown-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

package/src/components/TestResult/TrHeader/styles.scss

@@ -1,6 +1,8 @@
 .test-result-breadcrumbs {
   margin-right: auto;
   display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
   gap: 4px;
   overflow: hidden;
   white-space: nowrap;
@@ -16,6 +18,7 @@
 
 .test-result-breadcrumb {
   display: flex;
+  min-width: 0;
   gap: 4px;
   color: var(--on-text-secondary);
   white-space: nowrap;

package/src/components/TestResult/TrRetriesView/TrRetriesItem.tsx

@@ -28,11 +28,12 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
   const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
 
   const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
+  const hasErrorDetails = Boolean(error?.trace || error?.message);
 
   return (
     <div data-testid="test-result-retries-item">
       <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
-        {Boolean(error.trace || error.message) && (
+        {hasErrorDetails && (
           <ArrowButton
             data-testid="test-result-retries-item-arrow-button"
             isOpened={isOpened}
@@ -61,9 +62,9 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
           </div>
         </div>
       </div>
-      {isOpened && (error.message || error.trace) && (
+      {isOpened && hasErrorDetails && (
         <div className={styles["test-result-retries-item-content"]}>
-          <TrError {...error} status={status} />
+          <TrError {...(error ?? {})} status={status} />
         </div>
       )}
     </div>

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

@@ -10,13 +10,13 @@ import * as styles from "./styles.scss";
 export const TrRetriesView: FunctionalComponent<{
   testResult: AwesomeTestResult;
 }> = ({ testResult }) => {
-  const { retries } = testResult ?? {};
+  const retries = testResult?.retries ?? [];
   const { t } = useI18n("empty");
 
   return (
     <div className={styles["test-result-retries"]}>
       {retries.length ? (
-        retries?.map((item, key) => (
+        retries.map((item, key) => (
           <TrRetriesItem
             testResultItem={item as unknown as AwesomeTestResult}
             key={key}

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

@@ -3,21 +3,14 @@ import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
 
+import { fixtureResultToTrStepItem } from "@/components/TestResult/bodyItems";
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
-import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
-const typeMap = {
-  before: TrStep,
-  after: TrStep,
-  step: TrStep,
-  attachment: TrAttachment,
-};
-
 export type TrSetupProps = {
   setup: AwesomeTestResult["setup"];
   id?: string;
@@ -45,14 +38,11 @@ export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
       />
       {isOpened && (
         <div className={styles["test-result-steps-root"]}>
-          {setup?.map((item, key) => {
-            const StepComponent = typeMap[item.type];
-            return StepComponent ? (
-              // FIXME: use proper type in the StepComponent component
-              // @ts-ignore
-              <StepComponent item={item} stepIndex={key + 1} key={key} className={styles["test-result-step-root"]} />
-            ) : null;
-          })}
+          {setup?.map((fixture, key) => (
+            <div className={styles["test-result-step-root"]} key={fixture.id}>
+              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} />
+            </div>
+          ))}
         </div>
       )}
     </div>

package/src/components/TestResult/TrSteps/TrAttachment.tsx

@@ -8,7 +8,7 @@ import { useState } from "preact/hooks";
 import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentInfo";
 import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { isTreeOpened, toggleTree } from "@/stores/tree";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -62,7 +62,7 @@ export const TrAttachment: FunctionComponent<{
   className?: string;
 }> = ({ item, stepIndex }) => {
   const attachmentTreeId = item.link?.id !== null ? `attachment-${item.link.id}` : null;
-  const isOpened = !collapsedTrees.value.has(attachmentTreeId);
+  const isOpened = attachmentTreeId !== null ? isTreeOpened(attachmentTreeId, false) : false;
   const [showPreview, setShowPreview] = useState(false);
   const [highlightCode, setHighlightCode] = useState(true);
   const { t: tAttachments } = useI18n("attachments");
@@ -100,7 +100,7 @@ export const TrAttachment: FunctionComponent<{
         onClick={(e) => {
           e.stopPropagation();
           if (attachmentTreeId !== null) {
-            toggleTree(attachmentTreeId);
+            toggleTree(attachmentTreeId, false);
           }
         }}
       >

package/src/components/TestResult/TrSteps/TrErrorStep.tsx

@@ -3,8 +3,12 @@ import type { FunctionComponent } from "preact";
 
 import { hasTestLevelErrorContent, type TestLevelErrorItem } from "@/components/TestResult/bodyItems";
 import { TrError } from "@/components/TestResult/TrError";
+import {
+  getStepTreeExpansionPolicy,
+  isOpenByDefaultForPolicy,
+} from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { isTreeOpened, toggleTree } from "@/stores/tree";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -14,8 +18,10 @@ export type TrErrorStepProps = {
 };
 
 export const TrErrorStep: FunctionComponent<TrErrorStepProps> = ({ item, stepIndex }) => {
-  const isOpened = !collapsedTrees.value.has(item.id);
   const hasContent = hasTestLevelErrorContent(item.error);
+  const policy = getStepTreeExpansionPolicy();
+  const openedByDefault = isOpenByDefaultForPolicy(policy, item.status === "failed" || item.status === "broken");
+  const isOpened = isTreeOpened(item.id, openedByDefault);
 
   return (
     <div data-testid="test-result-step" className={styles["test-result-step"]}>
@@ -25,7 +31,7 @@ export const TrErrorStep: FunctionComponent<TrErrorStepProps> = ({ item, stepInd
         stepIndex={stepIndex}
         isOpened={isOpened}
         hasContent={hasContent}
-        onToggle={() => toggleTree(item.id)}
+        onToggle={() => toggleTree(item.id, openedByDefault)}
       />
       {isOpened && hasContent && (
         <div

package/src/components/TestResult/TrSteps/TrStep.tsx

@@ -1,16 +1,36 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
 
 import { MetadataList } from "@/components/Metadata";
 import { type MetadataItem } from "@/components/ReportMetadata";
-import type { TrStepItem } from "@/components/TestResult/bodyItems";
+import { hasErrorDiff, type TrStepItem } from "@/components/TestResult/bodyItems";
 import { TrError } from "@/components/TestResult/TrError";
+import {
+  collectExpandableStepNodes,
+  hasStepContent,
+  getStepTreeExpansionPolicy,
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  isSubtreeFirstLevelOnlyOpened,
+  isStepOpenedByDefault,
+  type SubtreeNode,
+  type SubtreeToggleState,
+} from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
 import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
 import { TrStepInfo } from "@/components/TestResult/TrSteps/TrStepInfo";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { isTreeOpened, setTreeOpened, toggleTree } from "@/stores/tree";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
+const iconBySubtreeState = {
+  "single-down": allureIcons.lineArrowsChevronDown,
+  "single-up": allureIcons.lineArrowsChevronUp,
+  "double-down": allureIcons.lineArrowsChevronDownDouble,
+  "double-up": allureIcons.lineArrowsChevronUpDouble,
+} as const;
+
 export const TrStepParameters = (props: { parameters: TrStepItem["item"]["parameters"] }) => {
   const { parameters } = props;
 
@@ -23,14 +43,22 @@ export const TrStepParameters = (props: { parameters: TrStepItem["item"]["parame
 
 export const TrStepsContent = (props: { item: TrStepItem }) => {
   const { item: stepData, bodyItems, suppressInlineError } = props.item;
+  const inlineError = {
+    message: stepData.message ?? stepData.error?.message,
+    trace: stepData.trace ?? stepData.error?.trace,
+    actual: stepData.error?.actual,
+    expected: stepData.error?.expected,
+  };
   const hasInlineError = Boolean(
-    (stepData.message || stepData.trace) && !stepData.hasSimilarErrorInSubSteps && !suppressInlineError,
+    (inlineError.message || inlineError.trace || hasErrorDiff(inlineError)) &&
+    !stepData.hasSimilarErrorInSubSteps &&
+    !suppressInlineError,
   );
 
   return (
     <div data-testid={"test-result-step-content"} className={styles["test-result-step-content"]}>
       {Boolean(stepData.parameters?.length) && <TrStepParameters parameters={stepData.parameters} />}
-      {hasInlineError && <TrError {...stepData} />}
+      {hasInlineError && <TrError {...inlineError} status={stepData.status} />}
       {Boolean(bodyItems.length) && <TrBodyItems bodyItems={bodyItems} />}
     </div>
   );
@@ -41,11 +69,76 @@ export const TrStep: FunctionComponent<{
   stepIndex?: number;
 }> = ({ item, stepIndex }) => {
   const { item: stepData, bodyItems, suppressInlineError } = item;
+  const inlineError = {
+    message: stepData.message ?? stepData.error?.message,
+    trace: stepData.trace ?? stepData.error?.trace,
+    actual: stepData.error?.actual,
+    expected: stepData.error?.expected,
+  };
   const hasInlineError = Boolean(
-    (stepData.message || stepData.trace) && !stepData.hasSimilarErrorInSubSteps && !suppressInlineError,
+    (inlineError.message || inlineError.trace || hasErrorDiff(inlineError)) &&
+    !stepData.hasSimilarErrorInSubSteps &&
+    !suppressInlineError,
+  );
+  const policy = getStepTreeExpansionPolicy();
+  const hasContent = hasStepContent(item);
+  const openedByDefault = isStepOpenedByDefault(policy, stepData.status, bodyItems);
+  const isOpened = isTreeOpened(stepData.stepId, openedByDefault);
+  const expandableDescendantNodes = collectExpandableStepNodes(bodyItems, policy);
+  const hasExpandableDescendants = expandableDescendantNodes.length > 0;
+  const subtreeNodes: SubtreeNode[] = hasExpandableDescendants
+    ? [
+        { id: stepData.stepId, openedByDefault, isRoot: true },
+        ...expandableDescendantNodes.map((node) => ({ ...node, isRoot: false })),
+      ]
+    : [];
+  const [lastSubtreeToggle, setLastSubtreeToggle] = useState<SubtreeToggleState | null>(null);
+  const isRootSubtreeOpened = isTreeOpened(stepData.stepId, openedByDefault);
+  const isSubtreeCollapsedAll = !isRootSubtreeOpened;
+  const isSubtreeFirstLevelOnly = isSubtreeFirstLevelOnlyOpened(
+    stepData.stepId,
+    openedByDefault,
+    subtreeNodes,
+    isTreeOpened,
   );
-  const hasContent = Boolean(bodyItems.length || stepData.parameters?.length || hasInlineError);
-  const isOpened = !collapsedTrees.value.has(stepData.stepId);
+  const isSubtreeExpandedAll =
+    hasExpandableDescendants && subtreeNodes.every((node) => isTreeOpened(node.id, node.openedByDefault));
+  const hasOnlyLeafResults = hasExpandableDescendants && subtreeNodes.every((node) => node.isRoot);
+  const subtreeToggleIcon =
+    iconBySubtreeState[
+      getSubtreeToggleIcon({
+        hasOnlyLeafResults,
+        isSubtreeCollapsedAll,
+        isSubtreeFirstLevelOnly,
+      })
+    ];
+
+  const setSubtreeState = (state: SubtreeToggleState) => {
+    subtreeNodes.forEach((node) => {
+      const shouldOpenSubtree = state === "all" ? true : state === "first" ? node.isRoot : false;
+      setTreeOpened(node.id, shouldOpenSubtree, node.openedByDefault);
+    });
+  };
+
+  const toggleSubtree = (event: MouseEvent) => {
+    event.stopPropagation();
+    const nextState = getNextSubtreeToggleState({
+      hasOnlyLeafResults,
+      isSubtreeCollapsedAll,
+      isSubtreeFirstLevelOnly,
+      isSubtreeExpandedAll,
+      lastSubtreeToggle,
+    });
+    setSubtreeState(nextState);
+    if (nextState !== "first") {
+      setLastSubtreeToggle(nextState);
+    }
+  };
+
+  const toggleStep = () => {
+    setLastSubtreeToggle(null);
+    toggleTree(stepData.stepId, openedByDefault);
+  };
 
   return (
     <div data-testid={"test-result-step"} className={styles["test-result-step"]}>
@@ -55,7 +148,19 @@ export const TrStep: FunctionComponent<{
         stepIndex={stepIndex}
         isOpened={isOpened}
         hasContent={hasContent}
-        onToggle={() => toggleTree(stepData.stepId)}
+        onToggle={toggleStep}
+        subtreeToggle={
+          hasExpandableDescendants ? (
+            <IconButton
+              style="ghost"
+              size="xs"
+              icon={subtreeToggleIcon}
+              onClick={toggleSubtree}
+              data-testid="test-result-step-subtree-toggle"
+              className={styles["test-result-step-subtree-toggle"]}
+            />
+          ) : null
+        }
         extra={<TrStepInfo item={stepData} />}
       />
       {hasContent && isOpened && <TrStepsContent item={item} />}

package/src/components/TestResult/TrSteps/TrStepHeader.tsx

@@ -12,6 +12,7 @@ export type TrStepHeaderProps = {
   hasContent: boolean;
   onToggle: () => void;
   extra?: preact.ComponentChildren;
+  subtreeToggle?: preact.ComponentChildren;
 };
 
 export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
@@ -22,6 +23,7 @@ export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
   hasContent,
   onToggle,
   extra,
+  subtreeToggle,
 }) => (
   <div
     data-testid="test-result-step-header"
@@ -45,6 +47,7 @@ export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
     <Text data-testid="test-result-step-title" className={styles["test-result-header-text"]}>
       {title}
     </Text>
+    {subtreeToggle}
     {extra}
   </div>
 );

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

@@ -1,22 +1,96 @@
-import { allureIcons } from "@allurereport/web-components";
+import { IconButton, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
 
 import type { TrBodyItem } from "@/components/TestResult/bodyItems";
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
+import {
+  collectExpandableStepNodes,
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  getStepTreeExpansionPolicy,
+  hasFailedStepContext,
+  isSubtreeFirstLevelOnlyOpened,
+  isOpenByDefaultForPolicy,
+  type SubtreeNode,
+  type SubtreeToggleState,
+} from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
 import { useI18n } from "@/stores/locale";
-import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { isTreeOpened, setTreeOpened, toggleTree } from "@/stores/tree";
 
 import * as styles from "./styles.scss";
 
+const iconBySubtreeState = {
+  "single-down": allureIcons.lineArrowsChevronDown,
+  "single-up": allureIcons.lineArrowsChevronUp,
+  "double-down": allureIcons.lineArrowsChevronDownDouble,
+  "double-up": allureIcons.lineArrowsChevronUpDouble,
+} as const;
+
 export type TrStepsProps = {
   bodyItems: TrBodyItem[];
   id?: string;
 };
 
 export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
-  const stepsId = id !== null ? `${id}-steps` : null;
-  const isOpened = !collapsedTrees.value.has(stepsId);
+  const stepsId = typeof id === "string" ? `${id}-steps` : null;
+  const policy = getStepTreeExpansionPolicy();
+  const openedByDefault = isOpenByDefaultForPolicy(policy, hasFailedStepContext(bodyItems));
+  const isOpened = stepsId !== null ? isTreeOpened(stepsId, openedByDefault) : openedByDefault;
+  const expandableTreeNodes = collectExpandableStepNodes(bodyItems, policy);
+  const hasChildren = stepsId !== null && bodyItems.length > 0;
+  const subtreeNodes: SubtreeNode[] = hasChildren
+    ? [
+        { id: stepsId, openedByDefault, isRoot: true },
+        ...expandableTreeNodes.map((node) => ({ ...node, isRoot: false })),
+      ]
+    : [];
+  const [lastSubtreeToggle, setLastSubtreeToggle] = useState<SubtreeToggleState | null>(null);
+  const isRootSubtreeOpened = stepsId !== null ? isTreeOpened(stepsId, openedByDefault) : false;
+  const isSubtreeCollapsedAll = !isRootSubtreeOpened;
+  const isSubtreeFirstLevelOnly =
+    stepsId !== null ? isSubtreeFirstLevelOnlyOpened(stepsId, openedByDefault, subtreeNodes, isTreeOpened) : false;
+  const isSubtreeExpandedAll = hasChildren && subtreeNodes.every((node) => isTreeOpened(node.id, node.openedByDefault));
+  const hasOnlyLeafResults = hasChildren && subtreeNodes.every((node) => node.isRoot);
+  const subtreeToggleIcon =
+    iconBySubtreeState[
+      getSubtreeToggleIcon({
+        hasOnlyLeafResults,
+        isSubtreeCollapsedAll,
+        isSubtreeFirstLevelOnly,
+      })
+    ];
+
+  const setSubtreeState = (state: SubtreeToggleState) => {
+    subtreeNodes.forEach((node) => {
+      const shouldOpenSubtree = state === "all" ? true : state === "first" ? node.isRoot : false;
+      setTreeOpened(node.id, shouldOpenSubtree, node.openedByDefault);
+    });
+  };
+
+  const handleToggleSubtree = (event: MouseEvent) => {
+    event.stopPropagation();
+    const nextState = getNextSubtreeToggleState({
+      hasOnlyLeafResults,
+      isSubtreeCollapsedAll,
+      isSubtreeFirstLevelOnly,
+      isSubtreeExpandedAll,
+      lastSubtreeToggle,
+    });
+    setSubtreeState(nextState);
+    if (nextState !== "first") {
+      setLastSubtreeToggle(nextState);
+    }
+  };
+
+  const toggleRoot = () => {
+    if (stepsId === null) {
+      return;
+    }
+    setLastSubtreeToggle(null);
+    toggleTree(stepsId, openedByDefault);
+  };
 
   const { t } = useI18n("execution");
   return (
@@ -24,9 +98,20 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) =>
       <TrDropdown
         icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
-        setIsOpen={() => stepsId !== null && toggleTree(stepsId)}
+        setIsOpen={toggleRoot}
         counter={bodyItems.length}
         title={t("body")}
+        actions={
+          hasChildren ? (
+            <IconButton
+              style="ghost"
+              size="xs"
+              icon={subtreeToggleIcon}
+              onClick={handleToggleSubtree}
+              data-testid="test-result-steps-subtree-toggle"
+            />
+          ) : null
+        }
       />
       {isOpened && (
         <div data-testid="test-result-steps-root" className={styles["test-result-steps-root"]}>