All files / app/assets/javascripts/ide/components repo_tab.vue

82.61% Statements 19/23
68.18% Branches 15/22
100% Functions 8/8
82.61% Lines 19/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  2x 2x 2x   2x 2x 2x                                 13x             13x 3x   10x     16x   14x     13x             2x                     1x 1x       1x 1x             84x                                                        
<script>
import { GlIcon, GlTab } from '@gitlab/ui';
import { mapActions, mapGetters } 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';
import FileStatusIcon from './repo_file_status_icon.vue';
 
export default {
  components: {
    FileStatusIcon,
    FileIcon,
    GlIcon,
    ChangedFileIcon,
    GlTab,
  },
  props: {
    tab: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tabMouseOver: false,
    };
  },
  computed: {
    ...mapGetters(['getUrlForPath']),
    closeLabel() {
      if (this.fileHasChanged) {
        return sprintf(__('%{tabname} changed'), { tabname: this.tab.name });
      }
      return sprintf(__('Close %{tabname}'), { tabname: this.tab.name });
    },
    showChangedIcon() {
      if (this.tab.pending) return true;
 
      return this.fileHasChanged ? !this.tabMouseOver : false;
    },
    fileHasChanged() {
      return this.tab.changed || this.tab.tempFile || this.tab.staged || this.tab.deleted;
    },
  },
 
  methods: {
    ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']),
    clickFile(tab) {
E      if (tab.active) return;
 
      this.updateDelayViewerUpdated(true);
 
      if (tab.pending) {
        this.openPendingTab({ file: tab, keyPrefix: tab.staged ? 'staged' : 'unstaged' });
      } else {
        this.$router.push(this.getUrlForPath(tab.path));
      }
    },
    mouseOverTab() {
E      if (this.fileHasChanged) {
        this.tabMouseOver = true;
      }
    },
    mouseOutTab() {
E      if (this.fileHasChanged) {
        this.tabMouseOver = false;
      }
    },
  },
};
</script>
 
<template>
  <gl-tab
    :active="tab.active"
    :disabled="tab.pending"
    :title="tab.name"
    @click="clickFile(tab)"
    @mouseover="mouseOverTab"
    @mouseout="mouseOutTab"
  >
    <template #title>
      <div :title="getUrlForPath(tab.path)" class="multi-file-tab">
        <file-icon :file-name="tab.name" :size="16" />
        {{ tab.name }}
        <file-status-icon :file="tab" />
      </div>
      <button
        :aria-label="closeLabel"
        :disabled="tab.pending"
        type="button"
        class="multi-file-tab-close"
        @click.stop.prevent="closeFile(tab)"
      >
        <gl-icon v-if="!showChangedIcon" :size="12" name="close" />
        <changed-file-icon v-else :file="tab" />
      </button>
    </template>
  </gl-tab>
</template>