All files / ee/app/assets/javascripts/epic/components epic_header.vue

40% Statements 2/5
16.66% Branches 1/6
66.66% Functions 2/3
40% Lines 2/5

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  2x                                             1x                                                                                
<script>
// eslint-disable-next-line no-restricted-imports
import { mapState, mapGetters, mapActions } from 'vuex';
import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
import { STATUS_CLOSED, STATUS_OPEN, TYPE_EPIC, WORKSPACE_GROUP } from '~/issues/constants';
import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue';
import epicUtils from '../utils/epic_utils';
 
export default {
  TYPE_EPIC,
  WORKSPACE_GROUP,
  components: {
    IssuableHeader,
  },
  props: {
    formattedAuthor: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapState(['sidebarCollapsed', 'author', 'created', 'confidential', 'state']),
    ...mapGetters(['isEpicOpen']),
    statusIcon() {
      return this.isEpicOpen ? 'issue-open-m' : 'issue-close';
    },
  },
  mounted() {
    /**
     * This event is triggered from Notes app
     * when user clicks on `Close` button below
     * comment form.
     *
     * When event is triggered, we want to reflect Epic status change
     * across the UI so we directly call `requestEpicStatusChangeSuccess` action
     * to update store state.
     */
    epicUtils.bindDocumentEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, (e, isClosed) => {
      const isEpicOpen = e.detail ? !e.detail.isClosed : !isClosed;
      this.requestEpicStatusChangeSuccess({
        state: isEpicOpen ? STATUS_OPEN : STATUS_CLOSED,
      });
    });
  },
  methods: {
    ...mapActions(['toggleSidebar', 'requestEpicStatusChangeSuccess']),
  },
};
</script>
 
<template>
  <issuable-header
    class="gl-p-0 gl-mb-6 gl-mt-2 gl-md-mt-0"
    :author="formattedAuthor"
    :confidential="confidential"
    :created-at="created"
    :issuable-state="state"
    :issuable-type="$options.TYPE_EPIC"
    :status-icon="statusIcon"
    :workspace-type="$options.WORKSPACE_GROUP"
    show-work-item-type-icon
    @toggle="toggleSidebar({ sidebarCollapsed })"
  />
</template>