@allurereport/web-awesome 3.0.0-beta.3

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

@@ -0,0 +1,56 @@
+import { FunctionComponent, FunctionalComponent } from "preact";
+import { AllureAwesomeTestResult } from "types";
+import * as styles from "@/components/app/BaseLayout/styles.scss";
+import { TestResultAttachmentView } from "@/components/app/TestResult/TestResultAttachmentsView";
+import TestResultEmpty from "@/components/app/TestResult/TestResultEmpty";
+import { TestResultHeader } from "@/components/app/TestResult/TestResultHeader";
+import TestResultHistoryView from "@/components/app/TestResult/TestResultHistory";
+import { TestResultInfo } from "@/components/app/TestResult/TestResultInfo";
+import { TestResultOverview } from "@/components/app/TestResult/TestResultOverview";
+import { TestResultRetriesView } from "@/components/app/TestResult/TestResultRetriesView";
+import { TestResultTabs, useTestResultTabsContext } from "@/components/app/TestResult/TestResultTabs";
+
+export type TestResultViewProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+  const { currentTab } = useTestResultTabsContext();
+  const viewMap = {
+    overview: TestResultOverview,
+    history: TestResultHistoryView,
+    attachments: TestResultAttachmentView,
+    retries: TestResultRetriesView,
+  };
+  const ViewComponent = viewMap[currentTab];
+
+  return <ViewComponent testResult={testResult} />;
+};
+
+export type TestResultContentProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+  return (
+    <TestResultTabs initialTab="overview">
+      <TestResultInfo testResult={testResult} />
+      <TestResultView testResult={testResult} />
+    </TestResultTabs>
+  );
+};
+
+export type TestResultProps = {
+  testResult?: AllureAwesomeTestResult;
+};
+
+const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => (
+  <>
+    <TestResultHeader testResult={testResult} />
+    <div className={styles.content}>
+      {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
+    </div>
+  </>
+);
+
+export default TestResult;

package/src/components/app/ThemeButton/ThemeButton.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "preact/hooks";
+import lineShapesMoonIcon from "@/assets/svg/line-shapes-moon.svg";
+import lineShapesSunIcon from "@/assets/svg/line-shapes-sun.svg";
+import { IconButton } from "@/components/commons/Button";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+export const ThemeButton = () => {
+  const theme = themeStore.value;
+
+  useEffect(() => {
+    getTheme();
+  }, []);
+
+  return (
+    <IconButton
+      onClick={toggleTheme}
+      style="ghost"
+      icon={theme === "light" ? lineShapesMoonIcon.id : lineShapesSunIcon.id}
+      size="s"
+    />
+  );
+};

package/src/components/app/Tree/Tree.tsx

@@ -0,0 +1,122 @@
+import type { Statistic, TestStatus, WithChildren } from "@allurereport/core-api";
+import cx from "clsx";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import { useReportContentContext } from "@/components/app/ReportBody/context";
+import TreeItem from "@/components/app/Tree/TreeItem";
+import { Loadable } from "@/components/commons/Loadable";
+import { PageLoader } from "@/components/commons/PageLoader";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores";
+import { treeStore } from "@/stores/tree";
+import { filterGroups, filterLeaves } from "@/utils/treeFilters";
+import TreeHeader from "./TreeHeader";
+import * as styles from "./styles.scss";
+
+interface TreeProps {
+  statistic?: Statistic;
+  leaves?: WithChildren["leaves"];
+  groups?: WithChildren["groups"];
+  name?: string;
+  root?: boolean;
+  statusFilter?: TestStatus;
+}
+
+const Tree: FunctionComponent<TreeProps> = ({ statusFilter, root, name, leaves = [], groups = [], statistic }) => {
+  const [isOpened, setIsOpen] = useState(statistic === undefined || !!statistic.failed || !!statistic.broken);
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={treeStore}
+      renderLoader={() => <PageLoader />}
+      renderData={(treeData) => {
+        const reportContext = useReportContentContext();
+        const toggleTree = () => {
+          setIsOpen(!isOpened);
+        };
+        const leavesToRender = filterLeaves(leaves, treeData?.leavesById, statusFilter, reportContext);
+        const groupsToRender = filterGroups(
+          groups,
+          treeData?.groupsById,
+          treeData?.leavesById,
+          statusFilter,
+          reportContext,
+        );
+        if (!groupsToRender.length && !leavesToRender.length) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        const treeContent = isOpened && (
+          <div
+            className={cx({
+              [styles["tree-content"]]: true,
+              [styles.root]: root,
+            })}
+          >
+            {groupsToRender.map((groupId) => {
+              const group = treeData?.groupsById?.[groupId];
+
+              if (!group) {
+                return null;
+              }
+
+              return (
+                <Tree
+                  key={group.nodeId}
+                  name={group.name}
+                  leaves={group.leaves}
+                  groups={group.groups}
+                  statistic={group.statistic}
+                  statusFilter={statusFilter}
+                />
+              );
+            })}
+            {leavesToRender.map((leafId) => {
+              const leaf = treeData?.leavesById?.[leafId];
+
+              if (!leaf) {
+                return null;
+              }
+
+              return (
+                <TreeItem
+                  data-testid="tree-leaf"
+                  key={leaf.nodeId}
+                  id={leaf.nodeId}
+                  name={leaf.name}
+                  status={leaf.status}
+                  duration={leaf.duration}
+                />
+              );
+            })}
+          </div>
+        );
+
+        return (
+          <div className={styles.tree}>
+            {name && (
+              <TreeHeader
+                categoryTitle={name}
+                isOpened={isOpened}
+                toggleTree={toggleTree}
+                statusFilter={statusFilter}
+                statistic={statistic}
+                data-testid="tree-group-header"
+              />
+            )}
+            {treeContent}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default Tree;

package/src/components/app/Tree/TreeHeader.tsx

@@ -0,0 +1,81 @@
+import { Statistic, statusesList } from "@allurereport/core-api";
+import { clsx } from "clsx";
+import { FunctionComponent } from "preact";
+import { ArrowButton } from "@/components/app/ArrowButton";
+import { Loadable } from "@/components/commons/Loadable";
+import { Text } from "@/components/commons/Typography";
+import { statsStore } from "@/stores";
+import * as styles from "./styles.scss";
+
+interface TreeHeaderProps {
+  statistic?: Statistic;
+  categoryTitle: string;
+  isOpened: boolean;
+  toggleTree: () => void;
+  statusFilter?: string;
+}
+
+const maxWidthTab: number = 140;
+const minWidthTab: number = 46;
+// to make the progress bar more visually responsive for smaller values,
+// we can adjust the formula by adding an offset to stretch the lower part
+// of the logarithmic scale
+const offset: number = 10;
+
+const progress = (current: number, total: number) => {
+  const logOffset = Math.log(offset);
+  return (Math.log(current + offset) - logOffset) / (Math.log(total + offset) - logOffset);
+};
+
+const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
+  categoryTitle,
+  isOpened,
+  toggleTree,
+  statusFilter = "total",
+  statistic,
+  ...rest
+}) => {
+  return (
+    <Loadable
+      source={statsStore}
+      renderData={(stats) => {
+        const width = Math.floor(progress(statistic.total, stats.total) * (maxWidthTab - minWidthTab) + minWidthTab);
+
+        const treeHeaderBar = statistic
+          ? statusesList
+              .map((status) => ({ status, value: statistic[status] }))
+              .filter(
+                ({ status, value }) =>
+                  value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
+              )
+              .map(({ status, value }) => {
+                const className = clsx(styles[`tree-header-bar-item`], styles[status]);
+                const style = { flexGrow: `${value}` };
+
+                return (
+                  <div key={status} className={className} style={style}>
+                    {value}
+                  </div>
+                );
+              })
+          : null;
+
+        return (
+          <div {...rest} className={styles["tree-header"]} onClick={toggleTree}>
+            <ArrowButton isOpened={isOpened} />
+            <Text size="m" bold className={styles["tree-header-title"]}>
+              {categoryTitle}
+            </Text>
+            {treeHeaderBar && (
+              <div className={styles["tree-header-bar"]} style={{ width: `${width}px` }}>
+                {treeHeaderBar}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default TreeHeader;

package/src/components/app/Tree/TreeItem.tsx

@@ -0,0 +1,31 @@
+import { type TestStatus, formatDuration } from "@allurereport/core-api";
+import type { FunctionComponent } from "preact";
+import TreeItemIcon from "@/components/app/Tree/TreeItemIcon";
+import { Text } from "@/components/commons/Typography";
+import { navigateTo } from "@/index";
+import * as styles from "./styles.scss";
+
+interface TreeItemProps {
+  name: string;
+  status: TestStatus;
+  duration?: number;
+  id: string;
+}
+
+export const TreeItem: FunctionComponent<TreeItemProps> = ({ name, status, duration, id, ...rest }) => {
+  const formattedDuration = formatDuration(duration);
+
+  return (
+    <div {...rest} className={styles["tree-item"]} onClick={() => navigateTo(id)}>
+      <TreeItemIcon status={status} />
+      <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
+        {name}
+      </Text>
+      <Text data-testid="tree-leaf-duration" type="ui" size={"m"} className={styles["item-time"]}>
+        {formattedDuration}
+      </Text>
+    </div>
+  );
+};
+
+export default TreeItem;

package/src/components/app/Tree/TreeItemIcon.tsx

@@ -0,0 +1,35 @@
+import { clsx } from "clsx";
+import { FunctionalComponent } from "preact";
+import AlertCircle from "@/assets/svg/solid-alert-circle.svg";
+import CheckCircle from "@/assets/svg/solid-check-circle.svg";
+import HelpCircle from "@/assets/svg/solid-help-circle.svg";
+import MinusCircle from "@/assets/svg/solid-minus-circle.svg";
+import XCircle from "@/assets/svg/solid-x-circle.svg";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import * as styles from "./styles.scss";
+
+interface TestStatusIconProps {
+  status?: "failed" | "broken" | "passed" | "skipped" | "unknown";
+  className?: string;
+  classNameIcon?: string;
+}
+
+const icons = {
+  failed: XCircle.id,
+  broken: AlertCircle.id,
+  passed: CheckCircle.id,
+  skipped: MinusCircle.id,
+  unknown: HelpCircle.id,
+};
+
+const TreeItemIcon: FunctionalComponent<TestStatusIconProps> = ({ status = "unknown", className, classNameIcon }) => {
+  const statusClass = clsx(styles[`status-${status}`], classNameIcon);
+
+  return (
+    <div data-testid={`tree-leaf-status-${status}`} className={clsx(styles["tree-item-icon"], className)}>
+      <SvgIcon className={statusClass} id={icons[status]}></SvgIcon>
+    </div>
+  );
+};
+
+export default TreeItemIcon;

package/src/components/app/Tree/index.tsx

@@ -0,0 +1,40 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { useTabsContext } from "@/components/app/Tabs";
+import Tree from "@/components/app/Tree/Tree";
+import { Loadable } from "@/components/commons/Loadable";
+import { PageLoader } from "@/components/commons/PageLoader";
+import { Text } from "@/components/commons/Typography";
+import { useI18n } from "@/stores/locale";
+import { treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const TreeList = () => {
+  const { t } = useI18n("empty");
+  const { currentTab } = useTabsContext();
+
+  return (
+    <Loadable
+      source={treeStore}
+      renderLoader={() => <PageLoader />}
+      renderData={(treeData) => {
+        const { groups, leaves } = treeData?.root ?? {};
+
+        if (!groups && !leaves) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree groups={groups} leaves={leaves} statusFilter={currentTab as TestStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/app/Tree/styles.scss

@@ -0,0 +1,170 @@
+.tree {
+  position: relative;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-list {
+  min-height: 128px;
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.tree-header-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.tree-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.tree-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+}
+
+.tree-count {
+  display: flex;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 6px 6px;
+  transition: background-color 300ms;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.item-title {
+  display: flex;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+}
+
+.test-count {
+  display: flex;
+  margin-left: auto;
+}
+
+.tree-content:not(.root) {
+  display: block;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-icon {
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.tree-header-bar {
+  display: inline-flex;
+  font-family: var(--font-family);
+  max-width: 140px;
+  min-width: 46px;
+  border-radius: 4px;
+  height: 12px;
+  background: var(--on-text-hint);
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: var(--font-weight-extra-bold);
+  line-height: 12px;
+  overflow: hidden;
+}
+
+.tree-header-bar-item {
+  display: flex;
+  min-width: 16px;
+  justify-content: center;
+  text-align: center;
+  padding: 0 6px;
+  flex-grow: 1;
+
+  &.passed {
+    background-color: var(--bg-support-castor);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.failed {
+    background-color: var(--bg-support-capella);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.broken {
+    background-color: var(--bg-support-atlas);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.skipped {
+    background-color: var(--bg-support-rau);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.unknown {
+    background-color: var(--bg-support-skat);
+    color: var(--constant-on-text-primary);
+  }
+}
+
+.tree-empty-results {
+  display: flex;
+  padding: 44px 24px;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree-empty-results-title {
+  color: var(--on-text-secondary);
+}