All files / ee/app/assets/javascripts/analytics/productivity_analytics/components mr_table.vue

88.89% Statements 8/9
75% Branches 3/4
83.33% Functions 5/6
88.89% Lines 8/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115  2x 2x 2x                                                                 7x 21x     7x               21x           63x                                                                                                                        
<script>
import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
import Pagination from '~/vue_shared/components/pagination_links.vue';
import MergeRequestTableRow from './mr_table_row.vue';
 
export default {
  components: {
    GlDropdown,
    GlDropdownItem,
    GlIcon,
    MergeRequestTableRow,
    Pagination,
  },
  props: {
    mergeRequests: {
      type: Array,
      required: true,
    },
    pageInfo: {
      type: Object,
      required: true,
    },
    columnOptions: {
      type: Array,
      required: true,
    },
    metricType: {
      type: String,
      required: true,
    },
    metricLabel: {
      type: String,
      required: true,
    },
  },
  computed: {
    metricDropdownLabel() {
      return this.columnOptions.find((option) => option.key === this.metricType).label;
    },
    showPagination() {
      return this.pageInfo && this.pageInfo.total;
    },
  },
  methods: {
    onPageChange(page) {
      this.$emit('pageChange', page);
    },
    isSelectedMetric(metric) {
      return this.metricType === metric;
    },
  },
};
</script>
 
<template>
  <div class="mr-table">
    <div class="card">
      <div class="card-header border-bottom-0">
        <div role="row" class="gl-responsive-table-row table-row-header d-flex py-0">
          <div role="rowheader" class="table-section section-50 d-none d-md-flex">
            {{ __('Title') }}
          </div>
          <div role="rowheader" class="table-section section-50">
            <div class="d-flex">
              <span class="d-none d-md-flex metric-col">{{ __('Time to merge') }}</span>
 
              <gl-dropdown
                class="w-100 metric-col"
                toggle-class="dropdown-menu-toggle w-100"
                menu-class="w-100 mw-100"
                :text="metricDropdownLabel"
              >
                <gl-dropdown-item
                  v-for="option in columnOptions"
                  :key="option.key"
                  active-class="is-active"
                  class="w-100"
                  @click="$emit('columnMetricChange', option.key)"
                >
                  <span class="d-flex">
                    <gl-icon
                      class="flex-shrink-0 gl-mr-2"
                      :class="{
                        invisible: !isSelectedMetric(option.key),
                      }"
                      name="mobile-issue-close"
                    />
                    {{ option.label }}
                  </span>
                </gl-dropdown-item>
              </gl-dropdown>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body py-0">
        <merge-request-table-row
          v-for="model in mergeRequests"
          :key="model.id"
          :merge-request="model"
          :metric-type="metricType"
          :metric-label="metricLabel"
        />
      </div>
    </div>
 
    <pagination
      v-if="showPagination"
      :change="onPageChange"
      :page-info="pageInfo"
      class="justify-content-center gl-mt-3"
    />
  </div>
</template>