@allurereport/web-awesome 3.0.0-beta.18 → 3.0.0-beta.19

package/dist/single/{app-51defb8852956a2ff6f1.js.LICENSE.txt → app-af34e3cec116175b6d9a.js.LICENSE.txt}

@@ -1,3 +1,5 @@
+/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
+
 /**
      * Prism: Lightweight, robust, elegant syntax highlighting
      *

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-51defb8852956a2ff6f1.js"
+  "main.js": "app-af34e3cec116175b6d9a.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,10 +31,10 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.18",
-    "@allurereport/plugin-api": "3.0.0-beta.18",
-    "@allurereport/web-commons": "3.0.0-beta.18",
-    "@allurereport/web-components": "3.0.0-beta.18",
+    "@allurereport/core-api": "3.0.0-beta.19",
+    "@allurereport/plugin-api": "3.0.0-beta.19",
+    "@allurereport/web-commons": "3.0.0-beta.19",
+    "@allurereport/web-components": "3.0.0-beta.19",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -69,7 +69,6 @@
     "@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",
     "babel-plugin-prismjs": "^2.1.0",

package/src/components/Charts/index.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { ChartType } from "@allurereport/core-api";
-import { type UIChartData, capitalize } from "@allurereport/web-commons";
+import { ChartType, capitalize } from "@allurereport/core-api";
+import { type UIChartData } from "@allurereport/web-commons";
 import {
+  BarChartWidget,
   ComingSoonChartWidget,
   Grid,
   GridItem,
+  HeatMapWidget,
   Loadable,
   PageLoader,
   SuccessRatePieChart,
+  TreeMapChartWidget,
   TrendChartWidget,
   Widget,
 } from "@allurereport/web-components";
@@ -24,7 +27,6 @@ const getChartWidgetByType = (
     case ChartType.Trend: {
       const type = t(`trend.type.${chartData.dataType}`);
       const title = chartData.title ?? t("trend.title", { type: capitalize(type) });
-      const translations = empty("no-results");
 
       return (
         <TrendChartWidget
@@ -34,7 +36,7 @@ const getChartWidgetByType = (
           slices={chartData.slices}
           min={chartData.min}
           max={chartData.max}
-          translations={{ "no-results": translations }}
+          translations={{ "no-results": empty("no-results") }}
         />
       );
     }
@@ -51,10 +53,47 @@ const getChartWidgetByType = (
         </Widget>
       );
     }
-    case ChartType.HeatMap:
-    case ChartType.Bar:
-    case ChartType.Funnel:
+    case ChartType.Bar: {
+      const type = t(`bar.type.${chartData.dataType}`);
+      const title = chartData.title ?? t("bar.title", { type: capitalize(type) });
+
+      return (
+        <BarChartWidget
+          title={title}
+          mode={chartData.mode}
+          data={chartData.data}
+          keys={chartData.keys}
+          indexBy={chartData.indexBy}
+          colors={chartData.colors}
+          groupMode={chartData.groupMode}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
     case ChartType.TreeMap: {
+      return (
+        <TreeMapChartWidget
+          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.HeatMap: {
+      return (
+        <HeatMapWidget
+          title={chartData.title}
+          data={chartData.data}
+          colors={chartData.colors}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    default: {
       const title = chartData.title ?? t(`charts.${chartData.type}.title`, { fallback: `${chartData.type} Chart` });
 
       return <ComingSoonChartWidget title={title} />;

package/src/components/Charts/styles.scss

@@ -7,12 +7,12 @@
 
 .overview-grid {
   display: grid;
-  gap: 24px;
+  gap: 12px;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
 }
 
 .overview-grid-item {
-  padding: 12px;
+  padding: 4px;
   width: 100%;
 }
 

package/src/components/Header/CiInfo/index.tsx

@@ -1,48 +1,64 @@
 import { CiDescriptor, CiType } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
-import { useMemo } from "preact/hooks";
+import type { AwesomeReportOptions } from "../../../../types";
 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;
+interface CiIconProps {
+  type: CiDescriptor["type"];
+}
+
+export const CiIcon = ({ type }: CiIconProps) => {
+  const iconCommonProps = {
+    width: 16,
+    height: 16,
+  };
+
+  switch (type) {
+    case CiType.Amazon:
+      return <SvgIcon id={allureIcons.amazon} {...iconCommonProps} />;
+    case CiType.Azure:
+      return <SvgIcon id={allureIcons.azure} {...iconCommonProps} />;
+    case CiType.Bitbucket:
+      return <SvgIcon id={allureIcons.bitbucket} {...iconCommonProps} />;
+    case CiType.Circle:
+      return <SvgIcon id={allureIcons.circleci} {...iconCommonProps} />;
+    case CiType.Drone:
+      return <SvgIcon id={allureIcons.drone} {...iconCommonProps} />;
+    case CiType.Github:
+      return <SvgIcon id={allureIcons.github} {...iconCommonProps} />;
+    case CiType.Gitlab:
+      return <SvgIcon id={allureIcons.gitlab} {...iconCommonProps} />;
+    case CiType.Jenkins:
+      return <SvgIcon id={allureIcons.jenkins} {...iconCommonProps} />;
+    default:
+      return null;
+  }
+};
+
+export const CiInfo = ({ className }: CiInfoProps) => {
+  const { ci } = getReportOptions<AwesomeReportOptions>();
+
+  if (!ci) {
+    return null;
+  }
+
+  const link = ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl;
+  const label = ci.pullRequestName || ci.jobRunName || ci.jobName || link;
 
   if (!link) {
     return null;
   }
 
   return (
-    <a className={clsx(styles["ci-info"], className)} href={link}>
-      {icon && <SvgIcon id={icon} width={16} height={16} />}
+    <a className={clsx(styles["ci-info"], className)} href={link} target="_blank">
+      <CiIcon type={ci.type} />
       <Text type={"paragraph"} size={"m"} bold>
         {label}
       </Text>

package/src/components/Header/index.tsx

@@ -1,4 +1,3 @@
-import { getReportOptions } from "@allurereport/web-commons";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
@@ -7,7 +6,6 @@ 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";
 
@@ -17,12 +15,11 @@ interface HeaderProps {
 
 export const Header = ({ className }: HeaderProps) => {
   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 && <CiInfo />}
       {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
       <HeaderControls className={styles.right} />
     </div>

package/src/components/ReportBody/index.tsx

@@ -1,5 +1,4 @@
-import { statusesList } from "@allurereport/core-api";
-import { capitalize } from "@allurereport/web-commons";
+import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,5 +1,4 @@
-import { type Statistic, statusesList } from "@allurereport/core-api";
-import { capitalize } from "@allurereport/web-commons";
+import { type Statistic, capitalize, statusesList } from "@allurereport/core-api";
 import { computed } from "@preact/signals";
 import type { FunctionalComponent } from "preact";
 import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";

package/src/components/SplitLayout/index.tsx

@@ -33,9 +33,7 @@ const Loader = () => {
 export const SplitLayout = () => {
   const testResultId = route.value.params?.testResultId ?? null;
   const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
-
   const { t } = useI18n("controls");
-
   const leftSide = (
     <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />
   );

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

@@ -1,6 +1,6 @@
-import type { TestError, TestResult, TestStatus } from "@allurereport/core-api";
+import type { TestError, TestStatus } from "@allurereport/core-api";
+import { ansiToHTML } from "@allurereport/web-commons";
 import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import AnsiToHtml from "ansi-to-html";
 import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -11,15 +11,16 @@ import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
 const TrErrorTrace = ({ trace }: { trace: string }) => {
-  const ansiTrace = new AnsiToHtml({
+  const sanitizedTrace = ansiToHTML(trace, {
     fg: "var(--on-text-primary)",
     colors: {},
-  }).toHtml(trace);
+  });
+
   return (
     <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
       <Code size={"s"} type={"ui"}>
         {/* eslint-disable-next-line react/no-danger */}
