@allurereport/web-awesome 3.9.0 → 3.11.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-62171f5f51b5954a787c.js"
+  "main.js": "app-36af07268613f77d3ac5.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -30,11 +30,11 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.9.0",
-    "@allurereport/core-api": "3.9.0",
-    "@allurereport/plugin-api": "3.9.0",
-    "@allurereport/web-commons": "3.9.0",
-    "@allurereport/web-components": "3.9.0",
+    "@allurereport/charts-api": "3.11.0",
+    "@allurereport/core-api": "3.11.0",
+    "@allurereport/plugin-api": "3.11.0",
+    "@allurereport/web-commons": "3.11.0",
+    "@allurereport/web-components": "3.11.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -58,12 +58,12 @@
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20",
     "@types/prismjs": "^1.26.5",
     "@vitest/runner": "^3.2.4",
     "@vitest/snapshot": "^3.2.4",
-    "allure-js-commons": "^3.3.3",
-    "allure-vitest": "^3.3.2",
+    "allure-js-commons": "^3",
+    "allure-vitest": "^3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
@@ -76,25 +76,20 @@
     "jsdom": "^26.1.0",
     "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all2": "^7.0.1",
-    "postcss": "^8.5.6",
-    "rimraf": "^6.0.1",
+    "postcss": "^8.5.10",
+    "rimraf": "^6",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
     "split.js": "^1.6.5",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.14",
-    "typescript": "^5.6.3",
+    "typescript": "^5",
     "vite": "^8.0.9",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.4",
     "webpack-manifest-plugin": "^5.0.0"
-  },
-  "browserslist": [
-    "last 1 version",
-    "> 1%",
-    "IE 11"
-  ]
+  }
 }

package/src/components/BaseLayout/styles.scss

