@allurereport/web-awesome 3.11.0 → 3.13.0

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.11.0",
+  "version": "3.13.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.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",
+    "@allurereport/charts-api": "3.13.0",
+    "@allurereport/core-api": "3.13.0",
+    "@allurereport/plugin-api": "3.13.0",
+    "@allurereport/web-commons": "3.13.0",
+    "@allurereport/web-components": "3.13.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -56,7 +56,7 @@
     "@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/d3-shape": "^3.1.8",
     "@types/md5": "^2.3.5",
     "@types/node": "^20",
     "@types/prismjs": "^1.26.5",
@@ -67,7 +67,7 @@
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
-    "css-loader": "^7.1.2",
+    "css-loader": "^7.1.4",
     "diff": "^8.0.3",
     "filesize": "^10.1.6",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
@@ -87,9 +87,9 @@
     "typescript": "^5",
     "vite": "^8.0.9",
     "vitest": "^4.1.0",
-    "webpack": "^5.99.9",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.4",
-    "webpack-manifest-plugin": "^5.0.0"
+    "webpack": "^5",
+    "webpack-cli": "^7",
+    "webpack-dev-server": "^5",
+    "webpack-manifest-plugin": "^6"
   }
 }

package/src/components/Categories/MessageTreeItem/index.tsx

@@ -1,6 +1,6 @@
 import type { CategoryNode, CategoryNodeProps, Statistic, TestStatus } from "@allurereport/core-api";
 import { getWorstStatus } from "@allurereport/core-api";
-import { ansiToHTML } from "@allurereport/web-commons";
+import { ansiSemanticColors, ansiToHTML, normalizeAnsiForegroundColors } from "@allurereport/web-commons";
 import { ArrowButton, Button, Code, TreeStatusBar } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
