@allurereport/web-awesome 3.8.2 → 3.10.0

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

@@ -29,7 +29,7 @@
   border-radius: 4px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 

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

@@ -20,6 +20,6 @@
 }
 
 .test-result-thumb-text {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   flex: 1 1 auto;
 }

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

@@ -3,7 +3,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--bg-control-flat-medium);
+      background: var(--color-row-bg-hover);
     }
   }
 }
@@ -44,15 +44,15 @@
 .test-result-environment-item-time {
   margin-left: auto;
   line-height: 20px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-environment-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-environment-item-status {

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

@@ -15,15 +15,15 @@ import * as styles from "./styles.scss";
 
 const TrErrorTrace = ({ trace }: { trace: string }) => {
   const sanitizedTrace = ansiToHTML(trace, {
-    fg: "var(--on-text-primary)",
+    fg: "var(--color-text-primary)",
     bg: "none",
     colors: {
       0: "none",
       1: "none",
-      2: "var(--on-support-sirius)",
-      3: "var(--on-support-atlas)",
-      4: "var(--bg-support-skat)",
-      5: "var(--on-support-betelgeuse)",
+      2: "var(--color-intent-info-text)",
+      3: "var(--color-intent-warning-text)",
+      4: "var(--color-status-unknown-chart)",
+      5: "var(--color-syntax-type)",
     },
   });
 
@@ -55,7 +55,7 @@ export const TrError: FunctionalComponent<
   const sanitizedMessage =
     showMessage && message
       ? ansiToHTML(message, {
-          fg: "var(--on-text-primary)",
+          fg: "var(--color-text-primary)",
           colors: {},
         })
       : "";
@@ -98,7 +98,32 @@ export const TrError: FunctionalComponent<
       ) : showMessage ? (
         empty("no-message-provided")
       ) : null}
-      {hasDiff && (
+      {!showMessage && message && (
+        <div className={styles["test-result-error-header"]}>
+          {hasDiff ? (
+            <Button
+              style={"flat"}
+              data-testId={"test-result-diff-button"}
+              size={"s"}
+              text={tooltip("showDiff")}
+              onClick={openDiff}
+            />
+          ) : (
+            <span />
+          )}
+          <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+            <IconButton
+              style={"ghost"}
+              size={"s"}
+              icon={allureIcons.lineGeneralCopy3}
+              onClick={() => {
+                copyToClipboard(message);
+              }}
+            />
+          </TooltipWrapper>
+        </div>
+      )}
+      {(showMessage || !message) && hasDiff && (
         <Button
           style={"flat"}
           data-testId={"test-result-diff-button"}

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/TrRetriesItem.tsx

@@ -4,6 +4,7 @@ import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
 
+import { hasErrorDiff } from "@/components/TestResult/bodyItems";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores/locale";
 import { navigateToTestResult } from "@/stores/router";
@@ -22,13 +23,15 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
   const [isOpened, setIsOpen] = useState(false);
 
   const { t } = useI18n("ui");
+  const { t: controls } = useI18n("controls");
 
   const retryTitlePrefix = t("attempt", { attempt, total: totalAttempts });
   const convertedStop = stop ? timestampToDate(stop) : undefined;
   const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
 
   const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
-  const hasErrorDetails = Boolean(error?.trace || error?.message);
+  const errorPreview = getErrorPreview(error, controls("comparison"));
+  const hasErrorDetails = Boolean(errorPreview);
 
   return (
     <div data-testid="test-result-retries-item">
@@ -45,6 +48,16 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
           <Text data-testid="test-result-retries-item-text" className={styles["test-result-retries-item-text"]}>
             {retryTitle}
           </Text>
+          {errorPreview && (
+            <Text
+              data-testid="test-result-retries-item-error-preview"
+              type="ui"
+              size="s"
+              className={styles["test-result-retries-item-error-preview"]}
+            >
+              {errorPreview}
+            </Text>
+          )}
           <div className={styles["test-result-retries-item-info"]}>
             {Boolean(formattedDuration) && (
               <Text type="ui" size={"s"} className={styles["item-time"]}>
@@ -70,3 +83,16 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
     </div>
   );
 };
+
+const getErrorPreview = (error: AwesomeTestResult["error"], diffPreview: string) => {
+  const message = error?.message?.trim();
+  if (message) return message;
+
+  const tracePreview = error?.trace
+    ?.split(/\r?\n/)
+    .map((line) => line.trim())
+    .find(Boolean);
+  if (tracePreview) return tracePreview;
+
+  if (hasErrorDiff(error)) return diffPreview;
+};

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

@@ -20,34 +20,44 @@
 
 .test-result-retries-item-wrap {
   transition: background-color 300ms;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) max-content;
   gap: 4px;
-  justify-content: space-between;
   border-radius: 6px;
   padding: 4px;
   width: 100%;
-  align-items: flex-start;
+  align-items: center;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-row-bg-hover);
   }
 }
 
 .test-result-retries-item-text {
-  padding-top: 2px;
+  flex: 0 0 auto;
+}
+
+.test-result-retries-item-error-preview {
+  flex: 1 1 auto;
+  color: var(--on-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 
 .test-result-retries-item-info {
   display: flex;
   gap: 4px;
   align-items: center;
-  margin-left: auto;
+  justify-content: flex-end;
+  margin-left: 8px;
 }
 
 .item-time {
-  margin-left: auto;
-  line-height: 20px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
+  line-height: 16px;
+  white-space: nowrap;
 }
 
 .test-result-retries-item-content {
@@ -55,7 +65,7 @@
 }
 
 .test-result-retries-item-link {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-retries-item-status {