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

package/dist/single/app-800f7e75bb52ecb2ae21.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/**
+     * Prism: Lightweight, robust, elegant syntax highlighting
+     *
+     * @license MIT <https://opensource.org/licenses/MIT>
+     * @author Lea Verou <https://lea.verou.me>
+     * @namespace
+     * @public
+     */
+
+/**
+ * filesize
+ *
+ * @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
+ * @license BSD-3-Clause
+ * @version 10.1.6
+ */

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.17",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,39 +31,43 @@
     "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.17",
+    "@allurereport/web-commons": "3.0.0-beta.17",
+    "@allurereport/web-components": "3.0.0-beta.17",
     "@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",
+    "@preact/preset-vite": "^2.10.2",
     "@stylistic/eslint-plugin": "^2.6.1",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/preact": "^3.2.3",
+    "@testing-library/user-event": "^14.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
     "@types/diff": "^7",
     "@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",
-    "allure-vitest": "^3.0.9",
+    "@vitest/runner": "^3.2.4",
+    "@vitest/snapshot": "^3.2.4",
+    "allure-vitest": "^3.3.2",
     "ansi-to-html": "^0.7.2",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
@@ -87,9 +91,10 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "globals": "^15.9.0",
     "html-webpack-plugin": "^5.6.3",
+    "jsdom": "^26.1.0",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^7.0.1",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
@@ -99,10 +104,11 @@
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
-    "vitest": "^2.1.8",
-    "webpack": "^5.94.0",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4",
+    "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
+    "webpack-dev-server": "^5.2.2",
     "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/Header/CiInfo/index.tsx

@@ -0,0 +1,51 @@
+import { CiDescriptor, CiType } from "@allurereport/core-api";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import { useMemo } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+interface CiInfoProps {
+  ci: CiDescriptor;
+  className?: ClassValue;
+}
+
+export const CiInfo = ({ ci, className }: CiInfoProps) => {
+  const icon = useMemo(() => {
+    switch (ci.type) {
+      case CiType.Amazon:
+        return allureIcons.amazon;
+      case CiType.Azure:
+        return allureIcons.azure;
+      case CiType.Bitbucket:
+        return allureIcons.bitbucket;
+      case CiType.Circle:
+        return allureIcons.circleci;
+      case CiType.Drone:
+        return allureIcons.drone;
+      case CiType.Github:
+        return allureIcons.github;
+      case CiType.Gitlab:
+        return allureIcons.gitlab;
+      case CiType.Jenkins:
+        return allureIcons.jenkins;
+      default:
+        return undefined;
+    }
+  }, [ci]);
+  const link = ci.pullRequestUrl ?? ci.jobUrl ?? ci.jobRunUrl;
+  const label = ci.pullRequestName ?? ci.jobName ?? ci.jobRunName ?? link;
+
+  if (!link) {
+    return null;
+  }
+
+  return (
+    <a className={clsx(styles["ci-info"], className)} href={link}>
+      {icon && <SvgIcon id={icon} width={16} height={16} />}
+      <Text type={"paragraph"} size={"m"} bold>
+        {label}
+      </Text>
+    </a>
+  );
+};

package/src/components/Header/CiInfo/styles.scss

@@ -0,0 +1,7 @@
+.ci-info {
+  display: flex;
+  align-items: center;
+  gap: 0 6px;
+  color: var(--on-text-secondary);
+  text-decoration: none;
+}

package/src/components/Header/index.tsx

@@ -1,3 +1,4 @@
+import { getReportOptions } from "@allurereport/web-commons";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
@@ -6,6 +7,8 @@ import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
 import { route } from "@/stores/router";
 import { availableSections } from "@/stores/sections";
 import { testResultStore } from "@/stores/testResults";
+import type { AwesomeReportOptions } from "../../../types";
+import { CiInfo } from "./CiInfo";
 import * as styles from "./styles.scss";
 
 interface HeaderProps {
@@ -13,11 +16,13 @@ interface HeaderProps {
 }
 
 export const Header = ({ className }: HeaderProps) => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const testResultId = route.value.params?.testResultId;
+  const { ci } = getReportOptions<AwesomeReportOptions>();
 
   return (
     <div className={clsx(styles.above, className)}>
       {Boolean(availableSections.value?.length) && <SectionPicker />}
+      {!testResultId && ci && <CiInfo ci={ci} />}
       {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
       <HeaderControls className={styles.right} />
     </div>

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 data-testid="filter-tooltip" 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";