@allurereport/web-awesome 3.8.2 → 3.10.0

package/src/components/ReportFilters/styles.scss

@@ -45,7 +45,7 @@
 }
 
 .description {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .itemContent {

package/src/components/ReportGlobalAttachments/styles.scss

@@ -15,7 +15,7 @@
   &:not(:last-child) {
     padding-bottom: 8px;
     margin-bottom: 14px;
-    border-bottom: 1px solid var(--on-border-muted);
+    border-bottom: 1px solid var(--color-border-subtle);
   }
 }
 

package/src/components/ReportGlobalErrors/styles.scss

@@ -16,7 +16,7 @@
   &:not(:last-child) {
     padding-bottom: 8px;
     margin-bottom: 14px;
-    border-bottom: 1px solid var(--on-border-muted);
+    border-bottom: 1px solid var(--color-border-subtle);
   }
 }
 

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>
             );

package/src/components/ReportHeader/styles.scss

@@ -4,7 +4,7 @@
   justify-content: space-between;
   padding: 24px 24px 0;
   align-items: flex-start;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   border-radius: 8px;
 }
 
@@ -20,7 +20,7 @@
 }
 
 .report-date {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   display: block;
 }
 

package/src/components/ReportMetadata/index.tsx

@@ -1,7 +1,9 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
 import { Button, Loadable } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
+import type { AwesomeExecutorInfo, AwesomeReportOptions } from "types";
 
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
@@ -9,6 +11,7 @@ import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
 import { reportStatsStore, statsByEnvStore, useI18n } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { envInfoStore } from "@/stores/envInfo";
+import { getReportEnvSectionId } from "@/stores/reportEnvSections";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 import { fetchVariables, variables } from "@/stores/variables";
 
@@ -18,6 +21,7 @@ const REPORT_VISIBLE_LIMIT = 8;
 
 export interface MetadataItem extends EnvironmentItem {
   value?: string;
+  url?: string;
 }
 
 // TODO: check, where do we use the component and refactor it up to our needs
