@allurereport/web-awesome 3.0.1 → 3.2.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/ReportSearch/index.tsx

@@ -0,0 +1,29 @@
+import { SearchBox } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeQueryFilter, treeQueryFilterValue } from "@/stores/treeFilters/store";
+
+const handleQuerySearch = (value: string) => {
+  if (!value) {
+    setTreeQueryFilter(undefined);
+    return;
+  }
+
+  setTreeQueryFilter(value);
+};
+
+const QuerySearch = () => {
+  const { t } = useI18n("search");
+
+  return (
+    <SearchBox
+      placeholder={t("search-placeholder")}
+      value={treeQueryFilterValue.value}
+      onChange={handleQuerySearch}
+      changeDebounce={150}
+    />
+  );
+};
+
+export const ReportSearch = () => {
+  return <QuerySearch />;
+};

package/src/components/ReportTabs/index.tsx

@@ -2,7 +2,7 @@ import { Text } from "@allurereport/web-components";
 import { useComputed } from "@preact/signals";
 import { type ComponentChildren } from "preact";
 import { useCallback } from "preact/hooks";
-import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
 import type { AwesomeStatus } from "../../../types.js";
 import * as styles from "./styles.scss";
 

package/src/components/SectionPicker/index.tsx

@@ -37,7 +37,7 @@ export const SectionPicker = () => {
       )}
     >
       <Menu.Section>
-        {["default", ...availableSections.value].map((value) => (
+        {["default", ...availableSections].map((value) => (
           <Menu.ItemWithCheckmark
             onClick={() => setSection(value)}
             key={value}

package/src/components/SplitLayout/index.tsx

@@ -1,11 +1,13 @@
 import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
-import { route } from "@/stores/router";
+import { testResultRoute } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -28,8 +30,10 @@ const Loader = () => {
   );
 };
 
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+
 export const SplitLayout = () => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const testResultId = currentTrId.value;
   const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
   const { t } = useI18n("controls");
   const leftSide = (
@@ -37,7 +41,7 @@ export const SplitLayout = () => {
   );
 
   const TrView = () => {
-    return testResultId ? (
+    return isTestResultRoute.value ? (
       <Loadable
         source={testResultStore}
         renderLoader={() => <Loader />}

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/TrEnvironmentItem/index.tsx

@@ -5,7 +5,7 @@ import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
-import { navigateTo, openInNewTab } from "@/stores/router";
+import { navigateToTestResult, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 import type { AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
@@ -42,7 +42,7 @@ export const TrEnvironmentItem: FunctionalComponent<{
             }
 
             e.stopPropagation();
-            navigateTo(navigateUrl);
+            navigateToTestResult({ testResultId: id });
           }}
         >
           <TreeItemIcon status={status} className={styles["test-result-environment-item-status"]} />

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/TrHeader/TrBreadcrumbs.tsx

@@ -2,7 +2,7 @@ import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-compon
 import clsx from "clsx";
 import type { AwesomeTestResult } from "types";
 import * as styles from "@/components/TestResult/TrHeader/styles.scss";
-import { navigateTo } from "@/stores/router";
+import { navigateToRoot } from "@/stores/router";
 
 interface TrBreadcrumbs {
   testResult?: AwesomeTestResult;
@@ -19,7 +19,7 @@ export const TrBreadcrumbs = ({ testResult }: TrBreadcrumbs) => {
           size={"s"}
           style={"ghost"}
           className={styles["test-result-breadcrumb-link"]}
-          onClick={() => navigateTo("")}
+          onClick={() => navigateToRoot()}
         />
       </div>
       {Boolean(breadcrumbs?.length) &&

package/src/components/TestResult/TrHistory/TrHistoryItem.tsx

@@ -9,15 +9,45 @@ import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
 
-export const TrHistoryItem: FunctionalComponent<{
-  testResultItem: HistoryTestResult;
-}> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
+type Props = {
+  historyTr: HistoryTestResult;
+};
+
+const getDate = (historyTr: HistoryTestResult) => {
+  const { stop, duration, start } = historyTr;
+
+  if (stop) {
+    return timestampToDate(stop);
+  }
+
+  if (start && duration) {
+    return timestampToDate(start + duration);
+  }
+
+  return undefined;
+};
+
+const HistoryDate = (props: { date: string | undefined }) => {
+  const { t } = useI18n("trHistory");
+  const { date } = props;
+
+  return (
+    <Text data-unknown={!date || undefined} className={styles["test-result-history-item-text"]}>
+      {date ?? t("unknown-date")}
+    </Text>
+  );
+};
+
+export const TrHistoryItem: FunctionalComponent<Props> = (props) => {
   const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
-  const { status, error, stop, duration, id, url } = testResultItem;
+  const { historyTr } = props;
+  const { status, error, duration, id, url } = historyTr;
   const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const historyDate = getDate(historyTr);
   const formattedDuration = duration ? formatDuration(duration) : undefined;
+
   const { t } = useI18n("controls");
+
   const navigateUrl = useMemo(() => {
     if (!url) {
       return undefined;
@@ -29,7 +59,8 @@ export const TrHistoryItem: FunctionalComponent<{
     navUrl.hash = id;
 
     return navUrl.toString();
-  }, [reportOptions, id, url]);
+  }, [id, url]);
+
   const renderExternalLink = () => {
     if (!navigateUrl) {
       return null;
@@ -55,7 +86,7 @@ export const TrHistoryItem: FunctionalComponent<{
     return (
       <>
         <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
-        {convertedStop && <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>}
+        <HistoryDate date={historyDate} />
         <div className={styles["test-result-history-item-info"]}>
           {formattedDuration && (
             <Text type="ui" size={"s"} className={styles["item-time"]}>

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

@@ -1,24 +1,34 @@
+import { EmptyView } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
+import { type AwesomeTestResult } from "@/../types";
 import { TrHistoryItem } from "@/components/TestResult/TrHistory/TrHistoryItem";
 import { useI18n } from "@/stores";
-import { type AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export type TrHistoryViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TrHistoryView: FunctionalComponent<TrHistoryViewProps> = ({ testResult }) => {
-  const { history } = testResult ?? {};
+const TrHistoryView: FunctionalComponent<TrHistoryViewProps> = (props) => {
+  const { testResult = {} as AwesomeTestResult } = props;
+  const { history = [] } = testResult;
   const { t } = useI18n("empty");
 
+  const hasHistory = history.length > 0;
+
+  if (!hasHistory) {
+    return (
+      <div className={styles["test-result-history"]}>
+        <EmptyView description={t("no-history-results")} />
+      </div>
+    );
+  }
+
   return (
     <div className={styles["test-result-history"]}>
-      {history.length ? (
-        history?.map((item, key) => <TrHistoryItem testResultItem={item} key={key} />)
-      ) : (
-        <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
-      )}
+      {history.map((item, key) => (
+        <TrHistoryItem key={key} historyTr={item} />
+      ))}
     </div>
   );
 };

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

@@ -29,6 +29,10 @@
 
 .test-result-history-item-text {
   padding-top: 2px;
+
+  &[data-unknown] {
+    color: var(--on-text-hint);
+  }
 }
 
 .test-result-history-item-info {
@@ -55,10 +59,3 @@
 .test-result-history-item-status {
   padding-top: 4px;
 }
-
-.test-result-empty {
-  display: flex;
-  padding: 48px 0;
-  width: 100%;
-  justify-content: center;
-}

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

@@ -34,6 +34,7 @@
 
 .test-result-name {
   margin-bottom: 8px;
+  word-break: break-word;
 }
 
 .test-result-duration {

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>}