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

package/src/components/tree/TreeView.js

@@ -1,200 +0,0 @@
-import { View } from "backbone.marionette";
-import { SEARCH_QUERY_KEY } from "@/components/node-search/NodeSearchView.js";
-import getComparator from "@/data/tree/comparator.js";
-import { byCriteria, byMark, byStatuses, mix } from "@/data/tree/filter.js";
-import { behavior, className, on } from "@/decorators/index.js";
-import router from "@/router.js";
-import hotkeys from "@/utils/hotkeys.js";
-import template from "./TreeView.hbs";
-import "./styles.scss";
-
-@className("tree")
-@behavior("TooltipBehavior", { position: "bottom" })
-class TreeView extends View {
-  template = template;
-
-  cachedQuery = "";
-  initialize({ routeState, state, tabName, baseUrl, settings }) {
-    this.state = state;
-    this.routeState = routeState;
-    this.baseUrl = baseUrl;
-    this.tabName = tabName;
-    this.setState();
-    this.listenTo(this.routeState, "change:treeNode", this.selectNode);
-    this.listenTo(this.routeState, "change:testResultTab", this.render);
-
-    this.settings = settings;
-    this.listenTo(this.settings, "change", this.render);
-    this.listenTo(this.state, "change", this.handleStateChange);
-
-    this.listenTo(hotkeys, "key:up", this.onKeyUp, this);
-    this.listenTo(hotkeys, "key:down", this.onKeyDown, this);
-    this.listenTo(hotkeys, "key:esc", this.onKeyBack, this);
-    this.listenTo(hotkeys, "key:left", this.onKeyBack, this);
-  }
-
-  applyFilters() {
-    const visibleStatuses = this.settings.getVisibleStatuses();
-    const visibleMarks = this.settings.getVisibleMarks();
-    const searchQuery = this.state.get(SEARCH_QUERY_KEY);
-    const filter = mix(byCriteria(searchQuery), byStatuses(visibleStatuses), byMark(visibleMarks));
-
-    const sortSettings = this.settings.getTreeSorting();
-    const sorter = getComparator(sortSettings);
-
-    this.collection.applyFilterAndSorting(filter, sorter);
-  }
-
-  setState() {
-    const treeNode = this.routeState.get("treeNode");
-    if (treeNode && treeNode.testResult) {
-      const uid = treeNode.testResult;
-      this.state.set(uid, true);
-    }
-    if (treeNode && treeNode.testGroup) {
-      const uid = treeNode.testGroup;
-      this.state.set(uid, true);
-    }
-  }
-
-  onBeforeRender() {
-    this.applyFilters();
-  }
-
-  handleStateChange() {
-    const query = this.state.get(SEARCH_QUERY_KEY);
-    // need to check this ot to re-render nodes on folding
-    if (query !== this.cachedQuery) {
-      this.cachedQuery = query;
-      this.render();
-    }
-  }
-
-  onRender() {
-    this.selectNode();
-    if (this.state.get(SEARCH_QUERY_KEY)) {
-      this.$(".node__title").each((i, node) => {
-        this.$(node).parent().addClass("node__expanded");
-      });
-    } else {
-      this.restoreState();
-    }
-  }
-
-  selectNode() {
-    const previous = this.routeState.previous("treeNode");
-    this.toggleNode(previous, false);
-    const current = this.routeState.get("treeNode");
-    this.toggleNode(current, true);
-    this.restoreState();
-  }
-
-  toggleNode(node, active = true) {
-    if (node) {
-      const el = this.findElement(node);
-      el.toggleClass("node__title_active", active);
-      this.changeState(node.testResult);
-      this.changeState(node.testGroup);
-    }
-  }
-
-  changeState(uid, active = true) {
-    if (active) {
-      this.state.set(uid, true);
-    } else {
-      this.state.unset(uid);
-    }
-  }
-
-  restoreState() {
-    this.$("[data-uid]").each((i, node) => {
-      const el = this.$(node);
-      const uid = el.data("uid");
-      el.toggleClass("node__expanded", this.state.has(uid));
-    });
-    this.$(".node__title_active").parents(".node").toggleClass("node__expanded", true);
-    if (this.$(".node").parents(".node__expanded").length > 0) {
-      this.$(".node__expanded").parents("div.node.node__expanded").toggleClass("node__expanded", true);
-    } else {
-      this.$(".node__expanded").parents(".node").toggleClass("node__expanded", true);
-    }
-  }
-
-  findElement(treeNode) {
-    if (treeNode.testResult) {
-      return this.$(`[data-uid='${treeNode.testResult}'][data-parentUid='${treeNode.testGroup}']`);
-    } else {
-      return this.$(`[data-uid='${treeNode.testGroup}']`);
-    }
-  }
-
-  @on("click .node__title")
-  onNodeClick(e) {
-    const node = this.$(e.currentTarget);
-    const uid = node.data("uid");
-    this.changeState(uid, !this.state.has(uid));
-    node.parent().toggleClass("node__expanded");
-  }
-
-  onKeyUp(event) {
-    event.preventDefault();
-    const current = this.routeState.get("treeNode");
-    if (current && current.testResult) {
-      this.selectTestResult(this.collection.getPreviousTestResult(current.testResult));
-    } else {
-      this.selectTestResult(this.collection.getLastTestResult());
-    }
-  }
-
-  onKeyDown(event) {
-    event.preventDefault();
-    const current = this.routeState.get("treeNode");
-    if (current && current.testResult) {
-      this.selectTestResult(this.collection.getNextTestResult(current.testResult));
-    } else {
-      this.selectTestResult(this.collection.getFirstTestResult());
-    }
-  }
-
-  onKeyBack(event) {
-    event.preventDefault();
-    const current = this.routeState.get("treeNode");
-    if (!current) {
-      return;
-    }
-    if (current.testGroup && current.testResult) {
-      if (this.routeState.get("attachment")) {
-        router.setSearch({ attachment: null });
-      } else {
-        router.toUrl(`${this.baseUrl}/${current.testGroup}`);
-      }
-    } else if (current.testGroup) {
-      router.toUrl(`${this.baseUrl}`);
-    }
-  }
-
-  selectTestResult(testResult) {
-    if (testResult) {
-      const tab = this.routeState.get("testResultTab") || "";
-      router.toUrl(`${this.baseUrl}/${testResult.parentUid}/${testResult.uid}/${tab}`, {
-        replace: true,
-      });
-    }
-  }
-
-  templateContext() {
-    return {
-      cls: this.className,
-      baseUrl: this.baseUrl,
-      showGroupInfo: this.settings.isShowGroupInfo(),
-      time: this.collection.time,
-      statistic: this.collection.statistic,
-      uid: this.collection.uid,
-      tabName: this.tabName,
-      items: this.collection.toJSON(),
-      testResultTab: this.routeState.get("testResultTab") || "",
-    };
-  }
-}
-
-export default TreeView;