-        <pre dangerouslySetInnerHTML={{ __html: ansiTrace }}>{ansiTrace}</pre>
+        <pre dangerouslySetInnerHTML={{ __html: sanitizedTrace }} />
       </Code>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import { capitalize } from "@allurereport/web-commons";
+import { capitalize } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 import { useI18n } from "@/stores";

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

@@ -70,7 +70,7 @@ export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
             </TrTab>
             <Loadable<Record<string, TestEnvGroup>, TestEnvGroup | undefined>
               source={testEnvGroupsStore}
-              transformData={(groups) => groups[testResult.testCase.id]}
+              transformData={(groups) => groups?.[testResult?.testCase?.id]}
               renderData={(group) => {
                 const envsCount = getRealEnvsCount(group);
 

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

@@ -1,5 +1,5 @@
-import { type HistoryTestResult } from "@allurereport/core-api";
-import { capitalize, getReportOptions } from "@allurereport/web-commons";
+import { type HistoryTestResult, capitalize } 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 { AwesomeReportOptions, AwesomeTestResult } from "types";

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

@@ -1,4 +1,4 @@
-import { capitalize } from "@allurereport/web-commons";
+import { capitalize } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import { useI18n } from "@/stores/locale";

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

@@ -1,5 +1,5 @@
 import type { TestStatus } from "@allurereport/core-api";
-import { capitalize } from "@allurereport/web-commons";
+import { capitalize } from "@allurereport/core-api";
 import { Text, TreeItemIcon } from "@allurereport/web-components";
 import clsx from "clsx";
 import { useI18n } from "@/stores";

package/test/components/Header/CiInfo.test.tsx

@@ -1,7 +1,8 @@
-import { CiDescriptor, CiType } from "@allurereport/core-api";
+import { CiType } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
 import { cleanup, render, screen } from "@testing-library/preact";
 import { h } from "preact";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
 import { CiInfo } from "@/components/Header/CiInfo";
 
 const fixtures = {
@@ -31,8 +32,15 @@ vi.mock("@allurereport/web-components", async () => {
     },
   };
 });
+vi.mock("@allurereport/web-commons", async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    getReportOptions: vi.fn(),
+  };
+});
 
 beforeEach(() => {
+  vi.clearAllMocks();
   cleanup();
 });
 
