@allurereport/web-awesome 3.0.0-beta.10

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

@@ -0,0 +1,58 @@
+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";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+const typeMap = {
+  before: TestResultStep,
+  after: TestResultStep,
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+};
+
+export type TestResultSetupProps = {
+  setup: AwesomeTestResult["setup"];
+  id?: string;
+};
+
+export const TestResultSetup: FunctionalComponent<TestResultSetupProps> = ({ setup, id }) => {
+  const teardownId = `${id}-setup`;
+  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(teardownId));
+  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(teardownId);
+  };
+  const { t } = useI18n("execution");
+
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={allureIcons.lineTimeClockStopwatch}
+        isOpened={isOpened}
+        setIsOpen={handleClick}
+        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,25 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { Text, TreeItemIcon } from "@allurereport/web-components";
+import clsx from "clsx";
+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/index.tsx

@@ -0,0 +1,58 @@
+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 { collapsedTrees, toggleTree } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+const typeMap = {
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+} as const;
+
+export type TestResultStepsProps = {
+  steps: AwesomeTestResult["steps"];
+  id?: string;
+};
+
+type StepComponentProps = FunctionalComponent<{
+  item?: AwesomeTestStepResult;
+  stepIndex?: number;
+}>;
+
+export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps, id }) => {
+  const stepsId = `${id}-steps`;
+  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(stepsId));
+  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(stepsId);
+  };
+
+  const { t } = useI18n("execution");
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={allureIcons.lineHelpersPlayCircle}
+        isOpened={isOpened}
+        setIsOpen={handleClick}
+        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>
+  );
+};

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

