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

package/src/components/{app/ReportHeader → ReportHeader}/index.tsx

@@ -1,14 +1,14 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { ReportHeaderLogo } from "@/components/app/ReportHeader/ReportHeaderLogo";
-import { ReportHeaderPie } from "@/components/app/ReportHeader/ReportHeaderPie";
-import { Heading, Text } from "@/components/commons/Typography";
+import { Heading, Text } from "@allurereport/web-components";
+import type { AllureAwesomeReportOptions } from "types";
+import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
+import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
 import { currentLocaleIso } from "@/stores";
-import type { AllureAwesomeReportOptions } from "../../../../types.js";
 import * as styles from "./styles.scss";
 
 export const ReportHeader = () => {
   const { reportName, createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
-  const formattedCreatedAt = new Date(createdAt).toLocaleDateString(currentLocaleIso.value as string, {
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "long",
     day: "numeric",
     year: "numeric",

package/src/components/{app/ReportLogo → ReportLogo}/index.tsx

@@ -1,8 +1,7 @@
 import { getReportOptions } from "@allurereport/web-commons";
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import reportLogoDefault from "@/assets/svg/report-logo.svg";
-import { AllureAwesomeReportOptions } from "../../../../types";
-import { SvgIcon } from "../../commons/SvgIcon";
+import type { AllureAwesomeReportOptions } from "types";
 import * as styles from "./styles.scss";
 
 export const ReportLogo = (props: { className?: string; logo?: never }) => {
@@ -11,7 +10,7 @@ export const ReportLogo = (props: { className?: string; logo?: never }) => {
 
   return (
     <div className={clsx(styles["report-logo"], className)}>
-      {logo ? <img src={logo} alt="report logo" /> : <SvgIcon id={reportLogoDefault.id} inline />}
+      {logo ? <img src={logo} alt="report logo" /> : <SvgIcon id={allureIcons.reportLogo} inline />}
     </div>
   );
 };

package/src/components/{app/ReportLogoFull → ReportLogoFull}/index.tsx

@@ -1,7 +1,6 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import reportLogo from "@/assets/svg/report-logo.svg";
-import { SvgIcon } from "../../commons/SvgIcon";
-import { Text } from "../../commons/Typography";
 import * as styles from "./styles.scss";
 
 export const ReportLogoFull = (props: {
@@ -14,7 +13,7 @@ export const ReportLogoFull = (props: {
 
   return (
     <Text type="paragraph" size="m" bold className={clsx(className, styles.text)}>
-      <SvgIcon id={reportLogo.id} size="m" inline className={styles.logo} />
+      <SvgIcon id={allureIcons.reportLogo} size="m" inline className={styles.logo} />
       <span>Allure Report</span>
     </Text>
   );

package/src/components/{app/ReportMetadata → ReportMetadata}/MetadataItem.tsx

@@ -1,6 +1,6 @@
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import { FunctionalComponent } from "preact";
-import { Text } from "@/components/commons/Typography";
+import type { FunctionalComponent } from "preact";
 import * as styles from "./styles.scss";
 
 export type MetadataProps = {

package/src/components/{app/ReportMetadata → ReportMetadata}/MetadataSummary.tsx

@@ -1,13 +1,11 @@
-import type { Statistic } from "@allurereport/core-api";
-import { statusesList } from "@allurereport/core-api";
+import { type Statistic, statusesList } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 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";
-import { Loadable } from "@/components/commons/Loadable";
+import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
+import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
+import * as styles from "@/components/ReportMetadata/styles.scss";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { capitalize } from "@/utils/capitalize";
@@ -28,11 +26,11 @@ export const MetadataSummary: FunctionComponent = () => {
         }));
         const metaDataTests = ["flaky", "retry"]
           .map((key) => {
-            if (!stats[key]) {
+            if (!stats[key as keyof Statistic]) {
               return;
             }
             const title = testSummary(key);
-            const props = { title, count: stats[key] || 0, type: key };
+            const props = { title, count: stats[key as keyof Statistic] || 0, type: key };
 
             return (
               <div key={key}>

package/src/components/{app/ReportMetadata → ReportMetadata}/MetadataTestType.tsx

@@ -1,13 +1,13 @@
+import { Text } from "@allurereport/web-components";
 import { clsx } from "clsx";
-import { FunctionComponent } from "preact";
-import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
-import * as styles from "@/components/app/ReportMetadata/styles.scss";
-import { Text } from "@/components/commons/Typography";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import * as styles from "@/components/ReportMetadata/styles.scss";
 
 export const MetadataTestType: FunctionComponent<MetadataProps> = ({ status, count }) => {
   return (
     <div data-testid="metadata-value" className={styles["metadata-test-type"]}>
-      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])}></div>
+      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])} />
       <Text type={"ui"} size={"m"} bold>
         {count}
       </Text>

package/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import * as styles from "./styles.scss";
+
+const icons: Record<string, string> = {
+  flaky: allureIcons.lineGeneralZap,
+  retry: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNotificationBox,
+};
+
+export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => {
+  return (
+    <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
+      {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
+      <Text size={"m"} bold>
+        {count}
+      </Text>
+    </div>
+  );
+};

package/src/components/{app/ReportMetadata → ReportMetadata}/index.tsx

@@ -1,10 +1,10 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
-import { FunctionalComponent } from "preact";
+import { Loadable } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { MetadataList } from "@/components/app/Metadata";
-import { MetadataButton } from "@/components/app/MetadataButton";
-import { MetadataSummary } from "@/components/app/ReportMetadata/MetadataSummary";
-import { Loadable } from "@/components/commons/Loadable";
+import { MetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
+import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
 import { envInfoStore } from "@/stores/envInfo";
 import * as styles from "./styles.scss";
 

package/src/components/{app/ReportMetadata → ReportMetadata}/styles.scss

@@ -1,4 +1,4 @@
-@import "../../../assets/scss/mixins.scss";
+@import "~@allurereport/web-components/mixins.scss";
 
 .report-metadata {
   padding-top: 20px;

package/src/components/{app/Tabs → Tabs}/index.tsx

@@ -1,6 +1,8 @@
+import { Text } from "@allurereport/web-components";
 import { type ComponentChildren, createContext } from "preact";
 import { useContext, useState } from "preact/hooks";
-import { Text } from "../../commons/Typography";
+import { setTreeStatus } from "@/stores/tree";
+import type { AllureAwesomeStatus } from "../../../types";
 import * as styles from "./styles.scss";
 
 type TabsContextT = {
@@ -41,10 +43,13 @@ export const Tab = (props: { id: string; children: ComponentChildren }) => {
   const isCurrentTab = currentTab === id;
   const handleTabClick = () => {
     if (isCurrentTab) {
+      setCurrentTab("total");
+      setTreeStatus("total");
       return;
     }
 
     setCurrentTab(id);
+    setTreeStatus(id as AllureAwesomeStatus);
   };
 
   return (

package/src/components/{app/TestResult → TestResult}/TestResultAttachmentsView/index.tsx

@@ -1,7 +1,7 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
 import type { AllureAwesomeTestResult } from "types";
-import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 

package/src/components/{app/TestResult → TestResult}/TestResultDescription/index.tsx

@@ -1,8 +1,8 @@
-import { FunctionalComponent } from "preact";
+import { Text } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { MetadataButton } from "@/components/app/MetadataButton";
-import { Text } from "@/components/commons/Typography";
-import { AllureAwesomeTestResult } from "../../../../../types";
+import type { AllureAwesomeTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
 export type TestResultDescriptionProps = {

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

@@ -0,0 +1,23 @@
+import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
+import * as styles from "./styles.scss";
+
+export const TestResultDropdown: FunctionalComponent<{
+  isOpened: boolean;
+  setIsOpen: (isOpened: boolean) => void;
+  title: string;
+  icon: string;
+  counter: number;
+}> = ({ isOpened, setIsOpen, title, icon, counter }) => {
+  return (
+    <div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
+      <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+      <div className={styles["test-result-dropdown-wrap"]}>
+        <SvgIcon id={icon} />
+        <Text bold>{title}</Text>
+        <Counter count={counter} size="s" />
+      </div>
+    </div>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultEmpty/index.tsx

@@ -1,11 +1,11 @@
-import LineDevCodeSquare from "@/assets/svg/line-dev-code-square.svg";
-import * as baseStyles from "@/components/app/BaseLayout/styles.scss";
-import { TestResultInfo } from "@/components/app/TestResult/TestResultInfo";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import * as baseStyles from "@/components/BaseLayout/styles.scss";
+import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
+import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
 const TestResultThumb = () => {
+  const { t } = useI18n("empty");
   return (
     <div className={styles["test-result-thumb"]}>
       <div className={styles["test-result-thumb-wrapper"]}>
@@ -13,10 +13,10 @@ const TestResultThumb = () => {
           size={"m"}
           width={"32px"}
           height={"32px"}
-          id={LineDevCodeSquare.id}
+          id={allureIcons.lineDevCodeSquare}
           className={styles["test-result-thumb-icon"]}
         />
-        <Text className={styles["test-result-thumb-text"]}>No test case results</Text>
+        <Text className={styles["test-result-thumb-text"]}>{t("no-test-case-results")}</Text>
       </div>
     </div>
   );

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

@@ -0,0 +1,59 @@
+import type { TestError } from "@allurereport/core-api";
+import { Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const TestResultErrorTrace = ({ trace }: { trace: string }) => {
+  return (
+    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
+      <Code size={"s"} type={"ui"}>
+        <pre>{trace}</pre>
+      </Code>
+    </div>
+  );
+};
+
+export const TestResultError: FunctionalComponent<TestError> = ({ message, trace }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
+  const { t: empty } = useI18n("empty");
+
+  return (
+    <div data-testid="test-result-error" className={styles["test-result-error"]}>
+      {message ? (
+        <>
+          <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>
+            <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+              <IconButton
+                style={"ghost"}
+                size={"s"}
+                icon={allureIcons.lineGeneralCopy3}
+                onClick={() => {
+                  copyToClipboard(message);
+                }}
+              />
+            </TooltipWrapper>
+          </div>
+          <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
+            <Code data-testid="test-result-error-message" size={"s"}>
+              <pre>{message}</pre>
+            </Code>
+          </div>
+        </>
+      ) : (
+        // TODO add translations
+        empty("no-message-provided")
+      )}
+
+      {/* TODO no trace? message is still clickable */}
+      {isOpen && trace && <TestResultErrorTrace trace={trace} />}
+    </div>
+  );
+};

package/src/components/{app/TestResult → TestResult}/TestResultHeader/index.tsx

@@ -1,13 +1,11 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
 import clsx from "clsx";
 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";
-import { ThemeButton } from "@/components/app/ThemeButton/ThemeButton";
-import { IconButton } from "@/components/commons/Button";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
 import { navigateTo } from "@/index";
 import * as styles from "./styles.scss";
 
@@ -23,7 +21,7 @@ export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ t
       <div className={styles["test-result-breadcrumbs"]}>
         <div className={clsx(styles["test-result-breadcrumb"], styles["test-result-home"])}>
           <IconButton
-            icon={LineGeneralHomeLine.id}
+            icon={allureIcons.lineGeneralHomeLine}
             size={"s"}
             style={"ghost"}
             className={styles["test-result-breadcrumb-link"]}
@@ -34,7 +32,7 @@ export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ t
           breadcrumbs?.[0]?.map((item, key) => {
             return (
               <div className={styles["test-result-breadcrumb"]} key={key}>
-                <SvgIcon id={LineArrowsChevronDown.id} className={styles["test-result-breadcrumb-arrow"]} />
+                <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
                 <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
                   {item}
                 </Text>
@@ -42,7 +40,9 @@ export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ t
             );
           })}
         <div className={styles["test-result-breadcrumb"]}>
-          {name && <SvgIcon id={LineArrowsChevronDown.id} className={styles["test-result-breadcrumb-arrow"]} />}
+          {name && (
+            <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
+          )}
           <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
             {name}
           </Text>

package/src/components/{app/TestResult → TestResult}/TestResultHistory/TestResultHistoryItem.tsx

@@ -1,20 +1,19 @@
-import { formatDuration } from "@allurereport/core-api";
+import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
-import LineGeneralLinkExternal from "@/assets/svg/line-general-link-external.svg";
-import { ArrowButton } from "@/components/app/ArrowButton";
-import { TestResultError } from "@/components/app/TestResult/TestResultError";
-import * as styles from "@/components/app/TestResult/TestResultHistory/styles.scss";
-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 { ArrowButton } from "@/components/ArrowButton";
+import { TestResultError } from "@/components/TestResult/TestResultError";
+import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
 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 } = testResultItem;
+export const TestResultHistoryItem: FunctionalComponent<{
+  testResultItem: HistoryTestResult;
+}> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
+  const { status, error, stop, duration, id } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
   const convertedStop = timestampToDate(stop);
   const formattedDuration = formatDuration(duration as number);
@@ -25,9 +24,9 @@ export const TestResultHistoryItem = ({ testResultItem }) => {
   return (
     <div>
       <div className={styles["test-result-history-item-header"]}>
-        {Boolean(message) && (
+        {Boolean(error) && (
           <span onClick={() => setIsOpen(!isOpened)}>
-            <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
           </span>
         )}
         <div
@@ -45,7 +44,7 @@ export const TestResultHistoryItem = ({ testResultItem }) => {
             </Text>
             <TooltipWrapper tooltipText={t("openInNewTab")}>
               <IconButton
-                icon={LineGeneralLinkExternal.id}
+                icon={allureIcons.lineGeneralLinkExternal}
                 style={"ghost"}
                 size={"s"}
                 className={styles["test-result-history-item-link"]}
@@ -58,9 +57,9 @@ export const TestResultHistoryItem = ({ testResultItem }) => {
           </div>
         </div>
       </div>
-      {isOpened && message && (
+      {isOpened && error && (
         <div>
-          <TestResultError message={message} trace={trace} />
+          <TestResultError {...error} />
         </div>
       )}
     </div>

package/src/components/{app/TestResult → TestResult}/TestResultHistory/index.tsx

@@ -1,7 +1,7 @@
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { TestResultHistoryItem } from "@/components/app/TestResult/TestResultHistory/TestResultHistoryItem";
+import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
 import { useI18n } from "@/stores";
+import { type AllureAwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export type TestResultHistoryViewProps = {

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

@@ -1,19 +1,18 @@
-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 { SvgIcon, 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 = {
-  flaky: lineIconBomb2.id,
-  known: lineAlertsAlertCircle.id,
-  muted: lineGeneralEye.id,
+const icons: Record<string, string> = {
+  flaky: allureIcons.lineIconBomb2,
+  known: allureIcons.lineAlertsAlertCircle,
+  muted: allureIcons.lineGeneralEye,
 };
 
-export const TestResultInfoStatuses = ({ statuses }) => {
+export const TestResultInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
   const { t } = useI18n("filters");
+
   return (
     <div className={styles["test-result-info-statuses"]}>
       {statuses.map(([status], key: number) => {

package/src/components/{app/TestResult → TestResult}/TestResultInfo/index.tsx

@@ -1,15 +1,13 @@
 import { formatDuration } from "@allurereport/core-api";
+import { Counter, Heading, Text, TooltipWrapper } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AllureAwesomeTestResult } from "types";
-import { TestResultInfoStatuses } from "@/components/app/TestResult/TestResultInfo/TestResultInfoStatuses";
-import { TestResultNavigation } from "@/components/app/TestResult/TestResultNavigation";
-import { TestResultPrevStatuses } from "@/components/app/TestResult/TestResultPrevStatuses";
-import { TestResultSeverity } from "@/components/app/TestResult/TestResultSeverity";
-import { TestResultStatus } from "@/components/app/TestResult/TestResultStatus";
-import { TestResultTab, TestResultTabsList } from "@/components/app/TestResult/TestResultTabs";
-import { Counter } from "@/components/commons/Counter";
-import { TooltipWrapper } from "@/components/commons/Tooltip";
-import { Heading, Text } from "@/components/commons/Typography";
+import { TestResultInfoStatuses } from "@/components/TestResult/TestResultInfo/TestResultInfoStatuses";
+import { TestResultNavigation } from "@/components/TestResult/TestResultNavigation";
+import { TestResultPrevStatuses } from "@/components/TestResult/TestResultPrevStatuses";
+import { TestResultSeverity } from "@/components/TestResult/TestResultSeverity";
+import { TestResultStatus } from "@/components/TestResult/TestResultStatus";
+import { TestResultTab, TestResultTabsList } from "@/components/TestResult/TestResultTabs";
 import { useI18n } from "@/stores/locale";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
@@ -20,7 +18,7 @@ export type TestResultInfoProps = {
 
 export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
   const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
-  const formattedDuration = formatDuration(duration);
+  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");

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

@@ -1,13 +1,8 @@
-import { FunctionalComponent } from "preact";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
-import githubIcon from "@/assets/svg/github.svg";
-import Bug from "@/assets/svg/line-dev-bug-2.svg";
-import TmsLink from "@/assets/svg/line-general-checklist3.svg";
-import Link from "@/assets/svg/line-general-link-1.svg";
-import { MetadataButton } from "@/components/app/MetadataButton";
-import { SvgIcon } from "@/components/commons/SvgIcon";
-import { Text } from "@/components/commons/Typography";
+import type { AllureAwesomeTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
@@ -17,20 +12,21 @@ interface TestResultLinkProps {
   type: string;
 }
 
+const linksIconMap: Record<string, string> = {
+  issue: allureIcons.lineDevBug2,
+  link: allureIcons.lineGeneralLink1,
+  tms: allureIcons.lineGeneralChecklist3,
+  github: allureIcons.github,
+};
+
 const TestResultLink: FunctionalComponent<{
   link: TestResultLinkProps;
 }> = ({ link }) => {
   const { url, type } = link;
-  const iconMap = {
-    issue: Bug.id,
-    link: Link.id,
-    tms: TmsLink.id,
-    github: githubIcon.id,
-  };
 
   return (
     <div className={styles["test-result-link"]}>
-      <SvgIcon id={iconMap[type] ?? Link.id} />
+      <SvgIcon id={linksIconMap[type] ?? allureIcons.lineGeneralLink1} />
       <Text tag={"a"} href={url} target={"_blank"} size={"m"} className={styles["test-result-link-text"]}>
         {url}
       </Text>

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

@@ -1,8 +1,8 @@
-import { FunctionalComponent } from "preact";
+import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { AllureAwesomeTestResult } from "types";
-import { TestResultMetadataList } from "@/components/app/Metadata";
-import { MetadataButton } from "@/components/app/MetadataButton";
+import type { AllureAwesomeTestResult } from "types";
+import { TestResultMetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 

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

@@ -1,11 +1,9 @@
+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 type { FunctionalComponent } from "preact";
 import type { AllureAwesomeTestResult } from "types";
-import LineArrowsChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
-import LineGeneralCopy3 from "@/assets/svg/line-general-copy-3.svg";
-import { IconButton } from "@/components/commons/Button";
-import { Loadable } from "@/components/commons/Loadable";
-import { TooltipWrapper } from "@/components/commons/Tooltip";
-import { Code } from "@/components/commons/Typography";
 import { navigateTo } from "@/index";
 import { useI18n } from "@/stores";
 import { testResultNavStore } from "@/stores/testResults";
@@ -28,7 +26,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
             data-testid="test-result-fullname-copy"
             style={"ghost"}
             size={"s"}
-            icon={LineGeneralCopy3.id}
+            icon={allureIcons.lineGeneralCopy3}
             onClick={() => copyToClipboard(fullName)}
           />
         </TooltipWrapper>
@@ -51,7 +49,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
               <div className={styles["test-result-navigator"]}>
                 <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
                   <IconButton
-                    icon={LineArrowsChevronDown.id}
+                    icon={allureIcons.lineArrowsChevronDown}
                     style={"ghost"}
                     isDisabled={currentIndex === data.length}
                     data-testid="test-result-nav-prev"
@@ -68,7 +66,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
                 </Code>
                 <TooltipWrapper tooltipText={tooltip("nextTR")}>
                   <IconButton
-                    icon={LineArrowsChevronDown.id}
+                    icon={allureIcons.lineArrowsChevronDown}
                     style={"ghost"}
                     isDisabled={currentIndex <= 1}
                     data-testid="test-result-nav-next"