@allurereport/web-classic 3.0.0-beta.10

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

@@ -0,0 +1,49 @@
+import { type HistoryTestResult } from "@allurereport/core-api";
+import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import { useI18n } from "@/stores";
+import { capitalize } from "@/utils/capitalize";
+import { navigateTo } from "@/utils/navigate";
+import { timestampToDate } from "@/utils/time";
+import * as styles from "./styles.scss";
+
+const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  return (
+    <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
+      <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
+    </div>
+  );
+};
+const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  const convertedStop = item.stop && timestampToDate(item.stop);
+  const { t } = useI18n("statuses");
+  const status = t(item.status);
+
+  return (
+    <div className={styles["test-result-prev-status-tooltip"]}>
+      <Text tag={"div"} size={"m"} bold>
+        {capitalize(status)}
+      </Text>
+      <Text size={"m"}>{convertedStop}</Text>
+    </div>
+  );
+};
+
+export type TestResultPrevStatusesProps = {
+  history: AwesomeTestResult["history"];
+};
+
+export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesProps> = ({ history }) => {
+  return (
+    <div className={styles["test-result-prev-statuses"]}>
+      {history?.slice(0, 6).map((item, key) => (
+        <div key={key} className={styles["test-result-prev-status"]}>
+          <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
+            <TestResultPrevStatus item={item} />
+          </TooltipWrapper>
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+.test-result-prev-statuses {
+  display: flex;
+  align-items: center;
+}
+
+.test-result-prev-status {
+  position: relative;
+  display: flex;
+  cursor: pointer;
+
+  &:not(:first-child) {
+    padding-left: 8px;
+
+    &:before {
+      content: "";
+      width: 8px;
+      position: absolute;
+      height: 2px;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      background: var(--on-border-medium);
+    }
+  }
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.test-result-prev-status-tooltip {
+  text-align: center;
+  background-color: var(--constant-bg-base-modal);
+  color: var(--constant-on-text-primary);
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  max-width: 600px;
+  min-width: max-content;
+}

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

@@ -0,0 +1,49 @@
+import { type TestResult, formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { ArrowButton } from "@/components/ArrowButton";
+import { TestResultError } from "@/components/TestResult/TestResultError";
+import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+import { navigateTo } from "@/utils/navigate";
+import { timestampToDate } from "@/utils/time";
+
+export const TestResultRetriesItem: FunctionalComponent<{
+  testResultItem: TestResult;
+}> = ({ testResultItem }) => {
+  const { id, status, message, trace, stop, duration } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = timestampToDate(stop);
+  const formattedDuration = formatDuration(duration as number);
+  const navigateUrl = `testresult/${id}`;
+
+  return (
+    <div>
+      <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
+        {Boolean(message) && <ArrowButton isOpened={isOpened} icon={allureIcons.lineArrowsChevronDown} />}
+        <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={allureIcons.lineGeneralLinkExternal}
+              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/TestResult/TestResultRetriesView/index.tsx

@@ -0,0 +1,20 @@
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
+import { TestResultRetriesItem } from "@/components/TestResult/TestResultRetriesView/TestResultRetriesItem";
+import { useI18n } from "@/stores";
+
+export const TestResultRetriesView: FunctionalComponent<{ testResult: AwesomeTestResult }> = ({ 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/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/TestResult/TestResultSetup/index.tsx

@@ -0,0 +1,49 @@
+import { allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import { useI18n } from "@/stores/locale";
+
+const typeMap = {
+  before: TestResultStep,
+  after: TestResultStep,
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+};
+
+export type TestResultSetupProps = {
+  setup: AwesomeTestResult["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={allureIcons.lineTimeClockStopwatch}
+        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/TestResult/TestResultSeverity/index.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+import * as styles from "./styles.scss";
+
+const icons: Record<string, string> = {
+  blocker: allureIcons.lineArrowsChevronUpDouble,
+  critical: allureIcons.lineArrowsChevronUp,
+  normal: allureIcons.lineGeneralEqual,
+  minor: allureIcons.lineArrowsChevronDown,
+  trivial: allureIcons.lineArrowsChevronDownDouble,
+};
+
+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]} />
+      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
+        {capitalize(t(severity))}
+      </Text>
+    </div>
+  );
+};

package/src/components/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/TestResult/TestResultStatus/index.tsx

@@ -0,0 +1,26 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { Text } from "@allurereport/web-components";
+import clsx from "clsx";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+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/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/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/TestResult/TestResultSteps/attachment.tsx

@@ -0,0 +1,68 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { Spinner } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { modalData } from "@/components/Modal";
+import { HtmlAttachmentPreview } from "@/components/TestResult/TestResultSteps/HtmlAttachmentPreview";
+import { AttachmentCode } from "@/components/TestResult/TestResultSteps/attachmentCode";
+import { AttachmentImage } from "@/components/TestResult/TestResultSteps/attachmentImage";
+import { AttachmentVideo } from "@/components/TestResult/TestResultSteps/attachmentVideo";
+import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
+import { type Attachments, attachmentType, fetchAttachment } from "@/utils/attachments";
+import * as styles from "./styles.scss";
+
+const componentsByAttachmentType: Record<string, any> = {
+  image: AttachmentImage,
+  svg: AttachmentImage,
+  json: AttachmentCode,
+  code: AttachmentCode,
+  uri: AttachmentCode,
+  css: AttachmentCode,
+  table: AttachmentCode,
+  html: AttachmentCode,
+  text: AttachmentCode,
+  video: AttachmentVideo,
+};
+const previewComponentsByAttachmentType: Record<string, any> = {
+  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();
+  }, [contentType, id, ext]);
+
+  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/TestResult/TestResultSteps/attachmentCode.tsx

@@ -0,0 +1,20 @@
+import { type AttachmentTestStepResult } from "@allurereport/core-api";
+import { type FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
+import Prism from "prismjs";
+import "@/assets/scss/code.scss";
+
+export const AttachmentCode: FunctionalComponent<{
+  item: AttachmentTestStepResult;
+  attachment: { text?: string };
+}> = ({ 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/TestResult/TestResultSteps/attachmentImage.tsx

@@ -0,0 +1,32 @@
+import { type FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
+
+export const AttachmentImage: FunctionalComponent<{
+  attachment: { img: string; originalFileName: string };
+}> = ({ 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/TestResult/TestResultSteps/attachmentVideo.tsx

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

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

@@ -0,0 +1,49 @@
+import { allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult, AwesomeTestStepResult } from "types";
+import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/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: AwesomeTestResult["steps"];
+};
+
+type StepComponentProps = FunctionalComponent<{
+  item?: AwesomeTestStepResult;
+  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={allureIcons.lineHelpersPlayCircle}
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        counter={steps?.length}
+        title={t("body")}
+      />
+      {isOpened && (
+        <div className={styles["test-result-steps-root"]}>
+          {steps?.map((item: AwesomeTestStepResult, index) => {
+            const { type } = item;
+            const StepComponent: StepComponentProps = typeMap[type];
+            return StepComponent ? <StepComponent item={item} stepIndex={index + 1} key={index} /> : null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+};