@@ -0,0 +1,225 @@
+.test-result-steps {
+  padding-right: 24px;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.test-result-steps-root {
+  padding-left: 30px;
+}
+
+.test-result-step {
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.test-result-step-content {
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.test-result-attachment-content {
+  max-height: 450px;
+  overflow-y: auto;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.test-result-attachment-content-wrapper {
+  padding-left: 16px;
+  margin-left: 11px;
+  max-height: 450px;
+  overflow-y: auto;
+}
+
+.test-result-step-root {
+  padding-left: 12px;
+}
+
+.test-result-step-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+  min-height: 32px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.test-result-header-text {
+  padding-left: 4px;
+  word-break: break-word;
+}
+
+.test-result-step-button {
+  padding: 2px;
+  box-sizing: border-box;
+  margin-right: 2px;
+  margin-left: 2px;
+}
+
+.test-result-step-number {
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+  line-height: 20px;
+  min-width: 56px;
+  text-align: right;
+}
+
+.item-info {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  color: var(--on-text-secondary);
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.item-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--on-icon-secondary);
+  min-width: 52px;
+  justify-content: flex-end;
+}
+
+.item-info-step {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.item-info-step-icon {
+  color: var(--on-icon-secondary);
+}
+
+.test-result-step-chevron {
+  width: 12px;
+  height: 12px;
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.test-result-step-chevron-open {
+  transform: rotate(0deg);
+}
+
+.test-result-attachment-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.test-result-attachment-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.test-result-attachment-arrow-opened {
+  transform: rotate(0);
+}
+
+.test-result-attachment-icon {
+  color: var(--on-icon-secondary);
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.test-result-attachment-text {
+  padding-left: 4px;
+  word-break: break-word;
+}
+
+.test-result-attachment-image {
+  overflow: hidden;
+  cursor: pointer;
+  padding: 4px 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+  }
+}
+
+.test-result-parameters {
+  padding-left: 62px;
+}
+
+.attachment-background {
+  filter: blur(40px) brightness(0.4);
+  background-position: 50%;
+  background-size: cover;
+  position: absolute;
+  inset: -100px;
+  z-index: -1;
+}
+
+.test-result-attachment-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.test-result-visibility-hidden {
+  visibility: hidden;
+}
+
+.item-button {
+  color: var(--bg-control-flat);
+}
+
+.wrong-attachment-sign {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.test-result-attachment-missed {
+  color: var(--on-text-secondary);
+  line-height: 20px;
+  margin-right: auto;
+  padding-top: 2px;
+}
+
+.test-result-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 32px;
+}
+
+.test-result-strut {
+  width: 24px;
+}
+
+.html-attachment-preview {
+  padding: 0 16px;
+}

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

@@ -0,0 +1,76 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { attachmentType } from "@allurereport/web-commons";
+import { Attachment, Code, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import { ArrowButton } from "@/components/ArrowButton";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachmentInfo } from "@/components/TestResult/TestResultSteps/testResultAttachmentInfo";
+
+const { lineImagesImage, lineFilesFileAttachment2 } = allureIcons;
+
+const iconMap: Record<string, string> = {
+  "text/plain": lineFilesFileAttachment2,
+  "application/xml": lineFilesFileAttachment2,
+  "text/html": lineFilesFileAttachment2,
+  "text/csv": lineFilesFileAttachment2,
+  "text/tab-separated-values": lineFilesFileAttachment2,
+  "text/css": lineFilesFileAttachment2,
+  "text/uri-list": lineFilesFileAttachment2,
+  "image/svg+xml": lineImagesImage,
+  "image/png": lineImagesImage,
+  "application/json": lineFilesFileAttachment2,
+  "application/zip": lineFilesFileAttachment2,
+  "video/webm": lineImagesImage,
+  "image/jpeg": lineImagesImage,
+  "video/mp4": lineImagesImage,
+  "application/vnd.allure.image.diff": lineImagesImage,
+};
+
+export const TestResultAttachment: FunctionComponent<{
+  item: AttachmentTestStepResult;
+  stepIndex?: number;
+  className?: string;
+}> = ({ item, stepIndex }) => {
+  const [isOpened, setIsOpen] = useState(false);
+  const { link } = item;
+  const { missed } = link;
+  const componentType = attachmentType(link.contentType);
+  const isValidComponentType = !["archive", null].includes(componentType.type as string);
+
+  return (
+    <div className={styles["test-result-step"]}>
+      <div
+        className={styles["test-result-attachment-header"]}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        <ArrowButton isOpened={isOpened} />
+        <div className={styles["test-result-attachment-icon"]}>
+          <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
+        </div>
+
+        <Code size="s" className={styles["test-result-step-number"]}>
+          {stepIndex}
+        </Code>
+
+        <Text className={styles["test-result-attachment-text"]}>{link.name || link.originalFileName}</Text>
+        {missed && (
+          <Text size={"s"} className={styles["test-result-attachment-missed"]}>
+            missed
+          </Text>
+        )}
+        <TestResultAttachmentInfo item={item} shouldExpand={isValidComponentType} />
+      </div>
+      {isOpened && isValidComponentType && (
+        <div className={styles["test-result-attachment-content-wrapper"]}>
+          <div className={styles["test-result-attachment-content"]}>
+            <Attachment item={item} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,83 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { downloadAttachment } from "@allurereport/web-commons";
+import { Attachment, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { filesize } from "filesize";
+import type { FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { useI18n } from "@/stores";
+import { isModalOpen, modalData, openModal } from "@/stores/modal";
+
+interface TestResultAttachmentInfoProps {
+  item?: AttachmentTestStepResult;
+  shouldExpand?: boolean;
+}
+
+export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentInfoProps> = ({
+  item,
+  shouldExpand,
+}) => {
+  const { id, ext, contentType } = item.link;
+  const { t: tooltip } = useI18n("controls");
+  const contentLength = item.link.missed === false ? item.link.contentLength : undefined;
+  const contentSize = contentLength
+    ? filesize(contentLength, {
+        base: 2,
+        round: 1,
+      })
+    : "-";
+
+  const expandAttachment = (event: Event) => {
+    event.stopPropagation();
+    openModal({
+      data: item,
+      component: <Attachment item={item} previewable={true} />,
+    });
+  };
+
+  useEffect(() => {
+    if (isModalOpen.value) {
+      openModal({
+        isModalOpen: true,
+        data: item,
+        component: <Attachment item={item} />,
+      });
+    }
+  }, [item]);
+
+  const downloadData = async (e: MouseEvent) => {
+    e.stopPropagation();
+    await downloadAttachment(id, ext, contentType);
+  };
+
+  return (
+    <div className={styles["item-info"]}>
+      {Boolean(contentType) && <Text size={"s"}>{contentType}</Text>}
+      {Boolean(contentSize) && <Text size={"s"}>{contentSize}</Text>}
+      <div className={styles["item-buttons"]}>
+        {shouldExpand && (
+          <TooltipWrapper tooltipText={tooltip("expand")}>
+            <IconButton
+              className={styles["item-button"]}
+              style={"ghost"}
+              size={"s"}
+              iconSize={"s"}
+              icon={allureIcons.lineArrowsExpand3}
+              onClick={expandAttachment}
+            />
+          </TooltipWrapper>
+        )}
+        <TooltipWrapper tooltipText={tooltip("downloadAttachment")}>
+          <IconButton
+            style={"ghost"}
+            size={"s"}
+            iconSize={"s"}
+            className={styles["item-button"]}
+            icon={allureIcons.lineGeneralDownloadCloud}
+            onClick={(e: MouseEvent) => downloadData(e)}
+          />
+        </TooltipWrapper>
+      </div>
+    </div>
+  );
+};