All files / app/assets/javascripts/design_management/components/design_notes toggle_replies_widget.vue

100% Statements 7/7
100% Branches 6/6
100% Functions 4/4
100% Lines 7/7

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  6x 6x 6x                                           17x     26x     26x               100x                                                              
<script>
import { GlIcon, GlButton, GlLink } from '@gitlab/ui';
import { __, n__ } from '~/locale';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
export default {
  name: 'ToggleNotesWidget',
  components: {
    GlIcon,
    GlButton,
    GlLink,
    TimeAgoTooltip,
  },
  props: {
    collapsed: {
      type: Boolean,
      required: true,
    },
    replies: {
      type: Array,
      required: true,
    },
  },
  computed: {
    lastReply() {
      return this.replies[this.replies.length - 1];
    },
    iconName() {
      return this.collapsed ? 'chevron-right' : 'chevron-down';
    },
    toggleText() {
      return this.collapsed
        ? `${this.replies.length} ${n__('reply', 'replies', this.replies.length)}`
        : __('Collapse replies');
    },
  },
};
</script>
 
<template>
  <li
    class="toggle-comments gl-bg-gray-50 gl-display-flex gl-align-items-center gl-py-3"
    :class="{ expanded: !collapsed }"
    data-testid="toggle-comments-wrapper"
  >
    <gl-icon :name="iconName" class="gl-ml-3" @click.stop="$emit('toggle')" />
    <gl-button
      variant="link"
      class="toggle-comments-button gl-ml-2 gl-mr-2"
      @click.stop="$emit('toggle')"
    >
      {{ toggleText }}
    </gl-button>
    <template v-if="collapsed">
      <span class="gl-text-gray-500">{{ __('Last reply by') }}</span>
      <gl-link
        :href="lastReply.author.webUrl"
        target="_blank"
        class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-ml-2 gl-mr-2"
      >
        {{ lastReply.author.name }}
      </gl-link>
      <time-ago-tooltip
        :time="lastReply.createdAt"
        tooltip-placement="bottom"
        class="gl-text-gray-500"
      />
    </template>
  </li>
</template>