@allurereport/web-awesome 3.3.0 → 3.4.0

package/dist/single/{app-8221eb856e47b4ef50d6.js.LICENSE.txt → app-ae966ad3dc27579d6c39.js.LICENSE.txt}

@@ -1,4 +1,4 @@
-/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
+/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
 
 /**
      * Prism: Lightweight, robust, elegant syntax highlighting

package/dist/single/manifest.json

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

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
-    "testing",
+    "html",
     "report",
-    "html"
+    "testing"
   ],
-  "repository": "https://github.com/allure-framework/allure3",
   "license": "Apache-2.0",
   "author": "Qameta Software",
+  "repository": "https://github.com/allure-framework/allure3",
   "type": "module",
   "types": "./types.d.ts",
   "scripts": {
@@ -22,20 +22,16 @@
     "build:prod:multi": "webpack --mode production",
     "build:dev:single": "SINGLE_FILE_MODE=1 webpack --mode development",
     "build:dev:multi": "webpack --mode development",
-    "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "test": "vitest run"
+    "lint": "oxlint --import-plugin src test features stories",
+    "test": "vitest run",
+    "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
-  "browserslist": [
-    "last 1 version",
-    "> 1%",
-    "IE 11"
-  ],
   "dependencies": {
-    "@allurereport/charts-api": "3.3.0",
-    "@allurereport/core-api": "3.3.0",
-    "@allurereport/plugin-api": "3.3.0",
-    "@allurereport/web-commons": "3.3.0",
-    "@allurereport/web-components": "3.3.0",
+    "@allurereport/charts-api": "3.4.0",
+    "@allurereport/core-api": "3.4.0",
+    "@allurereport/plugin-api": "3.4.0",
+    "@allurereport/web-commons": "3.4.0",
+    "@allurereport/web-components": "3.4.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -49,22 +45,17 @@
     "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-typescript": "^7.27.1",
-    "@eslint/js": "^9.10.0",
     "@floating-ui/dom": "^1.6.12",
     "@preact/compat": "^18.3.1",
     "@preact/preset-vite": "^2.10.2",
-    "@stylistic/eslint-plugin": "^2.6.1",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/user-event": "^14.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
-    "@types/eslint": "^8.56.11",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.17.9",
     "@types/prismjs": "^1.26.5",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
     "@vitest/runner": "^3.2.4",
     "@vitest/snapshot": "^3.2.4",
     "allure-vitest": "^3.3.2",
@@ -73,19 +64,6 @@
     "babel-plugin-prismjs": "^2.1.0",
     "css-loader": "^7.1.2",
     "diff": "^8.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-preact": "^1.5.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-compat": "^6.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^50.0.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-n": "^17.10.1",
-    "eslint-plugin-no-null": "^1.0.2",
-    "eslint-plugin-preact": "^0.1.0",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "filesize": "^10.1.6",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "globals": "^15.9.0",
@@ -102,12 +80,16 @@
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.6.0",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.2",
     "webpack-manifest-plugin": "^5.0.0"
-  }
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "IE 11"
+  ]
 }

package/src/components/BaseLayout/index.tsx

@@ -1,9 +1,11 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
+
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
 import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
 export type BaseLayoutProps = {

package/src/components/Categories/CategoriesTree/index.tsx

@@ -1,6 +1,8 @@
 import type { TestCategories } from "@allurereport/core-api";
 import type { FC } from "preact/compat";
+
 import { CategoryTreeItem } from "@/components/Categories/CategoryTreeItem";
+
 import * as styles from "./styles.scss";
 
 export const CategoriesTree: FC<{ store: TestCategories }> = ({ store }) => {

package/src/components/Categories/CategoryHeaderItem/index.tsx

@@ -2,7 +2,9 @@ import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/c
 import { TreeHeader } from "@allurereport/web-components";
 import type { ComponentChildren } from "preact";
 import type { FC } from "preact/compat";
+
 import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
+
 import * as styles from "./styles.scss";
 
 type CategoryHeaderItemProps = CategoryNodeProps & {

package/src/components/Categories/CategoryTreeItem/index.tsx

@@ -2,6 +2,7 @@ import type { CategoryNode, CategoryNodeProps, TestCategories } from "@allurerep
 import { IconButton, TreeItem, allureIcons } from "@allurereport/web-components";
 import type { FC } from "preact/compat";
 import { useState } from "preact/hooks";
+
 import { CategoryHeaderItem } from "@/components/Categories/CategoryHeaderItem";
 import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
 import { HistoryTreeItem } from "@/components/Categories/HistoryTreeItem";
@@ -13,6 +14,7 @@ import { useI18n } from "@/stores/locale";
 import { navigateToTestResult } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
 type CategoryTreeItemProps = CategoryNodeProps & {

package/src/components/Categories/GroupTreeItem/index.tsx

@@ -2,8 +2,10 @@ import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/c
 import { TreeHeader } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren, FC } from "preact/compat";
+
 import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 type GroupTreeItemProps = CategoryNodeProps & {

package/src/components/Categories/HistoryTreeItem/index.tsx

@@ -3,9 +3,11 @@ import { IconButton, TooltipWrapper, TreeHeader, allureIcons } from "@allurerepo
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import type { FC } from "preact/compat";
+
 import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
 import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+
 import * as styles from "./styles.scss";
 
 type HistoryTreeItemProps = CategoryNodeProps & {

package/src/components/Categories/LabelTreeItem/index.tsx

@@ -10,9 +10,11 @@ import { SvgIcon, Text, TreeItemIcon, allureIcons } from "@allurereport/web-comp
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import type { FC } from "preact/compat";
+
 import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
 import { TrStatus } from "@/components/TestResult/TrStatus";
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 type LabelTreeItemProps = CategoryNodeProps & {

package/src/components/Categories/MessageTreeItem/index.tsx

@@ -6,8 +6,10 @@ import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import type { FC } from "preact/compat";
 import { useState } from "preact/hooks";
+
 import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
 import { useI18n } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 type MessageTreeItemProps = CategoryNodeProps & {

package/src/components/Categories/SeverityTreeItem/index.tsx

@@ -1,8 +1,10 @@
 import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/core-api";
 import type { ComponentChildren } from "preact";
 import type { FC } from "preact/compat";
+
 import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
 import { TrSeverity } from "@/components/TestResult/TrSeverity";
+
 import * as styles from "./styles.scss";
 
 type SeverityTreeItemProps = CategoryNodeProps & {

package/src/components/Charts/index.tsx

@@ -23,9 +23,11 @@ import {
 } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
+
 import { chartsStore, fetchChartsData } from "@/stores/chart";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 const currentTheme = computed(() => themeStore.value.current);
@@ -98,6 +100,7 @@ const getChartWidgetByType = (
           data={chartData.data}
           keys={chartData.keys}
           i18n={(key, props = {}) => t(`stabilityDistribution.${key}`, props)}
+          threshold={chartData.threshold}
         />
       );
     }

package/src/components/EnvironmentPicker/index.tsx

@@ -1,12 +1,57 @@
-import { DropdownButton, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import {
+  DropdownButton,
+  Menu,
+  SvgIcon,
+  Text,
+  TooltipWrapper,
+  allureIcons,
+  useElementTruncation,
+} from "@allurereport/web-components";
+import { useEffect, useRef, useState } from "preact/hooks";
+
 import { useI18n } from "@/stores";
-import { currentEnvironment, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+import { currentEnvironment, environmentNameById, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+
 import * as styles from "./styles.scss";
 
+const isOverflowing = (element: HTMLElement) => element.scrollWidth > element.clientWidth;
+
+const EnvironmentMenuItemText = ({ value }: { value: string }) => {
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const element = textRef.current;
+
+    if (!element) {
+      return;
+    }
+
+    setIsTruncated(isOverflowing(element));
+  }, [value]);
+
+  const textNode = (
+    <span ref={textRef} className={styles["environment-picker-item-text"]}>
+      {value}
+    </span>
+  );
+
+  if (!isTruncated) {
+    return textNode;
+  }
+
+  return <TooltipWrapper tooltipText={value}>{textNode}</TooltipWrapper>;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 export const EnvironmentPicker = () => {
   const { t } = useI18n("environments");
-  const environment = currentEnvironment.value;
+  const environmentId = currentEnvironment.value;
+  const selectedEnvironmentLabel = environmentId ? environmentNameById(environmentId) : t("all");
+  const { ref: selectedTextRef, isTruncated: isSelectedValueTruncated } = useElementTruncation<HTMLSpanElement>([
+    selectedEnvironmentLabel,
+  ]);
+
   const handleSelect = (selectedOption: string) => {
     setCurrentEnvironment(selectedOption);
   };
@@ -24,33 +69,48 @@ export const EnvironmentPicker = () => {
       </Text>
       <Menu
         size="s"
-        menuTrigger={({ isOpened, onClick }) => (
-          <DropdownButton
-            style="ghost"
-            size="s"
-            text={environment || t("all")}
-            isExpanded={isOpened}
-            data-testid={"environment-picker-button"}
-            onClick={onClick}
-          />
-        )}
+        menuTrigger={({ isOpened, onClick }) => {
+          const button = (
+            <DropdownButton
+              style="ghost"
+              size="s"
+              text={selectedEnvironmentLabel}
+              textRef={selectedTextRef}
+              isExpanded={isOpened}
+              isTextTruncated
+              className={styles["environment-picker-button"]}
+              data-testid={"environment-picker-button"}
+              onClick={onClick}
+            />
+          );
+
+          if (isOpened || !isSelectedValueTruncated) {
+            return button;
+          }
+
+          return (
+            <TooltipWrapper tooltipText={selectedEnvironmentLabel} data-testid="environment-picker-selected-tooltip">
+              {button}
+            </TooltipWrapper>
+          );
+        }}
       >
         <Menu.Section>
           <Menu.ItemWithCheckmark
             data-testid={"environment-picker-item"}
             onClick={() => handleSelect("")}
-            isChecked={!environment}
+            isChecked={!environmentId}
           >
             {t("all")}
           </Menu.ItemWithCheckmark>
           {environmentsStore.value.data.map((env) => (
             <Menu.ItemWithCheckmark
               data-testid={"environment-picker-item"}
-              onClick={() => handleSelect(env)}
-              key={env}
-              isChecked={env === environment}
+              onClick={() => handleSelect(env.id)}
+              key={env.id}
+              isChecked={env.id === environmentId}
             >
-              {env}
+              <EnvironmentMenuItemText value={env.name} />
             </Menu.ItemWithCheckmark>
           ))}
         </Menu.Section>

package/src/components/EnvironmentPicker/styles.scss

@@ -2,8 +2,27 @@
   display: flex;
   align-items: center;
   gap: 0 4px;
+  min-width: 0;
+
+  > :last-child {
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+  }
 }
 
 .environment-picker-label {
   text-transform: capitalize;
 }
+
+.environment-picker-button {
+  max-width: 100%;
+}
+
+.environment-picker-item-text {
+  display: block;
+  max-width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/Footer/FooterLogo.tsx

@@ -1,4 +1,5 @@
 import { ReportLogoFull, Text } from "@allurereport/web-components";
+
 import * as styles from "./styles.scss";
 
 export const FooterLogo = () => {

package/src/components/Footer/FooterVersion.tsx

@@ -2,7 +2,9 @@ import { getReportOptions } from "@allurereport/web-commons";
 import { Text } from "@allurereport/web-components";
 import { useState } from "preact/hooks";
 import type { AwesomeReportOptions } from "types";
+
 import { currentLocaleIso } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {

package/src/components/Footer/index.tsx

@@ -1,9 +1,11 @@
 import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
-import * as styles from "@/components/BaseLayout/styles.scss";
+
 import { FooterLogo } from "@/components/Footer/FooterLogo";
 import { FooterVersion } from "@/components/Footer/FooterVersion";
 
+import * as styles from "@/components/BaseLayout/styles.scss";
+
 interface FooterProps {
   className?: ClassValue;
 }

package/src/components/Header/CiInfo/index.tsx

@@ -1,9 +1,11 @@
-import { CiDescriptor, CiType } from "@allurereport/core-api";
+import { CiDescriptor, CiType, sanitizeExternalUrl } from "@allurereport/core-api";
 import { getReportOptions } from "@allurereport/web-commons";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
+
 import type { AwesomeReportOptions } from "../../../../types";
+
 import * as styles from "./styles.scss";
 
 interface CiInfoProps {
@@ -50,16 +52,28 @@ export const CiInfo = ({ className }: CiInfoProps) => {
   }
 
   const link = ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl;
+  const safeLink = sanitizeExternalUrl(link);
   const label = ci.pullRequestName || ci.jobRunName || ci.jobName || link;
 
   if (!link) {
     return null;
   }
 
+  if (!safeLink) {
+    return (
+      <span className={clsx(styles["ci-info"], className)}>
+        <CiIcon type={ci.type} />
+        <Text type="paragraph" size="m" bold>
+          {label}
+        </Text>
+      </span>
+    );
+  }
+
   return (
-    <a className={clsx(styles["ci-info"], className)} href={link} target="_blank">
+    <a className={clsx(styles["ci-info"], className)} href={safeLink} target="_blank" rel="noopener noreferrer">
       <CiIcon type={ci.type} />
-      <Text type={"paragraph"} size={"m"} bold>
+      <Text type="paragraph" size="m" bold>
         {label}
       </Text>
     </a>

package/src/components/Header/index.tsx

@@ -1,13 +1,16 @@
 import { computed } from "@preact/signals";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
+
 import { HeaderControls } from "@/components/HeaderControls";
 import { SectionPicker } from "@/components/SectionPicker";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
 import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
+
 import { CiInfo } from "./CiInfo";
+
 import * as styles from "./styles.scss";
 
 interface HeaderProps {

package/src/components/Header/styles.scss

@@ -31,4 +31,5 @@
   display: flex;
   gap: 4px;
   align-items: center;
+  min-width: 0;
 }

package/src/components/HeaderControls/index.tsx

@@ -1,6 +1,7 @@
 import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
 import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
+
 import { EnvironmentPicker } from "@/components/EnvironmentPicker";
 import ToggleLayout from "@/components/ToggleLayout";
 import { currentLocale, setLocale } from "@/stores/locale";

package/src/components/MainReport/index.tsx

@@ -1,6 +1,7 @@
 import { Counter, Loadable } from "@allurereport/web-components";
 import clsx from "clsx";
 import { useEffect } from "preact/hooks";
+
 import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
 import { ReportBody } from "@/components/ReportBody";
 import { ReportCategories } from "@/components/ReportCategories";
@@ -22,7 +23,9 @@ import {
   rootTabRoute,
 } from "@/stores/router";
 import { currentTrId, trCurrentTab } from "@/stores/testResult";
+
 import { ReportQualityGateResults } from "../ReportQualityGateResults";
+
 import * as styles from "./styles.scss";
 
 export enum ReportRootTab {

package/src/components/Metadata/index.tsx

@@ -2,12 +2,14 @@ import { Button, ButtonLink, Menu, Text, allureIcons } from "@allurereport/web-c
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
+
 import { MetadataButton } from "@/components/MetadataButton";
 import type { MetadataProps } from "@/components/ReportMetadata";
 import { useI18n } from "@/stores/locale";
 import { getTagsFilterUrl } from "@/stores/treeFilters/utils";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import { parseOwnerAddress } from "@/utils/ownerAddress";
+
 import * as styles from "./styles.scss";
 
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({

package/src/components/MetadataButton/index.tsx

@@ -1,13 +1,16 @@
-import { ArrowButton, Counter, Text } from "@allurereport/web-components";
+import { ArrowButton, Counter, Text, TooltipWrapper, useElementTruncation } from "@allurereport/web-components";
 import clsx from "clsx";
-import type { FunctionalComponent } from "preact";
+import type { ComponentChildren, FunctionalComponent } from "preact";
+
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {
   isOpened?: boolean;
   setIsOpen: (isOpen: boolean) => void;
   counter?: number;
-  title?: string;
+  title?: ComponentChildren;
+  titleTooltipText?: string;
+  truncateTitle?: boolean;
 }
 
 export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
@@ -15,18 +18,34 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
   setIsOpen,
   counter,
   title,
+  titleTooltipText,
+  truncateTitle = false,
   ...rest
 }) => {
-  return (
+  const { ref: titleRef, isTruncated: isTitleTruncated } = useElementTruncation<HTMLSpanElement>([title], {
+    observeResize: truncateTitle,
+  });
+
+  const titleNode = (
+    <Text size={"m"} bold className={clsx(truncateTitle && styles["report-metadata-title-container"])}>
+      <span ref={titleRef} className={clsx(truncateTitle && styles["report-metadata-title-truncated"])}>
+        {title}
+      </span>
+    </Text>
+  );
+
+  const buttonNode = (
     <button
       {...rest}
-      className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      className={clsx(
+        styles["report-metadata-header"],
+        truncateTitle && styles["report-metadata-header-truncated"],
+        isOpened && styles["report-metadata-header-opened"],
+      )}
       type={"button"}
       onClick={() => setIsOpen(!isOpened)}
     >
-      <Text size={"m"} bold>
-        {title}
-      </Text>
+      {titleNode}
       {!!counter && <Counter count={counter} size="s" />}
       <ArrowButton
         isOpened={isOpened}
@@ -37,4 +56,12 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
       />
     </button>
   );
+
+  const shouldRenderTooltip = !!titleTooltipText && (!truncateTitle || isTitleTruncated);
+
+  if (shouldRenderTooltip) {
+    return <TooltipWrapper tooltipText={titleTooltipText}>{buttonNode}</TooltipWrapper>;
+  }
+
+  return buttonNode;
 };