@allurereport/web-awesome 3.8.2 → 3.9.0

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

@@ -1,6 +1,6 @@
 .test-result-error {
   padding: 8px 8px 12px 16px;
-  background-color: var(--bg-alpha-capella);
+  background-color: var(--color-status-failed-bg-subtle);
   border-radius: 8px;
   position: relative;
   overflow: hidden;
@@ -18,37 +18,37 @@
 }
 
 .tr-status-failed {
-  background-color: var(--bg-alpha-capella);
+  background-color: var(--color-status-failed-bg-subtle);
   &:before {
-    background-color: var(--bg-support-capella);
+    background-color: var(--color-status-failed-chart);
   }
 }
 
 .tr-status-broken {
-  background-color: var(--bg-alpha-atlas);
+  background-color: var(--color-status-broken-bg-subtle);
   &:before {
-    background-color: var(--bg-support-atlas);
+    background-color: var(--color-status-broken-chart);
   }
 }
 
 .tr-status-skipped {
-  background-color: var(--bg-alpha-rau);
+  background-color: var(--color-status-skipped-bg-subtle);
   &:before {
-    background-color: var(--bg-support-rau);
+    background-color: var(--color-status-skipped-chart);
   }
 }
 
 .tr-status-unknown {
-  background-color: var(--bg-alpha-skat);
+  background-color: var(--color-status-unknown-bg-subtle);
   &:before {
-    background-color: var(--bg-support-skat);
+    background-color: var(--color-status-unknown-chart);
   }
 }
 
 .tr-status-passed {
-  background-color: var(--bg-alpha-castor);
+  background-color: var(--color-status-passed-bg-subtle);
   &:before {
-    background-color: var(--bg-support-castor);
+    background-color: var(--color-status-passed-chart);
   }
 }
 
@@ -61,27 +61,27 @@
 .test-result-error-text {
   margin-bottom: 8px;
   padding-left: 8px;
-  color: var(--on-support-capella);
+  color: var(--color-status-failed-text);
   margin-right: auto;
 }
 
 .tr-color-failed {
-  color: var(--on-support-capella);
+  color: var(--color-status-failed-text);
 }
 
 .tr-color-broken {
-  color: var(--on-support-atlas);
+  color: var(--color-status-broken-text);
 }
 
 .tr-color-skipped {
-  color: var(--on-support-rau);
+  color: var(--color-status-skipped-text);
 }
 
 .tr-color-passed {
-  color: var(--on-support-castor);
+  color: var(--color-status-passed-text);
 }
 .tr-color-unknown {
-  color: var(--on-support-skat);
+  color: var(--color-status-unknown-text);
 }
 
 .test-result-error-trace {
@@ -143,18 +143,18 @@
 }
 
 .diff-green {
-  color: var(--on-support-castor);
-  background: #09933729;
+  color: var(--color-intent-success-text);
+  background: var(--color-intent-success-bg-subtle);
 }
 
 .diff-grey {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   margin-bottom: 4px;
 }
 
 .diff-red {
-  color: var(--on-support-capella);
-  background: var(--bg-alpha-capella);
+  color: var(--color-intent-danger-text);
+  background: var(--color-intent-danger-bg-subtle);
 }
 
 .diff-buttons {
@@ -201,6 +201,6 @@
 }
 
 .diff-buttons-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   margin-right: 8px;
 }

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

