@allurereport/web-awesome 3.0.1 → 3.1.0

package/src/components/ReportFilters/BaseFilters.tsx

@@ -0,0 +1,345 @@
+import {
+  type ArrayField,
+  type BooleanField,
+  type FieldFilter,
+  type FieldFilterGroup,
+  type LogicalOperator,
+  MAX_ARRAY_FIELD_VALUES,
+} from "@allurereport/web-commons";
+import {
+  Button,
+  Counter,
+  DropdownButton,
+  IconButton,
+  Menu,
+  Text,
+  Tooltip,
+  allureIcons,
+  useTooltip,
+} from "@allurereport/web-components";
+import { createPortal } from "preact/compat";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+const FilterBtn = (props: {
+  icon: string;
+  text: string;
+  isActive: boolean;
+  counter?: number;
+  onClick: () => void;
+  onClear?: () => void;
+  isDropdown?: boolean;
+  isExpanded?: boolean;
+  error?: string;
+  testId?: string;
+  description?: string;
+  disabled?: boolean;
+}) => {
+  const {
+    icon,
+    text,
+    isActive,
+    counter,
+    onClick,
+    onClear,
+    isDropdown,
+    isExpanded,
+    error,
+    testId,
+    description,
+    disabled,
+  } = props;
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  useTooltip({ isVisible: isTooltipVisible, triggerRef, tooltipRef, placement: "top" });
+
+  const hasError = error?.length > 0;
+  const hasDescription = description?.length > 0;
+
+  useEffect(() => {
+    if (!hasError && !hasDescription) {
+      setIsTooltipVisible(false);
+    }
+  }, [hasError, hasDescription]);
+
+  const handleMouseOver = useCallback(() => {
+    if (hasError || hasDescription) {
+      setIsTooltipVisible(true);
+    }
+  }, [hasError, hasDescription]);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsTooltipVisible(false);
+  }, []);
+
+  const commonProps = {
+    icon,
+    text,
+    size: "m",
+    style: isActive ? "raised" : "ghost",
+    action: hasError ? "danger" : "default",
+    onClick,
+    trailingSlot: counter !== undefined ? <Counter count={counter} size="s" truncateCount /> : null,
+    isDisabled: disabled,
+  } as const;
+
+  const clearButton =
+    isActive && onClear ? (
+      <div className={styles.clear}>
+        <IconButton size="xs" style="ghost" icon={allureIcons.solidXCircle} onClick={onClear} rounded />
+      </div>
+    ) : null;
+
+  let content = <Button {...commonProps} />;
+
+  if (isDropdown) {
+    content = <DropdownButton {...commonProps} isExpanded={isExpanded} />;
+  }
+
+  const hasTooltipContent = !isExpanded && (hasError || hasDescription);
+
+  return (
+    <div className={styles.btnWrapper} data-testid={testId}>
+      <div ref={triggerRef} onPointerOver={handleMouseOver} onPointerLeave={handleMouseLeave}>
+        {content}
+      </div>
+      {clearButton}
+      {createPortal(
+        <div
+          ref={tooltipRef}
+          className={styles.tooltip}
+          data-testid="filter-tooltip"
+          data-visible={(isTooltipVisible && hasTooltipContent) || undefined}
+        >
+          {error && <Tooltip ref={tooltipRef}>{error}</Tooltip>}
+          {!error && description && <Tooltip ref={tooltipRef}>{description}</Tooltip>}
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+};
+
+export const BooleanFieldFilter = <T extends BooleanField = BooleanField>(props: {
+  field: T;
+  onChange: (filter: T) => void;
+  icon?: string;
+  label?: string;
+  testId?: string;
+  description?: string;
+}) => {
+  const { field, onChange, icon, label, testId, description } = props;
+  const { value, key } = field;
+
+  const handleChange = useCallback(() => {
+    onChange({ ...field, value: !value });
+  }, [field, onChange, value]);
+
+  return (
+    <FilterBtn
+      icon={icon}
+      text={label ?? key}
+      isActive={value}
+      onClick={handleChange}
+      testId={testId}
+      description={description}
+    />
+  );
+};
+
+export const MultipleChoiceFieldFilter = (props: {
+  group: FieldFilterGroup;
+  counter?: boolean;
+  onChange: (group: FieldFilterGroup) => void;
+  onClear?: () => void;
+  options: { key: string; label?: string; description?: string; icon?: string }[];
+  fieldKey: string;
+  logicalOperator?: LogicalOperator;
+  strict?: boolean;
+  icon?: string;
+  label?: string;
+  testId?: string;
+  disabled?: boolean;
+}) => {
+  const {
+    group,
+    onChange,
+    icon,
+    label,
+    fieldKey,
+    options,
+    logicalOperator = "AND",
+    strict = true,
+    counter = true,
+    onClear,
+    testId,
+    disabled,
+  } = props;
+  const { value } = group;
+
+  const handleOptionClick = useCallback(
+    (optionKey: string, optionValue: boolean) => {
+      const newValues = value.filter(
+        (v) =>
+          v.type === "field" && v.value.type === "string" && v.value.key === fieldKey && v.value.value !== optionKey,
+      );
+
+      if (optionValue) {
+        newValues.push({
+          type: "field",
+          value: {
+            type: "string",
+            key: fieldKey,
+            value: optionKey,
+            strict,
+          },
+          logicalOperator,
+        });
+      }
+
+      onChange({ ...group, value: newValues });
+    },
+    [group, onChange, value, fieldKey, strict, logicalOperator],
+  );
+
+  const isOptionChecked = (optionKey: string) => {
+    return value.some(
+      (v) => v.type === "field" && v.value.type === "string" && v.value.key === fieldKey && v.value.value === optionKey,
+    );
+  };
+
+  const checkedValuesCount = options.map(({ key }) => key).filter(isOptionChecked).length;
+  const hasCheckedValues = checkedValuesCount > 0;
+
+  if (disabled) {
+    return (
+      <FilterBtn
+        icon={icon}
+        text={label ?? fieldKey}
+        isActive={hasCheckedValues}
+        onClick={() => {}}
+        disabled
+        testId={testId}
+      />
+    );
+  }
+
+  return (
+    <Menu
+      size="l"
+      placement="bottom-start"
+      menuTrigger={({ onClick, isOpened }) => (
+        <FilterBtn
+          icon={icon}
+          text={label ?? fieldKey}
+          isActive={hasCheckedValues}
+          isExpanded={isOpened}
+          counter={counter && hasCheckedValues ? checkedValuesCount : undefined}
+          onClick={onClick}
+          onClear={onClear}
+          isDropdown
+          testId={testId}
+        />
+      )}
+    >
+      <Menu.Section>
+        {options.map((option) => (
+          <Menu.ItemWithCheckmark
+            key={option.key}
+            onClick={() => handleOptionClick(option.key, !isOptionChecked(option.key))}
+            isChecked={isOptionChecked(option.key)}
+            leadingIcon={option.icon}
+            closeMenuOnClick={false}
+            dataTestId={`${option.key}-filter`}
+          >
+            <div className={styles.itemContent}>
+              <Text tag="div">{option.label ?? option.key}</Text>
+              {option.description && (
+                <Text tag="div" size="s" type="paragraph" className={styles.description}>
+                  {option.description}
+                </Text>
+              )}
+            </div>
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};
+
+export const ArrayFieldFilter = <T extends ArrayField = ArrayField>(props: {
+  filter: FieldFilter & { value: T };
+  counter?: boolean;
+  onChange: (filter: FieldFilter & { value: T }) => void;
+  onClear?: () => void;
+  options: { key: string; label?: string; icon?: string }[];
+  icon?: string;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+}) => {
+  const { filter, onChange, icon, label, options, counter = true, onClear, description, disabled } = props;
+  const { value, key } = filter.value;
+  const { t } = useI18n("filters");
+
+  const handleOptionClick = useCallback(
+    (optionKey: string, optionValue: boolean) => {
+      const newValues = value.filter((v) => v !== optionKey);
+
+      if (optionValue) {
+        newValues.push(optionKey);
+      }
+
+      onChange({ ...filter, value: { ...filter.value, value: newValues } });
+    },
+    [filter, onChange, value],
+  );
+
+  const isOptionChecked = (optionKey: string) => {
+    return value.some((v) => v === optionKey);
+  };
+
+  const checkedValuesCount = options.map(({ key: optionKey }) => optionKey).filter(isOptionChecked).length;
+  const hasCheckedValues = checkedValuesCount > 0;
+
+  const errorText = t("errors.max_values", { count: MAX_ARRAY_FIELD_VALUES });
+  const hasError = checkedValuesCount > MAX_ARRAY_FIELD_VALUES;
+
+  return (
+    <Menu
+      placement="bottom-start"
+      menuTrigger={({ onClick, isOpened }) => (
+        <FilterBtn
+          icon={icon}
+          text={label ?? key}
+          isActive={hasCheckedValues}
+          isExpanded={isOpened}
+          counter={counter && hasCheckedValues ? checkedValuesCount : undefined}
+          onClick={onClick}
+          onClear={onClear}
+          isDropdown
+          error={hasError ? errorText : undefined}
+          description={description}
+          disabled={disabled}
+        />
+      )}
+    >
+      <Menu.Section>
+        {options.map((option) => (
+          <Menu.ItemWithCheckmark
+            closeMenuOnClick={false}
+            key={option.key}
+            onClick={() => handleOptionClick(option.key, !isOptionChecked(option.key))}
+            isChecked={isOptionChecked(option.key)}
+            leadingIcon={option.icon}
+          >
+            {option.label ?? option.key}
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/ReportFilters/RetryFlaky.tsx

@@ -0,0 +1,29 @@
+import { allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import type { AwesomeBooleanField, AwesomeFieldFilter } from "@/stores/treeFilters/model";
+import { BooleanFieldFilter } from "./BaseFilters";
+
+type RetryOrFlakyFilter = AwesomeFieldFilter & {
+  value: AwesomeBooleanField;
+};
+
+export const RetryFlakyFilter = (props: {
+  filter: RetryOrFlakyFilter;
+  onChange: (filter: RetryOrFlakyFilter) => void;
+}) => {
+  const { filter, onChange } = props;
+  const { value: field } = filter;
+  const { key } = field;
+  const { t, t: tDescription } = useI18n("filters");
+
+  return (
+    <BooleanFieldFilter
+      field={field}
+      onChange={(value) => onChange({ ...filter, value })}
+      icon={key === "retry" ? allureIcons.lineArrowsRefreshCcw1 : allureIcons.lineIconBomb2}
+      label={t(key)}
+      testId={`${key}-filter`}
+      description={tDescription(`description.${key}`)}
+    />
+  );
+};

package/src/components/ReportFilters/TagsFilter.tsx

@@ -0,0 +1,41 @@
+import { computed } from "@preact/signals";
+import { useI18n } from "@/stores";
+import { treeTags } from "@/stores/treeFilters/store";
+import type { AwesomeArrayFieldFilter } from "../../stores/treeFilters/model";
+import { ArrayFieldFilter } from "./BaseFilters";
+
+const options = computed(() => {
+  return treeTags.value.map((tag) => ({ key: tag, label: tag }));
+});
+
+export const TagsFilter = (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("tags")}
+      description={t("description.tags")}
+      counter
+      onClear={() =>
+        onChange({
+          ...filter,
+          value: {
+            ...filter.value,
+            value: [],
+          },
+        })
+      }
+    />
+  );
+};

package/src/components/ReportFilters/TransitionFilter.tsx

@@ -0,0 +1,49 @@
+import { allureIcons } from "@allurereport/web-components";
+import { useMemo } from "preact/hooks";
+import { useI18n } from "@/stores";
+import type { AwesomeFilterGroupSimple } from "../../stores/treeFilters/model";
+import { MultipleChoiceFieldFilter } from "./BaseFilters";
+
+const transitionOptions = [
+  { key: "new", icon: allureIcons.lineAlertsNew },
+  { key: "fixed", icon: allureIcons.lineAlertsFixed },
+  { key: "regressed", icon: allureIcons.lineAlertsRegressed },
+  { key: "malfunctioned", icon: allureIcons.lineAlertsMalfunctioned },
+];
+
+export const TransitionFilter = (props: {
+  group: AwesomeFilterGroupSimple;
+  onChange: (group: AwesomeFilterGroupSimple) => void;
+}) => {
+  const { group, onChange } = props;
+  const { t } = useI18n("filters");
+  const options = useMemo(
+    () =>
+      transitionOptions.map((option) => ({
+        ...option,
+        label: t(option.key),
+        description: t(`description.${option.key}`),
+      })),
+    [t],
+  );
+
+  return (
+    <MultipleChoiceFieldFilter
+      group={group}
+      onChange={onChange}
+      options={options}
+      label={t("transition")}
+      fieldKey="transition"
+      logicalOperator="OR"
+      strict
+      counter
+      testId="transition-filter"
+      onClear={() =>
+        onChange({
+          ...group,
+          value: [],
+        })
+      }
+    />
+  );
+};

package/src/components/ReportFilters/index.tsx

@@ -0,0 +1,44 @@
+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 { BooleanFieldFilter } from "./BaseFilters";
+import { RetryFlakyFilter } from "./RetryFlaky";
+import { TagsFilter } from "./TagsFilter";
+import { TransitionFilter } from "./TransitionFilter";
+import * as styles from "./styles.scss";
+
+const Filter = (props: { filter: AwesomeFilter; onChange: (filter: AwesomeFilter) => void }) => {
+  const { filter, onChange } = props;
+  const { value: field, type } = filter;
+
+  if (isRetryFilter(filter) || isFlakyFilter(filter)) {
+    return <RetryFlakyFilter filter={filter} onChange={onChange} />;
+  }
+
+  if (isTransitionFilter(filter)) {
+    return <TransitionFilter group={filter} onChange={onChange} />;
+  }
+
+  if (type === "field" && field.type === "boolean") {
+    return <BooleanFieldFilter field={field} onChange={(value) => onChange({ ...filter, value })} />;
+  }
+
+  if (isTagFilter(filter)) {
+    return <TagsFilter filter={filter} onChange={onChange} />;
+  }
+
+  return null;
+};
+
+const QuickFilters = () => {
+  return <For each={treeQuickFilters}>{(filter) => <Filter filter={filter} onChange={setTreeFilter} />}</For>;
+};
+
+export const ReportFilters = () => {
+  return (
+    <div className={styles.wrapper}>
+      <QuickFilters />
+    </div>
+  );
+};

package/src/components/ReportFilters/styles.scss

@@ -0,0 +1,55 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.btnWrapper {
+  position: relative;
+
+  &:hover,
+  &:focus-within {
+    & .clear {
+      opacity: 1;
+    }
+  }
+}
+
+.clear {
+  transition: opacity var(--color-change-transition-duration) ease-out;
+  opacity: 0;
+  position: absolute;
+  top: -9.5px;
+  right: -9.5px;
+}
+
+.tooltip {
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease-in-out;
+  & > div {
+    max-width: 300px;
+    min-width: 0;
+    text-align: center;
+  }
+
+  &[data-visible="true"] {
+    opacity: 1;
+  }
+}
+
+.description {
+  color: var(--on-text-secondary);
+}
+
+.itemContent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}

package/src/components/ReportSearch/index.tsx

@@ -0,0 +1,29 @@
+import { SearchBox } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeQueryFilter, treeQueryFilterValue } from "@/stores/treeFilters/store";
+
+const handleQuerySearch = (value: string) => {
+  if (!value) {
+    setTreeQueryFilter(undefined);
+    return;
+  }
+
+  setTreeQueryFilter(value);
+};
+
+const QuerySearch = () => {
+  const { t } = useI18n("search");
+
+  return (
+    <SearchBox
+      placeholder={t("search-placeholder")}
+      value={treeQueryFilterValue.value}
+      onChange={handleQuerySearch}
+      changeDebounce={150}
+    />
+  );
+};
+
+export const ReportSearch = () => {
+  return <QuerySearch />;
+};

package/src/components/ReportTabs/index.tsx

@@ -2,7 +2,7 @@ import { Text } from "@allurereport/web-components";
 import { useComputed } from "@preact/signals";
 import { type ComponentChildren } from "preact";
 import { useCallback } from "preact/hooks";
-import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
 import type { AwesomeStatus } from "../../../types.js";
 import * as styles from "./styles.scss";
 

package/src/components/SectionPicker/index.tsx

@@ -37,7 +37,7 @@ export const SectionPicker = () => {
       )}
     >
       <Menu.Section>
-        {["default", ...availableSections.value].map((value) => (
+        {["default", ...availableSections].map((value) => (
           <Menu.ItemWithCheckmark
             onClick={() => setSection(value)}
             key={value}

package/src/components/SplitLayout/index.tsx

@@ -1,11 +1,13 @@
 import { Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
 import { useI18n } from "@/stores";
-import { route } from "@/stores/router";
+import { testResultRoute } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -28,8 +30,10 @@ const Loader = () => {
   );
 };
 
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+
 export const SplitLayout = () => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const testResultId = currentTrId.value;
   const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
   const { t } = useI18n("controls");
   const leftSide = (
@@ -37,7 +41,7 @@ export const SplitLayout = () => {
   );
 
   const TrView = () => {
-    return testResultId ? (
+    return isTestResultRoute.value ? (
       <Loadable
         source={testResultStore}
         renderLoader={() => <Loader />}

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

@@ -5,7 +5,7 @@ import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
-import { navigateTo, openInNewTab } from "@/stores/router";
+import { navigateToTestResult, openInNewTab } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 import type { AwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
@@ -42,7 +42,7 @@ export const TrEnvironmentItem: FunctionalComponent<{
             }
 
             e.stopPropagation();
-            navigateTo(navigateUrl);
+            navigateToTestResult({ testResultId: id });
           }}
         >
           <TreeItemIcon status={status} className={styles["test-result-environment-item-status"]} />

package/src/components/TestResult/TrHeader/TrBreadcrumbs.tsx

@@ -2,7 +2,7 @@ import { IconButton, SvgIcon, Text, allureIcons } from "@allurereport/web-compon
 import clsx from "clsx";
 import type { AwesomeTestResult } from "types";
 import * as styles from "@/components/TestResult/TrHeader/styles.scss";
-import { navigateTo } from "@/stores/router";
+import { navigateToRoot } from "@/stores/router";
 
 interface TrBreadcrumbs {
   testResult?: AwesomeTestResult;
@@ -19,7 +19,7 @@ export const TrBreadcrumbs = ({ testResult }: TrBreadcrumbs) => {
           size={"s"}
           style={"ghost"}
           className={styles["test-result-breadcrumb-link"]}
-          onClick={() => navigateTo("")}
+          onClick={() => navigateToRoot()}
         />
       </div>
       {Boolean(breadcrumbs?.length) &&