All files / ee/app/assets/javascripts/groups/settings/compliance_frameworks/components list_item.vue

100% Statements 5/5
100% Branches 2/2
100% Functions 2/2
100% Lines 5/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 66 67 68 69 70 71 72 73 74 75  2x 2x 2x                                           10x                 37x                                                                                
<script>
import { GlLabel, GlButton, GlTooltipDirective } from '@gitlab/ui';
import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
import { DELETE_BUTTON_LABEL, EDIT_BUTTON_LABEL } from '../constants';
 
export default {
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  components: {
    GlButton,
    GlLabel,
  },
  props: {
    framework: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    isScoped() {
      return this.framework.name.includes(SCOPED_LABEL_DELIMITER);
    },
  },
  i18n: {
    editFramework: EDIT_BUTTON_LABEL,
    deleteFramework: DELETE_BUTTON_LABEL,
  },
};
</script>
<template>
  <div
    class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-inset-border-1-gray-100 gl-px-5 gl-p-6 gl-mb-4 gl-rounded-base"
  >
    <div class="gl-w-quarter gl-mr-3 gl-flex-shrink-0">
      <gl-label
        :target="framework.editPath"
        :background-color="framework.color"
        :title="framework.name"
        :scoped="isScoped"
        :disabled="loading"
      />
    </div>
    <p class="gl-w-full gl-m-0!" data-testid="compliance-framework-description">
      {{ framework.description }}
    </p>
    <div v-if="framework.editPath" class="gl-display-flex">
      <gl-button
        v-gl-tooltip="$options.i18n.editFramework"
        :disabled="loading"
        :aria-label="$options.i18n.editFramework"
        :href="framework.editPath"
        data-testid="compliance-framework-edit-button"
        icon="pencil"
        category="tertiary"
      />
      <gl-button
        v-gl-tooltip="$options.i18n.deleteFramework"
        class="gl-ml-3"
        :loading="loading"
        :disabled="loading"
        :aria-label="$options.i18n.deleteFramework"
        data-testid="compliance-framework-delete-button"
        icon="remove"
        category="tertiary"
        @click="$emit('delete', framework)"
      />
    </div>
  </div>
</template>