Added 'No files' text for empty-state tree view

Updated template and added new translation string Changelog entry

Added 'No files' text for empty-state tree view
Updated template and added new translation string Changelog entry
b5384fbf · Denys Mishunov · ece63f14 · b5384fbf · b5384fbf · b5384fbf
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -54,14 +54,17 @@ export default {
        <slot name="header"></slot>
      </header>
      <div class="ide-tree-body h-100">
-        <file-row
-          v-for="file in currentTree.tree"
-          :key="file.key"
-          :file="file"
-          :level="0"
-          :extra-component="$options.FileRowExtra"
-          @toggleTreeOpen="toggleTreeOpen"
-        />
+        <template v-if="currentTree.tree.length > 0">
+          <file-row
+            v-for="file in currentTree.tree"
+            :key="file.key"
+            :file="file"
+            :level="0"
+            :extra-component="$options.FileRowExtra"
+            @toggleTreeOpen="toggleTreeOpen"
+          />
+        </template>
+        <div v-else class="file-row">{{ __('No files') }}</div>
      </div>
    </template>
  </div>

--- a/changelogs/unreleased/45687-web-ide-empty-state.yml
+++ b/changelogs/unreleased/45687-web-ide-empty-state.yml
+---
+title: Empty-view for branches in Web IDE
+merge_request: 26556
+author:
+type: added
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1233,9 +1233,6 @@ msgstr ""
 msgid "Boards"
 msgstr ""

-msgid "Branch %{branchName} was not found in this project's repository."
-msgstr ""
-
 msgid "Branch <strong>%{branch_name}</strong> was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}"
 msgstr ""

@@ -5600,6 +5597,9 @@ msgstr ""
 msgid "No file selected"
 msgstr ""

+msgid "No files"
+msgstr ""
+
 msgid "No files found."
 msgstr ""


--- a/spec/javascripts/ide/components/ide_tree_list_spec.js
+++ b/spec/javascripts/ide/components/ide_tree_list_spec.js
@@ -7,25 +7,23 @@ import { projectData } from '../mock_data';

 describe('IDE tree list', () => {
  const Component = Vue.extend(IdeTreeList);
+  const normalBranchTree = [file('fileName')];
+  const emptyBranchTree = [];
  let vm;

-  beforeEach(() => {
+  const bootstrapWithTree = (tree = normalBranchTree) => {
    store.state.currentProjectId = 'abcproject';
    store.state.currentBranchId = 'master';
    store.state.projects.abcproject = Object.assign({}, projectData);
    Vue.set(store.state.trees, 'abcproject/master', {
-      tree: [file('fileName')],
+      tree,
      loading: false,
    });

    vm = createComponentWithStore(Component, store, {
      viewerType: 'edit',
    });
-
-    spyOn(vm, 'updateViewer').and.callThrough();
-
-    vm.$mount();
-  });
+  };

  afterEach(() => {
    vm.$destroy();
@@ -33,22 +31,47 @@ describe('IDE tree list', () => {
    resetStore(vm.$store);
  });

-  it('updates viewer on mount', () => {
-    expect(vm.updateViewer).toHaveBeenCalledWith('edit');
-  });
+  describe('normal branch', () => {
+    beforeEach(() => {
+      bootstrapWithTree();
+
+      spyOn(vm, 'updateViewer').and.callThrough();
+
+      vm.$mount();
+    });
+
+    it('updates viewer on mount', () => {
+      expect(vm.updateViewer).toHaveBeenCalledWith('edit');
+    });
+
+    it('renders loading indicator', done => {
+      store.state.trees['abcproject/master'].loading = true;

-  it('renders loading indicator', done => {
-    store.state.trees['abcproject/master'].loading = true;
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
+        expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);

-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
+        done();
+      });
+    });

-      done();
+    it('renders list of files', () => {
+      expect(vm.$el.textContent).toContain('fileName');
    });
  });

-  it('renders list of files', () => {
-    expect(vm.$el.textContent).toContain('fileName');
+  describe('empty-branch state', () => {
+    beforeEach(() => {
+      bootstrapWithTree(emptyBranchTree);
+
+      spyOn(vm, 'updateViewer').and.callThrough();
+
+      vm.$mount();
+    });
+
+    it('does not load files if the branch is empty', () => {
+      expect(vm.$el.textContent).not.toContain('fileName');
+      expect(vm.$el.textContent).toContain('No files');
+    });
  });
 });