@@ -50,101 +58,119 @@ describe("components > Header > CiInfo", () => {
     ];
 
     for (const type of ciTypes) {
-      const ci = {
-        pullRequestUrl: fixtures.pullRequestUrl,
-        type,
-      } as CiDescriptor;
+      (getReportOptions as Mock).mockReturnValueOnce({
+        ci: {
+          pullRequestUrl: fixtures.pullRequestUrl,
+          type,
+        },
+      });
 
       cleanup();
-      render(<CiInfo ci={ci} />);
+      render(<CiInfo />);
 
       expect(screen.getByTestId("icon")).toHaveTextContent(type);
     }
   });
 
   it("shouldn't render icon for unknown CI", () => {
-    const ci = {
-      type: undefined,
-    } as CiDescriptor;
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        type: undefined,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
     expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
   });
 
   it("should render there is no link to use", () => {
-    const ci = {} as CiDescriptor;
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {},
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
     expect(screen.queryByRole("link")).not.toBeInTheDocument();
   });
 
   it("should presence pull request url as href when provided", () => {
-    const ci = {
-      pullRequestUrl: fixtures.pullRequestUrl,
-      jobUrl: fixtures.jobUrl,
-      jobRunUrl: fixtures.jobRunUrl,
-    } as CiDescriptor;
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        pullRequestUrl: fixtures.pullRequestUrl,
+        jobUrl: fixtures.jobUrl,
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
     expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.pullRequestUrl);
   });
 
-  it("should presence use job url as href when provided", () => {
-    const ci = {
-      jobUrl: fixtures.jobUrl,
-      jobRunUrl: fixtures.jobRunUrl,
-    } as CiDescriptor;
+  it("should presence use job run url as href when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobUrl: fixtures.jobUrl,
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
-    expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobUrl);
+    expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobRunUrl);
   });
 
-  it("should use job run url as href when provided", () => {
-    const ci = {
-      jobRunUrl: fixtures.jobRunUrl,
-    } as CiDescriptor;
+  it("should use job url as href when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobRunUrl: fixtures.jobRunUrl,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
     expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobRunUrl);
   });
 
   it("should presence pull request name as text when provided", () => {
-    const ci = {
-      pullRequestUrl: fixtures.pullRequestUrl,
-      pullRequestName: fixtures.pullRequestName,
-      jobName: fixtures.jobName,
-      jobRunName: fixtures.jobRunName,
-    } as CiDescriptor;
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        pullRequestUrl: fixtures.pullRequestUrl,
+        pullRequestName: fixtures.pullRequestName,
+        jobName: fixtures.jobName,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
     expect(screen.getByRole("link")).toHaveTextContent(fixtures.pullRequestName);
   });
 
-  it("should presence job name as text when provided", () => {
-    const ci = {
-      jobUrl: fixtures.jobUrl,
-      jobName: fixtures.jobName,
-      jobRunName: fixtures.jobRunName,
-    } as CiDescriptor;
+  it("should presence job run name as text when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobUrl: fixtures.jobUrl,
+        jobName: fixtures.jobName,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
 
-    render(<CiInfo ci={ci} />);
+    render(<CiInfo />);
 
-    expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobName);
+    expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobRunName);
   });
 
-  it("should presence job run name as text when provided", () => {
-    const ci = {
-      jobRunUrl: fixtures.jobRunUrl,
-      jobRunName: fixtures.jobRunName,
-    } as CiDescriptor;
-
-    render(<CiInfo ci={ci} />);
+  it("should presence job name as text when provided", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobRunUrl: fixtures.jobRunUrl,
+        jobRunName: fixtures.jobRunName,
+      },
+    });
+
+    render(<CiInfo />);
 
     expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobRunName);
   });

package/test/components/Header.test.tsx

@@ -75,12 +75,7 @@ describe("components > Header", () => {
 
     render(<Header />);
 
-    expect(CiInfo).toHaveBeenCalledWith(
-      {
-        ci: fixtures.ci,
-      },
-      expect.anything(),
-    );
+    expect(CiInfo).toHaveBeenCalled();
     expect(screen.getByTestId("ci-info")).toBeInTheDocument();
   });
 

package/vitest.config.ts

@@ -1,21 +1,7 @@
 import { createRequire } from "node:module";
-import { platform } from "node:os";
 import { defineConfig } from "vitest/config";
-
-const getOsLabel = () => {
-  switch (platform()) {
-    case "win32":
-      return "Windows";
-    case "darwin":
-      return "macOS";
-    case "linux":
-      return "Linux";
-    default:
-      return platform();
-  }
-};
 import { resolve } from "path";
-import { preact } from "@preact/preset-vite"
+import { preact } from "@preact/preset-vite";
 
 const require = createRequire(import.meta.url);
 
@@ -38,7 +24,7 @@ export default defineConfig({
       "default",
       [
         "allure-vitest/reporter",
-        { resultsDir: "./out/allure-results", globalLabels: [{ name: "module", value: "web-awesome" }, { name: "os", value: getOsLabel() }] },
+        { resultsDir: "./out/allure-results", globalLabels: [{ name: "module", value: "web-awesome" }] },
       ],
     ],
   },