@allurereport/web-classic 3.0.0-beta.10

package/src/components/TestResult/TestResultView.hbs

@@ -0,0 +1,32 @@
+{{#if fullName}}
+    <div class="pane__subtitle long-line line-ellipsis">
+        {{> ../../blocks/clipboard-copy/clipboard-copy value=fullName}}
+        <span class="fullname__body">{{fullName}}</span>
+    </div>
+{{/if}}
+<h2 class="{{b 'pane' 'title' borderless=true}}">
+    <div class="{{b cls 'status'}}">
+        <span class="label label_status_{{status}}">{{t statusName}}</span>
+    </div>
+    <div class="{{b cls 'name'}}">
+        {{#if flaky}}
+            {{allure-icon 'flaky'}}
+        {{/if}}
+        {{#if newFailed}}
+            {{allure-icon 'newFailed'}}
+        {{/if}}
+        {{#if newPassed}}
+            {{allure-icon 'newPassed'}}
+        {{/if}}
+        {{#if newBroken}}
+            {{allure-icon 'newBroken'}}
+        {{/if}}
+        {{#if retriesStatusChange}}
+            {{allure-icon 'retriesStatusChange'}}
+        {{/if}}
+        <span class="long-line">{{name}}</span>
+    </div>
+</h2>
+
+{{> ../../blocks/tabs/tabs}}
+<div class="{{b cls 'content'}}"></div>

package/src/components/TestResult/TestResultView.js

@@ -0,0 +1,90 @@
+import { View } from "backbone.marionette";
+import { findWhere } from "underscore";
+import ModalView from "@/components/Modal/ModalView.js";
+import AttachmentView from "@/components/attachment/AttachmentView.js";
+import ErrorSplashView from "@/components/error-splash/ErrorSplashView.js";
+import TestResultOverviewView from "@/components/testresult-overview/TestResultOverviewView.js";
+import { behavior, className, on, regions } from "@/decorators/index.js";
+import translate from "@/helpers/t.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import template from "./TestResultView.hbs";
+import "./styles.scss";
+
+const subViews = [{ id: "", name: "testResult.overview.name", View: TestResultOverviewView }];
+
+@className("test-result")
+@behavior("TooltipBehavior", { position: "left" })
+@behavior("ClipboardBehavior")
+@regions({
+  content: ".test-result__content",
+})
+class TestResultView extends View {
+  template = template;
+
+  initialize({ routeState }) {
+    this.routeState = routeState;
+    this.tabs = subViews.concat(pluginsRegistry.testResultTabs);
+    this.tabName = this.routeState.get("testResultTab") || "";
+    this.listenTo(this.routeState, "change:testResultTab", (_, tabName) => this.onTabChange(tabName));
+    this.listenTo(this.routeState, "change:attachment", (_, uid) => this.onShowAttachment(uid));
+  }
+
+  onRender() {
+    const subView = findWhere(this.tabs, { id: this.tabName });
+    this.showChildView(
+      "content",
+      !subView
+        ? new ErrorSplashView({ code: 404, message: `Tab "${this.tabName}" not found` })
+        : new subView.View(this.options),
+    );
+
+    const attachment = this.routeState.get("attachment");
+    if (attachment) {
+      this.onShowAttachment(attachment);
+    }
+  }
+
+  onTabChange(tabName) {
+    this.tabName = tabName || "";
+    this.render();
+  }
+
+  onShowAttachment(uid) {
+    if (!uid && this.modalView) {
+      this.modalView.destroy();
+    }
+
+    if (uid) {
+      const attachment = this.model.getAttachment(uid);
+      this.modalView = new ModalView({
+        childView: attachment
+          ? new AttachmentView({ attachment, fullScreen: true })
+          : new ErrorSplashView({ code: 404, message: translate("errors.missedAttachment") }),
+        title: attachment ? attachment.name || attachment.source : translate("errors.notFound"),
+      });
+      this.modalView.show();
+    }
+  }
+
+  templateContext() {
+    const { baseUrl } = this.options;
+    return {
+      cls: this.className,
+      statusName: `status.${this.model.get("status")}`,
+      links: this.tabs.map((view) => {
+        return {
+          href: `${baseUrl}/${view.id}`,
+          name: view.name,
+          active: view.id === this.tabName,
+        };
+      }),
+    };
+  }
+
+  @on("click .status-details__trace-toggle")
+  onStacktraceClick(e) {
+    this.$(e.currentTarget).closest(".status-details").toggleClass("status-details__expanded");
+  }
+}
+
+export default TestResultView;

package/src/components/TestResult/index.tsx

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

package/src/components/TestResult/styles.scss

@@ -0,0 +1,29 @@
+@import "../../variables.scss";
+@import "../../mixins.scss";
+
+.test-result {
+  &__name {
+    padding-left: 10px;
+  }
+  &__content {
+    margin-bottom: 300px;
+  }
+}
+
+.app__content > .test-result {
+  position: absolute;
+  width: 100%;
+}
+
+.testresult__failure_expanded > .testresult__trace {
+  display: block;
+}
+
+.message {
+  border-bottom: 3px solid;
+  @include status-border();
+}
+
+.fullname__copy {
+  cursor: pointer;
+}

package/src/components/TestResultView/index.tsx

@@ -0,0 +1,31 @@
+import { Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import TestResult from "@/components/TestResult";
+import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+
+export const TestResultView = () => {
+  const { params } = route.value;
+  const { id: testResultId } = params;
+
+  useEffect(() => {
+    fetchTestResult(testResultId);
+  }, []);
+
+  return (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderError={() => <TestResultEmpty />}
+      renderData={(testResultItem) => (
+        <>
+          <div key={testResultId}>
+            <TestResult testResult={testResultItem} />
+          </div>
+        </>
+      )}
+    />
+  );
+};

package/src/components/ThemeButton/ThemeButton.tsx

@@ -0,0 +1,20 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+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" ? allureIcons.lineShapesMoon : allureIcons.lineShapesSun}
+      size="s"
+    />
+  );
+};

package/src/components/Timeline/index.tsx

@@ -0,0 +1,2 @@
+const Overview = () => <div>Overview</div>;
+export default Overview;

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,76 @@
+import type { Statistic } from "@allurereport/core-api";
+import cx from "clsx";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeRecursiveTree, AwesomeStatus } from "types";
+import TreeItem from "@/components/Tree/TreeItem";
+import { route } from "@/stores/router";
+import TreeHeader from "./TreeHeader";
+import * as styles from "./styles.scss";
+
+interface TreeProps {
+  statistic?: Statistic;
+  tree: AwesomeRecursiveTree;
+  name?: string;
+  root?: boolean;
+  statusFilter?: AwesomeStatus;
+}
+
+const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
+  const { params } = route.value;
+  const { id: parentId, testResultId } = params;
+
+  const [isOpened, setIsOpen] = useState(
+    parentId === tree.nodeId || statistic === undefined || !!statistic.failed || !!statistic.broken,
+  );
+  const toggleTree = () => {
+    setIsOpen(!isOpened);
+  };
+  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
+
+  if (emptyTree) {
+    return null;
+  }
+
+  const treeContent = isOpened && (
+    <div
+      data-testid="tree-content"
+      className={cx({
+        [styles["tree-content"]]: true,
+        [styles.root]: root,
+      })}
+    >
+      {tree?.trees?.map?.((subTree) => (
+        <Tree
+          key={subTree.nodeId}
+          name={subTree.name}
+          tree={subTree}
+          statistic={subTree.statistic}
+          statusFilter={statusFilter}
+        />
+      ))}
+      {tree?.leaves?.map?.((leaf) => (
+        <TreeItem
+          data-testid="tree-leaf"
+          key={leaf.nodeId}
+          id={leaf.nodeId}
+          name={leaf.name}
+          status={leaf.status}
+          groupOrder={leaf.groupOrder}
+          duration={leaf.duration}
+          parentNodeId={tree.nodeId}
+          isMarked={leaf.nodeId === testResultId}
+        />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={styles.tree}>
+      {name && <TreeHeader categoryTitle={name} isOpened={isOpened} toggleTree={toggleTree} statistic={statistic} />}
+      {treeContent}
+    </div>
+  );
+};
+
+export default Tree;

package/src/components/Tree/TreeHeader.tsx

@@ -0,0 +1,82 @@
+import { type Statistic, statusesList } from "@allurereport/core-api";
+import { Loadable, Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import { type FunctionComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
+import { statsStore } from "@/stores";
+import { route } from "@/stores/router";
+import { treeFiltersStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+interface TreeHeaderProps {
+  statistic?: Statistic;
+  categoryTitle: string;
+  isOpened: boolean;
+  toggleTree: () => void;
+}
+
+const maxWidthTab = 140;
+const minWidthTab = 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 = 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,
+  statistic,
+  ...rest
+}) => {
+  const { status: statusFilter } = treeFiltersStore.value;
+
+  return (
+    <Loadable
+      source={statsStore}
+      renderData={(stats: Statistic) => {
+        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 data-testid="tree-header" {...rest} className={styles["tree-header"]} onClick={toggleTree}>
+            <ArrowButton data-testid="tree-arrow" isOpened={isOpened} />
+            <Text data-testid="tree-header-title" 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/Tree/TreeItem.tsx

@@ -0,0 +1,49 @@
+import { type TestStatus, formatDuration } from "@allurereport/core-api";
+import { Text } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionComponent } from "preact";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+import { navigateTo, route } from "@/stores/router";
+import * as styles from "./styles.scss";
+
+interface TreeItemProps {
+  name: string;
+  status: TestStatus;
+  duration?: number;
+  id: string;
+  groupOrder: number;
+  parentNodeId?: string;
+  isMarked?: boolean;
+}
+
+export const TreeItem: FunctionComponent<TreeItemProps> = ({
+  name,
+  groupOrder,
+  status,
+  duration,
+  id,
+  parentNodeId,
+  isMarked,
+  ...rest
+}) => {
+  const { tabName } = route.value;
+  const formattedDuration = formatDuration(duration);
+  const navigateToTR = () => navigateTo(`#${tabName}/${parentNodeId || "root"}/${id}`);
+
+  return (
+    <div {...rest} className={clsx(styles["tree-item"], isMarked && styles["tree-item-marked"])} onClick={navigateToTR}>
+      <TreeItemIcon status={status} />
+      <span data-testid="tree-leaf-order" className={styles.order}>
+        {groupOrder}
+      </span>
+      <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/Tree/TreeItemIcon.tsx

@@ -0,0 +1,32 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+interface TestStatusIconProps {
+  status?: "failed" | "broken" | "passed" | "skipped" | "unknown";
+  className?: string;
+  classNameIcon?: string;
+}
+
+const { solidAlertCircle, solidCheckCircle, solidHelpCircle, solidMinusCircle, solidXCircle } = allureIcons;
+
+const icons = {
+  failed: solidXCircle,
+  broken: solidAlertCircle,
+  passed: solidCheckCircle,
+  skipped: solidMinusCircle,
+  unknown: solidHelpCircle,
+};
+
+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]} />
+    </div>
+  );
+};
+
+export default TreeItemIcon;

package/src/components/Tree/index.tsx

@@ -0,0 +1,60 @@
+import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { AwesomeStatus } from "types";
+import Tree from "@/components/Tree/Tree";
+import { useI18n } from "@/stores/locale";
+import { currentTab } from "@/stores/tabs";
+import { clearTreeFilters, filteredTree, noTests, noTestsFound, setTreeStatus, treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const TreeList = () => {
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    setTreeStatus(currentTab.value as AwesomeStatus);
+  }, [currentTab.value]);
+
+  return (
+    <Loadable
+      source={treeStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (noTests.value) {
+          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>
+          );
+        }
+
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearTreeFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree tree={filteredTree.value} statusFilter={currentTab.value as AwesomeStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};