@@ -34,12 +38,11 @@ export type MetadataVariablesProps = {
 };
 
 const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo = [] }) => {
-  const envKey = currentEnvironment.value ?? "default";
-  const sectionId = `report-${envKey}-metadata`;
-  const showAllId = `report-${envKey}-metadata-showAll`;
+  const sectionId = getReportEnvSectionId("metadata");
+  const showAllId = `${sectionId}-showAll`;
   const isOpened = !collapsedTrees.value.has(sectionId);
   const showAll = collapsedTrees.value.has(showAllId);
-  const list = envInfo.map((env) => ({ ...env, value: env.values.join(", ") }));
+  const list = envInfo.map((env) => ({ ...env, value: env.value ?? env.values.join(", ") }));
   const totalCount = list.length;
   const visibleList = totalCount <= REPORT_VISIBLE_LIMIT ? list : showAll ? list : list.slice(0, REPORT_VISIBLE_LIMIT);
   const { t } = useI18n("ui");
@@ -71,9 +74,8 @@ const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo = [] }) => {
 
 const MetadataVariables: FunctionalComponent<MetadataVariablesProps> = (props) => {
   const { t } = useI18n("ui");
-  const envKey = currentEnvironment.value ?? "default";
-  const sectionId = `report-${envKey}-variables`;
-  const showAllId = `report-${envKey}-variables-showAll`;
+  const sectionId = getReportEnvSectionId("variables");
+  const showAllId = `${sectionId}-showAll`;
   const isOpened = !collapsedTrees.value.has(sectionId);
   const showAll = collapsedTrees.value.has(showAllId);
   const fullList = Object.entries(props.variables).map(([key, value]) => ({
@@ -110,27 +112,54 @@ const MetadataVariables: FunctionalComponent<MetadataVariablesProps> = (props) =
   );
 };
 
+const getExecutorLabel = (executor?: AwesomeExecutorInfo) => {
+  if (!executor) return undefined;
+  if (executor.name && executor.buildName) return `${executor.name} · ${executor.buildName}`;
+
+  return (
+    executor.buildName ||
+    executor.reportName ||
+    executor.name ||
+    executor.buildUrl ||
+    executor.reportUrl ||
+    executor.url
+  );
+};
+
+const getExecutorMetadata = (executor?: AwesomeExecutorInfo): MetadataItem[] => {
+  const label = getExecutorLabel(executor);
+
+  return label
+    ? [{ name: "executor", values: [], value: label, url: executor?.buildUrl || executor?.reportUrl || executor?.url }]
+    : [];
+};
+
 export const ReportMetadata = () => {
-  const stats = currentEnvironment.value
-    ? statsByEnvStore.value.data[currentEnvironment.value]
-    : reportStatsStore.value.data;
+  const envId = currentEnvironment.value;
+  const { executor } = getReportOptions<AwesomeReportOptions>();
+  const executorMetadata = getExecutorMetadata(executor);
+  const stats = envId ? statsByEnvStore.value.data[envId] : reportStatsStore.value.data;
 
   useEffect(() => {
-    fetchVariables(currentEnvironment.value);
-  }, [currentEnvironment.value]);
+    fetchVariables(envId);
+  }, [envId]);
 
   return (
     <div className={styles["report-metadata-wrapper"]}>
       {stats && <MetadataSummary stats={stats} />}
       <Loadable
         source={variables}
-        transformData={(data) => data?.[currentEnvironment.value ?? "default"] ?? {}}
+        transformData={(data) => data?.[envId ?? "default"] ?? {}}
         renderData={(data) => !!Object.keys(data).length && <MetadataVariables variables={data} />}
       />
       <Loadable
         source={envInfoStore}
-        renderError={() => null}
-        renderData={(data) => Boolean(data?.length) && <Metadata envInfo={data} />}
+        renderError={() => Boolean(executorMetadata.length) && <Metadata envInfo={executorMetadata} />}
+        renderData={(data) => {
+          const metadata = [...executorMetadata, ...(data ?? [])];
+
+          return Boolean(metadata.length) && <Metadata envInfo={metadata} />;
+        }}
       />
     </div>
   );

package/src/components/ReportMetadata/styles.scss

@@ -10,7 +10,7 @@
 }
 
 .report-metadata-separator {
-  border-left: 1px solid var(--on-border-primary);
+  border-left: 1px solid var(--color-border-default);
   height: 24px;
   margin: 11px 0;
 }
@@ -26,7 +26,7 @@
   justify-content: space-between;
   align-items: baseline;
   padding: 16px 0;
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
   width: 100%;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .metadata-item-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   margin-bottom: 6px;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .report-metadata {
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .report-metadata-keyvalue {
@@ -80,7 +80,7 @@
   width: 4px;
   height: 12px;
   border-radius: 2px;
-  background: var(--on-text-secondary);
+  background: var(--color-text-secondary);
   margin-right: 8px;
   align-self: center;
   @include status-bg-and-text();
@@ -93,5 +93,5 @@
 
 .metadata-icon {
   margin-right: 8px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }

package/src/components/ReportQualityGateResults/styles.scss

@@ -33,7 +33,7 @@
 .report-quality-gate-result-icon {
   flex: 0 0 auto;
   margin-top: 3px;
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-chart);
 }
 
 .report-quality-gate-result-content {
@@ -52,6 +52,6 @@
   &:not(:last-child) {
     padding-bottom: 8px;
     margin-bottom: 14px;
-    border-bottom: 1px solid var(--on-border-muted);
+    border-bottom: 1px solid var(--color-border-subtle);
   }
 }

package/src/components/ReportSearch/index.tsx

@@ -12,7 +12,7 @@ const handleQuerySearch = (value: string) => {
   setTreeQueryFilter(value);
 };
 
-const QuerySearch = () => {
+export const ReportSearch = () => {
   const { t } = useI18n("search");
 
   return (
@@ -24,7 +24,3 @@ const QuerySearch = () => {
     />
   );
 };
-
-export const ReportSearch = () => {
-  return <QuerySearch />;
-};

package/src/components/ReportTabs/styles.scss

@@ -1,5 +1,5 @@
 .tabsList {
-  background-color: var(--bg-base-secondary);
+  background-color: var(--color-bg-secondary);
   padding: 2px;
   border-radius: 8px;
   display: flex;
@@ -9,8 +9,8 @@
 }
 
 .tab {
-  background-color: var(--bg-control-flat);
-  color: var(--on-text-primary);
+  background-color: var(--color-control-bg-ghost);
+  color: var(--color-text-primary);
   border-radius: 6px;
   border: 1px solid transparent;
   padding: 2px 8px;
@@ -28,17 +28,17 @@
     border-color var(--color-change-transition-duration);
 
   &[aria-current] {
-    background-color: var(--bg-base-modal);
-    border-color: var(--on-border-primary);
+    background-color: var(--color-bg-raised);
+    border-color: var(--color-border-default);
     cursor: default;
   }
 
   &:hover:not([aria-current]) {
-    background-color: var(--bg-control-flat-medium);
+    background-color: var(--color-control-bg-ghost-hover);
   }
 
   &:active:not([aria-current]) {
-    background-color: var(--bg-control-flat-heavy);
+    background-color: var(--color-control-bg-ghost-active);
     transform: scale(0.94);
   }
 
@@ -47,10 +47,10 @@
   }
 
   &:focus-visible {
-    outline: 1px solid var(--ad-other-focus);
+    outline: 1px solid var(--color-focus-ring);
 
     &:not([aria-current]) {
-      background-color: var(--bg-control-flat-medium);
+      background-color: var(--color-control-bg-ghost-hover);
     }
   }
 }

package/src/components/SectionSwitcher/index.tsx

@@ -1,19 +1,96 @@
-import type { VNode } from "preact";
+import { PageLoader } from "@allurereport/web-components";
+import type { ComponentType } from "preact";
+import { useEffect, useState } from "preact/hooks";
 
-import { Charts } from "@/components/Charts";
 import { Report } from "@/components/Report";
 import { currentSection } from "@/stores/sections";
 
-import { Timeline } from "../Timeline";
-
 import * as styles from "./styles.scss";
 
+type SectionName = "report" | "charts" | "timeline";
+
+const sectionLoaders: Record<Exclude<SectionName, "report">, () => Promise<ComponentType>> = {
+  charts: () => import("@/components/Charts").then((module) => module.Charts),
+  timeline: () => import("@/components/Timeline").then((module) => module.Timeline),
+};
+
+const sectionCache = new Map<string, ComponentType>();
+
+type LoadedSection = {
+  section: SectionName;
+  Component: ComponentType;
+};
+
+const LazySection = ({ section }: { section: SectionName }) => {
+  const cached = sectionCache.get(section);
+  const [loaded, setLoaded] = useState<LoadedSection | null>(cached ? { section, Component: cached } : null);
+
+  useEffect(() => {
+    if (section === "report") {
+      setLoaded({ section, Component: Report });
+      return;
+    }
+
+    const loader = sectionLoaders[section];
+    let mounted = true;
+
+    if (!loader) {
+      setLoaded(null);
+      return;
+    }
+
+    const cachedComponent = sectionCache.get(section);
+    if (cachedComponent) {
+      if (mounted) {
+        setLoaded({ section, Component: cachedComponent });
+      }
+      return;
+    }
+
+    setLoaded(null);
+
+    loader()
+      .then((LoadedComponent) => {
+        if (mounted) {
+          sectionCache.set(section, LoadedComponent);
+          setLoaded({ section, Component: LoadedComponent });
+        }
+      })
+      .catch((err) => {
+        console.error(`Failed to load section "${section}":`, err);
+        if (mounted) {
+          setLoaded({ section, Component: Report });
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [section]);
+
+  if (section === "report" || !sectionLoaders[section]) {
+    return <Report />;
+  }
+
+  if (!loaded || loaded.section !== section) {
+    return <PageLoader />;
+  }
+
+  const { Component } = loaded;
+
+  return <Component />;
+};
+
+const VALID_SECTIONS: SectionName[] = ["report", "charts", "timeline"];
+
 export const SectionSwitcher = () => {
-  const sectionMap: Record<string, VNode> = {
-    report: <Report />,
-    charts: <Charts />,
-    timeline: <Timeline />,
-  };
+  const section = VALID_SECTIONS.includes(currentSection.value as SectionName)
+    ? (currentSection.value as SectionName)
+    : "report";
 
-  return <div className={styles.layout}>{sectionMap[currentSection.value] || sectionMap.report}</div>;
+  return (
+    <div className={styles.layout}>
+      <LazySection section={section} />
+    </div>
+  );
 };

package/src/components/SideBySide/index.tsx

@@ -2,6 +2,8 @@ import type { JSX } from "preact";
 import { useEffect, useMemo, useRef } from "preact/hooks";
 import Split from "split.js";
 
+import { activePane, focusTestResultPane, focusTreePane } from "@/stores/keyboard";
+
 import * as styles from "./styles.scss";
 
 const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element }) => {
@@ -42,10 +44,26 @@ const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element })
     };
   }, []);
 
+  const pane = activePane.value;
+
   return (
     <div class={styles.side} ref={containerRef}>
-      <div class={styles["side-left"]}>{leftContent}</div>
-      <div class={styles["side-right"]}>{rightContent}</div>
+      <div
+        class={styles["side-left"]}
+        data-pane="tree"
+        data-pane-active={pane === "tree" ? "true" : undefined}
+        onMouseDown={() => focusTreePane()}
+      >
+        {leftContent}
+      </div>
+      <div
+        class={styles["side-right"]}
+        data-pane="testResult"
+        data-pane-active={pane === "testResult" ? "true" : undefined}
+        onMouseDown={() => focusTestResultPane()}
+      >
+        {rightContent}
+      </div>
     </div>
   );
 };

