@allurereport/web-classic 3.0.0-beta.10

package/src/components/Categories/CategoriesList.tsx

@@ -0,0 +1,67 @@
+import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { AwesomeStatus } from "types";
+import Tree from "@/components/Tree/Tree";
+import {
+  categoriesStore,
+  clearCategoriesFilters,
+  filteredCategories,
+  noTests,
+  noTestsFound,
+  setCategoriesStatus,
+} from "@/stores/categories";
+import { useI18n } from "@/stores/locale";
+import { currentTab } from "@/stores/tabs";
+import * as styles from "./styles.scss";
+
+export const CategoriesList = () => {
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    setCategoriesStatus(currentTab.value as AwesomeStatus);
+  }, [currentTab.value]);
+
+  return (
+    <Loadable
+      source={categoriesStore}
+      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={() => clearCategoriesFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree tree={filteredCategories.value} statusFilter={currentTab.value as AwesomeStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Categories/index.tsx

@@ -0,0 +1,60 @@
+import { Heading, Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/compat";
+import { CategoriesList } from "@/components/Categories/CategoriesList";
+import { HeaderActions } from "@/components/HeaderActions/HeaderActions";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { useI18n } from "@/stores";
+import { fetchCategoriesData } from "@/stores/categories";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+const Categories = () => {
+  const { params } = route.value;
+  const { testResultId } = params;
+
+  useEffect(() => {
+    fetchCategoriesData();
+  }, []);
+
+  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 CategoriesSide = () => {
+    const { t } = useI18n("nav");
+    return (
+      <div className={styles.suites}>
+        <Heading size={"s"} className={styles["suites-title"]}>
+          {t("categories")}
+        </Heading>
+
+        <HeaderActions />
+        <CategoriesList />
+      </div>
+    );
+  };
+
+  return <SideBySide left={<CategoriesSide />} right={testResult} />;
+};
+
+export default Categories;

package/src/components/Categories/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/Footer/FooterLogo.tsx

@@ -0,0 +1,16 @@
+import { Text } from "@allurereport/web-components";
+import { ReportLogoFull } from "../ReportLogoFull";
+import * as styles from "./styles.scss";
+
+export const FooterLogo = () => {
+  return (
+    <div className={styles["footer-logo"]}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
+        <Text type="paragraph" size="m" className={styles["footer-logo"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </div>
+  );
+};

package/src/components/Footer/FooterVersion.tsx

@@ -0,0 +1,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@allurereport/web-components";
+import { useEffect, useState } from "preact/hooks";
+import type { AwesomeReportOptions } from "types";
+import { currentLocaleIso } from "@/stores";
+import * as styles from "./styles.scss";
+
+export const FooterVersion = () => {
+  const [createdAt, setCreatedAt] = useState<number | null>(null);
+
+  useEffect(() => {
+    const reportOptions = getReportOptions<AwesomeReportOptions>();
+    if (reportOptions?.createdAt) {
+      setCreatedAt(Number(reportOptions.createdAt));
+    }
+  }, []);
+
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+
+  return (
+    <Text type="paragraph" size="m" className={styles.version}>
+      {formattedCreatedAt}
+      <span> Ver: 3.0.0</span>
+    </Text>
+  );
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/Footer/FooterLogo";
+import { FooterVersion } from "@/components/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

package/src/components/Footer/styles.scss

@@ -0,0 +1,14 @@
+.footer-logo {
+  color: var(--on-text-secondary);
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}

package/src/components/Graphs/index.tsx

@@ -0,0 +1,2 @@
+const Overview = () => <div>Overview</div>;
+export default Overview;

package/src/components/Header/index.tsx

@@ -0,0 +1,14 @@
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import * as styles from "./styles.scss";
+
+export const Header = () => {
+  return (
+    <div className={styles.above}>
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

package/src/components/Header/styles.scss

@@ -0,0 +1,26 @@
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.logoWrapper {
+  margin-right: auto;
+  color: var(--on-text-secondary);
+}
+
+.logo {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+  top: -2px;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}

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

@@ -0,0 +1,59 @@
+import { statusesList } from "@allurereport/core-api";
+import { Counter, Loadable, SearchBox } from "@allurereport/web-components";
+import { SortBy } from "@/components/HeaderActions/SortBy";
+import { Tab } from "@/components/Tabs";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
+import { capitalize } from "@/utils/capitalize";
+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 = () => {
+  const { t } = useI18n("statuses");
+
+  const ALL_TAB = "total";
+
+  return (
+    <div className={styles.headerActions}>
+      <div className={styles["header-search"]}>
+        <Search />
+        <Filters />
+      </div>
+      <div className={styles["header-filters"]}>
+        <div className={styles["header-tabs"]}>
+          <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}
+                </>
+              );
+            }}
+          />
+        </div>
+        <SortBy />
+      </div>
+    </div>
+  );
+};