@allurereport/web-awesome 3.0.0 → 3.1.0

package/src/components/ReportBody/HeaderActions.tsx

@@ -1,21 +1,12 @@
-import { SearchBox } from "@allurereport/web-components";
-import { useI18n } from "@/stores/locale";
-import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
-import { Filters } from "./Filters";
+import { ReportFilters } from "../ReportFilters";
+import { ReportSearch } from "../ReportSearch";
 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 />
+      <ReportSearch />
+      <ReportFilters />
     </div>
   );
 };

package/src/components/ReportBody/SortBy.tsx

@@ -1,26 +1,34 @@
-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 { DropdownButton, Link, Menu, SvgIcon, Text, allureIcons } 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 { type SortByDirection, type SortByField, type SortBy as TSortBy, setSortBy, sortBy } from "@/stores/treeSort";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
   return <div className={styles.sortByBtnWrap}>{children}</div>;
 };
 
+const setSortByField = (value: SortByField) => {
+  const direction = sortBy.peek().split(",")[1];
+  setSortBy(`${value},${direction}` as TSortBy);
+};
+
+const setDirection = (value: SortByDirection) => {
+  setSortBy(`${sortBy.peek().split(",")[0]},${value}` as TSortBy);
+};
+
 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 sortByValue = sortBy.value.split(",")[0] as SortByField;
+  const direction = sortBy.value.split(",")[1] as SortByDirection;
 
-  const displayedSortByValue = sortByValuesLocale(sortBy);
-  const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
+  const displayedSortByValue = sortByValuesLocale(sortByValue === "name" ? "alphabet" : sortByValue);
+  const displayedDirection = sortByDirectionsLocale(
+    `${sortByValue === "name" ? "alphabet" : sortByValue}-${direction}-short`,
+  );
 
   return (
     <div>
@@ -68,16 +76,19 @@ export const SortBy = () => {
               )}
             >
               <Menu.Section>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("order")} isChecked={sortBy === "order"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("order")} isChecked={sortByValue === "order"}>
                   {sortByValuesLocale("order")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("duration")} isChecked={sortBy === "duration"}>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setSortByField("duration")}
+                  isChecked={sortByValue === "duration"}
+                >
                   {sortByValuesLocale("duration")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("status")} isChecked={sortBy === "status"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("status")} isChecked={sortByValue === "status"}>
                   {sortByValuesLocale("status")}
                 </Menu.ItemWithCheckmark>
-                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                <Menu.ItemWithCheckmark onClick={() => setSortByField("name")} isChecked={sortByValue === "name"}>
                   {sortByValuesLocale("alphabet")}
                 </Menu.ItemWithCheckmark>
               </Menu.Section>
@@ -109,18 +120,18 @@ export const SortBy = () => {
             >
               <Menu.Section>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setTreeDirection("asc")}
+                  onClick={() => setDirection("asc")}
                   leadingIcon={allureIcons.lineArrowsSortLineAsc}
                   isChecked={direction === "asc"}
                 >
-                  {sortByDirectionsLocale(`${sortBy}-asc`)}
+                  {sortByDirectionsLocale(`${sortByValue}-asc`)}
                 </Menu.ItemWithCheckmark>
                 <Menu.ItemWithCheckmark
-                  onClick={() => setTreeDirection("desc")}
+                  onClick={() => setDirection("desc")}
                   leadingIcon={allureIcons.lineArrowsSortLineDesc}
                   isChecked={direction === "desc"}
                 >
-                  {sortByDirectionsLocale(`${sortBy}-desc`)}
+                  {sortByDirectionsLocale(`${sortByValue}-desc`)}
                 </Menu.ItemWithCheckmark>
               </Menu.Section>
             </Menu>

package/src/components/ReportBody/index.tsx

@@ -3,8 +3,8 @@ import { Counter, Loadable } from "@allurereport/web-components";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { setTreeStatus, treeFiltersStore } from "@/stores/tree";
-import { Tab, Tabs, TabsList, useTabsContext } from "../Tabs";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters/store";
+import { ReportTab, ReportTabsList } from "../ReportTabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";
 import { SortBy } from "./SortBy";
@@ -15,13 +15,12 @@ const ALL_TAB = "total";
 
 const Header = () => {
   const { t } = useI18n("statuses");
-  const { currentTab, setCurrentTab } = useTabsContext();
 
   return (
     <header className={styles.header}>
       <HeaderActions />
       <div className={styles.headerRow}>
-        <TabsList>
+        <ReportTabsList>
           <Loadable
             source={statsByEnvStore}
             renderData={(stats) => {
@@ -31,29 +30,28 @@ const Header = () => {
                   return { status, value: currentEnv[status] };
                 })
                 .filter(({ value }) => value);
-              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === currentTab);
-              if (!isStatListHaveCurrentTab.length && currentTab !== "total") {
-                setCurrentTab("total");
+              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === treeStatus.value);
+              if (!isStatListHaveCurrentTab.length && treeStatus.value !== "total") {
                 setTreeStatus("total");
               }
 
               const allStatuses = statList.map(({ status, value }) => (
-                <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                <ReportTab data-testid={`tab-${status}`} key={status} id={status}>
                   {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
-                </Tab>
+                </ReportTab>
               ));
 
               return (
                 <>
-                  <Tab data-testid="tab-all" id={ALL_TAB}>
+                  <ReportTab data-testid="tab-all" id={ALL_TAB}>
                     {capitalize(t("total"))} <Counter count={currentEnv?.total ?? 0} size="s" />
-                  </Tab>
+                  </ReportTab>
                   {allStatuses}
                 </>
               );
             }}
           />
-        </TabsList>
+        </ReportTabsList>
         <SortBy />
       </div>
     </header>
@@ -69,14 +67,11 @@ const Body = () => {
 };
 
 export const ReportBody = () => {
-  const initialTab = treeFiltersStore.value.status;
   return (
     <ReportContentProvider>
       <section>
-        <Tabs initialTab={initialTab}>
-          <Header />
-          <Body />
-        </Tabs>
+        <Header />
+        <Body />
       </section>
     </ReportContentProvider>
   );

package/src/components/ReportBody/styles.scss

@@ -28,7 +28,10 @@
 
 .headerActions {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
 }
 
 /* This is a hack because button do not have this state */

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: [],
+        })
+      }
+    />
+  );
+};