@allurereport/web-awesome 3.0.0-beta.10

package/src/components/ReportBody/Filters.tsx

@@ -0,0 +1,90 @@
+import { Button, Menu, Toggle, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const Filters = () => {
+  const { t } = useI18n("filters");
+  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
+  const hasFilter = flaky || retry || isNew;
+
+  return (
+    <Menu
+      menuTrigger={({ isOpened, onClick }) => (
+        <div className={hasFilter && styles.filtersBtnWithFilters}>
+          <Button
+            icon={allureIcons.lineGeneralSettings1}
+            text={t("more-filters")}
+            size="m"
+            style="outline"
+            isActive={isOpened}
+            data-testid="filters-button"
+            onClick={onClick}
+          />
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("flaky") })}
+          onClick={() => {
+            setTreeFilter("flaky", !flaky);
+          }}
+          leadingIcon={allureIcons.lineGeneralZap}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={flaky}
+                label={t("enable-filter", { filter: t("flaky") })}
+                data-testid="flaky-filter"
+                onChange={(value) => setTreeFilter("flaky", value)}
+              />
+            </div>
+          }
+        >
+          {t("flaky")}
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("retry") })}
+          onClick={() => setTreeFilter("retry", !retry)}
+          leadingIcon={allureIcons.lineArrowsRefreshCcw1}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={retry}
+                label={t("enable-filter", { filter: t("retry") })}
+                data-testid="retry-filter"
+                onChange={(value) => setTreeFilter("retry", value)}
+              />
+            </div>
+          }
+        >
+          {t("retry")}
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick={false}
+          ariaLabel={t("enable-filter", { filter: t("new") })}
+          onClick={() => setTreeFilter("new", !isNew)}
+          leadingIcon={allureIcons.lineAlertsNotificationBox}
+          rightSlot={
+            <div className={styles.filterToggle}>
+              <Toggle
+                focusable={false}
+                value={isNew}
+                label={t("enable-filter", { filter: t("new") })}
+                data-testid="new-filter"
+                onChange={(value) => setTreeFilter("new", value)}
+              />
+            </div>
+          }
+        >
+          {t("new")}
+        </Menu.Item>
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/ReportBody/HeaderActions.tsx

@@ -0,0 +1,21 @@
+import { SearchBox } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
+import { Filters } from "./Filters";
+import * as styles from "./styles.scss";
+
+const Search = () => {
+  const { query } = treeFiltersStore.value;
+  const { t } = useI18n("search");
+
+  return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setTreeQuery} />;
+};
+
+export const HeaderActions = () => {
+  return (
+    <div className={styles.headerActions}>
+      <Search />
+      <Filters />
+    </div>
+  );
+};

package/src/components/ReportBody/SortBy.tsx

