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

package/dist/single/{app-800f7e75bb52ecb2ae21.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
      *
@@ -6,11 +8,3 @@
      * @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-800f7e75bb52ecb2ae21.js"
+  "main.js": "app-af34e3cec116175b6d9a.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.19",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,9 +31,10 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.17",
-    "@allurereport/web-commons": "3.0.0-beta.17",
-    "@allurereport/web-components": "3.0.0-beta.17",
+    "@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",
@@ -68,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,29 +1,32 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { ChartType, 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";
 import { useEffect } from "preact/hooks";
 import { chartsStore, fetchChartsData } from "@/stores/chart";
 import { useI18n } from "@/stores/locale";
-import type { ChartData } from "@/utils/charts";
 import * as styles from "./styles.scss";
 
 const getChartWidgetByType = (
-  chartData: ChartData,
+  chartData: UIChartData,
   { t, empty }: Record<string, (key: string, options?: any) => string>,
 ) => {
   switch (chartData.type) {
     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
@@ -33,7 +36,7 @@ const getChartWidgetByType = (
           slices={chartData.slices}
           min={chartData.min}
           max={chartData.max}
-          translations={{ "no-results": translations }}
+          translations={{ "no-results": empty("no-results") }}
         />
       );
     }
@@ -50,6 +53,51 @@ const getChartWidgetByType = (
         </Widget>
       );
     }
+    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/MainReport/index.tsx

@@ -1,17 +1,80 @@
+import { Counter, Loadable } from "@allurereport/web-components";
 import clsx from "clsx";
+import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
 import { ReportBody } from "@/components/ReportBody";
+import { ReportGlobalAttachments } from "@/components/ReportGlobalAttachments";
+import { ReportGlobalErrors } from "@/components/ReportGlobalErrors";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
+import { reportStatsStore } from "@/stores";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
 import { isSplitMode } from "@/stores/layout";
 import * as styles from "./styles.scss";
 
+enum ReportRootTab {
+  Results = "results",
+  GlobalAttachments = "globalAttachments",
+  GlobalErrors = "globalErrors",
+}
+
+const viewsByTab = {
+  [ReportRootTab.Results]: () => (
+    <>
+      <ReportMetadata />
+      <ReportBody />
+    </>
+  ),
+  [ReportRootTab.GlobalAttachments]: () => <ReportGlobalAttachments />,
+  [ReportRootTab.GlobalErrors]: () => <ReportGlobalErrors />,
+};
+
+const MainReportContent = () => {
+  const { currentTab } = useNavTabsContext();
+  const tab = (currentTab as ReportRootTab) || ReportRootTab.Results;
+  const Content = viewsByTab[tab];
+
+  return <Content />;
+};
+
 const MainReport = () => {
+  const { t } = useI18n("tabs");
+
   return (
     <>
       <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
         <ReportHeader />
-        <ReportMetadata />
-        <ReportBody />
+        <div className={styles["main-report-tabs"]}>
+          <NavTabs initialTab={ReportRootTab.Results}>
+            <NavTabsList>
+              <Loadable
+                source={reportStatsStore}
+                renderData={(stats) => (
+                  <NavTab id={ReportRootTab.Results}>
+                    {t("results")} <Counter count={stats?.total ?? 0} />
+                  </NavTab>
+                )}
+              />
+              <Loadable
+                source={globalsStore}
+                renderData={({ attachments = [], errors = [] }) => (
+                  <>
+                    <NavTab id={ReportRootTab.GlobalAttachments}>
+                      {t("globalAttachments")} <Counter count={attachments.length} />
+                    </NavTab>
+                    <NavTab id={ReportRootTab.GlobalErrors}>
+                      {t("globalErrors")}{" "}
+                      <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
+                    </NavTab>
+                  </>
+                )}
+              />
+            </NavTabsList>
+            <div className={styles["main-report-tabs-content"]}>
+              <MainReportContent />
+            </div>
+          </NavTabs>
+        </div>
       </div>
     </>
   );

package/src/components/MainReport/styles.scss

@@ -10,3 +10,11 @@
   height: 100%;
   border-radius: 0;
 }
+
+.main-report-tabs {
+  padding: 0 24px;
+}
+
+.main-report-tabs-content {
+  border-top: 1px solid var(--on-border-primary);
+}

package/src/components/NavTabs/index.tsx

@@ -0,0 +1,70 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+type NavTabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (id: string) => void;
+};
+
+const NavTabsContext = createContext<NavTabsContextT | null>(null);
+
+export const useNavTabsContext = () => {
+  const context = useContext(NavTabsContext);
+
+  if (!context) {
+    throw new Error("NavTabs components must be used within a NavTabs component");
+  }
+
+  return context;
+};
+
+export const NavTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return <NavTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</NavTabsContext.Provider>;
+};
+
+export const NavTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <NavTabsProvider {...props} />;
+};
+
+export const NavTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const NavTab = (props: {
+  "id": string;
+  "children": ComponentChildren;
+  "onClick"?: () => void;
+  "data-testid"?: string;
+  "isCurrentTab"?: boolean;
+}) => {
+  const { currentTab, setCurrentTab } = useNavTabsContext();
+  const { id, children, onClick, "data-testid": dataTestId, "isCurrentTab": overrideIsCurrentTab } = props;
+  const isCurrentTab = overrideIsCurrentTab !== undefined ? overrideIsCurrentTab : currentTab === id;
+  const handleTabClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (isCurrentTab) {
+      return;
+    } else {
+      setCurrentTab(id);
+    }
+  };
+
+  return (
+    <button
+      className={styles.tab}
+      onClick={handleTabClick}
+      data-testid={dataTestId || `nav-tab-${id}`}
+      aria-current={isCurrentTab ? true : undefined}
+    >
+      <Text type="paragraph" size="m">
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/ReportBody/index.tsx

@@ -1,10 +1,9 @@
-import { statusesList } from "@allurereport/core-api";
+import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import { setTreeStatus, treeFiltersStore } from "@/stores/tree";
-import { capitalize } from "@/utils/capitalize";
 import { Tab, Tabs, TabsList, useTabsContext } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";

package/src/components/ReportBody/styles.scss

@@ -1,5 +1,5 @@
 .header {
-  padding: 24px 24px 0;
+  padding: 24px 0 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -22,7 +22,7 @@
 }
 
 .body {
-  padding: 16px 24px;
+  padding: 16px 0;
   min-height: 320px;
 }
 

package/src/components/ReportGlobalAttachments/index.tsx

@@ -0,0 +1,34 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
+import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
+import { AwesomeTestResult } from "../../../types";
+import * as styles from "./styles.scss";
+
+export const ReportGlobalAttachments = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={globalsStore}
+      renderData={({ attachments }) => {
+        if (!attachments.length) {
+          return <div className={styles["report-global-attachments-empty"]}>{t("no-attachments-results")}</div>;
+        }
+
+        const attachmentSteps: AttachmentTestStepResult[] = attachments.map((attachment: any) => ({
+          link: attachment,
+          type: "attachment",
+        }));
+
+        return (
+          <TrAttachmentView
+            className={styles["report-global-attachments"]}
+            testResult={{ attachments: attachmentSteps } as AwesomeTestResult}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/components/ReportGlobalAttachments/styles.scss

@@ -0,0 +1,11 @@
+.report-global-attachments {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.report-global-attachments-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/ReportGlobalErrors/index.tsx

@@ -0,0 +1,30 @@
+import { Loadable } from "@allurereport/web-components";
+import { TrError } from "@/components/TestResult/TrError";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
+import * as styles from "./styles.scss";
+
+export const ReportGlobalErrors = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={globalsStore}
+      renderData={({ errors }) => {
+        if (!errors.length) {
+          return <div className={styles["report-global-errors-empty"]}>{t("no-global-errors-results")}</div>;
+        }
+
+        return (
+          <ul className={styles["report-global-errors"]}>
+            {errors.map((error, i) => (
+              <li key={i} style={{ marginBottom: "8px" }}>
+                <TrError {...error} />
+              </li>
+            ))}
+          </ul>
+        );
+      }}
+    />
+  );
+};

package/src/components/ReportGlobalErrors/styles.scss

@@ -0,0 +1,12 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-global-errors {
+  padding: 20px 0;
+}
+
+.report-global-errors-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/ReportHeader/index.tsx

@@ -1,13 +1,16 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { Heading, Text } from "@allurereport/web-components";
+import { Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
 import type { AwesomeReportOptions } from "types";
 import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
 import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
-import { currentLocaleIso } from "@/stores";
+import { TrStatus } from "@/components/TestResult/TrStatus";
+import { currentLocaleIso, useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {
   const { reportName, createdAt } = getReportOptions<AwesomeReportOptions>() ?? {};
+  const { t } = useI18n("ui");
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "long",
     day: "numeric",
@@ -21,14 +24,29 @@ export const ReportHeader = () => {
     <div className={styles["report-header"]}>
       <div className={styles["report-wrapper"]}>
         <ReportHeaderLogo />
-        <div className={styles["report-wrapper-text"]}>
-          <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]} data-testid="report-title">
-            {reportName}
-          </Heading>
-          <Text type="paragraph" size="m" className={styles["report-date"]}>
-            {formattedCreatedAt}
-          </Text>
-        </div>
+        <Loadable
+          source={globalsStore}
+          renderData={({ exitCode }) => {
+            const code = exitCode?.actual ?? exitCode.original;
+            const status = code === 0 ? "passed" : "failed";
+
+            return (
+              <div className={styles["report-wrapper-text"]}>
+                <div className={styles["report-header-title"]}>
+                  <TrStatus status={status} />
+                  <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]} data-testid="report-title">
+                    {reportName}
+                  </Heading>
+                </div>
+                <Text type="paragraph" size="m" className={styles["report-date"]} data-testid="report-data">
+                  {exitCode.actual !== undefined
+                    ? t("finishedAtBoth", { formattedCreatedAt, actual: exitCode.actual, original: exitCode.original })
+                    : t("finishedAtOriginal", { formattedCreatedAt, original: exitCode.original })}
+                </Text>
+              </div>
+            );
+          }}
+        />
       </div>
       <ReportHeaderPie />
     </div>

package/src/components/ReportHeader/styles.scss

@@ -2,7 +2,7 @@
   display: flex;
   column-gap: 12px;
   justify-content: space-between;
-  padding: 24px;
+  padding: 24px 24px 0;
   align-items: flex-start;
   background: var(--bg-base-primary);
   border-radius: 8px;
@@ -49,3 +49,9 @@
 .report-header-pie-chart {
   width: 88px;
 }
+
+.report-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0 4px;
+}

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 { computed } from "@preact/signals";
 import type { FunctionalComponent } from "preact";
 import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
@@ -6,7 +6,6 @@ import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/ReportMetadata/styles.scss";
 import { useI18n } from "@/stores/locale";
-import { capitalize } from "@/utils/capitalize";
 
 export interface MetadataSummaryProps {
   stats: Statistic;