@allurereport/web-awesome 3.0.0-beta.15 → 3.0.0-beta.16

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-f5ecfcd9.js"
+  "main.js": "app-b4be944c6ebe4a83f366.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.16",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,23 +31,23 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.15",
-    "@allurereport/web-commons": "3.0.0-beta.15",
-    "@allurereport/web-components": "3.0.0-beta.15",
+    "@allurereport/core-api": "3.0.0-beta.16",
+    "@allurereport/web-commons": "3.0.0-beta.16",
+    "@allurereport/web-components": "3.0.0-beta.16",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
     "preact": "^10.24.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "reset.css": "^2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-react-jsx": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.10.0",
     "@floating-ui/dom": "^1.6.12",
     "@preact/compat": "^18.3.1",
@@ -58,11 +58,11 @@
     "@types/eslint": "^8.56.11",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.17.9",
-    "@types/prismjs": "^1",
+    "@types/prismjs": "^1.26.5",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/runner": "^2.1.8",
-    "@vitest/snapshot": "^2.1.8",
+    "@vitest/runner": "^2.1.9",
+    "@vitest/snapshot": "^2.1.9",
     "allure-vitest": "^3.0.9",
     "ansi-to-html": "^0.7.2",
     "autoprefixer": "^10.4.20",
@@ -89,7 +89,7 @@
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^7.0.1",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.0",
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
@@ -99,10 +99,10 @@
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
-    "vitest": "^2.1.8",
-    "webpack": "^5.94.0",
+    "vitest": "^2.1.9",
+    "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
+    "webpack-dev-server": "^5.2.1",
     "webpack-manifest-plugin": "^5.0.0"
   }
 }

package/src/assets/scss/day.scss

@@ -26,6 +26,7 @@
   --bg-support-castor-medium-day: var(--castor-day-darken-2);
   --bg-support-rau-day: var(--rau-day-darken-1);
   --bg-support-skat-day: var(--skat-day-darken-1);
+  --bg-support-sirius-day: var(--sirius-day-darken-1);
   --constant-bg-base-modal-day: var(--gray-neutral-800);
   --constant-on-border-heavy-day: var(--gray-neutral-alpha-night-300);
   --constant-on-icon-primary-day: var(--gray-neutral-alpha-night-50);
@@ -48,4 +49,5 @@
   --on-text-hint-day: var(--gray-neutral-alpha-day-450);
   --on-text-primary-day: var(--gray-neutral-alpha-day-800);
   --on-text-secondary-day: var(--gray-neutral-alpha-day-600);
+  --on-text-universal-primary-day: var(--gray-neutral-75);
 }

package/src/assets/scss/night.scss

@@ -29,6 +29,7 @@
   --bg-support-castor-night: var(--castor-night-darken-5);
   --bg-support-rau-night: var(--rau-night-darken-5);
   --bg-support-skat-night: var(--skat-night-darken-5);
+  --bg-support-sirius-night: var(--sirius-night-darken-5);
   --constant-bg-base-modal-night: var(--gray-neutral-750);
   --constant-bg-base-primary-night: var(--gray-neutral-950);
   --constant-on-border-heavy-night: var(--gray-neutral-alpha-night-300);
@@ -58,4 +59,5 @@
   --on-text-hint-night: var(--gray-neutral-alpha-night-450);
   --on-text-primary-night: var(--gray-neutral-alpha-night-100);
   --on-text-secondary-night: var(--gray-neutral-alpha-night-300);
+  --on-text-universal-primary-night: var(--gray-neutral-75);
 }

package/src/assets/scss/theme.scss

@@ -25,6 +25,7 @@
   --bg-support-castor: var(--bg-support-castor-day);
   --bg-support-rau: var(--bg-support-rau-day);
   --bg-support-skat: var(--bg-support-skat-day);
+  --bg-support-sirius: var(--bg-support-sirius-day);
   --constant-bg-base-modal: var(--constant-bg-base-modal-day);
   --constant-on-border-heavy: var(--constant-on-border-heavy-day);
   --constant-on-icon-primary: var(--constant-on-icon-primary-day);
