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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<script>
import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { mapActions } from 'vuex';
import {
TRANSITION_LOAD_START,
TRANSITION_LOAD_ERROR,
TRANSITION_LOAD_SUCCEED,
TRANSITION_ACKNOWLEDGE_ERROR,
STATE_IDLING,
STATE_LOADING,
STATE_ERRORED,
RENAMED_DIFF_TRANSITIONS,
} from '~/diffs/constants';
import { truncateSha } from '~/lib/utils/text_utility';
import { __ } from '~/locale';
export default {
STATE_LOADING,
STATE_ERRORED,
TRANSITIONS: RENAMED_DIFF_TRANSITIONS,
uiText: {
showLink: __('Show file contents'),
commitLink: __('View file @ %{commitSha}'),
description: __('File renamed with no changes.'),
loadError: __('Unable to load file contents. Try again later.'),
},
components: {
GlAlert,
GlLink,
GlLoadingIcon,
GlSprintf,
},
props: {
diffFile: {
type: Object,
required: true,
},
},
data() {
return {
state: STATE_IDLING,
};
},
computed: {
shortSha() {
return truncateSha(this.diffFile.content_sha);
},
canLoadFullDiff() {
return this.diffFile.alternate_viewer.name === 'text';
},
},
methods: {
...mapActions('diffs', ['switchToFullDiffFromRenamedFile']),
transition(transitionEvent) {
const key = `${this.state}:${transitionEvent}`;
if (this.$options.TRANSITIONS[key]) {
this.state = this.$options.TRANSITIONS[key];
}
},
is(state) {
return this.state === state;
},
switchToFull() {
this.transition(TRANSITION_LOAD_START);
this.switchToFullDiffFromRenamedFile({ diffFile: this.diffFile })
.then(() => {
this.transition(TRANSITION_LOAD_SUCCEED);
})
.catch(() => {
this.transition(TRANSITION_LOAD_ERROR);
});
},
clickLink(event) {
if (this.canLoadFullDiff) {
event.preventDefault();
this.switchToFull();
}
},
dismissError() {
this.transition(TRANSITION_ACKNOWLEDGE_ERROR);
},
},
};
</script>
<template>
<div class="nothing-here-block">
<gl-loading-icon v-if="is($options.STATE_LOADING)" />
<template v-else>
<gl-alert
v-show="is($options.STATE_ERRORED)"
class="gl-mb-5 gl-text-left"
variant="danger"
@dismiss="dismissError"
>{{ $options.uiText.loadError }}</gl-alert
>
<span test-id="plaintext">{{ $options.uiText.description }}</span>
<gl-link :href="diffFile.view_path" @click="clickLink">
<span v-if="canLoadFullDiff">{{ $options.uiText.showLink }}</span>
<gl-sprintf v-else :message="$options.uiText.commitLink">
<template #commitSha>{{ shortSha }}</template>
</gl-sprintf>
</gl-link>
</template>
</div>
</template>
|
