summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
blob: e618fb3daaebe250e06af68e22b30846a39ffa40 (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
<script>
import { mapActions } from 'vuex';
import { sprintf, __ } from '~/locale';
import { GlModal } from '@gitlab/ui';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';

export default {
  components: {
    GlModal,
    FileIcon,
    ChangedFileIcon,
  },
  props: {
    activeFile: {
      type: Object,
      required: true,
    },
  },
  computed: {
    discardModalId() {
      return `discard-file-${this.activeFile.path}`;
    },
    discardModalTitle() {
      return sprintf(__('Discard changes to %{path}?'), { path: this.activeFile.path });
    },
    isStaged() {
      return !this.activeFile.changed && this.activeFile.staged;
    },
  },
  methods: {
    ...mapActions(['stageChange', 'unstageChange', 'discardFileChanges']),
    showDiscardModal() {
      this.$refs.discardModal.show();
    },
    discardChanges(path) {
      this.unstageChange(path);
      this.discardFileChanges(path);
    },
  },
};
</script>

<template>
  <div class="d-flex ide-commit-editor-header align-items-center">
    <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
    <strong class="mr-2">
      <template v-if="activeFile.prevPath && activeFile.prevPath !== activeFile.path">
        {{ activeFile.prevPath }} &#x2192;
      </template>
      {{ activeFile.path }}
    </strong>
    <changed-file-icon :file="activeFile" :is-centered="false" />
    <div class="ml-auto">
      <button
        v-if="!isStaged"
        ref="discardButton"
        type="button"
        class="btn btn-remove btn-inverted append-right-8"
        @click="showDiscardModal"
      >
        {{ __('Discard changes') }}
      </button>
    </div>
    <gl-modal
      ref="discardModal"
      ok-variant="danger"
      cancel-variant="light"
      :ok-title="__('Discard changes')"
      :modal-id="discardModalId"
      :title="discardModalTitle"
      @ok="discardChanges(activeFile.path)"
    >
      {{ __("You will lose all changes you've made to this file. This action cannot be undone.") }}
    </gl-modal>
  </div>
</template>