All files / ee/app/assets/javascripts/approvals/components/license_compliance index.vue

100% Statements 17/17
100% Branches 7/7
100% Functions 11/11
100% Lines 17/17

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  3x             3x 3x 3x 3x                         14x 11x 11x 10x   11x 21x     11x 11x     11x           14x           1x           74x                                                
<script>
import {
  GlButton,
  GlIcon,
  GlLink,
  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
  GlSprintf,
} from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { APPROVALS, APPROVALS_MODAL } from 'ee/approvals/stores/modules/license_compliance';
import { s__ } from '~/locale';
import ModalLicenseCompliance from './modal.vue';
 
export default {
  components: {
    GlButton,
    GlIcon,
    GlLink,
    GlSkeletonLoading,
    GlSprintf,
    ModalLicenseCompliance,
  },
  computed: {
    ...mapState({
      isLoading: (state) => state[APPROVALS].isLoading,
      rules: (state) => state[APPROVALS].rules,
      documentationPath: ({ settings }) => settings.approvalsDocumentationPath,
      licenseCheckRuleName: ({ settings }) => settings.lockedApprovalsRuleName,
    }),
    licenseCheckRule() {
      return this.rules?.find(({ name }) => name === this.licenseCheckRuleName);
    },
    hasLicenseCheckRule() {
      const { licenseCheckRule: { approvalsRequired = 0 } = {} } = this;
      return approvalsRequired > 0;
    },
    licenseCheckStatusText() {
      return this.hasLicenseCheckRule
        ? s__('LicenseCompliance|%{docLinkStart}License Approvals%{docLinkEnd} are active')
        : s__('LicenseCompliance|%{docLinkStart}License Approvals%{docLinkEnd} are inactive');
    },
  },
  created() {
    this.fetchRules();
  },
  methods: {
    ...mapActions(['fetchRules']),
    ...mapActions({
      openModal(dispatch, licenseCheckRule) {
        dispatch(`${APPROVALS_MODAL}/open`, licenseCheckRule);
      },
    }),
  },
};
</script>
<template>
  <span class="gl-display-inline-flex gl-align-items-center">
    <gl-button :loading="isLoading" @click="openModal(licenseCheckRule)"
      >{{ s__('LicenseCompliance|License Approvals') }}
    </gl-button>
    <span data-testid="licenseCheckStatus" class="gl-ml-3">
      <gl-skeleton-loading
        v-if="isLoading"
        :aria-label="__('loading')"
        :lines="1"
        class="gl-display-inline-flex gl-h-auto gl-align-items-center"
      />
      <span v-else class="gl-m-0 gl-font-weight-normal">
        <gl-icon name="information" :size="12" class="gl-text-blue-600" />
        <gl-sprintf :message="licenseCheckStatusText">
          <template #docLink="{ content }">
            <gl-link :href="documentationPath" target="_blank">{{ content }}</gl-link>
          </template>
        </gl-sprintf>
      </span>
    </span>
    <modal-license-compliance />
  </span>
</template>