@@ -13,14 +13,14 @@
 }
 
 .test-result-breadcrumb-link {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-breadcrumb {
   display: flex;
   min-width: 0;
   gap: 4px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -20,10 +20,10 @@
   width: 100%;
   align-items: flex-start;
   text-decoration: none;
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 
@@ -31,7 +31,7 @@
   padding-top: 2px;
 
   &[data-unknown] {
-    color: var(--on-text-hint);
+    color: var(--color-text-muted);
   }
 }
 
@@ -45,15 +45,15 @@
 .item-time {
   margin-left: auto;
   line-height: 20px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-history-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-history-item-status {

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

@@ -7,7 +7,7 @@
   left: 0;
   top: 0;
   width: 100%;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
   z-index: 1;
 }
 
@@ -16,8 +16,8 @@
   left: 0;
   top: 0;
   width: 100%;
-  background: var(--bg-base-primary);
-  z-index: 1;
+  background: var(--color-bg-primary);
+  z-index: 2;
 }
 
 .test-result-info-data {
@@ -27,7 +27,7 @@
   margin-bottom: 8px;
 
   & > *:not(:first-child):not(:empty) {
-    border-left: 1px solid var(--on-border-primary);
+    border-left: 1px solid var(--color-border-default);
     padding-left: 12px;
   }
 }
@@ -38,15 +38,15 @@
 }
 
 .test-result-duration {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-category {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-tabs {
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .test-result-tab {
@@ -69,5 +69,5 @@
 
 .metadata-icon {
   margin-right: 8px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }

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

@@ -62,8 +62,8 @@ export type TrLinksProps = {
 
 export const TrLinks: FunctionalComponent<TrLinksProps> = ({ id, links }) => {
   const { t } = useI18n("ui");
-  const linksId = id !== null ? `${id}-links` : null;
-  const linksShowAllId = id !== null ? `${id}-links-showAll` : null;
+  const linksId = id ? `${id}-links` : null;
+  const linksShowAllId = id ? `${id}-links-showAll` : null;
   const isOpened = !collapsedTrees.value.has(linksId);
   const showAll = collapsedTrees.value.has(linksShowAllId);
   const visibleLinks =

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

@@ -7,7 +7,7 @@
 
 .test-result-links-wrapper {
   width: 100%;
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
   padding-bottom: 12px;
 }
 
@@ -19,7 +19,7 @@
 }
 
 .test-result-link-text {
-  color: var(--on-support-aldebaran);
+  color: var(--color-link-text);
 }
 
 .test-result-links-list {

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

@@ -19,7 +19,7 @@ export type TrMetadataProps = {
 export const TrMetadata: FunctionalComponent<TrMetadataProps> = ({ id, testResult }) => {
   const { t } = useI18n("ui");
   const { labels, groupedLabels } = testResult ?? {};
-  const labelsId = id !== null ? `${id}-labels` : null;
+  const labelsId = id ? `${id}-labels` : null;
   const labelsShowAllId = id !== null ? `${id}-labels-showAll` : null;
   const isOpened = !collapsedTrees.value.has(labelsId);
   const entries = groupedLabels ? Object.entries(groupedLabels) : [];

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

@@ -3,6 +3,6 @@
 }
 
 .test-result-metadata-wrapper {
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
   padding-bottom: 12px;
 }

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

@@ -107,7 +107,7 @@ export const TrNavigation = (props: Props) => {
     return null;
   }
 
-  const isHidden = !!testResult?.hidden;
+  const isHidden = !!testResult?.isRetry;
   const hasFullName = !!testResult?.fullName;
 
   // Nothing to show

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

@@ -19,7 +19,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 100%;
-    color: var(--on-text-secondary);
+    color: var(--color-text-secondary);
   }
 }
 
@@ -32,7 +32,7 @@
 }
 
 .counter {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   padding-left: 4px;
   padding-right: 4px;
 }

package/src/components/TestResult/TrOverview.tsx

@@ -11,6 +11,7 @@ import { TrPwTraces } from "@/components/TestResult/TrPwTraces";
 import { TrSetup } from "@/components/TestResult/TrSetup";
 import { TrSteps } from "@/components/TestResult/TrSteps";
 import { TrTeardown } from "@/components/TestResult/TrTeardown";
+import { useTestResultOverviewFocusScroll } from "@/hooks/useTestResultOverviewFocusScroll";
 import { useI18n } from "@/stores/locale";
 import { currentTrId } from "@/stores/testResult";
 
@@ -21,6 +22,7 @@ export type TrOverviewProps = {
 };
 
 export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
+  useTestResultOverviewFocusScroll();
   const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id } = testResult || {};
   const testResultId = id ?? currentTrId.value;
   const { t } = useI18n("ui");

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

@@ -18,7 +18,7 @@ export type TrParametersProps = {
 
 export const TrParameters: FunctionalComponent<TrParametersProps> = ({ id, parameters }) => {
   const { t } = useI18n("ui");
-  const parametersId = id !== null ? `${id}-parameters` : null;
+  const parametersId = id ? `${id}-parameters` : null;
   const parametersShowAllId = id !== null ? `${id}-parameters-showAll` : null;
   const isOpened = !collapsedTrees.value.has(parametersId);
   const list = parameters ?? [];

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

@@ -3,6 +3,6 @@
 }
 
 .test-result-metadata-wrapper {
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
   padding-bottom: 12px;
 }

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

@@ -20,35 +20,35 @@
       top: 0;
       bottom: 0;
       margin: auto;
-      background: var(--on-border-medium);
+      background: var(--color-border-medium);
     }
   }
 }
 
 .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);
 }
 
 .test-result-prev-status-tooltip {
   text-align: center;
-  background-color: var(--constant-bg-base-modal);
-  color: var(--constant-on-text-primary);
+  background-color: var(--color-bg-inverse-raised);
+  color: var(--color-text-inverse);
   padding: 2px 8px;
   border-radius: 6px;
   font-size: 12px;

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

@@ -3,7 +3,7 @@
 }
 
 .tr-metadata-wrapper {
-  border-bottom: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--color-border-default);
   padding-top: 8px;
   padding-bottom: 12px;
 }

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

