@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/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: center;
+  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/app/TestResult/TestResultSteps/testResultAttachment.tsx

@@ -0,0 +1,79 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
+import LineFilesFileAttachment from "@/assets/svg/line-files-file-attachment-2.svg";
+import LineImagesImage from "@/assets/svg/line-images-image.svg";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachmentInfo } from "@/components/app/TestResult/TestResultSteps/testResultAttachmentInfo";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Code, Text } from "@/components/commons/Typography";
+import { attachmentType } from "@/utils/attachments";
+
+const iconMap = {
+  "text/plain": LineFilesFileAttachment.id,
+  "application/xml": LineFilesFileAttachment.id,
+  "text/html": LineFilesFileAttachment.id,
+  "text/csv": LineFilesFileAttachment.id,
+  "text/tab-separated-values": LineFilesFileAttachment.id,
+  "text/css": LineFilesFileAttachment.id,
+  "text/uri-list": LineFilesFileAttachment.id,
+  "image/svg+xml": LineImagesImage.id,
+  "image/png": LineImagesImage.id,
+  "application/json": LineFilesFileAttachment.id,
+  "application/zip": LineFilesFileAttachment.id,
+  "video/webm": LineImagesImage.id,
+  "image/jpeg": LineImagesImage.id,
+  "video/mp4": LineImagesImage.id,
+  "application/vnd.allure.image.diff": LineImagesImage.id,
+};
+
+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} icon={arrowsChevronDown.id} />
+        <div className={styles["test-result-attachment-icon"]}>
+          <SvgIcon size="s" id={iconMap[link.contentType] || LineFilesFileAttachment.id} />
+        </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/app/TestResult/TestResultSteps/testResultAttachmentInfo.tsx