package/src/components/tree/styles.scss

@@ -1,141 +0,0 @@
-@import "../../mixins.scss";
-@import "../../variables.scss";
-
-.node {
-  margin-left: 0;
-  position: relative;
-  display: block;
-  text-decoration: none;
-  color: $text-color;
-
-  .node {
-    margin-left: 20px;
-  }
-
-  &:last-child {
-    padding-bottom: 10px;
-  }
-
-  &__arrow {
-    //left: 7px;
-    //position: absolute;
-  }
-
-  &__name {
-    //flex: 0 0 30%;
-  }
-
-  &__unknown {
-    color: $text-muted-color;
-  }
-
-  &__marks {
-    display: block;
-    float: right;
-    white-space: nowrap;
-  }
-
-  &__mark {
-    padding-left: 4px;
-    padding-right: 4px;
-    opacity: 0;
-
-    &_shown {
-      opacity: 1;
-    }
-  }
-
-  &__order {
-    min-width: 16px;
-    font-size: 12px;
-    color: $text-muted-color;
-    text-align: center;
-  }
-
-  &__anchor {
-    @include status-text();
-    display: flex;
-  }
-
-  &__stats {
-    display: block;
-    float: right;
-    white-space: nowrap;
-  }
-
-  &__title {
-    overflow: hidden;
-    line-height: 1.2em;
-    padding: 5px $gap-size 6px 16px;
-    gap: 0 4px;
-    flex: 1;
-    display: flex;
-    cursor: pointer;
-    border-top: 1px solid #eceff1;
-    position: relative;
-    align-items: center;
-
-    .node__leaf & {
-      padding: 7px $gap-size 7px 18px;
-    }
-
-    &_active {
-      background-color: $selected-color;
-
-      &::before {
-        background-color: $selected-color;
-      }
-    }
-
-    &:hover {
-      background-color: $hover-color;
-
-      &::before {
-        background-color: $hover-color;
-      }
-    }
-  }
-
-  &__time {
-    padding: 5px;
-  }
-
-  &__parameters {
-    padding: 0 2px;
-    color: $text-muted-color;
-    min-width: 2ch;
-    font-size: smaller;
-
-    &_separator:last-child {
-      display: none;
-    }
-  }
-
-  &__children {
-    display: none;
-
-    .node__expanded > & {
-      display: block;
-    }
-  }
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-[dir="rtl"] .attachment-row.attachment-row_selected > .attachment-row__arrow > .fa-angle-right {
-  transform: rotate(180deg);
-}
-
-[dir="rtl"] .step_expanded > .step__title > .step__arrow {
-  transform: rotate(90deg);
-}
-
-[dir="rtl"] .node__expanded > .node__title > .node__arrow {
-  transform: rotate(90deg);
-}
-
-[dir="ltr"] .node__expanded > .node__title > .node__arrow {
-  transform: rotate(90deg);
-}

package/src/components/tree/tree-group.hbs

@@ -1,36 +0,0 @@
-{{#if children}}
-    <div class="node">
-        <div class="node__title long-line" data-uid="{{uid}}">
-            <span class="node__arrow block__arrow">{{angle}}</span>
-            {{#if name}}
-                <div class="node__name">
-                    {{name}}
-                </div>
-            {{else}}
-                <span class="node__unknown">{{t 'component.tree.unknown'}}</span>
-            {{/if}}
-            <div class="tree__strut">&nbsp</div>
-            <span class="node__stats">
-                {{statistic-bar statistic}}
-            </span>
-        </div>
-
-        <div class="node__children">
-            {{#if showGroupInfo}}
-                <div class="node">
-                    <div class="node__info long-line" data-uid="{{uid}}">
-                        {{allure-icon "timeline" noTooltip=true width="12px" height="12px"}}
-                        {{> tree-time value=time.duration name=(t 'component.tree.time.total.name') tooltip=(t 'component.tree.time.total.tooltip')}}
-                        {{> tree-time value=time.maxDuration name=(t 'component.tree.time.max.name') tooltip=(t 'component.tree.time.max.tooltip')}}
-                        {{> tree-time value=time.sumDuration name=(t 'component.tree.time.sum.name') tooltip=(t 'component.tree.time.sum.tooltip')}}
-                    </div>
-                </div>
-            {{/if}}
-            {{#each children}}
-                {{~> tree-group baseUrl=../baseUrl showGroupInfo=../showGroupInfo tabName=../tabName testResultTab=../testResultTab}}
-            {{/each}}
-        </div>
-    </div>
-{{else}}
-    {{~> tree-leaf baseUrl=baseUrl testResultTab=testResultTab}}
-{{/if}}

package/src/components/tree/tree-leaf.hbs

@@ -1,53 +0,0 @@
-<a class="node node__leaf" href="#{{baseUrl}}/{{parentUid}}/{{uid}}/{{testResultTab}}">
-    <div class="node__title" data-uid="{{uid}}" data-parentUid="{{parentUid}}">
-        <div class="node__anchor_status_{{status}} {{b "node" "anchor"}}">
-            {{allure-icon status width='20px' height='20px'}}
-        </div>
-        <div class="node__order">{{order}}</div>
-        <div class="node__name">
-            {{name}}
-        </div>
-        {{#if parameters}}
-            <div class="node__parameters long-line line-ellipsis">
-                <span>&nbsp</span>
-                {{#each parameters}}
-                    {{#if this}}
-                        {{this}}
-                    {{~else}}
-                        null
-                    {{~/if~}}
-                    <span class="node__parameters_separator">,</span>
-                {{/each}}
-            </div>
-        {{/if}}
-        <div class="tree__strut">&nbsp</div>
-        {{#if flaky}}
-            <div class="{{b 'node' 'mark' shown=flaky}}">
-                {{allure-icon 'flaky'}}
-            </div>
-        {{/if}}
-        {{#if newFailed}}
-            <div class="{{b 'node' 'mark' shown=newFailed}}">
-                {{allure-icon 'newFailed'}}
-            </div>
-        {{/if}}
-        {{#if newBroken}}
-            <div class="{{b 'node' 'mark' shown=newBroken}}">
-                {{allure-icon 'newBroken'}}
-            </div>
-        {{/if}}
-        {{#if newPassed}}
-            <div class="{{b 'node' 'mark' shown=newPassed}}">
-                {{allure-icon 'newPassed'}}
-            </div>
-        {{/if}}
-        {{#if retriesStatusChange}}
-            <div class="{{b 'node' 'mark' shown=retriesStatusChange}}">
-                {{allure-icon 'retriesStatusChange'}}
-            </div>
-        {{/if}}
-        <div class="node__stats">
-            {{~duration time.duration~}}
-        </div>
-    </div>
-</a>

package/src/components/tree/tree-time.hbs

@@ -1,6 +0,0 @@
-{{#if (is-def value)}}
-    <span class="node__time" data-tooltip="{{tooltip}}">
-        {{name}}:
-        <b>{{duration value}}</b>
-    </span>
-{{/if}}

package/src/components/tree-view-container/TreeViewContainer.hbs

@@ -1,34 +0,0 @@
-<div class="{{b 'pane' 'title' borderless=true}}">
-    <span class="{{b 'pane' 'title-text'}}">{{t tabName}}</span>
-    {{#if filtered}}
-        <span class="{{b 'pane' 'subtitle'}}">
-        {{t 'component.tree.filtered.total' count=totalCases}},
-            {{t 'component.tree.filtered.shown' count=shownCases}}
-    </span>
-    {{/if}}
-    <div class="{{b 'pane' 'search'}}"></div>
-    <span class="pane__controls">
-        <span class="{{b cls 'control'}} {{b cls 'info'}}"
-              data-tooltip="{{t 'component.tree.groups'}}">
-          {{allure-icon "info" noTooltip=true width="18px" height="18px"}}
-        </span>
-        {{#if csvUrl}}
-            <span class="{{b cls 'control'}} {{b cls 'download'}}"
-               data-tooltip="{{t 'component.tree.download'}}"
-               data-ga4-event="csv_download_click"
-               data-download="{{csvUrl}}"
-               data-download-type="text/csv">
-              {{allure-icon "download" noTooltip=true width="18px" height="18px"}}
-            </span>
-        {{/if}}
-    </span>
-</div>
-
-<div class="{{b cls 'ctrl'}}">
-    <div class="{{b cls 'sorter'}}"></div>
-    <div class="{{b cls 'strut'}}"></div>
-    <div class="{{b cls 'filter'}}"></div>
-    <div class="{{b cls 'filter-marks'}}"></div>
-</div>
-
-<div class="{{b cls 'content'}}" ></div>

package/src/components/tree-view-container/TreeViewContainer.js

@@ -1,103 +0,0 @@
-import { Model } from "backbone";
-import { View } from "backbone.marionette";
-import MarksToggleView from "@/components/marks-toggle/MarksToggleView.js";
-import NodeSearchView from "@/components/node-search/NodeSearchView.js";
-import NodeSorterView from "@/components/node-sorter/NodeSorterView.js";
-import StatusToggleView from "@/components/status-toggle/StatusToggleView.js";
-import TreeView from "@/components/tree/TreeView.js";
-import { behavior, className, on, regions } from "@/decorators/index.js";
-import gtag from "@/utils/gtag.js";
-import { getSettingsForTreePlugin } from "@/utils/settingsFactory.js";
-import template from "./TreeViewContainer.hbs";
-import "./styles.scss";
-
-@className("tree")
-@behavior("TooltipBehavior", { position: "bottom" })
-@regions({
-  search: ".pane__search",
-  sorter: ".tree__sorter",
-  filter: ".tree__filter",
-  filterMarks: ".tree__filter-marks",
-  content: ".tree__content",
-})
-class TreeViewContainer extends View {
-  template = template;
-
-  initialize({
-    routeState,
-    state = new Model(),
-    tabName,
-    baseUrl,
-    csvUrl = null,
-    settings = getSettingsForTreePlugin(baseUrl),
-  }) {
-    this.state = state;
-    this.routeState = routeState;
-    this.baseUrl = baseUrl;
-    this.csvUrl = csvUrl;
-    this.tabName = tabName;
-    this.listenTo(this.routeState, "change:testResultTab", this.render);
-    this.settings = settings;
-  }
-
-  @on("click .tree__info")
-  onInfoClick() {
-    const show = this.settings.isShowGroupInfo();
-    this.settings.setShowGroupInfo(!show);
-    gtag("tree_info_click", { enable: !show });
-  }
-
-  onRender() {
-    this.showChildView(
-      "content",
-      new TreeView({
-        state: this.state,
-        routeState: this.routeState,
-        tabName: this.tabName,
-        baseUrl: this.baseUrl,
-        settings: this.settings,
-        collection: this.collection,
-      }),
-    );
-
-    this.showChildView(
-      "search",
-      new NodeSearchView({
-        state: this.state,
-      }),
-    );
-    this.showChildView(
-      "sorter",
-      new NodeSorterView({
-        settings: this.settings,
-      }),
-    );
-    this.showChildView(
-      "filter",
-      new StatusToggleView({
-        settings: this.settings,
-        statistic: this.collection.statistic,
-      }),
-    );
-    this.showChildView(
-      "filterMarks",
-      new MarksToggleView({
-        settings: this.settings,
-      }),
-    );
-  }
-
-  templateContext() {
-    return {
-      cls: this.className,
-      showGroupInfo: this.settings.isShowGroupInfo(),
-      tabName: this.tabName,
-      shownCases: 0,
-      totalCases: 0,
-      filtered: false,
-      csvUrl: this.csvUrl,
-    };
-  }
-}
-
-export default TreeViewContainer;

package/src/components/tree-view-container/styles.scss

@@ -1,38 +0,0 @@
-@import "../../variables.scss";
-
-.tree {
-  &__ctrl {
-    display: flex;
-    flex-wrap: wrap;
-    border-top: 1px solid $border-color;
-    background: $pane-overlay-bg-hover;
-    padding: 4px 0;
-  }
-  &__filter,
-  &__sorter,
-  &__filter-marks {
-    padding: 0 $gap-size 0 $gap-size;
-    position: relative;
-    white-space: nowrap;
-  }
-  &__strut {
-    flex: 1;
-  }
-  &__empty {
-    border-top: 1px solid #eceff1;
-    padding: 8px 0 0 15px;
-  }
-  .pane__controls {
-    display: flex;
-  }
-  &__info,
-  &__download {
-    cursor: pointer;
-    padding: 7px;
-    color: $text-color;
-    opacity: 0.7;
-    &:hover {
-      opacity: 1;
-    }
-  }
-}

package/src/components/widget-status/WidgetStatusView.hbs

@@ -1,21 +0,0 @@
-<h2 class="widget__title">
-    {{t title}}
-    <span class="widget__subtitle">{{t 'component.widgetStatus.total' count=total}}</span>
-</h2>
-<div class="table table_hover widget__table">
-    {{#each items}}
-        <{{../rowTag}} class="table__row" href="#{{../baseUrl}}/{{uid}}">
-            <div class="table__col">{{name}}</div>
-            <div class="table__col">
-                {{status-bar statistic}}
-            </div>
-        </{{../rowTag}}>
-    {{/each}}
-    {{#if showAll}}
-        <a class="table__row" href="#{{baseUrl}}">
-            <div class="table__col table__col_center">
-                {{t 'component.widgetStatus.showAll'}}
-            </div>
-        </a>
-    {{/if}}
-</div>

package/src/components/widget-status/WidgetStatusView.js

@@ -1,17 +0,0 @@
-import { View } from "backbone.marionette";
-import template from "./WidgetStatusView.hbs";
-
-export default class WidgetStatusView extends View {
-  template = template;
-
-  serializeData() {
-    const showLinks = typeof this.showLinks !== "undefined" ? this.showLinks : true;
-    const showAll = typeof this.showAll !== "undefined" ? this.showAll : true;
-    return Object.assign(super.serializeData(), {
-      rowTag: showLinks ? "a" : "span",
-      title: this.title,
-      showAll: showAll,
-      baseUrl: this.baseUrl,
-    });
-  }
-}