moved external link into activity bar

fixed ide_tree_spec.js

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

@@ -1,17 +1,18 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
-import ExternalLinks from './ide_external_links.vue';
 import { ActivityBarViews } from '../stores/state';
 
 export default {
   components: {
     Icon,
-    ExternalLinks,
   },
   computed: {
     ...mapGetters(['currentProject']),
     ...mapState(['currentActivityView']),
+    goBackUrl() {
+      return document.referrer || this.currentProject.web_url;
+    },
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
@@ -23,11 +24,17 @@ export default {
 <template>
   <nav class="ide-activity-bar">
     <ul class="list-unstyled">
-      <li>
-        <external-links
-          class="ide-activity-bar-link"
-          :project-url="currentProject.web_url"
-        />
+      <li v-once>
+        <a
+          :href="goBackUrl"
+          class="ide-sidebar-link"
+          :aria-label="s__('IDE|Go back')"
+        >
+          <icon
+            :size="16"
+            name="go-back"
+          />
+        </a>
       </li>
       <li>
         <button

app/assets/javascripts/ide/components/ide_external_links.vue

@@ -1,34 +0,0 @@
-<script>
-import icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  components: {
-    icon,
-  },
-  props: {
-    projectUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    goBackUrl() {
-      return document.referrer || this.projectUrl;
-    },
-  },
-};
-</script>
-
-<template>
-  <a
-    :href="goBackUrl"
-    class="ide-sidebar-link"
-    :aria-label="s__('IDE|Go back')"
-    v-once
-  >
-    <icon
-      :size="16"
-      name="go-back"
-    />
-  </a>
-</template>

app/assets/javascripts/ide/components/ide_tree.vue

@@ -23,7 +23,7 @@ export default {
   <div
     class="ide-file-list"
   >
-    <template v-if="!currentTree || currentTree.loading">
+    <template v-if="currentTree.loading">
       <div
         class="multi-file-loading-container"
         v-for="n in 3"

app/assets/stylesheets/pages/repo.scss

@@ -73,7 +73,6 @@
     .ide-new-btn {
       display: none;
       margin-bottom: -4px;
-      margin-right: -8px;
     }
 
     &:hover,

spec/javascripts/ide/components/ide_external_links_spec.js

@@ -1,43 +0,0 @@
-import Vue from 'vue';
-import ideExternalLinks from '~/ide/components/ide_external_links.vue';
-import createComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('ide external links component', () => {
-  let vm;
-  let fakeReferrer;
-  let Component;
-
-  const fakeProjectUrl = '/project/';
-
-  beforeEach(() => {
-    Component = Vue.extend(ideExternalLinks);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('goBackUrl', () => {
-    it('renders the Go Back link with the referrer when present', () => {
-      fakeReferrer = '/example/README.md';
-      spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
-
-      vm = createComponent(Component, {
-        projectUrl: fakeProjectUrl,
-      }).$mount();
-
-      expect(vm.goBackUrl).toEqual(fakeReferrer);
-    });
-
-    it('renders the Go Back link with the project url when referrer is not present', () => {
-      fakeReferrer = '';
-      spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
-
-      vm = createComponent(Component, {
-        projectUrl: fakeProjectUrl,
-      }).$mount();
-
-      expect(vm.goBackUrl).toEqual(fakeProjectUrl);
-    });
-  });
-});

spec/javascripts/ide/components/ide_tree_spec.js

@@ -1,41 +1,43 @@
 import Vue from 'vue';
 import IdeTree from '~/ide/components/ide_tree.vue';
-import createComponent from '../../helpers/vue_mount_component_helper';
-import { file } from '../helpers';
+import store from '~/ide/stores';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { resetStore, file } from '../helpers';
+import { projectData } from '../mock_data';
 
 describe('IdeRepoTree', () => {
   let vm;
-  let tree;
 
   beforeEach(() => {
     const IdeRepoTree = Vue.extend(IdeTree);
 
-    tree = {
-      tree: [file()],
+    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')],
       loading: false,
-    };
-
-    vm = createComponent(IdeRepoTree, {
-      tree,
     });
+
+    vm = createComponentWithStore(IdeRepoTree, store).$mount();
   });
 
   afterEach(() => {
     vm.$destroy();
+
+    resetStore(vm.$store);
   });
 
-  it('renders a sidebar', () => {
-    expect(vm.$el.querySelector('.loading-file')).toBeNull();
-    expect(vm.$el.querySelector('.file')).not.toBeNull();
-  });
-
-  it('renders 3 loading files if tree is loading', done => {
-    tree.loading = true;
+  it('renders loading', done => {
+    vm.currentTree.loading = true;
 
     vm.$nextTick(() => {
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toEqual(3);
-
+      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
       done();
     });
   });
+
+  it('renders list of files', () => {
+    expect(vm.$el.textContent).toContain('fileName');
+  });
 });

spec/javascripts/ide/mock_data.js

@@ -5,6 +5,7 @@ export const projectData = {
   web_url: '',
   avatar_url: '',
   path: '',
+  name_with_namespace: 'namespace/abcproject',
   branches: {
     master: {
       treeId: 'abcproject/master',