@@ -0,0 +1,132 @@
+import { DropdownButton, allureIcons } from "@allurereport/web-components";
+import { Link } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { SvgIcon } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { ComponentChildren } from "preact";
+import { useI18n } from "@/stores/locale";
+import { setTreeDirection, setTreeSortBy, treeFiltersStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
+  return <div className={styles.sortByBtnWrap}>{children}</div>;
+};
+
+export const SortBy = () => {
+  const { t: sortByLocale } = useI18n("sort-by");
+  const { t: sortByValuesLocale } = useI18n("sort-by.values");
+  const { t: sortByDirectionsLocale } = useI18n("sort-by.directions");
+  const { sortBy, direction } = treeFiltersStore.value;
+
+  const displayedSortByValue = sortByValuesLocale(sortBy);
+  const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
+
+  return (
+    <div>
+      <Text type="paragraph" size="m" className={styles.sortByText}>
+        {sortByLocale("sort-by-text")}
+        &nbsp;
+        <Menu
+          size="l"
+          menuTriggerWrapper="span"
+          menuTrigger={({ onClick, isOpened }) => (
+            <Text type="paragraph" size="m">
+              <Link onClick={onClick}>
+                {displayedSortByValue} {displayedDirection}
+                <SvgIcon
+                  size="s"
+                  id={allureIcons.lineArrowsChevronDown}
+                  className={clsx(styles.sortByIcon, isOpened && styles.sortByIconReversed)}
+                />
+              </Link>
+            </Text>
+          )}
+        >
+          <Menu.Section>
+            <Menu
+              size="s"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={allureIcons.lineArrowsSwitchVertical1}
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedSortByValue}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("sort-by-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("order")} isChecked={sortBy === "order"}>
+                  {sortByValuesLocale("order")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("duration")} isChecked={sortBy === "duration"}>
+                  {sortByValuesLocale("duration")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("status")} isChecked={sortBy === "status"}>
+                  {sortByValuesLocale("status")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                  {sortByValuesLocale("alphabet")}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+            <Menu
+              size="m"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={
+                    direction === "asc" ? allureIcons.lineArrowsSortLineAsc : allureIcons.lineArrowsSortLineDesc
+                  }
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedDirection}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("direction-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setTreeDirection("asc")}
+                  leadingIcon={allureIcons.lineArrowsSortLineAsc}
+                  isChecked={direction === "asc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-asc`)}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setTreeDirection("desc")}
+                  leadingIcon={allureIcons.lineArrowsSortLineDesc}
+                  isChecked={direction === "desc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-desc`)}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+          </Menu.Section>
+        </Menu>
+      </Text>
+    </div>
+  );
+};

package/src/components/ReportBody/context.tsx

@@ -0,0 +1,106 @@
+import { type ComponentChildren, createContext } from "preact";
+import { useCallback, useContext, useReducer } from "preact/hooks";
+
+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/ReportBody/index.tsx

@@ -0,0 +1,72 @@
+import { statusesList } from "@allurereport/core-api";
+import { Counter, Loadable } from "@allurereport/web-components";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { treeFiltersStore } from "@/stores/tree";
+import { capitalize } from "@/utils/capitalize";
+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 = () => {
+  const initialTab = treeFiltersStore.value.status;
+  return (
+    <ReportContentProvider>
+      <section>
+        <Tabs initialTab={initialTab}>
+          <Header />
+          <Body />
+        </Tabs>
+      </section>
+    </ReportContentProvider>
+  );
+};

package/src/components/ReportBody/styles.scss

@@ -0,0 +1,69 @@
+.header {
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: sticky;
+  left: 0;
+  top: 0;
+  left: 0;
+  background: var(--bg-base-primary);
+  z-index: 1;
+}
+
+.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/ReportHeader/ReportHeaderLabelList.tsx

@@ -0,0 +1,12 @@
+import { Label } from "@allurereport/web-components";
+import * as styles from "@/components/ReportHeader/styles.scss";
+
+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/ReportHeader/ReportHeaderLogo.tsx

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

package/src/components/ReportHeader/ReportHeaderPie.tsx

@@ -0,0 +1,14 @@
+import { Loadable } from "@allurereport/web-components";
+import { SuccessRatePieChart } from "@allurereport/web-components";
+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/ReportHeader/index.tsx

@@ -0,0 +1,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Heading, Text } from "@allurereport/web-components";
+import type { AwesomeReportOptions } from "types";
+import { ReportHeaderLogo } from "@/components/ReportHeader/ReportHeaderLogo";
+import { ReportHeaderPie } from "@/components/ReportHeader/ReportHeaderPie";
+import { currentLocaleIso } from "@/stores";
+import * as styles from "./styles.scss";
+
+export const ReportHeader = () => {
+  const { reportName, createdAt } = getReportOptions<AwesomeReportOptions>() ?? {};
+  const formattedCreatedAt = new Date(createdAt as number).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"]} data-testid="report-title">
+            {reportName}
+          </Heading>
+          <Text type="paragraph" size="m" className={styles["report-date"]}>
+            {formattedCreatedAt}
+          </Text>
+        </div>
+      </div>
+      <ReportHeaderPie />
+    </div>
+  );
+};

package/src/components/ReportHeader/styles.scss

@@ -0,0 +1,51 @@
+.report-header {
+  display: flex;
+  column-gap: 12px;
+  justify-content: space-between;
+  padding: 24px;
+  align-items: flex-start;
+  background: var(--bg-base-primary);
+  border-radius: 8px;
+}
+
+.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/ReportLogo/index.tsx

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

package/src/components/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/ReportLogoFull/index.tsx

@@ -0,0 +1,20 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+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={allureIcons.reportLogo} size="m" inline className={styles.logo} />
+      <span>Allure Report</span>
+    </Text>
+  );
+};

package/src/components/ReportLogoFull/styles.scss

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