@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/components/Footer/FooterLogo.tsx

@@ -0,0 +1,15 @@
+import { ReportLogoFull, Text } from "@allurereport/web-components";
+import * as styles from "./styles.scss";
+
+export const FooterLogo = () => {
+  return (
+    <div className={styles["footer-logo"]}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
+        <Text type="paragraph" size="m" className={styles["footer-logo"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </div>
+  );
+};

package/src/components/Footer/FooterVersion.tsx

@@ -0,0 +1,33 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@allurereport/web-components";
+import { useEffect, useState } from "preact/hooks";
+import type { ClassicReportOptions } from "types";
+import { currentLocaleIso } from "@/stores";
+import * as styles from "./styles.scss";
+
+export const FooterVersion = () => {
+  const [createdAt, setCreatedAt] = useState<number | null>(null);
+
+  useEffect(() => {
+    const reportOptions = getReportOptions<ClassicReportOptions>();
+    if (reportOptions?.createdAt) {
+      setCreatedAt(Number(reportOptions.createdAt));
+    }
+  }, []);
+
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+
+  return (
+    <Text type="paragraph" size="m" className={styles.version}>
+      {formattedCreatedAt}
+      <span> Ver: 3.0.0</span>
+    </Text>
+  );
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/Footer/FooterLogo";
+import { FooterVersion } from "@/components/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

package/src/components/Footer/styles.scss

@@ -0,0 +1,14 @@
+.footer-logo {
+  color: var(--on-text-secondary);
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}

package/src/components/Graphs/index.tsx

@@ -0,0 +1,2 @@
+const Overview = () => <div>Overview</div>;
+export default Overview;

package/src/components/Header/index.tsx

@@ -0,0 +1,14 @@
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import * as styles from "./styles.scss";
+
+export const Header = () => {
+  return (
+    <div className={styles.above}>
+      <div className={styles.right}>
+        <LanguagePicker />
+        <ThemeButton />
+      </div>
+    </div>
+  );
+};

package/src/components/Header/styles.scss

@@ -0,0 +1,26 @@
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.logoWrapper {
+  margin-right: auto;
+  color: var(--on-text-secondary);
+}
+
+.logo {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+  top: -2px;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}

package/src/components/HeaderActions/Filters.tsx

@@ -0,0 +1,90 @@
+import { Button, Menu, Toggle, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores/locale";
+import { setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const Filters = () => {
+  const { t } = useI18n("filters");
+  const { flaky, retry, new: isNew } = treeFiltersStore.value.filter;
+  const hasFilter = flaky || retry || isNew;
+
+  return (
+    <Menu
+      menuTrigger={({ isOpened, onClick }) => (
+        <div className={hasFilter && styles.filtersBtnWithFilters}>
+          <Button
+            icon={allureIcons.lineGeneralSettings1}
+            text={t("more-filters")}
+            size="m"
+            style="outline"
+            isActive={isOpened}
+            data-testid="filters-button"
+            onClick={onClick}
+          />
+        </div>
+      )}
+    >
+      <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>
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/HeaderActions/HeaderActions.tsx

@@ -0,0 +1,58 @@
+import { capitalize, statusesList } from "@allurereport/core-api";
+import { Counter, Loadable, SearchBox } from "@allurereport/web-components";
+import { SortBy } from "@/components/HeaderActions/SortBy";
+import { Tab } from "@/components/Tabs";
+import { statsStore } from "@/stores";
+import { useI18n } from "@/stores/locale";
+import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
+import { Filters } from "./Filters";
+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 = () => {
+  const { t } = useI18n("statuses");
+
+  const ALL_TAB = "total";
+
+  return (
+    <div className={styles.headerActions}>
+      <div className={styles["header-search"]}>
+        <Search />
+        <Filters />
+      </div>
+      <div className={styles["header-filters"]}>
+        <div className={styles["header-tabs"]}>
+          <Loadable
+            source={statsStore}
+            renderData={(stats) => {
+              const allStatuses = statusesList
+                .map((status) => ({ status, value: stats[status] }))
+                .filter(({ value }) => value)
+                .map(({ status, value }) => (
+                  <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                    {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
+                  </Tab>
+                ));
+
+              return (
+                <>
+                  <Tab data-testid="tab-all" id={ALL_TAB}>
+                    {capitalize(t("total"))} <Counter count={stats?.total ?? 0} size="s" />
+                  </Tab>
+                  {allStatuses}
+                </>
+              );
+            }}
+          />
+        </div>
+        <SortBy />
+      </div>
+    </div>
+  );
+};

package/src/components/HeaderActions/SortBy.tsx

@@ -0,0 +1,128 @@
+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 * as styles from "./styles.scss";
+
+const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
+  return <div className={styles.sortByBtnWrap}>{children}</div>;
+};
+
+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 displayedSortByValue = sortByValuesLocale(sortBy);
+  const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);
+
+  return (
+    <div>
+      <Text type="paragraph" size="m" className={styles.sortByText}>
+        {sortByLocale("sort-by-text")}
+        &nbsp;
+        <Menu
+          size="l"
+          menuTriggerWrapper="span"
+          menuTrigger={({ onClick, isOpened }) => (
+            <Text type="paragraph" size="m">
+              <Link onClick={onClick}>
+                {displayedSortByValue} {displayedDirection}
+                <SvgIcon
+                  size="s"
+                  id={allureIcons.lineArrowsChevronDown}
+                  className={clsx(styles.sortByIcon, isOpened && styles.sortByIconReversed)}
+                />
+              </Link>
+            </Text>
+          )}
+        >
+          <Menu.Section>
+            <Menu
+              size="s"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={allureIcons.lineArrowsSwitchVertical1}
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedSortByValue}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("sort-by-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("order")} isChecked={sortBy === "order"}>
+                  {sortByValuesLocale("order")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("duration")} isChecked={sortBy === "duration"}>
+                  {sortByValuesLocale("duration")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("status")} isChecked={sortBy === "status"}>
+                  {sortByValuesLocale("status")}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark onClick={() => setTreeSortBy("alphabet")} isChecked={sortBy === "alphabet"}>
+                  {sortByValuesLocale("alphabet")}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+            <Menu
+              size="m"
+              menuTrigger={({ onClick, isOpened }) => (
+                <Menu.Item
+                  closeMenuOnClick={false}
+                  onClick={onClick}
+                  leadingIcon={
+                    direction === "asc" ? allureIcons.lineArrowsSortLineAsc : allureIcons.lineArrowsSortLineDesc
+                  }
+                  rightSlot={
+                    <BtnWrapper>
+                      <DropdownButton
+                        style="outline"
+                        size="s"
+                        isExpanded={isOpened}
+                        text={displayedDirection}
+                        focusable={false}
+                      />
+                    </BtnWrapper>
+                  }
+                >
+                  {sortByLocale("direction-category")}
+                </Menu.Item>
+              )}
+            >
+              <Menu.Section>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setTreeDirection("asc")}
+                  leadingIcon={allureIcons.lineArrowsSortLineAsc}
+                  isChecked={direction === "asc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-asc`)}
+                </Menu.ItemWithCheckmark>
+                <Menu.ItemWithCheckmark
+                  onClick={() => setTreeDirection("desc")}
+                  leadingIcon={allureIcons.lineArrowsSortLineDesc}
+                  isChecked={direction === "desc"}
+                >
+                  {sortByDirectionsLocale(`${sortBy}-desc`)}
+                </Menu.ItemWithCheckmark>
+              </Menu.Section>
+            </Menu>
+          </Menu.Section>
+        </Menu>
+      </Text>
+    </div>
+  );
+};

package/src/components/HeaderActions/styles.scss

@@ -0,0 +1,82 @@
+.header {
+  padding: 24px;
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.headerRow {
+  display: flex;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  padding: 16px 24px;
+}
+
+.headerActions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.header-search {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.header-tabs {
+  flex: 1 1 auto;
+}
+
+.header-filters {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* This is a hack because button do not have this state */
+.filtersBtnWithFilters > button::after {
+  content: "";
+  background-color: var(--bg-support-aldebaran);
+  width: 6px;
+  height: 6px;
+  border-radius: 100px;
+  position: absolute;
+  top: 7px;
+  right: 3px;
+}
+
+.filterToggle {
+  padding-top: 2px;
+}
+
+.sortByText {
+  color: var(--on-text-secondary);
+}
+
+.sortByBtnWrap {
+  /*
+    Because button is 24px height it makes
+    menu item to be 24px height too
+    But design is not that
+   */
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.sortByIcon {
+  transition: transform var(--interaction-transition-duration) ease-out;
+
+  &.sortByIconReversed {
+    transform: rotate(180deg);
+  }
+}

package/src/components/LanguagePicker/index.tsx

@@ -0,0 +1,41 @@
+import { Button, Menu } from "@allurereport/web-components";
+import { currentLocale } from "@/stores";
+import { setLocale } from "@/stores/locale";
+import { LANG_LOCALE, type LangLocale } from "@/translations/constants";
+import * as styles from "./styles.scss";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
+  key: key as LangLocale,
+  value: full,
+}));
+
+export const LanguagePicker = () => {
+  const locale = currentLocale.value;
+  const handleSelect = (selectedOption: LangLocale) => {
+    setLocale(selectedOption);
+  };
+
+  return (
+    <Menu
+      size="s"
+      menuTrigger={({ onClick }) => (
+        <Button
+          style="raised"
+          className={styles["language-picker"]}
+          size="s"
+          text={LANG_LOCALE[locale || "en"].short}
+          onClick={onClick}
+        />
+      )}
+    >
+      <Menu.Section>
+        {langPickerOptions.map(({ key, value }) => (
+          <Menu.ItemWithCheckmark onClick={() => handleSelect(key)} key={key} isChecked={locale === key}>
+            {value}
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/LanguagePicker/styles.scss

@@ -0,0 +1,3 @@
+.language-picker {
+  color: red;
+}

package/src/components/MainReport/index.tsx

@@ -0,0 +1,19 @@
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { Header } from "@/components/Header";
+import { ReportBody } from "@/components/ReportBody";
+import { ReportHeader } from "@/components/ReportHeader";
+import { ReportMetadata } from "@/components/ReportMetadata";
+
+const MainReport = () => {
+  return (
+    <>
+      <Header />
+      <div className={styles.content}>
+        <ReportHeader />
+        <ReportMetadata />
+        <ReportBody />
+      </div>
+    </>
+  );
+};
+export default MainReport;

package/src/components/Metadata/index.tsx

@@ -0,0 +1,121 @@
+import { Button, Menu, Text, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { MetadataButton } from "@/components/MetadataButton";
+import type { MetadataProps } from "@/components/ReportMetadata";
+import { useI18n } from "@/stores/locale";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
+  envInfo,
+  size = "m",
+  columns = 2,
+}) => {
+  return (
+    <div
+      class={styles["report-metadata-list"]}
+      style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
+    >
+      {envInfo?.map(({ name, values, value }) => (
+        <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
+      ))}
+    </div>
+  );
+};
+
+export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ groupedLabels, size = "m" }) => {
+  return (
+    <div class={styles["report-metadata-list"]}>
+      {groupedLabels &&
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        Object.entries(groupedLabels)?.map(([name, values]) => (
+          <MetadataKeyValue key={name} size={size} title={name} values={values} />
+        ))}
+    </div>
+  );
+};
+
+export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const { t } = useI18n("ui");
+  const [isOpened, setIsOpen] = useState(true);
+
+  return (
+    <div class={styles["report-metadata"]}>
+      <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={envInfo.length} title={t("metadata")} />
+      {isOpened && <MetadataList envInfo={envInfo} />}
+    </div>
+  );
+};
+
+const MetadataTooltip = (props: { value: string }) => {
+  const { value } = props;
+  const { t } = useI18n("ui");
+
+  return (
+    <div className={styles["metadata-tooltip"]}>
+      <div className={styles["metadata-tooltip-value"]}>
+        <Text>{value}</Text>
+      </div>
+      <Button
+        style={"outline"}
+        icon={allureIcons.lineGeneralCopy3}
+        text={t("copy")}
+        onClick={() => copyToClipboard(value)}
+      />
+    </div>
+  );
+};
+
+const MetaDataKeyLabel: FunctionalComponent<{
+  size?: "s" | "m";
+  value: string;
+}> = ({ size = "s", 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"]}>
+            {value}
+          </Text>
+        </div>
+      )}
+    >
+      <Menu.Section>
+        <MetadataTooltip value={value} />
+      </Menu.Section>
+    </Menu>
+  );
+};
+
+const MetadataKeyValue: FunctionalComponent<{
+  title: string;
+  value?: string;
+  values?: string[];
+  size?: "s" | "m";
+}> = ({ title, value, values, size = "m" }) => {
+  return (
+    <div className={styles["report-metadata-keyvalue"]}>
+      <Text
+        type={"ui"}
+        size={size}
+        className={clsx(styles["report-metadata-keyvalue-title"], styles[`report-metadata-${size}`])}
+      >
+        {title}
+      </Text>
+      {values?.length ? (
+        <div className={styles["report-metadata-values"]}>
+          {values.map((item) => (
+            <MetaDataKeyLabel key={item} value={item} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles["report-metadata-values"]}>
+          <MetaDataKeyLabel value={value} />
+        </div>
+      )}
+    </div>
+  );
+};