@allurereport/web-awesome 3.1.0 → 3.2.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-3ca67f29d0f1166c08ca.js"
+  "main.js": "app-01fed10ad5f9083fd39c.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,19 +31,18 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.1.0",
-    "@allurereport/core-api": "3.1.0",
-    "@allurereport/plugin-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/plugin-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",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
     "preact": "^10.28.2",
-    "prismjs": "^1.30.0",
-    "reset.css": "^2.0.2"
+    "prismjs": "^1.30.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -60,7 +59,6 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/d3-shape": "^3.1.6",
-    "@types/diff": "^7",
     "@types/eslint": "^8.56.11",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.17.9",
@@ -74,7 +72,7 @@
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
     "css-loader": "^7.1.2",
-    "diff": "^7.0.0",
+    "diff": "^8.0.3",
     "eslint": "^8.57.0",
     "eslint-config-preact": "^1.5.0",
     "eslint-config-prettier": "^9.1.0",

package/src/components/Charts/index.tsx

@@ -6,13 +6,13 @@ import {
   CurrentStatusChartWidget,
   DurationDynamicsChartWidget,
   DurationsChartWidget,
-  FBSUAgePyramidChartWidget,
   Grid,
   GridItem,
   HeatMapWidget,
   Loadable,
   PageLoader,
   StabilityDistributionWidget,
+  StatusAgePyramidChartWidget,
   StatusDynamicsChartWidget,
   StatusTransitionsChartWidget,
   TestBaseGrowthDynamicsChartWidget,
@@ -113,15 +113,15 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.FBSUAgePyramid: {
-      const title = chartData.title ?? t("fbsuAgePyramid.title");
+    case ChartType.StatusAgePyramid: {
+      const title = chartData.title ?? t("statusAgePyramid.title");
 
       return (
-        <FBSUAgePyramidChartWidget
+        <StatusAgePyramidChartWidget
           title={title}
           data={chartData.data}
           statuses={chartData.statuses}
-          i18n={(key, props = {}) => t(`fbsuAgePyramid.${key}`, props)}
+          i18n={(key, props = {}) => t(`statusAgePyramid.${key}`, props)}
         />
       );
     }

package/src/components/MainReport/index.tsx

@@ -6,8 +6,8 @@ import { ReportGlobalAttachments } from "@/components/ReportGlobalAttachments";
 import { ReportGlobalErrors } from "@/components/ReportGlobalErrors";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
-import { reportStatsStore } from "@/stores";
-import { useI18n } from "@/stores";
+import { reportStatsStore, useI18n } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
 import { isSplitMode } from "@/stores/layout";
 import { qualityGateStore } from "@/stores/qualityGate";
@@ -45,53 +45,58 @@ const MainReport = () => {
   const { t } = useI18n("tabs");
 
   return (
-    <>
-      <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
-        <ReportHeader />
-        <div className={styles["main-report-tabs"]}>
-          <NavTabs initialTab={ReportRootTab.Results}>
-            <NavTabsList>
-              <Loadable
-                source={reportStatsStore}
-                renderData={(stats) => (
-                  <NavTab id={ReportRootTab.Results}>
-                    {t("results")} <Counter count={stats?.total ?? 0} />
+    <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
+      <ReportHeader />
+      <div className={styles["main-report-tabs"]}>
+        <NavTabs initialTab={ReportRootTab.Results}>
+          <NavTabsList>
+            <Loadable
+              source={reportStatsStore}
+              renderData={(stats) => (
+                <NavTab id={ReportRootTab.Results}>
+                  {t("results")} <Counter count={stats?.total ?? 0} />
+                </NavTab>
+              )}
+            />
+            <Loadable
+              source={qualityGateStore}
+              renderData={(results) => {
+                const currentEnvResults = currentEnvironment.value
+                  ? (results[currentEnvironment.value] ?? [])
+                  : Object.values(results).flatMap((envResults) => envResults);
+
+                return (
+                  <NavTab id={ReportRootTab.QualityGate}>
+                    {t("qualityGates")}{" "}
+                    <Counter
+                      status={currentEnvResults.length > 0 ? "failed" : undefined}
+                      count={currentEnvResults.length}
+                    />
+                  </NavTab>
+                );
+              }}
+            />
+            <Loadable
+              source={globalsStore}
+              renderData={({ attachments = [], errors = [] }) => (
+                <>
+                  <NavTab id={ReportRootTab.GlobalAttachments}>
+                    {t("globalAttachments")} <Counter count={attachments.length} />
                   </NavTab>
-                )}
-              />
-              <Loadable
-                source={qualityGateStore}
-                renderData={(results) => (
-                  <>
-                    <NavTab id={ReportRootTab.QualityGate}>
-                      {t("qualityGates")}{" "}
-                      <Counter status={results.length > 0 ? "failed" : undefined} count={results.length} />
-                    </NavTab>
-                  </>
-                )}
-              />
-              <Loadable
-                source={globalsStore}
-                renderData={({ attachments = [], errors = [] }) => (
-                  <>
-                    <NavTab id={ReportRootTab.GlobalAttachments}>
-                      {t("globalAttachments")} <Counter count={attachments.length} />
-                    </NavTab>
-                    <NavTab id={ReportRootTab.GlobalErrors}>
-                      {t("globalErrors")}{" "}
-                      <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
-                    </NavTab>
-                  </>
-                )}
-              />
-            </NavTabsList>
-            <div className={styles["main-report-tabs-content"]}>
-              <MainReportContent />
-            </div>
-          </NavTabs>
-        </div>
+                  <NavTab id={ReportRootTab.GlobalErrors}>
+                    {t("globalErrors")}{" "}
+                    <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
+                  </NavTab>
+                </>
+              )}
+            />
+          </NavTabsList>
+          <div className={styles["main-report-tabs-content"]}>
+            <MainReportContent />
+          </div>
+        </NavTabs>
       </div>
-    </>
+    </div>
   );
 };
 export default MainReport;

package/src/components/Metadata/index.tsx

@@ -7,6 +7,7 @@ import type { MetadataProps } from "@/components/ReportMetadata";
 import { useI18n } from "@/stores/locale";
 import { getTagsFilterUrl } from "@/stores/treeFilters/utils";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+import { parseOwnerAddress } from "@/utils/ownerAddress";
 import * as styles from "./styles.scss";
 
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
@@ -65,6 +66,49 @@ const OpenFilterUrlButton: FunctionalComponent<{ url: string }> = ({ url }) => {
   );
 };
 
+const MAX_URL_LENGTH = 25;
+
+const OwnerAction = (props: { ownerValue: string }) => {
+  const { t } = useI18n("ui");
+  const { ownerValue } = props;
+  const ownerAddress = parseOwnerAddress(ownerValue);
+
+  if (ownerAddress.type === "none") {
+    return null;
+  }
+
+  // Don't need to show copy email button here because
+  // we already have a button to copy the whole owner value
+  if (ownerAddress.type === "email" && ownerAddress.email === ownerValue) {
+    return null;
+  }
+
+  if (ownerAddress.type === "email") {
+    return (
+      <Button
+        icon={allureIcons.lineGeneralCopy3}
+        style="outline"
+        text={t("copy-email")}
+        onClick={() => copyToClipboard(ownerAddress.email)}
+      />
+    );
+  }
+
+  if (ownerAddress.type === "url") {
+    const truncatedUrl =
+      ownerAddress.url.length > MAX_URL_LENGTH ? `${ownerAddress.url.slice(0, MAX_URL_LENGTH)}...` : ownerAddress.url;
+    return (
+      <ButtonLink
+        href={ownerAddress.url}
+        target="_blank"
+        style="ghost"
+        icon={allureIcons.lineGeneralLinkExternal}
+        text={truncatedUrl}
+      />
+    );
+  }
+};
+
 const MetadataTooltip = (props: { value: string; name: string }) => {
   const { value, name } = props;
   const { t } = useI18n("ui");
@@ -75,6 +119,7 @@ const MetadataTooltip = (props: { value: string; name: string }) => {
         <Text>{value}</Text>
       </div>
       {name === "tag" && <OpenFilterUrlButton url={getTagsFilterUrl([value])} />}
+      {name === "owner" && <OwnerAction ownerValue={value} />}
       <Button
         style={"outline"}
         icon={allureIcons.lineGeneralCopy3}
@@ -85,11 +130,40 @@ const MetadataTooltip = (props: { value: string; name: string }) => {
   );
 };
 
+const MetaDataOwnerLabel: FunctionalComponent<{
+  value: string;
+  size?: "s" | "m";
+}> = ({ value, size = "s" }) => {
+  const ownerAddress = parseOwnerAddress(value);
+  const displayName = ownerAddress.displayName ?? value;
+
+  return (
+    <Menu
+      size="xl"
+      menuTrigger={({ onClick }) => (
+        <div className={styles["report-metadata-keyvalue-wrapper"]}>
+          <Text type={"ui"} size={size} onClick={onClick} bold className={styles["report-metadata-keyvalue-value"]}>
+            {displayName}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} name={"owner"} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
 const MetaDataKeyLabel: FunctionalComponent<{
   name: string;
   size?: "s" | "m";
   value: string;
 }> = ({ name, size = "s", value }) => {
+  if (name === "owner") {
+    return <MetaDataOwnerLabel value={value} size={size} />;
+  }
+
   return (
     <Menu
       size="xl"
@@ -132,7 +206,7 @@ const MetadataKeyValue: FunctionalComponent<{
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value} name={title} />
+          <MetaDataKeyLabel value={value ?? ""} name={title} />
         </div>
       )}
     </div>

package/src/components/Metadata/styles.scss

@@ -92,6 +92,16 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
+
+  &:is(a) {
+    color: inherit;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .report-metadata-list {

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