@allurereport/web-awesome 3.0.0 → 3.1.0

package/src/components/ReportFilters/index.tsx

@@ -0,0 +1,44 @@
+import { For } from "@preact/signals/utils";
+import type { AwesomeFilter } from "@/stores/treeFilters/model";
+import { setTreeFilter, treeQuickFilters } from "@/stores/treeFilters/store";
+import { isFlakyFilter, isRetryFilter, isTagFilter, isTransitionFilter } from "@/stores/treeFilters/utils";
+import { BooleanFieldFilter } from "./BaseFilters";
+import { RetryFlakyFilter } from "./RetryFlaky";
+import { TagsFilter } from "./TagsFilter";
+import { TransitionFilter } from "./TransitionFilter";
+import * as styles from "./styles.scss";
+
+const Filter = (props: { filter: AwesomeFilter; onChange: (filter: AwesomeFilter) => void }) => {
+  const { filter, onChange } = props;
+  const { value: field, type } = filter;
+
+  if (isRetryFilter(filter) || isFlakyFilter(filter)) {
+    return <RetryFlakyFilter filter={filter} onChange={onChange} />;
+  }
+
+  if (isTransitionFilter(filter)) {
+    return <TransitionFilter group={filter} onChange={onChange} />;
+  }
+
+  if (type === "field" && field.type === "boolean") {
+    return <BooleanFieldFilter field={field} onChange={(value) => onChange({ ...filter, value })} />;
+  }
+
+  if (isTagFilter(filter)) {
+    return <TagsFilter filter={filter} onChange={onChange} />;
+  }
+
+  return null;
+};
+
+const QuickFilters = () => {
+  return <For each={treeQuickFilters}>{(filter) => <Filter filter={filter} onChange={setTreeFilter} />}</For>;
+};
+
+export const ReportFilters = () => {
+  return (
+    <div className={styles.wrapper}>
+      <QuickFilters />
+    </div>
+  );
+};

package/src/components/ReportFilters/styles.scss

@@ -0,0 +1,55 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.btnWrapper {
+  position: relative;
+
+  &:hover,
+  &:focus-within {
+    & .clear {
+      opacity: 1;
+    }
+  }
+}
+
+.clear {
+  transition: opacity var(--color-change-transition-duration) ease-out;
+  opacity: 0;
+  position: absolute;
+  top: -9.5px;
+  right: -9.5px;
+}
+
+.tooltip {
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease-in-out;
+  & > div {
+    max-width: 300px;
+    min-width: 0;
+    text-align: center;
+  }
+
+  &[data-visible="true"] {
+    opacity: 1;
+  }
+}
+
+.description {
+  color: var(--on-text-secondary);
+}
+
+.itemContent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}

package/src/components/ReportSearch/index.tsx

@@ -0,0 +1,29 @@
+import { SearchBox } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeQueryFilter, treeQueryFilterValue } from "@/stores/treeFilters/store";
+
+const handleQuerySearch = (value: string) => {
+  if (!value) {
+    setTreeQueryFilter(undefined);
+    return;
+  }
+
+  setTreeQueryFilter(value);
+};
+
+const QuerySearch = () => {
+  const { t } = useI18n("search");
+
+  return (
+    <SearchBox
+      placeholder={t("search-placeholder")}
+      value={treeQueryFilterValue.value}
+      onChange={handleQuerySearch}
+      changeDebounce={150}
+    />
+  );
+};
+
+export const ReportSearch = () => {
+  return <QuerySearch />;
+};

package/src/components/ReportTabs/index.tsx