@@ -47,6 +48,7 @@
   --on-text-hint: var(--on-text-hint-day);
   --on-text-primary: var(--on-text-primary-day);
   --on-text-secondary: var(--on-text-secondary-day);
+  --on-text-universal-primary: var(--on-text-universal-primary-day);
   --scrollbar-color: var(--gray-300);
   --bg-alpha-atlas: var(--atlas-day-darken-1-8);
   --bg-alpha-rau: var(--rau-day-darken-1-8);
@@ -88,6 +90,7 @@
   --bg-support-castor: var(--bg-support-castor-night);
   --bg-support-rau: var(--bg-support-rau-night);
   --bg-support-skat: var(--bg-support-skat-night);
+  --bg-support-sirius: var(--bg-support-sirius-night);
   --constant-bg-base-modal: var(--constant-bg-base-modal-night);
   --constant-bg-base-primary: var(--constant-bg-base-primary-night);
   --constant-on-border-heavy: var(--constant-on-border-heavy-night);
@@ -117,6 +120,7 @@
   --on-text-hint: var(--on-text-hint-night);
   --on-text-primary: var(--on-text-primary-night);
   --on-text-secondary: var(--on-text-secondary-night);
+  --on-text-universal-primary: var(--on-text-universal-primary-night);
 
   --scrollbar-color: var(--gray-400);
   --bg-alpha-atlas: var(--atlas-night-darken-5-12);

package/src/components/Charts/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { capitalize } from "@allurereport/web-commons";
+import { ChartType, capitalize } from "@allurereport/web-commons";
 import {
   Grid,
   GridItem,
@@ -13,7 +13,6 @@ import { useEffect } from "preact/hooks";
 import { chartsStore, fetchChartsData } from "@/stores/chart";
 import { useI18n } from "@/stores/locale";
 import type { ChartData } from "@/utils/charts";
-import { ChartType } from "@/utils/charts";
 import * as styles from "./styles.scss";
 
 const getChartWidgetByType = (
@@ -29,6 +28,7 @@ const getChartWidgetByType = (
       return (
         <TrendChartWidget
           title={title}
+          mode={chartData.mode}
           items={chartData.items}
           slices={chartData.slices}
           min={chartData.min}

package/src/components/MetadataButton/index.tsx

@@ -27,7 +27,7 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
       <Text size={"m"} bold>
         {title}
       </Text>
-      {counter !== null && <Counter count={counter} size="s" />}
+      {!!counter && <Counter count={counter} size="s" />}
       <ArrowButton
         isOpened={isOpened}
         iconSize={"s"}

package/src/components/ReportBody/Filters.tsx

@@ -1,12 +1,51 @@
-import { Button, Menu, Toggle, allureIcons } from "@allurereport/web-components";
+import { Button, Menu, Toggle, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
-import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import { type TreeFilters, setTreeFilter, treeFiltersStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
+const filterIcons: Record<TreeFilters, string> = {
+  flaky: allureIcons.lineIconBomb2,
+  retry: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNew,
+  fixed: allureIcons.lineAlertsFixed,
+  regressed: allureIcons.lineAlertsRegressed,
+  malfunctioned: allureIcons.lineAlertsMalfunctioned,
+};
+
+const MENU_KEYS = ["flaky", "retry", "new", "fixed", "regressed", "malfunctioned"] as TreeFilters[];
+
 export const Filters = () => {
   const { t } = useI18n("filters");
-  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
-  const hasFilter = flaky || retry || isNew;
+  const { t: tooltip } = useI18n("filters.description");
+  const hasFilter = MENU_KEYS.some((key) => treeFiltersStore.value.filter[key]);
+
+  const renderFilterItem = (filter: TreeFilters, value: boolean) => {
+    return (
+      <TooltipWrapper tooltipText={tooltip(filter)}>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t(filter) })}
+          onClick={() => {
+            setTreeFilter(filter, !value);
+          }}
+          leadingIcon={filterIcons[filter]}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={value}
+                label={t("enable-filter", { filter: t(filter) })}
+                data-testid={`${filter}-filter`}
+                onChange={(changeValue) => setTreeFilter(filter, changeValue)}
+              />
+            </div>
+          }
+        >
+          {t(filter)}
+        </Menu.Item>
+      </TooltipWrapper>
+    );
+  };
 
   return (
     <Menu
@@ -25,65 +64,7 @@ export const Filters = () => {
       )}
     >
       <Menu.Section data-testid="filters-menu">
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("flaky") })}
-          onClick={() => {
-            setTreeFilter("flaky", !flaky);
-          }}
-          leadingIcon={allureIcons.lineIconBomb2}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={flaky}
-                label={t("enable-filter", { filter: t("flaky") })}
-                data-testid="flaky-filter"
-                onChange={(value) => setTreeFilter("flaky", value)}
-              />
-            </div>
-          }
-        >
-          {t("flaky")}
-        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("retry") })}
-          onClick={() => setTreeFilter("retry", !retry)}
-          leadingIcon={allureIcons.lineArrowsRefreshCcw1}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={retry}
-                label={t("enable-filter", { filter: t("retry") })}
-                data-testid="retry-filter"
-                onChange={(value) => setTreeFilter("retry", value)}
-              />
-            </div>
-          }
-        >
-          {t("retry")}
-        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t("new") })}
-          onClick={() => setTreeFilter("new", !isNew)}
-          leadingIcon={allureIcons.lineAlertsNotificationBox}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={isNew}
-                label={t("enable-filter", { filter: t("new") })}
-                data-testid="new-filter"
-                onChange={(value) => setTreeFilter("new", value)}
-              />
-            </div>
-          }
-        >
-          {t("new")}
-        </Menu.Item>
+        {MENU_KEYS.map((key: TreeFilters) => renderFilterItem(key, treeFiltersStore.value.filter[key]))}
       </Menu.Section>
     </Menu>
   );

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -12,7 +12,7 @@ export interface MetadataSummaryProps {
   stats: Statistic;
 }
 
