@allurereport/web-awesome 3.10.0 → 3.11.0

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.10.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.10.0",
-    "@allurereport/core-api": "3.10.0",
-    "@allurereport/plugin-api": "3.10.0",
-    "@allurereport/web-commons": "3.10.0",
-    "@allurereport/web-components": "3.10.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",
@@ -91,10 +91,5 @@
     "webpack-cli": "^5.1.4",
     "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/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,17 +6,13 @@
   background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
+  flex: 1 1 auto;
 }
 
 .scroll-inside {
   display: flex;
   flex-direction: column;
   border-radius: 0;
-  @include paneActive.split-pane-indicator;
-
-  &.pane-active {
-    @include paneActive.split-pane-indicator-active;
-  }
 }
 
 .main-report-header {

package/src/components/ReportBody/index.tsx

@@ -20,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>

package/src/components/SideBySide/styles.scss

@@ -22,6 +22,11 @@
   box-shadow: var(--shadow-small);
   overflow: hidden;
   min-height: 0;
+  border-top: 2px solid transparent;
+
+  &[data-pane-active] {
+    border-top-color: var(--color-intent-primary-text);
+  }
 
   > * {
     flex: 1 1 auto;
@@ -35,6 +40,11 @@
   border-radius: 0 12px 12px 0;
   box-shadow: var(--shadow-small);
   overflow: hidden;
+  border-top: 2px solid transparent;
+
+  &[data-pane-active] {
+    border-top-color: var(--color-intent-primary-text);
+  }
 }
 
 [dir="ltr"] {

package/src/components/SplitLayout/index.tsx

@@ -8,7 +8,6 @@ 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";
@@ -62,13 +61,7 @@ export const SplitLayout = () => {
         }}
       />
     ) : (
-      <div
-        className={clsx(
-          styles.empty,
-          isSplitMode.value && styles["empty-split-pane"],
-          isSplitMode.value && activePane.value === "testResult" && styles["pane-active"],
-        )}
-      >
+      <div className={clsx(styles.empty, isSplitMode.value && styles["empty-split-pane"])}>
         <Text>{t("noSelectedTR")}</Text>
       </div>
     );

package/src/components/SplitLayout/styles.scss

@@ -89,13 +89,7 @@
 .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 {

package/src/components/TestResult/TrOverview.tsx

@@ -1,9 +1,10 @@
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
 
-import { getBodyItems } from "@/components/TestResult/bodyItems";
+import { getBodyItems, isDisplayableTestError } from "@/components/TestResult/bodyItems";
 import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
 import { TrDescription } from "@/components/TestResult/TrDescription";
+import { TrError } from "@/components/TestResult/TrError";
 import { TrLinks } from "@/components/TestResult/TrLinks";
 import { TrMetadata } from "@/components/TestResult/TrMetadata";
 import { TrParameters } from "@/components/TestResult/TrParameters";
@@ -23,7 +24,7 @@ export type TrOverviewProps = {
 
 export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
   useTestResultOverviewFocusScroll();
-  const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id } = testResult || {};
+  const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id, error, status } = testResult || {};
   const testResultId = id ?? currentTrId.value;
   const { t } = useI18n("ui");
   const bodyItems = getBodyItems(testResult, t("error"));
@@ -31,9 +32,15 @@ export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult })
   const pwTraces = testResult?.attachments?.filter(
     (attachment) => attachment.link.contentType === "application/vnd.allure.playwright-trace",
   );
