All files / ee/app/assets/javascripts/operations/components/dashboard project_header.vue

100% Statements 4/4
100% Branches 2/2
100% Functions 3/3
100% Lines 4/4

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                                                         75x     75x                 2x                                                                                  
<script>
import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
export default {
  components: {
    ProjectAvatar,
    GlButton,
    GlLink,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    project: {
      type: Object,
      required: true,
    },
    hasPipelineFailed: {
      type: Boolean,
      required: false,
      default: false,
    },
    hasErrors: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    title() {
      return __('Remove card');
    },
    headerClasses() {
      return {
        'dashboard-card-header-warning': this.hasErrors,
        'dashboard-card-header-failed': this.hasPipelineFailed,
        'bg-light': !this.hasErrors && !this.hasPipelineFailed,
      };
    },
  },
  methods: {
    onRemove() {
      this.$emit('remove', this.project.remove_path);
    },
  },
};
</script>
 
<template>
  <div
    :class="headerClasses"
    class="card-header gl-border-0 gl-py-3 gl-display-flex gl-align-items-center"
  >
    <project-avatar
      :project-id="project.id"
      :project-name="project.name"
      :project-avatar-url="project.avatar_url"
      :size="24"
      class="gl-mr-3"
    />
    <div class="gl-flex-grow-1 block-truncated">
      <gl-link
        v-gl-tooltip
        class="gl-text-black-normal"
        :href="project.web_url"
        :title="project.name_with_namespace"
        data-testid="project-link"
      >
        <span data-testid="project-namespace">{{ project.namespace.name }} /</span>
        <span class="gl-font-weight-bold" data-testid="project-name"> {{ project.name }}</span>
      </gl-link>
    </div>
    <gl-button
      v-gl-tooltip
      category="tertiary"
      :title="title"
      :aria-label="title"
      icon="close"
      data-testid="remove-project-button"
      @click="onRemove"
    />
  </div>
</template>