@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

@@ -0,0 +1,50 @@
+import { formatDuration } from "@allurereport/core-api";
+import { clsx } from "clsx";
+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/TestResultRetriesView/styles.scss";
+import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
+import { IconButton } from "@/components/commons/Button";
+import { Text } from "@/components/commons/Typography";
+import { navigateTo } from "@/index";
+import { timestampToDate } from "@/utils/time";
+
+export const TestResultRetriesItem = ({ testResultItem }) => {
+  const { id, status, message, trace, stop, duration } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = timestampToDate(stop);
+  const formattedDuration = formatDuration(duration);
+  const navigateUrl = `/testresult/${id}`;
+
+  return (
+    <div>
+      <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
+        {Boolean(message) && <ArrowButton isOpened={isOpened} icon={arrowsChevronDown.id} />}
+        <div className={styles["test-result-retries-item-wrap"]}>
+          <TreeItemIcon status={status} className={styles["test-result-retries-item-status"]} />
+          <Text className={styles["test-result-retries-item-text"]}>{convertedStop}</Text>
+          <div className={styles["test-result-retries-item-info"]}>
+            <Text type="ui" size={"s"} className={styles["item-time"]}>
+              {formattedDuration}
+            </Text>
+            <IconButton
+              icon={LineGeneralLinkExternal.id}
+              style={"ghost"}
+              size={"s"}
+              className={styles["test-result-retries-item-link"]}
+              onClick={() => navigateTo(navigateUrl)}
+            />
+          </div>
+        </div>
+      </div>
+      {isOpened && message && (
+        <div className={styles["test-result-retries-item-content"]}>
+          <TestResultError message={message} trace={trace} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultRetriesView/index.tsx

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

package/src/components/app/TestResult/TestResultRetriesView/styles.scss

@@ -0,0 +1,69 @@
+.test-result-retries {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-retries-item-header {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+
+  a {
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    display: contents;
+  }
+}
+
+.test-result-retries-item-wrap {
+  transition: background-color 300ms;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  border-radius: 6px;
+  padding: 4px;
+  width: 100%;
+  align-items: flex-start;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.test-result-retries-item-text {
+  padding-top: 2px;
+}
+
+.test-result-retries-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-retries-item-content {
+  padding-left: 24px;
+}
+
+.test-result-retries-item-link {
+  color: var(--on-icon-secondary);
+}
+
+.test-result-retries-item-status {
+  padding-top: 4px;
+}
+
+.test-result-empty {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}

package/src/components/app/TestResult/TestResultSetup/index.tsx

@@ -0,0 +1,50 @@
+import i18n from "i18next";
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import LineTimeClockStopwatch from "@/assets/svg/line-time-clock-stopwatch.svg";
+import { TestResultDropdown } from "@/components/app/TestResult/TestResultDropdown";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/app/TestResult/TestResultSteps/testResultStep";
+import { useI18n } from "@/stores/locale";
+
+const typeMap = {
+  before: TestResultStep,
+  after: TestResultStep,
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+};
+
+export type TestResultSetupProps = {
+  setup: AllureAwesomeTestResult["setup"];
+};
+
+export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup }) => {
+  const [isOpened, setIsOpen] = useState(false);
+  const { t } = useI18n("execution");
+
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={LineTimeClockStopwatch.id}
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        counter={setup?.length}
+        title={t("setup")}
+      />
+      {isOpened && (
+        <div className={styles["test-result-steps-root"]}>
+          {setup?.map((item, key) => {
+            const StepComponent = typeMap[item.type];
+            return StepComponent ? (
+              // FIXME: use proper type in the StepComponent component
+              // @ts-ignore
+              <StepComponent item={item} stepIndex={key + 1} key={key} className={styles["test-result-step-root"]} />
+            ) : null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultSeverity/index.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import i18n from "i18next";
+import ChevronDownDouble from "@/assets/svg/line-arrows-chevron-down-double.svg";
+import ChevronDown from "@/assets/svg/line-arrows-chevron-down.svg";
+import ChevronUpDouble from "@/assets/svg/line-arrows-chevron-up-double.svg";
+import ChevronUp from "@/assets/svg/line-arrows-chevron-up.svg";
+import EqualIcon from "@/assets/svg/line-general-equal.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+const icons = {
+  blocker: ChevronUpDouble.id,
+  critical: ChevronUp.id,
+  normal: EqualIcon.id,
+  minor: ChevronDown.id,
+  trivial: ChevronDownDouble.id,
+};
+
+export const TestResultSeverity = ({ severity = "normal" }: { severity?: string }) => {
+  const { t } = useI18n("severity");
+  const statusClass = clsx(styles[`severity-${severity}`]);
+
+  return (
+    <div className={styles["test-result-severity"]}>
+      <SvgIcon className={statusClass} id={icons[severity]}></SvgIcon>
+      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
+        {capitalize(t(severity))}
+      </Text>
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultSeverity/styles.scss

@@ -0,0 +1,29 @@
+.test-result-severity {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.test-result-severity-text {
+  color: var(--on-text-secondary);
+}
+
+.severity-blocker {
+  color: var(--on-support-capella);
+}
+
+.severity-critical {
+  color: var(--on-support-atlas);
+}
+
+.severity-normal {
+  color: var(--on-icon-secondary);
+}
+
+.severity-minor {
+  color: var(--on-support-aldebaran);
+}
+
+.severity-trivial {
+  color: var(--on-support-castor);
+}

package/src/components/app/TestResult/TestResultStatus/index.tsx

@@ -0,0 +1,26 @@
+import type { TestStatus } from "@allurereport/core-api";
+import clsx from "clsx";
+import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+export const TestResultStatus = ({ status }: { status: TestStatus }) => {
+  const { t } = useI18n("statuses");
+  return (
+    <div
+      data-testid={`test-result-status-${status}`}
+      className={clsx(styles["test-result-status"], styles[`status-${status}`])}
+    >
+      <TreeItemIcon
+        status={status}
+        className={styles["test-result-status-icon"]}
+        classNameIcon={styles["test-result-status-icon"]}
+      />
+      <Text type={"ui"} size={"s"} bold className={styles["test-result-status-text"]}>
+        {capitalize(t(status) ?? status)}
+      </Text>
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultStatus/styles.scss

@@ -0,0 +1,36 @@
+.test-result-status {
+  padding: 2px;
+  display: flex;
+  border-radius: 100px;
+  color: var(--constant-on-text-primary);
+  height: max-content;
+}
+
+.test-result-status-text {
+  padding: 0 4px;
+}
+
+.test-result-status-icon {
+  color: var(--constant-on-text-primary);
+  padding: 0;
+}
+
+.status-passed {
+  background-color: var(--bg-support-castor);
+}
+
+.status-failed {
+  background-color: var(--bg-support-capella);
+}
+
+.status-broken {
+  background-color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  background-color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  background-color: var(--bg-support-skat);
+}

package/src/components/app/TestResult/TestResultSteps/HtmlAttachmentPreview.tsx

@@ -0,0 +1,12 @@
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+// TODO: use proper type here
+export type HtmlAttachmentPreviewProps = {
+  attachment: { text: string };
+};
+
+export const HtmlAttachmentPreview: FunctionalComponent<HtmlAttachmentPreviewProps> = ({ attachment }) => {
+  // eslint-disable-next-line react/no-danger
+  return <div className={styles["html-attachment-preview"]} dangerouslySetInnerHTML={{ __html: attachment?.text }} />;
+};

package/src/components/app/TestResult/TestResultSteps/attachment.tsx

@@ -0,0 +1,70 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { AttachmentCode } from "@/components/app/TestResult/TestResultSteps/attachmentCode";
+import { AttachmentImage } from "@/components/app/TestResult/TestResultSteps/attachmentImage";
+import { AttachmentVideo } from "@/components/app/TestResult/TestResultSteps/attachmentVideo";
+import { EmptyComponent } from "@/components/app/TestResult/TestResultSteps/wrongAttachment";
+import { Spinner } from "@/components/commons/Spinner";
+import { type Attachments, attachmentType, fetchAttachment } from "@/utils/attachments";
+import {
+  HtmlAttachmentPreview
+} from "@/components/app/TestResult/TestResultSteps/HtmlAttachmentPreview";
+import { modalData } from "@/components/app/Modal";
+import * as styles from "./styles.scss";
+
+const componentsByAttachmentType = {
+  image: AttachmentImage,
+  svg: AttachmentImage,
+  json: AttachmentCode,
+  code: AttachmentCode,
+  uri: AttachmentCode,
+  css: AttachmentCode,
+  table: AttachmentCode,
+  html: AttachmentCode,
+  text: AttachmentCode,
+  video: AttachmentVideo,
+};
+const previewComponentsByAttachmentType = {
+  html: HtmlAttachmentPreview,
+};
+
+export interface AttachmentTestStepResultProps {
+  item: AttachmentTestStepResult;
+  previewable?: boolean;
+}
+
+export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({ item, previewable }) => {
+  const {
+    link: { contentType, id, ext },
+  } = item;
+  const [attachment, setAttachment] = useState<Attachments>(null);
+  const [loaded, setLoaded] = useState(false);
+  const attachmentComponent = attachmentType(contentType);
+  const CurrentComponent = componentsByAttachmentType[attachmentComponent.type];
+  const CurrentPreviewComponent = previewComponentsByAttachmentType[attachmentComponent.type];
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result: Attachments = await fetchAttachment(id, ext, contentType);
+      setLoaded(true);
+      setAttachment(result);
+    };
+    fetchData();
+  }, [item]);
+
+  if (!loaded) {
+    return (
+      <div className={styles["test-result-spinner"]}>
+        <Spinner />
+      </div>
+    );
+  }
+
+  // temp solution before modal component refactoring
+  if (CurrentPreviewComponent && previewable && modalData.value.preview) {
+    return <CurrentPreviewComponent attachment={attachment} item={item} />
+  }
+
+  return CurrentComponent ? <CurrentComponent attachment={attachment} item={item} /> : <EmptyComponent />
+};

package/src/components/app/TestResult/TestResultSteps/attachmentCode.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "preact/hooks";
+import Prism from "prismjs";
+import "@/assets/scss/code.css";
+
+export const AttachmentCode = ({ attachment, item }) => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, [attachment]);
+
+  return (
+    <pre key={item?.link?.id} className={`language-${item?.link?.ext?.replace(".", "")} line-numbers`}>
+      <code>{attachment?.text}</code>
+    </pre>
+  );
+};

package/src/components/app/TestResult/TestResultSteps/attachmentImage.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "preact/hooks";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { EmptyComponent } from "@/components/app/TestResult/TestResultSteps/wrongAttachment";
+
+export const AttachmentImage = ({ attachment }) => {
+  const [isValidImage, setIsValidImage] = useState(true);
+
+  useEffect(() => {
+    if (attachment?.img) {
+      const img = new Image();
+      img.onload = () => setIsValidImage(true);
+      img.onerror = () => setIsValidImage(false);
+      img.src = attachment.img;
+    }
+  }, [attachment?.img]);
+
+  if (!attachment?.img || !isValidImage) {
+    return (
+      <div className={styles["test-result-attachment-error"]}>
+        <EmptyComponent />
+      </div>
+    );
+  }
+  return (
+    <div className={styles["test-result-attachment-image"]}>
+      {attachment?.img && <img src={attachment.img} alt={attachment.originalFileName} />}
+    </div>
+  );
+};

package/src/components/app/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -0,0 +1,12 @@
+import { Spinner } from "@/components/commons/Spinner";
+
+export const AttachmentVideo = ({ attachment }) => {
+  if (!attachment) {
+    return <Spinner />;
+  }
+  return (
+    <video controls loop muted>
+      <source src={attachment?.src} type={attachment?.contentType} />
+    </video>
+  );
+};

package/src/components/app/TestResult/TestResultSteps/index.tsx

@@ -0,0 +1,49 @@
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AllureAwesomeTestResult, AllureAwesomeTestStepResult } from "types";
+import LineHelpersPlayCircle from "@/assets/svg/line-helpers-play-circle.svg";
+import { TestResultDropdown } from "@/components/app/TestResult/TestResultDropdown";
+import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/app/TestResult/TestResultSteps/testResultStep";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+const typeMap = {
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+} as const;
+
+export type TestResultStepsProps = {
+  steps: AllureAwesomeTestResult["steps"];
+};
+
+type StepComponentProps = FunctionalComponent<{
+  item?: AllureAwesomeTestStepResult;
+  stepIndex?: number;
+}>;
+
+export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps }) => {
+  const [isOpened, setIsOpen] = useState(true);
+
+  const { t } = useI18n("execution");
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={LineHelpersPlayCircle.id}
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        counter={steps?.length}
+        title={t("body")}
+      />
+      {isOpened && (
+        <div className={styles["test-result-steps-root"]}>
+          {steps?.map((item: AllureAwesomeTestStepResult, index) => {
+            const { type } = item;
+            const StepComponent: StepComponentProps = typeMap[type];
+            return StepComponent ? <StepComponent item={item} stepIndex={index + 1} key={index} /> : null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+};