package/src/components/SideBySide/styles.scss

@@ -15,10 +15,18 @@
 }
 
 .side-left {
+  display: flex;
+  flex-direction: column;
   margin-right: auto;
   border-radius: 12px 0 0 12px;
   box-shadow: var(--shadow-small);
   overflow: hidden;
+  min-height: 0;
+
+  > * {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
 }
 
 .side-right {
@@ -56,7 +64,7 @@
 }
 
 .gutter {
-  background: var(--bg-base-secondary) no-repeat 50%;
+  background: var(--color-bg-secondary) no-repeat 50%;
   height: 100%;
 }
 

package/src/components/SplitLayout/index.tsx

@@ -1,5 +1,6 @@
 import { Loadable, PageLoader, Text } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
+import clsx from "clsx";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -7,6 +8,8 @@ import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
+import { activePane } from "@/stores/keyboard";
+import { isSplitMode } from "@/stores/layout";
 import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
@@ -18,7 +21,7 @@ const MainReportWrapper = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className={styles.wrapper} ref={containerRef}>
+    <div className={styles.wrapper} ref={containerRef} data-tree-scroll-container>
       <MainReport />
     </div>
   );
@@ -59,7 +62,13 @@ export const SplitLayout = () => {
         }}
       />
     ) : (
-      <div className={styles.empty}>
+      <div
+        className={clsx(
+          styles.empty,
+          isSplitMode.value && styles["empty-split-pane"],
+          isSplitMode.value && activePane.value === "testResult" && styles["pane-active"],
+        )}
+      >
         <Text>{t("noSelectedTR")}</Text>
       </div>
     );