@@ -57,7 +57,11 @@ export const MessageTreeItem: FC<MessageTreeItemProps> = ({
 }) => {
   const { t } = useI18n("ui");
   const status = statusFromStatistic(node.statistic);
-  const sanitizedMessage = ansiToHTML(node.name ?? "", { fg: "var(--color-text-primary)", colors: {} });
+  const sanitizedMessage = ansiToHTML(normalizeAnsiForegroundColors(node.name ?? ""), {
+    fg: "var(--color-text-primary)",
+    bg: "none",
+    colors: ansiSemanticColors,
+  });
   const stickyStyle = createCategoriesStickyStyle(depth);
   const hasLongMessage = (node.name ?? "").length > 80;
   const [isMessageExpanded, setIsMessageExpanded] = useState(false);

package/src/components/KeyboardShortcuts/styles.scss

@@ -1,7 +1,7 @@
 .shortcuts {
   position: fixed;
   right: 16px;
-  bottom: 16px;
+  bottom: 8px;
   z-index: 1000;
   display: flex;
   flex-direction: column;

package/src/components/SplitLayout/index.tsx

@@ -1,8 +1,7 @@
 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";
+import { useMemo, useRef } from "preact/hooks";
 
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
@@ -40,10 +39,11 @@ const isTestResultRoute = computed(
 
 export const SplitLayout = () => {
   const testResultId = currentTrId.value;
-  const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
   const { t } = useI18n("controls");
-  const leftSide = (
-    <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />
+
+  const leftSide = useMemo(
+    () => <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />,
+    [],
   );
 
   const TrView = () => {
@@ -67,15 +67,9 @@ export const SplitLayout = () => {
     );
   };
 
-  useEffect(() => {
-    if (!cachedMain) {
-      setCachedMain(leftSide);
-    }
-  }, [cachedMain]);
-
   return (
     <div className={styles["side-by-side"]} data-testId={"split-layout"}>
-      <SideBySide left={cachedMain} right={<TrView />} />
+      <SideBySide left={leftSide} right={<TrView />} />
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import type { TestError, TestStatus } from "@allurereport/core-api";
-import { ansiToHTML } from "@allurereport/web-commons";
+import { ansiSemanticColors, ansiToHTML, normalizeAnsiForegroundColors } from "@allurereport/web-commons";
 import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
@@ -13,20 +13,16 @@ import { copyToClipboard } from "@/utils/copyToClipboard";
 
 import * as styles from "./styles.scss";
 
-const TrErrorTrace = ({ trace }: { trace: string }) => {
-  const sanitizedTrace = ansiToHTML(trace, {
+const ansiStatusDetailsToHTML = (text: string) =>
+  ansiToHTML(normalizeAnsiForegroundColors(text), {
     fg: "var(--color-text-primary)",
     bg: "none",
-    colors: {
-      0: "none",
-      1: "none",
-      2: "var(--color-intent-info-text)",
-      3: "var(--color-intent-warning-text)",
-      4: "var(--color-status-unknown-chart)",
-      5: "var(--color-syntax-type)",
-    },
+    colors: ansiSemanticColors,
   });
 
+const TrErrorTrace = ({ trace }: { trace: string }) => {
+  const sanitizedTrace = ansiStatusDetailsToHTML(trace);
+
   return (
     <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
       <Code size={"s"} type={"ui"}>
@@ -52,13 +48,7 @@ export const TrError: FunctionalComponent<
       data: { actual, expected },
       component: <TrDiff actual={actual} expected={expected} />,
     });
-  const sanitizedMessage =
-    showMessage && message
-      ? ansiToHTML(message, {
-          fg: "var(--color-text-primary)",
-          colors: {},
-        })
-      : "";
+  const sanitizedMessage = showMessage && message ? ansiStatusDetailsToHTML(message) : "";
 
   return (
     <div
@@ -83,7 +73,7 @@ export const TrError: FunctionalComponent<
                 size={"s"}
                 icon={allureIcons.lineGeneralCopy3}
                 onClick={() => {
-                  copyToClipboard(message);
+                  copyToClipboard(trace || message);
                 }}
               />
             </TooltipWrapper>
@@ -117,7 +107,7 @@ export const TrError: FunctionalComponent<
               size={"s"}
               icon={allureIcons.lineGeneralCopy3}
               onClick={() => {
-                copyToClipboard(message);
+                copyToClipboard(trace || message);
               }}
             />
           </TooltipWrapper>

package/src/hooks/useTestResultOverviewFocusScroll.ts

@@ -1,23 +1,23 @@
 import { scrollFocusIntoView } from "@allurereport/web-commons";
 import { useLayoutEffect } from "preact/hooks";
 
-import { getFlatTestResultNode, testResultFocusId } from "@/stores/testResultOverviewNav";
+import { getFlatTestResultNode, testResultScrollToId } from "@/stores/testResultOverviewNav";
 
 export const useTestResultOverviewFocusScroll = () => {
-  const focusId = testResultFocusId.value;
+  const scrollToId = testResultScrollToId.value;
 
   useLayoutEffect(() => {
-    if (!focusId) {
+    if (!scrollToId) {
       return;
     }
 
-    const node = document.querySelector(`[data-tr-focus-id="${focusId}"]`);
+    const node = document.querySelector(`[data-tr-focus-id="${scrollToId}"]`);
 
     if (!(node instanceof HTMLElement)) {
       return;
     }
 
-    const flatNode = getFlatTestResultNode(focusId);
+    const flatNode = getFlatTestResultNode(scrollToId);
     scrollFocusIntoView(node, { containerAttribute: "data-tr-scroll-container", kind: flatNode?.kind });
-  }, [focusId]);
+  }, [scrollToId]);
 };

package/src/stores/testResultOverviewNav.ts

@@ -9,6 +9,9 @@ import { collapsedTrees, isTreeOpened, setTreeOpened, toggleTree } from "@/store
 import { flattenTestResultOverview } from "@/utils/flattenTestResultOverview";
 export const testResultFocusId = signal<string | undefined>(undefined);
 
+/** Set only by explicit keyboard navigation (not auto-initialization). Controls scroll in useTestResultOverviewFocusScroll. */
+export const testResultScrollToId = signal<string | undefined>(undefined);
+
 export const isTestResultOverviewNavigationContext = (): boolean =>
   isTestResultHotkeysContext() && trCurrentTab.value === "overview";
 
@@ -52,6 +55,7 @@ export const moveTestResultFocus = (direction: MoveDirection): MoveFocusResult =
 
 export const setTestResultFocusId = (id: string | undefined) => {
   testResultFocusId.value = id;
+  testResultScrollToId.value = id;
 };
 
 export const ensureTestResultFocusId = () => {
@@ -87,6 +91,7 @@ effect(() => {
 
   if (trCurrentTab.value !== "overview") {
     testResultFocusId.value = undefined;
+    testResultScrollToId.value = undefined;
   }
 });