@allurereport/web-awesome 3.2.0 → 3.3.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-01fed10ad5f9083fd39c.js"
+  "main.js": "app-8221eb856e47b4ef50d6.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,11 +31,11 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.2.0",
-    "@allurereport/core-api": "3.2.0",
-    "@allurereport/plugin-api": "3.2.0",
-    "@allurereport/web-commons": "3.2.0",
-    "@allurereport/web-components": "3.2.0",
+    "@allurereport/charts-api": "3.3.0",
+    "@allurereport/core-api": "3.3.0",
+    "@allurereport/plugin-api": "3.3.0",
+    "@allurereport/web-commons": "3.3.0",
+    "@allurereport/web-components": "3.3.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

package/src/components/BaseLayout/index.tsx

@@ -1,7 +1,7 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
-import { testResultRoute } from "@/stores/router";
+import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -11,11 +11,12 @@ export type BaseLayoutProps = {
 };
 
 export const BaseLayout = () => {
-  const { matches, params } = testResultRoute.value;
+  const matches = testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId);
+  const testResultId = testResultRoute.value.matches
+    ? testResultRoute.value.params.testResultId
+    : rootTabRoute.value.params.testResultId;
 
   if (matches) {
-    const testResultId = params.testResultId;
-
     return (
       <div className={styles.layout} data-testid="base-layout">
         <Loadable

package/src/components/Categories/CategoriesTree/index.tsx

@@ -0,0 +1,14 @@
+import type { TestCategories } from "@allurereport/core-api";
+import type { FC } from "preact/compat";
+import { CategoryTreeItem } from "@/components/Categories/CategoryTreeItem";
+import * as styles from "./styles.scss";
+
+export const CategoriesTree: FC<{ store: TestCategories }> = ({ store }) => {
+  return (
+    <div className={styles["categories-tree-view"]}>
+      {store.roots.map((id: string) => (
+        <CategoryTreeItem key={id} nodeId={id} store={store} />
+      ))}
+    </div>
+  );
+};

package/src/components/Categories/CategoriesTree/styles.scss

@@ -0,0 +1,14 @@
+.categories-tree-view {
+  display: block;
+  min-height: 480px;
+  padding-bottom: 48px;
+  padding-top: 16px;
+  --categories-sticky-step: 32px;
+}
+
+.categories-tree-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 12px;
+}

package/src/components/Categories/CategoryHeaderItem/index.tsx

@@ -0,0 +1,50 @@
+import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/core-api";
+import { TreeHeader } from "@allurereport/web-components";
+import type { ComponentChildren } from "preact";
+import type { FC } from "preact/compat";
+import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
+import * as styles from "./styles.scss";
+
+type CategoryHeaderItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  subtreeToggle?: ComponentChildren;
+  reportStatistic?: Statistic;
+};
+
+export const CategoryHeaderItem: FC<CategoryHeaderItemProps> = ({
+  node,
+  nodeId,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  subtreeToggle,
+  reportStatistic,
+}) => {
+  const stickyStyle = createCategoriesStickyStyle(depth);
+  const categoryTitle = (
+    <div className={styles["tree-item-category-title"]}>
+      <span className={styles["tree-item-category-name"]}>{node.name}</span>
+      {subtreeToggle}
+    </div>
+  );
+  return (
+    <div className={styles["tree-item-category"]} id={nodeId}>
+      <TreeHeader
+        categoryTitle={categoryTitle}
+        isOpened={isOpened}
+        toggleTree={onToggle}
+        data-tree-header
+        style={stickyStyle}
+        statistic={node.statistic}
+        reportStatistic={reportStatistic}
+        statusFilter={"total"}
+      />
+      {isOpened && children}
+    </div>
+  );
+};

package/src/components/Categories/CategoryHeaderItem/styles.scss

@@ -0,0 +1,32 @@
+.tree-item-category {
+  font-size: 24px;
+  margin-bottom: 16px;
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-item-category :global(.styles_tree-section-title) {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-right: 8px;
+}
+
+.tree-item-category-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.tree-item-category-name {
+  color: var(--on-text-primary);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

package/src/components/Categories/CategoryTreeItem/index.tsx

@@ -0,0 +1,309 @@
+import type { CategoryNode, CategoryNodeProps, TestCategories } from "@allurereport/core-api";
+import { IconButton, TreeItem, allureIcons } from "@allurereport/web-components";
+import type { FC } from "preact/compat";
+import { useState } from "preact/hooks";
+import { CategoryHeaderItem } from "@/components/Categories/CategoryHeaderItem";
+import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
+import { HistoryTreeItem } from "@/components/Categories/HistoryTreeItem";
+import { LabelTreeItem } from "@/components/Categories/LabelTreeItem";
+import { MessageTreeItem } from "@/components/Categories/MessageTreeItem";
+import { SeverityTreeItem } from "@/components/Categories/SeverityTreeItem";
+import { reportStatsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { navigateToTestResult } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+type CategoryTreeItemProps = CategoryNodeProps & {
+  order?: number;
+  depth?: number;
+};
+
+const getDefaultOpened = (node?: CategoryNode) => (node?.type === "category" ? Boolean(node.expand) : true);
+
+const getSubtreeExpandableIds = (rootId: string, store: TestCategories) => {
+  const result: string[] = [];
+  const stack = [rootId];
+
+  while (stack.length) {
+    const currentId = stack.pop();
+    if (!currentId) {
+      continue;
+    }
+    const currentNode = store.nodes[currentId];
+    if (!currentNode) {
+      continue;
+    }
+    if (currentNode.childrenIds?.length) {
+      result.push(currentId);
+    }
+    (currentNode.childrenIds ?? []).forEach((childId: string) => stack.push(childId));
+  }
+
+  return result;
+};
+
+const getNodeOpenedState = (nodeId: string, store: TestCategories) => {
+  const node = store.nodes[nodeId];
+  const defaultOpened = getDefaultOpened(node);
+  return collapsedTrees.value.has(nodeId) ? !defaultOpened : defaultOpened;
+};
+
+export const CategoryTreeItem: FC<CategoryTreeItemProps> = ({ nodeId, store, order, depth = 0 }) => {
+  const node: CategoryNode = store.nodes[nodeId];
+  const trId = currentTrId.value;
+  const { t: tTransitions } = useI18n("transitions");
+  const { t: tEnvironments } = useI18n("environments");
+  const { t: tEmpty } = useI18n("empty");
+  const hasSavedState = collapsedTrees.value.has(nodeId);
+  const defaultOpened = getDefaultOpened(node);
+  const [isOpened, setIsOpen] = useState<boolean>(hasSavedState ? !defaultOpened : defaultOpened);
+  const [subtreeVersion, setSubtreeVersion] = useState(0);
+  const [lastSubtreeToggle, setLastSubtreeToggle] = useState<"first" | "all" | "none" | null>(null);
+
+  if (!node) {
+    return null;
+  }
+
+  const hasChildren = Boolean(node.childrenIds?.length);
+  const hasOnlyLeafResults = hasChildren
+    ? (node.childrenIds ?? []).every((childId) => store.nodes[childId]?.type === "tr")
+    : false;
+  const expandableNodeIds = hasChildren ? getSubtreeExpandableIds(nodeId, store) : [];
+  const isSubtreeCollapsedAll = !getNodeOpenedState(nodeId, store);
+  const isSubtreeFirstLevelOnly =
+    getNodeOpenedState(nodeId, store) &&
+    expandableNodeIds.filter((id) => id !== nodeId).every((id) => !getNodeOpenedState(id, store));
+  const isSubtreeExpandedAll =
+    getNodeOpenedState(nodeId, store) && expandableNodeIds.every((id) => getNodeOpenedState(id, store));
+
+  const onClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(nodeId);
+    setLastSubtreeToggle(null);
+  };
+
+  const setSubtreeState = (state: "first" | "all" | "none") => {
+    const nextCollapsed = new Set(collapsedTrees.value);
+
+    expandableNodeIds.forEach((id) => {
+      const currentNode = store.nodes[id];
+      const isDefaultOpened = getDefaultOpened(currentNode);
+      const isRoot = id === nodeId;
+      let shouldBeOpened = false;
+
+      if (state === "all") {
+        shouldBeOpened = true;
+      } else if (state === "first") {
+        shouldBeOpened = isRoot;
+      } else {
+        shouldBeOpened = false;
+      }
+
+      if (isDefaultOpened === shouldBeOpened) {
+        nextCollapsed.delete(id);
+      } else {
+        nextCollapsed.add(id);
+      }
+    });
+
+    collapsedTrees.value = nextCollapsed;
+  };
+
+  const onToggleSubtree = (event: MouseEvent) => {
+    event.stopPropagation();
+    if (hasOnlyLeafResults) {
+      if (isSubtreeCollapsedAll) {
+        setSubtreeState("all");
+        setIsOpen(true);
+        setLastSubtreeToggle("all");
+      } else {
+        setSubtreeState("none");
+        setIsOpen(false);
+        setLastSubtreeToggle("none");
+      }
+      setSubtreeVersion((value: number) => value + 1);
+      return;
+    }
+    let nextState: "first" | "all" | "none" = "first";
+    if (isSubtreeCollapsedAll) {
+      nextState = "first";
+    } else if (isSubtreeFirstLevelOnly) {
+      nextState = lastSubtreeToggle === "all" ? "none" : "all";
+    } else if (isSubtreeExpandedAll) {
+      nextState = "first";
+    } else {
+      nextState = "all";
+    }
+    setSubtreeState(nextState);
+    setIsOpen(nextState !== "none");
+    setLastSubtreeToggle(nextState);
+    setSubtreeVersion((value: number) => value + 1);
+  };
+
+  const subtreeToggleIcon = (() => {
+    if (hasOnlyLeafResults) {
+      return isSubtreeCollapsedAll ? allureIcons.lineArrowsChevronDown : allureIcons.lineArrowsChevronUp;
+    }
+    if (isSubtreeCollapsedAll) {
+      return allureIcons.lineArrowsChevronDown;
+    }
+    if (isSubtreeFirstLevelOnly) {
+      return allureIcons.lineArrowsChevronDownDouble;
+    }
+    return allureIcons.lineArrowsChevronUpDouble;
+  })();
+
+  const subtreeToggle = hasChildren ? (
+    <IconButton
+      size="xs"
+      style="ghost"
+      icon={subtreeToggleIcon}
+      onClick={onToggleSubtree}
+      className={styles["tree-item-subtree-toggle"]}
+    />
+  ) : null;
+
+  const renderChildren = () => (
+    <div className={styles["tree-children"]} key={subtreeVersion}>
+      {(node.childrenIds ?? []).map((cid: string, index: number) => (
+        <div key={cid} className={styles["tree-content"]} data-tree-content>
+          <CategoryTreeItem key={cid} nodeId={cid} store={store} order={index} depth={depth + 1} />
+        </div>
+      ))}
+    </div>
+  );
+
+  if (node.type === "category") {
+    return (
+      <CategoryHeaderItem
+        node={node}
+        nodeId={nodeId}
+        store={store}
+        isOpened={isOpened}
+        onToggle={onClick}
+        depth={depth}
+        subtreeToggle={subtreeToggle}
+        reportStatistic={reportStatsStore.value.data}
+      >
+        {renderChildren()}
+      </CategoryHeaderItem>
+    );
+  }
+  if (node.type === "history") {
+    return (
+      <HistoryTreeItem
+        node={node}
+        nodeId={nodeId}
+        store={store}
+        isOpened={isOpened}
+        onToggle={onClick}
+        depth={depth}
+        subtreeToggle={subtreeToggle}
+        reportStatistic={reportStatsStore.value.data}
+      >
+        {renderChildren()}
+      </HistoryTreeItem>
+    );
+  }
+  if (node.type === "message" || node.type === "group") {
+    if (node.type === "message") {
+      return (
+        <MessageTreeItem
+          node={node}
+          nodeId={nodeId}
+          store={store}
+          isOpened={isOpened}
+          onToggle={onClick}
+          depth={depth}
+          subtreeToggle={subtreeToggle}
+          reportStatistic={reportStatsStore.value.data}
+        >
+          {renderChildren()}
+        </MessageTreeItem>
+      );
+    }
+    if (node.key === "severity") {
+      return (
+        <SeverityTreeItem
+          node={node}
+          nodeId={nodeId}
+          store={store}
+          isOpened={isOpened}
+          onToggle={onClick}
+          depth={depth}
+          subtreeToggle={subtreeToggle}
+          reportStatistic={reportStatsStore.value.data}
+        >
+          {renderChildren()}
+        </SeverityTreeItem>
+      );
+    }
+    if (node.key) {
+      return (
+        <LabelTreeItem
+          node={node}
+          nodeId={nodeId}
+          store={store}
+          isOpened={isOpened}
+          onToggle={onClick}
+          depth={depth}
+          subtreeToggle={subtreeToggle}
+          reportStatistic={reportStatsStore.value.data}
+        >
+          {renderChildren()}
+        </LabelTreeItem>
+      );
+    }
+    return (
+      <GroupTreeItem
+        node={node}
+        nodeId={nodeId}
+        store={store}
+        isOpened={isOpened}
+        onToggle={onClick}
+        depth={depth}
+        subtreeToggle={subtreeToggle}
+        reportStatistic={reportStatsStore.value.data}
+      >
+        {renderChildren()}
+      </GroupTreeItem>
+    );
+  }
+  if (node.type === "tr") {
+    const isEnvLeaf = node.key === "environment";
+    let envValue = node.value ?? node.name;
+    if (typeof envValue === "string" && envValue.toLowerCase().startsWith("environment:")) {
+      envValue = envValue.slice("environment:".length).trim();
+    }
+    if (node.value === "<Empty>") {
+      envValue = tEmpty("no-environment");
+    }
+    const displayName = isEnvLeaf ? `${tEnvironments("environment", { count: 1 })}: ${envValue}` : node.name;
+    const leafTooltips =
+      node.type === "tr"
+        ? {
+            transition:
+              node.tooltips?.transition ??
+              (node.transition ? tTransitions(`description.${node.transition}`) : undefined),
+            flaky: node.tooltips?.flaky ?? (node.flaky ? tTransitions("description.flaky") : undefined),
+            retries:
+              node.tooltips?.retries ??
+              (node.retriesCount ? tTransitions("description.retries", { count: node.retriesCount }) : undefined),
+          }
+        : node.tooltips;
+    return (
+      <div className={styles["tree-item"]} id={nodeId}>
+        <TreeItem
+          {...node}
+          name={displayName}
+          groupOrder={(order ?? 0) + 1}
+          marked={node.id === trId}
+          navigateTo={() => navigateToTestResult({ testResultId: nodeId })}
+          tooltips={leafTooltips}
+        />
+      </div>
+    );
+  }
+};

package/src/components/Categories/CategoryTreeItem/styles.scss

@@ -0,0 +1,47 @@
+.tree-content {
+  padding-left: 24px;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 12px;
+    width: 1px;
+    background: var(--on-border-muted);
+    opacity: 0;
+    transition: opacity 200ms;
+  }
+}
+
+.tree-item {
+  border-top: 1px solid var(--on-border-muted);
+  // padding-left: 24px;
+
+}
+
+.tree-children {
+  display: contents;
+}
+
+.tree-item-subtree-toggle {
+  flex: 0 0 auto;
+  margin-left: auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms;
+}
+
+:global([data-tree-header]:hover) .tree-item-subtree-toggle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.tree-children > [data-tree-content]::before {
+  opacity: 0;
+}
+
+.tree-content:hover::before {
+  opacity: 1;
+}

package/src/components/Categories/GroupTreeItem/index.tsx

@@ -0,0 +1,76 @@
+import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/core-api";
+import { TreeHeader } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { ComponentChildren, FC } from "preact/compat";
+import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+type GroupTreeItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  reportStatistic?: Statistic;
+  className?: string;
+  title?: ComponentChildren;
+  subtreeToggle?: ComponentChildren;
+};
+
+export const GroupTreeItem: FC<GroupTreeItemProps> = ({
+  node,
+  nodeId,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  reportStatistic,
+  className,
+  title,
+  subtreeToggle,
+}) => {
+  const { t: tEmpty } = useI18n("empty");
+  const { t: tFilters } = useI18n("filters");
+  const { t: tEnvironments } = useI18n("environments");
+  const stickyStyle = createCategoriesStickyStyle(depth);
+  const emptyKeyByGroup: Partial<Record<string, string>> = {
+    transition: "no-transition",
+    layer: "no-layer",
+    owner: "no-owner",
+    severity: "no-severity",
+    status: "no-status",
+    environment: "no-environment",
+    flaky: "no-flaky",
+  };
+  const defaultTitle =
+    node.name === "<Empty>" ? tEmpty(node.key ? (emptyKeyByGroup[node.key] ?? "no-value") : "no-value") : node.name;
+  const headerTitle = subtreeToggle ? (
+    <span className={styles["tree-item-group-title"]}>
+      <span className={styles["tree-item-group-title-content"]}>{title ?? defaultTitle}</span>
+      {subtreeToggle}
+    </span>
+  ) : (
+    (title ?? defaultTitle)
+  );
+
+  return (
+    <div
+      className={clsx(styles["tree-content"], styles["tree-item-group"], className)}
+      id={nodeId}
+      data-group-key={node.key}
+    >
+      <TreeHeader
+        isOpened={isOpened}
+        categoryTitle={headerTitle}
+        toggleTree={onToggle}
+        data-tree-header
+        style={stickyStyle}
+        reportStatistic={reportStatistic}
+        statistic={node.statistic}
+        statusFilter={"total"}
+      />
+      {isOpened && children}
+    </div>
+  );
+};

package/src/components/Categories/GroupTreeItem/styles.scss

@@ -0,0 +1,47 @@
+.tree-content {
+  padding-left: 24px;
+}
+
+.tree-item-group {
+  padding: 0;
+}
+
+.tree-item-group :global(.styles_tree-section-title) {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-right: 8px;
+}
+
+.tree-item-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.tree-item-group-title-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-item-group[data-group-key="flaky"] :global(.styles_tree-section-title) {
+  color: var(--on-support-atlas);
+}
+
+.tree-item-group[data-group-key="transition"] :global(.styles_tree-section-title) {
+  color: var(--on-support-aldebaran);
+}
+
+.tree-item-group[data-group-key="owner"] :global(.styles_tree-section-title) {
+  color: var(--on-support-sirius);
+}
+
+.tree-item-group[data-group-key="layer"] :global(.styles_tree-section-title) {
+  color: var(--on-support-castor);
+}
+