package/src/components/SplitLayout/styles.scss

@@ -1,22 +1,29 @@
+@use "../../styles/pane-active" as paneActive;
+
 .layout {
   margin: auto;
   padding: 12px 32px;
-  background: var(--bg-base-secondary);
-  color: var(--on-text-primary);
+  background: var(--color-bg-canvas);
+  color: var(--color-text-primary);
   font-size: 14px;
 }
 
 .wrapper {
+  display: flex;
   width: 100%;
   flex-direction: column;
   margin: auto;
   position: relative;
   height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
 }
 
 .content {
   box-shadow: var(--shadow-small);
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
   overflow: hidden;
@@ -39,7 +46,7 @@
 .title {
   font-size: 14px;
   line-height: 1.25;
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   margin-bottom: 8px;
 }
 
@@ -79,6 +86,18 @@
   height: 100%;
 }
 
+.empty-split-pane {
+  position: relative;
+  background: var(--color-bg-raised);
+  border-radius: 12px;
+  overflow: auto;
+  @include paneActive.split-pane-indicator;
+
+  &.pane-active {
+    @include paneActive.split-pane-indicator-active;
+  }
+}
+
 .header {
   padding: 8px;
   margin-bottom: 0;

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

@@ -20,6 +20,6 @@
 }
 
 .test-steps-empty-text {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   flex: 1 1 auto;
 }

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

@@ -4,7 +4,7 @@
 
 .test-result-description-wrapper {
   padding: 16px 0;
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .test-result-description-text {

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

@@ -13,9 +13,9 @@ export const TrDropdown: FunctionalComponent<{
   counter: number;
   actions?: preact.ComponentChildren;
   className?: ClassValue;
-}> = ({ isOpened, setIsOpen, title, icon, counter, actions, className }) => {
+}> = ({ isOpened, setIsOpen, title, icon, counter, actions, className, ...rest }) => {
   return (
-    <div className={clsx(styles["test-result-dropdown"], className)} onClick={() => setIsOpen(!isOpened)}>
+    <div className={clsx(styles["test-result-dropdown"], className)} onClick={() => setIsOpen(!isOpened)} {...rest}>
       <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
       <div className={styles["test-result-dropdown-wrap"]}>
         <SvgIcon id={icon} />