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

package/src/components/TestResult/TrError/TrDiff.tsx

@@ -0,0 +1,121 @@
+import { Button, Code, CodeViewer } from "@allurereport/web-components";
+import type { BaseOptions, Change } from "diff";
+import { diffChars, diffLines, diffWords } from "diff";
+import { useState } from "preact/hooks";
+import * as styles from "@/components/TestResult/TrError/styles.scss";
+import { useI18n } from "@/stores";
+
+const diffFunctions = {
+  chars: diffChars,
+  words: diffWords,
+  lines: diffLines,
+} as const;
+
+type DiffType = keyof typeof diffFunctions;
+type ViewMode = "unified" | "side-by-side";
+
+export const TrDiff = ({ expected, actual }: { expected: string; actual: string }) => {
+  const [diffType, setDiffType] = useState<DiffType>("lines");
+  const [viewMode, setViewMode] = useState<ViewMode>("unified");
+  const [diff, setDiff] = useState<Change[]>(() => diffLines(expected, actual));
+  const { t } = useI18n("controls");
+
+  const DiffCode = () => {
+    return (
+      <>
+        {diff.map((part, index) => (
+          <div key={index} className={part.added ? styles["diff-green"] : part.removed ? styles["diff-red"] : ""}>
+            {part.value}
+          </div>
+        ))}
+      </>
+    );
+  };
+  const changeTypeDiff = (type: DiffType = "chars") => {
+    const diffFn = diffFunctions[type];
+    const result = (diffFn as (oldStr: string, newStr: string, options?: BaseOptions) => Change[])(
+      expected,
+      actual,
+      {},
+    );
+
+    setDiffType(type);
+    setDiff(result);
+  };
+
+  const SideBySideView = () => {
+    return (
+      <div className={styles["side-by-side"]}>
+        <div className={styles.side}>
+          <Code type={"ui"} size={"s"} className={styles["side-title"]}>
+            {t("expected")}
+          </Code>
+          <CodeViewer code={expected} className={styles["diff-screen"]} />
+        </div>
+        <div className={styles.side}>
+          <div className={styles.expected}>
+            <Code size={"s"} className={styles["side-title"]}>
+              {t("actual")}
+            </Code>
+          </div>
+          <CodeViewer className={styles["diff-screen"]}>
+            <DiffCode />
+          </CodeViewer>
+        </div>
+      </div>
+    );
+  };
+
+  const UnifiedView = () => {
+    return (
+      <>
+        <div className={styles.unified}>
+          <CodeViewer className={styles["diff-screen"]}>
+            <div className={styles["diff-grey"]}>{expected}</div>
+            <DiffCode />
+          </CodeViewer>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.diff} data-testId={"test-result-diff"}>
+      <div className={styles["diff-controls"]}>
+        <div className={styles["diff-buttons"]}>
+          <Code size={"s"} className={styles["diff-buttons-title"]}>
+            {t("viewMode")}:
+          </Code>
+          <div className={styles["diff-view"]}>
+            {["unified", "side-by-side"].map((mode: ViewMode) => (
+              <Button
+                key={mode}
+                size={"s"}
+                style={viewMode === mode ? "primary" : "outline"}
+                text={t(mode)}
+                onClick={() => setViewMode(mode)}
+              />
+            ))}
+          </div>
+        </div>
+        <div className={styles["diff-buttons"]}>
+          <Code size={"s"} className={styles["diff-buttons-title"]}>
+            {t("compareBy")}:
+          </Code>
+          {["chars", "words", "lines"].map((type: DiffType) => {
+            return (
+              <Button
+                key={type}
+                size={"s"}
+                style={diffType === type ? "primary" : "outline"}
+                text={t(type)}
+                onClick={() => changeTypeDiff(type)}
+              />
+            );
+          })}
+        </div>
+      </div>
+      {viewMode === "side-by-side" ? <SideBySideView /> : <UnifiedView />}
+    </div>
+  );
+};

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

