@allurereport/web-awesome 3.0.0-beta.3

package/src/components/app/ReportBody/context.tsx

@@ -0,0 +1,107 @@
+import { type ComponentChildren, createContext } from "preact";
+import { useCallback, useContext, useReducer } from "preact/hooks";
+import { capitalize } from "@/utils/capitalize";
+
+export type SortBy = "order" | "duration" | "status" | "alphabet";
+export type Direction = "asc" | "desc";
+export type Filters = "flaky" | "retry" | "new";
+
+export type ReportContentContextValue = {
+  query: string;
+  filter: Record<Filters, boolean>;
+  sortBy: SortBy;
+  direction: Direction;
+  setQuery: (query: string) => void;
+  setSortBy: (sortBy: SortBy) => void;
+  setDirection: (direction: Direction) => void;
+  setFilter: (filterKey: Filters, value: boolean) => void;
+};
+
+export const ReportContentContext = createContext<ReportContentContextValue | null>(null);
+
+export const useReportContentContext = () => {
+  const context = useContext(ReportContentContext);
+
+  if (!context) {
+    throw new Error("useReportContentContext must be used within a ReportContentProvider");
+  }
+
+  return context;
+};
+
+type Actions =
+  | {
+      type: "setSortBy";
+      payload: SortBy;
+    }
+  | {
+      type: "setDirection";
+      payload: Direction;
+    }
+  | {
+      type: "setFilter";
+      payload: { filterKey: Filters; value: boolean };
+    }
+  | {
+      type: "setQuery";
+      payload: string;
+    };
+
+type State = Omit<ReportContentContextValue, "setSortBy" | "setDirection" | "setFilter" | "setQuery">;
+
+export const ReportContentProvider = ({ children }: { children: ComponentChildren }) => {
+  const [state, dispatch] = useReducer<State, Actions>(
+    (state, action): State => {
+      switch (action.type) {
+        case "setDirection":
+          return { ...state, direction: action.payload };
+        case "setSortBy":
+          return { ...state, sortBy: action.payload };
+        case "setFilter":
+          return { ...state, filter: { ...state.filter, [action.payload.filterKey]: action.payload.value } };
+        case "setQuery":
+          return { ...state, query: action.payload };
+        default:
+          return state;
+      }
+    },
+    {
+      query: "",
+      direction: "asc",
+      filter: {
+        flaky: false,
+        new: false,
+        retry: false,
+      },
+      sortBy: "alphabet",
+    },
+  );
+
+  const setSortBy = useCallback((sortBy: SortBy) => dispatch({ type: "setSortBy", payload: sortBy }), []);
+
+  const setDirection = useCallback(
+    (direction: Direction) => dispatch({ type: "setDirection", payload: direction }),
+    [],
+  );
+
+  const setFilter = useCallback(
+    (filterKey: Filters, value: boolean) => dispatch({ type: "setFilter", payload: { filterKey, value } }),
+    [],
+  );
+
+  const setQuery = useCallback((query: string) => dispatch({ type: "setQuery", payload: query }), []);
+
+  return (
+    <ReportContentContext.Provider
+      value={{
+        ...state,
+        setSortBy,
+        setDirection,
+        setFilter,
+        setQuery,
+      }}
+    >
+      {children}
+    </ReportContentContext.Provider>
+  );
+};

package/src/components/app/ReportBody/index.tsx

