Welcome to mirror list, hosted at ThFree Co, Russian Federation.

signature_badge.vue « components « commit « javascripts « assets « app - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: edc7c9d2f968b2b804a8886cd74e31c38d0bf1a7 (plain)
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
87
88
89
90
91
92
93
94
<script>
import { GlBadge, GlLink, GlPopover } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { typeConfig, statusConfig } from '../constants';
import X509CertificateDetails from './x509_certificate_details.vue';

export default {
  components: {
    GlBadge,
    GlPopover,
    GlLink,
    X509CertificateDetails,
  },
  props: {
    signature: {
      type: Object,
      required: true,
    },
  },
  computed: {
    statusConfig() {
      return this.$options.statusConfig?.[this.signature?.verificationStatus];
    },
    typeConfig() {
      // eslint-disable-next-line no-underscore-dangle
      return this.$options.typeConfig?.[this.signature?.__typename];
    },
  },
  methods: {
    helpPagePath,
    getSubjectKeyIdentifierToDisplay(subjectKeyIdentifier) {
      // we need to remove : to not trigger secret detection scan
      return subjectKeyIdentifier.replaceAll(':', ' ');
    },
  },
  typeConfig,
  statusConfig,
};
</script>
<template>
  <span
    v-if="statusConfig && typeConfig"
    class="gl-display-flex gl-align-items-center gl-hover-cursor-pointer gl-ml-2"
  >
    <button
      id="signature"
      tabindex="0"
      data-testid="signature-badge"
      role="button"
      variant="link"
      class="gl-border-0 gl-outline-0! gl-p-0 gl-bg-transparent"
      :aria-label="statusConfig.label"
    >
      <gl-badge :variant="statusConfig.variant" size="md">
        {{ statusConfig.label }}
      </gl-badge>
    </button>
    <gl-popover target="signature" triggers="focus">
      <template #title>
        {{ statusConfig.title }}
      </template>
      <p data-testid="signature-description">
        {{ statusConfig.description }}
      </p>
      <p v-if="typeConfig.keyLabel" data-testid="signature-key-label">
        {{ typeConfig.keyLabel }}
        <span class="gl-font-monospace" data-testid="signature-key">
          {{ signature[typeConfig.keyNamespace] || __('Unknown') }}
        </span>
      </p>
      <x509-certificate-details
        v-if="signature.x509Certificate"
        :title="typeConfig.subjectTitle"
        :subject="signature.x509Certificate.subject"
        :subject-key-identifier="
          getSubjectKeyIdentifierToDisplay(signature.x509Certificate.subjectKeyIdentifier)
        "
      />
      <x509-certificate-details
        v-if="signature.x509Certificate && signature.x509Certificate.x509Issuer"
        :title="typeConfig.issuerTitle"
        :subject="signature.x509Certificate.x509Issuer.subject"
        :subject-key-identifier="
          getSubjectKeyIdentifierToDisplay(
            signature.x509Certificate.x509Issuer.subjectKeyIdentifier,
          )
        "
      />
      <gl-link :href="helpPagePath(typeConfig.helpLink.path)">
        {{ typeConfig.helpLink.label }}
      </gl-link>
    </gl-popover>
  </span>
</template>