@@ -0,0 +1,104 @@
+import type { TestError, TestStatus } from "@allurereport/core-api";
+import { ansiToHTML } from "@allurereport/web-commons";
+import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { TrDiff } from "@/components/TestResult/TrError/TrDiff";
+import { useI18n } from "@/stores/locale";
+import { openModal } from "@/stores/modal";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const TrErrorTrace = ({ trace }: { trace: string }) => {
+  const sanitizedTrace = ansiToHTML(trace, {
+    fg: "var(--on-text-primary)",
+    colors: {},
+  });
+
+  return (
+    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
+      <Code size={"s"} type={"ui"}>
+        {/* eslint-disable-next-line react/no-danger */}
+        <pre dangerouslySetInnerHTML={{ __html: sanitizedTrace }} />
+      </Code>
+    </div>
+  );
+};
+
+export const TrError: FunctionalComponent<TestError & { className?: string; status?: TestStatus }> = ({
+  className,
+  message = "",
+  trace,
+  actual,
+  expected,
+  status,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
+  const { t: empty } = useI18n("empty");
+  const openDiff = () =>
+    openModal({
+      title: tooltip("comparison"),
+      data: { actual, expected },
+      component: <TrDiff actual={actual} expected={expected} />,
+    });
+  const sanitizedMessage = ansiToHTML(message, {
+    fg: "var(--on-text-primary)",
+    colors: {},
+  });
+
+  return (
+    <div
+      data-testid="test-result-error"
+      className={clsx(styles["test-result-error"], styles[`tr-status-${status}`], className)}
+      {...rest}
+    >
+      {message ? (
+        <>
+          <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
+            <Text
+              tag={"p"}
+              size={"m"}
+              bold
+              className={clsx(styles["test-result-error-text"], styles[`tr-color-${status}`])}
+            >
+              {t("error")}
+            </Text>
+            <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+              <IconButton
+                style={"ghost"}
+                size={"s"}
+                icon={allureIcons.lineGeneralCopy3}
+                onClick={() => {
+                  copyToClipboard(message);
+                }}
+              />
+            </TooltipWrapper>
+          </div>
+          <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
+            <Code data-testid="test-result-error-message" size={"s"}>
+              {/* eslint-disable-next-line react/no-danger */}
+              <pre dangerouslySetInnerHTML={{ __html: sanitizedMessage }} />
+            </Code>
+          </div>
+        </>
+      ) : (
+        empty("no-message-provided")
+      )}
+
+      {Boolean(actual && actual !== "undefined" && expected && expected !== "undefined") && (
+        <Button
+          style={"flat"}
+          data-testId={"test-result-diff-button"}
+          size={"s"}
+          text={tooltip("showDiff")}
+          onClick={openDiff}
+        />
+      )}
+      {isOpen && Boolean(trace?.length) && <TrErrorTrace trace={trace} />}
+    </div>
+  );
+};

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

@@ -0,0 +1,223 @@
+.test-result-error {
+  padding: 8px 8px 12px 16px;
+  background-color: var(--bg-alpha-capella);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    //background: var(--on-support-capella);
+    //background: var(--on-support-capella);
+  }
+}
+
+.tr-status-failed {
+  background-color: var(--bg-alpha-capella);
+  &:before {
+    background-color: var(--bg-support-capella);
+  }
+}
+
+.tr-status-broken {
+  background-color: var(--bg-alpha-atlas);
+  &:before {
+    background-color: var(--bg-support-atlas);
+  }
+}
+
+.tr-status-skipped {
+  background-color: var(--bg-alpha-rau);
+  &:before {
+    background-color: var(--bg-support-rau);
+  }
+}
+
+.tr-status-unknown {
+  background-color: var(--bg-alpha-skat);
+  &:before {
+    background-color: var(--bg-support-skat);
+  }
+}
+
+.tr-status-passed {
+  background-color: var(--bg-alpha-castor);
+  &:before {
+    background-color: var(--bg-support-castor);
+  }
+}
+
+.test-result-error-header {
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+}
+
+.test-result-error-text {
+  margin-bottom: 8px;
+  padding-left: 8px;
+  color: var(--on-support-capella);
+  margin-right: auto;
+}
+
+.tr-color-failed {
+  color: var(--on-support-capella);
+}
+
+.tr-color-broken {
+  color: var(--on-support-atlas);
+}
+
+.tr-color-skipped {
+  color: var(--on-support-rau);
+}
+
+.tr-color-passed {
+  color: var(--on-support-castor);
+}
+.tr-color-unknown {
+  color: var(--on-support-skat);
+}
+
+.tr-bg-failed {
+  background: var(--bg-support-capella);
+}
+
+.tr-bg-broken {
+  background: var(--bg-support-atlas);
+}
+
+.tr-bg-skipped {
+  background: var(--bg-support-rau);
+}
+
+.tr-bg-passed {
+  background: var(--bg-support-castor);
+}
+
+.tr-bg-failed {
+  background: var(--bg-support-capella);
+}
+.tr-bg-unknown {
+  background: var(--bg-support-skat);
+}
+
+.test-result-error-trace {
+  margin-top: 8px;
+  padding-left: 8px;
+
+  pre {
+    overflow: scroll;
+    padding-bottom: 24px;
+  }
+}
+
+.test-result-error-message {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 300ms;
+  margin-bottom: 4px;
+
+  &:hover {
+    background: inherit;
+  }
+}
+
+.diff {
+  width: 100%;
+  line-height: 1.28;
+  padding: 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  .side {
+    flex: 1 1 auto;
+    gap: 4px;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .unified {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  .diff-screen {
+    min-height: 320px;
+    height: 100%;
+    overflow: auto;
+    padding-bottom: 48px;
+  }
+}
+
+.diff-green {
+  color: var(--on-support-castor);
+  background: #09933729;
+}
+
+.diff-grey {
+  color: var(--on-text-secondary);
+  margin-bottom: 4px;
+}
+
+.diff-red {
+  color: var(--on-support-capella);
+  background: var(--bg-alpha-capella);
+}
+
+.diff-buttons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  line-height: 24px;
+  margin-bottom: 4px;
+}
+
+.expected {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  line-height: 24px;
+}
+
+.side-title {
+  line-height: 24px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.diff-controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 4px;
+  justify-content: space-between;
+}
+
+.diff-view {
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+}
+
+.side-by-side {
+  display: flex;
+  gap: 4px;
+  height: 100%;
+  overflow: hidden;
+}
+
+.diff-buttons-title {
+  color: var(--on-text-secondary);
+  margin-right: 8px;
+}

package/src/components/TestResult/TrHeader/TrBreadcrumbs.tsx

@@ -0,0 +1,44 @@
+import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { AwesomeTestResult } from "types";
+import * as styles from "@/components/TestResult/TrHeader/styles.scss";
+import { navigateTo } from "@/stores/router";
+
+interface TrBreadcrumbs {
+  testResult?: AwesomeTestResult;
+}
+
+export const TrBreadcrumbs = ({ testResult }: TrBreadcrumbs) => {
+  const { breadcrumbs, name } = testResult || {};
+
+  return (
+    <div className={styles["test-result-breadcrumbs"]}>
+      <div className={clsx(styles["test-result-breadcrumb"], styles["test-result-home"])}>
+        <IconButton
+          icon={allureIcons.lineGeneralHomeLine}
+          size={"s"}
+          style={"ghost"}
+          className={styles["test-result-breadcrumb-link"]}
+          onClick={() => navigateTo("")}
+        />
+      </div>
+      {Boolean(breadcrumbs?.length) &&
+        breadcrumbs?.[0]?.map((item, key) => {
+          return (
+            <div className={styles["test-result-breadcrumb"]} key={key}>
+              <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
+              <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+                {item}
+              </Text>
+            </div>
+          );
+        })}
+      <div className={styles["test-result-breadcrumb"]}>
+        {name && <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />}
+        <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
+          {name}
+        </Text>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import type { FunctionalComponent } from "preact";
+import { HeaderControls } from "@/components/HeaderControls";
+import type { TrProps } from "@/components/TestResult";
+import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
+import { isSplitMode } from "@/stores/layout";
+import * as styles from "./styles.scss";
+
+export const TrHeader: FunctionalComponent<TrProps> = ({ testResult }) => {
+  return (
+    <div className={styles.above}>
+      {!isSplitMode.value ? <TrBreadcrumbs testResult={testResult} /> : ""}
+      <HeaderControls className={styles.right} />
+    </div>
+  );
+};

package/src/components/TestResult/{TestResultHeader → TrHeader}/styles.scss

@@ -17,11 +17,11 @@
 .test-result-breadcrumb {
   display: flex;
   gap: 4px;
-  align-items: center;
   color: var(--on-text-secondary);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  align-items: center;
 }
 
 .test-result-breadcrumb-title {
@@ -36,7 +36,12 @@
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: 4px;
+}
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
 }
 .test-result-breadcrumb-arrow {
   transform: rotate(-90deg);

package/src/components/TestResult/TrHistory/TrHistoryItem.tsx

@@ -0,0 +1,94 @@
+import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
+import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { useMemo, useState } from "preact/hooks";
+import type { AwesomeReportOptions } from "types";
+import { TrError } from "@/components/TestResult/TrError";
+import * as styles from "@/components/TestResult/TrHistory/styles.scss";
+import { useI18n } from "@/stores";
+import { timestampToDate } from "@/utils/time";
+
+export const TrHistoryItem: FunctionalComponent<{
+  testResultItem: HistoryTestResult;
+}> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
+  const reportOptions = getReportOptions<AwesomeReportOptions & { id: string }>();
+  const { status, error, stop, duration, id, url } = testResultItem;
+  const [isOpened, setIsOpen] = useState(false);
+  const convertedStop = stop ? timestampToDate(stop) : undefined;
+  const formattedDuration = duration ? formatDuration(duration) : undefined;
+  const { t } = useI18n("controls");
+  const navigateUrl = useMemo(() => {
+    if (!url) {
+      return undefined;
+    }
+
+    const { origin, pathname } = new URL(url);
+    const navUrl = new URL([pathname, reportOptions.id].join("/"), origin);
+
+    navUrl.hash = id;
+
+    return navUrl.toString();
+  }, [reportOptions, id, url]);
+  const renderExternalLink = () => {
+    if (!navigateUrl) {
+      return null;
+    }
+
+    return (
+      <TooltipWrapper tooltipText={t("openInNewTab")}>
+        <IconButton
+          href={navigateUrl.toString()}
+          target={"_blank"}
+          icon={allureIcons.lineGeneralLinkExternal}
+          style={"ghost"}
+          size={"s"}
+          className={styles["test-result-history-item-link"]}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      </TooltipWrapper>
+    );
+  };
+  const renderItemContent = () => {
+    return (
+      <>
+        <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
+        {convertedStop && <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>}
+        <div className={styles["test-result-history-item-info"]}>
+          {formattedDuration && (
+            <Text type="ui" size={"s"} className={styles["item-time"]}>
+              {formattedDuration}
+            </Text>
+          )}
+          {renderExternalLink()}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div data-testid={"test-result-history-item"}>
+      <div className={styles["test-result-history-item-header"]}>
+        {Boolean(error) && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+          </span>
+        )}
+        {navigateUrl ? (
+          <a href={navigateUrl} className={styles["test-result-history-item-wrap"]}>
+            {renderItemContent()}
+          </a>
+        ) : (
+          <div className={styles["test-result-history-item-wrap"]}>{renderItemContent()}</div>
+        )}
+      </div>
+      {isOpened && error && (
+        <div>
+          <TrError {...error} status={status} />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { FunctionalComponent } from "preact";
+import { TrHistoryItem } from "@/components/TestResult/TrHistory/TrHistoryItem";
+import { useI18n } from "@/stores";
+import { type AwesomeTestResult } from "../../../../types";
+import * as styles from "./styles.scss";
+
+export type TrHistoryViewProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TrHistoryView: FunctionalComponent<TrHistoryViewProps> = ({ testResult }) => {
+  const { history } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-history"]}>
+      {history.length ? (
+        history?.map((item, key) => <TrHistoryItem testResultItem={item} key={key} />)
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
+      )}
+    </div>
+  );
+};
+
+export default TrHistoryView;

package/src/components/TestResult/{TestResultHistory → TrHistory}/styles.scss

@@ -8,7 +8,6 @@
   width: 100%;
   gap: 4px;
   align-items: center;
-  cursor: pointer;
 }
 
 .test-result-history-item-wrap {
@@ -20,6 +19,8 @@
   padding: 4px 4px 4px 4px;
   width: 100%;
   align-items: flex-start;
+  text-decoration: none;
+  color: var(--on-text-primary);
 
   &:hover {
     background: var(--bg-control-flat-medium);