@allurereport/web-awesome 3.1.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/Charts/index.tsx

@@ -6,13 +6,13 @@ import {
   CurrentStatusChartWidget,
   DurationDynamicsChartWidget,
   DurationsChartWidget,
-  FBSUAgePyramidChartWidget,
   Grid,
   GridItem,
   HeatMapWidget,
   Loadable,
   PageLoader,
   StabilityDistributionWidget,
+  StatusAgePyramidChartWidget,
   StatusDynamicsChartWidget,
   StatusTransitionsChartWidget,
   TestBaseGrowthDynamicsChartWidget,
@@ -113,15 +113,15 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.FBSUAgePyramid: {
-      const title = chartData.title ?? t("fbsuAgePyramid.title");
+    case ChartType.StatusAgePyramid: {
+      const title = chartData.title ?? t("statusAgePyramid.title");
 
       return (
-        <FBSUAgePyramidChartWidget
+        <StatusAgePyramidChartWidget
           title={title}
           data={chartData.data}
           statuses={chartData.statuses}
-          i18n={(key, props = {}) => t(`fbsuAgePyramid.${key}`, props)}
+          i18n={(key, props = {}) => t(`statusAgePyramid.${key}`, props)}
         />
       );
     }

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 } from "@/stores";
-import { useI18n } from "@/stores";
+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,55 +56,143 @@ 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}>
-            <NavTabsList>
-              <Loadable
-                source={reportStatsStore}
-                renderData={(stats) => (
-                  <NavTab id={ReportRootTab.Results}>
-                    {t("results")} <Counter count={stats?.total ?? 0} />
-                  </NavTab>
-                )}
-              />
-              <Loadable
-                source={qualityGateStore}
-                renderData={(results) => (
+    <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
+      <ReportHeader />
+      <div className={styles["main-report-tabs"]}>
+        <NavTabs initialTab={initialTab}>
+          <RootTabRouteSync />
+          <NavTabsList>
+            <Loadable
+              source={reportStatsStore}
+              renderData={(stats) => (
+                <RootTab id={ReportRootTab.Results}>
+                  {t("results")} <Counter count={stats?.total ?? 0} />
+                </RootTab>
+              )}
+            />
+            <Loadable
+              source={categoriesStore}
+              renderData={(categories) => {
+                if (!categories || !categories.roots?.length) {
+                  return null;
+                }
+                return (
                   <>
-                    <NavTab id={ReportRootTab.QualityGate}>
-                      {t("qualityGates")}{" "}
-                      <Counter status={results.length > 0 ? "failed" : undefined} count={results.length} />
-                    </NavTab>
+                    <RootTab id={ReportRootTab.Categories}>
+                      {t("categories")} <Counter count={categories.roots?.length} />
+                    </RootTab>
                   </>
-                )}
-              />
-              <Loadable
-                source={globalsStore}
-                renderData={({ attachments = [], errors = [] }) => (
-                  <>
-                    <NavTab id={ReportRootTab.GlobalAttachments}>
-                      {t("globalAttachments")} <Counter count={attachments.length} />
-                    </NavTab>
-                    <NavTab id={ReportRootTab.GlobalErrors}>
-                      {t("globalErrors")}{" "}
-                      <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
-                    </NavTab>
-                  </>
-                )}
-              />
-            </NavTabsList>
-            <div className={styles["main-report-tabs-content"]}>
-              <MainReportContent />
-            </div>
-          </NavTabs>
-        </div>
+                );
+              }}
+            />
+            <Loadable
+              source={qualityGateStore}
+              renderData={(results) => {
+                const currentEnvResults = currentEnvironment.value
+                  ? (results[currentEnvironment.value] ?? [])
+                  : Object.values(results).flatMap((envResults) => envResults);
+
+                return (
+                  <RootTab id={ReportRootTab.QualityGate}>
+                    {t("qualityGates")}{" "}
+                    <Counter
+                      status={currentEnvResults.length > 0 ? "failed" : undefined}
+                      count={currentEnvResults.length}
+                    />
+                  </RootTab>
+                );
+              }}
+            />
+            <Loadable
+              source={globalsStore}
+              renderData={({ attachments = [], errors = [] }) => (
+                <>
+                  <RootTab id={ReportRootTab.GlobalAttachments}>
+                    {t("globalAttachments")} <Counter count={attachments.length} />
+                  </RootTab>
+                  <RootTab id={ReportRootTab.GlobalErrors}>
+                    {t("globalErrors")}{" "}
+                    <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
+                  </RootTab>
+                </>
+              )}
+            />
+          </NavTabsList>
+          <div className={styles["main-report-tabs-content"]}>
+            <MainReportContent />
+          </div>
+        </NavTabs>
       </div>
