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

100% Statements 1/1
100% Branches 0/0
100% Functions 1/1
100% Lines 1/1

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                                                                                                                                60x                                        
<script>
import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import { SIDE_RIGHT } from '../constants';
import { otherSide } from '../utils';
 
export default {
  directives: {
    tooltip: GlTooltipDirective,
  },
  components: {
    GlIcon,
  },
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    side: {
      type: String,
      required: true,
    },
    currentView: {
      type: String,
      required: false,
      default: '',
    },
    isOpen: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    otherSide() {
      return otherSide(this.side);
    },
  },
  methods: {
    isActiveTab(tab) {
      return this.isOpen && tab.views.some((view) => view.name === this.currentView);
    },
    buttonClasses(tab) {
      return [
        {
          'is-right': this.side === SIDE_RIGHT,
          active: this.isActiveTab(tab),
        },
        ...(tab.buttonClasses || []),
      ];
    },
    clickTab(e, tab) {
      e.currentTarget.blur();
      this.$root.$emit(BV_HIDE_TOOLTIP);
 
      if (this.isActiveTab(tab)) {
        this.$emit('close');
      } else {
        this.$emit('open', tab.views[0]);
      }
    },
  },
};
</script>
<template>
  <nav class="ide-activity-bar">
    <ul class="list-unstyled">
      <li v-for="tab of tabs" :key="tab.title">
        <button
          v-tooltip="{ container: 'body', placement: otherSide }"
          :title="tab.title"
          :aria-label="tab.title"
          :class="buttonClasses(tab)"
          :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`"
          class="ide-sidebar-link"
          type="button"
          @click="clickTab($event, tab)"
        >
          <gl-icon :size="16" :name="tab.icon" />
        </button>
      </li>
    </ul>
  </nav>
</template>