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

package/src/components/SideNav/SideNav.tsx

@@ -0,0 +1,78 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { useI18n } from "@/stores";
+import { activeTab } from "@/stores/router";
+import { navigateTo } from "@/utils/navigate";
+import * as styles from "./styles.scss";
+
+const tabs = [
+  { tabName: "overview", title: "Overview", icon: "lineGeneralHomeLine", active: false },
+  { tabName: "behaviors", title: "Behaviors", icon: "lineFilesClipboardCheck", active: false },
+  { tabName: "categories", title: "Categories", icon: "lineFilesFile2", active: false },
+  { tabName: "graphs", title: "Graphs", icon: "lineChartsBarChartSquare", active: false },
+  { tabName: "packages", title: "Packages", icon: "lineDevDataflow3", active: false },
+  { tabName: "suites", title: "Suites", icon: "lineFilesFolder", active: false },
+  { tabName: "timeline", title: "Timeline", icon: "lineTimeClockStopwatch", active: false },
+];
+const SideNav = () => {
+  const { t: controls } = useI18n("controls");
+  const { t: nav } = useI18n("nav");
+  const [isCollapsed, setCollapsed] = useState(localStorage.getItem("sidebarCollapsed") === "true");
+
+  const toggleCollapsed = () => {
+    localStorage.setItem("sidebarCollapsed", String(!isCollapsed));
+    setCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div class={clsx(styles["side-nav"], isCollapsed && styles.collapsed)}>
+      <a href="#" className={styles.brand} data-ga4-event="home_click">
+        <SvgIcon id={allureIcons.reportLogo} size={"s"} className={styles.icon} />
+        <Text className={styles["brand-text"]} bold>
+          Allure Report
+        </Text>
+      </a>
+      <ul className={styles.menu}>
+        {tabs?.map((tab) => (
+          <li
+            className={styles.item}
+            data-tooltip={tab.title}
+            data-ga4-event="tab_click"
+            data-ga4-param-tab={tab.tabName}
+            key={tab.tabName}
+          >
+            <a
+              href={`#${tab.tabName}`}
+              className={clsx(styles.link, { [styles["link-active"]]: activeTab.value === tab.tabName })}
+              onClick={() => navigateTo(tab.tabName)}
+            >
+              <span className={styles.icon}>
+                <SvgIcon id={allureIcons[tab.icon]} />
+              </span>
+              <Text className={styles.text}>{nav(tab.tabName)}</Text>
+            </a>
+          </li>
+        ))}
+      </ul>
+      <div className={styles.strut} />
+      <div className={styles.footer}>
+        <div className={styles["language-picker"]} data-tooltip="Language">
+          <LanguagePicker />
+        </div>
+        <div className={styles.item} data-tooltip="Expand" data-ga4-event="expand_menu_click" onClick={toggleCollapsed}>
+          <div className={styles.collapse}>
+            <span className={styles["collapse-icon"]}>
+              <SvgIcon id={allureIcons.lineArrowsChevronDown} />
+            </span>
+            <Text className={styles.text}>{controls("collapse")}</Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SideNav;

package/src/components/{side-nav → SideNav}/styles.scss

@@ -7,14 +7,18 @@
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
+  min-width: $sidebar-full-width;
 
-  &__head {
+  .head {
     margin: $gap-size 0;
     padding-bottom: 5px;
     border-bottom: 1px solid $sidebar-separator-color;
   }
+  .icon {
+    flex: none;
+  }
 
-  &__brand {
+  .brand {
     color: $sidebar-brand-color;
     text-decoration: none;
     display: flex;
@@ -22,20 +26,14 @@
     font-size: 26px;
     font-weight: bold;
     margin-bottom: 10px;
-    margin-left: 10px;
     transition: all 0.3s;
     background-size: auto auto;
-
-    & > svg {
-      flex: 0 0 40px;
-    }
+    justify-content: flex-start;
+    gap: 8px;
+    padding: 16px 8px 0 16px;
   }
 
-  &__brand-text {
-    padding: 0 $gap-size;
-  }
-
-  &__menu {
+  .menu {
     margin: 0;
     left: 0;
     padding: 0;
@@ -43,46 +41,43 @@
     transition: width 0.3s;
   }
 
-  &__footer {
+  .footer {
     margin-top: auto;
     margin-bottom: $footer-gap-size;
     padding-left: 0;
     padding-right: 0;
   }
 
-  &__item {
+  .item {
     display: block;
-    font-size: 14px;
+  }
+  .language-picker {
+    display: flex;
+    justify-content: center;
   }
 
-  &__link,
-  &__collapse {
-    display: block;
+  .link,
+  .collapse {
     line-height: 24px;
     color: $text-muted-color;
     text-decoration: none;
-    padding: 0.8em 0;
     position: relative;
-
-    &_active {
-      color: $sidebar-active-text-color;
-      border-right: 4px solid $sidebar-active-accent-color;
-    }
-    &:hover {
-      color: $sidebar-hover-text-color;
-    }
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0 8px 16px;
   }
 
-  &__icon {
-    position: absolute;
-    left: $gap-size;
+  .link-active {
+    color: $sidebar-active-text-color;
+    border-right: 4px solid $sidebar-active-accent-color;
   }
-  &__text {
-    padding-left: 55px;
-    padding-right: 7px;
+
+  .link:hover {
+    color: $sidebar-hover-text-color;
   }
 
-  &__language-small {
+  .language-small {
     display: block;
     text-transform: capitalize;
     padding: 0 5px;
@@ -90,29 +85,42 @@
     max-width: 30px;
     margin: 0 auto;
   }
-  &__collapse {
+
+  .collapse {
     cursor: pointer;
-    .side-nav__icon {
-      left: $gap-size + 5px;
-      transition: transform 0.1s;
-    }
   }
-  &_collapsed {
+
+  .collapse-icon {
+    transform: rotate(90deg);
+    transition: transform 200ms;
+  }
+  .collapse .icon {
+    left: $gap-size + 5px;
+    transition: transform 0.1s;
+  }
+
+  &.collapsed {
     width: $sidebar-collapsed;
+    min-width: $sidebar-collapsed;
 
-    .side-nav__collapse .side-nav__icon {
-      transform: rotate(180deg);
+    .collapse-icon {
+      transform: rotate(-90deg);
     }
 
-    .side-nav__text,
-    .side-nav__brand-text {
+    .text,
+    .brand-text {
       visibility: hidden;
       opacity: 0;
+      white-space: nowrap;
     }
 
-    .side-nav__collapse,
-    .side-nav__link {
+    .collapse,
+    .link {
       white-space: nowrap;
     }
   }
+
+  .strut {
+    flex: 1;
+  }
 }

package/src/components/Suites/index.tsx

@@ -0,0 +1,62 @@
+import { Heading, Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/compat";
+import { HeaderActions } from "@/components/HeaderActions/HeaderActions";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { TreeList } from "@/components/Tree";
+import { fetchStats, useI18n } from "@/stores";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import { fetchTreeData, treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+const Suites = () => {
+  const { params } = route.value;
+  const { testResultId } = params;
+
+  useEffect(() => {
+    fetchTreeData();
+  }, []);
+  useEffect(() => {
+    if (testResultId) {
+      fetchTestResult(testResultId);
+    }
+  }, [testResultId]);
+
+  const testResult = testResultId ? (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderData={(testResultItem) => (
+        <>
+          <div className={styles.wrapper} key={testResultItem?.id}>
+            <TestResult testResult={testResultItem} />
+          </div>
+        </>
+      )}
+    />
+  ) : (
+    <div className={styles.wrapper}>
+      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <div />} />
+    </div>
+  );
+
+  const SuitesList = () => {
+    const { t } = useI18n("nav");
+    return (
+      <div className={styles.suites}>
+        <Heading size={"s"} className={styles["suites-title"]}>
+          {t("suites")}
+        </Heading>
+
+        <HeaderActions />
+        <TreeList />
+      </div>
+    );
+  };
+
+  return <SideBySide left={<SuitesList />} right={testResult} />;
+};
+
+export default Suites;

package/src/components/Suites/styles.scss

@@ -0,0 +1,10 @@
+.suites {
+  padding: 8px;
+}
+.suites-title {
+  display: flex;
+  margin-bottom: 24px;
+}
+.wrapper {
+  display: flex;
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,33 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren } from "preact";
+import { currentTab, setCurrentTab } from "@/stores/tabs";
+import * as styles from "./styles.scss";
+
+export const Tabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  if (props.initialTab) {
+    setCurrentTab(props.initialTab);
+  }
+  return <>{props.children}</>;
+};
+
+export const TabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const Tab = (props: { id: string; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const isCurrentTab = currentTab.value === id;
+
+  return (
+    <button
+      {...rest}
+      className={styles.tab}
+      onClick={() => setCurrentTab(id)}
+      aria-current={isCurrentTab ? true : undefined}
+    >
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/Tabs/styles.scss

@@ -0,0 +1,56 @@
+.tabsList {
+  background-color: var(--bg-base-secondary);
+  padding: 2px;
+  border-radius: 8px;
+  display: flex;
+  overflow-x: auto;
+  flex-grow: 0;
+  max-width: max-content;
+}
+
+.tab {
+  background-color: var(--bg-control-flat);
+  color: var(--on-text-primary);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  padding: 2px 8px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  transform: scale(1);
+  outline-offset: 1px;
+  outline: 1px solid transparent;
+  transition:
+    transform var(--interaction-transition-duration) ease-out,
+    outline var(--interaction-transition-duration) ease-out,
+    background-color var(--color-change-transition-duration),
+    border-color var(--color-change-transition-duration);
+
+  &[aria-current] {
+    background-color: var(--bg-base-modal);
+    border-color: var(--on-border-primary);
+    cursor: default;
+  }
+
+  &:hover:not([aria-current]) {
+    background-color: var(--bg-control-flat-medium);
+  }
+
+  &:active:not([aria-current]) {
+    background-color: var(--bg-control-flat-heavy);
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--ad-other-focus);
+
+    &:not([aria-current]) {
+      background-color: var(--bg-control-flat-medium);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { AttachmentTestStepResult } from "@allurereport/core-api";
+import type { FunctionalComponent } from "preact";
+import type { ClassicTestResult } from "types";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+export type TestResultAttachmentViewProps = {
+  testResult?: ClassicTestResult;
+};
+
+export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {
+  const { attachments } = testResult ?? {};
+  const { t } = useI18n("empty");
+
+  return (
+    <div className={styles["test-result-attachments-view"]}>
+      {attachments.length ? (
+        attachments?.map((attach, key) => (
+          <TestResultAttachment 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/TestResultAttachmentsView/styles.scss

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

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

@@ -0,0 +1,27 @@
+import { Text } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { ClassicTestResult } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
+import * as styles from "./styles.scss";
+
+export type TestResultDescriptionProps = {
+  description: ClassicTestResult["description"];
+};
+
+export const TestResultDescription: FunctionalComponent<TestResultDescriptionProps> = ({ description }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  return (
+    <div className={styles["test-result-description"]}>
+      <div className={styles["test-result-description-wrapper"]}>
+        <MetadataButton title={"Description"} setIsOpen={setIsOpen} isOpened={isOpen} />
+        {isOpen && (
+          <Text tag={"p"} className={styles["test-result-description-text"]}>
+            {description || "Description mock"}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+.test-result-description {
+  padding: 0 24px;
+}
+
+.test-result-description-wrapper {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.test-result-description-text {
+  padding-top: 10px;
+}

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

@@ -0,0 +1,23 @@
+import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
+import * as styles from "./styles.scss";
+
+export const TestResultDropdown: FunctionalComponent<{
+  isOpened: boolean;
+  setIsOpen: (isOpened: boolean) => void;
+  title: string;
+  icon: string;
+  counter: number;
+}> = ({ isOpened, setIsOpen, title, icon, counter }) => {
+  return (
+    <div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
+      <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
+      <div className={styles["test-result-dropdown-wrap"]}>
+        <SvgIcon id={icon} />
+        <Text bold>{title}</Text>
+        <Counter count={counter} size="s" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,34 @@
+.test-result-dropdown {
+  display: flex;
+  justify-content: space-between;
+  padding: 1px 8px 1px 6px;
+  border-radius: 6px;
+  transition: background-color 300ms;
+  align-items: center;
+  cursor: pointer;
+  width: 100%;
+}
+
+.test-result-step-chevron {
+  width: 12px;
+  height: 12px;
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.test-result-step-chevron-open {
+  transform: rotate(0deg);
+}
+
+.test-result-dropdown-wrap {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  align-items: center;
+  padding: 6px 8px 6px 6px;
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}

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

@@ -0,0 +1,33 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
+import * as baseStyles from "@/components/BaseLayout/styles.scss";
+import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
+import * as styles from "./styles.scss";
+
+const TestResultThumb = () => {
+  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"]}
+        />
+        <Text className={styles["test-result-thumb-text"]}>No test case results</Text>
+      </div>
+    </div>
+  );
+};
+
+const TestResultEmpty = () => {
+  return (
+    <div className={baseStyles.content}>
+      <TestResultInfo />
+      <TestResultThumb />
+    </div>
+  );
+};
+
+export default TestResultEmpty;

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

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

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

@@ -0,0 +1,48 @@
+import { Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const TestResultErrorTrace = ({ trace }: { trace: string }) => {
+  return (
+    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
+      <Code size={"s"} type={"ui"}>
+        <pre>{trace}</pre>
+      </Code>
+    </div>
+  );
+};
+
+export const TestResultError: FunctionalComponent<{ message: string; trace: string }> = ({ message, trace }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
+
+  return (
+    <div data-testid="test-result-error" className={styles["test-result-error"]}>
+      <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"]}>
+          {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"}>
+          <pre>{message}</pre>
+        </Code>
+      </div>
+      {isOpen && trace && <TestResultErrorTrace trace={trace} />}
+    </div>
+  );
+};