fix(web-awesome): expand top-level steps by default; fix keyboard shortcuts styling (#683)

todti · web-flow · commit 5df250f9bc36 · 2026-06-08T11:20:39.000+01:00
diff --git a/packages/web-awesome/src/components/KeyboardShortcuts/styles.scss b/packages/web-awesome/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;
 }
diff --git a/packages/web-awesome/src/components/MainReport/styles.scss b/packages/web-awesome/src/components/MainReport/styles.scss
@@ -11,9 +11,6 @@
 .scroll-inside {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-  min-height: 0;
   border-radius: 0;
   @include paneActive.split-pane-indicator;
 
@@ -27,31 +24,13 @@
 }
 
 .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 {
   flex-shrink: 0;
 }
 
 .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);
 }
diff --git a/packages/web-awesome/src/components/ReportBody/index.tsx b/packages/web-awesome/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";
 
@@ -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>
diff --git a/packages/web-awesome/src/components/ReportBody/styles.scss b/packages/web-awesome/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;
diff --git a/packages/web-awesome/src/components/SplitLayout/index.tsx b/packages/web-awesome/src/components/SplitLayout/index.tsx
@@ -21,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>
   );
diff --git a/packages/web-awesome/src/components/SplitLayout/styles.scss b/packages/web-awesome/src/components/SplitLayout/styles.scss
@@ -16,6 +16,9 @@
   position: relative;
   height: 100%;
   min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
 }
 
 .content {
@@ -85,7 +88,7 @@
 
 .empty-split-pane {
   position: relative;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-raised);
   border-radius: 12px;
   overflow: auto;
   @include paneActive.split-pane-indicator;
diff --git a/packages/web-awesome/src/components/TestResult/TrSetup/index.tsx b/packages/web-awesome/src/components/TestResult/TrSetup/index.tsx
@@ -46,7 +46,7 @@ export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
         <div className={styles["test-result-steps-root"]}>
           {setup?.map((fixture, key) => (
             <div className={styles["test-result-step-root"]} key={fixture.id}>
-              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} />
+              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} isTopLevel={true} />
             </div>
           ))}
         </div>
diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrBodyItems.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrBodyItems.tsx
@@ -20,15 +20,18 @@ const getBodyItemKey = (item: TrBodyItem, index: number) => {
 
 export type TrBodyItemsProps = {
   bodyItems: TrBodyItem[];
+  isTopLevel?: boolean;
 };
 
-export const TrBodyItems: FunctionalComponent<TrBodyItemsProps> = ({ bodyItems }) => {
+export const TrBodyItems: FunctionalComponent<TrBodyItemsProps> = ({ bodyItems, isTopLevel }) => {
   return (
     <>
       {bodyItems.map((item, index) => {
         switch (item.type) {
           case "step":
-            return <TrStep item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
+            return (
+              <TrStep item={item} stepIndex={index + 1} isTopLevel={isTopLevel} key={getBodyItemKey(item, index)} />
+            );
           case "attachment":
             return <TrAttachment item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
           case "error":
diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/TrStep.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/TrStep.tsx
@@ -16,6 +16,7 @@ import {
   collectExpandableStepNodes,
   hasStepContent,
   getStepTreeExpansionPolicy,
+  isOpenByDefaultForPolicy,
   isStepOpenedByDefault,
   type SubtreeNode,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
@@ -70,7 +71,8 @@ export const TrStepsContent = (props: { item: TrStepItem }) => {
 export const TrStep: FunctionComponent<{
   item: TrStepItem;
   stepIndex?: number;
-}> = ({ item, stepIndex }) => {
+  isTopLevel?: boolean;
+}> = ({ item, stepIndex, isTopLevel }) => {
   const { item: stepData, bodyItems, suppressInlineError } = item;
   const inlineError = {
     message: stepData.message ?? stepData.error?.message,
@@ -85,7 +87,9 @@ export const TrStep: FunctionComponent<{
   );
   const policy = getStepTreeExpansionPolicy();
   const hasContent = hasStepContent(item);
-  const openedByDefault = isStepOpenedByDefault(policy, stepData.status, bodyItems);
+  const openedByDefault = isTopLevel
+    ? isOpenByDefaultForPolicy(policy, true)
+    : isStepOpenedByDefault(policy, stepData.status, bodyItems);
   const isOpened = isTreeOpened(stepData.stepId, openedByDefault);
   const expandableDescendantNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasExpandableDescendants = expandableDescendantNodes.length > 0;
diff --git a/packages/web-awesome/src/components/TestResult/TrSteps/index.tsx b/packages/web-awesome/src/components/TestResult/TrSteps/index.tsx
@@ -8,7 +8,6 @@ import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import {
   collectExpandableStepNodes,
   getStepTreeExpansionPolicy,
-  hasFailedStepContext,
   isOpenByDefaultForPolicy,
   isSubtreeFirstLevelOnlyOpened,
   type SubtreeNode,
@@ -35,7 +34,7 @@ export type TrStepsProps = {
 export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
   const stepsId = typeof id === "string" ? `${id}-steps` : null;
   const policy = getStepTreeExpansionPolicy();
-  const isRootOpenedByDefault = isOpenByDefaultForPolicy(policy, hasFailedStepContext(bodyItems));
+  const isRootOpenedByDefault = isOpenByDefaultForPolicy(policy, true);
   const isOpened = stepsId !== null ? isTreeOpened(stepsId, isRootOpenedByDefault) : isRootOpenedByDefault;
   const expandableTreeNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasChildren = stepsId !== null && bodyItems.length > 0;
@@ -118,7 +117,7 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) =>
       />
       {isOpened && (
         <div data-testid="test-result-steps-root" className={styles["test-result-steps-root"]}>
-          <TrBodyItems bodyItems={bodyItems} />
+          <TrBodyItems bodyItems={bodyItems} isTopLevel={true} />
         </div>
       )}
     </div>
diff --git a/packages/web-awesome/src/components/TestResult/TrTeardown/index.tsx b/packages/web-awesome/src/components/TestResult/TrTeardown/index.tsx
@@ -47,7 +47,7 @@ export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id
         <div className={styles["test-result-steps-root"]}>
           {teardown?.map((fixture, key) => (
             <div className={styles["test-result-step-root"]} key={fixture.id}>
-              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} />
+              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} isTopLevel={true} />
             </div>
           ))}
         </div>
diff --git a/packages/web-awesome/src/components/Tree/index.tsx b/packages/web-awesome/src/components/Tree/index.tsx
@@ -58,9 +58,34 @@ export const TreeList = () => {
     }
 
     const flatNode = getFlatTreeNode(focusedId);
-    scrollFocusIntoView(node, { kind: flatNode?.kind });
+    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 });
+    }
   }, [focusedId]);
 
+  useLayoutEffect(() => {
+    if (!trId || focusedId) {
+      return;
+    }
+
+    // Use flatTree to find the scoped node id — avoids duplicate id issues in multi-env trees
+    const flatNode = flatTree.value.find((n) => n.testResultId === trId || n.id === trId);
+    const node = flatNode
+      ? (document.querySelector(`[data-tree-node-id="${flatNode.id}"]`) as HTMLElement | null)
+      : document.getElementById(trId);
+
+    if (!node) {
+      return;
+    }
+
+    scrollFocusIntoView(node, { kind: "leaf" });
+  }, [trId]);
+
   const localizers = useMemo(
     () => ({
       tooltip: (key: string, options: Record<string, string>) => tooltip(`description.${key}`, options),
diff --git a/packages/web-awesome/test/components/TestResult/TrSteps.test.tsx b/packages/web-awesome/test/components/TestResult/TrSteps.test.tsx
@@ -19,9 +19,25 @@ vi.hoisted(() => {
 
 import type { TrBodyItem } from "@/components/TestResult/bodyItems";
 import { TrSteps } from "@/components/TestResult/TrSteps";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { collapsedTrees, expandedTrees } from "@/stores/tree";
 
-const passedStep = {
+const nestedPassedStep = {
+  type: "step",
+  item: {
+    stepId: "nested-passed-step",
+    name: "nested passed step",
+    status: "passed",
+    parameters: [],
+    message: "",
+    trace: "",
+    hasSimilarErrorInSubSteps: false,
+  },
+  suppressInlineError: false,
+  bodyItems: [],
+} satisfies TrBodyItem;
+
+const passedStepWithContent = {
   type: "step",
   item: {
     stepId: "passed-step",
@@ -33,10 +49,10 @@ const passedStep = {
     hasSimilarErrorInSubSteps: false,
   },
   suppressInlineError: false,
-  bodyItems: [],
+  bodyItems: [nestedPassedStep],
 } satisfies TrBodyItem;
 
-const failedStep = {
+const failedStepWithContent = {
   type: "step",
   item: {
     stepId: "failed-step",
@@ -48,7 +64,7 @@ const failedStep = {
     hasSimilarErrorInSubSteps: false,
   },
   suppressInlineError: false,
-  bodyItems: [],
+  bodyItems: [nestedPassedStep],
 } satisfies TrBodyItem;
 
 describe("components > TestResult > TrSteps", () => {
@@ -59,15 +75,34 @@ describe("components > TestResult > TrSteps", () => {
     globalThis.allureReportOptions = { stepTreeExpansion: "expand_failed_only" } as any;
   });
 
-  it("collapses passed-only root steps by default with expand_failed_only", () => {
-    const view = render(<TrSteps id="passed-test" bodyItems={[passedStep]} />);
+  it("always shows the steps root container regardless of step status", () => {
+    const view = render(<TrSteps id="test" bodyItems={[passedStepWithContent]} />);
 
-    expect(view.queryByTestId("test-result-steps-root")).not.toBeInTheDocument();
+    expect(view.getByTestId("test-result-steps-root")).toBeInTheDocument();
   });
 
-  it("opens root steps by default when expand_failed_only finds failed context", () => {
-    const view = render(<TrSteps id="failed-test" bodyItems={[passedStep, failedStep]} />);
+  it("opens top-level passed steps by default even with expand_failed_only", () => {
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
 
-    expect(view.getByTestId("test-result-steps-root")).toBeInTheDocument();
+    expect(view.getByTestId("test-result-step-content")).toBeInTheDocument();
+  });
+
+  it("collapses top-level steps when policy is collapsed", () => {
+    globalThis.allureReportOptions = { stepTreeExpansion: "collapsed" } as any;
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
+
+    expect(view.queryByTestId("test-result-step-content")).not.toBeInTheDocument();
+  });
+
+  it("opens top-level failed steps by default with expand_failed_only", () => {
+    const view = render(<TrSteps id="failed-test" bodyItems={[failedStepWithContent]} />);
+
+    expect(view.getByTestId("test-result-step-content")).toBeInTheDocument();
+  });
+
+  it("collapses nested passed steps by default with expand_failed_only", () => {
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
+
+    expect(view.queryAllByTestId("test-result-step-content")).toHaveLength(1);
   });
 });
diff --git a/packages/web-components/src/components/Tree/styles.scss b/packages/web-components/src/components/Tree/styles.scss
