@allurereport/web-dashboard 3.3.1 → 3.4.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-a4723ecfb6c2e831c7c0.js"
+  "main.js": "app-31fba1f25f971fe4047e.js"
 }

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@allurereport/web-dashboard",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "The static files for Allure Dashboard 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,19 +22,15 @@
     "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.1",
-    "@allurereport/core-api": "3.3.1",
-    "@allurereport/web-commons": "3.3.1",
-    "@allurereport/web-components": "3.3.1",
+    "@allurereport/charts-api": "3.4.0",
+    "@allurereport/core-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",
     "i18next": "^24.0.2",
@@ -45,17 +41,12 @@
     "@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",
-    "@stylistic/eslint-plugin": "^2.6.1",
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
     "@types/diff": "^7",
-    "@types/eslint": "^8.56.11",
     "@types/node": "^20.17.9",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
     "@vitest/runner": "^2.1.9",
     "@vitest/snapshot": "^2.1.9",
     "allure-vitest": "^3.3.3",
@@ -63,19 +54,6 @@
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
     "css-loader": "^7.1.2",
-    "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",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "globals": "^15.9.0",
     "html-webpack-plugin": "^5.6.3",
@@ -88,11 +66,15 @@
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.6.0",
     "vitest": "^2.1.9",
     "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,6 +1,8 @@
 import type { FC } from "preact/compat";
+
 import { Footer } from "@/components/Footer";
 import MainReport from "@/components/MainReport";
+
 import * as styles from "./styles.scss";
 
 export type BaseLayoutProps = {};

package/src/components/Dashboard/index.tsx

@@ -22,9 +22,11 @@ import {
 } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
+
 import { dashboardStore, fetchDashboardData } from "@/stores/dashboard";
 import { currentEnvironment, fetchEnvironments } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 const currentTheme = computed(() => themeStore.value.current);
