diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue | 107 |
1 files changed, 106 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue index 5c1ea59b471..eba6dd4d14c 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue @@ -1,3 +1,108 @@ +<script> +import { mapActions } from 'vuex'; +import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; + +import { __ } from '~/locale'; +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'; + +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: () => ({ + 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">{{ __('File moved') }}</div> + <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> |