@allurereport/web-allure2 3.0.0-beta.9

package/src/components/side-nav/SideNavView.js

@@ -0,0 +1,81 @@
+import { View } from "backbone.marionette";
+import { escapeExpression as escape } from "handlebars/runtime.js";
+import { findWhere } from "underscore";
+import LanguageSelectView from "@/components/language-select/LanguageSelectView.js";
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import { className, on } from "@/decorators/index.js";
+import router from "@/router.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import settings from "@/utils/settings.js";
+import { LANGUAGES } from "@/utils/translation.js";
+import template from "./SideNavView.hbs";
+import "./styles.scss";
+
+@className("side-nav")
+class SideNavView extends View {
+  template = template;
+
+  initialize() {
+    this.tabs = pluginsRegistry.tabs.map(({ tabName, icon, title }) => ({
+      tabName,
+      icon,
+      title,
+      active: this.isTabActive(tabName),
+    }));
+    this.tooltip = new TooltipView({ position: "right" });
+    this.langSelect = new LanguageSelectView();
+  }
+
+  onRender() {
+    this.$el.toggleClass("side-nav_collapsed", settings.isSidebarCollapsed());
+  }
+
+  onDestroy() {
+    this.tooltip.hide();
+  }
+
+  serializeData() {
+    return {
+      language: findWhere(LANGUAGES, { id: settings.getLanguage() }),
+      tabs: this.tabs,
+    };
+  }
+
+  isTabActive(name) {
+    const currentUrl = router.getCurrentUrl();
+    return name ? currentUrl.indexOf(name) === 0 : currentUrl === name;
+  }
+
+  @on("mouseenter [data-tooltip]")
+  onSidelinkHover(e) {
+    if (this.$el.hasClass("side-nav_collapsed")) {
+      const el = this.$(e.currentTarget);
+      this.tooltip.show(escape(el.data("tooltip")), el);
+    }
+  }
+
+  @on("mouseleave [data-tooltip]")
+  onSidelinkLeave() {
+    this.tooltip.hide();
+  }
+
+  @on("click .side-nav__collapse")
+  onCollapseClick() {
+    this.$el.toggleClass("side-nav_collapsed");
+    settings.setSidebarCollapsed(this.$el.hasClass("side-nav_collapsed"));
+    this.tooltip.hide();
+  }
+
+  @on("click .side-nav__language")
+  @on("click .side-nav__language-small")
+  onLanguageClick(e) {
+    if (this.langSelect.isVisible()) {
+      this.langSelect.hide();
+    } else {
+      this.langSelect.show(this.$(e.currentTarget));
+    }
+    this.tooltip.hide();
+  }
+}
+
+export default SideNavView;

package/src/components/side-nav/styles.scss

