@allurereport/web-awesome 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,52 @@
+import type { JSX } from "preact";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import Split from "split.js";
+import * as styles from "./styles.scss";
+
+const SideBySide = ({ left, right }: { left: JSX.Element; right: JSX.Element }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const leftContent = useMemo(() => left, [left]);
+  const rightContent = useMemo(() => right, [right]);
+
+  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"]}>{leftContent}</div>
+      <div class={styles["side-right"]}>{rightContent}</div>
+    </div>
+  );
+};
+
+export default SideBySide;

package/src/components/SideBySide/styles.scss

@@ -0,0 +1,65 @@
+.side {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  max-width: 1920px;
+  justify-content: space-between;
+  height: 100%;
+}
+.wrapper {
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+}
+
+.side-left {
+  padding: 8px 0 8px 8px;
+  margin-right: auto;
+  transition: width 50ms;
+  will-change: width;
+}
+
+.side-right {
+  flex: 1 1 auto;
+  padding: 8px 8px 8px 0;
+  margin-left: auto;
+  transition: width 200ms;
+  will-change: width, height;
+}
+
+[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;
+}

package/src/components/SplitLayout/index.tsx

@@ -0,0 +1,77 @@
+import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import type { JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import MainReport from "@/components/MainReport";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { useI18n } from "@/stores";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import { treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+const MainReportWrapper = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={styles.wrapper} ref={containerRef}>
+      <MainReport />
+    </div>
+  );
+};
+
+const Loader = () => {
+  return (
+    <div className={styles.content}>
+      <PageLoader />
+    </div>
+  );
+};
+
+export const SplitLayout = () => {
+  const { id: testResultId } = route.value;
+  const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
+
+  const { t } = useI18n("controls");
+
+  const leftSide = (
+    <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReportWrapper />} />
+  );
+
+  const TestResultView = () => {
+    return testResultId ? (
+      <Loadable
+        source={testResultStore}
+        renderLoader={() => <Loader />}
+        transformData={(allResults) => {
+          if (testResultId in allResults) {
+            return allResults[testResultId];
+          }
+        }}
+        renderData={(tr) => {
+          return tr ? <TestResult testResult={tr} /> : <Loader />;
+        }}
+      />
+    ) : (
+      <div className={styles.empty}>
+        <Text>{t("noSelectedTR")}</Text>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    if (!cachedMain) {
+      setCachedMain(leftSide);
+    }
+  }, [cachedMain]);
+
+  return (
+    <div className={styles["side-by-side"]} data-testId={"split-layout"}>
+      <Header className={styles.header} />
+      <SideBySide left={cachedMain} right={<TestResultView />} />
+      <Footer />
+    </div>
+  );
+};

package/src/components/SplitLayout/styles.scss

@@ -0,0 +1,85 @@
+.layout {
+  margin: auto;
+  padding: 12px 32px;
+  background: var(--bg-base-secondary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+.wrapper {
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+  position: relative;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: scroll;
+  height: calc(100vh - var(--footer-header-sizes));
+  position: relative;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  width: 100%;
+  padding: 8px 8px;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}
+
+.side-by-side {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: space-between;
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.header {
+  padding: 8px 8px 0;
+  margin-bottom: 0;
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,62 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { setTreeStatus } from "@/stores/tree";
+import type { AwesomeStatus } from "../../../types";
+import * as styles from "./styles.scss";
+
+type TabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (tab: string) => void;
+};
+
+const TabsContext = createContext<TabsContextT | null>(null);
+
+export const useTabsContext = () => {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("Tabs' components must be used within a Tabs component");
+  }
+
+  return context;
+};
+
+export const TabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return <TabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</TabsContext.Provider>;
+};
+
+export const Tabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <TabsProvider {...props} />;
+};
+
+export const TabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const Tab = (props: { id: string; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const { currentTab, setCurrentTab } = useTabsContext();
+  const isCurrentTab = currentTab === id;
+  const handleTabClick = () => {
+    if (isCurrentTab) {
+      setCurrentTab("total");
+      setTreeStatus("total");
+      return;
+    }
+
+    setCurrentTab(id);
+    setTreeStatus(id as AwesomeStatus);
+  };
+
+  return (
+    <button {...rest} className={styles.tab} onClick={handleTabClick} aria-current={isCurrentTab ? true : undefined}>
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};