@allurereport/web-awesome 3.8.1 → 3.9.0

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

@@ -4,7 +4,7 @@
   padding-right: 24px;
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -14,14 +14,14 @@
 
 .test-result-step {
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
 .test-result-step-content {
   padding-left: 24px;
   margin-bottom: 12px;
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
   min-width: 0;
 }
 
@@ -30,7 +30,20 @@
 }
 
 .test-result-attachment-content {
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+button.test-result-attachment-content {
+  appearance: none;
+  background: transparent;
+  border: 0;
   border-top: 1px solid var(--on-border-muted);
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  padding: 0;
+  text-align: inherit;
+  width: 100%;
 }
 
 .test-result-attachment-content-wrapper {
@@ -51,7 +64,7 @@
   min-height: 32px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 
@@ -81,7 +94,7 @@
 }
 
 .test-result-step-number {
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   min-width: 16px;
   text-align: center;
   box-sizing: content-box;
@@ -90,7 +103,7 @@
 .item-time {
   flex: none;
   margin-left: auto;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   line-height: 20px;
   min-width: 56px;
   text-align: right;
@@ -99,7 +112,7 @@
 .item-info {
   display: flex;
   gap: 8px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   align-items: center;
   flex: 0 0 auto;
 }
@@ -108,7 +121,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   min-width: 56px;
   justify-content: flex-end;
 }
@@ -120,7 +133,7 @@
 }
 
 .item-info-step-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-step-chevron {
@@ -146,7 +159,26 @@
   }
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
+  }
+}
+
+.test-result-attachment-toggle {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+
+  &:not(:disabled) {
+    cursor: pointer;
   }
 }
 
@@ -160,7 +192,7 @@
 }
 
 .test-result-attachment-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   padding: 2px 4px;
   height: max-content;
 }
@@ -210,11 +242,39 @@
 }
 
 .item-button {
-  color: var(--bg-control-flat);
+  flex: none;
+  color: var(--color-control-bg-ghost);
 }
 