@@ -0,0 +1,118 @@
+@import "../../variables.scss";
+
+.side-nav {
+  background: $app-nav-bg;
+  width: $sidebar-full-width;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+
+  &__head {
+    margin: $gap-size 0;
+    padding-bottom: 5px;
+    border-bottom: 1px solid $sidebar-separator-color;
+  }
+
+  &__brand {
+    color: $sidebar-brand-color;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    font-size: 26px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    transition: all 0.3s;
+    background-size: auto auto;
+
+    & > svg {
+      flex: 0 0 40px;
+    }
+  }
+
+  &__brand-text {
+    padding: 0 $gap-size;
+  }
+
+  &__menu {
+    margin: 0;
+    left: 0;
+    padding: 0;
+    list-style-type: none;
+    transition: width 0.3s;
+  }
+
+  &__footer {
+    margin-top: auto;
+    margin-bottom: $footer-gap-size;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &__item {
+    display: block;
+    font-size: 14px;
+  }
+
+  &__link,
+  &__collapse {
+    display: block;
+    line-height: 24px;
+    color: $text-muted-color;
+    text-decoration: none;
+    padding: 0.8em 0;
+    position: relative;
+
+    &_active {
+      color: $sidebar-active-text-color;
+      border-right: 4px solid $sidebar-active-accent-color;
+    }
+    &:hover {
+      color: $sidebar-hover-text-color;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    left: $gap-size;
+  }
+  &__text {
+    padding-left: 55px;
+    padding-right: 7px;
+  }
+
+  &__language-small {
+    display: block;
+    text-transform: capitalize;
+    padding: 0 5px;
+    text-overflow: ".";
+    max-width: 30px;
+    margin: 0 auto;
+  }
+  &__collapse {
+    cursor: pointer;
+    .side-nav__icon {
+      left: $gap-size + 5px;
+      transition: transform 0.1s;
+    }
+  }
+  &_collapsed {
+    width: $sidebar-collapsed;
+
+    .side-nav__collapse .side-nav__icon {
+      transform: rotate(180deg);
+    }
+
+    .side-nav__text,
+    .side-nav__brand-text {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    .side-nav__collapse,
+    .side-nav__link {
+      white-space: nowrap;
+    }
+  }
+}

package/src/components/status-toggle/StatusToggleView.hbs

@@ -0,0 +1,16 @@
+<div class="{{b 'status-toggle' 'items'}}">
+    {{t 'component.tree.filter'}}:
+    {{#each statuses}}
+        <div class="{{b 'status-toggle' 'item'}}">
+        {{#if active}}
+            <span class="y-label y-label_status_{{status}}"
+                  data-status="{{status}}"
+                  data-tooltip="{{t 'component.statusToggle.hideCases' status=statusName}}">{{count}}</span>
+        {{else}}
+            <span class="n-label n-label_status_{{status}}"
+                  data-status="{{status}}"
+                  data-tooltip="{{t 'component.statusToggle.showCases' status=statusName}}">{{count}}</span>
+        {{/if}}
+        </div>
+    {{/each}}
+</div>

package/src/components/status-toggle/StatusToggleView.js

@@ -0,0 +1,42 @@
+import { View } from "backbone.marionette";
+import { className, on } from "@/decorators/index.js";
+import translate from "@/helpers/t.js";
+import gtag from "@/utils/gtag.js";
+import { values } from "@/utils/statuses.js";
+import template from "./StatusToggleView.hbs";
+import "./styles.scss";
+
+@className("status-toggle")
+class StatusToggleView extends View {
+  template = template;
+
+  initialize({ settings, statistic }) {
+    this.settings = settings;
+    this.statistic = statistic;
+    this.listenTo(settings, "change", this.render);
+  }
+
+  serializeData() {
+    const statuses = this.settings.getVisibleStatuses();
+    return {
+      statuses: values.map((status) => ({
+        status,
+        statusName: translate(`status.${status}`, {}),
+        active: !!statuses[status],
+        count: this.statistic ? this.statistic[status.toLowerCase()] : 0,
+      })),
+    };
+  }
+
+  @on("click .y-label, .n-label")
+  onToggleStatus(e) {
+    const el = this.$(e.currentTarget);
+    const name = el.data("status");
+    const checked = el.hasClass("n-label");
+    const statuses = this.settings.getVisibleStatuses();
+    this.settings.setVisibleStatuses(Object.assign({}, statuses, { [name]: checked }));
+    gtag("status_toggle_click", { status: name, checked });
+  }
+}
+
+export default StatusToggleView;

package/src/components/status-toggle/styles.scss

@@ -0,0 +1,35 @@
+@import "../../mixins.scss";
+
+.status-toggle {
+  &__items {
+    display: block;
+    user-select: none;
+    word-break: break-word;
+  }
+  &__item {
+    cursor: pointer;
+    padding: 5px 0 5px 0;
+    display: inline-block;
+    white-space: nowrap;
+  }
+}
+
+.y-label {
+  vertical-align: baseline;
+  letter-spacing: 1px;
+  color: #fff;
+  padding: 2px 4px 2px 5px;
+  border-radius: 3px;
+  @include status-bg-bright();
+}
+
+.n-label {
+  vertical-align: baseline;
+  letter-spacing: 1px;
+  padding: 1px 3px 1px 4px;
+  border-radius: 3px;
+  border: 1px solid;
+  font-weight: bold;
+  @include status-text();
+  @include status-border();
+}

package/src/components/testresult/TestResultView.hbs

@@ -0,0 +1,32 @@
+{{#if fullName}}
+    <div class="pane__subtitle long-line line-ellipsis">
+        {{> ../../blocks/clipboard-copy/clipboard-copy value=fullName}}
+        <span class="fullname__body">{{fullName}}</span>
+    </div>
+{{/if}}
+<h2 class="{{b 'pane' 'title' borderless=true}}">
+    <div class="{{b cls 'status'}}">
+        <span class="label label_status_{{status}}">{{t statusName}}</span>
+    </div>
+    <div class="{{b cls 'name'}}">
+        {{#if flaky}}
+            {{allure-icon 'flaky'}}
+        {{/if}}
+        {{#if newFailed}}
+            {{allure-icon 'newFailed'}}
+        {{/if}}
+        {{#if newPassed}}
+            {{allure-icon 'newPassed'}}
+        {{/if}}
+        {{#if newBroken}}
+            {{allure-icon 'newBroken'}}
+        {{/if}}
+        {{#if retriesStatusChange}}
+            {{allure-icon 'retriesStatusChange'}}
+        {{/if}}
+        <span class="long-line">{{name}}</span>
+    </div>
+</h2>
+
+{{> ../../blocks/tabs/tabs}}
+<div class="{{b cls 'content'}}"></div>

package/src/components/testresult/TestResultView.js

@@ -0,0 +1,90 @@
+import { View } from "backbone.marionette";
+import { findWhere } from "underscore";
+import AttachmentView from "@/components/attachment/AttachmentView.js";
+import ErrorSplashView from "@/components/error-splash/ErrorSplashView.js";
+import ModalView from "@/components/modal/ModalView.js";
+import TestResultOverviewView from "@/components/testresult-overview/TestResultOverviewView.js";
+import { behavior, className, on, regions } from "@/decorators/index.js";
+import translate from "@/helpers/t.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import template from "./TestResultView.hbs";
+import "./styles.scss";
+
+const subViews = [{ id: "", name: "testResult.overview.name", View: TestResultOverviewView }];
+
+@className("test-result")
+@behavior("TooltipBehavior", { position: "left" })
+@behavior("ClipboardBehavior")
+@regions({
+  content: ".test-result__content",
+})
+class TestResultView extends View {
+  template = template;
+
+  initialize({ routeState }) {
+    this.routeState = routeState;
+    this.tabs = subViews.concat(pluginsRegistry.testResultTabs);
+    this.tabName = this.routeState.get("testResultTab") || "";
+    this.listenTo(this.routeState, "change:testResultTab", (_, tabName) => this.onTabChange(tabName));
+    this.listenTo(this.routeState, "change:attachment", (_, uid) => this.onShowAttachment(uid));
+  }
+
+  onRender() {
+    const subView = findWhere(this.tabs, { id: this.tabName });
+    this.showChildView(
+      "content",
+      !subView
+        ? new ErrorSplashView({ code: 404, message: `Tab "${this.tabName}" not found` })
+        : new subView.View(this.options),
+    );
+
+    const attachment = this.routeState.get("attachment");
+    if (attachment) {
+      this.onShowAttachment(attachment);
+    }
+  }
+
+  onTabChange(tabName) {
+    this.tabName = tabName || "";
+    this.render();
+  }
+
+  onShowAttachment(uid) {
+    if (!uid && this.modalView) {
+      this.modalView.destroy();
+    }
+
+    if (uid) {
+      const attachment = this.model.getAttachment(uid);
+      this.modalView = new ModalView({
+        childView: attachment
+          ? new AttachmentView({ attachment, fullScreen: true })
+          : new ErrorSplashView({ code: 404, message: translate("errors.missedAttachment") }),
+        title: attachment ? attachment.name || attachment.source : translate("errors.notFound"),
+      });
+      this.modalView.show();
+    }
+  }
+
+  templateContext() {
+    const { baseUrl } = this.options;
+    return {
+      cls: this.className,
+      statusName: `status.${this.model.get("status")}`,
+      links: this.tabs.map((view) => {
+        return {
+          href: `${baseUrl}/${view.id}`,
+          name: view.name,
+          active: view.id === this.tabName,
+        };
+      }),
+    };
+  }
+
+  @on("click .status-details__trace-toggle")
+  onStacktraceClick(e) {
+    this.$(e.currentTarget).closest(".status-details").toggleClass("status-details__expanded");
+  }
+}
+
+export default TestResultView;

package/src/components/testresult/styles.scss

@@ -0,0 +1,29 @@
+@import "../../variables.scss";
+@import "../../mixins.scss";
+
+.test-result {
+  &__name {
+    padding-left: 10px;
+  }
+  &__content {
+    margin-bottom: 300px;
+  }
+}
+
+.app__content > .test-result {
+  position: absolute;
+  width: 100%;
+}
+
+.testresult__failure_expanded > .testresult__trace {
+  display: block;
+}
+
+.message {
+  border-bottom: 3px solid;
+  @include status-border();
+}
+
+.fullname__copy {
+  cursor: pointer;
+}

package/src/components/testresult-execution/TestResultExecutionView.hbs

@@ -0,0 +1,13 @@
+<h3 class="test-result-execution__title">{{t 'testResult.execution.name'}}</h3>
+
+{{#if hasContent}}
+    <div class="execution__content">
+        {{~> stages-block stages=before name=(t 'testResult.execution.setup') baseUrl=baseUrl expanded=false}}
+        {{~> stages-block stages=test name=(t 'testResult.execution.body') baseUrl=baseUrl expanded=true}}
+        {{~> stages-block stages=after name=(t 'testResult.execution.teardown') baseUrl=baseUrl expanded=false}}
+    </div>
+{{else}}
+    <div class="{{b 'pane' 'section'}}">
+        No information about test execution is available.
+    </div>
+{{/if}}

package/src/components/testresult-execution/TestResultExecutionView.js

@@ -0,0 +1,85 @@
+import { Model } from "backbone";
+import { View } from "backbone.marionette";
+import $ from "jquery";
+import AttachmentView from "@/components/attachment/AttachmentView.js";
+import { className, on } from "@/decorators/index.js";
+import router from "@/router.js";
+import { makeArray } from "@/utils/arrays.js";
+import template from "./TestResultExecutionView.hbs";
+import "./styles.scss";
+
+@className("test-result-execution")
+class TestResultExecutionView extends View {
+  template = template;
+
+  initialize() {
+    this.state = new Model();
+    this.routeState = this.options.routeState;
+    this.listenTo(this.state, "change:attachment", this.highlightSelectedAttachment, this);
+  }
+
+  onRender() {
+    const attachment = this.routeState.get("attachment");
+    if (attachment) {
+      this.highlightSelectedAttachment(attachment);
+    }
+  }
+
+  highlightSelectedAttachment(currentAttachment) {
+    this.$(".attachment-row").removeClass("attachment-row_selected");
+
+    const attachmentEl = this.$(`.attachment-row[data-uid="${currentAttachment}"]`);
+    attachmentEl.addClass("attachment-row_selected");
+    attachmentEl.parents(".step").addClass("step_expanded");
+  }
+
+  serializeData() {
+    const before = makeArray(this.model.get("beforeStages"));
+    const test = makeArray(this.model.get("testStage"));
+    const after = makeArray(this.model.get("afterStages"));
+    return {
+      hasContent: before.length + test.length + after.length > 0,
+      before: before,
+      test: test,
+      after: after,
+      baseUrl: this.options.baseUrl,
+    };
+  }
+
+  @on("click .step__header_hasContent")
+  onStepClick(e) {
+    this.$(e.currentTarget).parent().toggleClass("step_expanded");
+  }
+
+  @on("click .attachment-row")
+  onAttachmentClick(e) {
+    const attachmentUid = $(e.currentTarget).data("uid");
+    const name = `attachment__${attachmentUid}`;
+
+    if ($(e.currentTarget).hasClass("attachment-row_selected") && this.getRegion(name)) {
+      this.getRegion(name).destroy();
+    } else {
+      this.addRegion(name, { el: this.$(`.${name}`) });
+      this.getRegion(name).show(
+        new AttachmentView({
+          attachment: this.model.getAttachment(attachmentUid),
+        }),
+      );
+    }
+    this.$(e.currentTarget).toggleClass("attachment-row_selected");
+  }
+
+  @on("click .attachment-row__fullscreen")
+  onAttachmnetFullScrennClick(e) {
+    const attachment = $(e.currentTarget).closest(".attachment-row").data("uid");
+    router.setSearch({ attachment });
+    e.stopPropagation();
+  }
+
+  @on("click .parameters-table__cell")
+  onParameterClick(e) {
+    this.$(e.target).siblings().addBack().toggleClass("line-ellipsis");
+  }
+}
+
+export default TestResultExecutionView;

package/src/components/testresult-execution/stages-block.hbs

@@ -0,0 +1,47 @@
+{{#if stages}}
+    <div class="{{b 'step' expanded=expanded}}">
+        <div class="{{b 'step' 'header' hasContent=true stage=true}}">
+            <span class="step__arrow block__arrow">{{angle}}</span>
+            <span class="step__title">
+              {{name}}
+            </span>
+        </div>
+        <div class="{{b 'step' 'content'}}">
+            {{#each stages}}
+                {{#if name}}
+                    <div class="{{b 'step'}}">
+                        <div class="{{b 'step' 'header' hasContent=hasContent stage=true}}">
+                            {{#if hasContent}}
+                                <span class="{{b 'step' 'arrow'}} text_status_{{status}} block__arrow">{{arrow status fat=true}}</span>
+                            {{else}}
+                                <span class="{{b 'step' 'status'}} text_status_{{status}}">{{allure-icon status}}</span>
+                            {{/if}}
+                            <div class="{{b 'step' 'title'}}">
+                              {{name}}
+                              {{> ../../blocks/step-stats/step-stats . baseUrl=../../baseUrl}}
+                            </div>
+                        </div>
+                        <div class="{{b 'step' 'content'}}">
+                            {{> ../../blocks/parameters-table/parameters-table parameters=parameters }}
+                            {{~> steps-list steps=steps baseUrl=../baseUrl}}
+                            {{#each attachments}}
+                                {{> ../../blocks/attachment-row/attachment-row . baseUrl=../../baseUrl}}
+                            {{/each}}
+                            {{#if shouldDisplayMessage}}
+                                {{~> ../../blocks/status-details/status-details .}}
+                            {{/if}}
+                        </div>
+                    </div>
+                {{else}}
+                    {{~> steps-list steps=steps baseUrl=../baseUrl}}
+                    {{#each attachments}}
+                        {{> ../../blocks/attachment-row/attachment-row . baseUrl=../../baseUrl}}
+                    {{/each}}
+                    {{#if shouldDisplayMessage}}
+                        {{~> ../../blocks/status-details/status-details .}}
+                    {{/if}}
+                {{/if}}
+            {{/each}}
+        </div>
+    </div>
+{{/if}}

package/src/components/testresult-execution/steps-list.hbs

@@ -0,0 +1,31 @@
+{{#each steps}}
+  <div class="step">
+    {{#if attachmentStep}}
+      {{#each attachments}}
+        {{> ../../blocks/attachment-row/attachment-row . baseUrl=../../baseUrl}}
+      {{/each}}
+    {{else}}
+      <div class="{{b 'step' 'header' hasContent=hasContent}} long-line">
+        {{#if hasContent}}
+          <span class="{{b 'step' 'arrow'}} text_status_{{status}} block__arrow">{{arrow status fat=true}}</span>
+        {{else}}
+          <span class="{{b 'step' 'status'}} text_status_{{status}}">{{allure-icon status}}</span>
+        {{/if}}
+        <div class="step__title">
+          <div class="step__name">{{text-with-links name}}</div>
+          {{> ../../blocks/step-stats/step-stats . baseUrl=../../baseUrl}}
+        </div>
+      </div>
+      <div class="step__content">
+        {{> ../../blocks/parameters-table/parameters-table parameters=parameters }}
+        {{~> steps-list steps=steps baseUrl=../baseUrl}}
+        {{#each attachments}}
+          {{> ../../blocks/attachment-row/attachment-row . baseUrl=../../baseUrl}}
+        {{/each}}
+        {{#if shouldDisplayMessage}}
+          {{~> ../../blocks/status-details/status-details .}}
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+{{/each}}