@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/components/Packages/PackagesList.tsx

@@ -0,0 +1,67 @@
+import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { ClassicStatus } from "types";
+import Tree from "@/components/Tree/Tree";
+import { useI18n } from "@/stores/locale";
+import {
+  clearPackagesFilters,
+  filteredPackages,
+  noTests,
+  noTestsFound,
+  packagesStore,
+  setPackagesStatus,
+} from "@/stores/packages";
+import { currentTab } from "@/stores/tabs";
+import * as styles from "./styles.scss";
+
+export const PackagesList = () => {
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    setPackagesStatus(currentTab.value as ClassicStatus);
+  }, [currentTab.value]);
+
+  return (
+    <Loadable
+      source={packagesStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (noTests.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearPackagesFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree tree={filteredPackages.value} statusFilter={currentTab.value as ClassicStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Packages/index.tsx

@@ -0,0 +1,59 @@
+import { Heading, Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/compat";
+import { HeaderActions } from "@/components/HeaderActions/HeaderActions";
+import { PackagesList } from "@/components/Packages/PackagesList";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { useI18n } from "@/stores";
+import { fetchPackagesData } from "@/stores/packages";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+const Packages = () => {
+  const { testResultId } = route.value.params;
+
+  useEffect(() => {
+    fetchPackagesData();
+  }, []);
+
+  useEffect(() => {
+    if (testResultId) {
+      fetchTestResult(testResultId);
+    }
+  }, [testResultId]);
+
+  const testResult = (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderError={() => <div />}
+      renderData={(testResultItem) => (
+        <>
+          <div className={styles.wrapper} key={testResultItem?.id}>
+            <TestResult testResult={testResultItem} />
+          </div>
+        </>
+      )}
+    />
+  );
+
+  const PackagesSide = () => {
+    const { t } = useI18n("nav");
+    return (
+      <div className={styles.suites}>
+        <Heading size={"s"} className={styles["suites-title"]}>
+          {t("packages")}
+        </Heading>
+
+        <HeaderActions />
+        <PackagesList />
+      </div>
+    );
+  };
+
+  return <SideBySide left={<PackagesSide />} right={testResult} />;
+};
+
+export default Packages;

package/src/components/Packages/styles.scss

@@ -0,0 +1,196 @@
+.suites {
+  padding: 8px;
+}
+.suites-title {
+  display: flex;
+  margin-bottom: 24px;
+}
+.wrapper {
+  display: flex;
+}
+
+.tree {
+  position: relative;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-list {
+  min-height: 128px;
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.tree-header-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.tree-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.tree-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+}
+
+.tree-count {
+  display: flex;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 6px 6px;
+  transition: background-color 300ms;
+  gap: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+.tree-item-marked {
+  background: var(--bg-base-secondary);
+}
+
+.item-title {
+  display: flex;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+}
+
+.test-count {
+  display: flex;
+  margin-left: auto;
+}
+
+.tree-content:not(.root) {
+  display: block;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-icon {
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.tree-header-bar {
+  display: inline-flex;
+  font-family: var(--font-family);
+  max-width: 140px;
+  min-width: 46px;
+  border-radius: 4px;
+  height: 12px;
+  background: var(--on-text-hint);
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: var(--font-weight-extra-bold);
+  line-height: 12px;
+  overflow: hidden;
+}
+
+.tree-header-bar-item {
+  display: flex;
+  min-width: 16px;
+  justify-content: center;
+  text-align: center;
+  padding: 0 6px;
+  flex-grow: 1;
+
+  &.passed {
+    background-color: var(--bg-support-castor);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.failed {
+    background-color: var(--bg-support-capella);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.broken {
+    background-color: var(--bg-support-atlas);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.skipped {
+    background-color: var(--bg-support-rau);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.unknown {
+    background-color: var(--bg-support-skat);
+    color: var(--constant-on-text-primary);
+  }
+}
+
+.tree-empty-results {
+  padding: 44px 24px;
+  text-align: center;
+}
+
+.tree-empty-results-title {
+  color: var(--on-text-secondary);
+}
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+  width: 24px;
+}

package/src/components/ReportBody/Filters.tsx

@@ -0,0 +1,92 @@
+import { Button, allureIcons } from "@allurereport/web-components";
+import { Menu } from "@allurereport/web-components";
+import { Toggle } 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>
+  );
+};