@@ -0,0 +1,71 @@
+import { statusesList } from "@allurereport/core-api";
+import { Loadable } from "@/components/commons/Loadable";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+import { Counter } from "../../commons/Counter";
+import { Tab, Tabs, TabsList } from "../Tabs";
+import { TreeList } from "../Tree";
+import { HeaderActions } from "./HeaderActions";
+import { SortBy } from "./SortBy";
+import { ReportContentProvider } from "./context";
+import * as styles from "./styles.scss";
+
+const ALL_TAB = "total";
+
+const Header = () => {
+  const { t } = useI18n("statuses");
+  return (
+    <header className={styles.header}>
+      <HeaderActions />
+      <div className={styles.headerRow}>
+        <TabsList>
+          <Loadable
+            source={statsStore}
+            renderData={(stats) => {
+              const allStatuses = statusesList
+                .map((status) => ({ status, value: stats[status] }))
+                .filter(({ value }) => value)
+                .map(({ status, value }) => (
+                  <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                    {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
+                  </Tab>
+                ));
+
+              return (
+                <>
+                  <Tab data-testid="tab-all" id={ALL_TAB}>
+                    {capitalize(t("total"))} <Counter count={stats?.total ?? 0} size="s" />
+                  </Tab>
+                  {allStatuses}
+                </>
+              );
+            }}
+          />
+        </TabsList>
+        <SortBy />
+      </div>
+    </header>
+  );
+};
+
+const Body = () => {
+  return (
+    <div className={styles.body}>
+      <TreeList />
+    </div>
+  );
+};
+
+export const ReportBody = () => {
+  return (
+    <ReportContentProvider>
+      <section>
+        <Tabs initialTab="total">
+          <Header />
+          <Body />
+        </Tabs>
+      </section>
+    </ReportContentProvider>
+  );
+};

package/src/components/app/ReportBody/styles.scss

@@ -0,0 +1,64 @@
+.header {
+  padding: 24px;
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.headerRow {
+  display: flex;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  padding: 16px 24px;
+}
+
+.headerActions {
+  display: flex;
+  gap: 8px;
+}
+
+/* This is a hack because button do not have this state */
+.filtersBtnWithFilters > button::after {
+  content: "";
+  background-color: var(--bg-support-aldebaran);
+  width: 6px;
+  height: 6px;
+  border-radius: 100px;
+  position: absolute;
+  top: 7px;
+  right: 3px;
+}
+
+.filterToggle {
+  padding-top: 2px;
+}
+
+.sortByText {
+  color: var(--on-text-secondary);
+}
+
+.sortByBtnWrap {
+  /*
+    Because button is 24px height it makes
+    menu item to be 24px height too
+    But design is not that
+   */
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.sortByIcon {
+  transition: transform var(--interaction-transition-duration) ease-out;
+
+  &.sortByIconReversed {
+    transform: rotate(180deg);
+  }
+}

package/src/components/app/ReportHeader/ReportHeaderLabelList.tsx

@@ -0,0 +1,12 @@
+import * as styles from "@/components/app/ReportHeader/styles.scss";
+import { Label } from "@/components/commons/Label";
+
+export const ReportHeaderLabelList = () => {
+  return (
+    <div className={styles["report-header-label-list"]}>
+      {["Smoke", "regression", "nightly"].map((item, key) => {
+        return <Label key={key}>{item}</Label>;
+      })}
+    </div>
+  );
+};

package/src/components/app/ReportHeader/ReportHeaderLogo.tsx

@@ -0,0 +1,10 @@
+import * as styles from "@/components/app/ReportHeader/styles.scss";
+import { ReportLogo } from "@/components/app/ReportLogo";
+
+export const ReportHeaderLogo = () => {
+  return (
+    <div className={styles["report-header-logo"]}>
+      <ReportLogo />
+    </div>
+  );
+};

package/src/components/app/ReportHeader/ReportHeaderPie.tsx

@@ -0,0 +1,14 @@
+import { Loadable } from "@/components/commons/Loadable";
+import { SuccessRatePieChart } from "@/components/commons/SuccessRatePieChart";
+import { pieChartStore } from "@/stores/chart";
+import * as styles from "./styles.scss";
+
+export const ReportHeaderPie = () => (
+  <div className={styles["report-header-pie"]}>
+    <Loadable
+      source={pieChartStore}
+      renderLoader={() => null}
+      renderData={(chartData) => <SuccessRatePieChart slices={chartData.slices} percentage={chartData.percentage} />}
+    />
+  </div>
+);

package/src/components/app/ReportHeader/index.tsx

@@ -0,0 +1,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { ReportHeaderLogo } from "@/components/app/ReportHeader/ReportHeaderLogo";
+import { ReportHeaderPie } from "@/components/app/ReportHeader/ReportHeaderPie";
+import { Heading, Text } from "@/components/commons/Typography";
+import { currentLocaleIso } from "@/stores";
+import type { AllureAwesomeReportOptions } from "../../../../types.js";
+import * as styles from "./styles.scss";
+
+export const ReportHeader = () => {
+  const { reportName, createdAt } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+  const formattedCreatedAt = new Date(createdAt).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  return (
+    <div className={styles["report-header"]}>
+      <div className={styles["report-wrapper"]}>
+        <ReportHeaderLogo />
+        <div className={styles["report-wrapper-text"]}>
+          <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]}>
+            {reportName}
+          </Heading>
+          <Text type="paragraph" size="m" className={styles["report-date"]}>
+            {formattedCreatedAt}
+          </Text>
+        </div>
+      </div>
+      <ReportHeaderPie />
+    </div>
+  );
+};

package/src/components/app/ReportHeader/styles.scss

@@ -0,0 +1,49 @@
+.report-header {
+  display: flex;
+  column-gap: 12px;
+  justify-content: space-between;
+  padding: 24px;
+  align-items: flex-start;
+}
+
+.report-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+
+.report-wrapper-text {
+  flex-grow: 1;
+  margin-bottom: 16px;
+}
+
+.report-date {
+  color: var(--on-text-secondary);
+  display: block;
+}
+
+.report-header-logo {
+  margin-right: 12px;
+}
+
+.report-header-labels {
+  display: flex;
+}
+
+.report-header-label-list {
+  display: flex;
+  width: 100%;
+  column-gap: 8px;
+}
+
+.wrapper-header {
+  margin-bottom: 2px;
+}
+
+.report-header-pie {
+  width: 88px;
+}
+
+.report-header-pie-chart {
+  width: 88px;
+}

package/src/components/app/ReportLogo/index.tsx

@@ -0,0 +1,17 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { clsx } from "clsx";
+import reportLogoDefault from "@/assets/svg/report-logo.svg";
+import { AllureAwesomeReportOptions } from "../../../../types";
+import { SvgIcon } from "../../commons/SvgIcon";
+import * as styles from "./styles.scss";
+
+export const ReportLogo = (props: { className?: string; logo?: never }) => {
+  const { className } = props;
+  const { logo } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
+
+  return (
+    <div className={clsx(styles["report-logo"], className)}>
+      {logo ? <img src={logo} alt="report logo" /> : <SvgIcon id={reportLogoDefault.id} inline />}
+    </div>
+  );
+};

package/src/components/app/ReportLogo/styles.scss

@@ -0,0 +1,20 @@
+.report-logo {
+  padding: 8px;
+  background: var(--bg-base-secondary);
+  border-radius: 8px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.text {
+  color: var(--on-text-primary);
+}

package/src/components/app/ReportLogoFull/index.tsx

@@ -0,0 +1,21 @@
+import { clsx } from "clsx";
+import reportLogo from "@/assets/svg/report-logo.svg";
+import { SvgIcon } from "../../commons/SvgIcon";
+import { Text } from "../../commons/Typography";
+import * as styles from "./styles.scss";
+
+export const ReportLogoFull = (props: {
+  /**
+   * Additional class name
+   */
+  className?: string;
+}) => {
+  const { className } = props;
+
+  return (
+    <Text type="paragraph" size="m" bold className={clsx(className, styles.text)}>
+      <SvgIcon id={reportLogo.id} size="m" inline className={styles.logo} />
+      <span>Allure Report</span>
+    </Text>
+  );
+};

package/src/components/app/ReportLogoFull/styles.scss

@@ -0,0 +1,7 @@
+.logo {
+    margin-right: 8px;
+}
+
+.text {
+    color: var(--on-text-primary);
+}

package/src/components/app/ReportMetadata/MetadataItem.tsx

@@ -0,0 +1,45 @@
+import { clsx } from "clsx";
+import { FunctionalComponent } from "preact";
+import { Text } from "@/components/commons/Typography";
+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/app/ReportMetadata/MetadataSummary.tsx

@@ -0,0 +1,79 @@
+import { statusesList } from "@allurereport/core-api";
+import { computed } from "@preact/signals";
+import { FunctionComponent } from "preact";
+import MetadataItem, { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import { MetadataTestType } from "@/components/app/ReportMetadata/MetadataTestType";
+import { MetadataWithIcon } from "@/components/app/ReportMetadata/MetadataWithIcon";
+import * as styles from "@/components/app/ReportMetadata/styles.scss";
+import { Loadable } from "@/components/commons/Loadable";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { capitalize } from "@/utils/capitalize";
+
+export const MetadataSummary: FunctionComponent = () => {
+  const { t } = useI18n("statuses");
+
+  return (
+    <Loadable
+      source={statsStore}
+      renderError={() => null}
+      renderData={(stats) => {
+        const allTest = computed(() => ({
+          title: capitalize(t("total")),
+          type: "all",
+          count: stats.total,
+        }));
+        // TODO: https://github.com/qameta/allure3/issues/178
+        // const metadataStatsKeys: (keyof Statistic)[] = ["flakyTests", "retryTests", "newTests"];
+        // const metaDataTests = metadataStatsKeys
+        //   .filter((key) => stats[key])
+        //   .map((key) => {
+        //     const title = t[key];
+        //     const props = { title, count: stats[key], type: key };
+        //
+        //     return (
+        //       <>
+        //         <MetadataItem key={key} props={props} renderComponent={MetadataWithIcon} />
+        //       </>
+        //     );
+        //   });
+
+        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}
+              />
+              {/*<div className={styles["report-metadata-separator"]}></div>*/}
+              {/*{metaDataTests}*/}
+            </div>
+            <div className={styles["report-metadata-status"]}>{metadataStatuses}</div>
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/app/ReportMetadata/MetadataTestType.tsx

@@ -0,0 +1,16 @@
+import { clsx } from "clsx";
+import { FunctionComponent } from "preact";
+import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import * as styles from "@/components/app/ReportMetadata/styles.scss";
+import { Text } from "@/components/commons/Typography";
+
+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}`])}></div>
+      <Text type={"ui"} size={"m"} bold>
+        {count}
+      </Text>
+    </div>
+  );
+};

package/src/components/app/ReportMetadata/MetadataWithIcon.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent, h } from "preact";
+import notifications from "@/assets/svg/line-alerts-notification-box.svg";
+import refresh from "@/assets/svg/line-arrows-refresh-ccw-1.svg";
+import lineGeneralZap from "@/assets/svg/line-general-zap.svg";
+import { MetadataProps } from "@/components/app/ReportMetadata/MetadataItem";
+import { SvgIcon } from "@/components/commons/SvgIcon";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+const icons = {
+  flaky: lineGeneralZap.id,
+  retry: refresh.id,
+  new: notifications.id,
+};
+
+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/app/ReportMetadata/index.tsx

@@ -0,0 +1,46 @@
+import type { EnvironmentItem } from "@allurereport/core-api";
+import { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { MetadataList } from "@/components/app/Metadata";
+import { MetadataButton } from "@/components/app/MetadataButton";
+import { MetadataSummary } from "@/components/app/ReportMetadata/MetadataSummary";
+import { Loadable } from "@/components/commons/Loadable";
+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>
+  );
+};