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

92.86% Statements 13/14
100% Branches 6/6
83.33% Functions 5/6
92.86% Lines 13/14

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  5x 5x 5x 5x 5x 5x 5x                                       23x         1x       22x         23x 15x                     145x                                                          
<script>
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import { WEBIDE_MARK_FILE_CLICKED } from '~/performance/constants';
import { performanceMarkAndMeasure } from '~/performance/utils';
import FileTree from '~/vue_shared/components/file_tree.vue';
import IdeFileRow from './ide_file_row.vue';
import NavDropdown from './nav_dropdown.vue';
 
export default {
  name: 'IdeTreeList',
  components: {
    GlSkeletonLoading,
    NavDropdown,
    FileTree,
  },
  props: {
    headerClass: {
      type: String,
      required: false,
      default: null,
    },
  },
  computed: {
    ...mapState(['currentBranchId']),
    ...mapGetters(['currentProject', 'currentTree']),
    showLoading() {
      return !this.currentTree || this.currentTree.loading;
    },
  },
  watch: {
    showLoading() {
      this.notifyTreeReady();
    },
  },
  mounted() {
    this.notifyTreeReady();
  },
  methods: {
    ...mapActions(['toggleTreeOpen']),
    notifyTreeReady() {
      if (!this.showLoading) {
        this.$emit('tree-ready');
      }
    },
    clickedFile() {
      performanceMarkAndMeasure({ mark: WEBIDE_MARK_FILE_CLICKED });
    },
  },
  IdeFileRow,
};
</script>
 
<template>
  <div class="ide-file-list qa-file-list">
    <template v-if="showLoading">
      <div v-for="n in 3" :key="n" class="multi-file-loading-container">
        <gl-skeleton-loading />
      </div>
    </template>
    <template v-else>
      <header :class="headerClass" class="ide-tree-header">
        <nav-dropdown />
        <slot name="header"></slot>
      </header>
      <div class="ide-tree-body h-100" data-testid="ide-tree-body">
        <template v-if="currentTree.tree.length">
          <file-tree
            v-for="file in currentTree.tree"
            :key="file.key"
            :file="file"
            :level="0"
            :file-row-component="$options.IdeFileRow"
            @toggleTreeOpen="toggleTreeOpen"
            @clickFile="clickedFile"
          />
        </template>
        <div v-else class="file-row">{{ __('No files') }}</div>
      </div>
    </template>
  </div>
</template>