@allurereport/web-classic 3.0.0-beta.9 → 3.0.1

package/src/components/Overview/index.tsx

@@ -1,9 +1,105 @@
-import { Loadable, PageLoader } from "@allurereport/web-components";
-import * as styles from "@/components/BaseLayout/styles.scss";
-import { testResultStore } from "@/stores/testResults";
-import { treeStore } from "@/stores/tree";
+/* eslint-disable @stylistic/quotes */
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { ChartType } from "@allurereport/charts-api";
+import type { UIChartData } from "@allurereport/web-commons";
+import {
+  Grid,
+  GridItem,
+  HeatMapWidget,
+  Loadable,
+  PageLoader,
+  ThemeProvider,
+  TreeMapChartWidget,
+} from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { themeStore, useI18n } from "@/stores";
+import { chartsStore, fetchChartsData } from "@/stores/charts";
+import * as styles from "./Overview.module.scss";
+
+const getChartWidgetByType = (
+  chartData: UIChartData,
+  { t, empty }: Record<string, (key: string, options?: any) => string>,
+) => {
+  switch (chartData.type) {
+    case ChartType.CoverageDiff: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.CoverageDiff}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.SuccessRateDistribution: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.SuccessRateDistribution}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.ProblemsDistribution: {
+      return (
+        <HeatMapWidget
+          title={chartData.title}
+          data={chartData.data}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
 
 const Overview = () => {
-  const testResultId = "";
+  const { t } = useI18n("charts");
+  const { t: empty } = useI18n("empty");
+
+  useEffect(() => {
+    fetchChartsData();
+  }, []);
+
+  return (
+    <ThemeProvider theme={themeStore.value}>
+      <Loadable
+        source={chartsStore}
+        renderLoader={() => <PageLoader />}
+        renderData={(data) => {
+          const charts = Object.entries(data).map(([chartId, value]) => {
+            const chartWidget = getChartWidgetByType(value, { t, empty });
+
+            return (
+              <GridItem key={chartId} className={styles["overview-grid-item"]}>
+                {chartWidget}
+              </GridItem>
+            );
+          });
+
+          return (
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                {charts}
+              </Grid>
+            </div>
+          );
+        }}
+      />
+    </ThemeProvider>
+  );
 };
+
 export default Overview;

package/src/components/Packages/PackagesList.tsx

@@ -1,6 +1,6 @@
 import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
-import type { AllureAwesomeStatus } from "types";
+import type { ClassicStatus } from "types";
 import Tree from "@/components/Tree/Tree";
 import { useI18n } from "@/stores/locale";
 import {
@@ -18,7 +18,7 @@ export const PackagesList = () => {
   const { t } = useI18n("empty");
 
   useEffect(() => {
-    setPackagesStatus(currentTab.value as AllureAwesomeStatus);
+    setPackagesStatus(currentTab.value as ClassicStatus);
   }, [currentTab.value]);
 
   return (
@@ -58,7 +58,7 @@ export const PackagesList = () => {
 
         return (
           <div className={styles["tree-list"]}>
-            <Tree tree={filteredPackages.value} statusFilter={currentTab.value as AllureAwesomeStatus} root />
+            <Tree tree={filteredPackages.value} statusFilter={currentTab.value as ClassicStatus} root />
           </div>
         );
       }}

package/src/components/ReportBody/index.tsx

@@ -1,9 +1,7 @@
-import { statusesList } from "@allurereport/core-api";
-import { Loadable } from "@allurereport/web-components";
-import { Counter } from "@allurereport/web-components";
+import { capitalize, statusesList } from "@allurereport/core-api";
+import { Counter, Loadable } from "@allurereport/web-components";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
-import { capitalize } from "@/utils/capitalize";
 import { Tab, Tabs, TabsList } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";

package/src/components/ReportHeader/ReportHeaderLogo.tsx

@@ -1,10 +1,14 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { ReportLogo } from "@allurereport/web-components";
 import * as styles from "@/components/ReportHeader/styles.scss";
-import { ReportLogo } from "@/components/ReportLogo";
+import type { ClassicReportOptions } from "../../../types";
 
 export const ReportHeaderLogo = () => {
+  const { logo } = getReportOptions<ClassicReportOptions>() ?? {};
+
   return (
     <div className={styles["report-header-logo"]}>
-      <ReportLogo />
+      <ReportLogo logo={logo} />
     </div>
   );
 };

package/src/components/ReportHeader/index.tsx

@@ -1,13 +1,13 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Heading, Text } from "@allurereport/web-components";
-import type { AllureAwesomeReportOptions } from "types";
+import type { ClassicReportOptions } from "types";
 import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
 import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { currentLocaleIso } from "@/stores";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {
-  const { reportName, createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+  const { reportName, createdAt } = getReportOptions<ClassicReportOptions>() ?? {};
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "long",
     day: "numeric",

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,4 +1,4 @@
-import { type Statistic, statusesList } from "@allurereport/core-api";
+import { type Statistic, capitalize, statusesList } from "@allurereport/core-api";
 import { Loadable } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import type { FunctionComponent } from "preact";
@@ -8,7 +8,6 @@ import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/ReportMetadata/styles.scss";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
-import { capitalize } from "@/utils/capitalize";
 
 export const MetadataSummary: FunctionComponent = () => {
   const { t } = useI18n("statuses");

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

@@ -1,12 +1,12 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
 export type TestResultAttachmentViewProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {

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

@@ -1,12 +1,12 @@
 import { Text } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
 export type TestResultDescriptionProps = {
-  description: AllureAwesomeTestResult["description"];
+  description: ClassicTestResult["description"];
 };
 
 export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {

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

@@ -1,5 +1,4 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import * as baseStyles from "@/components/BaseLayout/styles.scss";
 import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
 import * as styles from "./styles.scss";
@@ -8,13 +7,7 @@ const TestResultThumb = () => {
   return (
     <div className={styles["test-result-thumb"]}>
       <div className={styles["test-result-thumb-wrapper"]}>
-        <SvgIcon
-          size={"m"}
-          width={"32px"}
-          height={"32px"}
-          id={allureIcons.lineDevCodeSquare}
-          className={styles["test-result-thumb-icon"]}
-        />
+        <SvgIcon size={"xl"} id={allureIcons.lineDevCodeSquare} className={styles["test-result-thumb-icon"]} />
         <Text className={styles["test-result-thumb-text"]}>No test case results</Text>
       </div>
     </div>

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

@@ -1,16 +1,14 @@
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { SvgIcon } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { LanguagePicker } from "@/components/LanguagePicker";
 import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
 import { navigateTo } from "@/index";
 import * as styles from "./styles.scss";
 
 export type TestResultHeaderProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ testResult }) => {

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

@@ -1,11 +1,11 @@
 import type { FunctionalComponent } from "preact";
 import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
 import { useI18n } from "@/stores";
-import { type AllureAwesomeTestResult } from "../../../../types";
+import { type ClassicTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export type TestResultHistoryViewProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = ({ testResult }) => {

package/src/components/TestResult/TestResultInfo/TestResultInfoStatuses.tsx

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

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

@@ -1,7 +1,7 @@
 import { formatDuration } from "@allurereport/core-api";
 import { Counter, Heading, Text, TooltipWrapper } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { TestResultInfoStatuses } from "@/components/TestResult/TestResultInfo/TestResultInfoStatuses";
 import { TestResultNavigation } from "@/components/TestResult/TestResultNavigation";
 import { TestResultPrevStatuses } from "@/components/TestResult/TestResultPrevStatuses";
@@ -13,7 +13,7 @@ import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
 export type TestResultInfoProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {

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

@@ -1,7 +1,7 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
@@ -35,7 +35,7 @@ const TestResultLink: FunctionalComponent<{
 };
 
 export type TestResultLinksProps = {
-  links: AllureAwesomeTestResult["links"];
+  links: ClassicTestResult["links"];
 };
 
 export const TestResultLinks: FunctionalComponent<TestResultLinksProps> = ({ links }) => {

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

@@ -1,13 +1,13 @@
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { TestResultMetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
 export type TestResultMetadataProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> = ({ testResult }) => {

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

@@ -1,6 +1,6 @@
 import { Code, IconButton, Loadable, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { useI18n } from "@/stores";
 import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
@@ -8,7 +8,7 @@ import { navigateTo } from "@/utils/navigate";
 import * as styles from "./styles.scss";
 
 export type TestResultNavigationProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps> = ({ testResult }) => {

package/src/components/TestResult/TestResultOverview.tsx

@@ -1,5 +1,5 @@
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import * as styles from "@/components/BaseLayout/styles.scss";
 import { TestResultDescription } from "@/components/TestResult/TestResultDescription";
 import { TestResultError } from "@/components/TestResult/TestResultError";
@@ -11,7 +11,7 @@ import { TestResultSteps } from "@/components/TestResult/TestResultSteps";
 import { TestResultTeardown } from "@/components/TestResult/TestResultTeardown";
 
 export type TestResultOverviewProps = {
-  testResult?: AllureAwesomeTestResult;
+  testResult?: ClassicTestResult;
 };
 
 export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {

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

@@ -1,13 +1,13 @@
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
 export type TestResultParametersProps = {
-  parameters: AllureAwesomeTestResult["parameters"];
+  parameters: ClassicTestResult["parameters"];
 };
 
 export const TestResultParameters: FunctionalComponent<TestResultParametersProps> = ({ parameters }) => {

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

@@ -1,18 +1,18 @@
-import { type HistoryTestResult } from "@allurereport/core-api";
+import { type HistoryTestResult, capitalize } from "@allurereport/core-api";
 import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { useI18n } from "@/stores";
-import { capitalize } from "@/utils/capitalize";
-import { navigateTo } from "@/utils/navigate";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
 const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  const navigateUrl = new URL(item.id, item.url);
+
   return (
-    <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
+    <a className={styles["test-result-prev-status"]} href={navigateUrl.toString()} target={"_blank"} rel={"noreferrer"}>
       <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
-    </div>
+    </a>
   );
 };
 const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
@@ -31,7 +31,7 @@ const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult
 };
 
 export type TestResultPrevStatusesProps = {
-  history: AllureAwesomeTestResult["history"];
+  history: ClassicTestResult["history"];
 };
 
 export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesProps> = ({ history }) => {

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

@@ -6,16 +6,30 @@ 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 { useI18n } from "@/stores";
 import { navigateTo } from "@/utils/navigate";
 import { timestampToDate } from "@/utils/time";
 
-export const TestResultRetriesItem: FunctionalComponent<{
+export type TrRetriesItemProps = {
   testResultItem: TestResult;
-}> = ({ testResultItem }) => {
+  attempt: number;
+  totalAttempts: number;
+};
+
+export const TestResultRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({
+  testResultItem,
+  attempt,
+  totalAttempts,
+}) => {
   const { id, status, message, trace, stop, duration } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration as number);
+  const { t } = useI18n("ui");
+
+  const retryTitlePrefix = t("attempt", { attempt, total: totalAttempts });
+  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
+
+  const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
   const navigateUrl = `testresult/${id}`;
 
   return (
@@ -24,11 +38,13 @@ export const TestResultRetriesItem: FunctionalComponent<{
         {Boolean(message) && <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>
+          <Text className={styles["test-result-retries-item-text"]}>{retryTitle}</Text>
           <div className={styles["test-result-retries-item-info"]}>
-            <Text type="ui" size={"s"} className={styles["item-time"]}>
-              {formattedDuration}
-            </Text>
+            {Boolean(formattedDuration) && (
+              <Text type="ui" size={"s"} className={styles["item-time"]}>
+                {formattedDuration}
+              </Text>
+            )}
             <IconButton
               icon={allureIcons.lineGeneralLinkExternal}
               style={"ghost"}

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

@@ -1,17 +1,24 @@
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } 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 }) => {
+export const TestResultRetriesView: FunctionalComponent<{ testResult: ClassicTestResult }> = ({ testResult }) => {
   const { retries } = testResult ?? {};
   const { t } = useI18n("empty");
 
   return (
     <div className={styles["test-result-history"]}>
       {retries.length ? (
-        retries?.map((item, key) => <TestResultRetriesItem testResultItem={item} key={key} />)
+        retries?.map((item, key) => (
+          <TestResultRetriesItem
+            testResultItem={item}
+            key={key}
+            attempt={retries.length - key}
+            totalAttempts={retries.length + 1}
+          />
+        ))
       ) : (
         <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
       )}

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

@@ -1,7 +1,7 @@
 import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
 import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
 import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
@@ -16,7 +16,7 @@ const typeMap = {
 };
 
 export type TestResultSetupProps = {
-  setup: AllureAwesomeTestResult["setup"];
+  setup: ClassicTestResult["setup"];
 };
 
 export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup }) => {

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

@@ -1,7 +1,7 @@
+import { capitalize } from "@allurereport/core-api";
 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> = {

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

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

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

@@ -1,4 +1,6 @@
+import { sanitize } from "@allurereport/web-commons";
 import type { FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
 import * as styles from "./styles.scss";
 
 // TODO: use proper type here
@@ -7,6 +9,30 @@ export type HtmlAttachmentPreviewProps = {
 };
 
 export const HtmlAttachmentPreview: FunctionalComponent<HtmlAttachmentPreviewProps> = ({ attachment }) => {
-  // eslint-disable-next-line react/no-danger
-  return <div className={styles["html-attachment-preview"]} dangerouslySetInnerHTML={{ __html: attachment?.text }} />;
+  const [blobUrl, setBlobUrl] = useState<string>("");
+
+  const rawText = attachment.text ?? "";
+  const sanitizedText = rawText.length > 0 ? sanitize(rawText) : "";
+
+  useEffect(() => {
+    if (sanitizedText) {
+      const blob = new Blob([sanitizedText], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      setBlobUrl(url);
+
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [sanitizedText]);
+
+  if (!sanitizedText) {
+    return null;
+  }
+
+  return (
+    <div className={styles["html-attachment-preview"]}>
+      <iframe src={blobUrl} width="100%" height="100%" frameBorder="0" sandbox="allow-same-origin" />
+    </div>
+  );
 };

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

@@ -1,7 +1,7 @@
 import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult, AllureAwesomeTestStepResult } from "types";
+import type { ClassicTestResult, ClassicTestStepResult } from "types";
 import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
 import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
 import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
@@ -14,11 +14,11 @@ const typeMap = {
 } as const;
 
 export type TestResultStepsProps = {
-  steps: AllureAwesomeTestResult["steps"];
+  steps: ClassicTestResult["steps"];
 };
 
 type StepComponentProps = FunctionalComponent<{
-  item?: AllureAwesomeTestStepResult;
+  item?: ClassicTestStepResult;
   stepIndex?: number;
 }>;
 
@@ -37,7 +37,7 @@ export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ ste
       />
       {isOpened && (
         <div className={styles["test-result-steps-root"]}>
-          {steps?.map((item: AllureAwesomeTestStepResult, index) => {
+          {steps?.map((item: ClassicTestStepResult, index) => {
             const { type } = item;
             const StepComponent: StepComponentProps = typeMap[type];
             return StepComponent ? <StepComponent item={item} stepIndex={index + 1} key={index} /> : null;