@allurereport/web-awesome 3.4.1 → 3.5.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-ae966ad3dc27579d6c39.js"
+  "main.js": "app-bbd6e33664f6d94cfaac.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -27,11 +27,11 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.4.1",
-    "@allurereport/core-api": "3.4.1",
-    "@allurereport/plugin-api": "3.4.1",
-    "@allurereport/web-commons": "3.4.1",
-    "@allurereport/web-components": "3.4.1",
+    "@allurereport/charts-api": "3.5.0",
+    "@allurereport/core-api": "3.5.0",
+    "@allurereport/plugin-api": "3.5.0",
+    "@allurereport/web-commons": "3.5.0",
+    "@allurereport/web-components": "3.5.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -80,7 +80,7 @@
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
-    "vite": "^5.4.21",
+    "vite": "^8.0.8",
     "vitest": "^3.2.4",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",

package/src/components/MainReport/index.tsx

@@ -177,17 +177,29 @@ const MainReport = () => {
             />
             <Loadable
               source={globalsStore}
-              renderData={({ attachments = [], errors = [] }) => (
-                <>
-                  <RootTab id={ReportRootTab.GlobalAttachments}>
-                    {t("globalAttachments")} <Counter count={attachments.length} />
-                  </RootTab>
-                  <RootTab id={ReportRootTab.GlobalErrors}>
-                    {t("globalErrors")}{" "}
-                    <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
-                  </RootTab>
-                </>
-              )}
+              renderData={({ attachments = [], attachmentsByEnv = {}, errors = [], errorsByEnv = {} }) => {
+                const currentEnvAttachments = currentEnvironment.value
+                  ? (attachmentsByEnv[currentEnvironment.value] ?? [])
+                  : attachments;
+                const currentEnvErrors = currentEnvironment.value
+                  ? (errorsByEnv[currentEnvironment.value] ?? [])
+                  : errors;
+
+                return (
+                  <>
+                    <RootTab id={ReportRootTab.GlobalAttachments}>
+                      {t("globalAttachments")} <Counter count={currentEnvAttachments.length} />
+                    </RootTab>
+                    <RootTab id={ReportRootTab.GlobalErrors}>
+                      {t("globalErrors")}{" "}
+                      <Counter
+                        status={currentEnvErrors.length > 0 ? "failed" : undefined}
+                        count={currentEnvErrors.length}
+                      />
+                    </RootTab>
+                  </>
+                );
+              }}
             />
           </NavTabsList>
           <div className={styles["main-report-tabs-content"]}>

package/src/components/ReportGlobalAttachments/index.tsx

@@ -1,35 +1,101 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { DEFAULT_ENVIRONMENT, type AttachmentTestStepResult } from "@allurereport/core-api";
+import type { PluginGlobalAttachment } from "@allurereport/plugin-api";
 import { Loadable } from "@allurereport/web-components";
+import { useState } from "preact/hooks";
 
-import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import { MetadataButton } from "@/components/MetadataButton";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { useI18n } from "@/stores";
+import { currentEnvironment, environmentNameById } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
 
-import { AwesomeTestResult } from "../../../types";
-
 import * as styles from "./styles.scss";
 
 export const ReportGlobalAttachments = () => {
   const { t } = useI18n("empty");
+  const { t: tEnvironments } = useI18n("environments");
+  const [collapsedEnvs, setCollapsedEnvs] = useState<string[]>([]);
+
+  const renderAttachmentList = (attachments: PluginGlobalAttachment[]) => {
+    const attachmentSteps: AttachmentTestStepResult[] = attachments.map((attachment) => ({
+      link: attachment,
+      type: "attachment",
+    }));
+
+    return (
+      <div className={styles["report-global-attachments-view"]}>
+        {attachmentSteps.map((attachment, index) => (
+          <TrAttachment
+            item={attachment}
+            key={attachment.link.id ?? `${attachment.link.name}-${index}`}
+            stepIndex={index + 1}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  const renderAttachmentsContent = (attachments: PluginGlobalAttachment[]) => (
+    <div className={styles["report-global-attachments"]}>{renderAttachmentList(attachments)}</div>
+  );
 
   return (
     <Loadable
       source={globalsStore}
-      renderData={({ attachments }) => {
-        if (!attachments.length) {
+      renderData={({ attachments = [], attachmentsByEnv = {} }) => {
+        if (currentEnvironment.value) {
+          const currentEnvAttachments = attachmentsByEnv[currentEnvironment.value] ?? [];
+
+          if (!currentEnvAttachments.length) {
+            return <div className={styles["report-global-attachments-empty"]}>{t("no-attachments-results")}</div>;
+          }
+
+          return renderAttachmentsContent(currentEnvAttachments);
+        }
+
+        const entries = Object.entries(attachmentsByEnv).filter(([, envAttachments]) => envAttachments.length > 0);
+
+        if (!entries.length && !attachments.length) {
           return <div className={styles["report-global-attachments-empty"]}>{t("no-attachments-results")}</div>;
         }
 
-        const attachmentSteps: AttachmentTestStepResult[] = attachments.map((attachment: any) => ({
-          link: attachment,
-          type: "attachment",
-        }));
+        if (!entries.length) {
+          return renderAttachmentsContent(attachments);
+        }
+
+        if (entries.length === 1 && entries[0][0] === DEFAULT_ENVIRONMENT) {
+          return renderAttachmentsContent(entries[0][1] ?? []);
+        }
+
+        if (!attachments.length) {
+          return <div className={styles["report-global-attachments-empty"]}>{t("no-attachments-results")}</div>;
+        }
 
         return (
-          <TrAttachmentView
-            className={styles["report-global-attachments"]}
-            testResult={{ attachments: attachmentSteps } as AwesomeTestResult}
-          />
+          <div className={styles["report-global-attachments"]}>
+            {entries.map(([environmentId, envAttachments]) => {
+              const isOpened = !collapsedEnvs.includes(environmentId);
+              const toggleEnv = () => {
+                setCollapsedEnvs((prev) =>
+                  isOpened ? prev.concat(environmentId) : prev.filter((currentId) => currentId !== environmentId),
+                );
+              };
+
+              return (
+                <div key={environmentId} className={styles["report-global-attachments-section"]}>
+                  <MetadataButton
+                    isOpened={isOpened}
+                    setIsOpen={toggleEnv}
+                    title={`${tEnvironments("environment", { count: 1 })}: "${environmentNameById(environmentId)}"`}
+                    titleTooltipText={environmentNameById(environmentId)}
+                    truncateTitle
+                    counter={envAttachments.length}
+                  />
+                  {isOpened ? renderAttachmentList(envAttachments) : null}
+                </div>
+              );
+            })}
+          </div>
         );
       }}
     />

package/src/components/ReportGlobalAttachments/styles.scss

@@ -1,6 +1,22 @@
 .report-global-attachments {
-  padding-left: 0;
-  padding-right: 0;
+  padding: 12px 0 40px 8px;
+}
+
+.report-global-attachments-view {
+  min-height: 0 !important;
+  padding: 20px 0 8px;
+
+  [data-testid="test-result-attachment-header"] + div {
+    margin-top: 6px;
+  }
+}
+
+.report-global-attachments-section {
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid var(--on-border-muted);
+  }
 }
 
 .report-global-attachments-empty {

package/src/components/ReportGlobalErrors/index.tsx

@@ -1,30 +1,92 @@
+import { DEFAULT_ENVIRONMENT } from "@allurereport/core-api";
+import type { PluginGlobalError } from "@allurereport/plugin-api";
 import { Loadable } from "@allurereport/web-components";
+import { useState } from "preact/hooks";
 
+import { MetadataButton } from "@/components/MetadataButton";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
+import { currentEnvironment, environmentNameById } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
 
 import * as styles from "./styles.scss";
 
 export const ReportGlobalErrors = () => {
   const { t } = useI18n("empty");
+  const { t: tEnvironments } = useI18n("environments");
+  const [collapsedEnvs, setCollapsedEnvs] = useState<string[]>([]);
+
+  const renderErrors = (errors: PluginGlobalError[]) => (
+    <ul className={styles["report-global-errors"]}>
+      {errors.map((error, i) => (
+        <li key={i} className={styles["report-global-errors-item"]}>
+          <TrError {...error} />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const renderErrorsContent = (errors: PluginGlobalError[]) => (
+    <div className={styles["report-global-errors-container"]}>{renderErrors(errors)}</div>
+  );
 
   return (
     <Loadable
       source={globalsStore}
-      renderData={({ errors }) => {
+      renderData={({ errors = [], errorsByEnv = {} }) => {
+        if (currentEnvironment.value) {
+          const currentEnvErrors = errorsByEnv[currentEnvironment.value] ?? [];
+
+          if (!currentEnvErrors.length) {
+            return <div className={styles["report-global-errors-empty"]}>{t("no-global-errors-results")}</div>;
+          }
+
+          return renderErrorsContent(currentEnvErrors);
+        }
+
+        const entries = Object.entries(errorsByEnv).filter(([, envErrors]) => envErrors.length > 0);
+
+        if (!entries.length && !errors.length) {
+          return <div className={styles["report-global-errors-empty"]}>{t("no-global-errors-results")}</div>;
+        }
+
+        if (!entries.length) {
+          return renderErrorsContent(errors);
+        }
+
+        if (entries.length === 1 && entries[0][0] === DEFAULT_ENVIRONMENT) {
+          return renderErrorsContent(entries[0][1] ?? []);
+        }
+
         if (!errors.length) {
           return <div className={styles["report-global-errors-empty"]}>{t("no-global-errors-results")}</div>;
         }
 
         return (
-          <ul className={styles["report-global-errors"]}>
-            {errors.map((error, i) => (
-              <li key={i} style={{ marginBottom: "8px" }}>
-                <TrError {...error} />
-              </li>
-            ))}
-          </ul>
+          <div className={styles["report-global-errors-container"]}>
+            {entries.map(([environmentId, envErrors]) => {
+              const isOpened = !collapsedEnvs.includes(environmentId);
+              const toggleEnv = () => {
+                setCollapsedEnvs((prev) =>
+                  isOpened ? prev.concat(environmentId) : prev.filter((currentId) => currentId !== environmentId),
+                );
+              };
+
+              return (
+                <div key={environmentId} className={styles["report-global-errors-section"]}>
+                  <MetadataButton
+                    isOpened={isOpened}
+                    setIsOpen={toggleEnv}
+                    title={`${tEnvironments("environment", { count: 1 })}: "${environmentNameById(environmentId)}"`}
+                    titleTooltipText={environmentNameById(environmentId)}
+                    truncateTitle
+                    counter={envErrors.length}
+                  />
+                  {isOpened ? renderErrors(envErrors) : null}
+                </div>
+              );
+            })}
+          </div>
         );
       }}
     />

package/src/components/ReportGlobalErrors/styles.scss

@@ -1,9 +1,25 @@
 @import "~@allurereport/web-components/mixins.scss";
 
+.report-global-errors-container {
+  padding: 12px 0 40px 8px;
+}
+
 .report-global-errors {
   padding: 20px 0;
 }
 
+.report-global-errors-item {
+  margin-bottom: 8px;
+}
+
+.report-global-errors-section {
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid var(--on-border-muted);
+  }
+}
+
 .report-global-errors-empty {
   display: flex;
   padding: 48px 0;

package/src/stores/treeSort.ts

@@ -1,5 +1,5 @@
 import { getParamValue, hasParam, setParams } from "@allurereport/web-commons";
-import { computed, effect } from "@preact/signals";
+import { computed, effect, signal } from "@preact/signals";
 
 export type SortByDirection = "asc" | "desc";
 export type SortByField = "order" | "duration" | "status" | "name";
@@ -16,21 +16,6 @@ const SORT_BY_PARAM = "sortBy";
 
 const hasSortByParam = computed(() => hasParam(SORT_BY_PARAM));
 
-export const setSortBy = (sortByValue: SortBy) => {
-  if (hasSortByParam.peek()) {
-    setParams({
-      key: SORT_BY_PARAM,
-      value: undefined,
-    });
-  }
-
-  if (typeof window === "undefined") {
-    return;
-  }
-
-  localStorage.setItem(SORT_BY_STORAGE_KEY, sortByValue);
-};
-
 const validateSortBy = (sortByValue: string): sortByValue is SortBy => {
   const parts = sortByValue.split(",");
   if (parts.length !== 2) {
@@ -41,6 +26,30 @@ const validateSortBy = (sortByValue: string): sortByValue is SortBy => {
   return SORT_BY_FIELDS.includes(field as SortByField) && DIRECTIONS.includes(direction as SortByDirection);
 };
 
+const getInitialSortBy = (): SortBy => {
+  if (typeof window === "undefined") {
+    return DEFAULT_SORT_BY;
+  }
+  const stored = localStorage.getItem(SORT_BY_STORAGE_KEY);
+  if (stored && validateSortBy(stored.toLowerCase())) {
+    return stored.toLowerCase() as SortBy;
+  }
+  return DEFAULT_SORT_BY;
+};
+
+const sortBySignal = signal<SortBy>(getInitialSortBy());
+
+export const setSortBy = (sortByValue: SortBy) => {
+  if (hasSortByParam.peek()) {
+    setParams({
+      key: SORT_BY_PARAM,
+      value: undefined,
+    });
+  }
+
+  sortBySignal.value = sortByValue;
+};
+
 export const sortBy = computed<SortBy>(() => {
   const urlSortBy = getParamValue(SORT_BY_PARAM) ?? undefined;
 
@@ -53,13 +62,7 @@ export const sortBy = computed<SortBy>(() => {
     return DEFAULT_SORT_BY;
   }
 
-  const storageSortBy = localStorage.getItem(SORT_BY_STORAGE_KEY);
-
-  if (storageSortBy && validateSortBy(storageSortBy.toLowerCase())) {
-    return storageSortBy.toLowerCase() as SortBy;
-  }
-
-  return DEFAULT_SORT_BY;
+  return sortBySignal.value;
 });
 
 effect(() => {

package/test/components/ReportGlobals.test.tsx

@@ -0,0 +1,159 @@
+import { signal } from "@preact/signals";
+import { cleanup, render, screen } from "@testing-library/preact";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const environmentNames: Record<string, string> = {
+  prod_env: "Prod",
+  qa_env: "QA",
+};
+
+const setupGlobalsComponent = async (data: Record<string, unknown>) => {
+  vi.resetModules();
+
+  const currentEnvironment = signal("");
+  const globalsStore = signal({
+    loading: false,
+    error: undefined,
+    data,
+  });
+
+  vi.doMock("@allurereport/web-components", () => ({
+    Loadable: ({ source, renderData }: { source: { value: { data: unknown } }; renderData: (data: any) => unknown }) =>
+      renderData(source.value.data),
+  }));
+  vi.doMock("@/stores", () => ({
+    useI18n: () => ({
+      t: (key: string) => key,
+    }),
+  }));
+  vi.doMock("@/stores/env", () => ({
+    currentEnvironment,
+    environmentNameById: (environmentId: string) => environmentNames[environmentId] ?? environmentId,
+  }));
+  vi.doMock("@/stores/globals", () => ({
+    globalsStore,
+  }));
+  vi.doMock("@/components/MetadataButton", () => ({
+    MetadataButton: ({ title, counter }: { title?: string; counter?: number }) => (
+      <div>{counter === undefined ? title : `${title} (${counter})`}</div>
+    ),
+  }));
+  vi.doMock("@/components/TestResult/TrSteps/TrAttachment", () => ({
+    TrAttachment: ({ item }: { item: { link: { name?: string; originalFileName: string } } }) => (
+      <span>{item.link.name ?? item.link.originalFileName}</span>
+    ),
+  }));
+  vi.doMock("@/components/TestResult/TrError", () => ({
+    TrError: ({ message }: { message: string }) => <div>{message}</div>,
+  }));
+};
+
+describe("components > Report globals", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render grouped global attachments using quality-gate style environment sections", async () => {
+    await setupGlobalsComponent({
+      attachments: [
+        {
+          id: "default",
+          name: "default.log",
+          originalFileName: "default.log",
+          ext: ".log",
+          used: true,
+          missed: false,
+          environment: "default",
+        },
+        {
+          id: "qa",
+          name: "qa.log",
+          originalFileName: "qa.log",
+          ext: ".log",
+          used: true,
+          missed: false,
+          environment: "QA",
+        },
+        {
+          id: "prod",
+          name: "prod.log",
+          originalFileName: "prod.log",
+          ext: ".log",
+          used: true,
+          missed: false,
+          environment: "Prod",
+        },
+      ],
+      attachmentsByEnv: {
+        default: [
+          {
+            id: "default",
+            name: "default.log",
+            originalFileName: "default.log",
+            ext: ".log",
+            used: true,
+            missed: false,
+            environment: "default",
+          },
+        ],
+        qa_env: [
+          {
+            id: "qa",
+            name: "qa.log",
+            originalFileName: "qa.log",
+            ext: ".log",
+            used: true,
+            missed: false,
+            environment: "QA",
+          },
+        ],
+        prod_env: [
+          {
+            id: "prod",
+            name: "prod.log",
+            originalFileName: "prod.log",
+            ext: ".log",
+            used: true,
+            missed: false,
+            environment: "Prod",
+          },
+        ],
+      },
+    });
+
+    const { ReportGlobalAttachments } = await import("@/components/ReportGlobalAttachments");
+
+    render(<ReportGlobalAttachments />);
+
+    expect(screen.queryByText(/all/i)).not.toBeInTheDocument();
+    expect(screen.getByText("default.log")).toBeInTheDocument();
+    expect(screen.getByText('environment: "default" (1)')).toBeInTheDocument();
+    expect(screen.getByText('environment: "QA" (1)')).toBeInTheDocument();
+    expect(screen.getByText('environment: "Prod" (1)')).toBeInTheDocument();
+  }, 15000);
+
+  it("should render grouped global errors using quality-gate style environment sections", async () => {
+    await setupGlobalsComponent({
+      errors: [
+        { message: "Default failure", environment: "default" },
+        { message: "QA failure", environment: "QA" },
+        { message: "Prod failure", environment: "Prod" },
+      ],
+      errorsByEnv: {
+        default: [{ message: "Default failure", environment: "default" }],
+        qa_env: [{ message: "QA failure", environment: "QA" }],
+        prod_env: [{ message: "Prod failure", environment: "Prod" }],
+      },
+    });
+
+    const { ReportGlobalErrors } = await import("@/components/ReportGlobalErrors");
+
+    render(<ReportGlobalErrors />);
+
+    expect(screen.queryByText(/all/i)).not.toBeInTheDocument();
+    expect(screen.getByText("Default failure")).toBeInTheDocument();
+    expect(screen.getByText('environment: "default" (1)')).toBeInTheDocument();
+    expect(screen.getByText('environment: "QA" (1)')).toBeInTheDocument();
+    expect(screen.getByText('environment: "Prod" (1)')).toBeInTheDocument();
+  }, 15000);
+});