-    </>
+    </div>
   );
 };
 export default MainReport;

package/src/components/Metadata/index.tsx

@@ -7,6 +7,7 @@ import type { MetadataProps } from "@/components/ReportMetadata";
 import { useI18n } from "@/stores/locale";
 import { getTagsFilterUrl } from "@/stores/treeFilters/utils";
 import { copyToClipboard } from "@/utils/copyToClipboard";
+import { parseOwnerAddress } from "@/utils/ownerAddress";
 import * as styles from "./styles.scss";
 
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
@@ -65,6 +66,49 @@ const OpenFilterUrlButton: FunctionalComponent<{ url: string }> = ({ url }) => {
   );
 };
 
+const MAX_URL_LENGTH = 25;
+
+const OwnerAction = (props: { ownerValue: string }) => {
+  const { t } = useI18n("ui");
+  const { ownerValue } = props;
+  const ownerAddress = parseOwnerAddress(ownerValue);
+
+  if (ownerAddress.type === "none") {
+    return null;
+  }
+
+  // Don't need to show copy email button here because
+  // we already have a button to copy the whole owner value
+  if (ownerAddress.type === "email" && ownerAddress.email === ownerValue) {
+    return null;
+  }
+
+  if (ownerAddress.type === "email") {
+    return (
+      <Button
+        icon={allureIcons.lineGeneralCopy3}
+        style="outline"
+        text={t("copy-email")}
+        onClick={() => copyToClipboard(ownerAddress.email)}
+      />
+    );
+  }
+
+  if (ownerAddress.type === "url") {
+    const truncatedUrl =
+      ownerAddress.url.length > MAX_URL_LENGTH ? `${ownerAddress.url.slice(0, MAX_URL_LENGTH)}...` : ownerAddress.url;
+    return (
+      <ButtonLink
+        href={ownerAddress.url}
+        target="_blank"
+        style="ghost"
+        icon={allureIcons.lineGeneralLinkExternal}
+        text={truncatedUrl}
+      />
+    );
+  }
+};
+
 const MetadataTooltip = (props: { value: string; name: string }) => {
   const { value, name } = props;
   const { t } = useI18n("ui");
@@ -75,6 +119,7 @@ const MetadataTooltip = (props: { value: string; name: string }) => {
         <Text>{value}</Text>
       </div>
       {name === "tag" && <OpenFilterUrlButton url={getTagsFilterUrl([value])} />}
+      {name === "owner" && <OwnerAction ownerValue={value} />}
       <Button
         style={"outline"}
         icon={allureIcons.lineGeneralCopy3}
@@ -85,11 +130,40 @@ const MetadataTooltip = (props: { value: string; name: string }) => {
   );
 };
 
+const MetaDataOwnerLabel: FunctionalComponent<{
+  value: string;
+  size?: "s" | "m";
+}> = ({ value, size = "s" }) => {
+  const ownerAddress = parseOwnerAddress(value);
+  const displayName = ownerAddress.displayName ?? value;
+
+  return (
+    <Menu
+      size="xl"
+      menuTrigger={({ onClick }) => (
+        <div className={styles["report-metadata-keyvalue-wrapper"]}>
+          <Text type={"ui"} size={size} onClick={onClick} bold className={styles["report-metadata-keyvalue-value"]}>
+            {displayName}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} name={"owner"} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
 const MetaDataKeyLabel: FunctionalComponent<{
   name: string;
   size?: "s" | "m";
   value: string;
 }> = ({ name, size = "s", value }) => {
+  if (name === "owner") {
+    return <MetaDataOwnerLabel value={value} size={size} />;
+  }
+
   return (
     <Menu
       size="xl"
@@ -132,7 +206,7 @@ const MetadataKeyValue: FunctionalComponent<{
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value} name={title} />
+          <MetaDataKeyLabel value={value ?? ""} name={title} />
         </div>
       )}
     </div>

package/src/components/Metadata/styles.scss

@@ -92,6 +92,16 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
+
+  &:is(a) {
+    color: inherit;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .report-metadata-list {

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;
 };