@allurereport/web-awesome 3.0.0-beta.10

package/src/components/Tabs/styles.scss

@@ -0,0 +1,56 @@
+.tabsList {
+  background-color: var(--bg-base-secondary);
+  padding: 2px;
+  border-radius: 8px;
+  display: flex;
+  overflow-x: auto;
+  flex-grow: 0;
+  max-width: max-content;
+}
+
+.tab {
+  background-color: var(--bg-control-flat);
+  color: var(--on-text-primary);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  padding: 2px 8px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  transform: scale(1);
+  outline-offset: 1px;
+  outline: 1px solid transparent;
+  transition:
+    transform var(--interaction-transition-duration) ease-out,
+    outline var(--interaction-transition-duration) ease-out,
+    background-color var(--color-change-transition-duration),
+    border-color var(--color-change-transition-duration);
+
+  &[aria-current] {
+    background-color: var(--bg-base-modal);
+    border-color: var(--on-border-primary);
+    cursor: default;
+  }
+
+  &:hover:not([aria-current]) {
+    background-color: var(--bg-control-flat-medium);
+  }
+
+  &:active:not([aria-current]) {
+    background-color: var(--bg-control-flat-heavy);
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--ad-other-focus);
+
+    &:not([aria-current]) {
+      background-color: var(--bg-control-flat-medium);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+export type TestResultAttachmentViewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {
+  const { attachments } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-attachments-view"]}>
+      {attachments.length ? (
+        attachments?.map((attach, key) => (
+          <TestResultAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
+        ))
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-attachments-results")}</div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+.test-result-attachments-view {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  width: 100%;
+}

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

@@ -0,0 +1,27 @@
+import { Text } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
+import * as styles from "./styles.scss";
+
+export type TestResultDescriptionProps = {
+  description: AwesomeTestResult["description"];
+};
+
+export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  return (
+    <div className={styles["test-result-description"]}>
+      <div className={styles["test-result-description-wrapper"]}>
+        <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
+        {isOpen && (
+          <Text tag={"p"} className={styles["test-result-description-text"]}>
+            {description || "Description mock"}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+.test-result-description {
+  padding: 0 24px;
+}
+
+.test-result-description-wrapper {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.test-result-description-text {
+  padding-top: 10px;
+}

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

@@ -0,0 +1,26 @@
+import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+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;
+  className?: ClassValue;
+}> = ({ isOpened, setIsOpen, title, icon, counter, className }) => {
+  return (
+    <div className={clsx(styles["test-result-dropdown"], className)} 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/TestResult/TestResultDropdown/styles.scss

@@ -0,0 +1,34 @@
+.test-result-dropdown {
+  display: flex;
+  justify-content: space-between;
+  padding: 1px 8px 1px 6px;
+  border-radius: 6px;
+  transition: background-color 300ms;
+  align-items: center;
+  cursor: pointer;
+  width: 100%;
+}
+
+.test-result-step-chevron {
+  width: 12px;
+  height: 12px;
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.test-result-step-chevron-open {
+  transform: rotate(0deg);
+}
+
+.test-result-dropdown-wrap {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  align-items: center;
+  padding: 6px 8px 6px 6px;
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}

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

@@ -0,0 +1,34 @@
+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"]}>
+        <SvgIcon
+          size={"m"}
+          width={"32px"}
+          height={"32px"}
+          id={allureIcons.lineDevCodeSquare}
+          className={styles["test-result-thumb-icon"]}
+        />
+        <Text className={styles["test-result-thumb-text"]}>{t("no-test-case-results")}</Text>
+      </div>
+    </div>
+  );
+};
+
+const TestResultEmpty = () => {
+  return (
+    <div className={baseStyles.content}>
+      <TestResultInfo />
+      <TestResultThumb />
+    </div>
+  );
+};
+
+export default TestResultEmpty;

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

@@ -0,0 +1,25 @@
+.test-result-thumb {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 720px;
+  align-items: center;
+}
+
+.test-result-thumb-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.test-result-thumb-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 16px;
+  flex: 1 1 auto;
+}
+
+.test-result-thumb-text {
+  color: var(--on-text-secondary);
+  flex: 1 1 auto;
+}

package/src/components/TestResult/TestResultHeader/TestResultBreadcrumbs.tsx

@@ -0,0 +1,44 @@
+import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { AwesomeTestResult } from "types";
+import * as styles from "@/components/TestResult/TestResultHeader/styles.scss";
+import { navigateTo } from "@/stores/router";
+
+interface TestResultBreadcrumbsProps {
+  testResult?: AwesomeTestResult;
+}
+
+export const TestResultBreadcrumbs = ({ testResult }: TestResultBreadcrumbsProps) => {
+  const { breadcrumbs, name } = testResult || {};
+
+  return (
+    <div className={styles["test-result-breadcrumbs"]}>
+      <div className={clsx(styles["test-result-breadcrumb"], styles["test-result-home"])}>
+        <IconButton
+          icon={allureIcons.lineGeneralHomeLine}
+          size={"s"}
+          style={"ghost"}
+          className={styles["test-result-breadcrumb-link"]}
+          onClick={() => navigateTo("")}
+        />
+      </div>
+      {Boolean(breadcrumbs?.length) &&
+        breadcrumbs?.[0]?.map((item, key) => {
+          return (
+            <div className={styles["test-result-breadcrumb"]} key={key}>
+              <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
+              <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+                {item}
+              </Text>
+            </div>
+          );
+        })}
+      <div className={styles["test-result-breadcrumb"]}>
+        {name && <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />}
+        <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+          {name}
+        </Text>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+import type { FunctionalComponent } from "preact";
+import { LanguagePicker } from "@/components/LanguagePicker";
+import type { TestResultProps } from "@/components/TestResult";
+import { TestResultBreadcrumbs } from "@/components/TestResult/TestResultHeader/TestResultBreadcrumbs";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import ToggleLayout from "@/components/ToggleLayout";
+import { isSplitMode } from "@/stores/layout";
+import * as styles from "./styles.scss";
+
+export const TestResultHeader: FunctionalComponent<TestResultProps> = ({ testResult }) => {
+  return (
+    <div className={styles.above}>
+      {!isSplitMode.value ? <TestResultBreadcrumbs testResult={testResult} /> : ""}
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ToggleLayout />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,48 @@
+.test-result-breadcrumbs {
+  margin-right: auto;
+  display: flex;
+  gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.test-result-home {
+  flex: none;
+}
+
+.test-result-breadcrumb-link {
+  color: var(--on-text-secondary);
+}
+
+.test-result-breadcrumb {
+  display: flex;
+  gap: 4px;
+  color: var(--on-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  align-items: center;
+}
+
+.test-result-breadcrumb-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+.test-result-breadcrumb-arrow {
+  transform: rotate(-90deg);
+}

package/src/components/TestResult/TestResultHistory/TestResultHistoryItem.tsx

@@ -0,0 +1,66 @@
+import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { ArrowButton } from "@/components/ArrowButton";
+import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
+import { TrError } from "@/components/TestResult/TrError";
+import { useI18n } from "@/stores";
+import { navigateTo, openInNewTab } from "@/stores/router";
+import { timestampToDate } from "@/utils/time";
+
+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);
+  const { t } = useI18n("controls");
+
+  const navigateUrl = id;
+
+  return (
+    <div>
+      <div className={styles["test-result-history-item-header"]}>
+        {Boolean(error) && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+          </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={t("openInNewTab")}>
+              <IconButton
+                icon={allureIcons.lineGeneralLinkExternal}
+                style={"ghost"}
+                size={"s"}
+                className={styles["test-result-history-item-link"]}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openInNewTab(navigateUrl);
+                }}
+              />
+            </TooltipWrapper>
+          </div>
+        </div>
+      </div>
+      {isOpened && error && (
+        <div>
+          <TrError {...error} />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { FunctionalComponent } from "preact";
+import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
+import { useI18n } from "@/stores";
+import { type AwesomeTestResult } from "../../../../types";
+import * as styles from "./styles.scss";
+
+export type TestResultHistoryViewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = ({ testResult }) => {
+  const { history } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-history"]}>
+      {history.length ? (
+        history?.map((item, key) => <TestResultHistoryItem testResultItem={item} key={key} />)
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
+      )}
+    </div>
+  );
+};
+
+export default TestResultHistoryView;

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

@@ -0,0 +1,63 @@
+.test-result-history {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-history-item-header {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.test-result-history-item-wrap {
+  transition: background-color 300ms;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  border-radius: 6px;
+  padding: 4px 4px 4px 4px;
+  width: 100%;
+  align-items: flex-start;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.test-result-history-item-text {
+  padding-top: 2px;
+}
+
+.test-result-history-item-info {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.item-time {
+  margin-left: auto;
+  line-height: 20px;
+  color: var(--on-text-secondary);
+}
+
+.test-result-history-item-link {
+  :root {
+    --allure-btn-icon-color: var(--bg-control-flat);
+  }
+
+  color: var(--on-icon-secondary);
+}
+
+.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/TestResultInfo/TestResultInfoStatuses.tsx

@@ -0,0 +1,30 @@
+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: Record<string, string> = {
+  flaky: allureIcons.lineIconBomb2,
+  known: allureIcons.lineAlertsAlertCircle,
+  muted: allureIcons.lineGeneralEye,
+};
+
+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) => {
+        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>
+  );
+};

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

@@ -0,0 +1,81 @@
+import { formatDuration } from "@allurereport/core-api";
+import { Counter, Heading, Text, TooltipWrapper } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+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 { isSplitMode } from "@/stores/layout";
+import { useI18n } from "@/stores/locale";
+import { timestampToDate } from "@/utils/time";
+import * as styles from "./styles.scss";
+
+export type TestResultInfoProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ 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) && <TestResultStatus status={status} />}
+          {Boolean(history?.length) && <TestResultPrevStatuses history={history} />}
+          <TestResultSeverity severity={severity} />
+          {Boolean(statuses.length) && <TestResultInfoStatuses 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"]}>
+          <TestResultTabsList>
+            <TestResultTab id="overview">{t("overview")}</TestResultTab>
+            <TestResultTab id="history" disabled={!history?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("history")}
+                {Boolean(history?.length) && <Counter size={"s"} count={history?.length} />}
+              </div>
+            </TestResultTab>
+            <TestResultTab id="retries" disabled={!retries?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("retries")}
+                {Boolean(retries?.length) && <Counter size={"s"} count={retries?.length} />}
+              </div>
+            </TestResultTab>
+            <TestResultTab id="attachments" disabled={!attachments?.length}>
+              <div className={styles["test-result-tab"]}>
+                {t("attachments")}
+                {Boolean(attachments?.length) && <Counter size={"s"} count={attachments?.length} />}
+              </div>
+            </TestResultTab>
+          </TestResultTabsList>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={clsx(styles["test-result-info"], isSplitMode.value && styles.sticky)}>
+      <TestResultNavigation testResult={testResult} />
+      {testResult && <Content />}
+    </div>
+  );
+};