From b696fd0243a6e1a0a52957bd3f523765decae2c9 Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Mon, 6 Jan 2025 22:27:48 +0100
Subject: [PATCH] fix: a lot of small fixes and improvements

---
 .../components/app/ArrowButton/styles.scss    |  2 +
 .../app/ReportMetadata/MetadataSummary.tsx    | 40 ++++++++++---------
 .../app/ReportMetadata/MetadataWithIcon.tsx   |  4 +-
 .../app/TestResult/TestResultError/index.tsx  | 29 +++++++-------
 .../TestResult/TestResultError/styles.scss    | 21 +++++++---
 .../TestResultHistoryItem.tsx                 | 15 +++----
 .../app/TestResult/TestResultInfo/index.tsx   |  5 +--
 .../TestResult/TestResultNavigation/index.tsx |  3 +-
 .../TestResultPrevStatuses/index.tsx          | 12 +++---
 .../src/components/app/Tree/TreeItem.tsx      |  4 +-
 .../src/components/app/Tree/styles.scss       |  8 +++-
 .../src/components/commons/Button/styles.scss | 10 +++--
 packages/web-awesome/src/i18n/constants.ts    |  4 +-
 packages/web-awesome/src/i18n/locales/am.json |  3 +-
 packages/web-awesome/src/i18n/locales/az.json |  3 +-
 packages/web-awesome/src/i18n/locales/de.json |  3 +-
 packages/web-awesome/src/i18n/locales/en.json |  3 +-
 packages/web-awesome/src/i18n/locales/es.json |  3 +-
 packages/web-awesome/src/i18n/locales/fr.json |  3 +-
 packages/web-awesome/src/i18n/locales/he.json |  3 +-
 packages/web-awesome/src/i18n/locales/it.json |  3 +-
 packages/web-awesome/src/i18n/locales/ja.json |  3 +-
 packages/web-awesome/src/i18n/locales/ka.json |  3 +-
 packages/web-awesome/src/i18n/locales/kr.json |  3 +-
 packages/web-awesome/src/i18n/locales/nl.json |  3 +-
 packages/web-awesome/src/i18n/locales/pl.json |  3 +-
 packages/web-awesome/src/i18n/locales/pt.json |  3 +-
 packages/web-awesome/src/i18n/locales/ru.json |  3 +-
 packages/web-awesome/src/i18n/locales/sv.json |  3 +-
 packages/web-awesome/src/i18n/locales/tr.json |  3 +-
 packages/web-awesome/src/i18n/locales/zh.json |  3 +-
 packages/web-awesome/src/index.tsx            |  4 ++
 packages/web-awesome/src/stores/stats.ts      |  2 +-
 33 files changed, 132 insertions(+), 85 deletions(-)

diff --git a/packages/web-awesome/src/components/app/ArrowButton/styles.scss b/packages/web-awesome/src/components/app/ArrowButton/styles.scss
index a71f085..36d1c5a 100644
--- a/packages/web-awesome/src/components/app/ArrowButton/styles.scss
+++ b/packages/web-awesome/src/components/app/ArrowButton/styles.scss
@@ -2,10 +2,12 @@
   background: transparent;
   border: none;
   padding: 8px 4px;
+  border-radius: 4px;
   color: var(--on-icon-secondary);
 
   &:hover {
     background: var(--bg-control-flat-medium);
+    color: var(--on-icon-primary);
   }
 }
 
diff --git a/packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx b/packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx
index 7330871..d8a0e94 100644
--- a/packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx
+++ b/packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx
@@ -1,7 +1,9 @@
+import type { Statistic } from "@allurereport/core-api";
 import { statusesList } from "@allurereport/core-api";
 import { computed } from "@preact/signals";