@@ -0,0 +1,87 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import { filesize } from "filesize";
+import type { FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
+import LineArrowsExpand from "@/assets/svg/line-arrows-expand-3.svg";
+import LineGeneralDownloadCloud from "@/assets/svg/line-general-download-cloud.svg";
+import { isModalOpen, openModal } from "@/components/app/Modal";
+import { Attachment } from "@/components/app/TestResult/TestResultSteps/attachment";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { IconButton } from "@/components/commons/Button";
+import { TooltipWrapper } from "@/components/commons/Tooltip";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores";
+import { downloadAttachment } from "@/utils/attachments";
+
+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 as number, {
+        base: 2,
+        round: 1,
+      })
+    : "-";
+
+  const expandAttachment = (event: Event) => {
+    event.stopPropagation();
+    openModal({
+      data: item,
+      component: <Attachment item={item} previewable={true} />,
+    });
+  };
+
+  useEffect(() => {
+    if (isModalOpen.value) {
+      openModal({
+        data: item,
+        component: <Attachment 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={LineArrowsExpand.id}
+              onClick={expandAttachment}
+            />
+          </TooltipWrapper>
+        )}
+        <TooltipWrapper tooltipText={tooltip("downloadAttachment")}>
+          <IconButton
+            style={"ghost"}
+            size={"s"}
+            iconSize={"s"}
+            className={styles["item-button"]}
+            icon={LineGeneralDownloadCloud.id}
+            onClick={(e: MouseEvent) => downloadData(e)}
+          />
+        </TooltipWrapper>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+import type { DefaultTestStepResult } from "@allurereport/core-api";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import arrowsChevronDown from "@/assets/svg/arrows-chevron-down.svg";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { MetadataList } from "@/components/app/Metadata";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/app/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStepInfo } from "@/components/app/TestResult/TestResultSteps/testResultStepInfo";
+import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
+import { Code, Text } from "@/components/commons/Typography";
+
+export const TestResultStepParameters = ({ parameters }) => {
+  return (
+    <div className={styles["test-result-parameters"]}>
+      <MetadataList size={"s"} envInfo={parameters} columns={1} />
+    </div>
+  );
+};
+export const TestResultStepsContent = ({ item }) => {
+  const typeMap = {
+    step: TestResultStep,
+    attachment: TestResultAttachment,
+  };
+  return (
+    <div className={styles["test-result-step-content"]}>
+      {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
+      {Boolean(item?.steps?.length) && (
+        <>
+          {item.steps?.map((subItem, key) => {
+            const StepComponent = typeMap[subItem.type];
+            return <StepComponent stepIndex={key + 1} key={key} item={subItem} />;
+          })}
+        </>
+      )}
+    </div>
+  );
+};
+
+export const TestResultStep: FunctionComponent<{
+  item: DefaultTestStepResult;
+  stepIndex?: number;
+  className?: string;
+}> = ({ item, stepIndex }) => {
+  const [isOpened, setIsOpen] = useState(false);
+  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
+
+  return (
+    <div className={styles["test-result-step"]}>
+      <div className={styles["test-result-step-header"]} onClick={() => setIsOpen(!isOpened)}>
+        {!hasContent ? (
+          <div className={styles["test-result-strut"]} />
+        ) : (
+          <ArrowButton
+            isOpened={isOpened}
+            icon={arrowsChevronDown.id}
+            iconSize={"xs"}
+            className={!hasContent ? styles["test-result-visibility-hidden"] : ""}
+          />
+        )}
+        <TreeItemIcon status={item.status} />
+        <Code size={"s"} className={styles["test-result-step-number"]}>
+          {stepIndex}
+        </Code>
+        <Text className={styles["test-result-header-text"]}>{item.name}</Text>
+        <TestResultStepInfo item={item} />
+      </div>
+      {hasContent && isOpened && <TestResultStepsContent item={item} />}
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { formatDuration } from "@allurereport/core-api";
+import LineArrowsCornerDownRight from "@/assets/svg/line-arrows-corner-down-right.svg";
+import LineFilesFileAttachment from "@/assets/svg/line-files-file-attachment-2.svg";
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+
+export const TestResultStepInfo = ({ item }) => {
+  const { steps } = item;
+  const formattedDuration = formatDuration(item?.duration as number);
+  const stepLength = steps?.length;
+  const attachmentLength = steps?.filter((step) => step.type === "attachment")?.length;
+
+  return (
+    <div className={styles["item-info"]}>
+      {Boolean(stepLength) && (
+        <div className={styles["item-info-step"]}>
+          <SvgIcon id={LineArrowsCornerDownRight.id} className={styles["item-info-step-icon"]} />
+          <Text size={"s"}>{stepLength}</Text>
+        </div>
+      )}
+      {Boolean(attachmentLength) && (
+        <div className={styles["item-info-step"]}>
+          <SvgIcon id={LineFilesFileAttachment.id} className={styles["item-info-step-icon"]} />
+          <Text size={"s"}>{attachmentLength}</Text>
+        </div>
+      )}
+      <Text type="ui" size={"s"} className={styles["item-time"]}>
+        {formattedDuration}
+      </Text>
+    </div>
+  );
+};

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

@@ -0,0 +1,8 @@
+import * as styles from "@/components/app/TestResult/TestResultSteps/styles.scss";
+import { useI18n } from "@/stores";
+
+export const EmptyComponent = () => {
+  const { t } = useI18n("errors");
+
+  return <div className={styles["wrong-attachment-sign"]}>{t("missedAttachment")}</div>;
+};

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

@@ -0,0 +1,59 @@
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+type TestResultTabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (id: string) => void;
+};
+
+const TestResultTabsContext = createContext<TestResultTabsContextT | null>(null);
+
+export const useTestResultTabsContext = () => {
+  const context = useContext(TestResultTabsContext);
+
+  if (!context) {
+    throw new Error("TestResultTabs components must be used within a TestResultTabs component");
+  }
+
+  return context;
+};
+
+export const TestResultTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return (
+    <TestResultTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</TestResultTabsContext.Provider>
+  );
+};
+
+export const TestResultTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <TestResultTabsProvider {...props} />;
+};
+
+export const TestResultTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const TestResultTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
+  const { id, children } = props;
+  const { currentTab, setCurrentTab } = useTestResultTabsContext();
+  const isCurrentTab = currentTab === id;
+
+  const handleTabClick = () => {
+    if (isCurrentTab) {
+      return;
+    }
+    setCurrentTab(id);
+  };
+
+  return (
+    <button className={styles.tab} onClick={handleTabClick} aria-current={isCurrentTab ? true : undefined}>
+      <Text type="paragraph" size="m">
+        {children}
+      </Text>
+    </button>
+  );
+};

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

@@ -0,0 +1,76 @@
+.test-result-tabs {
+  display: flex;
+}
+
+.tabsList {
+  display: flex;
+  overflow-x: auto;
+  flex-grow: 0;
+  max-width: max-content;
+  gap: 8px;
+}
+
+.tab {
+  color: var(--on-text-primary);
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  transform: scale(1);
+  outline: none;
+  background-color: var(--bg-base-primary);
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  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);
+  margin: 0 0 8px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    left: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+  }
+  &[aria-current] {
+    background-color: var(--bg-base-primary);
+    cursor: default;
+
+    &:after {
+      border-bottom: 2px solid var(--on-support-aldebaran);
+    }
+
+    span {
+      font-weight: bold;
+    }
+  }
+
+  &: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: 0 solid var(--ad-other-focus);
+
+    &:not([aria-current]) {
+      background-color: var(--bg-control-flat-medium);
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { AllureAwesomeTestResult } from "types";
+import lineHelpersFlag from "@/assets/svg/line-helpers-flag.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 TestResultTeardownProps = {
+  teardown: AllureAwesomeTestResult["teardown"];
+};
+
+export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown }) => {
+  const [isOpened, setIsOpen] = useState(false);
+  const { t } = useI18n("execution");
+
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={lineHelpersFlag.id}
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        counter={teardown?.length}
+        title={t("teardown")}
+      />
+      {isOpened && (
+        <div className={styles["test-result-steps-root"]}>
+          {teardown?.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>
+  );
+};