-const metadataTestsTypes = ["flaky", "retries"] as const as (keyof Statistic)[];
+const metadataTestsTypes = ["flaky", "new", "retries"] as const as (keyof Statistic)[];
 
 export const MetadataSummary: FunctionalComponent<MetadataSummaryProps> = ({ stats }) => {
   const { t } = useI18n("statuses");

package/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -6,16 +6,14 @@ import * as styles from "./styles.scss";
 const icons: Record<string, string> = {
   flaky: allureIcons.lineIconBomb2,
   retries: allureIcons.lineArrowsRefreshCcw1,
-  new: allureIcons.lineAlertsNotificationBox,
+  new: allureIcons.lineAlertsNew,
 };
 
-export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => {
-  return (
-    <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
-      {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
-      <Text size={"m"} bold>
-        {count}
-      </Text>
-    </div>
-  );
-};
+export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => (
+  <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
+    {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
+    <Text size={"m"} bold>
+      {count}
+    </Text>
+  </div>
+);

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

@@ -18,7 +18,7 @@ export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ descrip
         <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
         {isOpen && (
           <Text tag={"p"} className={styles["test-result-description-text"]}>
-            {description || "Description mock"}
+            {description}
           </Text>
         )}
       </div>

package/src/components/TestResult/TrError/TrDiff.tsx

@@ -2,7 +2,6 @@ import { Button, Code, CodeViewer } from "@allurereport/web-components";
 import type { BaseOptions, Change } from "diff";
 import { diffChars, diffLines, diffWords } from "diff";
 import { useState } from "preact/hooks";
-import { ac } from "vitest/dist/chunks/reporters.D7Jzd9GS";
 import * as styles from "@/components/TestResult/TrError/styles.scss";
 import { useI18n } from "@/stores";
 

package/src/components/TestResult/TrHistory/TrHistoryItem.tsx

@@ -1,59 +1,88 @@
 import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
 import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
+import type { AwesomeReportOptions } from "types";
 import { TrError } from "@/components/TestResult/TrError";
 import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { useI18n } from "@/stores";
-import { navigateTo, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
 export const TrHistoryItem: FunctionalComponent<{
   testResultItem: HistoryTestResult;
 }> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
-  const { status, error, stop, duration, id } = testResultItem;
+  const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
+  const { status, error, stop, duration, id, url } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration as number);
+  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const formattedDuration = duration ? formatDuration(duration) : undefined;
   const { t } = useI18n("controls");
+  const navigateUrl = useMemo(() => {
+    if (!url) {
+      return undefined;
+    }
 
-  const navigateUrl = id;
+    const { origin, pathname } = new URL(url);
+    const navUrl = new URL([pathname, reportOptions.id].join("/"), origin);
 
-  return (
-    <div>
-      <div className={styles["test-result-history-item-header"]}>
-        {Boolean(error) && (
-          <span onClick={() => setIsOpen(!isOpened)}>
-            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
-          </span>
-        )}
-        <div
-          className={styles["test-result-history-item-wrap"]}
+    navUrl.hash = id;
+
+    return navUrl.toString();
+  }, [reportOptions, id, url]);
+  const renderExternalLink = () => {
+    if (!navigateUrl) {
+      return null;
+    }
+
+    return (
+      <TooltipWrapper tooltipText={t("openInNewTab")}>
+        <IconButton
+          href={navigateUrl.toString()}
+          target={"_blank"}
+          icon={allureIcons.lineGeneralLinkExternal}
+          style={"ghost"}
+          size={"s"}
+          className={styles["test-result-history-item-link"]}
           onClick={(e) => {
             e.stopPropagation();
-            navigateTo(navigateUrl);
           }}
-        >
-          <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
-          <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>
-          <div className={styles["test-result-history-item-info"]}>
+        />
+      </TooltipWrapper>
+    );
+  };
+  const renderItemContent = () => {
+    return (
+      <>
+        <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
+        {convertedStop && <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>}
+        <div className={styles["test-result-history-item-info"]}>
+          {formattedDuration && (
             <Text type="ui" size={"s"} className={styles["item-time"]}>
               {formattedDuration}
             </Text>
-            <TooltipWrapper tooltipText={t("openInNewTab")}>
-              <IconButton
-                icon={allureIcons.lineGeneralLinkExternal}
-                style={"ghost"}
-                size={"s"}
-                className={styles["test-result-history-item-link"]}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  openInNewTab(navigateUrl);
-                }}
-              />
-            </TooltipWrapper>
-          </div>
+          )}
+          {renderExternalLink()}
         </div>
+      </>
+    );
+  };
+
+  return (
+    <div data-testid={"test-result-history-item"}>
+      <div className={styles["test-result-history-item-header"]}>
+        {Boolean(error) && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+          </span>
+        )}
+        {navigateUrl ? (
+          <a href={navigateUrl} className={styles["test-result-history-item-wrap"]}>
+            {renderItemContent()}
+          </a>
+        ) : (
+          <div className={styles["test-result-history-item-wrap"]}>{renderItemContent()}</div>
+        )}
       </div>
       {isOpened && error && (
         <div>

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

@@ -8,7 +8,6 @@
   width: 100%;
   gap: 4px;
   align-items: center;
-  cursor: pointer;
 }
 
 .test-result-history-item-wrap {
@@ -20,6 +19,8 @@
   padding: 4px 4px 4px 4px;
   width: 100%;
   align-items: flex-start;
+  text-decoration: none;
+  color: var(--on-text-primary);
 
   &:hover {
     background: var(--bg-control-flat-medium);

package/src/components/TestResult/TrInfo/TrInfoStatuses.tsx

@@ -1,4 +1,4 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
@@ -21,7 +21,9 @@ export const TrInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][]
         return (
           <div key={key} className={styles["test-result-info-status"]}>
             <SvgIcon className={styles["metadata-icon"]} id={icons[status]} size={"s"} />
-            {capitalize(title)}
+            <Text type={"ui"} size={"s"}>
+              {capitalize(title)}
+            </Text>
           </div>
         );
       })}

package/src/components/TestResult/TrOverview.tsx

@@ -1,4 +1,3 @@
-import type { TestStatus } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
 import * as styles from "@/components/BaseLayout/styles.scss";

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

@@ -1,18 +1,33 @@
 import { type HistoryTestResult } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
 import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import type { AwesomeTestResult } from "types";
+import type { AwesomeReportOptions, AwesomeTestResult } from "types";
 import { useI18n } from "@/stores";
-import { navigateTo } from "@/stores/router";
 import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
 const TrPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
+
+  if (!item.url) {
+    return (
+      <div className={styles["test-result-prev-status"]}>
+        <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
+      </div>
+    );
+  }
+
+  const { origin, pathname } = new URL(item.url);
+  const navigateUrl = new URL([pathname, reportOptions.id].join("/"), origin);
+
+  navigateUrl.hash = item.id;
+
   return (
-    <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`${item.id}`)}>
+    <a className={styles["test-result-prev-status"]} href={navigateUrl.toString()}>
       <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
