fix: a lot of small fixes and improvements (#50)

packages/web-awesome/src/components/app/ArrowButton/styles.scss

@@ -2,10 +2,13 @@
   background: transparent;
   border: none;
   padding: 8px 4px;
+  border-radius: 4px;
+  cursor: pointer;
   color: var(--on-icon-secondary);
 
   &:hover {
     background: var(--bg-control-flat-medium);
+    color: var(--on-icon-primary);
   }
 }
 

packages/web-awesome/src/components/app/ReportMetadata/MetadataSummary.tsx

@@ -1,7 +1,9 @@
+import type { Statistic } from "@allurereport/core-api";
 import { statusesList } from "@allurereport/core-api";
 import { computed } from "@preact/signals";
-import { FunctionComponent } from "preact";
-import MetadataItem, { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import MetadataItem from "@/components/app/ReportMetadata/MetadataItem";
 import { MetadataTestType } from "@/components/app/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/app/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/app/ReportMetadata/styles.scss";
@@ -12,6 +14,7 @@ import { capitalize } from "@/utils/capitalize";
 
 export const MetadataSummary: FunctionComponent = () => {
   const { t } = useI18n("statuses");
+  const { t: testSummary } = useI18n("testSummary");
 
   return (
     <Loadable
@@ -23,20 +26,21 @@ export const MetadataSummary: FunctionComponent = () => {
           type: "all",
           count: stats.total,
         }));
-        // TODO: https://github.com/qameta/allure3/issues/178
-        // const metadataStatsKeys: (keyof Statistic)[] = ["flakyTests", "retryTests", "newTests"];
-        // const metaDataTests = metadataStatsKeys
-        //   .filter((key) => stats[key])
-        //   .map((key) => {
-        //     const title = t[key];
-        //     const props = { title, count: stats[key], type: key };
-        //
-        //     return (
-        //       <>
-        //         <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
-        //       </>
-        //     );
-        //   });
+        const metaDataTests = ["flaky", "retry"]
+          .map((key) => {
+            if (!stats[key]) {
+              return;
+            }
+            const title = testSummary(key);
+            const props = { title, count: stats[key] || 0, type: key };
+
+            return (
+              <div key={key}>
+                <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
+              </div>
+            );
+          })
+          .filter(Boolean);
 
         const metadataStatuses = statusesList
           .map((status) => ({ status, value: stats[status] }))
@@ -67,8 +71,8 @@ export const MetadataSummary: FunctionComponent = () => {
                 props={allTest.value}
                 renderComponent={MetadataWithIcon}
               />
-              {/*<div className={styles["report-metadata-separator"]}></div>*/}
-              {/*{metaDataTests}*/}
+              {Boolean(metaDataTests.length) && <div className={styles["report-metadata-separator"]} />}
+              {metaDataTests}
             </div>
             <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
           </div>

packages/web-awesome/src/components/app/ReportMetadata/MetadataWithIcon.tsx

@@ -1,8 +1,8 @@
-import { FunctionComponent, h } from "preact";
+import type { FunctionComponent } from "preact";
 import notifications from "@/assets/svg/line-alerts-notification-box.svg";
 import refresh from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
 import lineGeneralZap from "@/assets/svg/line-general-zap.svg";
-import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import type { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { Text } from "@/components/commons/Typography";
 import * as styles from "./styles.scss";

packages/web-awesome/src/components/app/TestResult/TestResultError/index.tsx

@@ -1,16 +1,20 @@
+import { sanitizeHtml } from "@allurereport/web-commons";
 import { useState } from "preact/hooks";
 import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
 import { IconButton } from "@/components/commons/Button";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Code, Text } from "@/components/commons/Typography";
 import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
 const TestResultErrorTrace = ({ trace }) => {
+  const sanitizedTrace = sanitizeHtml(trace);
+
   return (
     <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
       <Code size={"s"} type={"ui"}>
-        <pre>{trace}</pre>
+        <pre dangerouslySetInnerHTML={{ __html: sanitizedTrace }} />
       </Code>
     </div>
   );
@@ -19,28 +23,26 @@ const TestResultErrorTrace = ({ trace }) => {
 export const TestResultError = ({ message, trace }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
 
   return (
     <div data-testid="test-result-error" className={styles["test-result-error"]}>
-      <div
-        data-testid="test-result-error-header"
-        className={styles["test-result-error-header"]}
-        onClick={() => setIsOpen(!isOpen)}
-      >
+      <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
         <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
           {t("error")}
         </Text>
-        <IconButton
-          style={"ghost"}
-          size={"s"}
-          icon={LineGeneralCopy3.id}
-          onClick={(e) => {
-            e.stopPropagation();
-            copyToClipboard(message);
-          }}
-        />
+        <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+          <IconButton
+            style={"ghost"}
+            size={"s"}
+            icon={LineGeneralCopy3.id}
+            onClick={() => {
+              copyToClipboard(message);
+            }}
+          />
+        </TooltipWrapper>
       </div>
-      <div onClick={() => setIsOpen(!isOpen)}>
+      <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
         <Code data-testid="test-result-error-message" size={"s"}>
           {message}
         </Code>

packages/web-awesome/src/components/app/TestResult/TestResultError/styles.scss

@@ -1,10 +1,9 @@
 .test-result-error {
-  padding: 8px 8px 12px 24px;
+  padding: 8px 8px 12px 16px;
   background-color: var(--bg-alpha-capella);
   border-radius: 8px;
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 
   &:before {
     content: "";
@@ -26,15 +25,27 @@
 
 .test-result-error-text {
   margin-bottom: 8px;
+  padding-left: 8px;
   color: var(--on-support-capella);
 }
 
 .test-result-error-trace {
   margin-top: 8px;
+  padding-left: 8px;
 
   pre {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    white-space: pre-wrap;
+    overflow: scroll;
+    padding-bottom: 24px;
+  }
+}
+
+.test-result-error-message {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 300ms;
+
+  &:hover {
+    background: var(--bg-alpha-capella);
   }
 }

packages/web-awesome/src/components/app/TestResult/TestResultHeader/index.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { FunctionalComponent } from "preact";
-import { AllureAwesomeTestResult } from "types";
+import type { FunctionalComponent } from "preact";
+import type { AllureAwesomeTestResult } from "types";
 import LineArrowsChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
 import LineGeneralHomeLine from "@/assets/svg/line-general-home-line.svg";
 import { LanguagePicker } from "@/components/app/LanguagePicker";

packages/web-awesome/src/components/app/TestResult/TestResultHistory/TestResultHistoryItem.tsx

@@ -9,38 +9,49 @@ import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
 import { IconButton } from "@/components/commons/Button";
 import { TooltipWrapper } from "@/components/commons/Tooltip";
 import { Text } from "@/components/commons/Typography";
-import { navigateTo } from "@/index";
+import { navigateTo, openInNewTab } from "@/index";
+import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
 
 export const TestResultHistoryItem = ({ testResultItem }) => {
-  const { status, message, trace, stop, duration, id, uuid } = testResultItem;
+  const { status, message, trace, stop, duration, id } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
   const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration);
+  const formattedDuration = formatDuration(duration as number);
+  const { t } = useI18n("controls");
 
-  const navigateUrl = `/${uuid}/${id}`;
+  const navigateUrl = `/testresult/${id}`;
 
   return (
     <div>
-      <div className={styles["test-result-history-item-header"]} onClick={() => setIsOpen(!isOpened)}>
-        {Boolean(message) && <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />}
-        <div className={styles["test-result-history-item-wrap"]}>
+      <div className={styles["test-result-history-item-header"]}>
+        {Boolean(message) && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />
+          </span>
+        )}
+        <div
+          className={styles["test-result-history-item-wrap"]}
+          onClick={(e) => {
+            e.stopPropagation();
+            navigateTo(navigateUrl);
+          }}
+        >
           <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
           <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>
           <div className={styles["test-result-history-item-info"]}>
             <Text type="ui" size={"s"} className={styles["item-time"]}>
               {formattedDuration}
             </Text>
-
-            <TooltipWrapper tooltipText={"Go to error"}>
+            <TooltipWrapper tooltipText={t("openInNewTab")}>
               <IconButton
                 icon={LineGeneralLinkExternal.id}
                 style={"ghost"}
                 size={"s"}
                 className={styles["test-result-history-item-link"]}
                 onClick={(e) => {
                   e.stopPropagation();
-                  navigateTo(navigateUrl);
+                  openInNewTab(navigateUrl);
                 }}
               />
             </TooltipWrapper>

packages/web-awesome/src/components/app/TestResult/TestResultInfo/TestResultInfoStatuses.tsx

@@ -0,0 +1,31 @@
+import lineAlertsAlertCircle from "@/assets/svg/line-alerts-alert-circle.svg";
+import lineGeneralEye from "@/assets/svg/line-general-eye.svg";
+import lineIconBomb2 from "@/assets/svg/line-icon-bomb-2.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { useI18n } from "@/stores";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+const icons = {
+  flaky: lineIconBomb2.id,
+  known: lineAlertsAlertCircle.id,
+  muted: lineGeneralEye.id,
+};
+
+export const TestResultInfoStatuses = ({ statuses }) => {
+  const { t } = useI18n("filters");
+  return (
+    <div className={styles["test-result-info-statuses"]}>
+      {statuses.map(([status], key: number) => {
+        const title = t(status);
+
+        return (
+          <div key={key} className={styles["test-result-info-status"]}>
+            <SvgIcon className={styles["metadata-icon"]} id={icons[status]} size={"s"} />
+            {capitalize(title)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};