@allurereport/web-awesome 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/TestResult/{TestResultAttachmentsView → TrAttachmentsView}/index.tsx

@@ -1,15 +1,15 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
-export type TestResultAttachmentViewProps = {
+export type TrAttachmentViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {
+export const TrAttachmentView: FunctionalComponent<TrAttachmentViewProps> = ({ testResult }) => {
   const { attachments } = testResult ?? {};
   const { t } = useI18n("empty");
 
@@ -17,7 +17,7 @@ export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentV
     <div className={styles["test-result-attachments-view"]}>
       {attachments.length ? (
         attachments?.map((attach, key) => (
-          <TestResultAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
+          <TrAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
         ))
       ) : (
         <div className={styles["test-result-empty"]}>{t("no-attachments-results")}</div>

package/src/components/TestResult/{TestResultDescription → TrDescription}/index.tsx

@@ -5,11 +5,11 @@ import type { AwesomeTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
-export type TestResultDescriptionProps = {
+export type TrDescriptionProps = {
   description: AwesomeTestResult["description"];
 };
 
-export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
+export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ description }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
 
   return (

package/src/components/TestResult/{TestResultDropdown → TrDropdown}/index.tsx

@@ -5,7 +5,7 @@ import { type FunctionalComponent } from "preact";
 import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
-export const TestResultDropdown: FunctionalComponent<{
+export const TrDropdown: FunctionalComponent<{
   isOpened: boolean;
   setIsOpen: (isOpened: boolean) => void;
   title: string;

package/src/components/TestResult/{TestResultEmpty → TrEmpty}/index.tsx

@@ -1,10 +1,10 @@
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import * as baseStyles from "@/components/BaseLayout/styles.scss";
-import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
+import { TrInfo } from "@/components/TestResult/TrInfo";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
-const TestResultThumb = () => {
+const TrThumb = () => {
   const { t } = useI18n("empty");
   return (
     <div className={styles["test-result-thumb"]}>
@@ -22,13 +22,13 @@ const TestResultThumb = () => {
   );
 };
 
-const TestResultEmpty = () => {
+const TrEmpty = () => {
   return (
     <div className={baseStyles.content}>
-      <TestResultInfo />
-      <TestResultThumb />
+      <TrInfo />
+      <TrThumb />
     </div>
   );
 };
 
-export default TestResultEmpty;
+export default TrEmpty;

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

@@ -0,0 +1,82 @@
+import { formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import cx from "clsx";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { ArrowButton } from "@/components/ArrowButton";
+import { TrError } from "@/components/TestResult/TrError";
+import { useI18n } from "@/stores";
+import { navigateTo, openInNewTab } from "@/stores/router";
+import { timestampToDate } from "@/utils/time";
+import type { AwesomeTestResult } from "../../../../types";
+import * as styles from "./styles.scss";
+
+export const TrEnvironmentItem: FunctionalComponent<{
+  env: string;
+  testResult: AwesomeTestResult;
+  current?: boolean;
+}> = ({ env, testResult, current = false }) => {
+  const { status, error, stop, duration, id } = testResult;
+  const [isOpened, setIsOpen] = useState(false);
+  const hasEmptyError = !error || !Object.keys(error).length;
+  const convertedStop = timestampToDate(stop);
+  const formattedDuration = formatDuration(duration as number);
+  const { t } = useI18n("controls");
+  const navigateUrl = id;
+
+  return (
+    <div data-testid={"test-result-env-item"}>
+      <div className={styles["test-result-environment-item-header"]}>
+        {!hasEmptyError && (
+          <span onClick={() => setIsOpen(!isOpened)}>
+            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+          </span>
+        )}
+        <div
+          className={cx(styles["test-result-environment-item-wrap"], {
+            [styles.current]: current,
+          })}
+          onClick={(e) => {
+            if (current) {
+              return;
+            }
+
+            e.stopPropagation();
+            navigateTo(navigateUrl);
+          }}
+        >
+          <TreeItemIcon status={status} className={styles["test-result-environment-item-status"]} />
+          <Text className={styles["test-result-environment-item-env"]} bold>
+            {env}
+          </Text>
+          <Text className={styles["test-result-environment-item-text"]}>{convertedStop}</Text>
+          <div className={styles["test-result-environment-item-info"]}>
+            <Text type="ui" size={"s"} className={styles["test-result-environment-item-time"]}>
+              {formattedDuration}
+            </Text>
+            {!current && (
+              <TooltipWrapper tooltipText={t("openInNewTab")}>
+                <IconButton
+                  icon={allureIcons.lineGeneralLinkExternal}
+                  style={"ghost"}
+                  size={"s"}
+                  className={styles["test-result-environment-item-link"]}
+                  data-testid={"test-result-env-item-new-tab-button"}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    openInNewTab(navigateUrl);
+                  }}
+                />
+              </TooltipWrapper>
+            )}
+          </div>
+        </div>
+      </div>
+      {isOpened && !hasEmptyError && (
+        <div>
+          <TrError status={status} {...error} />
+        </div>
+      )}
+    </div>
+  );
+};

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 } 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 (!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

@@ -16,11 +16,9 @@ type DiffType = keyof typeof diffFunctions;
 type ViewMode = "unified" | "side-by-side";
 
 export const TrDiff = ({ expected, actual }: { expected: string; actual: string }) => {
-  const stringifiedExpected = JSON.stringify(expected);
-  const stringifiedActual = JSON.stringify(actual);
   const [diffType, setDiffType] = useState<DiffType>("lines");
   const [viewMode, setViewMode] = useState<ViewMode>("unified");
-  const [diff, setDiff] = useState<Change[]>(() => diffLines(stringifiedExpected, stringifiedActual));
+  const [diff, setDiff] = useState<Change[]>(() => diffLines(expected, actual));
   const { t } = useI18n("controls");
 
   const DiffCode = () => {
@@ -37,8 +35,8 @@ export const TrDiff = ({ expected, actual }: { expected: string; actual: string
   const changeTypeDiff = (type: DiffType = "chars") => {
     const diffFn = diffFunctions[type];
     const result = (diffFn as (oldStr: string, newStr: string, options?: BaseOptions) => Change[])(
-      stringifiedExpected,
-      stringifiedActual,
+      expected,
+      actual,
       {},
     );
 

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

@@ -1,6 +1,7 @@
-import type { TestError } from "@allurereport/core-api";
+import type { TestError, TestResult, TestStatus } from "@allurereport/core-api";
 import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import AnsiToHtml from "ansi-to-html";
+import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrDiff } from "@/components/TestResult/TrError/TrDiff";
@@ -10,7 +11,10 @@ import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
 const TrErrorTrace = ({ trace }: { trace: string }) => {
-  const ansiTrace = new AnsiToHtml().toHtml(trace);
+  const ansiTrace = new AnsiToHtml({
+    fg: "var(--on-text-primary)",
+    colors: {},
+  }).toHtml(trace);
   return (
     <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
       <Code size={"s"} type={"ui"}>
@@ -21,7 +25,13 @@ const TrErrorTrace = ({ trace }: { trace: string }) => {
   );
 };
 
-export const TrError: FunctionalComponent<TestError> = ({ message, trace, actual, expected }) => {
+export const TrError: FunctionalComponent<TestError & { status?: TestStatus }> = ({
+  message,
+  trace,
+  actual,
+  expected,
+  status,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useI18n("ui");
   const { t: tooltip } = useI18n("controls");
@@ -35,11 +45,16 @@ export const TrError: FunctionalComponent<TestError> = ({ message, trace, actual
     });
 
   return (
-    <div data-testid="test-result-error" className={styles["test-result-error"]}>
+    <div data-testid="test-result-error" className={clsx(styles["test-result-error"], styles[`tr-status-${status}`])}>
       {message ? (
         <>
           <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
-            <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
+            <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")}>
@@ -63,7 +78,7 @@ export const TrError: FunctionalComponent<TestError> = ({ message, trace, actual
         empty("no-message-provided")
       )}
 
-      {Boolean(actual && expected) && (
+      {Boolean(actual && actual !== "undefined" && expected && expected !== "undefined") && (
         <Button
           style={"flat"}
           data-testId={"test-result-diff-button"}

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

@@ -13,7 +13,43 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: var(--on-support-capella);
+    //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);
   }
 }
 
@@ -30,6 +66,48 @@
   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;
@@ -48,7 +126,7 @@
   margin-bottom: 4px;
 
   &:hover {
-    background: var(--bg-alpha-capella);
+    background: inherit;
   }
 }
 
@@ -56,18 +134,28 @@
   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;
   }
 }
 
@@ -125,6 +213,8 @@
 .side-by-side {
   display: flex;
   gap: 4px;
+  height: 100%;
+  overflow: hidden;
 }
 
 .diff-buttons-title {

package/src/components/TestResult/{TestResultHeader/TestResultBreadcrumbs.tsx → TrHeader/TrBreadcrumbs.tsx}

@@ -1,14 +1,14 @@
 import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TestResultHeader/styles.scss";
+import * as styles from "@/components/TestResult/TrHeader/styles.scss";
 import { navigateTo } from "@/stores/router";
 
-interface TestResultBreadcrumbsProps {
+interface TrBreadcrumbs {
   testResult?: AwesomeTestResult;
 }
 
-export const TestResultBreadcrumbs = ({ testResult }: TestResultBreadcrumbsProps) => {
+export const TrBreadcrumbs = ({ testResult }: TrBreadcrumbs) => {
   const { breadcrumbs, name } = testResult || {};
 
   return (

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/{TestResultHistory/TestResultHistoryItem.tsx → TrHistory/TrHistoryItem.tsx}

@@ -3,13 +3,13 @@ import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@al
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
-import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
 import { TrError } from "@/components/TestResult/TrError";
+import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { useI18n } from "@/stores";
 import { navigateTo, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
-export const TestResultHistoryItem: FunctionalComponent<{
+export const TrHistoryItem: FunctionalComponent<{
   testResultItem: HistoryTestResult;
 }> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
   const { status, error, stop, duration, id } = testResultItem;
@@ -58,7 +58,7 @@ export const TestResultHistoryItem: FunctionalComponent<{
       </div>
       {isOpened && error && (
         <div>
-          <TrError {...error} />
+          <TrError {...error} status={status} />
         </div>
       )}
     </div>

package/src/components/TestResult/{TestResultHistory → TrHistory}/index.tsx

@@ -1,21 +1,21 @@
 import type { FunctionalComponent } from "preact";
-import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
+import { TrHistoryItem } from "@/components/TestResult/TrHistory/TrHistoryItem";
 import { useI18n } from "@/stores";
 import { type AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
-export type TestResultHistoryViewProps = {
+export type TrHistoryViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = ({ testResult }) => {
+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) => <TestResultHistoryItem testResultItem={item} key={key} />)
+        history?.map((item, key) => <TrHistoryItem testResultItem={item} key={key} />)
       ) : (
         <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
       )}
@@ -23,4 +23,4 @@ const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = (
   );
 };
 
-export default TestResultHistoryView;
+export default TrHistoryView;

package/src/components/TestResult/{TestResultInfo/TestResultInfoStatuses.tsx → TrInfo/TrInfoStatuses.tsx}

@@ -10,7 +10,7 @@ const icons: Record<string, string> = {
   muted: allureIcons.lineGeneralEye,
 };
 
-export const TestResultInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
+export const TrInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
   const { t } = useI18n("filters");
 
   return (