-    </div>
+    </a>
   );
 };
 const TrPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
@@ -38,7 +53,7 @@ export const TrPrevStatuses: FunctionalComponent<TrPrevStatusesProps> = ({ histo
   return (
     <div className={styles["test-result-prev-statuses"]}>
       {history?.slice(0, 6).map((item, key) => (
-        <div key={key} className={styles["test-result-prev-status"]}>
+        <div key={key} data-testid={"test-result-prev-status"} className={styles["test-result-prev-status"]}>
           <TooltipWrapper key={key} tooltipComponent={<TrPrevStatusTooltip item={item} />}>
             <TrPrevStatus item={item} />
           </TooltipWrapper>

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

@@ -4,7 +4,6 @@ import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
-import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
 export type TrMetadataProps = {
@@ -13,12 +12,16 @@ export type TrMetadataProps = {
 };
 
 export const TrPwTraces: FunctionalComponent<TrMetadataProps> = ({ pwTraces }) => {
-  const { t } = useI18n("ui");
   const [isOpened, setIsOpened] = useState(true);
 
   return (
     <div className={styles["tr-metadata"]}>
-      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={pwTraces?.length} title={t("pwTrace")} />
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={setIsOpened}
+        counter={pwTraces?.length}
+        title={"Playwright Trace"}
+      />
       {isOpened && (
         <div className={styles["tr-metadata-wrapper"]}>
           {pwTraces?.map((pw, index) => <TrAttachment stepIndex={index + 1} item={pw} key={pw.link.id} />)}

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

@@ -6,6 +6,7 @@ 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 { openModal } from "@/stores/modal";
 
 const { lineImagesImage, lineFilesFileAttachment2, playwrightLogo } = allureIcons;
 
@@ -60,6 +61,17 @@ export const TrAttachment: FunctionComponent<{
   const componentType = attachmentType(link.contentType);
   const isValidComponentType = !["archive", null].includes(componentType.type as string);
 
+  const expandAttachment = (event: Event) => {
+    event.stopPropagation();
+    if (componentType.type !== "image") {
+      return;
+    }
+    openModal({
+      data: item,
+      component: <Attachment item={item} previewable={true} />,
+    });
+  };
+
   return (
     <div data-testid={"test-result-attachment"} className={styles["test-result-step"]}>
       <div
@@ -96,7 +108,7 @@ export const TrAttachment: FunctionComponent<{
       </div>
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
-          <div className={styles["test-result-attachment-content"]}>
+          <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
             <Attachment item={item} />
           </div>
         </div>

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

@@ -1,5 +1,5 @@
-import type { DefaultTestStepResult, TestStepResult } from "@allurereport/core-api";
-import { ArrowButton, Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import type { DefaultTestStepResult, TestStatus, TestStepResult } from "@allurereport/core-api";
+import { ArrowButton, Code, SvgIcon, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { MetadataList } from "@/components/Metadata";
@@ -19,13 +19,14 @@ export const TrStepParameters = (props: { parameters: DefaultTestStepResult["par
     </div>
   );
 };
+
 export const TrStepsContent = (props: { item: DefaultTestStepResult }) => {
   const { item } = props;
 
   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) && <TrError {...item} />}
+      {Boolean(item?.message && item?.trace && !item?.hasSimilarErrorInSubSteps) && <TrError {...item} />}
       {Boolean(item?.steps?.length) && (
         <>
           {item.steps?.map((subItem, key) => {