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

package/dist/single/app-51defb8852956a2ff6f1.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+     * Prism: Lightweight, robust, elegant syntax highlighting
+     *
+     * @license MIT <https://opensource.org/licenses/MIT>
+     * @author Lea Verou <https://lea.verou.me>
+     * @namespace
+     * @public
+     */

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.18",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,9 +31,10 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.16",
-    "@allurereport/web-commons": "3.0.0-beta.16",
-    "@allurereport/web-components": "3.0.0-beta.16",
+    "@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",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -51,7 +52,11 @@
     "@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",
@@ -61,9 +66,9 @@
     "@types/prismjs": "^1.26.5",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/runner": "^2.1.9",
-    "@vitest/snapshot": "^2.1.9",
-    "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 +92,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.5.0",
+    "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
@@ -99,10 +105,11 @@
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
-    "vitest": "^2.1.9",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-manifest-plugin": "^5.0.0"
   }
 }

package/src/components/Charts/index.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { ChartType, capitalize } from "@allurereport/web-commons";
+import { ChartType } from "@allurereport/core-api";
+import { type UIChartData, capitalize } from "@allurereport/web-commons";
 import {
+  ComingSoonChartWidget,
   Grid,
   GridItem,
   Loadable,
@@ -12,11 +14,10 @@ import {
 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) {
@@ -50,6 +51,14 @@ const getChartWidgetByType = (
         </Widget>
       );
     }
+    case ChartType.HeatMap:
+    case ChartType.Bar:
+    case ChartType.Funnel:
+    case ChartType.TreeMap: {
+      const title = chartData.title ?? t(`charts.${chartData.type}.title`, { fallback: `${chartData.type} Chart` });
+
+      return <ComingSoonChartWidget title={title} />;
+    }
   }
 };
 

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/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/Filters.tsx

@@ -21,7 +21,7 @@ export const Filters = () => {
 
   const renderFilterItem = (filter: TreeFilters, value: boolean) => {
     return (
-      <TooltipWrapper tooltipText={tooltip(filter)}>
+      <TooltipWrapper data-testid="filter-tooltip" tooltipText={tooltip(filter)}>
         <Menu.Item
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t(filter) })}

package/src/components/ReportBody/index.tsx

@@ -1,10 +1,10 @@
 import { statusesList } from "@allurereport/core-api";
+import { capitalize } from "@allurereport/web-commons";
 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,5 @@
 import { type Statistic, statusesList } from "@allurereport/core-api";
+import { capitalize } from "@allurereport/web-commons";
 import { computed } from "@preact/signals";
 import type { FunctionalComponent } from "preact";
 import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
@@ -6,7 +7,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;

package/src/components/ReportMetadata/styles.scss

@@ -6,7 +6,6 @@
 }
 
 .report-metadata-wrapper {
-  padding: 0 24px;
   align-items: center;
 }
 
@@ -27,7 +26,6 @@
   justify-content: space-between;
   align-items: baseline;
   padding: 16px 0;
-  border-top: 1px solid var(--on-border-primary);
   border-bottom: 1px solid var(--on-border-primary);
   width: 100%;
 }

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

@@ -1,4 +1,5 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import cx from "clsx";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
@@ -6,15 +7,16 @@ import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
 export type TrAttachmentViewProps = {
+  className?: string;
   testResult?: AwesomeTestResult;
 };
 
-export const TrAttachmentView: FunctionalComponent<TrAttachmentViewProps> = ({ testResult }) => {
+export const TrAttachmentView: FunctionalComponent<TrAttachmentViewProps> = ({ testResult, className }) => {
   const { attachments } = testResult ?? {};
-  const { t } = useI18n("empty");
+  const { t } = useI18n("ui");
 
   return (
-    <div className={styles["test-result-attachments-view"]}>
+    <div className={cx(styles["test-result-attachments-view"], className)}>
       {attachments.length ? (
         attachments?.map((attach, key) => (
           <TrAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />

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

@@ -1,7 +1,7 @@
+import { capitalize } from "@allurereport/web-commons";
 import { SvgIcon, Text, 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> = {