-.item-button-syntax-off {
-  opacity: 0.5;
+.item-buttons {
+  :global(button),
+  :global(a) {
+    --allure-btn-icon-color: var(--color-icon-primary);
+    --allure-btn-trailing-icon-color: var(--color-icon-primary);
+    color: var(--color-icon-primary);
+  }
+
+  :global(button) :global(svg),
+  :global(a) :global(svg) {
+    opacity: 1;
+  }
+
+  :global(button) :global(path),
+  :global(a) :global(path) {
+    stroke-opacity: 1;
+    fill-opacity: 1;
+  }
+
+  .item-button-active {
+    --allure-btn-bg-color: var(--color-control-bg-ghost-hover);
+    background-color: var(--color-control-bg-ghost-hover);
+    border-radius: 4px;
+  }
+
+  .item-button-syntax-off {
+    --allure-btn-bg-color: var(--color-control-bg-ghost);
+    opacity: 0.5;
+  }
 }
 
 .wrong-attachment-sign {
@@ -224,7 +284,7 @@
 }
 
 .test-result-attachment-missed {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   line-height: 20px;
   margin-right: auto;
   padding-top: 2px;
@@ -255,23 +315,23 @@
 
 .item-status-icon {
   &.status-passed {
-    color: var(--bg-support-castor);
+    color: var(--color-status-passed-chart);
   }
 
   &.status-failed {
-    color: var(--bg-support-capella);
+    color: var(--color-status-failed-chart);
   }
 
   &.status-broken {
-    color: var(--bg-support-atlas);
+    color: var(--color-status-broken-chart);
   }
 
   &.status-skipped {
-    color: var(--bg-support-rau);
+    color: var(--color-status-skipped-chart);
   }
 
   &.status-unknown {
-    color: var(--bg-support-skat);
+    color: var(--color-status-unknown-chart);
   }
 }
 

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

@@ -8,6 +8,7 @@ import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -17,13 +18,16 @@ export type TrTeardownProps = {
 };
 
 export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id }) => {
-  const teardownId = `${id}-teardown`;
-  const isEarlyCollapsed = !collapsedTrees.value.has(teardownId);
+  const teardownId = id ? `${id}-teardown` : null;
+  const isEarlyCollapsed = teardownId ? !collapsedTrees.value.has(teardownId) : true;
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
 
   const handleClick = () => {
     setIsOpen(!isOpened);
-    toggleTree(teardownId);
+
+    if (teardownId) {
+      toggleTree(teardownId);
+    }
   };
 
   const { t } = useI18n("execution");
@@ -31,6 +35,8 @@ export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id
   return (
     <div className={styles["test-result-steps"]}>
       <TrDropdown
+        className={trOverviewHeaderFocusClass(teardownId)}
+        {...trOverviewFocusAttrs(teardownId)}
         icon={allureIcons.lineHelpersFlag}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/bodyItems.ts

@@ -55,7 +55,7 @@ export const hasErrorDiff = (error?: TestErrorLike) =>
 export const hasTestLevelErrorContent = (error?: TestErrorLike) =>
   Boolean(normalizeErrorText(error?.trace).length) || hasErrorDiff(error);
 
-const isDisplayableTestError = (error?: TestErrorLike) => {
+export const isDisplayableTestError = (error?: TestErrorLike) => {
   return (
     Boolean(normalizeErrorText(error?.message).length) ||
     Boolean(normalizeErrorText(error?.trace).length) ||

package/src/components/TestResult/index.tsx

@@ -13,6 +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 { isSplitMode } from "@/stores/layout";
 import { trCurrentTab } from "@/stores/testResult";
 
@@ -57,7 +58,8 @@ const TrContent: FunctionalComponent<TrContentProps> = ({ testResult }) => {
 };
 
 const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
-  const splitModeClass = isSplitMode.value ? styles["scroll-inside"] : "";
+  const split = isSplitMode.value;
+  const trPaneActive = split && activePane.value === "testResult";
 
   useEffect(() => {
     const testCaseId = testResult?.testCase?.id;
@@ -69,7 +71,11 @@ const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
 
   return (
     <>
-      <div className={clsx(styles.content, splitModeClass)}>
+      <div
+        className={clsx(styles.content, split && styles["scroll-inside"], trPaneActive && styles["pane-active"])}
+        data-tr-scroll-container
+        onMouseDown={() => focusTestResultPane()}
+      >
         {testResult ? <TrContent testResult={testResult} /> : <TrEmpty />}
       </div>
     </>

package/src/components/TestResult/styles.scss

@@ -1,6 +1,9 @@
+@use "../../styles/pane-active" as paneActive;
+
 .content {
+  position: relative;
   box-shadow: var(--shadow-small);
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   border-radius: 12px;
   width: 100%;
 }
@@ -10,4 +13,10 @@
   height: 100%;
   border-radius: 0;
   scrollbar-width: thin;
+  @include paneActive.split-pane-indicator;
+
+  &.pane-active {
+    @include paneActive.split-pane-indicator-active;
+  }
 }
+

package/src/components/TestResult/trOverviewFocus.scss

@@ -0,0 +1,4 @@
+// Keyboard focus: no visual indicator — step focus is internal only.
+.tr-overview-focused {
+  outline: none;
+}

package/src/components/Timeline/styles.scss

@@ -5,11 +5,11 @@
   overflow-y: auto;
 
   --timeline-font-family: var(--font-family);
-  --timeline-grid: var(--on-border-control);
-  --timeline-border-primary: var(--on-border-primary);
-  --timeline-axis-text: var(--on-text-secondary);
-  --timeline-bg: var(--bg-base-primary);
-  --timeline-selection-bg: var(--bg-control-flat-medium);
+  --timeline-grid: var(--color-border-control);
+  --timeline-border-primary: var(--color-border-default);
+  --timeline-axis-text: var(--color-text-secondary);
+  --timeline-bg: var(--color-bg-primary);
+  --timeline-selection-bg: var(--color-control-bg-ghost-hover);
 }
 
 .overview-grid {
@@ -41,5 +41,5 @@
   align-items: center;
   width: 100%;
   min-height: 320px;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
 }

package/src/components/Tree/index.tsx

@@ -1,20 +1,34 @@
+import { scrollFocusIntoView, scrollTreePaneToTop } from "@allurereport/web-commons";
 import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
-import { useMemo } from "preact/hooks";
+import clsx from "clsx";
+import { useLayoutEffect, useMemo } from "preact/hooks";
 
 import { MetadataButton } from "@/components/MetadataButton";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { collapsedEnvironments, currentEnvironment, environmentNameById, environmentsStore } from "@/stores/env";
+import { flatTree, getFlatTreeNode, setTreeFocusId, treeFocusId, treeScrollPaneToTopPending } from "@/stores/keyboard";
 import { useI18n } from "@/stores/locale";
 import { navigateToTestResult } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
-import { collapsedTrees, filteredTree, noTests, noTestsFound, toggleTree, treeStore } from "@/stores/tree";
+import {
+  collapsedTrees,
+  filteredTree,
+  isTreeOpened,
+  noTests,
+  noTestsFound,
+  toggleTree,
+  treeStore,
+} from "@/stores/tree";
 import { clearTreeFilters, treeStatus } from "@/stores/treeFilters/store";
 import { createTreeLocalizer } from "@/utils/tree";
 
 import * as styles from "./styles.scss";
 
-const treeNavigateTo = (id: string) => {
-  navigateToTestResult({ testResultId: id });
+const treeNavigateTo = (testResultId: string) => {
+  const flatNode = flatTree.value.find((node) => node.testResultId === testResultId || node.id === testResultId);
+
+  setTreeFocusId(flatNode?.id ?? testResultId);
+  navigateToTestResult({ testResultId });
 };
 
 export const TreeList = () => {
@@ -22,9 +36,31 @@ export const TreeList = () => {
   const { t: tEnvironments } = useI18n("environments");
   const { t: tooltip } = useI18n("transitions");
   const trId = currentTrId.value;
+  const focusedId = treeFocusId.value;
 
   const currentTreeStatus = treeStatus.value;
 
+  useLayoutEffect(() => {
+    if (!focusedId) {
+      return;
+    }
+
+    const node = document.querySelector(`[data-tree-node-id="${focusedId}"]`);
+
+    if (!node) {
+      return;
+    }
+
+    if (treeScrollPaneToTopPending.value) {
+      treeScrollPaneToTopPending.value = false;
+      scrollTreePaneToTop(node);
+      return;
+    }
+
+    const flatNode = getFlatTreeNode(focusedId);
+    scrollFocusIntoView(node, { kind: flatNode?.kind });
+  }, [focusedId]);
+
   const localizers = useMemo(
     () => ({
       tooltip: (key: string, options: Record<string, string>) => tooltip(`description.${key}`, options),
@@ -84,10 +120,12 @@ export const TreeList = () => {
                 statistic={soleStatistic}
                 collapsedTrees={collapsedTrees.value}
                 toggleTree={toggleTree}
+                isGroupOpened={isTreeOpened}
                 navigateTo={treeNavigateTo}
                 tree={treeLocalizer(filteredTree.value[soleId])}
                 statusFilter={currentTreeStatus}
                 routeId={trId}
+                focusedId={focusedId}
                 root
               />
             </div>
@@ -104,10 +142,12 @@ export const TreeList = () => {
                 statistic={statsByEnvStore.value.data[currentEnvironment.value]}
                 collapsedTrees={collapsedTrees.value}
                 toggleTree={toggleTree}
+                isGroupOpened={isTreeOpened}
                 navigateTo={treeNavigateTo}
                 tree={treeLocalizer(currentTree)}
                 statusFilter={currentTreeStatus}
                 routeId={trId}
+                focusedId={focusedId}
                 root
               />
             </div>
@@ -132,9 +172,15 @@ export const TreeList = () => {
               };
               const stats = statsByEnvStore.value.data[key];
 
+              const envFocusId = `env:${key}`;
+
               return (
                 <div key={key} className={styles["tree-section"]} data-testid={"tree-section"}>
-                  <div className={styles["tree-env-button"]}>
+                  <div
+                    className={clsx(styles["tree-env-button"], focusedId === envFocusId && styles["tree-env-focused"])}
+                    data-tree-node-id={envFocusId}
+                    id={envFocusId}
+                  >
                     <MetadataButton
                       isOpened={isOpened}
                       setIsOpen={toggleEnv}
@@ -157,10 +203,13 @@ export const TreeList = () => {
                         reportStatistic={reportStatsStore.value.data}
                         collapsedTrees={collapsedTrees.value}
                         toggleTree={toggleTree}
+                        isGroupOpened={isTreeOpened}
                         statusFilter={currentTreeStatus}
                         navigateTo={treeNavigateTo}
                         tree={treeLocalizer(value)}
                         routeId={trId}
+                        focusedId={focusedId}
+                        focusIdPrefix={`${key}:`}
                         root
                       />
                     </div>

package/src/components/Tree/styles.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -15,7 +15,7 @@
   padding: 4px 8px 4px 6px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 
@@ -49,11 +49,11 @@
   position: relative;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -64,7 +64,7 @@
 .item-time {
   flex: none;
   margin-left: auto;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
 }
 
 .test-count {
@@ -76,7 +76,7 @@
   display: block;
   padding-left: 24px;
   margin-bottom: 12px;
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .tree-item-icon {
@@ -85,71 +85,76 @@
 }
 
 .status-passed {
-  color: var(--bg-support-castor);
+  color: var(--color-status-passed-chart);
 }
 
 .status-failed {
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-chart);
 }
 
 .status-broken {
-  color: var(--bg-support-atlas);
+  color: var(--color-status-broken-chart);
 }
 
 .status-skipped {
-  color: var(--bg-support-rau);
+  color: var(--color-status-skipped-chart);
 }
 
 .status-unknown {
-  color: var(--bg-support-skat);
+  color: var(--color-status-unknown-chart);
 }
 
 .tree-header-bar {
   display: inline-flex;
+  align-items: center;
+  gap: var(--space-0-25);
   font-family: var(--font-family);
   max-width: 140px;
   min-width: 46px;
-  border-radius: 4px;
-  height: 12px;
-  background: var(--on-text-hint);
+  height: var(--space-2);
+  background: transparent;
   margin-left: auto;
-  font-size: 10px;
-  font-weight: var(--font-weight-extra-bold);
-  line-height: 12px;
-  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-s);
+  overflow: visible;
 }
 
 .tree-header-bar-item {
   display: flex;
-  min-width: 16px;
+  align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--space-2);
+  height: var(--space-2);
+  border-radius: var(--radius-pill);
   text-align: center;
-  padding: 0 6px;
+  padding: 0 var(--space-0-75);
   flex-grow: 1;
 
   &.passed {
-    background-color: var(--bg-support-castor);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-passed-bg);
+    color: var(--color-status-passed-on-bg);
   }
 
   &.failed {
-    background-color: var(--bg-support-capella);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-failed-bg);
+    color: var(--color-status-failed-on-bg);
   }
 
   &.broken {
-    background-color: var(--bg-support-atlas);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-broken-bg);
+    color: var(--color-status-broken-on-bg);
   }
 
   &.skipped {
-    background-color: var(--bg-support-rau);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-skipped-bg);
+    color: var(--color-status-skipped-on-bg);
   }
 
   &.unknown {
-    background-color: var(--bg-support-skat);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-unknown-bg);
+    color: var(--color-status-unknown-on-bg);
   }
 }
 
@@ -159,7 +164,7 @@
 }
 
 .tree-empty-results-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .tree-empty-results-clear-button {
@@ -168,7 +173,7 @@
 
 .order {
   user-select: none;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   min-width: 16px;
   text-align: center;
   box-sizing: content-box;
@@ -177,22 +182,37 @@
 }
 
 .tree-item-marked {
-  background: var(--bg-base-secondary);
+  background: var(--color-row-bg-selected);
 }
 
 .tree-item-marked {
-  background: var(--bg-base-secondary);
+  background: var(--color-row-bg-selected);
+}
+
+.tree-env-focused {
+  outline: none;
+  background: var(--bg-control-flat-medium);
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    background: var(--bg-support-aldebaran);
+    pointer-events: none;
+  }
 }
 
 .tree-section {
   &: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);
   }
 }
 
 .tree-env-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;