All files / app/assets/javascripts/vue_merge_request_widget/components/approvals approvals_summary.vue

89.66% Statements 26/29
88.89% Branches 16/18
90.91% Functions 10/11
89.66% Lines 26/29

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  6x 6x 6x         6x                                   48x                   11x 10x                           1x 1x                   10x 1x     9x 1x     8x 6x     2x     11x   10x 10x 7x   6x   2x 2x     5x     10x           51x                    
<script>
import { toNounSeriesText } from '~/lib/utils/grammar';
import { n__, sprintf } from '~/locale';
import {
  APPROVED_BY_YOU_AND_OTHERS,
  APPROVED_BY_YOU,
  APPROVED_BY_OTHERS,
} from '~/vue_merge_request_widget/components/approvals/messages';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 
export default {
  components: {
    UserAvatarList,
  },
  props: {
    approved: {
      type: Boolean,
      required: true,
    },
    approvalsLeft: {
      type: Number,
      required: true,
    },
    rulesLeft: {
      type: Array,
      required: false,
      default: () => [],
    },
    approvers: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    approvalLeftMessage() {
      if (this.rulesLeft.length) {
        return sprintf(
          n__(
            'Requires %{count} approval from %{names}.',
            'Requires %{count} approvals from %{names}.',
            this.approvalsLeft,
          ),
          {
            names: toNounSeriesText(this.rulesLeft),
            count: this.approvalsLeft,
          },
          false,
        );
      }
 
E      if (!this.approved) {
        return n__(
          'Requires %d approval from eligible users.',
          'Requires %d approvals from eligible users.',
          this.approvalsLeft,
        );
      }
 
      return '';
    },
    message() {
      if (this.approvedByMe && this.approvedByOthers) {
        return APPROVED_BY_YOU_AND_OTHERS;
      }
 
      if (this.approvedByMe) {
        return APPROVED_BY_YOU;
      }
 
      if (this.approved) {
        return APPROVED_BY_OTHERS;
      }
 
      return '';
    },
    hasApprovers() {
      return Boolean(this.approvers.length);
    },
    approvedByMe() {
      if (!this.currentUserId) {
        return false;
      }
      return this.approvers.some((approver) => approver.id === this.currentUserId);
    },
    approvedByOthers() {
I      if (!this.currentUserId) {
        return false;
      }
      return this.approvers.some((approver) => approver.id !== this.currentUserId);
    },
    currentUserId() {
      return gon.current_user_id;
    },
  },
};
</script>
 
<template>
  <div data-qa-selector="approvals_summary_content">
    <strong>{{ approvalLeftMessage }}</strong>
    <template v-if="hasApprovers">
      <span v-if="approvalLeftMessage">{{ message }}</span>
      <strong v-else>{{ message }}</strong>
      <user-avatar-list class="d-inline-block align-middle" :items="approvers" />
    </template>
  </div>
</template>