@allurereport/web-awesome 3.3.1 → 3.4.0

package/src/components/TestResult/TrPwTraces/PwTraceButton.tsx

@@ -1,20 +1,55 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import { fetchFromUrl } from "@allurereport/web-commons";
-import { IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import { PwTrace } from "@/components/TestResult/TrPwTraces/PwTrace";
+import { Button, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+
+import { openPlaywrightTraceInNewTab } from "@/components/TestResult/TrPwTraces/openPwTraceInNewTab";
 import { useI18n } from "@/stores";
-import { openModal } from "@/stores/modal";
+import { closeModal, openModal } from "@/stores/modal";
+
+const PwTracePopupBlocked = ({ onRetry, t }: { onRetry: () => void; t: (key: string) => string }) => (
+  <div data-testid={"pw-trace-popup-blocked"}>
+    <Text>
+      {t("pwTracePopupBlocked")}
+      <br />
+      {t("pwTracePopupBlockedHint")}
+    </Text>
+    <Button
+      style={"flat"}
+      size={"s"}
+      text={t("retries")}
+      onClick={() => {
+        closeModal();
+        onRetry();
+      }}
+    />
+  </div>
+);
 
 export const PwTraceButton = ({ link }: Pick<AttachmentTestStepResult, "link">) => {
   const { t } = useI18n("ui");
+  const traceTitle = `Playwright Trace Viewer | ${link.name}${link.ext}`;
+
   const openPw = async () => {
-    const hasPw = await fetchFromUrl(link);
-    const blob = await hasPw.blob();
+    // Use a top-level tab for Playwright Trace to avoid third-party blob/storage partitioning issues.
+    // - https://bugzilla.mozilla.org/show_bug.cgi?id=1917842
+    // - https://privacysandbox.google.com/cookies/storage-partitioning
+    try {
+      const hasPw = await fetchFromUrl(link);
+      const blob = await hasPw.blob();
+      const opened = openPlaywrightTraceInNewTab(blob);
 
-    openModal({
-      component: <PwTrace blob={blob} />,
-      title: `Playwright Trace Viewer | ${link.name}${link.ext}`,
-    });
+      if (!opened) {
+        openModal({
+          title: traceTitle,
+          component: <PwTracePopupBlocked onRetry={openPw} t={t} />,
+        });
+      }
+    } catch {
+      openModal({
+        title: traceTitle,
+        component: <Text>Failed to load Playwright trace attachment.</Text>,
+      });
+    }
   };
 
   return (

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

@@ -2,8 +2,10 @@ import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { MetadataButton } from "@/components/MetadataButton";
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+
 import * as styles from "./styles.scss";
 
 export type TrMetadataProps = {
@@ -24,7 +26,9 @@ export const TrPwTraces: FunctionalComponent<TrMetadataProps> = ({ pwTraces }) =
       />
       {isOpened && (
         <div className={styles["tr-metadata-wrapper"]}>
-          {pwTraces?.map((pw, index) => <TrAttachment stepIndex={index + 1} item={pw} key={pw.link.id} />)}
+          {pwTraces?.map((pw, index) => (
+            <TrAttachment stepIndex={index + 1} item={pw} key={pw.link.id} />
+          ))}
         </div>
       )}
     </div>

package/src/components/TestResult/TrPwTraces/openPwTraceInNewTab.ts

@@ -0,0 +1,29 @@
+const PLAYWRIGHT_TRACE_ORIGIN = "https://trace.playwright.dev";
+const PLAYWRIGHT_TRACE_URL = `${PLAYWRIGHT_TRACE_ORIGIN}/next/`;
+const RETRY_DELAY_MS = 300;
+
+export const openPlaywrightTraceInNewTab = (blob: Blob) => {
+  const newWindow = window.open("", "_blank");
+  if (!newWindow) {
+    return false;
+  }
+
+  const payload = { method: "load", params: { trace: blob } };
+  const sendTraceMessage = () => {
+    if (newWindow.closed) {
+      return;
+    }
+
+    newWindow.postMessage(payload, PLAYWRIGHT_TRACE_ORIGIN);
+  };
+
+  newWindow.location.href = PLAYWRIGHT_TRACE_URL;
+  newWindow.focus();
+
+  sendTraceMessage();
+  globalThis.setTimeout(() => {
+    sendTraceMessage();
+  }, RETRY_DELAY_MS);
+
+  return true;
+};

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

@@ -3,12 +3,14 @@ import { ArrowButton, IconButton, Text, TreeItemIcon, allureIcons } from "@allur
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrError } from "@/components/TestResult/TrError";
-import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
 import { useI18n } from "@/stores/locale";
 import { navigateToTestResult } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
+import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
+
 export type TrRetriesItemProps = {
   testResultItem: AwesomeTestResult;
   attempt: number;

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

@@ -1,8 +1,10 @@
 import { EmptyView } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
+
 import { TrRetriesItem } from "@/components/TestResult/TrRetriesView/TrRetriesItem";
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 export const TrRetriesView: FunctionalComponent<{

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

@@ -2,13 +2,15 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 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,

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

@@ -1,7 +1,9 @@
 import { capitalize } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
+
 import { useI18n } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {

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

@@ -2,7 +2,9 @@ import type { TestStatus } from "@allurereport/core-api";
 import { capitalize } from "@allurereport/core-api";
 import { Text, TreeItemIcon } from "@allurereport/web-components";
 import clsx from "clsx";
+
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 export const TrStatus = ({ status }: { status: TestStatus }) => {

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

@@ -1,13 +1,16 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { attachmentType } from "@allurereport/web-commons";
+import { attachmentType, isPreviewableContentType, isSyntaxHighlightSupported } from "@allurereport/web-commons";
 import { ArrowButton, Attachment, Code, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import cx from "clsx";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
+
 import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentInfo";
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
 const { lineImagesImage, lineFilesFileAttachment2, playwrightLogo } = allureIcons;
 
@@ -51,17 +54,30 @@ const iconMap: Record<string, string> = {
   "application/vnd.allure.playwright-trace": playwrightLogo,
 };
 
+const HAS_PREVIEW_COMPONENT = new Set(["html"]);
+
 export const TrAttachment: FunctionComponent<{
   item: AttachmentTestStepResult;
   stepIndex?: number;
   className?: string;
 }> = ({ item, stepIndex }) => {
-  const [isOpened, setIsOpen] = useState(false);
+  const attachmentTreeId = item.link?.id !== null ? `attachment-${item.link.id}` : null;
+  const isOpened = !collapsedTrees.value.has(attachmentTreeId);
+  const [showPreview, setShowPreview] = useState(false);
+  const [highlightCode, setHighlightCode] = useState(true);
   const { t: tAttachments } = useI18n("attachments");
   const { link } = item;
   const { missed } = link;
   const componentType = attachmentType(link.contentType);
   const isValidComponentType = !["archive", null].includes(componentType);
+  const isPreviewable = HAS_PREVIEW_COMPONENT.has(componentType ?? "");
+  const isCodeView = (componentType === "code" || componentType === "text") && (!isPreviewable || !showPreview);
+  const isSyntaxHighlightable = isSyntaxHighlightSupported({
+    contentType: link.contentType,
+    ext: link.ext,
+    name: link.name,
+    originalFileName: link.originalFileName,
+  });
 
   const expandAttachment = (event: Event) => {
     event.stopPropagation();
@@ -83,7 +99,9 @@ export const TrAttachment: FunctionComponent<{
         })}
         onClick={(e) => {
           e.stopPropagation();
-          setIsOpen((prev) => !prev);
+          if (attachmentTreeId !== null) {
+            toggleTree(attachmentTreeId);
+          }
         }}
       >
         {isValidComponentType ? <ArrowButton isOpened={isOpened} /> : <div className={styles["test-result-strut"]} />}
@@ -105,13 +123,27 @@ export const TrAttachment: FunctionComponent<{
           </Text>
         )}
         <div>
-          <TrAttachmentInfo item={item} shouldExpand={isValidComponentType} />
+          <TrAttachmentInfo
+            item={item}
+            shouldExpand={isValidComponentType}
+            isPreviewable={isPreviewable}
+            showPreview={showPreview}
+            onPreviewToggle={isPreviewable ? () => setShowPreview((p) => !p) : undefined}
+            isCodeView={isCodeView && isSyntaxHighlightable}
+            highlightCode={highlightCode}
+            onHighlightToggle={isCodeView && isSyntaxHighlightable ? () => setHighlightCode((h) => !h) : undefined}
+          />
         </div>
       </div>
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
           <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
-            <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />
+            <Attachment
+              item={item}
+              previewable={showPreview}
+              highlightCode={highlightCode}
+              i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+            />
           </div>
         </div>
       )}

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

@@ -1,20 +1,38 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import { downloadAttachment } from "@allurereport/web-commons";
 import { Attachment, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import cx from "clsx";
 import { filesize } from "filesize";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
+
 import { PwTraceButton } from "@/components/TestResult/TrPwTraces/PwTraceButton";
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 import { isModalOpen, openModal } from "@/stores/modal";
 
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+
 interface TrAttachmentInfo {
   item?: AttachmentTestStepResult;
   shouldExpand?: boolean;
+  isPreviewable?: boolean;
+  showPreview?: boolean;
+  onPreviewToggle?: () => void;
+  isCodeView?: boolean;
+  highlightCode?: boolean;
+  onHighlightToggle?: () => void;
 }
 
-export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item, shouldExpand }) => {
+export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
+  item,
+  shouldExpand,
+  isPreviewable,
+  showPreview,
+  onPreviewToggle,
+  isCodeView,
+  highlightCode = true,
+  onHighlightToggle,
+}) => {
   const { t: tooltip } = useI18n("controls");
   const { t: tAttachments } = useI18n("attachments");
   const { id, ext, contentType } = item.link;
@@ -62,6 +80,36 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item,
       {Boolean(contentSize) && <Text size={"s"}>{contentSize}</Text>}
       <div className={styles["item-buttons"]}>
         {isPwTrace && <PwTraceButton link={item.link} />}
+        {isPreviewable && onPreviewToggle && (
+          <TooltipWrapper tooltipText={tooltip(showPreview ? "viewCode" : "previewAttachment")}>
+            <IconButton
+              className={styles["item-button"]}
+              style={"ghost"}
+              size={"s"}
+              iconSize={"s"}
+              icon={showPreview ? allureIcons.viewOff : allureIcons.view}
+              onClick={(e: Event) => {
+                e.stopPropagation();
+                onPreviewToggle();
+              }}
+            />
+          </TooltipWrapper>
+        )}
+        {isCodeView && onHighlightToggle && (
+          <TooltipWrapper tooltipText={tooltip("syntaxHighlight")}>
+            <IconButton
+              className={cx(styles["item-button"], !highlightCode && styles["item-button-syntax-off"])}
+              style={"ghost"}
+              size={"s"}
+              iconSize={"s"}
+              icon={allureIcons.lineDevCodeSquare}
+              onClick={(e: Event) => {
+                e.stopPropagation();
+                onHighlightToggle();
+              }}
+            />
+          </TooltipWrapper>
+        )}
         {shouldExpand && (
           <TooltipWrapper tooltipText={tooltip("expand")}>
             <IconButton

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

@@ -0,0 +1,42 @@
+import type { FunctionalComponent } from "preact";
+
+import type { TrBodyItem } from "@/components/TestResult/bodyItems";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrErrorStep } from "@/components/TestResult/TrSteps/TrErrorStep";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
+
+const getBodyItemKey = (item: TrBodyItem, index: number) => {
+  switch (item.type) {
+    case "step":
+      return item.item.stepId ?? `${item.item.name}-${index}`;
+    case "attachment":
+      return item.link.id;
+    case "error":
+      return item.id;
+    default:
+      return `${index}`;
+  }
+};
+
+export type TrBodyItemsProps = {
+  bodyItems: TrBodyItem[];
+};
+
+export const TrBodyItems: FunctionalComponent<TrBodyItemsProps> = ({ bodyItems }) => {
+  return (
+    <>
+      {bodyItems.map((item, index) => {
+        switch (item.type) {
+          case "step":
+            return <TrStep item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
+          case "attachment":
+            return <TrAttachment item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
+          case "error":
+            return <TrErrorStep item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

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

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import type { FunctionComponent } from "preact";
+
+import { hasTestLevelErrorContent, type TestLevelErrorItem } from "@/components/TestResult/bodyItems";
+import { TrError } from "@/components/TestResult/TrError";
+import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+
+export type TrErrorStepProps = {
+  item: TestLevelErrorItem;
+  stepIndex?: number;
+};
+
+export const TrErrorStep: FunctionComponent<TrErrorStepProps> = ({ item, stepIndex }) => {
+  const isOpened = !collapsedTrees.value.has(item.id);
+  const hasContent = hasTestLevelErrorContent(item.error);
+
+  return (
+    <div data-testid="test-result-step" className={styles["test-result-step"]}>
+      <TrStepHeader
+        title={item.title}
+        status={item.status}
+        stepIndex={stepIndex}
+        isOpened={isOpened}
+        hasContent={hasContent}
+        onToggle={() => toggleTree(item.id)}
+      />
+      {isOpened && hasContent && (
+        <div
+          data-testid="test-result-step-content"
+          className={clsx(styles["test-result-step-content"], styles["test-result-error-step-content"])}
+        >
+          <TrError {...item.error} status={item.status} showMessage={false} />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,16 +1,17 @@
-import type { DefaultTestStepResult, TestStepResult } from "@allurereport/core-api";
-import { ArrowButton, Code, Text, TreeItemIcon, 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 { TrError } from "@/components/TestResult/TrError";
-import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
+import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
 import { TrStepInfo } from "@/components/TestResult/TrSteps/TrStepInfo";
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
-export const TrStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+
+export const TrStepParameters = (props: { parameters: TrStepItem["item"]["parameters"] }) => {
   const { parameters } = props;
 
   return (
@@ -20,78 +21,43 @@ export const TrStepParameters = (props: { parameters: DefaultTestStepResult["par
   );
 };
 
-export const TrStepsContent = (props: { item: DefaultTestStepResult }) => {
-  const { item } = props;
+export const TrStepsContent = (props: { item: TrStepItem }) => {
+  const { item: stepData, bodyItems, suppressInlineError } = props.item;
+  const hasInlineError = Boolean(
+    (stepData.message || stepData.trace) && !stepData.hasSimilarErrorInSubSteps && !suppressInlineError,
+  );
 
   return (
     <div data-testid={"test-result-step-content"} className={styles["test-result-step-content"]}>
-      {Boolean(item?.parameters?.length) && <TrStepParameters parameters={item.parameters} />}
-      {Boolean((item?.message || item?.trace) && !item?.hasSimilarErrorInSubSteps) && <TrError {...item} />}
-      {Boolean(item?.steps?.length) && (
-        <>
-          {item.steps?.map((subItem, key) => {
-            if (subItem.type === "step") {
-              return <TrStep stepIndex={key + 1} key={key} item={subItem} />;
-            }
-
-            if (subItem.type === "attachment") {
-              return <TrAttachment stepIndex={key + 1} key={key} item={subItem} />;
-            }
-
-            return null;
-          })}
-        </>
-      )}
+      {Boolean(stepData.parameters?.length) && <TrStepParameters parameters={stepData.parameters} />}
+      {hasInlineError && <TrError {...stepData} />}
+      {Boolean(bodyItems.length) && <TrBodyItems bodyItems={bodyItems} />}
     </div>
   );
 };
 
-const hasFailedStep = (step: TestStepResult): boolean => {
-  if (step.type !== "step") {
-    return false;
-  }
-
-  return step.status !== "passed" || step.steps.some(hasFailedStep);
-};
-
 export const TrStep: FunctionComponent<{
-  item: DefaultTestStepResult;
+  item: TrStepItem;
   stepIndex?: number;
-  className?: string;
 }> = ({ item, stepIndex }) => {
-  const haveFailedSteps = hasFailedStep(item);
-  const isEarlyOpened = collapsedTrees.value.has(item.stepId) ? false : Boolean(haveFailedSteps);
-  const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
-  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length || item?.message || item?.trace);
-
-  const handleClick = () => {
-    setIsOpen(!isOpened);
-    toggleTree(item.stepId);
-  };
+  const { item: stepData, bodyItems, suppressInlineError } = item;
+  const hasInlineError = Boolean(
+    (stepData.message || stepData.trace) && !stepData.hasSimilarErrorInSubSteps && !suppressInlineError,
+  );
+  const hasContent = Boolean(bodyItems.length || stepData.parameters?.length || hasInlineError);
+  const isOpened = !collapsedTrees.value.has(stepData.stepId);
 
   return (
     <div data-testid={"test-result-step"} className={styles["test-result-step"]}>
-      <div className={styles["test-result-step-header"]} onClick={handleClick}>
-        {!hasContent ? (
-          <div className={styles["test-result-strut"]} />
-        ) : (
-          <ArrowButton
-            isOpened={isOpened}
-            icon={allureIcons.arrowsChevronDown}
-            iconSize={"xs"}
-            className={!hasContent ? styles["test-result-visibility-hidden"] : ""}
-            data-testid={"test-result-step-arrow-button"}
-          />
-        )}
-        <TreeItemIcon status={item.status} />
-        <Code size={"s"} className={styles["test-result-step-number"]}>
-          {stepIndex}
-        </Code>
-        <Text data-testid={"test-result-step-title"} className={styles["test-result-header-text"]}>
-          {item.name}
-        </Text>
-        <TrStepInfo item={item} />
-      </div>
+      <TrStepHeader
+        title={stepData.name}
+        status={stepData.status}
+        stepIndex={stepIndex}
+        isOpened={isOpened}
+        hasContent={hasContent}
+        onToggle={() => toggleTree(stepData.stepId)}
+        extra={<TrStepInfo item={stepData} />}
+      />
       {hasContent && isOpened && <TrStepsContent item={item} />}
     </div>
   );

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

@@ -0,0 +1,50 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { ArrowButton, Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+
+export type TrStepHeaderProps = {
+  title: string;
+  status: TestStatus;
+  stepIndex?: number;
+  isOpened: boolean;
+  hasContent: boolean;
+  onToggle: () => void;
+  extra?: preact.ComponentChildren;
+};
+
+export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
+  title,
+  status,
+  stepIndex,
+  isOpened,
+  hasContent,
+  onToggle,
+  extra,
+}) => (
+  <div
+    data-testid="test-result-step-header"
+    className={styles["test-result-step-header"]}
+    onClick={hasContent ? onToggle : undefined}
+  >
+    {!hasContent ? (
+      <div className={styles["test-result-strut"]} />
+    ) : (
+      <ArrowButton
+        isOpened={isOpened}
+        icon={allureIcons.arrowsChevronDown}
+        iconSize="xs"
+        data-testid="test-result-step-arrow-button"
+      />
+    )}
+    <TreeItemIcon status={status} />
+    <Code size="s" className={styles["test-result-step-number"]}>
+      {stepIndex}
+    </Code>
+    <Text data-testid="test-result-step-title" className={styles["test-result-header-text"]}>
+      {title}
+    </Text>
+    {extra}
+  </div>
+);

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

@@ -6,6 +6,7 @@ import {
 } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
+
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
 const countErrorStatuses = (step: TestStepResult): Record<string, number> => {