-import { FunctionComponent } from "preact";
-import MetadataItem, { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import MetadataItem from "@/components/app/ReportMetadata/MetadataItem";
 import { MetadataTestType } from "@/components/app/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/app/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/app/ReportMetadata/styles.scss";
@@ -12,6 +14,7 @@ import { capitalize } from "@/utils/capitalize";
 
 export const MetadataSummary: FunctionComponent = () => {
   const { t } = useI18n("statuses");
+  const { t: testSummary } = useI18n("testSummary");
 
   return (
     <Loadable
@@ -23,20 +26,21 @@ export const MetadataSummary: FunctionComponent = () => {
           type: "all",
           count: stats.total,
         }));
-        // TODO: https://github.com/qameta/allure3/issues/178
-        // const metadataStatsKeys: (keyof Statistic)[] = ["flakyTests", "retryTests", "newTests"];
-        // const metaDataTests = metadataStatsKeys
-        //   .filter((key) => stats[key])
-        //   .map((key) => {
-        //     const title = t[key];
-        //     const props = { title, count: stats[key], type: key };
-        //
-        //     return (
-        //       <>
-        //         <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
-        //       </>
-        //     );
-        //   });
+        const metaDataTests = ["flaky", "retry"]
+          .map((key) => {
+            if (!stats[key]) {
+              return;
+            }
+            const title = testSummary(key);
+            const props = { title, count: stats[key] || 0, type: key };
+
+            return (
+              <div key={key}>
+                <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
+              </div>
+            );
+          })
+          .filter(Boolean);
 
         const metadataStatuses = statusesList
           .map((status) => ({ status, value: stats[status] }))
@@ -67,8 +71,8 @@ export const MetadataSummary: FunctionComponent = () => {
                 props={allTest.value}
                 renderComponent={MetadataWithIcon}
               />
-              {/*<div className={styles["report-metadata-separator"]}></div>*/}
-              {/*{metaDataTests}*/}
+              {Boolean(metaDataTests.length) && <div className={styles["report-metadata-separator"]} />}
+              {metaDataTests}
             </div>
             <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
           </div>
diff --git a/packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx b/packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx
index 25df241..0280b8f 100644
--- a/packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx
+++ b/packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx
@@ -1,8 +1,8 @@
-import { FunctionComponent, h } from "preact";
+import type { FunctionComponent } from "preact";
 import notifications from "@/assets/svg/line-alerts-notification-box.svg";
 import refresh from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
 import lineGeneralZap from "@/assets/svg/line-general-zap.svg";
-import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import type { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { Text } from "@/components/commons/Typography";
 import * as styles from "./styles.scss";
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultError/index.tsx b/packages/web-awesome/src/components/app/TestResult/TestResultError/index.tsx
index 673e86d..6e6d910 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultError/index.tsx
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultError/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from "preact/hooks";
 import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
 import { IconButton } from "@/components/commons/Button";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Code, Text } from "@/components/commons/Typography";
 import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
@@ -19,28 +20,26 @@ const TestResultErrorTrace = ({ trace }) => {
 export const TestResultError = ({ message, trace }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
 
   return (
     <div data-testid="test-result-error" className={styles["test-result-error"]}>
-      <div
-        data-testid="test-result-error-header"
-        className={styles["test-result-error-header"]}
-        onClick={() => setIsOpen(!isOpen)}
-      >
+      <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
         <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
           {t("error")}
         </Text>
-        <IconButton
-          style={"ghost"}
-          size={"s"}
-          icon={LineGeneralCopy3.id}
-          onClick={(e) => {
-            e.stopPropagation();
-            copyToClipboard(message);
-          }}
-        />
+        <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+          <IconButton
+            style={"ghost"}
+            size={"s"}
+            icon={LineGeneralCopy3.id}
+            onClick={() => {
+              copyToClipboard(message);
+            }}
+          />
+        </TooltipWrapper>
       </div>
-      <div onClick={() => setIsOpen(!isOpen)}>
+      <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
         <Code data-testid="test-result-error-message" size={"s"}>
           {message}
         </Code>
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultError/styles.scss b/packages/web-awesome/src/components/app/TestResult/TestResultError/styles.scss
index d0ba32f..cc9c3da 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultError/styles.scss
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultError/styles.scss
@@ -1,10 +1,9 @@
 .test-result-error {
-  padding: 8px 8px 12px 24px;
+  padding: 8px 8px 12px 16px;
   background-color: var(--bg-alpha-capella);
   border-radius: 8px;
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 
   &:before {
     content: "";
@@ -26,15 +25,27 @@
 
 .test-result-error-text {
   margin-bottom: 8px;
+  padding-left: 8px;
   color: var(--on-support-capella);
 }
 
 .test-result-error-trace {
   margin-top: 8px;
+  padding-left: 8px;
 
   pre {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    white-space: pre-wrap;
+    overflow: scroll;
+    padding-bottom: 24px;
+  }
+}
+
+.test-result-error-message {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 300ms;
+
+  &:hover {
+    background: var(--bg-alpha-capella);
   }
 }
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultHistory/TestResultHistoryItem.tsx b/packages/web-awesome/src/components/app/TestResult/TestResultHistory/TestResultHistoryItem.tsx
index ac9253a..146ac96 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultHistory/TestResultHistoryItem.tsx
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultHistory/TestResultHistoryItem.tsx
@@ -9,16 +9,18 @@ import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
 import { IconButton } from "@/components/commons/Button";
 import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Text } from "@/components/commons/Typography";
-import { navigateTo } from "@/index";
+import { openInNewTab } from "@/index";
+import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
 
 export const TestResultHistoryItem = ({ testResultItem }) => {
-  const { status, message, trace, stop, duration, id, uuid } = testResultItem;
+  const { status, message, trace, stop, duration, id } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
   const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration);
+  const formattedDuration = formatDuration(duration as number);
+  const { t } = useI18n("controls");
 
-  const navigateUrl = `/${uuid}/${id}`;
+  const navigateUrl = `/testresult/${id}`;
 
   return (
     <div>
@@ -31,8 +33,7 @@ export const TestResultHistoryItem = ({ testResultItem }) => {
             <Text type="ui" size={"s"} className={styles["item-time"]}>
               {formattedDuration}
             </Text>
-
-            <TooltipWrapper tooltipText={"Go to error"}>
+            <TooltipWrapper tooltipText={t("openInNewTab")}>
               <IconButton
                 icon={LineGeneralLinkExternal.id}
                 style={"ghost"}
@@ -40,7 +41,7 @@ export const TestResultHistoryItem = ({ testResultItem }) => {
                 className={styles["test-result-history-item-link"]}
                 onClick={(e) => {
                   e.stopPropagation();
-                  navigateTo(navigateUrl);
+                  openInNewTab(navigateUrl);
                 }}
               />
             </TooltipWrapper>
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultInfo/index.tsx b/packages/web-awesome/src/components/app/TestResult/TestResultInfo/index.tsx
index c2e25a0..4d56db0 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultInfo/index.tsx
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultInfo/index.tsx
@@ -1,7 +1,6 @@
 import { formatDuration } from "@allurereport/core-api";
-import * as test from "node:test";
-import { FunctionalComponent } from "preact";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import { TestResultNavigation } from "@/components/app/TestResult/TestResultNavigation";
 import { TestResultPrevStatuses } from "@/components/app/TestResult/TestResultPrevStatuses";
 import { TestResultSeverity } from "@/components/app/TestResult/TestResultSeverity";
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultNavigation/index.tsx b/packages/web-awesome/src/components/app/TestResult/TestResultNavigation/index.tsx
index 9cbcc2c..b8a05e3 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultNavigation/index.tsx
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultNavigation/index.tsx
@@ -44,11 +44,10 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
       source={testResultNavStore}
       renderData={(data) => {
         const currentIndex = data.indexOf(id) + 1;
-
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}
-            {data && (
+            {data && !testResult?.hidden && (
               <div className={styles["test-result-navigator"]}>
                 <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
                   <IconButton
diff --git a/packages/web-awesome/src/components/app/TestResult/TestResultPrevStatuses/index.tsx b/packages/web-awesome/src/components/app/TestResult/TestResultPrevStatuses/index.tsx
index 7f1bbf6..a6c3f82 100644
--- a/packages/web-awesome/src/components/app/TestResult/TestResultPrevStatuses/index.tsx
+++ b/packages/web-awesome/src/components/app/TestResult/TestResultPrevStatuses/index.tsx
@@ -1,8 +1,7 @@
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { FunctionalComponent } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import LineShapesDotCircle from "@/assets/svg/line-shapes-dot-circle.svg";
+import { useTestResultTabsContext } from "@/components/app/TestResult/TestResultTabs";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Text } from "@/components/commons/Typography";
@@ -12,8 +11,9 @@ import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
 const TestResultPrevStatus = ({ item }) => {
+  const { setCurrentTab } = useTestResultTabsContext();
   return (
-    <div className={styles["test-result-prev-status"]}>
+    <div className={styles["test-result-prev-status"]} onClick={() => setCurrentTab("history")}>
       <SvgIcon id={LineShapesDotCircle.id} className={styles[`status-${item?.status}`]} />
     </div>
   );
@@ -41,7 +41,7 @@ export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesP
   return (
     <div className={styles["test-result-prev-statuses"]}>
       {history?.slice(0, 6).map((item, key) => (
-        <div className={styles["test-result-prev-status"]}>
+        <div key={key} className={styles["test-result-prev-status"]}>
           <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
             <TestResultPrevStatus item={item} />
           </TooltipWrapper>
diff --git a/packages/web-awesome/src/components/app/Tree/TreeItem.tsx b/packages/web-awesome/src/components/app/Tree/TreeItem.tsx
index 0044de3..30ea058 100644
--- a/packages/web-awesome/src/components/app/Tree/TreeItem.tsx
+++ b/packages/web-awesome/src/components/app/Tree/TreeItem.tsx
@@ -19,7 +19,9 @@ export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, groupOrder, s
   return (
     <div {...rest} className={styles["tree-item"]} onClick={() => navigateTo(id)}>
       <TreeItemIcon status={status} />
-      <span data-testid="tree-leaf-order" class={styles.order}>#{groupOrder}</span>
+      <span data-testid="tree-leaf-order" class={styles.order}>
+        {groupOrder}
+      </span>
       <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
         {name}
       </Text>
diff --git a/packages/web-awesome/src/components/app/Tree/styles.scss b/packages/web-awesome/src/components/app/Tree/styles.scss
index 95d60d7..4d84151 100644
--- a/packages/web-awesome/src/components/app/Tree/styles.scss
+++ b/packages/web-awesome/src/components/app/Tree/styles.scss
@@ -49,7 +49,6 @@
   padding: 6px 8px 6px 6px;
   transition: background-color 300ms;
   gap: 4px;
-  align-items: center;
   cursor: pointer;
   position: relative;
 
@@ -173,4 +172,11 @@
 
 .order {
   user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+  width: 24px;
 }
diff --git a/packages/web-awesome/src/components/commons/Button/styles.scss b/packages/web-awesome/src/components/commons/Button/styles.scss
index ce2251e..8678dc1 100644
--- a/packages/web-awesome/src/components/commons/Button/styles.scss
+++ b/packages/web-awesome/src/components/commons/Button/styles.scss
@@ -290,6 +290,12 @@
 
     &:hover {
       --allure-btn-bg-color: var(--bg-control-flat-medium);
+
+      .contentIcon,
+      .leadingIcon,
+      .dropdownIcon {
+        color: var(--allure-btn-icon-color);
+      }
     }
 
     &:active,
@@ -520,10 +526,6 @@
   transition: color var(--color-change-transition-duration);
   user-select: none;
 
-  &:hover {
-    color: var(--allure-btn-icon-color);
-  }
-
   &:focus {
     outline: none;
   }
diff --git a/packages/web-awesome/src/i18n/constants.ts b/packages/web-awesome/src/i18n/constants.ts
index d4fc4ad..322ad56 100644
--- a/packages/web-awesome/src/i18n/constants.ts
+++ b/packages/web-awesome/src/i18n/constants.ts
@@ -63,8 +63,8 @@ export const LANG_LOCALE: Record<
   },
   am: {
     short: "Am",
-    full: "አማርኛ",
-    iso: "am-ET",
+    full: "Հայերեն",
+    iso: "hy-AM",
   },
   az: {
     short: "Az",
diff --git a/packages/web-awesome/src/i18n/locales/am.json b/packages/web-awesome/src/i18n/locales/am.json
index e9eb0e4..d4c9b88 100644
--- a/packages/web-awesome/src/i18n/locales/am.json
+++ b/packages/web-awesome/src/i18n/locales/am.json
@@ -109,7 +109,8 @@
     "collapse": "Կծկել",
     "expand": "Ընդլայնել",
     "fullscreen": "Լրիվ էկրան",
-    "language": "Փոխել լեզուն"
+    "language": "Փոխել լեզուն",
+    "openInNewTab": "Բացել նոր ներդիրում"
   },
   "errors": {
     "missedAttachment": "Կցորդը չի գտնվել"
diff --git a/packages/web-awesome/src/i18n/locales/az.json b/packages/web-awesome/src/i18n/locales/az.json
index d191677..ec1eda7 100644
--- a/packages/web-awesome/src/i18n/locales/az.json
+++ b/packages/web-awesome/src/i18n/locales/az.json
@@ -109,7 +109,8 @@
     "collapse": "Daralt",
     "expand": "Genişləndir",
     "fullscreen": "Tam ekran",
-    "language": "Dili dəyiş"
+    "language": "Dili dəyiş",
+    "openInNewTab": "Yeni tabda aç"
   },
   "errors": {
     "missedAttachment": "Əlavə tapılmadı"
diff --git a/packages/web-awesome/src/i18n/locales/de.json b/packages/web-awesome/src/i18n/locales/de.json
index fef6c9d..fd1cc08 100644
--- a/packages/web-awesome/src/i18n/locales/de.json
+++ b/packages/web-awesome/src/i18n/locales/de.json
@@ -109,7 +109,8 @@
     "collapse": "Einklappen",
     "expand": "Ausklappen",
     "fullscreen": "Vollbild",
-    "language": "Sprache ändern"
+    "language": "Sprache ändern",
+    "openInNewTab": "In neuem Tab öffnen"
   },
   "errors": {
     "missedAttachment": "Anhang nicht gefunden"
diff --git a/packages/web-awesome/src/i18n/locales/en.json b/packages/web-awesome/src/i18n/locales/en.json
index cd5d57f..c823415 100644
--- a/packages/web-awesome/src/i18n/locales/en.json
+++ b/packages/web-awesome/src/i18n/locales/en.json
@@ -109,7 +109,8 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "fullscreen": "Full screen",
-    "language": "Change language"
+    "language": "Change language",
+    "openInNewTab": "Open in new tab"
   },
   "errors": {
     "missedAttachment": "Attachment not found"
diff --git a/packages/web-awesome/src/i18n/locales/es.json b/packages/web-awesome/src/i18n/locales/es.json
index 2394338..fc8ed0b 100644
--- a/packages/web-awesome/src/i18n/locales/es.json
+++ b/packages/web-awesome/src/i18n/locales/es.json
@@ -109,7 +109,8 @@
     "collapse": "Colapsar",
     "expand": "Expandir",
     "fullscreen": "Pantalla completa",
-    "language": "Cambiar idioma"
+    "language": "Cambiar idioma",
+    "openInNewTab": "Abrir en nueva pestaña"
   },
   "errors": {
     "missedAttachment": "Adjunto no encontrado"
diff --git a/packages/web-awesome/src/i18n/locales/fr.json b/packages/web-awesome/src/i18n/locales/fr.json
index edbb94f..23c8567 100644
--- a/packages/web-awesome/src/i18n/locales/fr.json
+++ b/packages/web-awesome/src/i18n/locales/fr.json
@@ -109,7 +109,8 @@
     "collapse": "Réduire",
     "expand": "Agrandir",
     "fullscreen": "Plein écran",
-    "language": "Changer la langue"
+    "language": "Changer la langue",
+    "openInNewTab": "Ouvrir dans un nouvel onglet"
   },
   "errors": {
     "missedAttachment": "Pièce jointe non trouvée"
diff --git a/packages/web-awesome/src/i18n/locales/he.json b/packages/web-awesome/src/i18n/locales/he.json
index 468de90..ed329ce 100644
--- a/packages/web-awesome/src/i18n/locales/he.json
+++ b/packages/web-awesome/src/i18n/locales/he.json
@@ -109,7 +109,8 @@
     "collapse": "כווץ",
     "expand": "הרחב",
     "fullscreen": "מסך מלא",
-    "language": "שנה שפה"
+    "language": "שנה שפה",
+    "openInNewTab": "פתח בכרטיסייה חדשה"
   },
   "errors": {
     "missedAttachment": "הקובץ המצורף לא נמצא"
diff --git a/packages/web-awesome/src/i18n/locales/it.json b/packages/web-awesome/src/i18n/locales/it.json
index 21ee6f3..55a16ee 100644
--- a/packages/web-awesome/src/i18n/locales/it.json
+++ b/packages/web-awesome/src/i18n/locales/it.json
@@ -109,7 +109,8 @@
     "collapse": "Comprimi",
     "expand": "Espandi",
     "fullscreen": "Schermo intero",
-    "language": "Cambia lingua"
+    "language": "Cambia lingua",
+    "openInNewTab": "Apri in una nuova scheda"
   },
   "errors": {
     "missedAttachment": "Allegato non trovato"
diff --git a/packages/web-awesome/src/i18n/locales/ja.json b/packages/web-awesome/src/i18n/locales/ja.json
index 421b9b6..895cf42 100644
--- a/packages/web-awesome/src/i18n/locales/ja.json
+++ b/packages/web-awesome/src/i18n/locales/ja.json
@@ -109,7 +109,8 @@
     "collapse": "折りたたむ",
     "expand": "展開",
     "fullscreen": "全画面",
-    "language": "言語を変更"
+    "language": "言語を変更",
+    "openInNewTab": "新しいタブで開く"
   },
   "errors": {
     "missedAttachment": "添付ファイルが見つかりません"
diff --git a/packages/web-awesome/src/i18n/locales/ka.json b/packages/web-awesome/src/i18n/locales/ka.json
index f0284ea..220e5ed 100644
--- a/packages/web-awesome/src/i18n/locales/ka.json
+++ b/packages/web-awesome/src/i18n/locales/ka.json
@@ -109,7 +109,8 @@
     "collapse": "ჩაკეცვა",
     "expand": "გახსნა",
     "fullscreen": "სრულ ეკრანზე",
-    "language": "ენის შეცვლა"
+    "language": "ენის შეცვლა",
+    "openInNewTab": "გახსნა ახალ ჩანართში"
   },
   "errors": {
     "missedAttachment": "დანართი ვერ მოიძებნა"
diff --git a/packages/web-awesome/src/i18n/locales/kr.json b/packages/web-awesome/src/i18n/locales/kr.json
index 7c43a57..a181447 100644
--- a/packages/web-awesome/src/i18n/locales/kr.json
+++ b/packages/web-awesome/src/i18n/locales/kr.json
@@ -109,7 +109,8 @@
     "collapse": "접기",
     "expand": "펼치기",
     "fullscreen": "전체 화면",
-    "language": "언어 변경"
+    "language": "언어 변경",
+    "openInNewTab": "새 탭에서 열기"
   },
   "errors": {
     "missedAttachment": "첨부파일을 찾을 수 없습니다"
diff --git a/packages/web-awesome/src/i18n/locales/nl.json b/packages/web-awesome/src/i18n/locales/nl.json
index 4a76a3b..8478d08 100644
--- a/packages/web-awesome/src/i18n/locales/nl.json
+++ b/packages/web-awesome/src/i18n/locales/nl.json
@@ -109,7 +109,8 @@
     "collapse": "Samenvouwen",
     "expand": "Uitvouwen",
     "fullscreen": "Volledig scherm",
-    "language": "Taal wijzigen"
+    "language": "Taal wijzigen",
+    "openInNewTab": "Openen in een nieuw tabblad"
   },
   "errors": {
     "missedAttachment": "Bijlage niet gevonden"
diff --git a/packages/web-awesome/src/i18n/locales/pl.json b/packages/web-awesome/src/i18n/locales/pl.json
index 708f601..f05772c 100644
--- a/packages/web-awesome/src/i18n/locales/pl.json
+++ b/packages/web-awesome/src/i18n/locales/pl.json
@@ -107,7 +107,8 @@
     "collapse": "Skrócić",
     "expand": "Poszerzyć",
     "fullscreen": "Pełny ekran",
-    "language": "Zmień język"
+    "language": "Zmień język",
+    "openInNewTab": "Otwórz w nowej karcie"
   },
   "errors": {
     "missedAttachment": "Nie znaleziono załącznika"
diff --git a/packages/web-awesome/src/i18n/locales/pt.json b/packages/web-awesome/src/i18n/locales/pt.json
index 3998866..fad05fd 100644
--- a/packages/web-awesome/src/i18n/locales/pt.json
+++ b/packages/web-awesome/src/i18n/locales/pt.json
@@ -109,7 +109,8 @@
     "collapse": "Recolher",
     "expand": "Expandir",
     "fullscreen": "Tela cheia",
-    "language": "Alterar idioma"
+    "language": "Alterar idioma",
+    "openInNewTab": "Abrir em nova aba"
   },
   "errors": {
     "missedAttachment": "Anexo não encontrado"
diff --git a/packages/web-awesome/src/i18n/locales/ru.json b/packages/web-awesome/src/i18n/locales/ru.json
index 3b69942..ba54321 100644
--- a/packages/web-awesome/src/i18n/locales/ru.json
+++ b/packages/web-awesome/src/i18n/locales/ru.json
@@ -107,7 +107,8 @@
     "collapse": "Свернуть",
     "expand": "Развернуть",
     "fullscreen": "На весь экран",
-    "language": "Сменить язык"
+    "language": "Сменить язык",
+    "openInNewTab": "Открыть в новой вкладке"
   },
   "errors": {
     "missedAttachment": "Вложение не найдено"
diff --git a/packages/web-awesome/src/i18n/locales/sv.json b/packages/web-awesome/src/i18n/locales/sv.json
index 1aebcfe..ccf9cb0 100644
--- a/packages/web-awesome/src/i18n/locales/sv.json
+++ b/packages/web-awesome/src/i18n/locales/sv.json
@@ -109,7 +109,8 @@
     "collapse": "Minimera",
     "expand": "Expandera",
     "fullscreen": "Helskärm",
-    "language": "Byt språk"
+    "language": "Byt språk",
+    "openInNewTab": "Öppna i ny flik"
   },
   "errors": {
     "missedAttachment": "Bilaga hittades inte"
diff --git a/packages/web-awesome/src/i18n/locales/tr.json b/packages/web-awesome/src/i18n/locales/tr.json
index 42dbea0..4ef19a8 100644
--- a/packages/web-awesome/src/i18n/locales/tr.json
+++ b/packages/web-awesome/src/i18n/locales/tr.json
@@ -109,7 +109,8 @@
     "collapse": "Daralt",
     "expand": "Genişlet",
     "fullscreen": "Tam ekran",
-    "language": "Dili değiştir"
+    "language": "Dili değiştir",
+    "openInNewTab": "Yeni sekmede aç"
   },
   "errors": {
     "missedAttachment": "Ek bulunamadı"
diff --git a/packages/web-awesome/src/i18n/locales/zh.json b/packages/web-awesome/src/i18n/locales/zh.json
index 7e0b8f4..7ab31e7 100644
--- a/packages/web-awesome/src/i18n/locales/zh.json
+++ b/packages/web-awesome/src/i18n/locales/zh.json
@@ -109,7 +109,8 @@
     "collapse": "折叠",
     "expand": "展开",
     "fullscreen": "全屏",
-    "language": "更改语言"
+    "language": "更改语言",
+    "openInNewTab": "在新标签页中打开"
   },
   "errors": {
     "missedAttachment": "未找到附件"
diff --git a/packages/web-awesome/src/index.tsx b/packages/web-awesome/src/index.tsx
index e5ec2ce..75320e2 100644
--- a/packages/web-awesome/src/index.tsx
+++ b/packages/web-awesome/src/index.tsx
@@ -35,6 +35,10 @@ export const navigateTo = (path: string) => {
   globalThis.location.hash = path;
 };
 
+export const openInNewTab = (path: string) => {
+  window.open(`#${path}`, "_blank");
+};
+
 const rootElement = document.getElementById("app");
 
 document.addEventListener("DOMContentLoaded", () => {
diff --git a/packages/web-awesome/src/stores/stats.ts b/packages/web-awesome/src/stores/stats.ts
index 3bf44b4..1c9ff42 100644
--- a/packages/web-awesome/src/stores/stats.ts
+++ b/packages/web-awesome/src/stores/stats.ts
@@ -1,7 +1,7 @@
 import type { Statistic } from "@allurereport/core-api";
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
-import { StoreSignalState } from "@/stores/types";
+import type { StoreSignalState } from "@/stores/types";
 
 export const statsStore = signal<StoreSignalState<Statistic>>({
   loading: true,