@allurereport/web-classic 3.0.0-beta.10

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

package/src/components/Metadata/styles.scss

@@ -0,0 +1,146 @@
+@import "~@allurereport/web-components/mixins.scss";
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
+  display: inline-grid;
+  grid-template-columns: 30% 60%;
+  gap: 10%;
+  align-items: center;
+}
+
+.report-metadata-values {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.report-metadata-s {
+  font-size: 12px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.report-metadata-keyvalue-wrapper {
+  background: var(--on-border-primary);
+  border-radius: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 2px 4px;
+  line-height: 16px;
+}
+
+.report-metadata-keyvalue-value {
+  width: max-content;
+  height: max-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 5%;
+  grid-template-columns: repeat(2, 45%);
+}
+
+.metadata-test-type {
+  display: flex;
+}
+
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text;
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+}
+
+.metadata-tooltip {
+  padding: 12px 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.metadata-tooltip-value {
+  flex: 1 1 auto;
+  min-width: 320px;
+  background: var(--bg-base-secondary);
+  max-height: 238px;
+  padding: 8px 16px;
+  overflow: hidden;
+  overflow-y: auto;
+  border-radius: 8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/src/components/MetadataButton/index.tsx

@@ -0,0 +1,32 @@
+import { 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 {
+  isOpened?: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  counter?: number;
+  title?: string;
+}
+
+export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({ isOpened, setIsOpen, counter, title }) => {
+  return (
+    <div
+      className={clsx(styles["report-metadata-header"], isOpened && styles["report-metadata-header-opened"])}
+      onClick={() => setIsOpen(!isOpened)}
+    >
+      <Text size={"m"} bold>
+        {title}
+      </Text>
+      {counter && <Counter count={counter} size="s" />}
+      <ArrowButton
+        isOpened={isOpened}
+        iconSize={"s"}
+        buttonSize={"s"}
+        className={styles["report-metadata-header-arrow"]}
+      />
+    </div>
+  );
+};

package/src/components/MetadataButton/styles.scss

@@ -0,0 +1,53 @@
+.report-metadata-header-arrow {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+
+.report-metadata-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.report-metadata-header {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+  transition:
+    background-color 200ms,
+    opacity 200ms;
+
+  margin: 6px 0;
+
+  &:after {
+    content: "";
+    padding: 6px 8px;
+    border-radius: 8px;
+    left: -8px;
+    top: -6px;
+    position: absolute;
+    width: calc(100% + 16px);
+    height: calc(100% + 12px);
+    z-index: 0;
+    background-color: transparent;
+    transition: background-color 200ms;
+  }
+
+  &:hover {
+    &:after {
+      background-color: var(--bg-control-flat-medium);
+    }
+
+    .report-metadata-header-arrow {
+      opacity: 1;
+    }
+  }
+}
+
+.report-metadata-header-opened {
+  .report-metadata-header-arrow {
+    transform: rotate(0);
+    opacity: 0;
+  }
+}

package/src/components/Modal/ModalView.hbs

@@ -0,0 +1,13 @@
+<div class="modal__background">
+    <div class="modal__window">
+        <h2 class="{{b cls 'title'}}">
+            <span>{{title}}</span>
+            <span class="{{b cls 'close'}}" data-tooltip="Close">
+                {{allure-icon "close" noTooltip=true width="16px" height="16px"}}
+            </span>
+        </h2>
+        <div class="modal__content"></div>
+        <br>
+    </div>
+
+</div>

package/src/components/Modal/ModalView.js

@@ -0,0 +1,43 @@
+import { View } from "backbone.marionette";
+import $ from "jquery";
+import { className, on, regions } from "@/decorators/index.js";
+import template from "./ModalView.hbs";
+import "./styles.scss";
+
+@className("modal")
+@regions({
+  content: ".modal__content",
+})
+class ModalView extends View {
+  template = template;
+  static container = $(document.body);
+
+  show() {
+    this.constructor.container.append(this.$el);
+    this.showChildView("content", this.options.childView);
+    $("#content").toggleClass("blur", true);
+  }
+
+  onDestroy() {
+    $("#content").toggleClass("blur", false);
+  }
+
+  @on("click .modal__content")
+  onKeepOpen(e) {
+    e.stopPropagation();
+  }
+
+  @on("click .modal__background, .modal__close")
+  onClose() {
+    this.destroy();
+  }
+
+  serializeData() {
+    return {
+      cls: this.className,
+      title: this.options.title,
+    };
+  }
+}
+
+export default ModalView;