diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2017-08-14 22:54:43 +0000 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2017-08-14 22:54:43 +0000 |
commit | 0ec54b8ff7f001807f617865884d294809844fde (patch) | |
tree | add7dbad8c28075e31a56630271c54bffb8afb6f | |
parent | 1983043c6656fb9999649be90c6ea58921eb765d (diff) | |
parent | 5bf22c8607020368558eff30d207a49631f486ee (diff) | |
download | gitlab-ce-0ec54b8ff7f001807f617865884d294809844fde.tar.gz |
Merge branch 'repo-fixes-e' into 'master'
Repo fixes part E
See merge request !13472
15 files changed, 149 insertions, 116 deletions
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue index e954fd38fc9..f47b6c33fa2 100644 --- a/app/assets/javascripts/repo/components/repo_edit_button.vue +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -29,12 +29,10 @@ export default { editMode() { if (this.editMode) { $('.project-refs-form').addClass('disabled'); - $('.fa-long-arrow-right').show(); - $('.project-refs-target-form').show(); + $('.js-tree-ref-target-holder').show(); } else { $('.project-refs-form').removeClass('disabled'); - $('.fa-long-arrow-right').hide(); - $('.project-refs-target-form').hide(); + $('.js-tree-ref-target-holder').hide(); } }, }, diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue index d8de022335b..2200754cbef 100644 --- a/app/assets/javascripts/repo/components/repo_preview.vue +++ b/app/assets/javascripts/repo/components/repo_preview.vue @@ -4,7 +4,7 @@ import Store from '../stores/repo_store'; export default { data: () => Store, mounted() { - $(this.$el).find('.file-content').syntaxHighlight(); + this.highlightFile(); }, computed: { html() { @@ -12,10 +12,16 @@ export default { }, }, + methods: { + highlightFile() { + $(this.$el).find('.file-content').syntaxHighlight(); + }, + }, + watch: { html() { this.$nextTick(() => { - $(this.$el).find('.file-content').syntaxHighlight(); + this.highlightFile(); }); }, }, @@ -24,9 +30,23 @@ export default { <template> <div> - <div v-if="!activeFile.render_error" v-html="activeFile.html"></div> - <div v-if="activeFile.render_error" class="vertical-center render-error"> - <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p> + <div + v-if="!activeFile.render_error" + v-html="activeFile.html"> + </div> + <div + v-else-if="activeFile.tooLarge" + class="vertical-center render-error"> + <p class="text-center"> + The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead. + </p> + </div> + <div + v-else + class="vertical-center render-error"> + <p class="text-center"> + The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead. + </p> </div> </div> </template> diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue index d6d832efc49..0d4f8c6635e 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/app/assets/javascripts/repo/components/repo_sidebar.vue @@ -33,32 +33,30 @@ const RepoSidebar = { }); }, - linkClicked(clickedFile) { - let url = ''; + fileClicked(clickedFile) { let file = clickedFile; - if (typeof file === 'object') { - file.loading = true; - if (file.type === 'tree' && file.opened) { - file = Store.removeChildFilesOfTree(file); - file.loading = false; - } else { - url = file.url; - Service.url = url; - // I need to refactor this to do the `then` here. - // Not a callback. For now this is good enough. - // it works. - Helper.getContent(file, () => { + + file.loading = true; + if (file.type === 'tree' && file.opened) { + file = Store.removeChildFilesOfTree(file); + file.loading = false; + } else { + Service.url = file.url; + Helper.getContent(file) + .then(() => { file.loading = false; Helper.scrollTabsRight(); - }); - } - } else if (typeof file === 'string') { - // go back - url = file; - Service.url = url; - Helper.getContent(null, () => Helper.scrollTabsRight()); + }) + .catch(Helper.loadingError); } }, + + goToPreviousDirectoryClicked(prevURL) { + Service.url = prevURL; + Helper.getContent(null) + .then(() => Helper.scrollTabsRight()) + .catch(Helper.loadingError); + }, }, }; @@ -82,7 +80,7 @@ export default RepoSidebar; <repo-previous-directory v-if="isRoot" :prev-url="prevURL" - @linkclicked="linkClicked(prevURL)"/> + @linkclicked="goToPreviousDirectoryClicked(prevURL)"/> <repo-loading-file v-for="n in 5" :key="n" @@ -94,7 +92,7 @@ export default RepoSidebar; :key="file.id" :file="file" :is-mini="isMini" - @linkclicked="linkClicked(file)" + @linkclicked="fileClicked(file)" :is-tree="isTree" :has-files="!!files.length" :active-file="activeFile"/> diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue index 712d64c236f..fc66a8ea953 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -10,6 +10,12 @@ const RepoTab = { }, computed: { + closeLabel() { + if (this.tab.changed) { + return `${this.tab.name} changed`; + } + return `Close ${this.tab.name}`; + }, changedClass() { const tabChangedObj = { 'fa-times': !this.tab.changed, @@ -34,12 +40,24 @@ export default RepoTab; <template> <li> - <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading"> - <i class="fa" :class="changedClass"></i> + <a + href="#0" + class="close" + @click.prevent="xClicked(tab)" + :aria-label="closeLabel"> + <i + class="fa" + :class="changedClass" + aria-hidden="true"> + </i> </a> - <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a> - - <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i> + <a + href="#" + class="repo-tab" + :title="tab.url" + @click.prevent="tabClicked(tab)"> + {{tab.name}} + </a> </li> </template> diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue index 907a03e1601..bbd60d9d793 100644 --- a/app/assets/javascripts/repo/components/repo_tabs.vue +++ b/app/assets/javascripts/repo/components/repo_tabs.vue @@ -1,5 +1,4 @@ <script> -import Vue from 'vue'; import Store from '../stores/repo_store'; import RepoTab from './repo_tab.vue'; import RepoMixin from '../mixins/repo_mixin'; @@ -14,29 +13,19 @@ const RepoTabs = { data: () => Store, methods: { - isOverflow() { - return this.$el.scrollWidth > this.$el.offsetWidth; - }, - xClicked(file) { Store.removeFromOpenedFiles(file); }, }, - - watch: { - openedFiles() { - Vue.nextTick(() => { - this.tabsOverflow = this.isOverflow(); - }); - }, - }, }; export default RepoTabs; </script> <template> -<ul id="tabs" v-if="isMini" v-cloak :class="{'overflown': tabsOverflow}"> +<ul + v-if="isMini" + id="tabs"> <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked"/> <li class="tabs-divider" /> </ul> diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js index 8ee2df5c879..c1a0e80f8f3 100644 --- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js +++ b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js @@ -10,7 +10,10 @@ function repoEditorLoader() { Store.monaco = monaco; Store.monacoLoading = false; resolve(RepoEditor); - }, reject); + }, () => { + Store.monacoLoading = false; + reject(); + }); }); } diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js index fee98c12592..17aaa0e1584 100644 --- a/app/assets/javascripts/repo/helpers/repo_helper.js +++ b/app/assets/javascripts/repo/helpers/repo_helper.js @@ -33,12 +33,16 @@ const RepoHelper = { ? window.performance : Date, + getFileExtension(fileName) { + return fileName.split('.').pop(); + }, + getBranch() { return $('button.dropdown-menu-toggle').attr('data-ref'); }, getLanguageIDForFile(file, langs) { - const ext = file.name.split('.').pop(); + const ext = RepoHelper.getFileExtension(file.name); const foundLang = RepoHelper.findLanguage(ext, langs); return foundLang ? foundLang.id : 'plaintext'; @@ -135,21 +139,19 @@ const RepoHelper = { return isRoot; }, - getContent(treeOrFile, cb) { + getContent(treeOrFile) { let file = treeOrFile; // const loadingData = RepoHelper.setLoading(true); return Service.getContent() .then((response) => { const data = response.data; // RepoHelper.setLoading(false, loadingData); - if (cb) cb(); Store.isTree = RepoHelper.isTree(data); if (!Store.isTree) { if (!file) file = data; Store.binary = data.binary; if (data.binary) { - Store.binaryMimeType = data.mime_type; // file might be undefined RepoHelper.setBinaryDataAsBase64(data); Store.setViewToPreview(); @@ -188,9 +190,8 @@ const RepoHelper = { setFile(data, file) { const newFile = data; - newFile.url = file.url || location.pathname; newFile.url = file.url; - if (newFile.render_error === 'too_large') { + if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') { newFile.tooLarge = true; } newFile.newContent = ''; @@ -199,10 +200,6 @@ const RepoHelper = { Store.setActiveFiles(newFile); }, - toFA(icon) { - return `fa-${icon}`; - }, - serializeBlob(blob) { const simpleBlob = RepoHelper.serializeRepoEntity('blob', blob); simpleBlob.lastCommitMessage = blob.last_commit.message; @@ -226,7 +223,7 @@ const RepoHelper = { type, name, url, - icon: RepoHelper.toFA(icon), + icon: `fa-${icon}`, level: 0, loading: false, }; @@ -244,7 +241,7 @@ const RepoHelper = { setTimeout(() => { const tabs = document.getElementById('tabs'); if (!tabs) return; - tabs.scrollLeft = 12000; + tabs.scrollLeft = tabs.scrollWidth; }, 200); }, diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js index 67c03680fca..3e37da1726e 100644 --- a/app/assets/javascripts/repo/index.js +++ b/app/assets/javascripts/repo/index.js @@ -7,8 +7,7 @@ import RepoEditButton from './components/repo_edit_button.vue'; import Translate from '../vue_shared/translate'; function initDropdowns() { - $('.project-refs-target-form').hide(); - $('.fa-long-arrow-right').hide(); + $('.js-tree-ref-target-holder').hide(); } function addEventsForNonVueEls() { diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js index 8fba928e456..17578f3bbf3 100644 --- a/app/assets/javascripts/repo/services/repo_service.js +++ b/app/assets/javascripts/repo/services/repo_service.js @@ -2,6 +2,7 @@ import axios from 'axios'; import Store from '../stores/repo_store'; import Api from '../../api'; +import Helper from '../helpers/repo_helper'; const RepoService = { url: '', @@ -22,6 +23,7 @@ const RepoService = { getRaw(url) { return axios.get(url, { + // Stop Axios from parsing a JSON file into a JS object transformResponse: [res => res], }); }, @@ -36,7 +38,7 @@ const RepoService = { }, urlIsRichBlob(url = this.url) { - const extension = url.split('.').pop(); + const extension = Helper.getFileExtension(url); return this.richExtensionRegExp.test(extension); }, diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js index 06ca391ed0c..bb605540aad 100644 --- a/app/assets/javascripts/repo/stores/repo_store.js +++ b/app/assets/javascripts/repo/stores/repo_store.js @@ -3,13 +3,10 @@ import Helper from '../helpers/repo_helper'; import Service from '../services/repo_service'; const RepoStore = { - ideEl: {}, monaco: {}, monacoLoading: false, monacoInstance: {}, service: '', - editor: '', - sidebar: '', editMode: false, isTree: false, isRoot: false, @@ -17,19 +14,10 @@ const RepoStore = { projectId: '', projectName: '', projectUrl: '', - trees: [], - blobs: [], - submodules: [], blobRaw: '', - blobRendered: '', currentBlobView: 'repo-preview', openedFiles: [], - tabSize: 100, - defaultTabSize: 100, - minTabSize: 30, - tabsOverflow: 41, submitCommitsLoading: false, - binaryLoaded: false, dialog: { open: false, title: '', @@ -45,9 +33,6 @@ const RepoStore = { currentBranch: '', targetBranch: 'new-branch', commitMessage: '', - binaryMimeType: '', - // scroll bar space for windows - scrollWidth: 0, binaryTypes: { png: false, md: false, @@ -58,7 +43,6 @@ const RepoStore = { tree: false, blob: false, }, - readOnly: true, resetBinaryTypes() { Object.keys(RepoStore.binaryTypes).forEach((key) => { @@ -96,7 +80,6 @@ const RepoStore = { if (file.binary) { RepoStore.blobRaw = file.base64; - RepoStore.binaryMimeType = file.mime_type; } else if (file.newContent || file.plain) { RepoStore.blobRaw = file.newContent || file.plain; } else { @@ -238,4 +221,5 @@ const RepoStore = { return RepoStore.currentBlobView === 'repo-preview'; }, }; + export default RepoStore; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 11236cbf2e7..0028e207f3e 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -29,6 +29,10 @@ margin-right: 15px; } + .tree-ref-target-holder { + display: inline-block; + } + .repo-breadcrumb { li:last-of-type { position: relative; diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml index 427b059cb82..853e2a6e7ec 100644 --- a/app/views/projects/tree/_tree_header.html.haml +++ b/app/views/projects/tree/_tree_header.html.haml @@ -2,8 +2,9 @@ .tree-ref-holder = render 'shared/ref_switcher', destination: 'tree', path: @path - if show_new_repo? - = icon('long-arrow-right', title: 'to target branch') - = render 'shared/target_switcher', destination: 'tree', path: @path + .tree-ref-target-holder.js-tree-ref-target-holder + = icon('long-arrow-right', title: 'to target branch') + = render 'shared/target_switcher', destination: 'tree', path: @path - unless show_new_repo? = render 'projects/tree/old_tree_header' diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js index 0d216c9c026..edd27d3afb8 100644 --- a/spec/javascripts/repo/components/repo_sidebar_spec.js +++ b/spec/javascripts/repo/components/repo_sidebar_spec.js @@ -1,4 +1,6 @@ import Vue from 'vue'; +import Helper from '~/repo/helpers/repo_helper'; +import RepoService from '~/repo/services/repo_service'; import RepoStore from '~/repo/stores/repo_store'; import repoSidebar from '~/repo/components/repo_sidebar.vue'; @@ -58,4 +60,51 @@ describe('RepoSidebar', () => { expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy(); }); + + describe('methods', () => { + describe('fileClicked', () => { + it('should fetch data for new file', () => { + spyOn(Helper, 'getContent').and.callThrough(); + const file1 = { + id: 0, + url: '', + }; + RepoStore.files = [file1]; + RepoStore.isRoot = true; + const vm = createComponent(); + + vm.fileClicked(file1); + + expect(Helper.getContent).toHaveBeenCalledWith(file1); + }); + + it('should hide files in directory if already open', () => { + spyOn(RepoStore, 'removeChildFilesOfTree').and.callThrough(); + const file1 = { + id: 0, + type: 'tree', + url: '', + opened: true, + }; + RepoStore.files = [file1]; + RepoStore.isRoot = true; + const vm = createComponent(); + + vm.fileClicked(file1); + + expect(RepoStore.removeChildFilesOfTree).toHaveBeenCalledWith(file1); + }); + }); + + describe('goToPreviousDirectoryClicked', () => { + it('should hide files in directory if already open', () => { + const prevUrl = 'foo/bar'; + const vm = createComponent(); + + vm.goToPreviousDirectoryClicked(prevUrl); + + expect(RepoService.url).toEqual(prevUrl); + }); + }); + }); }); diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js index f3572804b4a..a3b2d5dea82 100644 --- a/spec/javascripts/repo/components/repo_tab_spec.js +++ b/spec/javascripts/repo/components/repo_tab_spec.js @@ -12,7 +12,6 @@ describe('RepoTab', () => { it('renders a close link and a name link', () => { const tab = { - loading: false, url: 'url', name: 'name', }; @@ -26,7 +25,7 @@ describe('RepoTab', () => { spyOn(vm, 'tabClicked'); expect(close.querySelector('.fa-times')).toBeTruthy(); - expect(name.textContent).toEqual(tab.name); + expect(name.textContent.trim()).toEqual(tab.name); close.click(); name.click(); @@ -35,25 +34,8 @@ describe('RepoTab', () => { expect(vm.tabClicked).toHaveBeenCalledWith(tab); }); - it('renders a spinner if tab is loading', () => { - const tab = { - loading: true, - url: 'url', - }; - const vm = createComponent({ - tab, - }); - const close = vm.$el.querySelector('.close'); - const name = vm.$el.querySelector(`a[title="${tab.url}"]`); - - expect(close).toBeFalsy(); - expect(name).toBeFalsy(); - expect(vm.$el.querySelector('.fa.fa-spinner.fa-spin')).toBeTruthy(); - }); - it('renders an fa-circle icon if tab is changed', () => { const tab = { - loading: false, url: 'url', name: 'name', changed: true, diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js index fdb12cfc00f..60459e90c48 100644 --- a/spec/javascripts/repo/components/repo_tabs_spec.js +++ b/spec/javascripts/repo/components/repo_tabs_spec.js @@ -18,13 +18,11 @@ describe('RepoTabs', () => { it('renders a list of tabs', () => { RepoStore.openedFiles = openedFiles; - RepoStore.tabsOverflow = true; const vm = createComponent(); const tabs = [...vm.$el.querySelectorAll(':scope > li')]; expect(vm.$el.id).toEqual('tabs'); - expect(vm.$el.classList.contains('overflown')).toBeTruthy(); expect(tabs.length).toEqual(3); expect(tabs[0].classList.contains('active')).toBeTruthy(); expect(tabs[1].classList.contains('active')).toBeFalsy(); @@ -39,15 +37,6 @@ describe('RepoTabs', () => { expect(vm.$el.innerHTML).toBeFalsy(); }); - it('does not apply overflown class if not tabsOverflow', () => { - RepoStore.openedFiles = openedFiles; - RepoStore.tabsOverflow = false; - - const vm = createComponent(); - - expect(vm.$el.classList.contains('overflown')).toBeFalsy(); - }); - describe('methods', () => { describe('xClicked', () => { it('calls removeFromOpenedFiles with file obj', () => { |