@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

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

@@ -0,0 +1,60 @@
+.test-result-environment-item {
+  &:not(.current) {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--bg-control-flat-medium);
+    }
+  }
+}
+
+.test-result-environment-item-header {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  align-items: center;
+}
+
+.test-result-environment-item-wrap {
+  transition: background-color 300ms;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  border-radius: 6px;
+  padding: 4px 4px 4px 4px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.test-result-environment-item-text {
+  padding-top: 2px;
+}
+
+.test-result-environment-item-env {
+  margin-top: 1px;
+}
+
+.test-result-environment-item-info {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.test-result-environment-item-time {
+  margin-left: auto;
+  line-height: 20px;
+  color: var(--on-text-secondary);
+}
+
+.test-result-environment-item-link {
+  :root {
+    --allure-btn-icon-color: var(--bg-control-flat);
+  }
+
+  color: var(--on-icon-secondary);
+}
+
+.test-result-environment-item-status {
+  padding-top: 4px;
+}

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

@@ -0,0 +1,64 @@
+import { type TestEnvGroup, getRealEnvsCount } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
+import type { AwesomeTestResult } from "types";
+import { TrEnvironmentItem } from "@/components/TestResult/TrEnvironmentItem";
+import { useI18n } from "@/stores";
+import { testEnvGroupsStore } from "@/stores/env";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+export const TrEnvironmentSection: FunctionalComponent<{
+  env: string;
+  activeTestResultId: string;
+  testResultId: string;
+}> = ({ env, activeTestResultId, testResultId }) => {
+  useEffect(() => {
+    fetchTestResult(testResultId);
+  }, [testResultId]);
+
+  return (
+    <Loadable<Record<string, AwesomeTestResult>, AwesomeTestResult | undefined>
+      source={testResultStore}
+      transformData={(data) => data[testResultId]}
+      renderData={(tr) =>
+        tr && <TrEnvironmentItem env={env} testResult={tr} current={activeTestResultId === testResultId} />
+      }
+    />
+  );
+};
+
+export const TrEnvironmentsView: FunctionalComponent<{
+  testResult: AwesomeTestResult;
+}> = ({ testResult }) => {
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-environments"]}>
+      <Loadable<Record<string, TestEnvGroup>, TestEnvGroup | undefined>
+        source={testEnvGroupsStore}
+        renderData={(group) => {
+          if (!getRealEnvsCount(group)) {
+            return <div className={styles["test-result-empty"]}>{t("no-environments-results")}</div>;
+          }
+
+          const envs = Object.entries(group.testResultsByEnv).sort(([a], [b]) => b.localeCompare(a));
+
+          return (
+            <ul>
+              {envs.map(([env, trId]) => {
+                return (
+                  <li key={`${env}-${trId}`}>
+                    <TrEnvironmentSection env={env} testResultId={trId} activeTestResultId={testResult.id} />
+                  </li>
+                );
+              })}
+            </ul>
+          );
+        }}
+        transformData={(groups) => groups[testResult?.testCase?.id]}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+.test-result-environments {
+  padding: 12px 24px 32px;
+  min-height: 320px;
+}
+
+.test-result-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}

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,111 @@
+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)",
+    bg: "none",
+    colors: {
+      0: "none",
+      1: "none",
+      2: "var(--on-support-sirius)",
+      3: "var(--on-support-atlas)",
+      4: "var(--bg-support-skat)",
+      5: "var(--on-support-betelgeuse)",
+    },
+  });
+
+  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);