@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,48 @@
+.test-result-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.test-result-fullName {
+  font-weight: 400;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-height: 32px;
+}
+
+.test-result-fullName-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  font-weight: 400;
+  color: var(--on-text-secondary);
+}
+
+.test-result-fullName-icon {
+  --allure-btn-icon-color: var(--on-icon-secondary);
+}
+
+.test-result-navigator {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.test-result-navigator-numbers {
+  color: var(--on-text-secondary);
+  font-weight: 400;
+}
+
+.test-result-nav-prev {
+  transform: rotate(-180deg);
+  &:active {
+    transform: scale(var(--allure-btn-pressed-scale)) rotate(-180deg);
+  }
+}

package/src/components/TestResult/TestResultOverview.tsx

@@ -0,0 +1,40 @@
+import type { FunctionalComponent } from "preact";
+import type { ClassicTestResult } from "types";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { TestResultDescription } from "@/components/TestResult/TestResultDescription";
+import { TestResultError } from "@/components/TestResult/TestResultError";
+import { TestResultLinks } from "@/components/TestResult/TestResultLinks";
+import { TestResultMetadata } from "@/components/TestResult/TestResultMetadata";
+import { TestResultParameters } from "@/components/TestResult/TestResultParameters";
+import { TestResultSetup } from "@/components/TestResult/TestResultSetup";
+import { TestResultSteps } from "@/components/TestResult/TestResultSteps";
+import { TestResultTeardown } from "@/components/TestResult/TestResultTeardown";
+
+export type TestResultOverviewProps = {
+  testResult?: ClassicTestResult;
+};
+
+export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
+  const { error, parameters, groupedLabels, links, description, setup, steps, teardown } = testResult || {};
+
+  return (
+    <>
+      {Boolean(error?.message) && (
+        <div className={styles["test-result-errors"]}>
+          <TestResultError {...error} />
+        </div>
+      )}
+      {Boolean(parameters?.length) && <TestResultParameters parameters={parameters} />}
+      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
+        <TestResultMetadata testResult={testResult} />
+      )}
+      {Boolean(links?.length) && <TestResultLinks links={links} />}
+      {Boolean(description) && <TestResultDescription description={description} />}
+      <div className={styles["test-results"]}>
+        {Boolean(setup?.length) && <TestResultSetup setup={setup} />}
+        {Boolean(steps?.length) && <TestResultSteps steps={steps} />}
+        {Boolean(teardown?.length) && <TestResultTeardown teardown={teardown} />}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,30 @@
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { ClassicTestResult } from "types";
+import { MetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export type TestResultParametersProps = {
+  parameters: ClassicTestResult["parameters"];
+};
+
+export const TestResultParameters: FunctionalComponent<TestResultParametersProps> = ({ parameters }) => {
+  const [isOpened, setIsOpened] = useState(true);
+  const { t } = useI18n("ui");
+
+  return (
+    <div className={styles["test-result-metadata"]}>
+      <MetadataButton
+        isOpened={isOpened}
+        setIsOpen={setIsOpened}
+        counter={parameters?.length}
+        title={t("parameters")}
+      />
+      {/* FIXME: use proper type in the MetadataList component */}
+      {/* @ts-ignore */}
+      <div className={styles["test-result-metadata-wrapper"]}>{isOpened && <MetadataList envInfo={parameters} />}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,8 @@
+.test-result-metadata {
+  padding: 12px 24px 0;
+}
+
+.test-result-metadata-wrapper {
+  border-bottom: 1px solid var(--on-border-primary);
+  padding-bottom: 12px;
+}

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

@@ -0,0 +1,49 @@
+import { type HistoryTestResult, capitalize } from "@allurereport/core-api";
+import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import type { ClassicTestResult } from "types";
+import { useI18n } from "@/stores";
+import { timestampToDate } from "@/utils/time";
+import * as styles from "./styles.scss";
+
+const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
+  const navigateUrl = new URL(item.id, item.url);
+
+  return (
+    <a className={styles["test-result-prev-status"]} href={navigateUrl.toString()} target={"_blank"} rel={"noreferrer"}>
+      <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
+    </a>
+  );
+};
+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: ClassicTestResult["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,65 @@
+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 { useI18n } from "@/stores";
+import { navigateTo } from "@/utils/navigate";
+import { timestampToDate } from "@/utils/time";
+
+export type TrRetriesItemProps = {
+  testResultItem: TestResult;
+  attempt: number;
+  totalAttempts: number;
+};
+
+export const TestResultRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({
+  testResultItem,
+  attempt,
+  totalAttempts,
+}) => {
+  const { id, status, message, trace, stop, duration } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+
+  const retryTitlePrefix = t("attempt", { attempt, total: totalAttempts });
+  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
+
+  const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
+  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"]}>{retryTitle}</Text>
+          <div className={styles["test-result-retries-item-info"]}>
+            {Boolean(formattedDuration) && (
+              <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,27 @@
+import type { FunctionalComponent } from "preact";
+import type { ClassicTestResult } 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: ClassicTestResult }> = ({ 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}
+            attempt={retries.length - key}
+            totalAttempts={retries.length + 1}
+          />
+        ))
+      ) : (
+        <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 { ClassicTestResult } 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: ClassicTestResult["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 { capitalize } from "@allurereport/core-api";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import { useI18n } from "@/stores/locale";
+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 { capitalize } 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 * 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,38 @@
+import { sanitize } from "@allurereport/web-commons";
+import type { FunctionalComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+// TODO: use proper type here
+export type HtmlAttachmentPreviewProps = {
+  attachment: { text: string };
+};
+
+export const HtmlAttachmentPreview: FunctionalComponent<HtmlAttachmentPreviewProps> = ({ attachment }) => {
+  const [blobUrl, setBlobUrl] = useState<string>("");
+
+  const rawText = attachment.text ?? "";
+  const sanitizedText = rawText.length > 0 ? sanitize(rawText) : "";
+
+  useEffect(() => {
+    if (sanitizedText) {
+      const blob = new Blob([sanitizedText], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      setBlobUrl(url);
+
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [sanitizedText]);
+
+  if (!sanitizedText) {
+    return null;
+  }
+
+  return (
+    <div className={styles["html-attachment-preview"]}>
+      <iframe src={blobUrl} width="100%" height="100%" frameBorder="0" sandbox="allow-same-origin" />
+    </div>
+  );
+};

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 />;
+};