@allurereport/web-awesome 3.0.0-beta.7 → 3.0.0-beta.9

package/src/components/TestResult/TestResultOverview.tsx

@@ -0,0 +1,43 @@
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { TestResultDescription } from "@/components/TestResult/TestResultDescription";
+import { TestResultError } from "@/components/TestResult/TestResultError";
+import { TestResultLinks } from "@/components/TestResult/TestResultLinks";
+import { TestResultMetadata } from "@/components/TestResult/TestResultMetadata";
+import { TestResultParameters } from "@/components/TestResult/TestResultParameters";
+import { TestResultSetup } from "@/components/TestResult/TestResultSetup";
+import { TestResultSteps } from "@/components/TestResult/TestResultSteps";
+import { TestResultTeardown } from "@/components/TestResult/TestResultTeardown";
+import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
+
+export type TestResultOverviewProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
+  const { error, parameters, groupedLabels, links, description, setup, steps, teardown, id } = testResult || {};
+  const isNoSteps = !setup?.length && !steps.length && !teardown.length;
+
+  return (
+    <>
+      {Boolean(error?.message) && (
+        <div className={styles["test-result-errors"]}>
+          <TestResultError {...error} />
+        </div>
+      )}
+      {Boolean(parameters?.length) && <TestResultParameters parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
+        <TestResultMetadata testResult={testResult} />
+      )}
+      {Boolean(links?.length) && <TestResultLinks links={links} />}
+      {Boolean(description) && <TestResultDescription description={description} />}
+      <div className={styles["test-results"]}>
+        {isNoSteps && <TestStepsEmpty />}
+        {Boolean(setup?.length) && <TestResultSetup id={id} setup={setup} />}
+        {Boolean(steps?.length) && <TestResultSteps id={id} steps={steps} />}
+        {Boolean(teardown?.length) && <TestResultTeardown id={id} teardown={teardown} />}
+      </div>
+    </>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultParameters/index.tsx