@@ -97,6 +99,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 { currentEnvironment, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+import {
+  DropdownButton,
+  Menu,
+  SvgIcon,
+  Text,
+  TooltipWrapper,
+  allureIcons,
+  useElementTruncation,
+} from "@allurereport/web-components";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+import { currentEnvironment, environmentNameById, environmentsStore, setCurrentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
+
 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 { useEffect, useState } from "preact/hooks";
 import type { DashboardReportOptions } from "types";
+
 import { currentLocaleIso } from "@/stores/locale";
+
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {

package/src/components/Footer/index.tsx

@@ -1,8 +1,10 @@
 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";
+
 export const Footer = () => {
   return (
     <div className={clsx(styles.below)}>

package/src/components/Header/index.tsx

@@ -3,8 +3,11 @@ import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
+
 import { currentLocale, setLocale } from "@/stores/locale";
+
 import { EnvironmentPicker } from "../EnvironmentPicker";
+
 import * as styles from "./styles.scss";
 
 interface HeaderProps {

package/src/components/Header/styles.scss

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

package/src/index.tsx

@@ -1,10 +1,13 @@
 import { ensureReportDataReady } from "@allurereport/web-commons";
+
 import "@allurereport/web-components/index.css";
 import { render } from "preact";
+
 import "@/assets/scss/index.scss";
 import { BaseLayout } from "@/components/BaseLayout";
 import { getLocale, waitForI18next } from "@/stores/locale";
 import { isMac } from "@/utils/isMac";
+
 import * as styles from "./styles.scss";
 
 const App = () => (

package/src/locales/ar.json

@@ -0,0 +1,227 @@
+{
+  "statuses": {
+    "passed": "ناجح",
+    "failed": "فشل",
+    "broken": "معطل",
+    "skipped": "تم تجاوزه",
+    "unknown": "غير معروف",
+    "total": "الإجمالي"
+  },
+  "empty": {
+    "no-results": "لا توجد نتائج",
+    "no-history-results": "لا تتوفر معلومات عن السجل"
+  },
+  "severity": {
+    "blocker": "مانع",
+    "critical": "خطورة عالية",
+    "normal": "عادي",
+    "minor": "ثانوي",
+    "trivial": "بسيط"
+  },
+  "environments": {
+    "environment_one": "بيئة",
+    "environment_other": "بيئات",
+    "all": "الكل"
+  },
+  "charts": {
+    "trend": {
+      "title": "مخطط الاتجاه: {{type}}",
+      "type": {
+        "status": "الحالة",
+        "severity": "الخطورة"
+      }
+    },
+    "currentStatus": {
+      "title": "الحالة الحالية",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "percentage": "{{percentage}}%",
+      "of": "من {{total}}",
+      "total": "{{total}}",
+      "tests": {
+        "new_zero": "لا توجد اختبارات جديدة",
+        "new_one": "{{count}} اختبار جديد",
+        "new_other": "{{count}} اختبارات جديدة",
+        "flaky_zero": "لا توجد اختبارات غير مستقرة",
+        "flaky_one": "{{count}} اختبار غير مستقر",
+        "flaky_other": "{{count}} اختبارات غير مستقرة",
+        "retries_zero": "لا توجد اختبارات مُعاد محاولتها",
+        "retries_one": "{{count}} اختبار مُعاد محاولته",
+        "retries_other": "{{count}} اختبارات مُعاد محاولتها"
+      }
+    },
+    "statusDynamics": {
+      "title": "تطورات الحالة",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "no-history": "$t(empty:no-history-results)",
+      "no-results": "$t(empty:no-results)",
+      "tooltips": {
+        "current": "أحدث تقرير ({{timestamp, timestamp_long_no_seconds}})",
+        "history": "تقرير من {{timestamp, timestamp_long_no_seconds}}"
+      },
+      "ticks": {
+        "current": "الأحدث",
+        "history": "{{timestamp, timestamp_date}}"
+      }
+    },
+    "statusTransitions": {
+      "title": "انتقالات الحالة",
+      "legend": {
+        "trend": "معدل الإصلاح"
+      },
+      "transitions": {
+        "new": "$t(transitions:new, capitalize)",
+        "fixed": "$t(transitions:fixed, capitalize)",
+        "regressed": "$t(transitions:regressed, capitalize)",
+        "malfunctioned": "$t(transitions:malfunctioned, capitalize)"
+      },
+      "no-history": "$t(empty:no-history-results)",
+      "no-results": "$t(empty:no-results)",
+      "tooltips": {
+        "current": "أحدث تقرير ({{timestamp, timestamp_long_no_seconds}})",
+        "history": "تقرير من {{timestamp, timestamp_long_no_seconds}}"
+      },
+      "ticks": {
+        "current": "الأحدث",
+        "history": "{{timestamp, timestamp_date}}"
+      }
+    },
+    "durations": {
+      "title": "مدد حسب {{groupBy}} - مخطط بياني",
+      "title_none": "مخطط بياني للمدد",
+      "no-results": "$t(empty:no-results)",
+      "groupBy": {
+        "none": "لا شيء",
+        "layer": "الطبقة"
+      },
+      "ticks": {
+        "durationRange": "{{from, format_duration}} - {{to, format_duration}}"
+      },
+      "tooltips": {
+        "durationRange": "{{from, format_duration}} - {{to, format_duration}}"
+      },
+      "legend": {
+        "value": "{{value}}",
+        "total": "عدد الاختبارات"
+      }
+    },
+    "stabilityDistribution": {
+      "title": "توزيع الاستقرار",
+      "no-results": "$t(empty:no-results)",
+      "legend": {
+        "stabilityRate": "معدل الاستقرار"
+      }
+    },
+    "testBaseGrowthDynamics": {
+      "title": "نمو قاعدة الاختبارات",
+      "status": {
+        "newpassed": "جديد $t(statuses:passed)",
+        "newfailed": "جديد $t(statuses:failed)",
+        "newbroken": "جديد $t(statuses:broken)",
+        "newskipped": "جديد $t(statuses:skipped)",
+        "newunknown": "جديد $t(statuses:unknown)",
+        "removedpassed": "محذوف $t(statuses:passed)",
+        "removedfailed": "محذوف $t(statuses:failed)",
+        "removedbroken": "محذوف $t(statuses:broken)",
+        "removedskipped": "محذوف $t(statuses:skipped)",
+        "removedunknown": "محذوف $t(statuses:unknown)"
+      },
+      "legend": {
+        "trend": "اتجاه النمو"
+      },
+      "no-history": "$t(empty:no-history-results)",
+      "no-results": "$t(empty:no-results)",
+      "tooltips": {
+        "current": "أحدث تقرير ({{timestamp, timestamp_long_no_seconds}})",
+        "history": "تقرير من {{timestamp, timestamp_long_no_seconds}}"
+      },
+      "ticks": {
+        "current": "الأحدث",
+        "history": "{{timestamp, timestamp_date}}"
+      }
+    },
+    "statusAgePyramid": {
+      "title": "هرم عمر الحالة",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "no-history": "$t(empty:no-history-results)",
+      "no-results": "$t(empty:no-results)",
+      "tooltips": {
+        "current": "أحدث تقرير ({{timestamp, timestamp_long_no_seconds}})",
+        "history": "تقرير من {{timestamp, timestamp_long_no_seconds}}"
+      },
+      "ticks": {
+        "current": "الأحدث",
+        "history": "{{timestamp, timestamp_date}}"
+      }
+    },
+    "trSeverities": {
+      "title": "نتائج الاختبارات حسب الخطورة",
+      "no-results": "$t(empty:no-results)",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "severity": {
+        "blocker": "$t(severity:blocker, capitalize)",
+        "critical": "$t(severity:critical, capitalize)",
+        "normal": "$t(severity:normal, capitalize)",
+        "minor": "$t(severity:minor, capitalize)",
+        "trivial": "$t(severity:trivial, capitalize)",
+        "unset": "بدون خطورة"
+      }
+    },
+    "durationDynamics": {
+      "title": "تطورات المدة",
+      "durations": {
+        "sequential": "المدة التسلسلية",
+        "duration": "مدة الاختبار",
+        "speedup": "التسريع"
+      },
+      "no-results": "$t(empty:no-results)",
+      "tooltips": {
+        "current": "أحدث تقرير ({{timestamp, timestamp_long_no_seconds}})",
+        "history": "تقرير من {{timestamp, timestamp_long_no_seconds}}"
+      },
+      "ticks": {
+        "current": "الأحدث",
+        "history": "{{timestamp, timestamp_date}}"
+      },
+      "legend": {
+        "duration": "{{duration, format_duration}}",
+        "speedup": "{{speedup}}x"
+      }
+    }
+  },
+  "transitions": {
+    "description": {
+      "new": "أول ظهور لنتيجة الاختبار هذه في التقرير",
+      "fixed": "اختبار كان \"فشل\" أو \"معطل\" سابقاً وأصبح الآن \"ناجح\"",
+      "regressed": "اختبار كان \"ناجح\" أو \"معطل\" سابقاً وأصبح الآن \"فشل\"",
+      "malfunctioned": "اختبار كان \"ناجح\" أو \"فشل\" سابقاً وأصبح الآن \"معطل\""
+    },
+    "new": "جديد",
+    "fixed": "تم الإصلاح",
+    "regressed": "تراجع",
+    "malfunctioned": "خلل وظيفي"
+  }
+}