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

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

@@ -6,11 +6,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-51defb8852956a2ff6f1.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.17",
+  "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.17",
-    "@allurereport/web-commons": "3.0.0-beta.17",
-    "@allurereport/web-components": "3.0.0-beta.17",
+    "@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",

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/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,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> = {

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

@@ -1,10 +1,9 @@
 import { type HistoryTestResult } from "@allurereport/core-api";
-import { getReportOptions } from "@allurereport/web-commons";
+import { capitalize, 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";
 import { useI18n } from "@/stores";
-import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 

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

@@ -1,7 +1,7 @@
+import { capitalize } from "@allurereport/web-commons";
 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/TrStatus/index.tsx

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

package/src/components/TestResult/TrSteps/TrStepInfo.tsx

@@ -50,18 +50,18 @@ export const TrStepInfo = (props: { item: DefaultTestStepResult }) => {
   const stepLength = item.steps?.length;
   const attachmentLength = item.steps?.filter((step) => step.type === "attachment")?.length;
 
-  const failedStepsInTree = countErrorStatuses(item);
+  const failedStepsInTree = countErrorStatuses(item) || {};
 
   const FailedSteps = () => (
-    <div>
+    <div className={styles["failed-steps"]}>
       {Object.entries(failedStepsInTree).map(([status, count], index) => (
         <div className={styles["item-status"]} key={index}>
           <SvgIcon
-            size="m"
+            size="s"
             id={icons[status as TestStatus]}
             className={clsx(styles["item-status-icon"], styles[`status-${status}`])}
           />
-          {count && <span>{count}</span>}
+          {count && <Text size={"s"}>{count}</Text>}
         </div>
       ))}
     </div>

package/src/components/TestResult/TrSteps/styles.scss

@@ -92,7 +92,7 @@
   align-items: center;
   gap: 4px;
   color: var(--on-icon-secondary);
-  min-width: 52px;
+  min-width: 56px;
   justify-content: flex-end;
 }
 
@@ -253,3 +253,12 @@
     color: var(--bg-support-skat);
   }
 }
+
+.failed-steps {
+  display: flex;
+  gap: 8px;
+}
+
+:global(.code-toolbar .toolbar) {
+  display: none;
+}