@@ -1,8 +1,8 @@
-import { FunctionalComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
-import { MetadataList } from "@/components/app/Metadata";
-import { MetadataButton } from "@/components/app/MetadataButton";
+import type { AllureAwesomeTestResult } from "types";
+import { MetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 

package/src/components/{app/TestResult → TestResult}/TestResultPrevStatuses/index.tsx

@@ -1,24 +1,21 @@
+import { type HistoryTestResult } from "@allurereport/core-api";
+import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 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 { navigateTo } from "@/index";
 import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
-const TestResultPrevStatus = ({ item }) => {
+const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   return (
     <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
-      <SvgIcon id={LineShapesDotCircle.id} className={styles[`status-${item?.status}`]} />
+      <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
     </div>
   );
 };
-const TestResultPrevStatusTooltip = ({ item }) => {
+const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   const convertedStop = item.stop && timestampToDate(item.stop);
   const { t } = useI18n("statuses");
   const status = t(item.status);

package/src/components/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

@@ -0,0 +1,52 @@
+import { formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AllureAwesomeTestResult } from "types";
+import { ArrowButton } from "@/components/ArrowButton";
+import { TestResultError } from "@/components/TestResult/TestResultError";
+import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+import { navigateTo } from "@/index";
+import { timestampToDate } from "@/utils/time";
+
+export const TestResultRetriesItem: FunctionalComponent<{
+  testResultItem: AllureAwesomeTestResult;
+}> = ({ testResultItem }) => {
+  const { id, status, error, stop, duration } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = timestampToDate(stop);
+  const formattedDuration = typeof duration === "number" ? formatDuration(duration as number) : undefined;
+  const navigateUrl = `/testresult/${id}`;
+
+  return (
+    <div>
+      <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
+        {Boolean(error) && <ArrowButton isOpened={isOpened} icon={allureIcons.lineArrowsChevronDown} />}
+        <div className={styles["test-result-retries-item-wrap"]}>
+          <TreeItemIcon status={status} className={styles["test-result-retries-item-status"]} />
+          <Text className={styles["test-result-retries-item-text"]}>{convertedStop}</Text>
+          <div className={styles["test-result-retries-item-info"]}>
+            {Boolean(formattedDuration) && (
+              <Text type="ui" size={"s"} className={styles["item-time"]}>
+                {formattedDuration}
+              </Text>
+            )}
+            <IconButton
+              icon={allureIcons.lineGeneralLinkExternal}
+              style={"ghost"}
+              size={"s"}
+              className={styles["test-result-retries-item-link"]}
+              onClick={() => navigateTo(navigateUrl)}
+            />
+          </div>
+        </div>
+      </div>
+      {isOpened && error && (
+        <div className={styles["test-result-retries-item-content"]}>
+          <TestResultError {...error} />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
+import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
+import { TestResultRetriesItem } from "@/components/TestResult/TestResultRetriesView/TestResultRetriesItem";
+import { useI18n } from "@/stores";
+
+export const TestResultRetriesView: FunctionalComponent<{
+  testResult: AllureAwesomeTestResult;
+}> = ({ testResult }) => {
+  const { retries } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-history"]}>
+      {retries.length ? (
+        retries?.map((item, key) => (
+          <TestResultRetriesItem testResultItem={item as unknown as AllureAwesomeTestResult} key={key} />
+        ))
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
+      )}
+    </div>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultSetup/index.tsx

@@ -1,13 +1,13 @@
-import i18n from "i18next";
-import { FunctionalComponent } from "preact";
+import { allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
-import LineTimeClockStopwatch from "@/assets/svg/line-time-clock-stopwatch.svg";
-import { TestResultDropdown } from "@/components/app/TestResult/TestResultDropdown";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/app/TestResult/TestResultSteps/testResultStep";
+import type { AllureAwesomeTestResult } from "types";
+import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
 import { useI18n } from "@/stores/locale";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 const typeMap = {
   before: TestResultStep,
@@ -18,18 +18,26 @@ const typeMap = {
 
 export type TestResultSetupProps = {
   setup: AllureAwesomeTestResult["setup"];
+  id?: string;
 };
 
-export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup }) => {
-  const [isOpened, setIsOpen] = useState(false);
+export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup, id }) => {
+  const teardownId = `${id}-setup`;
+  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(teardownId));
+  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(teardownId);
+  };
   const { t } = useI18n("execution");
 
   return (
     <div className={styles["test-result-steps"]}>
       <TestResultDropdown
-        icon={LineTimeClockStopwatch.id}
+        icon={allureIcons.lineTimeClockStopwatch}
         isOpened={isOpened}
-        setIsOpen={setIsOpen}
+        setIsOpen={handleClick}
         counter={setup?.length}
         title={t("setup")}
       />

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

@@ -0,0 +1,27 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+const icons: Record<string, string> = {
+  blocker: allureIcons.lineArrowsChevronUpDouble,
+  critical: allureIcons.lineArrowsChevronUp,
+  normal: allureIcons.lineGeneralEqual,
+  minor: allureIcons.lineArrowsChevronDown,
+  trivial: allureIcons.lineArrowsChevronDownDouble,
+};
+
+export const TestResultSeverity = ({ severity = "normal" }: { severity?: string }) => {
+  const { t } = useI18n("severity");
+  const statusClass = clsx(styles[`severity-${severity}`]);
+
+  return (
+    <div className={styles["test-result-severity"]}>
+      <SvgIcon className={statusClass} id={icons[severity]} />
+      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
+        {capitalize(t(severity))}
+      </Text>
+    </div>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultStatus/index.tsx

@@ -1,7 +1,7 @@
 import type { TestStatus } from "@allurereport/core-api";
+import { Text } from "@allurereport/web-components";
 import clsx from "clsx";
-import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
-import { Text } from "@/components/commons/Typography";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
 import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
 import * as styles from "./styles.scss";

package/src/components/{app/TestResult → TestResult}/TestResultSteps/attachment.tsx

@@ -1,17 +1,17 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Spinner } from "@allurereport/web-components";
 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 { modalData } from "@/components/Modal";
+import { HtmlAttachmentPreview } from "@/components/TestResult/TestResultSteps/HtmlAttachmentPreview";
+import { AttachmentCode } from "@/components/TestResult/TestResultSteps/attachmentCode";
+import { AttachmentImage } from "@/components/TestResult/TestResultSteps/attachmentImage";
+import { AttachmentVideo } from "@/components/TestResult/TestResultSteps/attachmentVideo";
+import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
 import { type Attachments, attachmentType, fetchAttachment } from "@/utils/attachments";
 import * as styles from "./styles.scss";
 
-const componentsByAttachmentType = {
+const componentsByAttachmentType: Record<string, any> = {
   image: AttachmentImage,
   svg: AttachmentImage,
   json: AttachmentCode,
@@ -23,7 +23,7 @@ const componentsByAttachmentType = {
   text: AttachmentCode,
   video: AttachmentVideo,
 };
-const previewComponentsByAttachmentType = {
+const previewComponentsByAttachmentType: Record<string, any> = {
   html: HtmlAttachmentPreview,
 };
 
@@ -49,7 +49,7 @@ export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({
       setAttachment(result);
     };
     fetchData();
-  }, [item]);
+  }, [contentType, id, ext]);
 
   if (!loaded) {
     return (

package/src/components/{app/TestResult → TestResult}/TestResultSteps/attachmentCode.tsx

@@ -1,8 +1,13 @@
+import { type AttachmentTestStepResult } from "@allurereport/core-api";
+import { type FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
 import Prism from "prismjs";
-import "@/assets/scss/code.css";
+import "@/assets/scss/code.scss";
 
-export const AttachmentCode = ({ attachment, item }) => {
+export const AttachmentCode: FunctionalComponent<{
+  item: AttachmentTestStepResult;
+  attachment: { text?: string };
+}> = ({ attachment, item }) => {
   useEffect(() => {
     Prism.highlightAll();
   }, [attachment]);

package/src/components/{app/TestResult → TestResult}/TestResultSteps/attachmentImage.tsx

@@ -1,8 +1,11 @@
+import { type FunctionalComponent } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { EmptyComponent } from "@/components/app/TestResult/TestResultSteps/wrongAttachment";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
 
-export const AttachmentImage = ({ attachment }) => {
+export const AttachmentImage: FunctionalComponent<{
+  attachment: { img: string; originalFileName: string };
+}> = ({ attachment }) => {
   const [isValidImage, setIsValidImage] = useState(true);
 
   useEffect(() => {

package/src/components/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -0,0 +1,15 @@
+import { Spinner } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+
+export const AttachmentVideo: FunctionalComponent<{
+  attachment: { src: string; contentType?: string };
+}> = ({ attachment }) => {
+  if (!attachment) {
+    return <Spinner />;
+  }
+  return (
+    <video controls loop muted>
+      <source src={attachment?.src} type={attachment?.contentType} />
+    </video>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultSteps/index.tsx

@@ -1,11 +1,12 @@
+import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AllureAwesomeTestResult, AllureAwesomeTestStepResult } from "types";
-import LineHelpersPlayCircle from "@/assets/svg/line-helpers-play-circle.svg";
-import { TestResultDropdown } from "@/components/app/TestResult/TestResultDropdown";
-import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/app/TestResult/TestResultSteps/testResultStep";
+import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
 import { useI18n } from "@/stores/locale";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 const typeMap = {
@@ -15,6 +16,7 @@ const typeMap = {
 
 export type TestResultStepsProps = {
   steps: AllureAwesomeTestResult["steps"];
+  id?: string;
 };
 
 type StepComponentProps = FunctionalComponent<{
@@ -22,16 +24,23 @@ type StepComponentProps = FunctionalComponent<{
   stepIndex?: number;
 }>;
 
-export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps }) => {
-  const [isOpened, setIsOpen] = useState(true);
+export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps, id }) => {
+  const stepsId = `${id}-steps`;
+  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(stepsId));
+  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(stepsId);
+  };
 
   const { t } = useI18n("execution");
   return (
     <div className={styles["test-result-steps"]}>
       <TestResultDropdown
-        icon={LineHelpersPlayCircle.id}
+        icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
-        setIsOpen={setIsOpen}
+        setIsOpen={handleClick}
         counter={steps?.length}
         title={t("body")}
       />

package/src/components/{app/TestResult → TestResult}/TestResultSteps/testResultAttachment.tsx

@@ -1,33 +1,31 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Code, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
-import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
-import LineFilesFileAttachment from "@/assets/svg/line-files-file-attachment-2.svg";
-import LineImagesImage from "@/assets/svg/line-images-image.svg";
-import { ArrowButton } from "@/components/app/ArrowButton";
-import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachmentInfo } from "@/components/app/TestResult/TestResultSteps/testResultAttachmentInfo";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Code, Text } from "@/components/commons/Typography";
+import { ArrowButton } from "@/components/ArrowButton";
+import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachmentInfo } from "@/components/TestResult/TestResultSteps/testResultAttachmentInfo";
 import { attachmentType } from "@/utils/attachments";
 
-const iconMap = {
-  "text/plain": LineFilesFileAttachment.id,
-  "application/xml": LineFilesFileAttachment.id,
-  "text/html": LineFilesFileAttachment.id,
-  "text/csv": LineFilesFileAttachment.id,
-  "text/tab-separated-values": LineFilesFileAttachment.id,
-  "text/css": LineFilesFileAttachment.id,
-  "text/uri-list": LineFilesFileAttachment.id,
-  "image/svg+xml": LineImagesImage.id,
-  "image/png": LineImagesImage.id,
-  "application/json": LineFilesFileAttachment.id,
-  "application/zip": LineFilesFileAttachment.id,
-  "video/webm": LineImagesImage.id,
-  "image/jpeg": LineImagesImage.id,
-  "video/mp4": LineImagesImage.id,
-  "application/vnd.allure.image.diff": LineImagesImage.id,
+const { lineImagesImage, lineFilesFileAttachment2 } = allureIcons;
+
+const iconMap: Record<string, string> = {
+  "text/plain": lineFilesFileAttachment2,
+  "application/xml": lineFilesFileAttachment2,
+  "text/html": lineFilesFileAttachment2,
+  "text/csv": lineFilesFileAttachment2,
+  "text/tab-separated-values": lineFilesFileAttachment2,
+  "text/css": lineFilesFileAttachment2,
+  "text/uri-list": lineFilesFileAttachment2,
+  "image/svg+xml": lineImagesImage,
+  "image/png": lineImagesImage,
+  "application/json": lineFilesFileAttachment2,
+  "application/zip": lineFilesFileAttachment2,
+  "video/webm": lineImagesImage,
+  "image/jpeg": lineImagesImage,
+  "video/mp4": lineImagesImage,
+  "application/vnd.allure.image.diff": lineImagesImage,
 };
 
 export const TestResultAttachment: FunctionComponent<{
@@ -50,9 +48,9 @@ export const TestResultAttachment: FunctionComponent<{
           setIsOpen((prev) => !prev);
         }}
       >
-        <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />
+        <ArrowButton isOpened={isOpened} />
         <div className={styles["test-result-attachment-icon"]}>
-          <SvgIcon size="s" id={iconMap[link.contentType] || LineFilesFileAttachment.id} />
+          <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
         </div>
 
         <Code size="s" className={styles["test-result-step-number"]}>

package/src/components/{app/TestResult → TestResult}/TestResultSteps/testResultAttachmentInfo.tsx

@@ -1,15 +1,11 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { filesize } from "filesize";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
-import LineArrowsExpand from "@/assets/svg/line-arrows-expand-3.svg";
-import LineGeneralDownloadCloud from "@/assets/svg/line-general-download-cloud.svg";
-import { isModalOpen, openModal } from "@/components/app/Modal";
-import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { IconButton } from "@/components/commons/Button";
-import { TooltipWrapper } from "@/components/commons/Tooltip";
-import { Text } from "@/components/commons/Typography";
+import { isModalOpen, openModal } from "@/components/Modal";
+import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
 import { useI18n } from "@/stores";
 import { downloadAttachment } from "@/utils/attachments";
 
@@ -26,7 +22,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
   const { t: tooltip } = useI18n("controls");
   const contentLength = item.link.missed === false ? item.link.contentLength : undefined;
   const contentSize = contentLength
-    ? filesize(contentLength as number, {
+    ? filesize(contentLength, {
         base: 2,
         round: 1,
       })
@@ -47,7 +43,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
         component: <Attachment item={item} />,
       });
     }
-  }, []);
+  }, [item]);
 
   const downloadData = async (e: MouseEvent) => {
     e.stopPropagation();
@@ -66,7 +62,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
               style={"ghost"}
               size={"s"}
               iconSize={"s"}
-              icon={LineArrowsExpand.id}
+              icon={allureIcons.lineArrowsExpand3}
               onClick={expandAttachment}
             />
           </TooltipWrapper>
@@ -77,7 +73,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
             size={"s"}
             iconSize={"s"}
             className={styles["item-button"]}
-            icon={LineGeneralDownloadCloud.id}
+            icon={allureIcons.lineGeneralDownloadCloud}
             onClick={(e: MouseEvent) => downloadData(e)}
           />
         </TooltipWrapper>

package/src/components/{app/TestResult → TestResult}/TestResultSteps/testResultStep.tsx

@@ -1,35 +1,43 @@
 import type { DefaultTestStepResult } from "@allurereport/core-api";
+import { Code, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
-import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
-import { ArrowButton } from "@/components/app/ArrowButton";
-import { MetadataList } from "@/components/app/Metadata";
-import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStepInfo } from "@/components/app/TestResult/TestResultSteps/testResultStepInfo";
-import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
-import { Code, Text } from "@/components/commons/Typography";
+import { ArrowButton } from "@/components/ArrowButton";
+import { MetadataList } from "@/components/Metadata";
+import { type MetadataItem } from "@/components/ReportMetadata";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
+  const { parameters } = props;
 
-export const TestResultStepParameters = ({ parameters }) => {
   return (
     <div className={styles["test-result-parameters"]}>
-      <MetadataList size={"s"} envInfo={parameters} columns={1} />
+      <MetadataList size={"s"} envInfo={parameters as unknown as MetadataItem[]} columns={1} />
     </div>
   );
 };
-export const TestResultStepsContent = ({ item }) => {
-  const typeMap = {
-    step: TestResultStep,
-    attachment: TestResultAttachment,
-  };
+export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) => {
+  const { item } = props;
+
   return (
     <div className={styles["test-result-step-content"]}>
       {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
       {Boolean(item?.steps?.length) && (
         <>
           {item.steps?.map((subItem, key) => {
-            const StepComponent = typeMap[subItem.type];
-            return <StepComponent stepIndex={key + 1} key={key} item={subItem} />;
+            if (subItem.type === "step") {
+              return <TestResultStep stepIndex={key + 1} key={key} item={subItem} />;
+            }
+
+            if (subItem.type === "attachment") {
+              return <TestResultAttachment stepIndex={key + 1} key={key} item={subItem} />;
+            }
+
+            return null;
           })}
         </>
       )}
@@ -42,18 +50,24 @@ export const TestResultStep: FunctionComponent<{
   stepIndex?: number;
   className?: string;
 }> = ({ item, stepIndex }) => {
-  const [isOpened, setIsOpen] = useState(false);
+  const isEarlyOpened = collapsedTrees.value.has(item.stepId);
+  const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
   const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
 
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(item.stepId);
+  };
+
   return (
     <div className={styles["test-result-step"]}>
-      <div className={styles["test-result-step-header"]} onClick={() => setIsOpen(!isOpened)}>
+      <div className={styles["test-result-step-header"]} onClick={handleClick}>
         {!hasContent ? (
           <div className={styles["test-result-strut"]} />
         ) : (
           <ArrowButton
             isOpened={isOpened}
-            icon={arrowsChevronDown.id}
+            icon={allureIcons.arrowsChevronDown}
             iconSize={"xs"}
             className={!hasContent ? styles["test-result-visibility-hidden"] : ""}
           />