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

package/src/components/SideBySide/styles.scss

@@ -0,0 +1,64 @@
+.side {
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  max-width: 1920px;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 8px;
+}
+
+.wrapper {
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+}
+
+.side-left {
+  margin-right: auto;
+  transition: width 50ms;
+  will-change: width;
+}
+
+.side-right {
+  flex: 1 1 auto;
+  margin-left: auto;
+  transition: width 200ms;
+  will-change: width, height;
+}
+
+[dir="ltr"] {
+  .side {
+    direction: ltr;
+    flex-direction: row;
+  }
+}
+
+[dir="rtl"] {
+  .side {
+    direction: ltr;
+    flex-direction: row-reverse;
+  }
+
+  .side-left {
+    direction: rtl;
+  }
+
+  .side-right {
+    direction: rtl;
+  }
+}
+
+.tree-ctrl {
+  overflow: hidden;
+}
+
+.gutter {
+  background: var(--bg-base-secondary) no-repeat 50%;
+  height: 100%;
+}
+
+.gutter:hover {
+  cursor: ew-resize;
+}

package/src/components/SplitLayout/index.tsx

@@ -0,0 +1,73 @@
+import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import type { JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import MainReport from "@/components/MainReport";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { useI18n } from "@/stores";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import { treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+const MainReportWrapper = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={styles.wrapper} ref={containerRef}>
+      <MainReport />
+    </div>
+  );
+};
+
+const Loader = () => {
+  return (
+    <div className={styles.content}>
+      <PageLoader />
+    </div>
+  );
+};
+
+export const SplitLayout = () => {
+  const testResultId = route.value.params?.testResultId ?? null;
+  const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
+  const { t } = useI18n("controls");
+  const leftSide = (
+    <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />
+  );
+
+  const TrView = () => {
+    return testResultId ? (
+      <Loadable
+        source={testResultStore}
+        renderLoader={() => <Loader />}
+        transformData={(allResults) => {
+          if (testResultId in allResults) {
+            return allResults[testResultId];
+          }
+        }}
+        renderData={(tr) => {
+          return tr ? <TestResult testResult={tr} /> : <Loader />;
+        }}
+      />
+    ) : (
+      <div className={styles.empty}>
+        <Text>{t("noSelectedTR")}</Text>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    if (!cachedMain) {
+      setCachedMain(leftSide);
+    }
+  }, [cachedMain]);
+
+  return (
+    <div className={styles["side-by-side"]} data-testId={"split-layout"}>
+      <SideBySide left={cachedMain} right={<TrView />} />
+    </div>
+  );
+};

package/src/components/SplitLayout/styles.scss

@@ -0,0 +1,84 @@
+.layout {
+  margin: auto;
+  padding: 12px 32px;
+  background: var(--bg-base-secondary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+}
+
+.wrapper {
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+  position: relative;
+  height: 100%;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  width: 100%;
+  padding: 8px 8px;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}
+
+.side-by-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.header {
+  padding: 8px;
+  margin-bottom: 0;
+}

package/src/components/Tabs/index.tsx

@@ -1,6 +1,8 @@
 import { Text } from "@allurereport/web-components";
 import { type ComponentChildren, createContext } from "preact";
 import { useContext, useState } from "preact/hooks";
+import { setTreeStatus } from "@/stores/tree";
+import type { AwesomeStatus } from "../../../types";
 import * as styles from "./styles.scss";
 
 type TabsContextT = {
@@ -41,10 +43,13 @@ export const Tab = (props: { id: string; children: ComponentChildren }) => {
   const isCurrentTab = currentTab === id;
   const handleTabClick = () => {
     if (isCurrentTab) {
+      setCurrentTab("total");
+      setTreeStatus("total");
       return;
     }
 
     setCurrentTab(id);
+    setTreeStatus(id as AwesomeStatus);
   };
 
   return (

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

@@ -0,0 +1,23 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+const TrStepsEmpty = () => {
+  const { t } = useI18n("empty");
+  return (
+    <div className={styles["test-steps-empty"]}>
+      <div className={styles["test-steps-empty-wrapper"]}>
+        <SvgIcon
+          size={"m"}
+          width={"32px"}
+          height={"32px"}
+          id={allureIcons.lineDevCodeSquare}
+          className={styles["test-steps-empty-icon"]}
+        />
+        <Text className={styles["test-steps-empty-text"]}>{t("no-test-steps-results")}</Text>
+      </div>
+    </div>
+  );
+};
+
+export default TrStepsEmpty;

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

@@ -0,0 +1,25 @@
+.test-steps-empty {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 320px;
+  align-items: center;
+}
+
+.test-steps-empty-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.test-steps-empty-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 16px;
+  flex: 1 1 auto;
+}
+
+.test-steps-empty-text {
+  color: var(--on-text-secondary);
+  flex: 1 1 auto;
+}

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

@@ -0,0 +1,29 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import cx from "clsx";
+import type { FunctionalComponent } from "preact";
+import type { AwesomeTestResult } from "types";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+export type TrAttachmentViewProps = {
+  className?: string;
+  testResult?: AwesomeTestResult;
+};
+
+export const TrAttachmentView: FunctionalComponent<TrAttachmentViewProps> = ({ testResult, className }) => {
+  const { attachments } = testResult ?? {};
+  const { t } = useI18n("ui");
+
+  return (
+    <div className={cx(styles["test-result-attachments-view"], className)}>
+      {attachments.length ? (
+        attachments?.map((attach, key) => (
+          <TrAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
+        ))
+      ) : (
+        <div className={styles["test-result-empty"]}>{t("no-attachments-results")}</div>
+      )}
+    </div>
+  );
+};

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

@@ -1,15 +1,15 @@
 import { Text } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
+import type { AwesomeTestResult } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import * as styles from "./styles.scss";
 
-export type TestResultDescriptionProps = {
-  description: AllureAwesomeTestResult["description"];
+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 (
@@ -18,7 +18,7 @@ export const TestResultDescription: FunctionalComponent<TestResultDescriptionPro
         <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
         {isOpen && (
           <Text tag={"p"} className={styles["test-result-description-text"]}>
-            {description || "Description mock"}
+            {description}
           </Text>
         )}
       </div>

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

@@ -1,17 +1,19 @@
-import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
 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;
   icon: string;
   counter: number;
-}> = ({ isOpened, setIsOpen, title, icon, counter }) => {
+  className?: ClassValue;
+}> = ({ isOpened, setIsOpen, title, icon, counter, className }) => {
   return (
-    <div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
+    <div className={clsx(styles["test-result-dropdown"], className)} onClick={() => setIsOpen(!isOpened)}>
       <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
       <div className={styles["test-result-dropdown-wrap"]}>
         <SvgIcon id={icon} />

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

@@ -1,10 +1,11 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+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"]}>
       <div className={styles["test-result-thumb-wrapper"]}>
@@ -15,19 +16,19 @@ const TestResultThumb = () => {
           id={allureIcons.lineDevCodeSquare}
           className={styles["test-result-thumb-icon"]}
         />
-        <Text className={styles["test-result-thumb-text"]}>No test case results</Text>
+        <Text className={styles["test-result-thumb-text"]}>{t("no-test-case-results")}</Text>
       </div>
     </div>
   );
 };
 
-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 { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import cx from "clsx";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+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 = stop ? 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,
+          })}
+          role={current ? undefined : "button"}
+          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, 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;
+}