@allurereport/web-awesome 3.8.1 → 3.9.0

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/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

@@ -9,6 +9,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";
 
@@ -34,9 +35,8 @@ 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(", ") }));
@@ -71,9 +71,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]) => ({
@@ -111,13 +110,12 @@ const MetadataVariables: FunctionalComponent<MetadataVariablesProps> = (props) =
 };
 
 export const ReportMetadata = () => {
-  const stats = currentEnvironment.value
-    ? statsByEnvStore.value.data[currentEnvironment.value]
-    : reportStatsStore.value.data;
+  const envId = currentEnvironment.value;
+  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"]}>

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";
@@ -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,26 @@
+@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;
 }
 
 .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 +43,7 @@
 .title {
   font-size: 14px;
   line-height: 1.25;
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   margin-bottom: 8px;
 }
 
@@ -79,6 +83,18 @@
   height: 100%;
 }
 
+.empty-split-pane {
+  position: relative;
+  background: var(--bg-base-primary);
+  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} />

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

@@ -29,7 +29,7 @@
   border-radius: 4px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 

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

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

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

@@ -3,7 +3,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--bg-control-flat-medium);
+      background: var(--color-row-bg-hover);
     }
   }
 }
@@ -44,15 +44,15 @@
 .test-result-environment-item-time {
   margin-left: auto;
   line-height: 20px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-environment-item-link {
   :root {
-    --allure-btn-icon-color: var(--bg-control-flat);
+    --allure-btn-icon-color: var(--color-control-bg-ghost);
   }
 
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-environment-item-status {

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

@@ -15,15 +15,15 @@ import * as styles from "./styles.scss";
 
 const TrErrorTrace = ({ trace }: { trace: string }) => {
   const sanitizedTrace = ansiToHTML(trace, {
-    fg: "var(--on-text-primary)",
+    fg: "var(--color-text-primary)",
     bg: "none",
     colors: {
       0: "none",
       1: "none",
-      2: "var(--on-support-sirius)",
-      3: "var(--on-support-atlas)",
-      4: "var(--bg-support-skat)",
-      5: "var(--on-support-betelgeuse)",
+      2: "var(--color-intent-info-text)",
+      3: "var(--color-intent-warning-text)",
+      4: "var(--color-status-unknown-chart)",
+      5: "var(--color-syntax-type)",
     },
   });
 
@@ -55,7 +55,7 @@ export const TrError: FunctionalComponent<
   const sanitizedMessage =
     showMessage && message
       ? ansiToHTML(message, {
-          fg: "var(--on-text-primary)",
+          fg: "var(--color-text-primary)",
           colors: {},
         })
       : "";
@@ -98,7 +98,32 @@ export const TrError: FunctionalComponent<
       ) : showMessage ? (
         empty("no-message-provided")
       ) : null}
-      {hasDiff && (
+      {!showMessage && message && (
+        <div className={styles["test-result-error-header"]}>
+          {hasDiff ? (
+            <Button
+              style={"flat"}
+              data-testId={"test-result-diff-button"}
+              size={"s"}
+              text={tooltip("showDiff")}
+              onClick={openDiff}
+            />
+          ) : (
+            <span />
+          )}
+          <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+            <IconButton
+              style={"ghost"}
+              size={"s"}
+              icon={allureIcons.lineGeneralCopy3}
+              onClick={() => {
+                copyToClipboard(message);
+              }}
+            />
+          </TooltipWrapper>
+        </div>
+      )}
+      {(showMessage || !message) && hasDiff && (
         <Button
           style={"flat"}
           data-testId={"test-result-diff-button"}