+  const showTopError = (status === "failed" || status === "broken") && isDisplayableTestError(error);
 
   return (
     <>
+      {showTopError && (
+        <div className={styles["test-result-errors"]}>
+          <TrError {...error} status={status} />
+        </div>
+      )}
       {Boolean(pwTraces?.length) && <TrPwTraces pwTraces={pwTraces} />}
       {Boolean(parameters?.length) && <TrParameters id={testResultId} parameters={parameters} />}
       {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (

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

@@ -104,7 +104,8 @@ export const TrAttachment: FunctionComponent<{
     event.stopPropagation();
     openModal({
       data: item,
-      component: <Attachment item={item} previewable={true} />,
+      preview: isPreviewable,
+      component: <Attachment item={item} previewable={isPreviewable} />,
     });
   };
 

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

@@ -47,10 +47,11 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
     event.stopPropagation();
     openModal({
       data: item,
+      preview: isPreviewable,
       component: (
         <Attachment
           item={item}
-          previewable={true}
+          previewable={isPreviewable}
           i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
         />
       ),
@@ -62,10 +63,17 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
       openModal({
         isModalOpen: true,
         data: item,
-        component: <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />,
+        preview: isPreviewable,
+        component: (
+          <Attachment
+            item={item}
+            previewable={isPreviewable}
+            i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+          />
+        ),
       });
     }
-  }, [item, tAttachments]);
+  }, [item, isPreviewable, tAttachments]);
 
   const downloadData = async (e: MouseEvent) => {
     e.stopPropagation();

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

@@ -1,4 +1,9 @@
-import { getNextSubtreeToggleState, getSubtreeToggleIcon, type SubtreeToggleState } from "@allurereport/web-commons";
+import {
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  isSubtreeFirstLevelOnlyOpened,
+  type SubtreeToggleState,
+} from "@allurereport/web-commons";
 import { IconButton, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -9,7 +14,6 @@ import {
   collectExpandableStepNodes,
   getStepTreeExpansionPolicy,
   isOpenByDefaultForPolicy,
-  isSubtreeFirstLevelOnlyOpened,
   type SubtreeNode,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";

package/src/components/TestResult/index.tsx

@@ -13,7 +13,7 @@ import { TrOverview } from "@/components/TestResult/TrOverview";
 import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
 import { TrTabs } from "@/components/TestResult/TrTabs";
 import { fetchTestEnvGroup } from "@/stores/env";
-import { activePane, focusTestResultPane } from "@/stores/keyboard";
+import { focusTestResultPane } from "@/stores/keyboard";
 import { isSplitMode } from "@/stores/layout";
 import { trCurrentTab } from "@/stores/testResult";
 
@@ -59,7 +59,6 @@ const TrContent: FunctionalComponent<TrContentProps> = ({ testResult }) => {
 
 const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
   const split = isSplitMode.value;
-  const trPaneActive = split && activePane.value === "testResult";
 
   useEffect(() => {
     const testCaseId = testResult?.testCase?.id;
@@ -72,7 +71,7 @@ const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
   return (
     <>
       <div
-        className={clsx(styles.content, split && styles["scroll-inside"], trPaneActive && styles["pane-active"])}
+        className={clsx(styles.content, split && styles["scroll-inside"])}
         data-tr-scroll-container
         onMouseDown={() => focusTestResultPane()}
       >

package/src/components/TestResult/styles.scss

@@ -13,10 +13,5 @@
   height: 100%;
   border-radius: 0;
   scrollbar-width: thin;
-  @include paneActive.split-pane-indicator;
-
-  &.pane-active {
-    @include paneActive.split-pane-indicator-active;
-  }
 }
 

package/src/components/Tree/index.tsx

@@ -60,12 +60,7 @@ export const TreeList = () => {
     const flatNode = getFlatTreeNode(focusedId);
     const kind = flatNode?.kind;
 
-    // For group/env nodes always pin to top (even when already visible in viewport)
-    if (kind === "group" || kind === "env") {
-      (node as HTMLElement).scrollIntoView({ block: "start", inline: "nearest" });
-    } else {
-      scrollFocusIntoView(node, { kind });
-    }
+    scrollFocusIntoView(node, { kind });
   }, [focusedId]);
 
   useLayoutEffect(() => {

package/src/styles/_pane-active.scss

@@ -1,8 +1,8 @@
 // border-top on the white pane card (visible above header/content; inset shadow is covered by children).
 @mixin split-pane-indicator {
-  border-top: 3px solid transparent;
+  border-top: 2px solid transparent;
 }
 
 @mixin split-pane-indicator-active {
-  border-top-color: var(--bg-support-aldebaran);
+  border-top-color: var(--color-intent-primary-text);
 }