@allurereport/web-classic 3.0.0-beta.10

package/src/components/ReportMetadata/MetadataItem.tsx

@@ -0,0 +1,45 @@
+import { Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export type MetadataProps = {
+  count?: number;
+  title?: string;
+  type?: string;
+  status?: string;
+};
+
+export const MetadataValue: FunctionalComponent<MetadataProps> = ({ count }) => {
+  return (
+    <Text data-testid="metadata-value" type={"ui"} size={"m"} tag={"div"} className={styles["metadata-item-value"]}>
+      {count}
+    </Text>
+  );
+};
+
+interface ReportMetadataItemProps {
+  className?: string;
+  renderComponent?: FunctionalComponent<MetadataProps>;
+  props?: MetadataProps;
+}
+
+const MetadataItem: FunctionalComponent<ReportMetadataItemProps> = ({
+  className,
+  renderComponent: RenderComponent = MetadataValue,
+  props,
+  ...rest
+}) => {
+  const { title } = props || {};
+
+  return (
+    <div {...rest} className={clsx("metadata-item", className)}>
+      <Text type={"ui"} size={"s"} tag={"div"} className={styles["metadata-item-title"]}>
+        {title}
+      </Text>
+      {RenderComponent ? <RenderComponent {...props} /> : <MetadataValue {...props} />}
+    </div>
+  );
+};
+
+export default MetadataItem;

package/src/components/ReportMetadata/MetadataSummary.tsx

@@ -0,0 +1,81 @@
+import { type Statistic, statusesList } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
+import type { FunctionComponent } from "preact";
+import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
+import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
+import * as styles from "@/components/ReportMetadata/styles.scss";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+
+export const MetadataSummary: FunctionComponent = () => {
+  const { t } = useI18n("statuses");
+  const { t: testSummary } = useI18n("testSummary");
+
+  return (
+    <Loadable
+      source={statsStore}
+      renderError={() => null}
+      renderData={(stats) => {
+        const allTest = computed(() => ({
+          title: capitalize(t("total")),
+          type: "all",
+          count: stats.total,
+        }));
+        const metaDataTests = ["flaky", "retry"]
+          .map((key) => {
+            if (!stats[key as keyof Statistic]) {
+              return;
+            }
+            const title = testSummary(key);
+            const props = { title, count: stats[key as keyof Statistic] || 0, type: key };
+
+            return (
+              <div key={key}>
+                <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
+              </div>
+            );
+          })
+          .filter(Boolean);
+
+        const metadataStatuses = statusesList
+          .map((status) => ({ status, value: stats[status] }))
+          .filter(({ value }) => value)
+          .map(({ status, value }) => {
+            const title = capitalize(t(status) ?? status ?? "");
+            const props = {
+              title,
+              count: value,
+              status,
+            } as MetadataProps;
+
+            return (
+              <MetadataItem
+                data-testid={`metadata-item-${status}`}
+                key={status}
+                props={props}
+                renderComponent={MetadataTestType}
+              />
+            );
+          });
+
+        return (
+          <div class={styles["report-metadata-summary"]}>
+            <div className={styles["report-metadata-all-tests"]}>
+              <MetadataItem
+                data-testid="metadata-item-total"
+                props={allTest.value}
+                renderComponent={MetadataWithIcon}
+              />
+              {Boolean(metaDataTests.length) && <div className={styles["report-metadata-separator"]} />}
+              {metaDataTests}
+            </div>
+            <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/ReportMetadata/MetadataTestType.tsx

@@ -0,0 +1,16 @@
+import { Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import * as styles from "@/components/ReportMetadata/styles.scss";
+
+export const MetadataTestType: FunctionComponent<MetadataProps> = ({ status, count }) => {
+  return (
+    <div data-testid="metadata-value" className={styles["metadata-test-type"]}>
+      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])} />
+      <Text type={"ui"} size={"m"} bold>
+        {count}
+      </Text>
+    </div>
+  );
+};

package/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
+import * as styles from "./styles.scss";
+
+const icons: Record<string, string> = {
+  flaky: allureIcons.lineGeneralZap,
+  retry: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNotificationBox,
+};
+
+export const MetadataWithIcon: FunctionComponent<MetadataProps> = ({ type, count }) => {
+  return (
+    <div data-testid="metadata-value" className={styles["metadata-with-icon"]}>
+      {type !== "all" && <SvgIcon className={styles["metadata-icon"]} id={icons[type]} size={"s"} />}
+      <Text size={"m"} bold>
+        {count}
+      </Text>
+    </div>
+  );
+};

package/src/components/ReportMetadata/index.tsx

@@ -0,0 +1,46 @@
+import type { EnvironmentItem } from "@allurereport/core-api";
+import { Loadable } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { MetadataList } from "@/components/Metadata";
+import { MetadataButton } from "@/components/MetadataButton";
+import { MetadataSummary } from "@/components/ReportMetadata/MetadataSummary";
+import { envInfoStore } from "@/stores/envInfo";
+import * as styles from "./styles.scss";
+
+export interface MetadataItem extends EnvironmentItem {
+  value?: string;
+}
+
+export type MetadataProps = {
+  envInfo?: MetadataItem[];
+  size?: "s" | "m";
+  groupedLabels?: Record<string, string[]>;
+};
+
+const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const [isOpened, setIsOpen] = useState(true);
+  const convertedEnvInfo = envInfo.map((env) => {
+    return { ...env, value: env.values.join(", ") };
+  });
+
+  return (
+    <div class={styles["report-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} title={"Metadata"} counter={envInfo.length} />
+      {isOpened && <MetadataList envInfo={convertedEnvInfo} />}
+    </div>
+  );
+};
+
+export const ReportMetadata = () => {
+  return (
+    <div className={styles["report-metadata-wrapper"]}>
+      <MetadataSummary />
+      <Loadable
+        source={envInfoStore}
+        renderError={() => null}
+        renderData={(data) => Boolean(data?.length) && <Metadata envInfo={data} />}
+      />
+    </div>
+  );
+};

package/src/components/ReportMetadata/styles.scss

@@ -0,0 +1,99 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-metadata {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+}
+
+.report-metadata-keyvalue-value {
+  padding: 8px 0;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 48px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, auto);
+  grid-auto-flow: column;
+  padding-top: 16px;
+}
+
+.metadata-test-type {
+  display: flex;
+}
+
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text();
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}

package/src/components/SideBySide/index.tsx

@@ -0,0 +1,54 @@
+import type { ComponentChild, FunctionalComponent } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import Split from "split.js";
+import * as styles from "./styles.scss";
+
+interface SideBySideProps {
+  left: ComponentChild;
+  right?: ComponentChild;
+}
+
+const SideBySide: FunctionalComponent<SideBySideProps> = ({ left, right }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const sizes = JSON.parse(localStorage.getItem("sideBySidePosition") || "[50, 50]");
+
+    const splitter = Split([`.${styles["side-left"]}`, `.${styles["side-right"]}`], {
+      sizes,
+      gutterSize: 7,
+      gutter: (): HTMLElement => {
+        const gutter = document.createElement("div");
+        gutter.className = `${styles.gutter}`;
+        gutter.addEventListener("dblclick", () => {
+          const currentSizes = splitter.getSizes();
+          if (JSON.stringify(currentSizes) === "[50,50]") {
+            splitter.setSizes([30, 70]);
+            localStorage.setItem("sideBySidePosition", JSON.stringify([30, 70]));
+            return;
+          }
+          splitter.setSizes([50, 50]);
+          localStorage.setItem("sideBySidePosition", JSON.stringify([50, 50]));
+        });
+        return gutter;
+      },
+      onDragEnd: () => {
+        const newSizes = splitter.getSizes();
+        localStorage.setItem("sideBySidePosition", JSON.stringify(newSizes));
+      },
+    });
+
+    return () => {
+      splitter.destroy();
+    };
+  }, []);
+
+  return (
+    <div class={styles.side} ref={containerRef}>
+      <div class={styles["side-left"]}>{left}</div>
+      <div class={styles["side-right"]}>{right}</div>
+    </div>
+  );
+};
+
+export default SideBySide;

package/src/components/SideBySide/styles.scss

@@ -0,0 +1,59 @@
+@import "../../variables.scss";
+
+.side {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.side-left {
+  overflow: auto;
+  flex: 0 0 auto;
+}
+
+.side-right {
+  overflow: auto;
+  flex: 1 1 auto;
+}
+
+[dir="ltr"] {
+  .side {
+    direction: ltr;
+    flex-direction: row;
+  }
+}
+
+[dir="rtl"] {
+  .side {
+    direction: ltr;
+    flex-direction: row-reverse;
+  }
+
+  .side-left {
+    direction: rtl;
+  }
+
+  .side-right {
+    direction: rtl;
+  }
+}
+
+.tree-ctrl {
+  overflow: hidden;
+}
+
+.gutter {
+  background: var(--bg-base-secondary) no-repeat 50%;
+  min-height: 100vh;
+}
+
+.gutter:hover {
+  cursor: ew-resize;
+}
+
+.gutter-horizontal {
+  //background-image: url("vertical.png");
+}

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/SideNav/SideNavView.hbs

@@ -0,0 +1,39 @@
+<div class="{{b 'side-nav' 'head'}}">
+    <a href="#" class="{{b 'side-nav' 'brand'}}" data-ga4-event="home_click">
+        {{allure-icon "allureLogo" noTooltip=true width="40px" height="40px"}}
+        <span class="{{b 'side-nav' 'brand-text'}}">Allure</span>
+    </a>
+</div>
+<ul class="{{b 'side-nav' 'menu'}}">
+    {{#each tabs}}
+        <li class="{{b 'side-nav' 'item'}}"
+            data-tooltip="{{t title}}"
+            data-ga4-event="tab_click"
+            data-ga4-param-tab="{{tabName}}">
+            <a href="#{{tabName}}" class="{{b 'side-nav' 'link' active=active}}">
+                <span class="{{b 'side-nav' 'icon'}}">
+                  {{allure-icon icon noTooltip=true width="22px" height="22px"}}
+                </span>
+                <div class="{{b 'side-nav' 'text'}}">{{t title}}</div>
+            </a>
+        </li>
+    {{/each}}
+</ul>
+<div class="{{b 'side-nav' 'strut'}}"></div>
+<div class="{{b 'side-nav' 'footer'}}">
+    <div class="{{b 'side-nav' 'item'}}" data-tooltip="{{t 'controls.language'}}">
+        <button class="{{b 'button'}} {{b 'button' inverse=true}} {{b 'side-nav' 'language-small' lang=language.id}}"
+                data-ga4-event="language_menu_click">
+            {{language.id}}
+        </button>
+    </div>
+
+    <div class="{{b 'side-nav' 'item'}} " data-tooltip="{{t 'controls.expand'}}" data-ga4-event="expand_menu_click">
+        <div class="{{b 'side-nav' 'collapse'}}">
+            <span class="{{b 'side-nav' 'icon'}}">
+                {{allure-icon "chevronLeft" noTooltip=true width="20px" height="20px"}}
+            </span>
+            <span class="{{b 'side-nav' 'text'}}">{{t 'controls.collapse'}}</span>
+        </div>
+    </div>
+</div>

package/src/components/SideNav/SideNavView.js

@@ -0,0 +1,81 @@
+import { View } from "backbone.marionette";
+import { escapeExpression as escape } from "handlebars/runtime.js";
+import { findWhere } from "underscore";
+import LanguageSelectView from "@/components/language-select/LanguageSelectView.js";
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import { className, on } from "@/decorators/index.js";
+import router from "@/router.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import settings from "@/utils/settings.js";
+import { LANGUAGES } from "@/utils/translation.js";
+import template from "./SideNavView.hbs";
+import "./styles.scss";
+
+@className("side-nav")
+class SideNavView extends View {
+  template = template;
+
+  initialize() {
+    this.tabs = pluginsRegistry.tabs.map(({ tabName, icon, title }) => ({
+      tabName,
+      icon,
+      title,
+      active: this.isTabActive(tabName),
+    }));
+    this.tooltip = new TooltipView({ position: "right" });
+    this.langSelect = new LanguageSelectView();
+  }
+
+  onRender() {
+    this.$el.toggleClass("side-nav_collapsed", settings.isSidebarCollapsed());
+  }
+
+  onDestroy() {
+    this.tooltip.hide();
+  }
+
+  serializeData() {
+    return {
+      language: findWhere(LANGUAGES, { id: settings.getLanguage() }),
+      tabs: this.tabs,
+    };
+  }
+
+  isTabActive(name) {
+    const currentUrl = router.getCurrentUrl();
+    return name ? currentUrl.indexOf(name) === 0 : currentUrl === name;
+  }
+
+  @on("mouseenter [data-tooltip]")
+  onSidelinkHover(e) {
+    if (this.$el.hasClass("side-nav_collapsed")) {
+      const el = this.$(e.currentTarget);
+      this.tooltip.show(escape(el.data("tooltip")), el);
+    }
+  }
+
+  @on("mouseleave [data-tooltip]")
+  onSidelinkLeave() {
+    this.tooltip.hide();
+  }
+
+  @on("click .side-nav__collapse")
+  onCollapseClick() {
+    this.$el.toggleClass("side-nav_collapsed");
+    settings.setSidebarCollapsed(this.$el.hasClass("side-nav_collapsed"));
+    this.tooltip.hide();
+  }
+
+  @on("click .side-nav__language")
+  @on("click .side-nav__language-small")
+  onLanguageClick(e) {
+    if (this.langSelect.isVisible()) {
+      this.langSelect.hide();
+    } else {
+      this.langSelect.show(this.$(e.currentTarget));
+    }
+    this.tooltip.hide();
+  }
+}
+
+export default SideNavView;