@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

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

@@ -0,0 +1,94 @@
+import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
+import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+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";
+
+export const TrHistoryItem: FunctionalComponent<{
+  testResultItem: HistoryTestResult;
+}> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
+  const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
+  const { status, error, stop, duration, id, url } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const formattedDuration = duration ? formatDuration(duration) : undefined;
+  const { t } = useI18n("controls");
+  const navigateUrl = useMemo(() => {
+    if (!url) {
+      return undefined;
+    }
+
+    const { origin, pathname } = new URL(url);
+    const navUrl = new URL([pathname, reportOptions.id].join("/"), origin);
+
+    navUrl.hash = id;
+
+    return navUrl.toString();
+  }, [reportOptions, id, url]);
+  const renderExternalLink = () => {
+    if (!navigateUrl) {
+      return null;
+    }
+
+    return (
+      <TooltipWrapper tooltipText={t("openInNewTab")}>
+        <IconButton
+          href={navigateUrl.toString()}
+          target={"_blank"}
+          icon={allureIcons.lineGeneralLinkExternal}
+          style={"ghost"}
+          size={"s"}
+          className={styles["test-result-history-item-link"]}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      </TooltipWrapper>
+    );
+  };
+  const renderItemContent = () => {
+    return (
+      <>
+        <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
+        {convertedStop && <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>}
+        <div className={styles["test-result-history-item-info"]}>
+          {formattedDuration && (
+            <Text type="ui" size={"s"} className={styles["item-time"]}>
+              {formattedDuration}
+            </Text>
+          )}
+          {renderExternalLink()}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div data-testid={"test-result-history-item"}>
+      <div className={styles["test-result-history-item-header"]}>
+        {Boolean(error) && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+          </span>
+        )}
+        {navigateUrl ? (
+          <a href={navigateUrl} className={styles["test-result-history-item-wrap"]}>
+            {renderItemContent()}
+          </a>
+        ) : (
+          <div className={styles["test-result-history-item-wrap"]}>{renderItemContent()}</div>
+        )}
+      </div>
+      {isOpened && error && (
+        <div>
+          <TrError {...error} status={status} />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { FunctionalComponent } from "preact";
+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 { t } = useI18n("empty");
+
+  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>
+      )}
+    </div>
+  );
+};
+
+export default TrHistoryView;

package/src/components/TestResult/{TestResultHistory → TrHistory}/styles.scss

@@ -8,7 +8,6 @@
   width: 100%;
   gap: 4px;
   align-items: center;