@@ -29,7 +29,7 @@
   align-items: flex-start;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 
@@ -47,7 +47,7 @@
 .item-time {
   margin-left: auto;
   line-height: 20px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-retries-item-content {
@@ -55,7 +55,7 @@
 }
 
 .test-result-retries-item-link {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-retries-item-status {

package/src/components/TestResult/TrSetup/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,19 +18,24 @@ export type TrSetupProps = {
 };
 
 export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
-  const teardownId = `${id}-setup`;
-  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(teardownId));
+  const setupId = id ? `${id}-setup` : null;
+  const isEarlyCollapsed = setupId ? Boolean(!collapsedTrees.value.has(setupId)) : true;
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
 
   const handleClick = () => {
     setIsOpen(!isOpened);
-    toggleTree(teardownId);
+
+    if (setupId) {
+      toggleTree(setupId);
+    }
   };
   const { t } = useI18n("execution");
 
   return (
     <div className={styles["test-result-steps"]}>
       <TrDropdown
+        className={trOverviewHeaderFocusClass(setupId)}
+        {...trOverviewFocusAttrs(setupId)}
         icon={allureIcons.lineTimeClockStopwatch}
         isOpened={isOpened}
         setIsOpen={handleClick}

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

@@ -2,29 +2,29 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-severity-text {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .severity-blocker {
-  color: var(--on-support-capella);
+  color: var(--color-intent-danger-text);
 }
 
 .severity-critical {
-  color: var(--on-support-atlas);
+  color: var(--color-intent-warning-text);
 }
 
 .severity-normal {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .severity-minor {
-  color: var(--on-support-aldebaran);
+  color: var(--color-intent-primary-text);
 }
 
 .severity-trivial {
-  color: var(--on-support-castor);
+  color: var(--color-intent-success-text);
 }

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

@@ -1,36 +1,3 @@
-.test-result-status {
-  padding: 2px;
-  display: flex;
-  border-radius: 100px;
-  color: var(--constant-on-text-primary);
-  height: max-content;
-}
+@import "~@allurereport/web-components/mixins.scss";
 
-.test-result-status-text {
-  padding: 0 4px;
-}
-
-.test-result-status-icon {
-  color: var(--constant-on-text-primary);
-  padding: 0;
-}
-
-.status-passed {
-  background-color: var(--bg-support-castor);
-}
-
-.status-failed {
-  background-color: var(--bg-support-capella);
-}
-
-.status-broken {
-  background-color: var(--bg-support-atlas);
-}
-
-.status-skipped {
-  background-color: var(--bg-support-rau);
-}
-
-.status-unknown {
-  background-color: var(--bg-support-skat);
-}
+@include status-label-shape("test-result-status", "test-result-status-icon", "test-result-status-text");