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

100% Statements 8/8
100% Branches 2/2
100% Functions 2/2
100% Lines 8/8

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  3x 3x 3x 3x                             3x   3x   3x             72x                                                                                                                            
<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import { leftSidebarViews } from '../constants';
 
export default {
  components: {
    GlIcon,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  computed: {
    ...mapState(['currentActivityView', 'stagedFiles']),
  },
  methods: {
    ...mapActions(['updateActivityBarView']),
    changedActivityView(e, view) {
      e.currentTarget.blur();
 
      this.updateActivityBarView(view);
 
      this.$root.$emit(BV_HIDE_TOOLTIP);
    },
  },
  leftSidebarViews,
};
</script>
 
<template>
  <nav class="ide-activity-bar" data-testid="left-sidebar">
    <ul class="list-unstyled">
      <li>
        <button
          v-gl-tooltip.right.viewport
          :class="{
            active: currentActivityView === $options.leftSidebarViews.edit.name,
          }"
          :title="s__('IDE|Edit')"
          :aria-label="s__('IDE|Edit')"
          data-container="body"
          data-placement="right"
          data-qa-selector="edit_mode_tab"
          type="button"
          class="ide-sidebar-link js-ide-edit-mode"
          @click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)"
        >
          <gl-icon name="code" />
        </button>
      </li>
      <li>
        <button
          v-gl-tooltip.right.viewport
          :class="{
            active: currentActivityView === $options.leftSidebarViews.review.name,
          }"
          :title="s__('IDE|Review')"
          :aria-label="s__('IDE|Review')"
          data-container="body"
          data-placement="right"
          type="button"
          class="ide-sidebar-link js-ide-review-mode"
          @click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)"
        >
          <gl-icon name="review-list" />
        </button>
      </li>
      <li>
        <button
          v-gl-tooltip.right.viewport
          :class="{
            active: currentActivityView === $options.leftSidebarViews.commit.name,
          }"
          :title="s__('IDE|Commit')"
          :aria-label="s__('IDE|Commit')"
          data-container="body"
          data-placement="right"
          data-qa-selector="commit_mode_tab"
          type="button"
          class="ide-sidebar-link js-ide-commit-mode"
          @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
        >
          <gl-icon name="commit" />
          <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
            {{ stagedFiles.length }}
          </div>
        </button>
      </li>
    </ul>
  </nav>
</template>