-  cursor: pointer;
 }
 
 .test-result-history-item-wrap {
@@ -20,6 +19,8 @@
   padding: 4px 4px 4px 4px;
   width: 100%;
   align-items: flex-start;
+  text-decoration: none;
+  color: var(--on-text-primary);
 
   &:hover {
     background: var(--bg-control-flat-medium);

package/src/components/TestResult/{TestResultInfo/TestResultInfoStatuses.tsx → TrInfo/TrInfoStatuses.tsx}

@@ -1,7 +1,7 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { capitalize } from "@allurereport/core-api";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 import { useI18n } from "@/stores";
-import { capitalize } from "@/utils/capitalize";
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {
@@ -10,7 +10,7 @@ const icons: Record<string, string> = {
   muted: allureIcons.lineGeneralEye,
 };
 
-export const TestResultInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
+export const TrInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
   const { t } = useI18n("filters");
 
   return (
@@ -21,7 +21,9 @@ export const TestResultInfoStatuses: FunctionalComponent<{ statuses: [string, bo
         return (
           <div key={key} className={styles["test-result-info-status"]}>
             <SvgIcon className={styles["metadata-icon"]} id={icons[status]} size={"s"} />
-            {capitalize(title)}
+            <Text type={"ui"} size={"s"}>
+              {capitalize(title)}
+            </Text>
           </div>
         );
       })}

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

@@ -0,0 +1,99 @@
+import { type TestEnvGroup, getRealEnvsCount } from "@allurereport/core-api";
+import { formatDuration } from "@allurereport/core-api";
+import { Counter, Heading, Loadable, Text, TooltipWrapper } from "@allurereport/web-components";
+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";
+import { TrSeverity } from "@/components/TestResult/TrSeverity";
+import { TrStatus } from "@/components/TestResult/TrStatus";
+import { TrTab, TrTabsList } from "@/components/TestResult/TrTabs";
+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 = {
+  testResult?: AwesomeTestResult;
+};
+
+export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
+  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
+  const formattedDuration = formatDuration(duration as number);
+  const fullDate = stop && timestampToDate(stop);
+  const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
+  const { t } = useI18n("ui");
+  const statuses = Object.entries({ flaky, muted, known }).filter(([, value]) => value);
+
+  const Content = () => {
+    return (
+      <>
+        {name && (
+          <Heading data-testid="test-result-info-title" tag={"h1"} size={"s"} className={styles["test-result-name"]}>
+            {name}
+          </Heading>
+        )}
+        <div className={styles["test-result-info-data"]}>
+          {Boolean(status) && <TrStatus status={status} />}
+          {Boolean(history?.length) && <TrPrevStatuses history={history} />}
+          <TrSeverity severity={severity} />
+          {Boolean(statuses.length) && <TrInfoStatuses statuses={statuses} />}
+          <TooltipWrapper tooltipText={fullDate}>
+            <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
+              {formattedDuration}
+            </Text>
+          </TooltipWrapper>
+        </div>
+        <div className={styles["test-result-tabs"]}>
+          <TrTabsList>
+            <TrTab id="overview">{t("overview")}</TrTab>
+            <TrTab id="history">
+              <div className={styles["test-result-tab"]}>
+                {t("history")}
+                {Boolean(history?.length) && <Counter size={"s"} count={history?.length} />}
+              </div>
+            </TrTab>
+            <TrTab id="retries">
+              <div className={styles["test-result-tab"]}>
+                {t("retries")}
+                {Boolean(retries?.length) && <Counter size={"s"} count={retries?.length} />}
+              </div>
+            </TrTab>
+            <TrTab id="attachments">
+              <div className={styles["test-result-tab"]}>
+                {t("attachments")}
+                {Boolean(attachments?.length) && <Counter size={"s"} count={attachments?.length} />}
+              </div>
+            </TrTab>
+            <Loadable<Record<string, TestEnvGroup>, TestEnvGroup | undefined>
+              source={testEnvGroupsStore}
+              transformData={(groups) => groups?.[testResult?.testCase?.id]}
+              renderData={(group) => {
+                const envsCount = getRealEnvsCount(group);
+
+                return (
+                  <TrTab id="environments">
+                    <div className={styles["test-result-tab"]}>
+                      {t("environments")}
+                      {!!envsCount && <Counter size={"s"} count={envsCount} />}
+                    </div>
+                  </TrTab>
+                );
+              }}
+            />
+          </TrTabsList>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={clsx(styles["test-result-info"], isSplitMode.value && styles.sticky)}>
+      <TrNavigation testResult={testResult} />
+      {testResult && <Content />}
+    </div>
+  );
+};

package/src/components/TestResult/{TestResultInfo → TrInfo}/styles.scss

@@ -2,6 +2,24 @@
   padding: 20px 24px 0;
 }
 
+.sticky {
+  position: sticky;
+  left: 0;
+  top: 0;
+  width: 100%;
+  background: var(--bg-base-primary);
+  z-index: 1;
+}
+
+.sticky {
+  position: sticky;
+  left: 0;
+  top: 0;
+  width: 100%;
+  background: var(--bg-base-primary);
+  z-index: 1;
+}
+
 .test-result-info-data {
   display: flex;
   gap: 12px;

package/src/components/TestResult/{TestResultLinks → TrLinks}/index.tsx

@@ -1,12 +1,12 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { AwesomeTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-interface TestResultLinkProps {
+interface TrLinkProps {
   name: string;
   url: string;
   type: string;
@@ -19,8 +19,8 @@ const linksIconMap: Record<string, string> = {
   github: allureIcons.github,
 };
 
-const TestResultLink: FunctionalComponent<{
-  link: TestResultLinkProps;
+const TrLink: FunctionalComponent<{
+  link: TrLinkProps;
 }> = ({ link }) => {
   const { url, type } = link;
 
@@ -34,15 +34,15 @@ const TestResultLink: FunctionalComponent<{
   );
 };
 
-export type TestResultLinksProps = {
-  links: AllureAwesomeTestResult["links"];
+export type TrLinksProps = {
+  links: AwesomeTestResult["links"];
 };
 
-export const TestResultLinks: FunctionalComponent<TestResultLinksProps> = ({ links }) => {
+export const TrLinks: FunctionalComponent<TrLinksProps> = ({ links }) => {
   const [isOpened, setIsOpen] = useState(true);
   const { t } = useI18n("ui");
   const linkMap = links.map((link, index) => {
-    return <TestResultLink link={link as TestResultLinkProps} key={index} />;
+    return <TrLink link={link as TrLinkProps} key={index} />;
   });
 
   return (

package/src/components/TestResult/{TestResultMetadata → TrMetadata}/index.tsx

@@ -1,16 +1,16 @@
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
-import { TestResultMetadataList } from "@/components/Metadata";
+import type { AwesomeTestResult } from "types";
+import { TrMetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-export type TestResultMetadataProps = {
-  testResult?: AllureAwesomeTestResult;
+export type TrMetadataProps = {
+  testResult?: AwesomeTestResult;
 };
 
-export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> = ({ testResult }) => {
+export const TrMetadata: FunctionalComponent<TrMetadataProps> = ({ testResult }) => {
   const { t } = useI18n("ui");
   const { labels, groupedLabels } = testResult ?? {};
   const [isOpened, setIsOpened] = useState(true);
@@ -20,7 +20,7 @@ export const TestResultMetadata: FunctionalComponent<TestResultMetadataProps> =
       <MetadataButton isOpened={isOpened} setIsOpen={setIsOpened} counter={labels?.length} title={t("labels")} />
 
       <div className={styles["test-result-metadata-wrapper"]}>
-        {isOpened && <TestResultMetadataList groupedLabels={groupedLabels} />}
+        {isOpened && <TrMetadataList groupedLabels={groupedLabels} />}
       </div>
     </div>
   );

package/src/components/TestResult/{TestResultNavigation → TrNavigation}/index.tsx

@@ -1,20 +1,17 @@
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { Loadable } from "@allurereport/web-components";
-import { TooltipWrapper } from "@allurereport/web-components";
-import { Code } from "@allurereport/web-components";
+import { Code, IconButton, Loadable, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { navigateTo } from "@/index";
+import type { AwesomeTestResult } from "types";
 import { useI18n } from "@/stores";
+import { navigateTo } from "@/stores/router";
 import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
-export type TestResultNavigationProps = {
-  testResult?: AllureAwesomeTestResult;
+export type TrNavigationProps = {
+  testResult?: AwesomeTestResult;
 };
 
-export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps> = ({ testResult }) => {
+export const TrNavigation: FunctionalComponent<TrNavigationProps> = ({ testResult }) => {
   const { fullName, id: testResultId } = testResult ?? {};
   const id = testResultId || "";
   const { t: tooltip } = useI18n("controls");
@@ -42,6 +39,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
       source={testResultNavStore}
       renderData={(data) => {
         const currentIndex = data.indexOf(id) + 1;
+
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}

package/src/components/TestResult/TrOverview.tsx

@@ -0,0 +1,46 @@
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import * as styles from "@/components/BaseLayout/styles.scss";
+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";
+import { TrPwTraces } from "@/components/TestResult/TrPwTraces";
+import { TrSetup } from "@/components/TestResult/TrSetup";
+import { TrSteps } from "@/components/TestResult/TrSteps";
+import { TrTeardown } from "@/components/TestResult/TrTeardown";
+
+export type TrOverviewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
+  const { error, parameters, groupedLabels, links, description, 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",
+  );
+
+  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 parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && <TrMetadata testResult={testResult} />}
+      {Boolean(links?.length) && <TrLinks links={links} />}
+      {Boolean(description) && <TrDescription description={description} />}
+      <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} />}
+      </div>
+    </>
+  );
+};

package/src/components/TestResult/{TestResultParameters → TrParameters}/index.tsx

@@ -1,16 +1,16 @@
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { AwesomeTestResult } from "types";
 import { MetadataList } from "@/components/Metadata";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
-export type TestResultParametersProps = {
-  parameters: AllureAwesomeTestResult["parameters"];
+export type TrParametersProps = {
+  parameters: AwesomeTestResult["parameters"];
 };
 
-export const TestResultParameters: FunctionalComponent<TestResultParametersProps> = ({ parameters }) => {
+export const TrParameters: FunctionalComponent<TrParametersProps> = ({ parameters }) => {
   const [isOpened, setIsOpened] = useState(true);
   const { t } = useI18n("ui");
 

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

@@ -0,0 +1,63 @@
+import { type HistoryTestResult, capitalize } from "@allurereport/core-api";
+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 }) => {
+  const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
+
+  if (!item.url) {
+    return (
+      <div className={styles["test-result-prev-status"]}>
+        <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
+      </div>
+    );
+  }
+
+  const { origin, pathname } = new URL(item.url);
+  const navigateUrl = new URL([pathname, reportOptions.id].join("/"), origin);
+
+  navigateUrl.hash = item.id;
+
+  return (
+    <a className={styles["test-result-prev-status"]} href={navigateUrl.toString()}>
+      <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
+    </a>
+  );
+};
+const TrPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  const convertedStop = item.stop && timestampToDate(item.stop);
+  const { t } = useI18n("statuses");
+  const status = t(item.status);
+
+  return (
+    <div className={styles["test-result-prev-status-tooltip"]}>
+      <Text tag={"div"} size={"m"} bold>
+        {capitalize(status)}
+      </Text>
+      <Text size={"m"}>{convertedStop}</Text>
+    </div>
+  );
+};
+
+export type TrPrevStatusesProps = {
+  history: AwesomeTestResult["history"];
+};
+
+export const TrPrevStatuses: FunctionalComponent<TrPrevStatusesProps> = ({ history }) => {
+  return (
+    <div className={styles["test-result-prev-statuses"]}>
+      {history?.slice(0, 6).map((item, key) => (
+        <div key={key} data-testid={"test-result-prev-status"} className={styles["test-result-prev-status"]}>
+          <TooltipWrapper key={key} tooltipComponent={<TrPrevStatusTooltip item={item} />}>
+            <TrPrevStatus item={item} />
+          </TooltipWrapper>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/TestResult/TrPwTraces/PwTrace.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { useEffect, useRef } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+interface PwTraceProps {
+  blob: Blob;
+  isFullScreen?: boolean;
+}
+export const PwTrace = ({ blob, isFullScreen }: PwTraceProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const handleLoad = () => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { method: "load", params: { trace: blob } },
+      "https://trace.playwright.dev",
+    );
+  };
+
+  useEffect(() => {
+    if (iframeRef.current) {
+      iframeRef.current.onload = handleLoad;
+    }
+  }, [blob]);
+
+  return (
+    <iframe
+      className={clsx(styles["pw-trace"], { [styles["pw-trace-fullscreen"]]: isFullScreen })}
+      ref={iframeRef}
+      width={"100%"}
+      height={"100%"}
+      src={"https://trace.playwright.dev/next/"}
+    />
+  );
+};

package/src/components/TestResult/TrPwTraces/PwTraceButton.tsx

@@ -0,0 +1,32 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { Attachments } from "@allurereport/web-commons";
+import { fetchReportAttachment } from "@allurereport/web-commons";
+import { IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { PwTrace } from "@/components/TestResult/TrPwTraces/PwTrace";
+import { useI18n } from "@/stores";
+import { openModal } from "@/stores/modal";
+
+export const fetchFromUrl = async ({ id, ext, contentType }: Attachments) => {
+  const fileName = `${id || "-"}${ext || ""}`;
+
+  return fetchReportAttachment(`data/attachments/${fileName}?attachment`, contentType);
+};
+
+export const PwTraceButton = ({ link }: Pick<AttachmentTestStepResult, "link">) => {
+  const { t } = useI18n("ui");
+  const openPw = async () => {
+    const hasPw = await fetchFromUrl(link);
+    const blob = await hasPw.blob();
+
+    openModal({
+      component: <PwTrace blob={blob} />,
+      title: `Playwright Trace Viewer | ${link.name}${link.ext}`,
+    });
+  };
+
+  return (
+    <TooltipWrapper tooltipText={t("openPwTrace")}>
+      <IconButton icon={allureIcons.lineArrowsExpand3} size={"s"} style={"ghost"} onClick={openPw} />
+    </TooltipWrapper>
+  );
+};

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

@@ -0,0 +1,32 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import * as styles from "./styles.scss";
+
+export type TrMetadataProps = {
+  testResult?: AwesomeTestResult;
+  pwTraces?: AttachmentTestStepResult[];
+};
+
+export const TrPwTraces: FunctionalComponent<TrMetadataProps> = ({ pwTraces }) => {
+  const [isOpened, setIsOpened] = useState(true);
+
+  return (
+    <div className={styles["tr-metadata"]}>
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={setIsOpened}
+        counter={pwTraces?.length}
+        title={"Playwright Trace"}
+      />
+      {isOpened && (
+        <div className={styles["tr-metadata-wrapper"]}>
+          {pwTraces?.map((pw, index) => <TrAttachment stepIndex={index + 1} item={pw} key={pw.link.id} />)}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,20 @@
+.tr-metadata {
+  padding: 12px 24px 0;
+}
+
+.tr-metadata-wrapper {
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-top: 8px;
+  padding-bottom: 12px;
+}
+
+.pw-trace {
+  --modal-paddings: 60px;
+  overflow: hidden;
+  height: calc(80vh - var(--modal-paddings));
+}
+
+.pw-trace-fullscreen {
+  --modal-fs-paddings: 75px;
+  height: calc(100vh - var(--modal-fs-paddings));
+}