@allurereport/web-awesome 3.0.1 → 3.1.0

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

@@ -9,15 +9,45 @@ 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 }) => {
+type Props = {
+  historyTr: HistoryTestResult;
+};
+
+const getDate = (historyTr: HistoryTestResult) => {
+  const { stop, duration, start } = historyTr;
+
+  if (stop) {
+    return timestampToDate(stop);
+  }
+
+  if (start && duration) {
+    return timestampToDate(start + duration);
+  }
+
+  return undefined;
+};
+
+const HistoryDate = (props: { date: string | undefined }) => {
+  const { t } = useI18n("trHistory");
+  const { date } = props;
+
+  return (
+    <Text data-unknown={!date || undefined} className={styles["test-result-history-item-text"]}>
+      {date ?? t("unknown-date")}
+    </Text>
+  );
+};
+
+export const TrHistoryItem: FunctionalComponent<Props> = (props) => {
   const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
-  const { status, error, stop, duration, id, url } = testResultItem;
+  const { historyTr } = props;
+  const { status, error, duration, id, url } = historyTr;
   const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const historyDate = getDate(historyTr);
   const formattedDuration = duration ? formatDuration(duration) : undefined;
+
   const { t } = useI18n("controls");
+
   const navigateUrl = useMemo(() => {
     if (!url) {
       return undefined;
@@ -29,7 +59,8 @@ export const TrHistoryItem: FunctionalComponent<{
     navUrl.hash = id;
 
     return navUrl.toString();
-  }, [reportOptions, id, url]);
+  }, [id, url]);
+
   const renderExternalLink = () => {
     if (!navigateUrl) {
       return null;
@@ -55,7 +86,7 @@ export const TrHistoryItem: FunctionalComponent<{
     return (
       <>
         <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
-        {convertedStop && <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>}
+        <HistoryDate date={historyDate} />
         <div className={styles["test-result-history-item-info"]}>
           {formattedDuration && (
             <Text type="ui" size={"s"} className={styles["item-time"]}>

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

@@ -1,24 +1,34 @@
+import { EmptyView } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
+import { type AwesomeTestResult } from "@/../types";
 import { TrHistoryItem } from "@/components/TestResult/TrHistory/TrHistoryItem";
 import { useI18n } from "@/stores";
-import { type AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export type TrHistoryViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TrHistoryView: FunctionalComponent<TrHistoryViewProps> = ({ testResult }) => {
-  const { history } = testResult ?? {};
+const TrHistoryView: FunctionalComponent<TrHistoryViewProps> = (props) => {
+  const { testResult = {} as AwesomeTestResult } = props;
+  const { history = [] } = testResult;
   const { t } = useI18n("empty");
 
+  const hasHistory = history.length > 0;
+
+  if (!hasHistory) {
+    return (
+      <div className={styles["test-result-history"]}>
+        <EmptyView description={t("no-history-results")} />
+      </div>
+    );
+  }
+
   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>
-      )}
+      {history.map((item, key) => (
+        <TrHistoryItem key={key} historyTr={item} />
+      ))}
     </div>
   );
 };

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

@@ -29,6 +29,10 @@
 
 .test-result-history-item-text {
   padding-top: 2px;
+
+  &[data-unknown] {
+    color: var(--on-text-hint);
+  }
 }
 
 .test-result-history-item-info {
@@ -55,10 +59,3 @@
 .test-result-history-item-status {
   padding-top: 4px;
 }
-
-.test-result-empty {
-  display: flex;
-  padding: 48px 0;
-  width: 100%;
-  justify-content: center;
-}

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

@@ -34,6 +34,7 @@
 
 .test-result-name {
   margin-bottom: 8px;
+  word-break: break-word;
 }
 
 .test-result-duration {

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

@@ -1,81 +1,122 @@
-import { Code, IconButton, Loadable, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
+import { Code, IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { computed, useComputed } from "@preact/signals";
 import type { AwesomeTestResult } from "types";
 import { useI18n } from "@/stores";
-import { navigateTo } from "@/stores/router";
+import { navigateToTestResult } from "@/stores/router";
+import { trCurrentTab } from "@/stores/testResult";
 import { testResultNavStore } from "@/stores/testResults";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
-export type TrNavigationProps = {
+type Props = {
   testResult?: AwesomeTestResult;
 };
 
-export const TrNavigation: FunctionalComponent<TrNavigationProps> = ({ testResult }) => {
-  const { fullName, id: testResultId } = testResult ?? {};
-  const id = testResultId || "";
-  const { t: tooltip } = useI18n("controls");
-  const FullName = () => {
-    return (
-      <div data-testid="test-result-fullname" className={styles["test-result-fullName"]}>
-        <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
-          <IconButton
-            data-testid="test-result-fullname-copy"
-            style={"ghost"}
-            size={"s"}
-            icon={allureIcons.lineGeneralCopy3}
-            onClick={() => copyToClipboard(fullName)}
-          />
-        </TooltipWrapper>
-        <Code tag={"div"} size={"s"} className={styles["test-result-fullName-text"]}>
-          {fullName && fullName}
-        </Code>
-      </div>
-    );
-  };
+const NavArrow = (props: { trId: string | undefined; type: "prev" | "next" }) => {
+  const { trId, type } = props;
+
+  const { t: tooltipT } = useI18n("controls");
+  const isDisabled = trId === undefined;
+  const isPrevArrow = type === "prev";
+
+  const icon = isPrevArrow ? allureIcons.lineArrowsChevronUp : allureIcons.lineArrowsChevronDown;
+
+  const prevTooltip = tooltipT("prevTR");
+  const nextTooltip = tooltipT("nextTR");
+  const testId = `test-result-nav-${type}`;
+
+  if (isDisabled) {
+    return <IconButton icon={icon} style="ghost" isDisabled data-testid={testId} />;
+  }
+
+  return (
+    <TooltipWrapper tooltipText={isPrevArrow ? prevTooltip : nextTooltip}>
+      <IconButton
+        icon={icon}
+        style="ghost"
+        data-testid={testId}
+        onClick={() => navigateToTestResult({ testResultId: trId, tab: trCurrentTab.value })}
+      />
+    </TooltipWrapper>
+  );
+};
+
+const FullName = (props: { fullName: string }) => {
+  const { fullName } = props;
+  const { t: tooltipT } = useI18n("controls");
+
+  return (
+    <div data-testid="test-result-fullname" className={styles.fullName}>
+      <TooltipWrapper tooltipText={tooltipT("clipboard")} tooltipTextAfterClick={tooltipT("clipboardSuccess")}>
+        <IconButton
+          data-testid="test-result-fullname-copy"
+          style="ghost"
+          size="s"
+          iconColor="secondary"
+          icon={allureIcons.lineGeneralCopy3}
+          onClick={() => copyToClipboard(fullName)}
+        />
+      </TooltipWrapper>
+      <Code tag="div" size="s" className={styles.text}>
+        {fullName}
+      </Code>
+    </div>
+  );
+};
+
+const Counter = (props: { current: number; total: number }) => {
+  const { current, total } = props;
+
+  return (
+    <Code data-testid="test-result-nav-current" size="s" className={styles.counter}>
+      {current}&#47;{total}
+    </Code>
+  );
+};
+
+const trData = computed(() => testResultNavStore.value.data ?? []);
+const hasData = computed(() => trData.value.length > 0);
+
+const Controls = (props: { currentId: string }) => {
+  const { currentId } = props;
+
+  const nextTrId = useComputed<string | undefined>(() => trData.value[trData.value.indexOf(currentId) + 1]);
+  const prevTrId = useComputed<string | undefined>(() => trData.value[trData.value.indexOf(currentId) - 1]);
+  const currentIndex = useComputed(() => trData.value.indexOf(currentId) + 1);
+  const total = useComputed(() => trData.value.length);
+
+  if (!hasData.value) {
+    return null;
+  }
+
+  return (
+    <div className={styles.controls}>
+      <NavArrow trId={prevTrId.value} type="prev" />
+      <Counter current={currentIndex.value} total={total.value} />
+      <NavArrow trId={nextTrId.value} type="next" />
+    </div>
+  );
+};
+
+export const TrNavigation = (props: Props) => {
+  const { testResult } = props;
+
+  if (!testResult?.id) {
+    return null;
+  }
+
+  const isHidden = !!testResult?.hidden;
+  const hasFullName = !!testResult?.fullName;
+
+  // Nothing to show
+  if ((isHidden || !hasData.value) && !hasFullName) {
+    return null;
+  }
 
   return (
-    <Loadable
-      source={testResultNavStore}
-      renderData={(data) => {
-        const currentIndex = data.indexOf(id) + 1;
-
-        return (
-          <div className={styles["test-result-nav"]}>
-            {fullName && <FullName />}
-            {data && !testResult?.hidden && (
-              <div className={styles["test-result-navigator"]}>
-                <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
-                  <IconButton
-                    icon={allureIcons.lineArrowsChevronDown}
-                    style={"ghost"}
-                    isDisabled={currentIndex === data.length}
-                    data-testid="test-result-nav-prev"
-                    className={styles["test-result-nav-prev"]}
-                    onClick={() => navigateTo(data[currentIndex])}
-                  />
-                </TooltipWrapper>
-                <Code
-                  data-testid="test-result-nav-current"
-                  size={"s"}
-                  className={styles["test-result-navigator-numbers"]}
-                >
-                  {currentIndex}/{data.length}
-                </Code>
-                <TooltipWrapper tooltipText={tooltip("nextTR")}>
-                  <IconButton
-                    icon={allureIcons.lineArrowsChevronDown}
-                    style={"ghost"}
-                    isDisabled={currentIndex <= 1}
-                    data-testid="test-result-nav-next"
-                    onClick={() => navigateTo(data[currentIndex - 2])}
-                  />
-                </TooltipWrapper>
-              </div>
-            )}
-          </div>
-        );
-      }}
-    />
+    <div className={styles.nav}>
+      {hasFullName && <FullName fullName={testResult.fullName} />}
+      {!isHidden && <Controls currentId={testResult.id} />}
+    </div>
   );
 };

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

@@ -1,11 +1,10 @@
-.test-result-nav {
+.nav {
   display: flex;
   justify-content: space-between;
   margin-bottom: 12px;
 }
 
-.test-result-fullName {
-  font-weight: 400;
+.fullName {
   display: flex;
   gap: 4px;
   align-items: center;
@@ -13,36 +12,27 @@
   text-overflow: ellipsis;
   overflow: hidden;
   min-height: 32px;
-}
+  margin-left: -4px;
 
-.test-result-fullName-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 100%;
-  font-weight: 400;
-  color: var(--on-text-secondary);
-}
-
-.test-result-fullName-icon {
-  --allure-btn-icon-color: var(--on-icon-secondary);
+  & .text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    color: var(--on-text-secondary);
+  }
 }
 
-.test-result-navigator {
+.controls {
   display: flex;
   gap: 4px;
   align-items: center;
   margin-left: auto;
+  margin-right: -18px;
 }
 
-.test-result-navigator-numbers {
+.counter {
   color: var(--on-text-secondary);
-  font-weight: 400;
-}
-
-.test-result-nav-prev {
-  transform: rotate(-180deg);
-  &:active {
-    transform: scale(var(--allure-btn-pressed-scale)) rotate(-180deg);
-  }
+  padding-left: 4px;
+  padding-right: 4px;
 }

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

@@ -1,17 +1,10 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import type { Attachments } from "@allurereport/web-commons";
-import { fetchReportAttachment } from "@allurereport/web-commons";
+import { fetchFromUrl } 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 () => {

package/src/components/TestResult/TrRetriesView/TrRetriesItem.tsx

@@ -6,7 +6,7 @@ import type { AwesomeTestResult } from "types";
 import { TrError } from "@/components/TestResult/TrError";
 import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
 import { useI18n } from "@/stores/locale";
-import { navigateTo } from "@/stores/router";
+import { navigateToTestResult } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
 export type TrRetriesItemProps = {
@@ -26,7 +26,6 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
   const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
 
   const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
-  const navigateUrl = id;
 
   return (
     <div data-testid="test-result-retries-item">
@@ -55,7 +54,7 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
               size={"s"}
               className={styles["test-result-retries-item-link"]}
               data-testid="test-result-retries-item-open-button"
-              onClick={() => navigateTo(navigateUrl)}
+              onClick={() => navigateToTestResult({ testResultId: id })}
             />
           </div>
         </div>

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

@@ -1,8 +1,9 @@
+import { EmptyView } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { TrRetriesItem } from "@/components/TestResult/TrRetriesView/TrRetriesItem";
 import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
 
 export const TrRetriesView: FunctionalComponent<{
   testResult: AwesomeTestResult;
@@ -11,7 +12,7 @@ export const TrRetriesView: FunctionalComponent<{
   const { t } = useI18n("empty");
 
   return (
-    <div className={styles["test-result-history"]}>
+    <div className={styles["test-result-retries"]}>
       {retries.length ? (
         retries?.map((item, key) => (
           <TrRetriesItem
@@ -22,7 +23,7 @@ export const TrRetriesView: FunctionalComponent<{
           />
         ))
       ) : (
-        <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
+        <EmptyView description={t("no-retries-results")} />
       )}
     </div>
   );

package/src/components/TestResult/TrSteps/TrAttachment.tsx

@@ -6,6 +6,7 @@ import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentInfo";
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
 
 const { lineImagesImage, lineFilesFileAttachment2, playwrightLogo } = allureIcons;
@@ -56,14 +57,15 @@ export const TrAttachment: FunctionComponent<{
   className?: string;
 }> = ({ item, stepIndex }) => {
   const [isOpened, setIsOpen] = useState(false);
+  const { t: tAttachments } = useI18n("attachments");
   const { link } = item;
   const { missed } = link;
   const componentType = attachmentType(link.contentType);
-  const isValidComponentType = !["archive", null].includes(componentType.type as string);
+  const isValidComponentType = !["archive", null].includes(componentType);
 
   const expandAttachment = (event: Event) => {
     event.stopPropagation();
-    if (componentType.type !== "image") {
+    if (componentType !== "image") {
       return;
     }
     openModal({
@@ -109,7 +111,7 @@ export const TrAttachment: FunctionComponent<{
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
           <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
-            <Attachment item={item} />
+            <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />
           </div>
         </div>
       )}

package/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx

@@ -16,6 +16,7 @@ interface TrAttachmentInfo {
 
 export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item, shouldExpand }) => {
   const { t: tooltip } = useI18n("controls");
+  const { t: tAttachments } = useI18n("attachments");
   const { id, ext, contentType } = item.link;
   const isPwTrace = contentType === "application/vnd.allure.playwright-trace";
   const contentLength = item.link.missed === false ? item.link.contentLength : undefined;
@@ -30,7 +31,13 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item,
     event.stopPropagation();
     openModal({
       data: item,
-      component: <Attachment item={item} previewable={true} />,
+      component: (
+        <Attachment
+          item={item}
+          previewable={true}
+          i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+        />
+      ),
     });
   };
 
@@ -39,10 +46,10 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item,
       openModal({
         isModalOpen: true,
         data: item,
-        component: <Attachment item={item} />,
+        component: <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />,
       });
     }
-  }, [item]);
+  }, [item, tAttachments]);
 
   const downloadData = async (e: MouseEvent) => {
     e.stopPropagation();

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

@@ -1,38 +1,22 @@
 import { type ComponentChildren } from "preact";
-import { useEffect } from "preact/hooks";
-import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
-import { activeSubTab, navigateTo, route } from "@/stores/router";
+import { NavTab, NavTabs, NavTabsList } from "@/components/NavTabs";
+import { navigateToTestResultTab } from "@/stores/router";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
 
 export const TrTabs = NavTabs;
 export const TrTabsList = NavTabsList;
-export const useTestResultTabsContext = useNavTabsContext;
 
 export const TrTab = (props: { id: string; children: ComponentChildren }) => {
-  const { testResultId } = route.value.params;
-  const { currentTab, setCurrentTab } = useNavTabsContext();
   const { id, children } = props;
-  const isActiveFromUrl = activeSubTab.value === id;
+  const isCurrentTab = trCurrentTab.value === id;
+
   const handleTabClick = () => {
-    const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
     if (isCurrentTab) {
       return;
     }
-    setCurrentTab(id);
-    navigateTo({
-      ...route.value,
-      params: {
-        testResultId,
-        subTab: id || null,
-      },
-    });
-  };
-  const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
 
-  useEffect(() => {
-    if (isActiveFromUrl) {
-      setCurrentTab(id);
-    }
-  }, [activeSubTab.value, id, setCurrentTab]);
+    navigateToTestResultTab({ testResultId: currentTrId.value, tab: id });
+  };
 
   return (
     <NavTab id={id} onClick={handleTabClick} data-testid={`test-result-tab-${id}`} isCurrentTab={isCurrentTab}>

package/src/components/TestResult/index.tsx

@@ -1,3 +1,4 @@
+import { computed } from "@preact/signals";
 import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
@@ -9,9 +10,10 @@ import TrHistoryView from "@/components/TestResult/TrHistory";
 import { TrInfo } from "@/components/TestResult/TrInfo";
 import { TrOverview } from "@/components/TestResult/TrOverview";
 import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
-import { TrTabs, useTestResultTabsContext } from "@/components/TestResult/TrTabs";
+import { TrTabs } from "@/components/TestResult/TrTabs";
 import { fetchTestEnvGroup } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
+import { trCurrentTab } from "@/stores/testResult";
 import * as styles from "./styles.scss";
 
 export type TrViewProps = {
@@ -26,8 +28,7 @@ export type TrProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
-  const { currentTab } = useTestResultTabsContext();
+const view = computed(() => {
   const viewMap: Record<string, any> = {
     overview: TrOverview,
     history: TrHistoryView,
@@ -35,7 +36,11 @@ const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
     retries: TrRetriesView,
     environments: TrEnvironmentsView,
   };
-  const ViewComponent = viewMap[currentTab];
+  return viewMap[trCurrentTab.value];
+});
+
+const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
+  const ViewComponent = view.value;
 
   return <ViewComponent testResult={testResult} />;
 };

package/src/components/TestResult/styles.scss

@@ -9,4 +9,5 @@
   overflow: auto;
   height: 100%;
   border-radius: 0;
+  scrollbar-width: thin;
 }