@allurereport/web-awesome 3.1.0 → 3.3.0

package/src/components/ReportQualityGateResults/index.tsx

@@ -1,40 +1,98 @@
+import { DEFAULT_ENVIRONMENT } from "@allurereport/core-api";
+import type { QualityGateValidationResult } from "@allurereport/plugin-api";
 import { Loadable, SvgIcon, Text, allureIcons } 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 } from "@/stores/env";
 import { qualityGateStore } from "@/stores/qualityGate";
 import * as styles from "./styles.scss";
 
+const QualityGateResultsList = ({ results }: { results: QualityGateValidationResult[] }) => (
+  <ul className={styles["report-quality-gate-results-list"]} data-testid={"quality-gate-results-section-env-content"}>
+    {results.map((result) => (
+      <li key={result.rule} data-testid="quality-gate-result">
+        <div className={styles["report-quality-gate-result"]}>
+          <SvgIcon id={allureIcons.solidXCircle} className={styles["report-quality-gate-result-icon"]} />
+          <div className={styles["report-quality-gate-result-content"]}>
+            <Text tag="p" size="l" type="ui" bold data-testid="quality-gate-result-rule">
+              {result.rule}
+            </Text>
+            <TrError
+              className={styles["report-quality-gate-result-error"]}
+              message={result.message}
+              data-testid="quality-gate-result-message"
+            />
+          </div>
+        </div>
+      </li>
+    ))}
+  </ul>
+);
+
 export const ReportQualityGateResults = () => {
   const { t } = useI18n("empty");
+  const { t: tEnvironments } = useI18n("environments");
+  const [collapsedEnvs, setCollapsedEnvs] = useState<string[]>([]);
 
   return (
     <Loadable
       source={qualityGateStore}
       renderData={(results) => {
-        if (!results.length) {
+        if (currentEnvironment.value) {
+          const currentEnvResults = results[currentEnvironment.value] ?? [];
+
+          if (!currentEnvResults.length) {
+            return <div className={styles["report-quality-gate-results-empty"]}>{t("no-quality-gate-results")}</div>;
+          }
+
+          return <QualityGateResultsList results={currentEnvResults} />;
+        }
+
+        const entries = Object.entries(results).filter(([, envResults]) => envResults.length > 0);
+
+        if (!entries.length) {
           return <div className={styles["report-quality-gate-results-empty"]}>{t("no-quality-gate-results")}</div>;
         }
 
+        // single default environment
+        if (entries.length === 1 && entries[0][0] === DEFAULT_ENVIRONMENT) {
+          const currentEnvResults = entries[0][1] ?? [];
+
+          if (!currentEnvResults.length) {
+            return <div className={styles["report-quality-gate-results-empty"]}>{t("no-quality-gate-results")}</div>;
+          }
+
+          return <QualityGateResultsList results={currentEnvResults} />;
+        }
+
         return (
-          <ul className={styles["report-quality-gate-results"]}>
-            {results.map((result) => (
-              <li key={result.rule} data-testid="report-quality-gate-result">
-                <div className={styles["report-quality-gate-result"]}>
-                  <SvgIcon id={allureIcons.solidXCircle} className={styles["report-quality-gate-result-icon"]} />
-                  <div className={styles["report-quality-gate-result-content"]}>
-                    <Text tag="p" size="l" type="ui" bold data-testid="report-quality-gate-result-rule">
-                      {result.rule}
-                    </Text>
-                    <TrError
-                      className={styles["report-quality-gate-result-error"]}
-                      message={result.message}
-                      data-testid="report-quality-gate-result-message"
-                    />
-                  </div>
+          <div className={styles["report-quality-gate-results"]}>
+            {entries.map(([env, envResults]) => {
+              const isOpened = !collapsedEnvs.includes(env);
+              const toggleEnv = () => {
+                setCollapsedEnvs((prev) => (isOpened ? prev.concat(env) : prev.filter((e) => e !== env)));
+              };
+
+              return (
+                <div
+                  key={env}
+                  className={styles["report-quality-gate-section"]}
+                  data-testid={"quality-gate-results-section"}
+                >
+                  <MetadataButton
+                    isOpened={isOpened}
+                    setIsOpen={toggleEnv}
+                    title={`${tEnvironments("environment", { count: 1 })}: "${env}"`}
+                    counter={envResults.length}
+                    data-testid={"quality-gate-results-section-env-button"}
+                  />
+                  {isOpened && <QualityGateResultsList results={envResults} />}
                 </div>
-              </li>
-            ))}
-          </ul>
+              );
+            })}
+          </div>
         );
       }}
     />

package/src/components/ReportQualityGateResults/styles.scss

@@ -1,6 +1,11 @@
 @import "~@allurereport/web-components/mixins.scss";
 
 .report-quality-gate-results {
+  padding: 12px 0 32px 8px;
+  min-height: 320px;
+}
+
+.report-quality-gate-results-list {
   padding: 20px 0;
 
   & > li + li {
@@ -42,3 +47,11 @@
 .report-quality-gate-result-error {
   margin-top: 8px;
 }
+
+.report-quality-gate-section {
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid var(--on-border-muted);
+  }
+}

package/src/components/SplitLayout/index.tsx

@@ -6,7 +6,7 @@ import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
-import { testResultRoute } from "@/stores/router";
+import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
@@ -30,7 +30,9 @@ const Loader = () => {
   );
 };
 
-const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const isTestResultRoute = computed(
+  () => testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId),
+);
 
 export const SplitLayout = () => {
   const testResultId = currentTrId.value;

package/src/components/SplitLayout/styles.scss

@@ -22,6 +22,7 @@
   overflow: hidden;
   overflow-y: scroll;
   position: relative;
+  min-height: 100%;
 }
 
 .test-results {

package/src/components/TestResult/TrDescription/index.tsx

@@ -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 { AwesomeTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
 export type TrDescriptionProps = {
-  description: AwesomeTestResult["description"];
+  descriptionHtml: AwesomeTestResult["descriptionHtml"];
 };
 
-export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ description }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+const MIN_HEIGHT = 120;
+
+export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ 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}
-          </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/TrDescription/styles.scss

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

package/src/components/TestResult/TrError/TrDiff.tsx

@@ -1,5 +1,5 @@
 import { Button, Code, CodeViewer } from "@allurereport/web-components";
-import type { BaseOptions, Change } from "diff";
+import type { Change } from "diff";
 import { diffChars, diffLines, diffWords } from "diff";
 import { useState } from "preact/hooks";
 import * as styles from "@/components/TestResult/TrError/styles.scss";
@@ -33,11 +33,7 @@ export const TrDiff = ({ expected, actual }: { expected: string; actual: string
   };
   const changeTypeDiff = (type: DiffType = "chars") => {
     const diffFn = diffFunctions[type];
-    const result = (diffFn as (oldStr: string, newStr: string, options?: BaseOptions) => Change[])(
-      expected,
-      actual,
-      {},
-    );
+    const result: Change[] = diffFn(expected, actual, {});
 
     setDiffType(type);
     setDiff(result);

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

@@ -128,6 +128,10 @@
   &:hover {
     background: inherit;
   }
+
+  pre {
+    white-space: pre-wrap;
+  }
 }
 
 .diff {

package/src/components/TestResult/TrInfo/index.tsx

@@ -21,10 +21,12 @@ export type TrInfoProps = {
 };
 
 export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
-  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
+  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop, categories } =
+    testResult ?? {};
   const formattedDuration = formatDuration(duration as number);
   const fullDate = stop && timestampToDate(stop);
   const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
+  const categoryName = categories?.[0]?.name;
   const { t } = useI18n("ui");
   const statuses = Object.entries({ flaky, muted, known }).filter(([, value]) => value);
 
@@ -41,6 +43,11 @@ export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
           {Boolean(history?.length) && <TrPrevStatuses history={history} />}
           <TrSeverity severity={severity} />
           {Boolean(statuses.length) && <TrInfoStatuses statuses={statuses} />}
+          {categoryName && (
+            <Text tag={"div"} size={"s"} className={styles["test-result-category"]}>
+              {t("category")}: {categoryName}
+            </Text>
+          )}
           <TooltipWrapper tooltipText={fullDate}>
             <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
               {formattedDuration}

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

@@ -41,6 +41,10 @@
   color: var(--on-text-secondary);
 }
 
+.test-result-category {
+  color: var(--on-text-secondary);
+}
+
 .test-result-tabs {
   border-bottom: 1px solid var(--on-border-primary);
 }

package/src/components/TestResult/TrLinks/index.tsx

@@ -22,13 +22,13 @@ const linksIconMap: Record<string, string> = {
 const TrLink: FunctionalComponent<{
   link: TrLinkProps;
 }> = ({ link }) => {
-  const { url, type } = link;
+  const { url, name, type } = link;
 
   return (
-    <div className={styles["test-result-link"]}>
+    <div className={styles["test-result-link"]} data-testid="test-result-meta-link">
       <SvgIcon id={linksIconMap[type] ?? allureIcons.lineGeneralLink1} />
       <Text tag={"a"} href={url} target={"_blank"} size={"m"} className={styles["test-result-link-text"]}>
-        {url}
+        {name || url}
       </Text>
     </div>
   );
@@ -46,7 +46,7 @@ export const TrLinks: FunctionalComponent<TrLinksProps> = ({ links }) => {
   });
 
   return (
-    <div className={styles["test-result-links"]}>
+    <div className={styles["test-result-links"]} data-testid="test-result-meta-links">
       <div className={styles["test-result-links-wrapper"]}>
         <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={links.length} title={t("links")} />
         {isOpened && <div className={styles["test-result-links-list"]}>{linkMap}</div>}

package/src/components/TestResult/TrOverview.tsx

@@ -17,7 +17,8 @@ export type TrOverviewProps = {
 };
 
 export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
-  const { error, parameters, groupedLabels, links, description, setup, steps, teardown, id, status } = testResult || {};
+  const { error, parameters, groupedLabels, links, descriptionHtml, setup, steps, teardown, id, status } =
+    testResult || {};
   const isNoSteps = !setup?.length && !steps.length && !teardown.length;
   const pwTraces = testResult?.attachments?.filter(
     (attachment) => attachment.link.contentType === "application/vnd.allure.playwright-trace",
@@ -34,7 +35,7 @@ export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult })
       {Boolean(parameters?.length) && <TrParameters parameters={parameters} />}
       {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && <TrMetadata testResult={testResult} />}
       {Boolean(links?.length) && <TrLinks links={links} />}
-      {Boolean(description) && <TrDescription description={description} />}
+      {Boolean(descriptionHtml) && <TrDescription descriptionHtml={descriptionHtml} />}
       <div className={styles["test-results"]}>
         {isNoSteps && <TestStepsEmpty />}
         {Boolean(setup?.length) && <TrSetup id={id} setup={setup} />}

package/src/components/TestResult/TrSeverity/index.tsx

@@ -10,17 +10,26 @@ const icons: Record<string, string> = {
   normal: allureIcons.lineGeneralEqual,
   minor: allureIcons.lineArrowsChevronDown,
   trivial: allureIcons.lineArrowsChevronDownDouble,
+  none: allureIcons.lineGeneralXClose,
 };
 
-export const TrSeverity = ({ severity = "normal" }: { severity?: string }) => {
+export const TrSeverity = ({
+  severity = "normal",
+  text = "",
+  size = "s",
+}: {
+  severity?: string;
+  text?: string;
+  size?: "s" | "m";
+}) => {
   const { t } = useI18n("severity");
   const statusClass = clsx(styles[`severity-${severity}`]);
 
   return (
     <div className={styles["test-result-severity"]}>
-      <SvgIcon className={statusClass} id={icons[severity]} />
-      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
-        {capitalize(t(severity))}
+      <SvgIcon className={statusClass} id={icons[severity]} size={size} />
+      <Text size={size} bold className={styles["test-result-severity-text"]}>
+        {text || capitalize(t(severity))}
       </Text>
     </div>
   );

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

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  color: var(--on-text-secondary);
 }
 
 .test-result-severity-text {

package/src/components/TestResult/TrTabs/index.tsx

@@ -15,6 +15,11 @@ export const TrTab = (props: { id: string; children: ComponentChildren }) => {
       return;
     }
 
+    if (id === "overview") {
+      navigateToTestResultTab({ testResultId: currentTrId.value, tab: "" });
+      return;
+    }
+
     navigateToTestResultTab({ testResultId: currentTrId.value, tab: id });
   };
 

package/src/components/Timeline/index.tsx

@@ -7,12 +7,9 @@ import type { TimlineTr } from "@/stores/timeline";
 import { fetchTimelineData, timelineStore } from "@/stores/timeline";
 import * as styles from "./styles.scss";
 
-const getHosts = (tests: TimlineTr[]) => [
-  ...new Set(tests.map((test) => test.labels.find((label) => label.name === "host")?.value).filter(Boolean)),
-];
+const getHosts = (tests: TimlineTr[]) => [...new Set(tests.map((test) => test.host))];
 
-const filterTestsByHost = (tests: TimlineTr[], host: string) =>
-  tests.filter((test) => test.labels.find((label) => label.name === "host")?.value === host);
+const filterTestsByHost = (tests: TimlineTr[], host: string) => tests.filter((test) => test.host === host);
 
 const currentTimelineData = computed(() => {
   const tests = timelineStore.value.data ?? [];

package/src/index.tsx

@@ -11,6 +11,7 @@ import { Header } from "@/components/Header";
 import { ModalComponent } from "@/components/Modal";
 import { SectionSwitcher } from "@/components/SectionSwitcher";
 import { fetchEnvStats, fetchReportStats, getLocale, waitForI18next } from "@/stores";
+import { fetchCategoriesData } from "@/stores/categories";
 import { fetchPieChartData } from "@/stores/chart";
 import { currentEnvironment, environmentsStore, fetchEnvironments } from "@/stores/env";
 import { fetchEnvInfo } from "@/stores/envInfo";
@@ -20,7 +21,7 @@ import { fetchTestResult, fetchTestResultNav } from "@/stores/testResults";
 import { fetchEnvTreesData } from "@/stores/tree";
 import { isMac } from "@/utils/isMac";
 import { fetchQualityGateResults } from "./stores/qualityGate";
-import { testResultRoute } from "./stores/router";
+import { rootTabRoute, testResultRoute } from "./stores/router";
 import { currentSection } from "./stores/sections";
 import { currentTrId } from "./stores/testResult";
 import { fetchTreeFiltersData } from "./stores/treeFilters/actions";
@@ -36,7 +37,9 @@ const Loader = () => {
   );
 };
 
-const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const isTestResultRoute = computed(
+  () => testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId),
+);
 
 const App = () => {
   const className = styles[`layout-${currentSection.value !== "default" ? currentSection.value : layoutStore.value}`];
@@ -51,6 +54,7 @@ const App = () => {
       fetchEnvInfo,
       fetchGlobals,
       fetchQualityGateResults,
+      fetchCategoriesData,
     ];
 
     if (globalThis) {