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

package/src/components/ReportQualityGateResults/styles.scss

@@ -0,0 +1,44 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-quality-gate-results {
+  padding: 20px 0;
+
+  & > li + li {
+    margin-top: 12px;
+  }
+}
+
+.report-quality-gate-results-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.report-quality-gate-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 0 8px;
+
+  b {
+    font-weight: 700;
+  }
+}
+
+.report-quality-gate-result-icon {
+  flex: 0 0 auto;
+  margin-top: 3px;
+  color: var(--bg-support-capella);
+}
+
+.report-quality-gate-result-content {
+  flex: 1 1 auto;
+
+  & > * + * {
+    margin-top: 4px;
+  }
+}
+
+.report-quality-gate-result-error {
+  margin-top: 8px;
+}

package/src/components/ReportTabs/index.tsx

@@ -0,0 +1,37 @@
+import { Text } from "@allurereport/web-components";
+import { useComputed } from "@preact/signals";
+import { type ComponentChildren } from "preact";
+import { useCallback } from "preact/hooks";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import type { AwesomeStatus } from "../../../types.js";
+import * as styles from "./styles.scss";
+
+export const ReportTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const ReportTab = (props: { id: AwesomeStatus; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const isCurrentTab = useComputed(() => treeStatus.value === id);
+
+  const handleCurrentTabClick = useCallback(() => {
+    setTreeStatus("total");
+  }, []);
+
+  const handleTabClick = useCallback(() => {
+    setTreeStatus(id);
+  }, [id]);
+
+  return (
+    <button
+      {...rest}
+      className={styles.tab}
+      onClick={isCurrentTab.value ? handleCurrentTabClick : handleTabClick}
+      aria-current={isCurrentTab.value || undefined}
+    >
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/SectionPicker/index.tsx

@@ -0,0 +1,55 @@
+import { DropdownButton, Menu, SvgIcon, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { availableSections, currentSection, setSection } from "@/stores/sections";
+import * as styles from "./styles.scss";
+
+export type SectionItem = {
+  name: string;
+  logo: string;
+};
+
+const defaultSection: SectionItem = { name: "report", logo: allureIcons.reportLogo };
+
+const sectionMap: Record<string, SectionItem> = {
+  default: defaultSection,
+  charts: { name: "charts", logo: allureIcons.lineChartsBarChartSquare },
+  timeline: { name: "timeline", logo: allureIcons.lineChartsTimeline },
+};
+
+export const SectionPicker = () => {
+  const selectedSection = sectionMap[currentSection.value] || defaultSection;
+  const { t } = useI18n("sections");
+
+  return (
+    <Menu
+      size="m"
+      placement={"bottom-start"}
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="m"
+          text={t(selectedSection.name)}
+          icon={selectedSection.logo}
+          isExpanded={isOpened}
+          onClick={onClick}
+          iconSize={"xs"}
+        />
+      )}
+    >
+      <Menu.Section>
+        {["default", ...availableSections.value].map((value) => (
+          <Menu.ItemWithCheckmark
+            onClick={() => setSection(value)}
+            key={value}
+            isChecked={currentSection.value === value}
+          >
+            <div className={styles["menu-item"]}>
+              <SvgIcon id={sectionMap[value]?.logo} size={"s"} />
+              {t(sectionMap[value]?.name) || value}
+            </div>
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/SectionPicker/styles.scss

@@ -0,0 +1,5 @@
+.menu-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/SectionSwitcher/index.tsx

@@ -0,0 +1,16 @@
+import type { VNode } from "preact";
+import { Charts } from "@/components/Charts";
+import { Report } from "@/components/Report";
+import { currentSection } from "@/stores/sections";
+import { Timeline } from "../Timeline";
+import * as styles from "./styles.scss";
+
+export const SectionSwitcher = () => {
+  const sectionMap: Record<string, VNode> = {
+    report: <Report />,
+    charts: <Charts />,
+    timeline: <Timeline />,
+  };
+
+  return <div className={styles.layout}>{sectionMap[currentSection.value] || sectionMap.report}</div>;
+};

package/src/components/SectionSwitcher/styles.scss

@@ -0,0 +1,4 @@
+.layout {
+  flex: 1 1 auto;
+  overflow: hidden;
+}

package/src/components/SideBySide/index.tsx

@@ -0,0 +1,52 @@
+import type { JSX } from "preact";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import Split from "split.js";
+import * as styles from "./styles.scss";
+
+const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const leftContent = useMemo(() => left, [left]);
+  const rightContent = useMemo(() => right, [right]);
+
+  useEffect(() => {
+    const sizes = JSON.parse(localStorage.getItem("sideBySidePosition") || "[50, 50]");
+
+    const splitter = Split([`.${styles["side-left"]}`, `.${styles["side-right"]}`], {
+      sizes,
+      gutterSize: 7,
+      gutter: (): HTMLElement => {
+        const gutter = document.createElement("div");
+        gutter.className = `${styles.gutter}`;
+        gutter.addEventListener("dblclick", () => {
+          const currentSizes = splitter.getSizes();
+          if (JSON.stringify(currentSizes) === "[50,50]") {
+            splitter.setSizes([30, 70]);
+            localStorage.setItem("sideBySidePosition", JSON.stringify([30, 70]));
+            return;
+          }
+          splitter.setSizes([50, 50]);
+          localStorage.setItem("sideBySidePosition", JSON.stringify([50, 50]));
+        });
+        return gutter;
+      },
+      onDragEnd: () => {
+        const newSizes = splitter.getSizes();
+        localStorage.setItem("sideBySidePosition", JSON.stringify(newSizes));
+      },
+    });
+
+    return () => {
+      splitter.destroy();
+    };
+  }, []);
+
+  return (
+    <div class={styles.side} ref={containerRef}>
+      <div class={styles["side-left"]}>{leftContent}</div>
+      <div class={styles["side-right"]}>{rightContent}</div>
+    </div>
+  );
+};
+
+export default SideBySide;

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,71 @@
+import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import type { JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+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/TestResult/TestStepsEmpty/index.tsx

@@ -2,22 +2,16 @@ import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import { useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
-const TestStepsEmpty = () => {
+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"]}
-        />
+        <SvgIcon size={"xl"} 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 TestStepsEmpty;
+export default TrStepsEmpty;

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,34 +1,28 @@
 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"]}>
-        <SvgIcon
-          size={"m"}
-          width={"32px"}
-          height={"32px"}
-          id={allureIcons.lineDevCodeSquare}
-          className={styles["test-result-thumb-icon"]}
-        />
+        <SvgIcon size={"xl"} id={allureIcons.lineDevCodeSquare} className={styles["test-result-thumb-icon"]} />
         <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>
+  );
+};