@allurereport/web-awesome 3.3.0 → 3.4.0

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

@@ -3,10 +3,12 @@ import { Loadable } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrEnvironmentItem } from "@/components/TestResult/TrEnvironmentItem";
 import { useI18n } from "@/stores";
-import { testEnvGroupsStore } from "@/stores/env";
+import { environmentNameById, testEnvGroupsStore } from "@/stores/env";
 import { fetchTestResult, testResultStore } from "@/stores/testResults";
+
 import * as styles from "./styles.scss";
 
 export const TrEnvironmentSection: FunctionalComponent<{
@@ -50,7 +52,11 @@ export const TrEnvironmentsView: FunctionalComponent<{
               {envs.map(([env, trId]) => {
                 return (
                   <li key={`${env}-${trId}`}>
-                    <TrEnvironmentSection env={env} testResultId={trId} activeTestResultId={testResult.id} />
+                    <TrEnvironmentSection
+                      env={environmentNameById(env)}
+                      testResultId={trId}
+                      activeTestResultId={testResult.id}
+                    />
                   </li>
                 );
               })}

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

@@ -2,9 +2,11 @@ import { Button, Code, CodeViewer } from "@allurereport/web-components";
 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";
+
 import { useI18n } from "@/stores";
 
+import * as styles from "@/components/TestResult/TrError/styles.scss";
+
 const diffFunctions = {
   chars: diffChars,
   words: diffWords,

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

@@ -4,10 +4,13 @@ import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@al
 import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
+
+import { hasErrorDiff } from "@/components/TestResult/bodyItems";
 import { TrDiff } from "@/components/TestResult/TrError/TrDiff";
 import { useI18n } from "@/stores/locale";
 import { openModal } from "@/stores/modal";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+
 import * as styles from "./styles.scss";
 
 const TrErrorTrace = ({ trace }: { trace: string }) => {
@@ -34,29 +37,28 @@ const TrErrorTrace = ({ trace }: { trace: string }) => {
   );
 };
 
-export const TrError: FunctionalComponent<TestError & { className?: string; status?: TestStatus }> = ({
-  className,
-  message = "",
-  trace,
-  actual,
-  expected,
-  status,
-  ...rest
-}) => {
+export const TrError: FunctionalComponent<
+  TestError & { className?: string; status?: TestStatus; showMessage?: boolean }
+> = ({ className, message = "", trace, actual, expected, status, showMessage = true, ...rest }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useI18n("ui");
   const { t: tooltip } = useI18n("controls");
   const { t: empty } = useI18n("empty");
+  const hasTrace = Boolean(trace?.length);
+  const hasDiff = hasErrorDiff({ actual, expected });
   const openDiff = () =>
     openModal({
       title: tooltip("comparison"),
       data: { actual, expected },
       component: <TrDiff actual={actual} expected={expected} />,
     });
-  const sanitizedMessage = ansiToHTML(message, {
-    fg: "var(--on-text-primary)",
-    colors: {},
-  });
+  const sanitizedMessage =
+    showMessage && message
+      ? ansiToHTML(message, {
+          fg: "var(--on-text-primary)",
+          colors: {},
+        })
+      : "";
 
   return (
     <div
@@ -64,7 +66,7 @@ export const TrError: FunctionalComponent<TestError & { className?: string; stat
       className={clsx(styles["test-result-error"], styles[`tr-status-${status}`], className)}
       {...rest}
     >
-      {message ? (
+      {showMessage && message ? (
         <>
           <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
             <Text
@@ -93,10 +95,10 @@ export const TrError: FunctionalComponent<TestError & { className?: string; stat
             </Code>
           </div>
         </>
-      ) : (
+      ) : showMessage ? (
         empty("no-message-provided")
-      )}
-      {Boolean(actual && actual !== "undefined" && expected && expected !== "undefined") && (
+      ) : null}
+      {hasDiff && (
         <Button
           style={"flat"}
           data-testId={"test-result-diff-button"}
@@ -105,7 +107,7 @@ export const TrError: FunctionalComponent<TestError & { className?: string; stat
           onClick={openDiff}
         />
       )}
-      {isOpen && Boolean(trace?.length) && <TrErrorTrace trace={trace} />}
+      {(isOpen || !showMessage) && hasTrace && <TrErrorTrace trace={trace} />}
     </div>
   );
 };

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

@@ -13,8 +13,6 @@
     position: absolute;
     left: 0;
     top: 0;
-    //background: var(--on-support-capella);
-    //background: var(--on-support-capella);
   }
 }
 
@@ -85,29 +83,6 @@
   color: var(--on-support-skat);
 }
 
-.tr-bg-failed {
-  background: var(--bg-support-capella);
-}
-
-.tr-bg-broken {
-  background: var(--bg-support-atlas);
-}
-
-.tr-bg-skipped {
-  background: var(--bg-support-rau);
-}
-
-.tr-bg-passed {
-  background: var(--bg-support-castor);
-}
-
-.tr-bg-failed {
-  background: var(--bg-support-capella);
-}
-.tr-bg-unknown {
-  background: var(--bg-support-skat);
-}
-
 .test-result-error-trace {
   margin-top: 8px;
   padding-left: 8px;

package/src/components/TestResult/TrHeader/TrBreadcrumbs.tsx

@@ -1,9 +1,11 @@
 import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TrHeader/styles.scss";
+
 import { navigateToRoot } from "@/stores/router";
 
+import * as styles from "@/components/TestResult/TrHeader/styles.scss";
+
 interface TrBreadcrumbs {
   testResult?: AwesomeTestResult;
 }

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

@@ -1,8 +1,10 @@
 import type { FunctionalComponent } from "preact";
+
 import { HeaderControls } from "@/components/HeaderControls";
 import type { TrProps } from "@/components/TestResult";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
 import { isSplitMode } from "@/stores/layout";
+
 import * as styles from "./styles.scss";
 
 export const TrHeader: FunctionalComponent<TrProps> = ({ testResult }) => {

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

@@ -42,6 +42,7 @@
   margin-left: auto;
   display: flex;
   gap: 4px;
+  min-width: 0;
 }
 .test-result-breadcrumb-arrow {
   transform: rotate(-90deg);

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

@@ -4,11 +4,13 @@ import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcon
 import { type FunctionalComponent } from "preact";
 import { useMemo, useState } from "preact/hooks";
 import type { AwesomeReportOptions } from "types";
+
 import { TrError } from "@/components/TestResult/TrError";
-import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
 
+import * as styles from "@/components/TestResult/TrHistory/styles.scss";
+
 type Props = {
   historyTr: HistoryTestResult;
 };

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

@@ -1,8 +1,10 @@
 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 * as styles from "./styles.scss";
 
 export type TrHistoryViewProps = {

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

@@ -1,7 +1,9 @@
 import { capitalize } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
+
 import { useI18n } from "@/stores";
+
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {

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

@@ -4,6 +4,7 @@ import { Counter, Heading, Loadable, Text, TooltipWrapper } from "@allurereport/
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
+
 import { TrInfoStatuses } from "@/components/TestResult/TrInfo/TrInfoStatuses";
 import { TrNavigation } from "@/components/TestResult/TrNavigation";
 import { TrPrevStatuses } from "@/components/TestResult/TrPrevStatuses";
@@ -14,6 +15,7 @@ import { testEnvGroupsStore } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
 import { useI18n } from "@/stores/locale";
 import { timestampToDate } from "@/utils/time";
+
 import * as styles from "./styles.scss";
 
 export type TrInfoProps = {

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

@@ -1,11 +1,17 @@
-import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { sanitizeExternalUrl } from "@allurereport/core-api";
+import { Button, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
-import type { AwesomeTestResult } from "types";
+
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+import { AwesomeTestResult } from "../../../../types";
+
 import * as styles from "./styles.scss";
 
+const VISIBLE_LINKS_LIMIT = 8;
+
 interface TrLinkProps {
   name: string;
   url: string;
@@ -23,33 +29,79 @@ const TrLink: FunctionalComponent<{
   link: TrLinkProps;
 }> = ({ link }) => {
   const { url, name, type } = link;
+  const safeUrl = sanitizeExternalUrl(url);
+  const label = name || url;
 
   return (
     <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"]}>
-        {name || url}
-      </Text>
+      {safeUrl ? (
+        <Text
+          tag={"a"}
+          href={safeUrl}
+          target={"_blank"}
+          rel={"noopener noreferrer"}
+          size={"m"}
+          className={styles["test-result-link-text"]}
+        >
+          {label}
+        </Text>
+      ) : (
+        <Text size={"m"} className={styles["test-result-link-text"]}>
+          {label}
+        </Text>
+      )}
     </div>
   );
 };
 
 export type TrLinksProps = {
+  id?: string;
   links: AwesomeTestResult["links"];
 };
 
-export const TrLinks: FunctionalComponent<TrLinksProps> = ({ links }) => {
-  const [isOpened, setIsOpen] = useState(true);
+export const TrLinks: FunctionalComponent<TrLinksProps> = ({ id, links }) => {
   const { t } = useI18n("ui");
-  const linkMap = links.map((link, index) => {
+  const linksId = id !== null ? `${id}-links` : null;
+  const linksShowAllId = id !== null ? `${id}-links-showAll` : null;
+  const isOpened = !collapsedTrees.value.has(linksId);
+  const showAll = collapsedTrees.value.has(linksShowAllId);
+  const visibleLinks =
+    links.length <= VISIBLE_LINKS_LIMIT ? links : showAll ? links : links.slice(0, VISIBLE_LINKS_LIMIT);
+  const linkMap = visibleLinks.map((link, index) => {
     return <TrLink link={link as TrLinkProps} key={index} />;
   });
 
   return (
     <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>}
+        <MetadataButton
+          isOpened={isOpened}
+          setIsOpen={() => {
+            if (linksId !== null) {
+              toggleTree(linksId);
+            }
+          }}
+          counter={links.length}
+          title={t("links")}
+        />
+        {isOpened && (
+          <>
+            <div className={styles["test-result-links-list"]}>{linkMap}</div>
+            {links.length > VISIBLE_LINKS_LIMIT && (
+              <Button
+                style="ghost"
+                size="s"
+                text={showAll ? t("showLess") : t("showMore")}
+                onClick={() => {
+                  if (linksShowAllId !== null) {
+                    toggleTree(linksShowAllId);
+                  }
+                }}
+              />
+            )}
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -1,26 +1,65 @@
+import { Button } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrMetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
+const VISIBLE_LABELS_LIMIT = 8;
+
 export type TrMetadataProps = {
+  id?: string;
   testResult?: AwesomeTestResult;
 };
 
-export const TrMetadata: FunctionalComponent<TrMetadataProps> = ({ testResult }) => {
+export const TrMetadata: FunctionalComponent<TrMetadataProps> = ({ id, testResult }) => {
   const { t } = useI18n("ui");
   const { labels, groupedLabels } = testResult ?? {};
-  const [isOpened, setIsOpened] = useState(true);
+  const labelsId = id !== null ? `${id}-labels` : null;
+  const labelsShowAllId = id !== null ? `${id}-labels-showAll` : null;
+  const isOpened = !collapsedTrees.value.has(labelsId);
+  const entries = groupedLabels ? Object.entries(groupedLabels) : [];
+  const showAll = collapsedTrees.value.has(labelsShowAllId);
+  const visibleEntries = showAll ? entries : entries.slice(0, VISIBLE_LABELS_LIMIT);
+  const groupedLabelsVisible = Object.fromEntries(visibleEntries);
+
+  const handleToggleShowAll = () => {
+    if (labelsShowAllId !== null) {
+      toggleTree(labelsShowAllId);
+    }
+  };
 
   return (
     <div className={styles["test-result-metadata"]}>
-      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={labels?.length} title={t("labels")} />
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={() => {
+          if (labelsId !== null) {
+            toggleTree(labelsId);
+          }
+        }}
+        counter={labels?.length}
+        title={t("labels")}
+      />
 
       <div className={styles["test-result-metadata-wrapper"]}>
-        {isOpened && <TrMetadataList groupedLabels={groupedLabels} />}
+        {isOpened && (
+          <>
+            <TrMetadataList groupedLabels={groupedLabelsVisible} />
+            {entries.length > VISIBLE_LABELS_LIMIT && (
+              <Button
+                style="ghost"
+                size="s"
+                text={showAll ? t("showLess") : t("showMore")}
+                onClick={handleToggleShowAll}
+              />
+            )}
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -1,11 +1,13 @@
 import { Code, IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { computed, useComputed } from "@preact/signals";
 import type { AwesomeTestResult } from "types";
+
 import { useI18n } from "@/stores";
 import { navigateToTestResult } from "@/stores/router";
 import { trCurrentTab } from "@/stores/testResult";
 import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+
 import * as styles from "./styles.scss";
 
 type Props = {

package/src/components/TestResult/TrOverview.tsx

@@ -1,9 +1,9 @@
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/BaseLayout/styles.scss";
+
+import { getBodyItems } from "@/components/TestResult/bodyItems";
 import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
 import { TrDescription } from "@/components/TestResult/TrDescription";
-import { TrError } from "@/components/TestResult/TrError";
 import { TrLinks } from "@/components/TestResult/TrLinks";
 import { TrMetadata } from "@/components/TestResult/TrMetadata";
 import { TrParameters } from "@/components/TestResult/TrParameters";
@@ -11,36 +11,39 @@ import { TrPwTraces } from "@/components/TestResult/TrPwTraces";
 import { TrSetup } from "@/components/TestResult/TrSetup";
 import { TrSteps } from "@/components/TestResult/TrSteps";
 import { TrTeardown } from "@/components/TestResult/TrTeardown";
+import { useI18n } from "@/stores/locale";
+import { currentTrId } from "@/stores/testResult";
+
+import * as styles from "@/components/BaseLayout/styles.scss";
 
 export type TrOverviewProps = {
   testResult?: AwesomeTestResult;
 };
 
 export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
-  const { error, parameters, groupedLabels, links, descriptionHtml, setup, steps, teardown, id, status } =
-    testResult || {};
-  const isNoSteps = !setup?.length && !steps.length && !teardown.length;
+  const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id } = testResult || {};
+  const testResultId = id ?? currentTrId.value;
+  const { t } = useI18n("ui");
+  const bodyItems = getBodyItems(testResult, t("error"));
+  const isNoSteps = !setup?.length && !bodyItems.length && !teardown?.length;
   const pwTraces = testResult?.attachments?.filter(
     (attachment) => attachment.link.contentType === "application/vnd.allure.playwright-trace",
   );
 
   return (
     <>
-      {Boolean(error?.message) && (
-        <div className={styles["test-result-errors"]}>
-          <TrError {...error} status={status} />
-        </div>
+      {Boolean(pwTraces?.length) && <TrPwTraces pwTraces={pwTraces} />}
+      {Boolean(parameters?.length) && <TrParameters id={testResultId} parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
+        <TrMetadata id={testResultId} testResult={testResult} />
       )}
-      {Boolean(pwTraces.length) && <TrPwTraces pwTraces={pwTraces} />}
-      {Boolean(parameters?.length) && <TrParameters parameters={parameters} />}
-      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && <TrMetadata testResult={testResult} />}
-      {Boolean(links?.length) && <TrLinks links={links} />}
-      {Boolean(descriptionHtml) && <TrDescription descriptionHtml={descriptionHtml} />}
+      {Boolean(links?.length) && <TrLinks id={testResultId} links={links} />}
+      {Boolean(descriptionHtml) && <TrDescription id={testResultId} descriptionHtml={descriptionHtml} />}
       <div className={styles["test-results"]}>
         {isNoSteps && <TestStepsEmpty />}
-        {Boolean(setup?.length) && <TrSetup id={id} setup={setup} />}
-        {Boolean(steps?.length) && <TrSteps id={id} steps={steps} />}
-        {Boolean(teardown?.length) && <TrTeardown id={id} teardown={teardown} />}
+        {Boolean(setup?.length) && <TrSetup id={testResultId} setup={setup} />}
+        {Boolean(bodyItems.length) && <TrSteps id={testResultId} bodyItems={bodyItems} />}
+        {Boolean(teardown?.length) && <TrTeardown id={testResultId} teardown={teardown} />}
       </div>
     </>
   );

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

@@ -1,30 +1,64 @@
+import { Button } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
 import * as styles from "./styles.scss";
 
+const PARAMETERS_VISIBLE_LIMIT = 8;
+
 export type TrParametersProps = {
+  id?: string;
   parameters: AwesomeTestResult["parameters"];
 };
 
-export const TrParameters: FunctionalComponent<TrParametersProps> = ({ parameters }) => {
-  const [isOpened, setIsOpened] = useState(true);
+export const TrParameters: FunctionalComponent<TrParametersProps> = ({ id, parameters }) => {
   const { t } = useI18n("ui");
+  const parametersId = id !== null ? `${id}-parameters` : null;
+  const parametersShowAllId = id !== null ? `${id}-parameters-showAll` : null;
+  const isOpened = !collapsedTrees.value.has(parametersId);
+  const list = parameters ?? [];
+  const totalCount = list.length;
+  const showAll = collapsedTrees.value.has(parametersShowAllId);
+  const visibleList = showAll ? list : list.slice(0, PARAMETERS_VISIBLE_LIMIT);
 
   return (
     <div className={styles["test-result-metadata"]}>
       <MetadataButton
         isOpened={isOpened}
-        setIsOpen={setIsOpened}
+        setIsOpen={() => {
+          if (parametersId !== null) {
+            toggleTree(parametersId);
+          }
+        }}
         counter={parameters?.length}
         title={t("parameters")}
       />
-      {/* FIXME: use proper type in the MetadataList component */}
-      {/* @ts-ignore */}
-      <div className={styles["test-result-metadata-wrapper"]}>{isOpened && <MetadataList envInfo={parameters} />}</div>
+      <div className={styles["test-result-metadata-wrapper"]}>
+        {isOpened && (
+          <>
+            {/* FIXME: use proper type in the MetadataList component */}
+            {/* @ts-ignore */}
+            <MetadataList envInfo={visibleList} />
+            {totalCount > PARAMETERS_VISIBLE_LIMIT && (
+              <Button
+                style="ghost"
+                size="s"
+                text={showAll ? t("showLess") : t("showMore")}
+                onClick={() => {
+                  if (parametersShowAllId !== null) {
+                    toggleTree(parametersShowAllId);
+                  }
+                }}
+              />
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -3,8 +3,10 @@ import { getReportOptions } from "@allurereport/web-commons";
 import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeReportOptions, AwesomeTestResult } from "types";
+
 import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
+
 import * as styles from "./styles.scss";
 
 const TrPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {