@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

package/src/components/Metadata/index.tsx

@@ -17,6 +17,7 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
     <div
       class={styles["report-metadata-list"]}
       style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
+      data-testid={"metadata-list"}
     >
       {envInfo?.map(({ name, values, value }) => (
         <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
@@ -25,7 +26,7 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
   );
 };
 
-export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
+export const TrMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
   return (
     <div class={styles["report-metadata-list"]}>
       {groupedLabels &&
@@ -97,22 +98,23 @@ const MetadataKeyValue: FunctionalComponent<{
   size?: "s" | "m";
 }> = ({ title, value, values, size = "m" }) => {
   return (
-    <div className={styles["report-metadata-keyvalue"]}>
+    <div className={styles["report-metadata-keyvalue"]} data-testid={"metadata-item"}>
       <Text
         type={"ui"}
         size={size}
         className={clsx(styles["report-metadata-keyvalue-title"], styles[`report-metadata-${size}`])}
+        data-testid={"metadata-item-key"}
       >
         {title}
       </Text>
       {values?.length ? (
-        <div className={styles["report-metadata-values"]}>
+        <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           {values.map((item) => (
             <MetaDataKeyLabel key={item} value={item} />
           ))}
         </div>
       ) : (
-        <div className={styles["report-metadata-values"]}>
+        <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           <MetaDataKeyLabel value={value} />
         </div>
       )}

package/src/components/MetadataButton/index.tsx

@@ -1,7 +1,6 @@
-import { Counter, Text } from "@allurereport/web-components";
+import { ArrowButton, Counter, Text } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
-import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {
@@ -11,22 +10,31 @@ interface MetadataButtonProps {
   title?: string;
 }
 
-export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
+  isOpened,
+  setIsOpen,
+  counter,
+  title,
+  ...rest
+}) => {
   return (
-    <div
+    <button
+      {...rest}
       className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      type={"button"}
       onClick={() => setIsOpen(!isOpened)}
     >
       <Text size={"m"} bold>
         {title}
       </Text>
-      {counter && <Counter count={counter} size="s" />}
+      {!!counter && <Counter count={counter} size="s" />}
       <ArrowButton
         isOpened={isOpened}
         iconSize={"s"}
         buttonSize={"s"}
         className={styles["report-metadata-header-arrow"]}
+        tag={"div"}
       />
-    </div>
+    </button>
   );
 };

package/src/components/MetadataButton/styles.scss

@@ -8,6 +8,9 @@
 }
 
 .report-metadata-header {
+  border: none;
+  background: none;
+  padding: 0;
   width: max-content;
   display: flex;
   align-items: center;

package/src/components/Modal/index.tsx

@@ -1,174 +1,22 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Button, Heading, IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import { signal } from "@preact/signals";
-import type { FunctionalComponent, VNode } from "preact";
-import { useEffect } from "preact/hooks";
-import Prism from "prismjs";
-import type { AllureAwesomeTestResult } from "types";
-import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
-import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
-import * as styles from "./styles.scss";
+import { Modal, type ModalTranslations } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { isModalOpen, modalData } from "@/stores/modal";
 
-export const isModalOpen = signal(false);
+export const ModalComponent = () => {
+  const { t } = useI18n("controls");
 
-interface ModalDataProps {
-  data: AttachmentTestStepResult;
-  component: VNode;
-  preview?: boolean;
-}
-
-export const modalData = signal<ModalDataProps>({
-  data: null,
-  preview: false,
-  component: null,
-});
-
-const openModal = ({ data, component, preview }: ModalDataProps) => {
-  modalData.value = {
-    data,
-    component,
-    preview,
-  };
-  isModalOpen.value = true;
-};
-
-const closeModal = () => {
-  isModalOpen.value = false;
-};
-
-const ModalThumb: FunctionalComponent<{ item: AttachmentTestStepResult }> = ({ item, children }) => {
-  const isActiveThumb = modalData.value.data?.link?.id === item.link?.id;
-
-  const showAttach = (showedItem: AttachmentTestStepResult) => {
-    openModal({
-      data: showedItem,
-      component: <Attachment item={showedItem} key={showedItem.link?.id} />,
-    });
+  const translations: ModalTranslations = {
+    tooltipDownload: t("downloadAttachment"),
+    tooltipPreview: t("previewAttachment"),
+    openInNewTabButton: t("openInNewTab"),
   };
 
   return (
-    <div className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`} onClick={() => showAttach(item)}>
-      {children}
-    </div>
-  );
-};
-
-export type ModalGalleryProps = {
-  attachments: AttachmentTestStepResult[];
-};
-
-const ModalGallery: FunctionalComponent<ModalGalleryProps> = ({ attachments = [] }) => {
-  const filteredAttachments = attachments.filter(({ link: { contentType } }: AttachmentTestStepResult) => {
-    const type = attachmentType(contentType).type;
-
-    return !["archive", null].includes(type as string);
-  });
-
-  return (
-    <div className={styles["modal-gallery"]}>
-      {filteredAttachments.map((item, index) => (
-        <ModalThumb item={item} key={index}>
-          <Attachment item={item} />
-        </ModalThumb>
-      ))}
-    </div>
+    <Modal
+      {...modalData.value}
+      translations={translations}
+      isModalOpen={isModalOpen.value}
+      closeModal={() => (isModalOpen.value = false)}
+    />
   );
 };
-
-export type ModalProps = {
-  testResult: AllureAwesomeTestResult;
-};
-
-const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
-  const { link } = modalData.value.data || {};
-  const attachName = link?.name ? `${link?.name}` : `${link?.id}${link?.ext}`;
-
-  useEffect(() => {
-    Prism.highlightAll();
-
-    if (isModalOpen.value) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
-
-  const isImageAttachment = link?.contentType?.startsWith("image");
-  const isHtmlAttachment = link?.contentType === "text/html";
-  const downloadData = async (e: Event) => {
-    e.stopPropagation();
-    const { id, ext, contentType } = link || {};
-    if (id && ext && contentType) {
-      await downloadAttachment(id, ext, contentType);
-    }
-  };
-  const openInNewWindow = async () => {
-    const { id, ext, contentType } = link || {};
-    await openAttachmentInNewTab(id, ext, contentType);
-  };
-
-  if (!isModalOpen.value) {
-    return null;
-  }
-
-  return (
-    <div className={styles["modal-overlay"]} onClick={closeModal}>
-      <div className={styles["modal-content"]} onClick={(e) => e.stopPropagation()}>
-        <div className={`${styles["modal-wrapper"]}`}>
-          <div className={styles["modal-top"]}>
-            <Heading size={"s"}>{attachName}</Heading>
-            <div className={styles["modal-buttons"]}>
-              {isImageAttachment && (
-                <Button
-                  style={"outline"}
-                  onClick={openInNewWindow}
-                  icon={allureIcons.lineGeneralLinkExternal}
-                  text={"Open in new tab"}
-                />
-              )}
-              {isHtmlAttachment && (
-                <TooltipWrapper tooltipText={"Preview attachment"}>
-                  <IconButton
-                    style={"outline"}
-                    size={"m"}
-                    iconSize={"s"}
-                    icon={modalData.value.preview ? allureIcons.viewOff : allureIcons.view}
-                    onClick={() => {
-                      modalData.value = {
-                        ...modalData.value,
-                        preview: !modalData.value.preview,
-                      };
-                    }}
-                  />
-                </TooltipWrapper>
-              )}
-              <TooltipWrapper tooltipText={"Download attachment"}>
-                <IconButton
-                  style={"outline"}
-                  size={"m"}
-                  iconSize={"s"}
-                  icon={allureIcons.lineGeneralDownloadCloud}
-                  onClick={(e: MouseEvent) => downloadData(e)}
-                />
-              </TooltipWrapper>
-              <IconButton iconSize={"m"} style={"ghost"} onClick={closeModal} icon={allureIcons.lineGeneralXClose} />
-            </div>
-          </div>
-          <div className={styles["modal-data"]}>
-            <div className={styles["modal-data-component"]} key={modalData.value?.data?.link?.id}>
-              {modalData.value?.component}
-            </div>
-          </div>
-        </div>
-        <ModalGallery attachments={testResult.attachments} />
-      </div>
-    </div>
-  );
-};
-
-export { openModal, closeModal };
-export default Modal;

package/src/components/NavTabs/index.tsx

@@ -0,0 +1,70 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+import * as styles from "./styles.scss";
+
+type NavTabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (id: string) => void;
+};
+
+const NavTabsContext = createContext<NavTabsContextT | null>(null);
+
+export const useNavTabsContext = () => {
+  const context = useContext(NavTabsContext);
+
+  if (!context) {
+    throw new Error("NavTabs components must be used within a NavTabs component");
+  }
+
+  return context;
+};
+
+export const NavTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return <NavTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</NavTabsContext.Provider>;
+};
+
+export const NavTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <NavTabsProvider {...props} />;
+};
+
+export const NavTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const NavTab = (props: {
+  "id": string;
+  "children": ComponentChildren;
+  "onClick"?: () => void;
+  "data-testid"?: string;
+  "isCurrentTab"?: boolean;
+}) => {
+  const { currentTab, setCurrentTab } = useNavTabsContext();
+  const { id, children, onClick, "data-testid": dataTestId, "isCurrentTab": overrideIsCurrentTab } = props;
+  const isCurrentTab = overrideIsCurrentTab !== undefined ? overrideIsCurrentTab : currentTab === id;
+  const handleTabClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (isCurrentTab) {
+      return;
+    } else {
+      setCurrentTab(id);
+    }
+  };
+
+  return (
+    <button
+      className={styles.tab}
+      onClick={handleTabClick}
+      data-testid={dataTestId || `nav-tab-${id}`}
+      aria-current={isCurrentTab ? true : undefined}
+    >
+      <Text type="paragraph" size="m">
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/{TestResult/TestResultTabs → NavTabs}/styles.scss

@@ -37,9 +37,6 @@
     border-bottom: 2px solid transparent;
   }
 
-  &[disabled] {
-    opacity: 0.5;
-  }
   &[aria-current] {
     background-color: var(--bg-base-primary);
     cursor: default;

package/src/components/Report/index.tsx

@@ -0,0 +1,7 @@
+import { BaseLayout } from "@/components/BaseLayout";
+import { SplitLayout } from "@/components/SplitLayout";
+import { isSplitMode } from "@/stores/layout";
+
+export const Report = () => {
+  return isSplitMode.value ? <SplitLayout /> : <BaseLayout />;
+};

package/src/components/ReportBody/Filters.tsx

@@ -1,17 +1,86 @@
-import { Button, Menu, Toggle, allureIcons } from "@allurereport/web-components";
+import { Button, Menu, Toggle, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
+import { For } from "@preact/signals/utils";
+import { useEffect } from "preact/hooks";
 import { useI18n } from "@/stores/locale";
-import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import {
+  type TreeFilters,
+  setFilters,
+  setTestTypeFilter,
+  setTransitionFilter,
+  testTypeFilters,
+  transitionFilters,
+} from "@/stores/treeFilters";
+import { filtersList } from "@/stores/treeFilters/constants";
 import * as styles from "./styles.scss";
 
+const filterIcons: Record<TreeFilters, string> = {
+  flaky: allureIcons.lineIconBomb2,
+  retry: allureIcons.lineArrowsRefreshCcw1,
+  new: allureIcons.lineAlertsNew,
+  fixed: allureIcons.lineAlertsFixed,
+  regressed: allureIcons.lineAlertsRegressed,
+  malfunctioned: allureIcons.lineAlertsMalfunctioned,
+};
+
+const FilterItem = (props: { filter: TreeFilters; value: boolean; onChange: (value: boolean) => void }) => {
+  const { filter, value, onChange } = props;
+  const { t: tooltip } = useI18n("filters.description");
+  const { t } = useI18n("filters");
+
+  return (
+    <TooltipWrapper data-testid="filter-tooltip" tooltipText={tooltip(filter)}>
+      <Menu.Item
+        closeMenuOnClick={false}
+        ariaLabel={t("enable-filter", { filter: t(filter) })}
+        onClick={() => onChange(!value)}
+        leadingIcon={filterIcons[filter]}
+        rightSlot={
+          <div className={styles.filterToggle}>
+            <Toggle
+              focusable={false}
+              value={value}
+              label={t("enable-filter", { filter: t(filter) })}
+              data-testid={`${filter}-filter`}
+              onChange={(changeValue) => onChange(changeValue)}
+            />
+          </div>
+        }
+      >
+        {t(filter)}
+      </Menu.Item>
+    </TooltipWrapper>
+  );
+};
+
+const hasFilter = computed(
+  () => transitionFilters.value.some(([, value]) => value) || testTypeFilters.value.some(([, value]) => value),
+);
+
 export const Filters = () => {
   const { t } = useI18n("filters");
-  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
-  const hasFilter = flaky || retry || isNew;
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const filtersParams = params.getAll("filter");
+
+    if (filtersParams.length > 0) {
+      const activeFilters = filtersList.reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: filtersParams.includes(key),
+        }),
+        {} as Record<string, boolean>,
+      );
+
+      setFilters(activeFilters);
+    }
+  }, []);
 
   return (
     <Menu
       menuTrigger={({ isOpened, onClick }) => (
-        <div className={hasFilter && styles.filtersBtnWithFilters}>
+        <div className={hasFilter.value && styles.filtersBtnWithFilters}>
           <Button
             icon={allureIcons.lineGeneralSettings1}
             text={t("more-filters")}
@@ -25,65 +94,28 @@ export const Filters = () => {
       )}
     >
       <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>
+        <For each={testTypeFilters}>
+          {([filter, value]) => (
+            <FilterItem
+              key={filter}
+              filter={filter}
+              value={value}
+              onChange={(newValue) => setTestTypeFilter(filter, newValue)}
+            />
+          )}
+        </For>
+      </Menu.Section>
+      <Menu.Section data-testid="filters-menu">
+        <For each={transitionFilters}>
+          {([filter, value]) => (
+            <FilterItem
+              key={filter}
+              filter={filter}
+              value={value}
+              onChange={(newValue) => setTransitionFilter(filter, newValue)}
+            />
+          )}
+        </For>
       </Menu.Section>
     </Menu>
   );

package/src/components/ReportBody/HeaderActions.tsx

@@ -1,12 +1,12 @@
 import { SearchBox } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
-import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
+import { setTreeQuery, treeQuery } from "@/stores/treeFilters";
 import { Filters } from "./Filters";
 import * as styles from "./styles.scss";
 
 const Search = () => {
-  const { query } = treeFiltersStore.value;
   const { t } = useI18n("search");
+  const query = treeQuery.value;
 
   return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setTreeQuery} />;
 };

package/src/components/ReportBody/SortBy.tsx

@@ -1,12 +1,8 @@
-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 { setTreeDirection, setTreeSortBy, treeDirection, treeSortBy } from "@/stores/treeFilters";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
@@ -17,7 +13,8 @@ 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 sortBy = treeSortBy.value;
+  const direction = treeDirection.value;
 
   const displayedSortByValue = sortByValuesLocale(sortBy);
   const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);