Commit ed0a1818 authored by Phil Hughes's avatar Phil Hughes

moved external link into activity bar

fixed ide_tree_spec.js
parent fda4128a
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import ExternalLinks from './ide_external_links.vue';
import { ActivityBarViews } from '../stores/state'; import { ActivityBarViews } from '../stores/state';
export default { export default {
components: { components: {
Icon, Icon,
ExternalLinks,
}, },
computed: { computed: {
...mapGetters(['currentProject']), ...mapGetters(['currentProject']),
...mapState(['currentActivityView']), ...mapState(['currentActivityView']),
goBackUrl() {
return document.referrer || this.currentProject.web_url;
},
}, },
methods: { methods: {
...mapActions(['updateActivityBarView']), ...mapActions(['updateActivityBarView']),
...@@ -23,11 +24,17 @@ export default { ...@@ -23,11 +24,17 @@ export default {
<template> <template>
<nav class="ide-activity-bar"> <nav class="ide-activity-bar">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li> <li v-once>
<external-links <a
class="ide-activity-bar-link" :href="goBackUrl"
:project-url="currentProject.web_url" class="ide-sidebar-link"
:aria-label="s__('IDE|Go back')"
>
<icon
:size="16"
name="go-back"
/> />
</a>
</li> </li>
<li> <li>
<button <button
......
<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>
...@@ -23,7 +23,7 @@ export default { ...@@ -23,7 +23,7 @@ export default {
<div <div
class="ide-file-list" class="ide-file-list"
> >
<template v-if="!currentTree || currentTree.loading"> <template v-if="currentTree.loading">
<div <div
class="multi-file-loading-container" class="multi-file-loading-container"
v-for="n in 3" v-for="n in 3"
......
...@@ -73,7 +73,6 @@ ...@@ -73,7 +73,6 @@
.ide-new-btn { .ide-new-btn {
display: none; display: none;
margin-bottom: -4px; margin-bottom: -4px;
margin-right: -8px;
} }
&:hover, &:hover,
......
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);
});
});
});
import Vue from 'vue'; import Vue from 'vue';
import IdeTree from '~/ide/components/ide_tree.vue'; import IdeTree from '~/ide/components/ide_tree.vue';
import createComponent from '../../helpers/vue_mount_component_helper'; import store from '~/ide/stores';
import { file } from '../helpers'; import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
import { resetStore, file } from '../helpers';
import { projectData } from '../mock_data';
describe('IdeRepoTree', () => { describe('IdeRepoTree', () => {
let vm; let vm;
let tree;
beforeEach(() => { beforeEach(() => {
const IdeRepoTree = Vue.extend(IdeTree); const IdeRepoTree = Vue.extend(IdeTree);
tree = { store.state.currentProjectId = 'abcproject';
tree: [file()], store.state.currentBranchId = 'master';
store.state.projects.abcproject = Object.assign({}, projectData);
Vue.set(store.state.trees, 'abcproject/master', {
tree: [file('fileName')],
loading: false, loading: false,
};
vm = createComponent(IdeRepoTree, {
tree,
}); });
vm = createComponentWithStore(IdeRepoTree, store).$mount();
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
});
it('renders a sidebar', () => { resetStore(vm.$store);
expect(vm.$el.querySelector('.loading-file')).toBeNull();
expect(vm.$el.querySelector('.file')).not.toBeNull();
}); });
it('renders 3 loading files if tree is loading', done => { it('renders loading', done => {
tree.loading = true; vm.currentTree.loading = true;
vm.$nextTick(() => { 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(); done();
}); });
}); });
it('renders list of files', () => {
expect(vm.$el.textContent).toContain('fileName');
});
}); });
...@@ -5,6 +5,7 @@ export const projectData = { ...@@ -5,6 +5,7 @@ export const projectData = {
web_url: '', web_url: '',
avatar_url: '', avatar_url: '',
path: '', path: '',
name_with_namespace: 'namespace/abcproject',
branches: { branches: {
master: { master: {
treeId: 'abcproject/master', treeId: 'abcproject/master',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment