@allurereport/web-awesome 3.2.0 → 3.3.0

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

@@ -0,0 +1,71 @@
+import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/core-api";
+import { IconButton, TooltipWrapper, TreeHeader, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { ComponentChildren } from "preact";
+import type { FC } from "preact/compat";
+import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+type HistoryTreeItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  subtreeToggle?: ComponentChildren;
+  reportStatistic?: Statistic;
+};
+
+export const HistoryTreeItem: FC<HistoryTreeItemProps> = ({
+  node,
+  nodeId,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  subtreeToggle,
+  reportStatistic,
+}) => {
+  const { t } = useI18n("controls");
+  const stickyStyle = createCategoriesStickyStyle(depth);
+  const categoryTitle = (
+    <div className={styles["tree-item-history-title"]}>
+      <div className={styles["tree-item-history-main"]}>
+        <span className={styles["tree-item-history-name"]}>{node.name}</span>
+        {node.historyId && (
+          <span className={styles["tree-item-history-copy"]}>
+            <TooltipWrapper tooltipText={t("clipboard")} tooltipTextAfterClick={t("clipboardSuccess")}>
+              <IconButton
+                style={"ghost"}
+                size={"s"}
+                icon={allureIcons.lineGeneralCopy3}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  copyToClipboard(node.historyId ?? "");
+                }}
+              />
+            </TooltipWrapper>
+          </span>
+        )}
+      </div>
+      {subtreeToggle}
+    </div>
+  );
+  return (
+    <div className={clsx(styles["tree-content"], styles["tree-item-history"])} 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/HistoryTreeItem/styles.scss

@@ -0,0 +1,53 @@
+.tree-content {
+  padding-left: 24px;
+}
+
+.tree-item-history {
+  padding: 0;
+  background: var(--bg-base-primary);
+}
+
+.tree-item-history :global(.styles_tree-section-title) {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-right: 8px;
+}
+
+.tree-item-history-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.tree-item-history-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.tree-item-history-name {
+  color: var(--on-text-primary);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-item-history-copy {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.tree-item-history-title:hover .tree-item-history-copy {
+  opacity: 1;
+}
+

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

@@ -0,0 +1,150 @@
+import type {
+  CategoryNode,
+  CategoryNodeProps,
+  Statistic,
+  TestStatus,
+  TestStatusTransition,
+} from "@allurereport/core-api";
+import { capitalize } from "@allurereport/core-api";
+import { SvgIcon, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { ComponentChildren } from "preact";
+import type { FC } from "preact/compat";
+import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
+import { TrStatus } from "@/components/TestResult/TrStatus";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+type LabelTreeItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  subtreeToggle?: ComponentChildren;
+  reportStatistic?: Statistic;
+};
+
+export const LabelTreeItem: FC<LabelTreeItemProps> = ({
+  node,
+  nodeId,
+  store,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  subtreeToggle,
+  reportStatistic,
+}) => {
+  const { t: tTransitions } = useI18n("transitions");
+  const { t: tEnvironments } = useI18n("environments");
+  const { t: tFilters } = useI18n("filters");
+  const { t: tEmpty } = useI18n("empty");
+  const transitionIcons: Partial<Record<TestStatusTransition, string>> = {
+    new: allureIcons.lineAlertsNew,
+    fixed: allureIcons.lineAlertsFixed,
+    regressed: allureIcons.lineAlertsRegressed,
+    malfunctioned: allureIcons.lineAlertsMalfunctioned,
+  };
+  const keyLabels: Partial<Record<string, string>> = {
+    owner: tFilters("owner"),
+    layer: tFilters("layer"),
+    severity: tFilters("severity"),
+    status: tFilters("status"),
+    transition: tFilters("transition"),
+    flaky: tFilters("flaky"),
+    environment: tEnvironments("environment", { count: 1 }),
+  };
+  const keyLabel = node.key ? (keyLabels[node.key] ?? node.key) : node.key;
+  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 emptyValueLabel = node.key ? tEmpty(emptyKeyByGroup[node.key] ?? "no-value") : tEmpty("no-value");
+  const value = node.value === "<Empty>" ? emptyValueLabel : (node.value ?? "");
+  const isStatusGroup = node.key === "status";
+  const isTransitionGroup = node.key === "transition";
+  const isFlakyGroup = node.key === "flaky";
+  const statusLabelValue = node.value === "<Empty>" ? "unknown" : (node.value ?? "unknown");
+  const statusValue = node.key === "status" ? (node.value ?? "") : "";
+  const transitionValue = node.key === "transition" ? (node.value ?? "") : "";
+  const statusIcon = statusValue && statusValue !== "<Empty>" ? (statusValue as TestStatus) : undefined;
+  const transitionIcon =
+    transitionValue && transitionValue !== "<Empty>"
+      ? transitionIcons[transitionValue as TestStatusTransition]
+      : undefined;
+  const transitionLabel =
+    transitionValue === "<Empty>"
+      ? tEmpty("no-transition")
+      : transitionValue
+        ? (tTransitions(transitionValue) ?? transitionValue)
+        : transitionValue;
+  const isFlakyValue = node.value === true || node.value === "true";
+  const flakyLabel =
+    node.value === "<Empty>" ? tEmpty("no-flaky") : isFlakyValue ? tFilters("flaky") : tFilters("nonFlaky");
+  const flakyIcon = isFlakyValue ? allureIcons.lineIconBomb2 : undefined;
+  return (
+    <GroupTreeItem
+      node={node}
+      nodeId={nodeId}
+      store={store}
+      isOpened={isOpened}
+      onToggle={onToggle}
+      depth={depth}
+      subtreeToggle={subtreeToggle}
+      reportStatistic={reportStatistic}
+      className={clsx(
+        styles["tree-item-label"],
+        isStatusGroup && styles["tree-item-label-status"],
+        isTransitionGroup && styles["tree-item-label-transition"],
+        isFlakyGroup && styles["tree-item-label-flaky"],
+      )}
+      title={
+        isStatusGroup ? (
+          <div className={styles["tree-item-label-status-title"]}>
+            <TrStatus status={statusLabelValue as TestStatus} />
+          </div>
+        ) : isTransitionGroup ? (
+          <div className={styles["tree-item-label-transition-title"]}>
+            {transitionIcon && <SvgIcon id={transitionIcon} className={styles["tree-item-label-transition-icon"]} />}
+            <Text size="m" className={styles["tree-item-label-transition-text"]}>
+              {capitalize(transitionLabel ?? "")}
+            </Text>
+          </div>
+        ) : isFlakyGroup ? (
+          <div className={styles["tree-item-label-flaky-title"]}>
+            {flakyIcon && <SvgIcon id={flakyIcon} className={styles["tree-item-label-flaky-icon"]} />}
+            <Text size="m" className={styles["tree-item-label-flaky-text"]}>
+              {flakyLabel}
+            </Text>
+          </div>
+        ) : (
+          <div className={styles["tree-item-label-row"]}>
+            <Text type={"ui"} size="m" className={styles["tree-item-label-key"]}>
+              {keyLabel}
+            </Text>
+            <div className={styles["tree-item-label-values"]}>
+              <div className={styles["tree-item-label-bubble"]}>
+                {statusIcon ? (
+                  <TreeItemIcon status={statusIcon} className={styles["tree-item-label-icon"]} />
+                ) : transitionIcon ? (
+                  <SvgIcon id={transitionIcon} className={styles["tree-item-label-transition-icon"]} />
+                ) : null}
+                <Text size="m" bold className={styles["tree-item-label-value-text"]}>
+                  {value}
+                </Text>
+              </div>
+            </div>
+          </div>
+        )
+      }
+    >
+      {children}
+    </GroupTreeItem>
+  );
+};

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

@@ -0,0 +1,102 @@
+.tree-item-label {
+  padding: 0;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-label-status {
+  :global(.styles_tree-section-title) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tree-item-label-status-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-item-label-transition {
+  :global(.styles_tree-section-title) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tree-item-label-transition-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-item-label-transition-text {
+  font-weight: 600;
+}
+
+.tree-item-label-flaky {
+  :global(.styles_tree-section-title) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tree-item-label-flaky-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-item-label-flaky-text {
+  font-weight: 600;
+}
+
+.tree-item-label-flaky-icon {
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+}
+
+.tree-item-label-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.tree-item-label-key {
+  padding: 4px 0;
+}
+
+.tree-item-label-values {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.tree-item-label-bubble {
+  background: var(--on-border-primary);
+  border-radius: 4px;
+  padding: 2px 4px;
+  line-height: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+}
+
+.tree-item-label-icon {
+  margin-right: 2px;
+}
+
+.tree-item-label-transition-icon {
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+}
+
+.tree-item-label-value-text {
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,107 @@
+import type { CategoryNode, CategoryNodeProps, Statistic, TestStatus } from "@allurereport/core-api";
+import { getWorstStatus } from "@allurereport/core-api";
+import { ansiToHTML } from "@allurereport/web-commons";
+import { ArrowButton, Button, Code, TreeStatusBar } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { ComponentChildren } from "preact";
+import type { FC } from "preact/compat";
+import { useState } from "preact/hooks";
+import { createCategoriesStickyStyle } from "@/components/Categories/sticky";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+type MessageTreeItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  subtreeToggle?: ComponentChildren;
+  reportStatistic?: Statistic;
+};
+
+const statusFromStatistic = (stat?: Statistic): TestStatus | undefined => {
+  if (!stat) {
+    return;
+  }
+  const statuses: TestStatus[] = [];
+  if (stat.failed) {
+    statuses.push("failed");
+  }
+  if (stat.broken) {
+    statuses.push("broken");
+  }
+  if (stat.passed) {
+    statuses.push("passed");
+  }
+  if (stat.skipped) {
+    statuses.push("skipped");
+  }
+  if (stat.unknown) {
+    statuses.push("unknown");
+  }
+  return getWorstStatus(statuses);
+};
+
+export const MessageTreeItem: FC<MessageTreeItemProps> = ({
+  node,
+  nodeId,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  subtreeToggle,
+  reportStatistic,
+}) => {
+  const { t } = useI18n("ui");
+  const status = statusFromStatistic(node.statistic);
+  const sanitizedMessage = ansiToHTML(node.name ?? "", { fg: "var(--on-text-primary)", colors: {} });
+  const stickyStyle = createCategoriesStickyStyle(depth);
+  const hasLongMessage = (node.name ?? "").length > 80;
+  const [isMessageExpanded, setIsMessageExpanded] = useState(false);
+
+  return (
+    <div className={clsx(styles["tree-content"], styles["tree-item-message"])} id={nodeId}>
+      <div className={styles["tree-item-message-container"]} data-tree-header style={stickyStyle} onClick={onToggle}>
+        <ArrowButton isOpened={isOpened} className={styles["tree-item-message-arrow"]} />
+        <div
+          className={clsx(
+            styles["tree-item-message-card"],
+            status && styles[`message-status-${status}`],
+            isMessageExpanded && styles["tree-item-message-card-expanded"],
+          )}
+        >
+          <Code
+            size="s"
+            className={clsx(
+              styles["tree-item-message-header"],
+              isMessageExpanded && styles["tree-item-message-header-expanded"],
+            )}
+          >
+            {/* eslint-disable-next-line react/no-danger */}
+            <pre dangerouslySetInnerHTML={{ __html: sanitizedMessage }} />
+          </Code>
+          <div className={styles["tree-item-message-actions"]}>
+            {hasLongMessage && (
+              <Button
+                size="s"
+                style="ghost"
+                text={isMessageExpanded ? t("showLess") : t("showMore")}
+                className={styles["tree-item-message-expand"]}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setIsMessageExpanded((value) => !value);
+                }}
+              />
+            )}
+            {subtreeToggle}
+            <div className={styles["tree-item-message-stats"]}>
+              <TreeStatusBar reportStatistic={reportStatistic} statusFilter={"total"} statistic={node.statistic} />
+            </div>
+          </div>
+        </div>
+      </div>
+      {isOpened && children}
+    </div>
+  );
+};

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

@@ -0,0 +1,178 @@
+.tree-content {
+  padding-left: 24px;
+}
+
+.tree-item-message {
+  padding: 0;
+}
+
+.tree-item-message-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 1 1 auto;
+  background: var(--bg-base-primary);
+  min-height: var(--tree-section-min-height, auto);
+  padding: 4px 0;
+  position: var(--tree-section-position, relative);
+  top: var(--tree-section-top, auto);
+  transition: background-color 0.3s;
+  z-index: var(--tree-section-z, auto);
+}
+
+.tree-item-message-card {
+  width: 100%;
+  padding: 4px 8px 4px 16px;
+  border-radius: 4px;
+  background-color: var(--bg-alpha-capella);
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: flex-start;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--bg-support-capella);
+  }
+}
+
+.tree-item-message-card-expanded {
+  overflow: visible;
+}
+
+.tree-item-message-header {
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-self: center;
+
+  pre {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.tree-item-message-header-expanded {
+  pre {
+    white-space: pre-wrap;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-word;
+  }
+}
+
+.tree-item-message-arrow {
+  margin-left: 0;
+}
+
+.tree-item-message-title {
+  padding-left: 8px;
+  margin-right: auto;
+}
+
+.tree-item-message-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-item-message-expand {
+  flex: 0 0 auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms;
+}
+
+.tree-item-message-card:hover .tree-item-message-expand {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.tree-item-message-actions .tree-item-subtree-toggle {
+  margin-left: 0;
+}
+
+.tree-item-message-stats {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+
+.tree-item-message-body {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 300ms;
+  margin-bottom: 4px;
+
+  &:hover {
+    background: inherit;
+  }
+}
+
+.message-status-failed {
+  background-color: var(--bg-alpha-capella);
+  &:before {
+    background-color: var(--bg-support-capella);
+  }
+}
+
+.message-status-broken {
+  background-color: var(--bg-alpha-atlas);
+  &:before {
+    background-color: var(--bg-support-atlas);
+  }
+}
+
+.message-status-skipped {
+  background-color: var(--bg-alpha-rau);
+  &:before {
+    background-color: var(--bg-support-rau);
+  }
+}
+
+.message-status-unknown {
+  background-color: var(--bg-alpha-skat);
+  &:before {
+    background-color: var(--bg-support-skat);
+  }
+}
+
+.message-status-passed {
+  background-color: var(--bg-alpha-castor);
+  &:before {
+    background-color: var(--bg-support-castor);
+  }
+}
+
+.message-color-failed {
+  color: var(--on-support-capella);
+}
+
+.message-color-broken {
+  color: var(--on-support-atlas);
+}
+
+.message-color-skipped {
+  color: var(--on-support-rau);
+}
+
+.message-color-passed {
+  color: var(--on-support-castor);
+}
+
+.message-color-unknown {
+  color: var(--on-support-skat);
+}

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

@@ -0,0 +1,50 @@
+import type { CategoryNode, CategoryNodeProps, Statistic } from "@allurereport/core-api";
+import type { ComponentChildren } from "preact";
+import type { FC } from "preact/compat";
+import { GroupTreeItem } from "@/components/Categories/GroupTreeItem";
+import { TrSeverity } from "@/components/TestResult/TrSeverity";
+import * as styles from "./styles.scss";
+
+type SeverityTreeItemProps = CategoryNodeProps & {
+  node: CategoryNode;
+  isOpened: boolean;
+  onToggle: () => void;
+  children: ComponentChildren;
+  depth: number;
+  subtreeToggle?: ComponentChildren;
+  reportStatistic?: Statistic;
+};
+
+export const SeverityTreeItem: FC<SeverityTreeItemProps> = ({
+  node,
+  nodeId,
+  store,
+  isOpened,
+  onToggle,
+  children,
+  depth,
+  subtreeToggle,
+  reportStatistic,
+}) => {
+  const severityValue = node.value === "<Empty>" ? "normal" : (node.value ?? "normal");
+  return (
+    <GroupTreeItem
+      node={node}
+      nodeId={nodeId}
+      store={store}
+      isOpened={isOpened}
+      onToggle={onToggle}
+      depth={depth}
+      subtreeToggle={subtreeToggle}
+      reportStatistic={reportStatistic}
+      className={styles["tree-item-severity"]}
+      title={
+        <div className={styles["tree-item-severity-title"]}>
+          <TrSeverity severity={severityValue} size="m" />
+        </div>
+      }
+    >
+      {children}
+    </GroupTreeItem>
+  );
+};