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

100% Statements 10/10
100% Branches 2/2
100% Functions 7/7
100% Lines 10/10

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  3x 3x 3x                                               16x     15x     15x     15x     16x         48x         57x                                                                        
<script>
import { GlLink, GlAvatar } from '@gitlab/ui';
import { sprintf, __, n__ } from '~/locale';
import MetricColumn from './metric_column.vue';
 
export default {
  components: {
    GlLink,
    GlAvatar,
    MetricColumn,
  },
  props: {
    mergeRequest: {
      type: Object,
      required: true,
    },
    metricType: {
      type: String,
      required: true,
    },
    metricLabel: {
      type: String,
      required: true,
    },
  },
  computed: {
    mrId() {
      return `!${this.mergeRequest.iid}`;
    },
    commitCount() {
      return n__('%d commit', '%d commits', this.mergeRequest.commits_count);
    },
    locPerCommit() {
      return sprintf(__('%{count} LOC/commit'), { count: this.mergeRequest.loc_per_commit });
    },
    filesTouched() {
      return sprintf(__('%{count} files touched'), { count: this.mergeRequest.files_touched });
    },
    selectedMetric() {
      return this.mergeRequest[this.metricType];
    },
  },
  methods: {
    isNumber(metric) {
      return typeof metric === 'number';
    },
  },
};
</script>
<template>
  <div class="gl-responsive-table-row-layout gl-responsive-table-row">
    <div
      class="table-section section-50 d-flex flex-row-reverse flex-md-row justify-content-between justify-content-md-start js-mr-details"
    >
      <div class="d-flex mr-md-2">
        <gl-avatar :src="mergeRequest.author_avatar_url" :size="16" />
      </div>
      <div class="d-flex flex-column flex-grow overflow-auto gl-mr-1">
        <h5 class="item-title mr-title my-0 d-block str-truncated">
          <gl-link :href="mergeRequest.merge_request_url" target="_blank">{{
            mergeRequest.title
          }}</gl-link>
        </h5>
        <ul class="horizontal-list list-items-separated text-secondary mb-0">
          <li>{{ mrId }}</li>
          <li v-if="isNumber(mergeRequest.commits_count)" ref="commitCount">{{ commitCount }}</li>
          <li v-if="isNumber(mergeRequest.loc_per_commit)" ref="locPerCommitCount">
            {{ locPerCommit }}
          </li>
          <li v-if="isNumber(mergeRequest.files_touched)" ref="filesTouchedCount">
            {{ filesTouched }}
          </li>
        </ul>
      </div>
    </div>
    <div class="table-section section-50 d-flex flex-row align-items-start js-mr-metrics">
      <metric-column
        type="days_to_merge"
        :value="mergeRequest.days_to_merge"
        :label="__('Time to merge')"
      />
      <metric-column :type="metricType" :value="selectedMetric" :label="metricLabel" />
    </div>
  </div>
</template>