@allurereport/web-classic 3.8.2 → 3.9.0

package/src/components/ReportBody/styles.scss

@@ -28,7 +28,7 @@
 /* This is a hack because button do not have this state */
 .filtersBtnWithFilters > button::after {
   content: "";
-  background-color: var(--bg-support-aldebaran);
+  background-color: var(--color-intent-primary-bg);
   width: 6px;
   height: 6px;
   border-radius: 100px;

package/src/components/TestResult/TestResultError/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;
@@ -14,7 +14,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: var(--on-support-capella);
+    background: var(--color-status-failed-border);
   }
 }
 
@@ -27,7 +27,7 @@
 .test-result-error-text {
   margin-bottom: 8px;
   padding-left: 8px;
-  color: var(--on-support-capella);
+  color: var(--color-status-failed-text);
 }
 
 .test-result-error-trace {
@@ -50,6 +50,6 @@
   transition: background-color 300ms;
 
   &:hover {
-    background: var(--bg-alpha-capella);
+    background: var(--color-status-failed-bg-subtle);
   }
 }

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

@@ -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/TestResultNavigation/index.tsx

@@ -44,7 +44,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}
-            {data && !testResult?.hidden && (
+            {data && !testResult?.isRetry && (
               <div className={styles["test-result-navigator"]}>
                 <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
                   <IconButton

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

@@ -26,23 +26,23 @@
 }
 
 .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 {

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

@@ -9,11 +9,11 @@
 }
 
 .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 {
@@ -21,9 +21,9 @@
 }
 
 .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/TestResultStatus/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");

package/src/components/TestResult/TestResultSteps/attachment.tsx

@@ -1,5 +1,5 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Spinner } from "@allurereport/web-components";
+import { MarkdownPreview, Spinner } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
@@ -22,13 +22,17 @@ const componentsByAttachmentType: Record<string, any> = {
   css: AttachmentCode,
   table: AttachmentCode,
   html: AttachmentCode,
+  markdown: AttachmentCode,
   text: AttachmentCode,
   video: AttachmentVideo,
 };
 const previewComponentsByAttachmentType: Record<string, any> = {
   html: HtmlAttachmentPreview,
+  markdown: MarkdownPreview,
 };
 
+const DUAL_VIEW_ATTACHMENT_TYPES = new Set(["html", "markdown"]);
+
 export interface AttachmentTestStepResultProps {
   item: AttachmentTestStepResult;
   previewable?: boolean;
@@ -61,8 +65,26 @@ export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({
     );
   }
 
+  const defaultRenderedPreview = attachmentComponent.type === "markdown" || attachmentComponent.type === "html";
+  const showPreview =
+    !!CurrentPreviewComponent &&
+    (defaultRenderedPreview ? !previewable || modalData.value.preview : !!(previewable && modalData.value.preview));
+
+  if (DUAL_VIEW_ATTACHMENT_TYPES.has(attachmentComponent.type) && CurrentPreviewComponent && CurrentComponent) {
+    return (
+      <div className={styles.attachmentViewStack}>
+        <div className={styles.attachmentViewPane} hidden={showPreview}>
+          <CurrentComponent attachment={attachment} item={item} />
+        </div>
+        <div className={styles.attachmentViewPane} hidden={!showPreview}>
+          <CurrentPreviewComponent attachment={attachment} item={item} />
+        </div>
+      </div>
+    );
+  }
+
   // temp solution before modal component refactoring
-  if (CurrentPreviewComponent && previewable && modalData.value.preview) {
+  if (showPreview) {
     return <CurrentPreviewComponent attachment={attachment} item={item} />;
   }
 

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

@@ -2,7 +2,7 @@
   padding-right: 24px;
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -12,19 +12,19 @@
 
 .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;
 }
 
 .test-result-attachment-content {
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .test-result-attachment-content-wrapper {
@@ -46,7 +46,7 @@
   min-height: 32px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -63,7 +63,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;
@@ -72,7 +72,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;
@@ -82,7 +82,7 @@
   margin-left: auto;
   display: flex;
   gap: 8px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   align-items: center;
   flex: 0 0 auto;
 }
@@ -91,7 +91,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   min-width: 52px;
   justify-content: flex-end;
 }
@@ -103,7 +103,7 @@
 }
 
 .item-info-step-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-step-chevron {
@@ -126,7 +126,7 @@
   padding: 4px 8px 4px 6px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -140,7 +140,7 @@
 }
 
 .test-result-attachment-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   padding: 2px 4px;
   height: max-content;
 }
@@ -189,7 +189,7 @@
 }
 
 .item-button {
-  color: var(--bg-control-flat);
+  color: var(--color-control-bg-ghost);
 }
 
 .wrong-attachment-sign {
@@ -199,7 +199,7 @@
 }
 
 .test-result-attachment-missed {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   line-height: 20px;
   margin-right: auto;
   padding-top: 2px;
@@ -217,6 +217,14 @@
   width: 24px;
 }
 
+.attachmentViewStack {
+  width: 100%;
+}
+
+.attachmentViewPane[hidden] {
+  display: none !important;
+}
+
 .html-attachment-preview {
   padding: 0 16px;
 }

