npm - @allurereport/web-classic - Versions diffs - 3.1.0 → 3.2.0 - Mend

@allurereport/web-classic 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/single/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-0a173e3f1e0c5c003891.js"
+  "main.js": "app-5b0e25f6b516905c3adc.js"
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-classic",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "The static files for Allure Classic Report",
   "keywords": [
     "allure",
@@ -31,10 +31,10 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.1.0",
-    "@allurereport/core-api": "3.1.0",
-    "@allurereport/web-commons": "3.1.0",
-    "@allurereport/web-components": "3.1.0",
+    "@allurereport/charts-api": "3.2.0",
+    "@allurereport/core-api": "3.2.0",
+    "@allurereport/web-commons": "3.2.0",
+    "@allurereport/web-components": "3.2.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -42,7 +42,6 @@
     "md5": "^2.3.0",
     "preact": "^10.28.2",
     "prismjs": "^1.30.0",
-    "reset.css": "^2.0.2",
     "split.js": "^1.6.5"
   },
   "devDependencies": {

package/src/components/TestResult/TestResultDescription/index.tsx CHANGED Viewed

@@ -1,25 +1,75 @@
-import { Text } from "@allurereport/web-components";
+import { proseStyles, resolveCssVarDeclarations, sanitizeIframeHtml, themeStore } from "@allurereport/web-commons";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import type { ClassicTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 export type TestResultDescriptionProps = {
-  description: ClassicTestResult["description"];
+  descriptionHtml: ClassicTestResult["descriptionHtml"];
 };
-export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+const MIN_HEIGHT = 120;
+export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ descriptionHtml }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [blobUrl, setBlobUrl] = useState("");
+  const [height, setHeight] = useState(MIN_HEIGHT);
+  const currentTheme = themeStore.value.current;
+  const sanitized = useMemo(() => (descriptionHtml ? sanitizeIframeHtml(descriptionHtml) : ""), [descriptionHtml]);
+  useEffect(() => {
+    if (!sanitized) {
+      setBlobUrl("");
+      return;
+    }
+    const iframeThemeVars = resolveCssVarDeclarations(proseStyles);
+    const html = `<!DOCTYPE html>
+    <html data-theme="${currentTheme}">
+      <head>
+        <meta charset="utf-8">
+        <style>:root {${iframeThemeVars}}</style>
+        <style>${proseStyles}</style>
+      </head>
+      <body>${sanitized}</body>
+    </html>`;
+    const blob = new Blob([html], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    setBlobUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [currentTheme, sanitized]);
+  const handleLoad = (e: Event) => {
+    const iframe = e.currentTarget as HTMLIFrameElement;
+    const documentElement = iframe.contentDocument?.documentElement;
+    const body = iframe.contentDocument?.body;
+    const scrollHeight = Math.max(documentElement?.scrollHeight ?? 0, body?.scrollHeight ?? 0);
+    setHeight(Math.max(scrollHeight, MIN_HEIGHT));
+  };
   return (
-    <div className={styles["test-result-description"]}>
+    <div className={styles["test-result-description"]} data-testid="test-result-description">
       <div className={styles["test-result-description-wrapper"]}>
-        <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
+        <MetadataButton title="Description" setIsOpen={setIsOpen} isOpened={isOpen} />
         {isOpen && (
-          <Text tag={"p"} className={styles["test-result-description-text"]}>
-            {description || "Description mock"}
-          </Text>
+          <div className={styles["test-result-description-text"]}>
+            {blobUrl && (
+              <iframe
+                data-testid="test-result-description-frame"
+                src={blobUrl}
+                width="100%"
+                height={String(height)}
+                style={{ border: 0 }}
+                sandbox="allow-same-origin"
+                onLoad={handleLoad}
+              />
+            )}
+          </div>
         )}
       </div>
     </div>

package/src/components/TestResult/TestResultDescription/styles.scss CHANGED Viewed

@@ -9,4 +9,8 @@
 .test-result-description-text {
   padding-top: 10px;
+  iframe {
+    display: block;
+  }
 }

package/src/components/TestResult/TestResultOverview.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export type TestResultOverviewProps = {
 };
 export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
-  const { error, parameters, groupedLabels, links, description, setup, steps, teardown } = testResult || {};
+  const { error, parameters, groupedLabels, links, descriptionHtml, setup, steps, teardown } = testResult || {};
   return (
     <>
@@ -29,7 +29,7 @@ export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> =
         <TestResultMetadata testResult={testResult} />
       )}
       {Boolean(links?.length) && <TestResultLinks links={links} />}
-      {Boolean(description) && <TestResultDescription description={description} />}
+      {Boolean(descriptionHtml) && <TestResultDescription descriptionHtml={descriptionHtml} />}
       <div className={styles["test-results"]}>
         {Boolean(setup?.length) && <TestResultSetup setup={setup} />}
         {Boolean(steps?.length) && <TestResultSteps steps={steps} />}

package/src/stores/locale.ts CHANGED Viewed

@@ -52,7 +52,8 @@ i18next
       callback: (errorValue: unknown, translations: Record<string, string> | null) => void,
     ) => {
       try {
-        const resources = await import(`@/translations/${language}.json`);
+        const loadLocale = language === "en-iso" ? "en" : language;
+        const resources = await import(`@/translations/${loadLocale}.json`);
         callback(null, (resources[namespace] as Record<string, string>) || null);
       } catch (error) {
         callback(error, null);

package/src/translations/constants.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export const AVAILABLE_LOCALES = [
   "en",
+  "en-iso",
   "ru",
   "pl",
   "es",
@@ -31,92 +32,97 @@ export const LANG_LOCALE: Record<
     iso: string;
   }
 > = {
-  en: {
+  "en": {
     short: "Eng",
     full: "English",
     iso: "en-US",
   },
-  ru: {
+  "en-iso": {
+    short: "En ISO",
+    full: "English (ISO-8601)",
+    iso: "en-CA",
+  },
+  "ru": {
     short: "Ру",
     full: "Русский",
     iso: "ru-RU",
   },
-  pl: {
+  "pl": {
     short: "Pl",
     full: "Polski",
     iso: "pl-PL",
   },
-  es: {
+  "es": {
     short: "Es",
     full: "Español",
     iso: "es-ES",
   },
-  pt: {
+  "pt": {
     short: "Pt",
     full: "Português",
     iso: "pt-PT",
   },
-  de: {
+  "de": {
     short: "De",
     full: "Deutsch",
     iso: "de-DE",
   },
-  am: {
+  "am": {
     short: "Am",
     full: "Հայերեն",
     iso: "hy-AM",
   },
-  az: {
+  "az": {
     short: "Az",
     full: "Azərbaycan",
     iso: "az-AZ",
   },
-  fr: {
+  "fr": {
     short: "Fr",
     full: "Français",
     iso: "fr-FR",
   },
-  it: {
+  "it": {
     short: "It",
     full: "Italiano",
     iso: "it-IT",
   },
-  ja: {
+  "ja": {
     short: "Ja",
     full: "日本語",
     iso: "ja-JP",
   },
-  he: {
+  "he": {
     short: "He",
     full: "עברית",
     iso: "he-IL",
   },
-  ka: {
+  "ka": {
     short: "Ka",
     full: "ქართული",
     iso: "ka-GE",
   },
-  kr: {
+  "kr": {
     short: "Kr",
     full: "한국어",
     iso: "kr-KR",
   },
-  nl: {
+  "nl": {
     short: "Nl",
     full: "Nederlands",
     iso: "nl-NL",
   },
-  sv: {
+  "sv": {
     short: "Sv",
     full: "Svenska",
     iso: "sv-SE",
   },
-  tr: {
+  "tr": {
     short: "Tr",
     full: "Türkçe",
     iso: "tr-TR",
   },
-  zh: {
+  "zh": {
     short: "Zh",
     full: "中文",
     iso: "zh-CN",

package/src/utils/time.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { useI18n } from "@/stores/locale";
+import { getLocaleDateTimeOverride } from "@allurereport/web-commons";
+import { currentLocale, currentLocaleIso, useI18n } from "@/stores/locale";
 const defaultOptions: Intl.DateTimeFormatOptions = {
   month: "numeric",
@@ -12,6 +13,19 @@ const defaultOptions: Intl.DateTimeFormatOptions = {
 export const timestampToDate = (timestamp: number, options = defaultOptions) => {
   const date = new Date(timestamp);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useI18n("ui");
-  return new Intl.DateTimeFormat("en-US", options).format(date).replace(",", ` ${t("at")}`);
+  const kind = options.second ? "dateTime" : options.hour || options.minute ? "dateTimeNoSeconds" : "date";
+  const override = getLocaleDateTimeOverride(currentLocale.value, kind);
+  const formatter = new Intl.DateTimeFormat(override?.locale ?? (currentLocaleIso.value as string), {
+    ...options,
+    ...(override?.options ?? {}),
+  });
+  const formatted = formatter.format(date);
+  if (override?.includeAtSeparator === false || override?.stripComma) {
+    return formatted.replace(",", "");
+  }
+  return formatted.replace(",", ` ${t("at")}`);
 };

package/types.d.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export type ClassicReportOptions = {
   logo?: string;
   theme?: "light" | "dark" | "auto";
   groupBy?: string[];
-  reportLanguage?: "en";
+  reportLanguage?: string;
   createdAt: number;
   reportUuid: string;
   allureVersion?: string;