@@ -0,0 +1,37 @@
+import { Text } from "@allurereport/web-components";
+import { useComputed } from "@preact/signals";
+import { type ComponentChildren } from "preact";
+import { useCallback } from "preact/hooks";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
+import type { AwesomeStatus } from "../../../types.js";
+import * as styles from "./styles.scss";
+
+export const ReportTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const ReportTab = (props: { id: AwesomeStatus; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const isCurrentTab = useComputed(() => treeStatus.value === id);
+
+  const handleCurrentTabClick = useCallback(() => {
+    setTreeStatus("total");
+  }, []);
+
+  const handleTabClick = useCallback(() => {
+    setTreeStatus(id);
+  }, [id]);
+
+  return (
+    <button
+      {...rest}
+      className={styles.tab}
+      onClick={isCurrentTab.value ? handleCurrentTabClick : handleTabClick}
+      aria-current={isCurrentTab.value || undefined}
+    >
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/SectionPicker/index.tsx

@@ -37,7 +37,7 @@ export const SectionPicker = () => {
       )}
     >
       <Menu.Section>
-        {["default", ...availableSections.value].map((value) => (
+        {["default", ...availableSections].map((value) => (
           <Menu.ItemWithCheckmark
             onClick={() => setSection(value)}
             key={value}

package/src/components/SplitLayout/index.tsx

@@ -1,13 +1,13 @@
 import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import { Footer } from "@/components/Footer";
-import { Header } from "@/components/Header";
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
-import { route } from "@/stores/router";
+import { testResultRoute } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -30,8 +30,10 @@ const Loader = () => {
   );
 };
 
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+
 export const SplitLayout = () => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const testResultId = currentTrId.value;
   const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
   const { t } = useI18n("controls");
   const leftSide = (
@@ -39,7 +41,7 @@ export const SplitLayout = () => {
   );
 
   const TrView = () => {
-    return testResultId ? (
+    return isTestResultRoute.value ? (
       <Loadable
         source={testResultStore}
         renderLoader={() => <Loader />}

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

@@ -7,13 +7,7 @@ const TrStepsEmpty = () => {
   return (
     <div className={styles["test-steps-empty"]}>
       <div className={styles["test-steps-empty-wrapper"]}>
-        <SvgIcon
-          size={"m"}
-          width={"32px"}
-          height={"32px"}
-          id={allureIcons.lineDevCodeSquare}
-          className={styles["test-steps-empty-icon"]}
-        />
+        <SvgIcon size={"xl"} id={allureIcons.lineDevCodeSquare} className={styles["test-steps-empty-icon"]} />
         <Text className={styles["test-steps-empty-text"]}>{t("no-test-steps-results")}</Text>
       </div>
     </div>

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

@@ -9,13 +9,7 @@ const TrThumb = () => {
   return (
     <div className={styles["test-result-thumb"]}>
       <div className={styles["test-result-thumb-wrapper"]}>
-        <SvgIcon
-          size={"m"}
-          width={"32px"}
-          height={"32px"}
-          id={allureIcons.lineDevCodeSquare}
-          className={styles["test-result-thumb-icon"]}
-        />
+        <SvgIcon size={"xl"} id={allureIcons.lineDevCodeSquare} className={styles["test-result-thumb-icon"]} />
         <Text className={styles["test-result-thumb-text"]}>{t("no-test-case-results")}</Text>
       </div>
     </div>

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

@@ -5,7 +5,7 @@ import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
-import { navigateTo, openInNewTab } from "@/stores/router";
+import { navigateToTestResult, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 import type { AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
@@ -42,7 +42,7 @@ export const TrEnvironmentItem: FunctionalComponent<{
             }
 
             e.stopPropagation();
-            navigateTo(navigateUrl);
+            navigateToTestResult({ testResultId: id });
           }}
         >
           <TreeItemIcon status={status} className={styles["test-result-environment-item-status"]} />

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

@@ -13,7 +13,15 @@ import * as styles from "./styles.scss";
 const TrErrorTrace = ({ trace }: { trace: string }) => {
   const sanitizedTrace = ansiToHTML(trace, {
     fg: "var(--on-text-primary)",
-    colors: {},
+    bg: "none",
+    colors: {
+      0: "none",
+      1: "none",
+      2: "var(--on-support-sirius)",
+      3: "var(--on-support-atlas)",
+      4: "var(--bg-support-skat)",
+      5: "var(--on-support-betelgeuse)",
+    },
   });
 
   return (
@@ -88,7 +96,6 @@ export const TrError: FunctionalComponent<TestError & { className?: string; stat
       ) : (
         empty("no-message-provided")
       )}
-
       {Boolean(actual && actual !== "undefined" && expected && expected !== "undefined") && (
         <Button
           style={"flat"}

package/src/components/TestResult/TrHeader/TrBreadcrumbs.tsx

@@ -2,7 +2,7 @@ import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-compon
 import clsx from "clsx";
 import type { AwesomeTestResult } from "types";
 import * as styles from "@/components/TestResult/TrHeader/styles.scss";
-import { navigateTo } from "@/stores/router";
+import { navigateToRoot } from "@/stores/router";
 
 interface TrBreadcrumbs {
   testResult?: AwesomeTestResult;
@@ -19,7 +19,7 @@ export const TrBreadcrumbs = ({ testResult }: TrBreadcrumbs) => {
           size={"s"}
           style={"ghost"}
           className={styles["test-result-breadcrumb-link"]}
-          onClick={() => navigateTo("")}
+          onClick={() => navigateToRoot()}
         />
       </div>
       {Boolean(breadcrumbs?.length) &&

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>
   );
 };