package/src/components/TestResult/TestResultSteps/testResultAttachmentInfo.tsx

@@ -35,6 +35,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
     openModal({
       data: item,
       component: <Attachment item={item} previewable={true} />,
+      preview: contentType === "text/markdown" || contentType === "text/html",
     });
   };
 

package/src/components/TestResult/TestResultSteps/testResultStep.tsx

@@ -1,5 +1,5 @@
 import type { DefaultTestStepResult } from "@allurereport/core-api";
-import { Code, Text, allureIcons } from "@allurereport/web-components";
+import { Code, LinkifiedText, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 
@@ -71,7 +71,7 @@ export const TestResultStep: FunctionComponent<{
         <Code size={"s"} className={styles["test-result-step-number"]}>
           {stepIndex}
         </Code>
-        <Text className={styles["test-result-header-text"]}>{item.name}</Text>
+        <LinkifiedText className={styles["test-result-header-text"]} text={item.name} />
         <TestResultStepInfo item={item} />
       </div>
       {hasContent && isOpened && <TestResultStepsContent item={item} />}

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

@@ -45,7 +45,7 @@
     cursor: default;
 
     &:after {
-      border-bottom: 2px solid var(--on-support-aldebaran);
+      border-bottom: 2px solid var(--color-link-text);
     }
 
     span {

package/src/components/Tree/TreeHeader.tsx

@@ -70,7 +70,7 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
               {categoryTitle}
             </Text>
             {treeHeaderBar && (
-              <div className={styles["tree-header-bar"]} style={{ width: `${width}px` }}>
+              <div className={styles["tree-header-bar"]} style={{ minWidth: `${width}px` }}>
                 {treeHeaderBar}
               </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);
   }
 }
 
@@ -19,7 +19,7 @@
   padding: 4px 8px 4px 6px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -53,15 +53,15 @@
   position: relative;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 .tree-item-marked {
-  background: var(--bg-base-secondary);
+  background: var(--color-bg-secondary);
 }
 
 .item-title {
@@ -71,7 +71,7 @@
 .item-time {
   flex: none;
   margin-left: auto;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
 }
 
 .test-count {
@@ -83,7 +83,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 {
@@ -92,71 +92,76 @@
 }
 
 .status-passed {
-  color: var(--bg-support-castor);
+  color: var(--color-status-passed-bg);
 }
 
 .status-failed {
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-bg);
 }
 
 .status-broken {
-  color: var(--bg-support-atlas);
+  color: var(--color-status-broken-bg);
 }
 
 .status-skipped {
-  color: var(--bg-support-rau);
+  color: var(--color-status-skipped-bg);
 }
 
 .status-unknown {
-  color: var(--bg-support-skat);
+  color: var(--color-status-unknown-bg);
 }
 
 .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);
   }
 }
 
@@ -166,7 +171,7 @@
 }
 
 .tree-empty-results-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .tree-empty-results-clear-button {
@@ -175,7 +180,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;

package/src/index.html

@@ -12,11 +12,11 @@
     <script>
       window.allureReportOptions = {
         reportName: "Allure Classic Report (Dev)",
-        logo: "/data/logo.jpg",
+        logo: "",
         theme: "light",
-        reportLanguage: "ru",
+        reportLanguage: "en",
         createdAt: 1731513697651,
-        groupBy: "suite",
+        groupBy: ["epic", "feature", "story"],
       };
     </script>
   </head>

package/src/utils/attachments.ts

@@ -29,6 +29,7 @@ export const fetchAttachment = async (id: string, ext: string, contentType: stri
     case "uri":
     case "code":
     case "html":
+    case "markdown":
     case "table":
     case "text": {
       const text = await response.text();
@@ -105,6 +106,11 @@ export const attachmentType = (type: string) => {
         type: "text",
         icon: "txt",
       };
+    case "text/markdown":
+      return {
+        type: "markdown",
+        icon: "file",
+      };
     case "text/html":
       return {
         type: "html",

package/test/dummy.test.ts

@@ -1,4 +1,12 @@
-import { describe, expect, it } from "vitest";
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it } from "vitest";
+
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("plugin-classic");
+  await story("dummy");
+  await label("coverage", "plugin-classic");
+});
 
 describe("dummy", () => {
   it("works", () => {

package/test/utils/treeFilters.test.ts

@@ -1,8 +1,16 @@
-import { describe, expect, it } from "vitest";
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import { createRecursiveTree, filterLeaves } from "../../src/utils/treeFilters.js";
 import type { ClassicTestResult } from "../../types.js";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("filters");
+  await story("treeFilters");
+  await label("coverage", "filters");
+});
+
 describe("utils > treeFilters", () => {
   describe("filterLeaves", () => {
     it("returns the leaves as is when no filter options are provided", () => {

package/types.d.ts

@@ -51,6 +51,7 @@ export type ClassicTestResult = Omit<
   | "preconditionHtml"
   | "steps"
 > & {
+  isRetry: boolean;
   setup: ClassicFixtureResult[];
   teardown: ClassicFixtureResult[];
   steps: ClassicTestStepResult[];