All files / app/assets/javascripts/ide/components/commit_sidebar editor_header.vue

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
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
 
6x
 
 
6x
 
 
 
 
 
1x
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlModal, GlButton } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapActions } from 'vuex';
import { sprintf, __ } from '~/locale';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
 
export default {
  components: {
    GlModal,
    GlButton,
    FileIcon,
    ChangedFileIcon,
  },
  props: {
    activeFile: {
      type: Object,
      required: true,
    },
  },
  modal: {
    actionPrimary: {
      text: __('Discard changes'),
      attributes: {
        variant: 'danger',
      },
    },
    actionCancel: {
      text: __('Cancel'),
      attributes: {
        variant: 'default',
      },
    },
  },
  computed: {
    discardModalId() {
      return `discard-file-${this.activeFile.path}`;
    },
    discardModalTitle() {
      return sprintf(__('Discard changes to %{path}?'), { path: this.activeFile.path });
    },
    canDiscard() {
      return this.activeFile.changed || this.activeFile.staged;
    },
  },
  methods: {
    ...mapActions(['unstageChange', 'discardFileChanges']),
    showDiscardModal() {
      this.$refs.discardModal.show();
    },
    discardChanges(path) {
      this.unstageChange(path);
      this.discardFileChanges(path);
    },
  },
};
</script>
 
<template>
  <div class="gl-display-flex ide-commit-editor-header gl-align-items-center">
    <file-icon :file-name="activeFile.name" :size="16" class="gl-mr-3" />
    <strong class="gl-mr-3">
      <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">
      <gl-button
        v-if="canDiscard"
        ref="discardButton"
        category="secondary"
        variant="danger"
        class="gl-mr-3"
        @click="showDiscardModal"
      >
        {{ __('Discard changes') }}
      </gl-button>
    </div>
    <gl-modal
      ref="discardModal"
      :modal-id="discardModalId"
      :title="discardModalTitle"
      :action-primary="$options.modal.actionPrimary"
      :action-cancel="$options.modal.actionCancel"
      @primary="discardChanges(activeFile.path)"
    >
      {{ __("You will lose all changes you've made to this file. This action cannot be undone.") }}
    </gl-modal>
  </div>
</template>