@allurereport/web-awesome 3.2.0 → 3.3.0

package/src/components/Categories/SeverityTreeItem/styles.scss

@@ -0,0 +1,12 @@
+.tree-item-severity {
+  .tree-section-title {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tree-item-severity-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}

package/src/components/Categories/sticky.ts

@@ -0,0 +1,12 @@
+type StickyOverrides = Partial<Record<`--${string}`, string>>;
+
+export const createCategoriesStickyStyle = (depth: number, overrides: StickyOverrides = {}) =>
+  ({
+    "--categories-sticky-depth": `${depth}`,
+    "--tree-section-position": "sticky",
+    "--tree-section-top": `calc(${depth} * var(--categories-sticky-step))`,
+    "--tree-section-z": `${100 - depth}`,
+    "--tree-section-bg": "var(--bg-base-primary)",
+    "--tree-section-min-height": "var(--categories-sticky-step)",
+    ...overrides,
+  }) as Record<string, string>;

package/src/components/Header/index.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
 import { SectionPicker } from "@/components/SectionPicker";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
-import { testResultRoute } from "@/stores/router";
+import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { CiInfo } from "./CiInfo";
@@ -14,7 +14,9 @@ interface HeaderProps {
   className?: ClassValue;
 }
 
-const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const isTestResultRoute = computed(
+  () => testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId),
+);
 const testResult = computed(() => testResultStore.value?.data?.[currentTrId.value]);
 
 export const Header = ({ className }: HeaderProps) => {

package/src/components/MainReport/index.tsx

@@ -1,24 +1,36 @@
 import { Counter, Loadable } from "@allurereport/web-components";
 import clsx from "clsx";
+import { useEffect } from "preact/hooks";
 import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
 import { ReportBody } from "@/components/ReportBody";
+import { ReportCategories } from "@/components/ReportCategories";
 import { ReportGlobalAttachments } from "@/components/ReportGlobalAttachments";
 import { ReportGlobalErrors } from "@/components/ReportGlobalErrors";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
 import { reportStatsStore, useI18n } from "@/stores";
+import { categoriesStore } from "@/stores/categories";
 import { currentEnvironment } from "@/stores/env";
 import { globalsStore } from "@/stores/globals";
 import { isSplitMode } from "@/stores/layout";
 import { qualityGateStore } from "@/stores/qualityGate";
+import {
+  navigateToPlainTestResult,
+  navigateToRoot,
+  navigateToRootTabRoot,
+  navigateToRootTabTestResult,
+  rootTabRoute,
+} from "@/stores/router";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
 import { ReportQualityGateResults } from "../ReportQualityGateResults";
 import * as styles from "./styles.scss";
 
-enum ReportRootTab {
+export enum ReportRootTab {
   Results = "results",
   QualityGate = "qualityGate",
   GlobalAttachments = "globalAttachments",
   GlobalErrors = "globalErrors",
+  Categories = "categories",
 }
 
 const viewsByTab = {
@@ -31,6 +43,7 @@ const viewsByTab = {
   [ReportRootTab.GlobalAttachments]: () => <ReportGlobalAttachments />,
   [ReportRootTab.GlobalErrors]: () => <ReportGlobalErrors />,
   [ReportRootTab.QualityGate]: () => <ReportQualityGateResults />,
+  [ReportRootTab.Categories]: () => <ReportCategories />,
 };
 
 const MainReportContent = () => {
@@ -43,21 +56,104 @@ const MainReportContent = () => {
 
 const MainReport = () => {
   const { t } = useI18n("tabs");
+  const rootTabToReportTab: Record<string, ReportRootTab> = {
+    categories: ReportRootTab.Categories,
+    qualityGate: ReportRootTab.QualityGate,
+    globalAttachments: ReportRootTab.GlobalAttachments,
+    globalErrors: ReportRootTab.GlobalErrors,
+  };
+  const reportTabToRootTab: Partial<Record<ReportRootTab, string>> = {
+    [ReportRootTab.Categories]: "categories",
+    [ReportRootTab.QualityGate]: "qualityGate",
+    [ReportRootTab.GlobalAttachments]: "globalAttachments",
+    [ReportRootTab.GlobalErrors]: "globalErrors",
+  };
+  const initialTab = rootTabRoute.value.matches
+    ? (rootTabToReportTab[rootTabRoute.value.params.rootTab] ?? ReportRootTab.Results)
+    : ReportRootTab.Results;
+
+  const RootTab = (props: { id: ReportRootTab; children: any }) => {
+    const { id, children } = props;
+    const { currentTab, setCurrentTab } = useNavTabsContext();
+    const isCurrentTab = currentTab === id;
+
+    const handleClick = () => {
+      if (isCurrentTab) {
+        return;
+      }
+      setCurrentTab(id);
+      if (id === ReportRootTab.Results) {
+        if (currentTrId.value) {
+          navigateToPlainTestResult({ testResultId: currentTrId.value, tab: trCurrentTab.value });
+        } else {
+          navigateToRoot();
+        }
+        return;
+      }
+      const rootTab = reportTabToRootTab[id];
+      if (rootTab) {
+        if (currentTrId.value) {
+          navigateToRootTabTestResult({ rootTab, testResultId: currentTrId.value, tab: trCurrentTab.value });
+        } else {
+          navigateToRootTabRoot({ rootTab });
+        }
+      } else {
+        navigateToRoot();
+      }
+    };
+
+    return (
+      <NavTab id={id} onClick={handleClick} isCurrentTab={isCurrentTab}>
+        {children}
+      </NavTab>
+    );
+  };
+
+  // @ts-ignore
+  const RootTabRouteSync = () => {
+    const { currentTab, setCurrentTab } = useNavTabsContext();
+    const routeKey = rootTabRoute.value.matches ? (rootTabRoute.value.params.rootTab ?? "") : "";
+    useEffect(() => {
+      const routeMatches = rootTabRoute.value.matches;
+      const routeTab = routeMatches ? rootTabRoute.value.params.rootTab : undefined;
+      const mapped = routeMatches ? (rootTabToReportTab[routeTab] ?? ReportRootTab.Results) : ReportRootTab.Results;
+      if (currentTab !== mapped) {
+        setCurrentTab(mapped);
+      }
+    }, [currentTab, setCurrentTab, routeKey]);
+    return null;
+  };
 
   return (
     <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
       <ReportHeader />
       <div className={styles["main-report-tabs"]}>
-        <NavTabs initialTab={ReportRootTab.Results}>
+        <NavTabs initialTab={initialTab}>
+          <RootTabRouteSync />
           <NavTabsList>
             <Loadable
               source={reportStatsStore}
               renderData={(stats) => (
-                <NavTab id={ReportRootTab.Results}>
+                <RootTab id={ReportRootTab.Results}>
                   {t("results")} <Counter count={stats?.total ?? 0} />
-                </NavTab>
+                </RootTab>
               )}
             />
+            <Loadable
+              source={categoriesStore}
+              renderData={(categories) => {
+                if (!categories || !categories.roots?.length) {
+                  return null;
+                }
+                return (
+                  <>
+                    <RootTab id={ReportRootTab.Categories}>
+                      {t("categories")} <Counter count={categories.roots?.length} />
+                    </RootTab>
+                  </>
+                );
+              }}
+            />
             <Loadable
               source={qualityGateStore}
               renderData={(results) => {
@@ -66,13 +162,13 @@ const MainReport = () => {
                   : Object.values(results).flatMap((envResults) => envResults);
 
                 return (
-                  <NavTab id={ReportRootTab.QualityGate}>
+                  <RootTab id={ReportRootTab.QualityGate}>
                     {t("qualityGates")}{" "}
                     <Counter
                       status={currentEnvResults.length > 0 ? "failed" : undefined}
                       count={currentEnvResults.length}
                     />
-                  </NavTab>
+                  </RootTab>
                 );
               }}
             />
@@ -80,13 +176,13 @@ const MainReport = () => {
               source={globalsStore}
               renderData={({ attachments = [], errors = [] }) => (
                 <>
-                  <NavTab id={ReportRootTab.GlobalAttachments}>
+                  <RootTab id={ReportRootTab.GlobalAttachments}>
                     {t("globalAttachments")} <Counter count={attachments.length} />
-                  </NavTab>
-                  <NavTab id={ReportRootTab.GlobalErrors}>
+                  </RootTab>
+                  <RootTab id={ReportRootTab.GlobalErrors}>
                     {t("globalErrors")}{" "}
                     <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
-                  </NavTab>
+                  </RootTab>
                 </>
               )}
             />

package/src/components/ReportBody/styles.scss

@@ -8,7 +8,7 @@
   top: 0;
   left: 0;
   background: var(--bg-base-primary);
-  z-index: 1;
+  z-index: 10;
 }
 
 .headerRow {

package/src/components/ReportCategories/index.tsx

@@ -0,0 +1,26 @@
+import { Loadable, PageLoader } from "@allurereport/web-components";
+import { CategoriesTree } from "@/components/Categories/CategoriesTree";
+import { useI18n } from "@/stores";
+import { categoriesStore } from "@/stores/categories";
+import * as styles from "./styles.scss";
+
+export const ReportCategories = () => {
+  const { t } = useI18n("empty");
+
+  return (
+    <Loadable
+      source={categoriesStore}
+      renderLoader={() => (
+        <div className={styles["report-categories-loader"]}>
+          <PageLoader />
+        </div>
+      )}
+      renderData={(store) => {
+        if (!categoriesStore.value.data?.roots?.length) {
+          return <div className={styles["report-categories-results-empty"]}>{t("no-categories-results")}</div>;
+        }
+        return <CategoriesTree store={store} />;
+      }}
+    />
+  );
+};

package/src/components/ReportCategories/styles.scss

@@ -0,0 +1,55 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-categories-results {
+  padding: 20px 0;
+
+  & > li + li {
+    margin-top: 12px;
+  }
+}
+
+.report-categories-results-empty {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.report-categories-loader {
+  display: flex;
+  padding: 48px 0;
+  width: 100%;
+  justify-content: center;
+}
+
+.report-categories-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 0 8px;
+
+  b {
+    font-weight: 700;
+  }
+}
+
+.report-categories-result-icon {
+  flex: 0 0 auto;
+  margin-top: 3px;
+  color: var(--bg-support-capella);
+}
+
+.report-categories-result-content {
+  flex: 1 1 auto;
+
+  & > * + * {
+    margin-top: 4px;
+  }
+}
+
+.report-categories-result-error {
+  margin-top: 8px;
+}
+.tree-item-category {
+  font-size: 24px;
+  margin-bottom: 16px;
+}

package/src/components/ReportFilters/CategoriesFilter.tsx

@@ -0,0 +1,41 @@
+import { computed } from "@preact/signals";
+import { useI18n } from "@/stores";
+import { treeCategories } from "@/stores/treeFilters/store";
+import type { AwesomeArrayFieldFilter } from "../../stores/treeFilters/model";
+import { ArrayFieldFilter } from "./BaseFilters";
+
+const options = computed(() => {
+  return treeCategories.value.map((category) => ({ key: category, label: category }));
+});
+
+export const CategoriesFilter = (props: {
+  filter: AwesomeArrayFieldFilter;
+  onChange: (filter: AwesomeArrayFieldFilter) => void;
+}) => {
+  const { filter, onChange } = props;
+  const { t } = useI18n("filters");
+
+  if (options.value.length === 0) {
+    return null;
+  }
+
+  return (
+    <ArrayFieldFilter
+      filter={filter}
+      onChange={onChange}
+      options={options.value}
+      label={t("categories")}
+      description={t("description.categories")}
+      counter
+      onClear={() =>
+        onChange({
+          ...filter,
+          value: {
+            ...filter.value,
+            value: [],
+          },
+        })
+      }
+    />
+  );
+};

package/src/components/ReportFilters/index.tsx

@@ -1,8 +1,15 @@
 import { For } from "@preact/signals/utils";
 import type { AwesomeFilter } from "@/stores/treeFilters/model";
 import { setTreeFilter, treeQuickFilters } from "@/stores/treeFilters/store";
-import { isFlakyFilter, isRetryFilter, isTagFilter, isTransitionFilter } from "@/stores/treeFilters/utils";
+import {
+  isCategoryFilter,
+  isFlakyFilter,
+  isRetryFilter,
+  isTagFilter,
+  isTransitionFilter,
+} from "@/stores/treeFilters/utils";
 import { BooleanFieldFilter } from "./BaseFilters";
+import { CategoriesFilter } from "./CategoriesFilter";
 import { RetryFlakyFilter } from "./RetryFlaky";
 import { TagsFilter } from "./TagsFilter";
 import { TransitionFilter } from "./TransitionFilter";
@@ -28,6 +35,10 @@ const Filter = (props: { filter: AwesomeFilter; onChange: (filter: AwesomeFilter
     return <TagsFilter filter={filter} onChange={onChange} />;
   }
 
+  if (isCategoryFilter(filter)) {
+    return <CategoriesFilter filter={filter} onChange={onChange} />;
+  }
+
   return null;
 };
 

package/src/components/SplitLayout/index.tsx

@@ -6,7 +6,7 @@ import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
-import { testResultRoute } from "@/stores/router";
+import { rootTabRoute, testResultRoute } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
@@ -30,7 +30,9 @@ const Loader = () => {
   );
 };
 
-const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const isTestResultRoute = computed(
+  () => testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId),
+);
 
 export const SplitLayout = () => {
   const testResultId = currentTrId.value;

package/src/components/SplitLayout/styles.scss

@@ -22,6 +22,7 @@
   overflow: hidden;
   overflow-y: scroll;
   position: relative;
+  min-height: 100%;
 }
 
 .test-results {

package/src/components/TestResult/TrInfo/index.tsx

@@ -21,10 +21,12 @@ export type TrInfoProps = {
 };
 
 export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
-  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
+  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop, categories } =
+    testResult ?? {};
   const formattedDuration = formatDuration(duration as number);
   const fullDate = stop && timestampToDate(stop);
   const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
+  const categoryName = categories?.[0]?.name;
   const { t } = useI18n("ui");
   const statuses = Object.entries({ flaky, muted, known }).filter(([, value]) => value);
 
@@ -41,6 +43,11 @@ export const TrInfo: FunctionalComponent<TrInfoProps> = ({ testResult }) => {
           {Boolean(history?.length) && <TrPrevStatuses history={history} />}
           <TrSeverity severity={severity} />
           {Boolean(statuses.length) && <TrInfoStatuses statuses={statuses} />}
+          {categoryName && (
+            <Text tag={"div"} size={"s"} className={styles["test-result-category"]}>
+              {t("category")}: {categoryName}
+            </Text>
+          )}
           <TooltipWrapper tooltipText={fullDate}>
             <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
               {formattedDuration}

package/src/components/TestResult/TrInfo/styles.scss

@@ -41,6 +41,10 @@
   color: var(--on-text-secondary);
 }
 
+.test-result-category {
+  color: var(--on-text-secondary);
+}
+
 .test-result-tabs {
   border-bottom: 1px solid var(--on-border-primary);
 }

package/src/components/TestResult/TrSeverity/index.tsx

@@ -10,17 +10,26 @@ const icons: Record<string, string> = {
   normal: allureIcons.lineGeneralEqual,
   minor: allureIcons.lineArrowsChevronDown,
   trivial: allureIcons.lineArrowsChevronDownDouble,
+  none: allureIcons.lineGeneralXClose,
 };
 
-export const TrSeverity = ({ severity = "normal" }: { severity?: string }) => {
+export const TrSeverity = ({
+  severity = "normal",
+  text = "",
+  size = "s",
+}: {
+  severity?: string;
+  text?: string;
+  size?: "s" | "m";
+}) => {
   const { t } = useI18n("severity");
   const statusClass = clsx(styles[`severity-${severity}`]);
 
   return (
     <div className={styles["test-result-severity"]}>
-      <SvgIcon className={statusClass} id={icons[severity]} />
-      <Text size={"s"} bold className={styles["test-result-severity-text"]}>
-        {capitalize(t(severity))}
+      <SvgIcon className={statusClass} id={icons[severity]} size={size} />
+      <Text size={size} bold className={styles["test-result-severity-text"]}>
+        {text || capitalize(t(severity))}
       </Text>
     </div>
   );

package/src/components/TestResult/TrSeverity/styles.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  color: var(--on-text-secondary);
 }
 
 .test-result-severity-text {

package/src/components/TestResult/TrTabs/index.tsx

@@ -15,6 +15,11 @@ export const TrTab = (props: { id: string; children: ComponentChildren }) => {
       return;
     }
 
+    if (id === "overview") {
+      navigateToTestResultTab({ testResultId: currentTrId.value, tab: "" });
+      return;
+    }
+
     navigateToTestResultTab({ testResultId: currentTrId.value, tab: id });
   };
 

package/src/index.tsx

@@ -11,6 +11,7 @@ import { Header } from "@/components/Header";
 import { ModalComponent } from "@/components/Modal";
 import { SectionSwitcher } from "@/components/SectionSwitcher";
 import { fetchEnvStats, fetchReportStats, getLocale, waitForI18next } from "@/stores";
+import { fetchCategoriesData } from "@/stores/categories";
 import { fetchPieChartData } from "@/stores/chart";
 import { currentEnvironment, environmentsStore, fetchEnvironments } from "@/stores/env";
 import { fetchEnvInfo } from "@/stores/envInfo";
@@ -20,7 +21,7 @@ import { fetchTestResult, fetchTestResultNav } from "@/stores/testResults";
 import { fetchEnvTreesData } from "@/stores/tree";
 import { isMac } from "@/utils/isMac";
 import { fetchQualityGateResults } from "./stores/qualityGate";
-import { testResultRoute } from "./stores/router";
+import { rootTabRoute, testResultRoute } from "./stores/router";
 import { currentSection } from "./stores/sections";
 import { currentTrId } from "./stores/testResult";
 import { fetchTreeFiltersData } from "./stores/treeFilters/actions";
@@ -36,7 +37,9 @@ const Loader = () => {
   );
 };
 
-const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const isTestResultRoute = computed(
+  () => testResultRoute.value.matches || Boolean(rootTabRoute.value.params.testResultId),
+);
 
 const App = () => {
   const className = styles[`layout-${currentSection.value !== "default" ? currentSection.value : layoutStore.value}`];
@@ -51,6 +54,7 @@ const App = () => {
       fetchEnvInfo,
       fetchGlobals,
       fetchQualityGateResults,
+      fetchCategoriesData,
     ];
 
     if (globalThis) {