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
|
<script>
import { GlSprintf, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
import { BLOB_RENDER_ERRORS } from './constants';
export default {
components: {
GlSprintf,
GlLink,
},
props: {
viewerError: {
type: String,
required: true,
},
blob: {
type: Object,
required: false,
default: () => ({}),
},
},
computed: {
notStoredExternally() {
return this.viewerError !== BLOB_RENDER_ERRORS.REASONS.EXTERNAL.id;
},
renderErrorReason() {
const defaultReasonPath = Object.keys(BLOB_RENDER_ERRORS.REASONS).find(
(reason) => BLOB_RENDER_ERRORS.REASONS[reason].id === this.viewerError,
);
const defaultReason = BLOB_RENDER_ERRORS.REASONS[defaultReasonPath].text;
return this.notStoredExternally
? defaultReason
: defaultReason[this.blob.externalStorage || 'default'];
},
renderErrorOptions() {
const load = {
...BLOB_RENDER_ERRORS.OPTIONS.LOAD,
condition: this.shouldShowLoadBtn,
};
const showSource = {
...BLOB_RENDER_ERRORS.OPTIONS.SHOW_SOURCE,
condition: this.shouldShowSourceBtn,
};
const download = {
...BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD,
href: this.blob.rawPath,
};
return [load, showSource, download];
},
shouldShowLoadBtn() {
return this.viewerError === BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id;
},
shouldShowSourceBtn() {
return this.blob.richViewer && this.blob.renderedAsText && this.notStoredExternally;
},
},
errorMessage: __(
'This content could not be displayed because %{reason}. You can %{options} instead.',
),
};
</script>
<template>
<div class="file-content code">
<div class="text-center py-4">
<gl-sprintf :message="$options.errorMessage">
<template #reason>{{ renderErrorReason }}</template>
<template #options>
<template v-for="option in renderErrorOptions">
<span v-if="option.condition" :key="option.text">
<gl-link
:href="option.href"
:target="option.target"
:data-test-id="`option-${option.id}`"
@click="option.event && $emit(option.event)"
>{{ option.text }}</gl-link
>
{{ option.conjunction }}
</span>
</template>
</template>
</gl-sprintf>
</div>
</div>
</template>
|