@@ -12,8 +12,10 @@
 .wrapper {
   max-width: 920px;
   width: 100%;
+  display: flex;
   flex-direction: column;
-  margin: auto;
+  margin: 0 auto;
+  min-height: 100%;
 }
 
 .content {

package/src/components/Footer/FooterVersion.tsx

@@ -3,11 +3,13 @@ import { Text } from "@allurereport/web-components";
 import { useState } from "preact/hooks";
 import type { AwesomeReportOptions } from "types";
 
-import { currentLocaleIso } from "@/stores";
+import { useI18n } from "@/stores";
+import { timestampToDate } from "@/utils/time";
 
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {
+  const { t } = useI18n("ui");
   const [createdAt] = useState(() => {
     const reportOptions = getReportOptions<AwesomeReportOptions>();
     if (reportOptions?.createdAt) {
@@ -27,18 +29,11 @@ export const FooterVersion = () => {
     return undefined;
   });
 
-  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  });
+  const formattedCreatedAt = timestampToDate(createdAt as number);
 
   return (
     <Text type="paragraph" size="m" className={styles.version}>
-      {formattedCreatedAt}
+      {t("generated")} {formattedCreatedAt}
       {currentVersion && <span> Ver: {currentVersion}</span>}
     </Text>
   );

package/src/components/Footer/index.tsx

@@ -1,10 +1,13 @@
+import { LanguagePicker } from "@allurereport/web-components";
 import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
 
 import { FooterLogo } from "@/components/Footer/FooterLogo";
 import { FooterVersion } from "@/components/Footer/FooterVersion";
+import { currentLocale, setLocale } from "@/stores/locale";
 
 import * as styles from "@/components/BaseLayout/styles.scss";
+import * as footerStyles from "@/components/Footer/styles.scss";
 
 interface FooterProps {
   className?: ClassValue;
@@ -13,7 +16,10 @@ export const Footer = ({ className }: FooterProps) => {
   return (
     <div className={clsx(styles.below, className)}>
       <FooterLogo />
-      <FooterVersion />
+      <div className={footerStyles["footer-controls"]}>
+        <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
+        <FooterVersion />
+      </div>
     </div>
   );
 };

package/src/components/Footer/styles.scss

@@ -12,3 +12,9 @@
 .version {
   color: var(--color-text-muted);
 }
+
+.footer-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

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

@@ -13,7 +13,7 @@ interface CiInfoProps {
 }
 
 interface CiIconProps {
-  type: CiDescriptor["type"];
+  type?: CiDescriptor["type"];
 }
 
 export const CiIcon = ({ type }: CiIconProps) => {
@@ -47,24 +47,20 @@ export const CiIcon = ({ type }: CiIconProps) => {
 export const CiInfo = ({ className }: CiInfoProps) => {
   const { ci } = getReportOptions<AwesomeReportOptions>();
 
-  if (!ci) {
-    return null;
-  }
+  const ciLink = ci ? ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl : undefined;
+  const ciLabel = getCiLabel(ci, ciLink);
+  const safeLink = sanitizeExternalUrl(ciLink);
 
-  const link = ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl;
-  const safeLink = sanitizeExternalUrl(link);
-  const label = ci.pullRequestName || ci.jobRunName || ci.jobName || link;
-
-  if (!link) {
+  if (!ciLabel) {
     return null;
   }
 
   if (!safeLink) {
     return (
       <span className={clsx(styles["ci-info"], className)}>
-        <CiIcon type={ci.type} />
+        <CiIcon type={ci?.type} />
         <Text type="paragraph" size="m" bold>
-          {label}
+          {ciLabel}
         </Text>
       </span>
     );
@@ -72,10 +68,18 @@ export const CiInfo = ({ className }: CiInfoProps) => {
 
   return (
     <a className={clsx(styles["ci-info"], className)} href={safeLink} target="_blank" rel="noopener noreferrer">
-      <CiIcon type={ci.type} />
+      <CiIcon type={ci?.type} />
       <Text type="paragraph" size="m" bold>
-        {label}
+        {ciLabel}
       </Text>
     </a>
   );
 };
+
+const getCiLabel = (ci?: CiDescriptor, link?: string) => {
+  if (!ci) {
+    return undefined;
+  }
+
+  return ci.pullRequestName || ci.jobRunName || ci.jobName || link;
+};

package/src/components/HeaderControls/index.tsx

@@ -1,10 +1,9 @@
 import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
-import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { ThemeButton } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 
 import { EnvironmentPicker } from "@/components/EnvironmentPicker";
 import ToggleLayout from "@/components/ToggleLayout";
-import { currentLocale, setLocale } from "@/stores/locale";
 
 interface HeaderControlsProps {
   className?: string;
@@ -16,7 +15,6 @@ export const HeaderControls = ({ className }: HeaderControlsProps) => {
   return (
     <div className={className}>
       <EnvironmentPicker />
-      <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
       <ToggleLayout />
       <ThemeButton theme={selectedTheme.value} toggleTheme={toggleUserTheme} />
     </div>

package/src/components/KeyboardShortcuts/styles.scss

@@ -22,8 +22,8 @@
   overflow: auto;
   padding: 12px 16px;
   border-radius: 8px;
-  border: 1px solid var(--on-border-muted);
-  background: var(--bg-base-primary);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-raised);
   box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
 }
 
@@ -43,7 +43,7 @@
 
 .groupTitle {
   margin-bottom: 6px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .item {
@@ -58,8 +58,8 @@
   flex-shrink: 0;
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
-  color: var(--on-text-secondary);
-  background: var(--bg-base-secondary);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-neutral);
   border-radius: 4px;
   padding: 2px 6px;
 }

package/src/components/MainReport/index.tsx

@@ -13,7 +13,7 @@ import { reportStatsStore, useI18n } from "@/stores";
 import { categoriesStore } from "@/stores/categories";
 import { currentEnvironment } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
-import { activePane, focusTreePane } from "@/stores/keyboard";
+import { focusTreePane } from "@/stores/keyboard";
 import { isSplitMode } from "@/stores/layout";
 import { qualityGateStore } from "@/stores/qualityGate";
 import {
@@ -129,15 +129,9 @@ const MainReport = () => {
     return null;
   };
 
-  const treePaneActive = isSplitMode.value && activePane.value === "tree";
-
   return (
     <div
-      className={clsx(
-        styles.content,
-        isSplitMode.value && styles["scroll-inside"],
-        treePaneActive && styles["pane-active"],
-      )}
+      className={clsx(styles.content, isSplitMode.value && styles["scroll-inside"])}
       onMouseDown={() => focusTreePane()}
     >
       <div className={styles["main-report-header"]}>
@@ -146,7 +140,7 @@ const MainReport = () => {
       <div className={styles["main-report-tabs"]}>
         <NavTabs initialTab={initialTab}>
           <RootTabRouteSync />
-          <div className={styles["main-report-tabs-layout"]}>
+          <div>
             <div className={styles["main-report-tabs-nav"]}>
               <NavTabsList>
                 <Loadable

package/src/components/MainReport/styles.scss

@@ -6,20 +6,13 @@
   background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
+  flex: 1 1 auto;
 }
 
 .scroll-inside {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-  min-height: 0;
   border-radius: 0;
-  @include paneActive.split-pane-indicator;
-
-  &.pane-active {
-    @include paneActive.split-pane-indicator-active;
-  }
 }
 
 .main-report-header {
@@ -27,20 +20,7 @@
 }
 
 .main-report-tabs {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
   padding: 0 24px;
-  overflow: hidden;
-}
-
-.main-report-tabs-layout {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
 }
 
 .main-report-tabs-nav {
@@ -48,10 +28,5 @@
 }
 
 .main-report-tabs-content {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
   border-top: 1px solid var(--color-border-default);
 }

package/src/components/Metadata/index.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonLink, Menu, Text, allureIcons } from "@allurereport/web-components";
+import { sanitizeExternalUrl } from "@allurereport/core-api";
+import { Button, ButtonLink, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -23,8 +24,8 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
       style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
       data-testid={"metadata-list"}
     >
-      {envInfo?.map(({ name, values, value }) => (
-        <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
+      {envInfo?.map(({ name, values, value, url }, index) => (
+        <MetadataKeyValue key={`${name}-${index}`} size={size} title={name} value={value} values={values} url={url} />
       ))}
     </div>
   );
@@ -160,12 +161,31 @@ const MetaDataOwnerLabel: FunctionalComponent<{
 const MetaDataKeyLabel: FunctionalComponent<{
   name: string;
   size?: "s" | "m";
+  url?: string;
   value: string;
-}> = ({ name, size = "s", value }) => {
+}> = ({ name, size = "s", url, value }) => {
   if (name === "owner") {
     return <MetaDataOwnerLabel value={value} size={size} />;
   }
 
+  const safeUrl = sanitizeExternalUrl(url);
+
+  if (safeUrl) {
+    return (
+      <a
+        className={clsx(styles["report-metadata-keyvalue-wrapper"], styles["report-metadata-keyvalue-link"])}
+        href={safeUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Text type={"ui"} size={size} bold className={styles["report-metadata-keyvalue-value"]}>
+          {value}
+        </Text>
+        <SvgIcon id={allureIcons.lineGeneralLinkExternal} size="s" />
+      </a>
+    );
+  }
+
   return (
     <Menu
       size="xl"
@@ -186,10 +206,11 @@ const MetaDataKeyLabel: FunctionalComponent<{
 
 const MetadataKeyValue: FunctionalComponent<{
   title: string;
+  url?: string;
   value?: string;
   values?: string[];
   size?: "s" | "m";
-}> = ({ title, value, values, size = "m" }) => {
+}> = ({ title, url, value, values, size = "m" }) => {
   return (
     <div className={styles["report-metadata-keyvalue"]} data-testid={"metadata-item"}>
       <Text
@@ -208,7 +229,7 @@ const MetadataKeyValue: FunctionalComponent<{
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value ?? ""} name={title} />
+          <MetaDataKeyLabel value={value ?? ""} name={title} url={url} />
         </div>
       )}
     </div>

package/src/components/Metadata/styles.scss

@@ -85,6 +85,18 @@
   line-height: 16px;
 }
 
+.report-metadata-keyvalue-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .report-metadata-keyvalue-value {
   width: max-content;
   height: max-content;

package/src/components/ReportBody/index.tsx

@@ -1,10 +1,8 @@
 import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
-import clsx from "clsx";
 
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
-import { isSplitMode } from "@/stores/layout";
 import { useI18n } from "@/stores/locale";
 import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
 
@@ -22,7 +20,7 @@ const Header = () => {
   const { t } = useI18n("statuses");
 
   return (
-    <header className={styles.header}>
+    <header className={styles.header} data-tree-sticky-header>
       <HeaderActions />
       <div className={styles.headerRow}>
         <ReportTabsList>
@@ -64,24 +62,17 @@ const Header = () => {
 };
 
 const Body = () => {
-  const split = isSplitMode.value;
-
   return (
-    <div
-      className={clsx(styles.body, split && styles["body-split"])}
-      {...(split ? { "data-tree-scroll-container": true } : {})}
-    >
+    <div className={styles.body}>
       <TreeList />
     </div>
   );
 };
 
 export const ReportBody = () => {
-  const split = isSplitMode.value;
-
   return (
     <ReportContentProvider>
-      <section className={clsx(split && styles.split)}>
+      <section>
         <Header />
         <Body />
       </section>

package/src/components/ReportBody/styles.scss

@@ -1,11 +1,3 @@
-.split {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
 .header {
   padding: 24px 0 0;
   display: flex;
@@ -18,19 +10,6 @@
   z-index: 10;
 }
 
-.split .header {
-  position: static;
-  z-index: auto;
-  flex-shrink: 0;
-}
-
-.split .body-split {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  scrollbar-width: thin;
-}
-
 .headerRow {
   display: flex;
   flex-direction: row;

package/src/components/ReportHeader/index.tsx

@@ -1,3 +1,4 @@
+import { formatDuration } from "@allurereport/core-api";
 import { getReportOptions } from "@allurereport/web-commons";
 import { Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
 import type { AwesomeReportOptions } from "types";
@@ -5,22 +6,28 @@ import type { AwesomeReportOptions } from "types";
 import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
 import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { TrStatus } from "@/components/TestResult/TrStatus";
-import { currentLocaleIso, useI18n } from "@/stores";
+import { useI18n } from "@/stores";
 import { globalsStore } from "@/stores/globals";
+import { timestampToDate } from "@/utils/time";
 
 import * as styles from "./styles.scss";
 
+const reportDateOptions: Intl.DateTimeFormatOptions = {
+  month: "long",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+};
+
 export const ReportHeader = () => {
-  const { reportName, createdAt } = getReportOptions<AwesomeReportOptions>() ?? {};
+  const { reportName, createdAt, runSummary } = getReportOptions<AwesomeReportOptions>() ?? {};
   const { t } = useI18n("ui");
-  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  });
+  const formattedCreatedAt = timestampToDate(createdAt as number, reportDateOptions);
+  const formattedReportTime = runSummary
+    ? `${timestampToDate(runSummary.start, reportDateOptions)} (${formatDuration(runSummary.duration)})`
+    : formattedCreatedAt;
 
   return (
     <div className={styles["report-header"]}>
@@ -41,14 +48,19 @@ export const ReportHeader = () => {
                 </div>
                 <Text type="paragraph" size="m" className={styles["report-date"]} data-testid="report-data">
                   {code === undefined
-                    ? formattedCreatedAt
+                    ? formattedReportTime
                     : exitCode.actual !== undefined
                       ? t("finishedAtBoth", {
-                          formattedCreatedAt,
+                          // Keep the existing i18n parameter name; the value can now be either a timestamp or run interval.
+                          formattedCreatedAt: formattedReportTime,
                           actual: exitCode.actual,
                           original: exitCode.original,
                         })
-                      : t("finishedAtOriginal", { formattedCreatedAt, original: exitCode.original })}
+                      : t("finishedAtOriginal", {
+                          // Keep the existing i18n parameter name; the value can now be either a timestamp or run interval.
+                          formattedCreatedAt: formattedReportTime,
+                          original: exitCode.original,
+                        })}
                 </Text>
               </div>
             );