94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<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" data-testid="signature-status">
|
|
{{ statusConfig.label }}
|
|
</gl-badge>
|
|
</button>
|
|
<gl-popover target="signature" triggers="focus" data-testid="signature-info">
|
|
<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>
|