diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2017-08-15 22:53:41 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-08-15 22:53:41 +0300 |
commit | 2024198da7052b69a206d53a7accc2f9b1291b2f (patch) | |
tree | 64530a3621bf92394cc051d9976a69156317829c | |
parent | 8615e78560837ec6b802c64fa81e621d5a4c0949 (diff) |
Many Repo Fixes
35 files changed, 516 insertions, 437 deletions
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js index 76b724e1bcb..56f91e95bb9 100644 --- a/app/assets/javascripts/api.js +++ b/app/assets/javascripts/api.js @@ -97,7 +97,6 @@ const Api = { }, commitMultiple(id, data, callback) { - // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions const url = Api.buildUrl(Api.commitPath) .replace(':id', id); return $.ajax({ diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js index 272e8e8c218..d7e3ab42f00 100644 --- a/app/assets/javascripts/project.js +++ b/app/assets/javascripts/project.js @@ -126,7 +126,7 @@ import Cookies from 'js-cookie'; var $form = $dropdown.closest('form'); var $visit = $dropdown.data('visit'); - var shouldVisit = typeof $visit === 'undefined' ? true : $visit; + var shouldVisit = $visit ? true : $visit; var action = $form.attr('action'); var divider = action.indexOf('?') === -1 ? '?' : '&'; if (shouldVisit) { diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue index 703da749ad3..3d5e01c8ec0 100644 --- a/app/assets/javascripts/repo/components/repo.vue +++ b/app/assets/javascripts/repo/components/repo.vue @@ -14,13 +14,13 @@ export default { data: () => Store, mixins: [RepoMixin], components: { - 'repo-sidebar': RepoSidebar, - 'repo-tabs': RepoTabs, - 'repo-file-buttons': RepoFileButtons, + RepoSidebar, + RepoTabs, + RepoFileButtons, 'repo-editor': MonacoLoaderHelper.repoEditorLoader, - 'repo-commit-section': RepoCommitSection, - 'popup-dialog': PopupDialog, - 'repo-preview': RepoPreview, + RepoCommitSection, + PopupDialog, + RepoPreview, }, mounted() { @@ -28,12 +28,12 @@ export default { }, methods: { - dialogToggled(toggle) { + toggleDialogOpen(toggle) { this.dialog.open = toggle; }, dialogSubmitted(status) { - this.dialog.open = false; + this.toggleDialogOpen(false); this.dialog.status = status; }, @@ -43,21 +43,25 @@ export default { </script> <template> -<div class="repository-view tree-content-holder"> - <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}"> - <repo-tabs/> - <component :is="currentBlobView" class="blob-viewer-container"></component> - <repo-file-buttons/> + <div class="repository-view tree-content-holder"> + <repo-sidebar/><div v-if="isMini" + class="panel-right" + :class="{'edit-mode': editMode}"> + <repo-tabs/> + <component + :is="currentBlobView" + class="blob-viewer-container"/> + <repo-file-buttons/> + </div> + <repo-commit-section/> + <popup-dialog + v-show="dialog.open" + :primary-button-label="__('Discard changes')" + kind="warning" + :title="__('Are you sure?')" + :body="__('Are you sure you want to discard your changes?')" + @toggle="toggleDialogOpen" + @submit="dialogSubmitted" + /> </div> - <repo-commit-section/> - <popup-dialog - :primary-button-label="__('Discard changes')" - :open="dialog.open" - kind="warning" - :title="__('Are you sure?')" - :body="__('Are you sure you want to discard your changes?')" - @toggle="dialogToggled" - @submit="dialogSubmitted" - /> -</div> </template> diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue index 344d40be131..5ec4a9b6593 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -2,7 +2,6 @@ /* global Flash */ import Store from '../stores/repo_store'; import RepoMixin from '../mixins/repo_mixin'; -import Helper from '../helpers/repo_helper'; import Service from '../services/repo_service'; export default { @@ -11,9 +10,12 @@ export default { mixins: [RepoMixin], computed: { + showCommitable() { + return this.isCommitable && this.changedFiles.length; + }, + branchPaths() { - const branch = Helper.getBranch(); - return this.changedFiles.map(f => Helper.getFilePathFromFullPath(f.url, branch)); + return this.changedFiles.map(f => f.path); }, cantCommitYet() { @@ -28,11 +30,10 @@ export default { methods: { makeCommit() { // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions - const branch = Helper.getBranch(); const commitMessage = this.commitMessage; const actions = this.changedFiles.map(f => ({ action: 'update', - file_path: Helper.getFilePathFromFullPath(f.url, branch), + file_path: f.path, content: f.newContent, })); const payload = { @@ -47,49 +48,80 @@ export default { resetCommitState() { this.submitCommitsLoading = false; this.changedFiles = []; - this.openedFiles = []; this.commitMessage = ''; this.editMode = false; - $('html, body').animate({ scrollTop: 0 }, 'fast'); + window.scrollTo(0, 0); }, }, }; </script> <template> -<div id="commit-area" v-if="isCommitable && changedFiles.length" > - <form class="form-horizontal"> +<div + v-if="showCommitable" + id="commit-area"> + <form + class="form-horizontal" + @submit.prevent="makeCommit"> <fieldset> <div class="form-group"> - <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label> - <div class="col-md-4"> + <label class="col-md-4 control-label staged-files"> + Staged files ({{changedFiles.length}}) + </label> + <div class="col-md-6"> <ul class="list-unstyled changed-files"> - <li v-for="file in branchPaths" :key="file.id"> - <span class="help-block">{{file}}</span> + <li + v-for="branchPath in branchPaths" + :key="branchPath"> + <span class="help-block"> + {{branchPath}} + </span> </li> </ul> </div> </div> - <!-- Textarea - --> <div class="form-group"> - <label class="col-md-4 control-label" for="commit-message">Commit message</label> - <div class="col-md-4"> - <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea> + <label + class="col-md-4 control-label" + for="commit-message"> + Commit message + </label> + <div class="col-md-6"> + <textarea + id="commit-message" + class="form-control" + name="commit-message" + v-model="commitMessage"> + </textarea> </div> </div> - <!-- Button Drop Down - --> <div class="form-group target-branch"> - <label class="col-md-4 control-label" for="target-branch">Target branch</label> - <div class="col-md-4"> - <span class="help-block">{{targetBranch}}</span> + <label + class="col-md-4 control-label" + for="target-branch"> + Target branch + </label> + <div class="col-md-6"> + <span class="help-block"> + {{targetBranch}} + </span> </div> </div> - <div class="col-md-offset-4 col-md-4"> - <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit"> - <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading"></i> - <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span> + <div class="col-md-offset-4 col-md-6"> + <button + ref="submitCommit" + type="submit" + :disabled="cantCommitYet" + class="btn btn-success"> + <i + v-if="submitCommitsLoading" + class="fa fa-spinner fa-spin" + aria-hidden="true" + aria-label="loading"> + </i> + <span class="commit-summary"> + Commit {{changedFiles.length}} {{filePluralize}} + </span> </button> </div> </fieldset> diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue index e3820f7688b..29b76975561 100644 --- a/app/assets/javascripts/repo/components/repo_edit_button.vue +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -10,12 +10,15 @@ export default { return this.editMode ? this.__('Cancel edit') : this.__('Edit'); }, - buttonIcon() { - return this.editMode ? [] : ['fa', 'fa-pencil']; + showButton() { + return this.isCommitable && + !this.activeFile.render_error && + !this.binary && + this.openedFiles.length; }, }, methods: { - editClicked() { + editCancelClicked() { if (this.changedFiles.length) { this.dialog.open = true; return; @@ -24,15 +27,11 @@ export default { Store.toggleBlobView(); }, toggleProjectRefsForm() { - if (this.editMode) { - $('.project-refs-form').addClass('disabled-content'); - $('.project-refs-target-form').show(); - } else { - $('.project-refs-form').removeClass('disabled-content'); - $('.project-refs-target-form').hide(); - } + $('.project-refs-form').toggleClass('disabled', this.editMode); + $('.js-tree-ref-target-holder').toggle(this.editMode); }, }, + watch: { editMode() { this.toggleProjectRefsForm(); @@ -42,8 +41,18 @@ export default { </script> <template> -<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary"> - <i :class="buttonIcon"></i> - <span>{{buttonLabel}}</span> +<button + v-if="showButton" + class="btn btn-default" + type="button" + @click.prevent="editCancelClicked"> + <i + v-if="!editMode" + class="fa fa-pencil" + aria-hidden="true"> + </i> + <span> + {{buttonLabel}} + </span> </button> </template> diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue index 55a3af7aabb..96d6a75bb61 100644 --- a/app/assets/javascripts/repo/components/repo_editor.vue +++ b/app/assets/javascripts/repo/components/repo_editor.vue @@ -8,68 +8,78 @@ const RepoEditor = { data: () => Store, destroyed() { - // this.monacoInstance.getModels().forEach((m) => { - // m.dispose(); - // }); - this.monacoInstance.destroy(); + if (Helper.monacoInstance) { + Helper.monacoInstance.destroy(); + } }, mounted() { Service.getRaw(this.activeFile.raw_path) - .then((rawResponse) => { - Store.blobRaw = rawResponse.data; - Helper.findOpenedFileFromActive().plain = rawResponse.data; + .then((rawResponse) => { + Store.blobRaw = rawResponse.data; + Store.activeFile.plain = rawResponse.data; - const monacoInstance = this.monaco.editor.create(this.$el, { - model: null, - readOnly: false, - contextmenu: false, - }); + const monacoInstance = Helper.monaco.editor.create(this.$el, { + model: null, + readOnly: false, + contextmenu: false, + }); - Store.monacoInstance = monacoInstance; + Helper.monacoInstance = monacoInstance; - this.addMonacoEvents(); + this.addMonacoEvents(); - const languages = this.monaco.languages.getLanguages(); - const languageID = Helper.getLanguageIDForFile(this.activeFile, languages); - const newModel = this.monaco.editor.createModel(this.blobRaw, languageID); - - this.monacoInstance.setModel(newModel); - }).catch(Helper.loadingError); + this.setupEditor(); + }) + .catch(Helper.loadingError); }, methods: { + setupEditor() { + this.showHide(); + + Helper.setMonacoModelFromLanguage(); + }, + + showHide() { + if (!this.openedFiles.length || (this.binary && !this.activeFile.raw)) { + this.$el.style.display = 'none'; + } else { + this.$el.style.display = 'inline-block'; + } + }, + addMonacoEvents() { - this.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp); - this.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this)); + Helper.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp); + Helper.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this)); }, onMonacoEditorKeysPressed() { - Store.setActiveFileContents(this.monacoInstance.getValue()); + Store.setActiveFileContents(Helper.monacoInstance.getValue()); }, onMonacoEditorMouseUp(e) { + if (!e.target.position) return; const lineNumber = e.target.position.lineNumber; - if (e.target.element.className === 'line-numbers') { + if (e.target.element.classList.contains('line-numbers')) { location.hash = `L${lineNumber}`; Store.activeLine = lineNumber; + + Helper.monacoInstance.setPosition({ + lineNumber: this.activeLine, + column: 1, + }); } }, }, watch: { - activeLine() { - this.monacoInstance.setPosition({ - lineNumber: this.activeLine, - column: 1, - }); - }, dialog: { handler(obj) { const newObj = obj; if (newObj.status) { newObj.status = false; - this.openedFiles.map((file) => { + this.openedFiles = this.openedFiles.map((file) => { const f = file; if (f.active) { this.blobRaw = f.plain; @@ -80,21 +90,16 @@ const RepoEditor = { return f; }); this.editMode = false; + Store.toggleBlobView(); } }, deep: true, }, blobRaw() { - if (this.isTree) return; - - this.monacoInstance.setModel(null); - - const languages = this.monaco.languages.getLanguages(); - const languageID = Helper.getLanguageIDForFile(this.activeFile, languages); - const newModel = this.monaco.editor.createModel(this.blobRaw, languageID); - - this.monacoInstance.setModel(newModel); + if (Helper.monacoInstance && !this.isTree) { + this.setupEditor(); + } }, }, computed: { diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue index f604bc22a26..20ebf840774 100644 --- a/app/assets/javascripts/repo/components/repo_file.vue +++ b/app/assets/javascripts/repo/components/repo_file.vue @@ -33,6 +33,26 @@ const RepoFile = { canShowFile() { return !this.loading.tree || this.hasFiles; }, + + fileIcon() { + const classObj = { + 'fa-spinner fa-spin': this.file.loading, + [this.file.icon]: !this.file.loading, + }; + return classObj; + }, + + fileIndentation() { + return { + 'margin-left': `${this.file.level * 10}px`, + }; + }, + + activeFileClass() { + return { + active: this.activeFile.url === this.file.url, + }; + }, }, methods: { @@ -46,21 +66,42 @@ export default RepoFile; </script> <template> -<tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}"> - <td @click.prevent="linkClicked(file)"> - <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i> - <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i> - <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a> +<tr + v-if="canShowFile" + class="file" + :class="activeFileClass" + @click.prevent="linkClicked(file)"> + <td> + <i + class="fa fa-fw file-icon" + :class="fileIcon" + :style="fileIndentation" + aria-label="file icon"> + </i> + <a + :href="file.url" + class="repo-file-name" + :title="file.url"> + {{file.name}} + </a> </td> - <td v-if="!isMini" class="hidden-sm hidden-xs"> - <div class="commit-message"> - <a :href="file.lastCommitUrl">{{file.lastCommitMessage}}</a> - </div> - </td> + <template v-if="!isMini"> + <td class="hidden-sm hidden-xs"> + <div class="commit-message"> + <a @click.stop :href="file.lastCommitUrl"> + {{file.lastCommitMessage}} + </a> + </div> + </td> - <td v-if="!isMini" class="hidden-xs"> - <span class="commit-update" :title="tooltipTitle(file.lastCommitUpdate)">{{timeFormated(file.lastCommitUpdate)}}</span> - </td> + <td class="hidden-xs"> + <span + class="commit-update" + :title="tooltipTitle(file.lastCommitUpdate)"> + {{timeFormated(file.lastCommitUpdate)}} + </span> + </td> + </template> </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue index 628d02ca704..e43ef366f47 100644 --- a/app/assets/javascripts/repo/components/repo_file_buttons.vue +++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue @@ -15,7 +15,7 @@ const RepoFileButtons = { }, canPreview() { - return Helper.isKindaBinary(); + return Helper.isRenderable(); }, }, @@ -28,15 +28,42 @@ export default RepoFileButtons; </script> <template> -<div id="repo-file-buttons" v-if="isMini"> - <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a> + <div id="repo-file-buttons"> + <a + :href="activeFile.raw_path" + target="_blank" + class="btn btn-default raw" + rel="noopener noreferrer"> + {{rawDownloadButtonLabel}} + </a> - <div class="btn-group" role="group" aria-label="File actions"> - <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a> - <a :href="activeFile.commits_path" class="btn btn-default history">History</a> - <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a> - </div> + <div + class="btn-group" + role="group" + aria-label="File actions"> + <a + :href="activeFile.blame_path" + class="btn btn-default blame"> + Blame + </a> + <a + :href="activeFile.commits_path" + class="btn btn-default history"> + History + </a> + <a + :href="activeFile.permalink" + class="btn btn-default permalink"> + Permalink + </a> + </div> - <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a> -</div> + <a + v-if="canPreview" + href="#" + @click.prevent="rawPreviewToggle" + class="btn btn-default preview"> + {{activeFileLabel}} + </a> + </div> </template> diff --git a/app/assets/javascripts/repo/components/repo_file_options.vue b/app/assets/javascripts/repo/components/repo_file_options.vue index ba53ce0eecc..6a15755f029 100644 --- a/app/assets/javascripts/repo/components/repo_file_options.vue +++ b/app/assets/javascripts/repo/components/repo_file_options.vue @@ -17,7 +17,7 @@ export default RepoFileOptions; </script> <template> -<tr v-if="isMini" class="repo-file-options"> + <tr v-if="isMini" class="repo-file-options"> <td> <span class="title">{{projectName}}</span> </td> diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue index 38e9f16d041..bc8c64c8362 100644 --- a/app/assets/javascripts/repo/components/repo_loading_file.vue +++ b/app/assets/javascripts/repo/components/repo_loading_file.vue @@ -18,9 +18,15 @@ const RepoLoadingFile = { }, }, + computed: { + showGhostLines() { + return this.loading.tree && !this.hasFiles; + }, + }, + methods: { lineOfCode(n) { - return `line-of-code-${n}`; + return `skeleton-line-${n}`; }, }, }; @@ -29,23 +35,42 @@ export default RepoLoadingFile; </script> <template> -<tr v-if="loading.tree && !hasFiles" class="loading-file"> - <td> - <div class="animation-container animation-container-small"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> + <tr + v-if="showGhostLines" + class="loading-file"> + <td> + <div + class="animation-container animation-container-small"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> - <td v-if="!isMini" class="hidden-sm hidden-xs"> - <div class="animation-container"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> + <td + v-if="!isMini" + class="hidden-sm hidden-xs"> + <div class="animation-container"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> - <td v-if="!isMini" class="hidden-xs"> - <div class="animation-container animation-container-small"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> -</tr> + <td + v-if="!isMini" + class="hidden-xs"> + <div class="animation-container animation-container-small"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> + </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/repo/components/repo_prev_directory.vue index 6a0d684052f..bbdbdc61e38 100644 --- a/app/assets/javascripts/repo/components/repo_prev_directory.vue +++ b/app/assets/javascripts/repo/components/repo_prev_directory.vue @@ -1,4 +1,6 @@ <script> +import RepoMixin from '../mixins/repo_mixin'; + const RepoPreviousDirectory = { props: { prevUrl: { @@ -7,6 +9,14 @@ const RepoPreviousDirectory = { }, }, + mixins: [RepoMixin], + + computed: { + colSpanCondition() { + return this.isMini ? undefined : 3; + }, + }, + methods: { linkClicked(file) { this.$emit('linkclicked', file); @@ -19,8 +29,10 @@ export default RepoPreviousDirectory; <template> <tr class="prev-directory"> - <td colspan="3"> - <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a> + <td + :colspan="colSpanCondition" + @click.prevent="linkClicked(prevUrl)"> + <a :href="prevUrl">..</a> </td> </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue index 8e9499adf88..72b40288566 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/app/assets/javascripts/repo/components/repo_sidebar.vue @@ -35,7 +35,7 @@ export default { fileClicked(clickedFile) { let file = clickedFile; - + if (file.loading) return; file.loading = true; if (file.type === 'tree' && file.opened) { file = Store.removeChildFilesOfTree(file); diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue index caabf5d4b1b..0d0c34ec741 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -18,8 +18,8 @@ const RepoTab = { }, changedClass() { const tabChangedObj = { - 'fa-times': !this.tab.changed, - 'fa-circle': this.tab.changed, + 'fa-times close-icon': !this.tab.changed, + 'fa-circle unsaved-icon': this.tab.changed, }; return tabChangedObj; }, @@ -39,11 +39,11 @@ export default RepoTab; </script> <template> -<li> +<li @click="tabClicked(tab)"> <a href="#0" class="close" - @click.prevent="closeTab(tab)" + @click.stop.prevent="closeTab(tab)" :aria-label="closeLabel"> <i class="fa" diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue index 841aa689594..9c5bfc5d0cf 100644 --- a/app/assets/javascripts/repo/components/repo_tabs.vue +++ b/app/assets/javascripts/repo/components/repo_tabs.vue @@ -23,8 +23,7 @@ export default RepoTabs; </script> <template> -<ul id="tabs" - v-if="isMini"> +<ul id="tabs"> <repo-tab v-for="tab in openedFiles" :key="tab.id" diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js index c1a0e80f8f3..f8729bbf585 100644 --- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js +++ b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js @@ -1,13 +1,14 @@ /* global monaco */ import RepoEditor from '../components/repo_editor.vue'; import Store from '../stores/repo_store'; +import Helper from '../helpers/repo_helper'; import monacoLoader from '../monaco_loader'; function repoEditorLoader() { Store.monacoLoading = true; return new Promise((resolve, reject) => { monacoLoader(['vs/editor/editor.main'], () => { - Store.monaco = monaco; + Helper.monaco = monaco; Store.monacoLoading = false; resolve(RepoEditor); }, () => { diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js index 03d5e69af0f..2bd8d7eea65 100644 --- a/app/assets/javascripts/repo/helpers/repo_helper.js +++ b/app/assets/javascripts/repo/helpers/repo_helper.js @@ -4,6 +4,8 @@ import Store from '../stores/repo_store'; import '../../flash'; const RepoHelper = { + monacoInstance: null, + getDefaultActiveFile() { return { active: true, @@ -37,10 +39,6 @@ const RepoHelper = { return fileName.split('.').pop(); }, - getBranch() { - return $('button.dropdown-menu-toggle').attr('data-ref'); - }, - getLanguageIDForFile(file, langs) { const ext = RepoHelper.getFileExtension(file.name); const foundLang = RepoHelper.findLanguage(ext, langs); @@ -48,8 +46,12 @@ const RepoHelper = { return foundLang ? foundLang.id : 'plaintext'; }, - getFilePathFromFullPath(fullPath, branch) { - return fullPath.split(`${Store.projectUrl}/blob/${branch}`)[1]; + setMonacoModelFromLanguage() { + RepoHelper.monacoInstance.setModel(null); + const languages = RepoHelper.monaco.languages.getLanguages(); + const languageID = RepoHelper.getLanguageIDForFile(Store.activeFile, languages); + const newModel = RepoHelper.monaco.editor.createModel(Store.blobRaw, languageID); + RepoHelper.monacoInstance.setModel(newModel); }, findLanguage(ext, langs) { @@ -66,7 +68,7 @@ const RepoHelper = { return file; }, - isKindaBinary() { + isRenderable() { const okExts = ['md', 'svg']; return okExts.indexOf(Store.activeFile.extension) > -1; }, @@ -80,22 +82,8 @@ const RepoHelper = { .catch(RepoHelper.loadingError); }, - toggleFakeTab(loading, file) { - if (loading) return Store.addPlaceholderFile(); - return Store.removeFromOpenedFiles(file); - }, - - setLoading(loading, file) { - if (Service.url.indexOf('blob') > -1) { - Store.loading.blob = loading; - return RepoHelper.toggleFakeTab(loading, file); - } - - if (Service.url.indexOf('tree') > -1) Store.loading.tree = loading; - - return undefined; - }, - + // when you open a directory you need to put the directory files under + // the directory... This will merge the list of the current directory and the new list. getNewMergedList(inDirectory, currentList, newList) { const newListSorted = newList.sort(this.compareFilesCaseInsensitive); if (!inDirectory) return newListSorted; @@ -104,6 +92,9 @@ const RepoHelper = { return RepoHelper.mergeNewListToOldList(newListSorted, currentList, inDirectory, indexOfFile); }, + // within the get new merged list this does the merging of the current list of files + // and the new list of files. The files are never "in" another directory they just + // appear like they are because of the margin. mergeNewListToOldList(newList, oldList, inDirectory, indexOfFile) { newList.reverse().forEach((newFile) => { const fileIndex = indexOfFile + 1; @@ -141,11 +132,9 @@ const RepoHelper = { getContent(treeOrFile) { let file = treeOrFile; - // const loadingData = RepoHelper.setLoading(true); return Service.getContent() .then((response) => { const data = response.data; - // RepoHelper.setLoading(false, loadingData); Store.isTree = RepoHelper.isTree(data); if (!Store.isTree) { if (!file) file = data; @@ -246,36 +235,18 @@ const RepoHelper = { }, dataToListOfFiles(data) { - const a = []; - - // push in blobs - data.blobs.forEach((blob) => { - a.push(RepoHelper.serializeBlob(blob)); - }); - - data.trees.forEach((tree) => { - a.push(RepoHelper.serializeTree(tree)); - }); - - data.submodules.forEach((submodule) => { - a.push(RepoHelper.serializeSubmodule(submodule)); - }); - - return a; + const { blobs, trees, submodules } = data; + return [ + ...blobs.map(blob => RepoHelper.serializeBlob(blob)), + ...trees.map(tree => RepoHelper.serializeTree(tree)), + ...submodules.map(submodule => RepoHelper.serializeSubmodule(submodule)), + ]; }, genKey() { return RepoHelper.Time.now().toFixed(3); }, - getStateKey() { - return RepoHelper.key; - }, - - setStateKey(key) { - RepoHelper.key = key; - }, - updateHistoryEntry(url, title) { const history = window.history; @@ -293,7 +264,7 @@ const RepoHelper = { }, loadingError() { - Flash('Unable to load the file at this time.'); + Flash('Unable to load this content at this time.'); }, }; diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js index 530aec3021a..6c1d468e937 100644 --- a/app/assets/javascripts/repo/index.js +++ b/app/assets/javascripts/repo/index.js @@ -33,6 +33,8 @@ function setInitialStore(data) { Store.projectId = data.projectId; Store.projectName = data.projectName; Store.projectUrl = data.projectUrl; + Store.canCommit = data.canCommit; + Store.onTopOfBranch = data.onTopOfBranch; Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref'); Store.checkIsCommitable(); } diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js index fbc24062140..3cf204e6ec8 100644 --- a/app/assets/javascripts/repo/services/repo_service.js +++ b/app/assets/javascripts/repo/services/repo_service.js @@ -13,16 +13,6 @@ const RepoService = { }, richExtensionRegExp: /md/, - checkCurrentBranchIsCommitable() { - const url = Store.service.refsUrl; - return axios.get(url, { - params: { - ref: Store.currentBranch, - search: Store.currentBranch, - }, - }); - }, - getRaw(url) { return axios.get(url, { // Stop Axios from parsing a JSON file into a JS object @@ -77,7 +67,11 @@ const RepoService = { commitFiles(payload, cb) { Api.commitMultiple(Store.projectId, payload, (data) => { - Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice'); + if (data.short_id && data.stats) { + Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice'); + } else { + Flash(data.message); + } cb(); }); }, diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js index 73b4e1b3c14..1c0df528aea 100644 --- a/app/assets/javascripts/repo/stores/repo_store.js +++ b/app/assets/javascripts/repo/stores/repo_store.js @@ -5,8 +5,9 @@ import Service from '../services/repo_service'; const RepoStore = { monaco: {}, monacoLoading: false, - monacoInstance: {}, service: '', + canCommit: false, + onTopOfBranch: false, editMode: false, isTree: false, isRoot: false, @@ -52,14 +53,7 @@ const RepoStore = { // mutations checkIsCommitable() { - RepoStore.service.checkCurrentBranchIsCommitable() - .then((data) => { - // you shouldn't be able to make commits on commits or tags. - const { Branches, Commits, Tags } = data.data; - if (Branches && Branches.length) RepoStore.isCommitable = true; - if (Commits && Commits.length) RepoStore.isCommitable = false; - if (Tags && Tags.length) RepoStore.isCommitable = false; - }).catch(() => Flash('Failed to check if branch can be committed to.')); + RepoStore.isCommitable = RepoStore.onTopOfBranch && RepoStore.canCommit; }, addFilesToDirectory(inDirectory, currentList, newList) { @@ -117,15 +111,15 @@ const RepoStore = { removeChildFilesOfTree(tree) { let foundTree = false; const treeToClose = tree; - let wereDone = false; + let canStopSearching = false; RepoStore.files = RepoStore.files.filter((file) => { const isItTheTreeWeWant = file.url === treeToClose.url; // if it's the next tree if (foundTree && file.type === 'tree' && !isItTheTreeWeWant && file.level === treeToClose.level) { - wereDone = true; + canStopSearching = true; return true; } - if (wereDone) return true; + if (canStopSearching) return true; if (isItTheTreeWeWant) foundTree = true; @@ -142,8 +136,8 @@ const RepoStore = { if (file.type === 'tree') return; let foundIndex; RepoStore.openedFiles = RepoStore.openedFiles.filter((openedFile, i) => { - if (openedFile.url === file.url) foundIndex = i; - return openedFile.url !== file.url; + if (openedFile.path === file.path) foundIndex = i; + return openedFile.path !== file.path; }); // now activate the right tab based on what you closed. @@ -157,36 +151,16 @@ const RepoStore = { return; } - if (foundIndex) { - if (foundIndex > 0) { - RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]); - } + if (foundIndex && foundIndex > 0) { + RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]); } }, - addPlaceholderFile() { - const randomURL = Helper.Time.now(); - const newFakeFile = { - active: false, - binary: true, - type: 'blob', - loading: true, - mime_type: 'loading', - name: 'loading', - url: randomURL, - fake: true, - }; - - RepoStore.openedFiles.push(newFakeFile); - - return newFakeFile; - }, - addToOpenedFiles(file) { const openFile = file; const openedFilesAlreadyExists = RepoStore.openedFiles - .some(openedFile => openedFile.url === openFile.url); + .some(openedFile => openedFile.path === openFile.path); if (openedFilesAlreadyExists) return; diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue index 87ae8d0c9f1..994b33bc1c9 100644 --- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -3,10 +3,6 @@ export default { name: 'popup-dialog', props: { - open: { - type: Boolean, - required: true, - }, title: { type: String, required: true, @@ -53,7 +49,6 @@ export default { <template> <div class="modal popup-dialog" - v-if="open" role="dialog" tabindex="-1"> <div class="modal-dialog" role="document"> diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 3cd7f81da47..667b73e150d 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -187,3 +187,81 @@ a { .fade-in-full { animation: fadeInFull $fade-in-duration 1; } + + +.animation-container { + background: $repo-editor-grey; + height: 40px; + overflow: hidden; + position: relative; + + &.animation-container-small { + height: 12px; + } + + &::before { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: blockTextShine; + animation-timing-function: linear; + background-image: $repo-editor-linear-gradient; + background-repeat: no-repeat; + background-size: 800px 45px; + content: ' '; + display: block; + height: 100%; + position: relative; + } + + div { + background: $white-light; + height: 6px; + left: 0; + position: absolute; + right: 0; + } + + .skeleton-line-1 { + left: 0; + top: 8px; + } + + .skeleton-line-2 { + left: 150px; + top: 0; + height: 10px; + } + + .skeleton-line-3 { + left: 0; + top: 23px; + } + + .skeleton-line-4 { + left: 0; + top: 38px; + } + + .skeleton-line-5 { + left: 200px; + top: 28px; + height: 10px; + } + + .skeleton-line-6 { + top: 14px; + left: 230px; + height: 10px; + } +} + +@keyframes blockTextShine { + 0% { + transform: translateX(-468px); + } + + 100% { + transform: translateX(468px); + } +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index bd0367f86dd..bd521028c44 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -117,10 +117,6 @@ body { margin-top: $header-height + $performance-bar-height; } -[v-cloak] { - display: none; -} - .vertical-center { min-height: 100vh; display: flex; diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 5ffd5a08216..b3527fe8cd9 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -1,6 +1,6 @@ .fade-enter-active, .fade-leave-active { - transition: opacity .5s; + transition: opacity $sidebar-transition-duration; } .monaco-loader { @@ -85,7 +85,7 @@ } .blob-viewer-container { - height: calc(100vh - 63px); + height: calc(100vh - 62px); overflow: auto; } @@ -109,6 +109,7 @@ border-right: 1px solid $white-dark; border-bottom: 1px solid $white-dark; white-space: nowrap; + cursor: pointer; &.remove { animation: swipeRightDissapear ease-in 0.1s; @@ -131,6 +132,7 @@ width: 100px; text-align: center; vertical-align: middle; + text-decoration: none; &.close { width: auto; @@ -140,15 +142,15 @@ } } - i.fa.fa-times, - i.fa.fa-circle { + .close-icon, + .unsaved-icon { float: right; margin-top: 3px; margin-left: 15px; color: $gray-darkest; } - i.fa.fa-circle { + .unsaved-icon { color: $brand-success; } @@ -198,7 +200,7 @@ background: $gray-light; padding: 20px; - span.help-block { + .help-block { padding-top: 7px; margin-top: 0; } @@ -226,6 +228,7 @@ vertical-align: top; width: 20%; border-right: 1px solid $white-normal; + min-height: 475px; height: calc(100vh + 20px); overflow: auto; } @@ -255,7 +258,6 @@ text-transform: uppercase; font-weight: bold; color: $gray-darkest; - width: 185px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -264,7 +266,7 @@ } } - .fa { + .file-icon { margin-right: 5px; } @@ -274,118 +276,22 @@ } a { + @include str-truncated(250px); color: $almost-black; display: inline-block; vertical-align: middle; } - - ul { - list-style-type: none; - padding: 0; - - li { - border-bottom: 1px solid $border-gray-normal; - padding: 10px 20px; - - a { - color: $almost-black; - } - - .fa { - font-size: 12px; - margin-right: 5px; - } - } - } - } - -} - -.animation-container { - background: $repo-editor-grey; - height: 40px; - overflow: hidden; - position: relative; - - &.animation-container-small { - height: 12px; - } - - &::before { - animation-duration: 1s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: blockTextShine; - animation-timing-function: linear; - background-image: $repo-editor-linear-gradient; - background-repeat: no-repeat; - background-size: 800px 45px; - content: ' '; - display: block; - height: 100%; - position: relative; - } - - div { - background: $white-light; - height: 6px; - left: 0; - position: absolute; - right: 0; - } - - .line-of-code-1 { - left: 0; - top: 8px; - } - - .line-of-code-2 { - left: 150px; - top: 0; - height: 10px; - } - - .line-of-code-3 { - left: 0; - top: 23px; - } - - .line-of-code-4 { - left: 0; - top: 38px; - } - - .line-of-code-5 { - left: 200px; - top: 28px; - height: 10px; - } - - .line-of-code-6 { - top: 14px; - left: 230px; - height: 10px; } } .render-error { - min-height: calc(100vh - 63px); + min-height: calc(100vh - 62px); p { width: 100%; } } -@keyframes blockTextShine { - 0% { - transform: translateX(-468px); - } - - 100% { - transform: translateX(468px); - } -} - @keyframes swipeRightAppear { 0% { transform: scaleX(0.00); diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb index a2e8c10857d..2b8f3977e6e 100644 --- a/app/controllers/projects/blob_controller.rb +++ b/app/controllers/projects/blob_controller.rb @@ -198,6 +198,10 @@ class Projects::BlobController < Projects::ApplicationController json = blob_json(@blob) return render_404 unless json + path_segments = @path.split('/') + path_segments.pop + tree_path = path_segments.join('/') + render json: json.merge( path: blob.path, name: blob.name, @@ -212,6 +216,7 @@ class Projects::BlobController < Projects::ApplicationController raw_path: project_raw_path(project, @id), blame_path: project_blame_path(project, @id), commits_path: project_commits_path(project, @id), + tree_path: project_tree_path(project, File.join(@ref, tree_path)), permalink: project_blob_path(project, File.join(@commit.id, @path)) ) end diff --git a/app/serializers/tree_root_entity.rb b/app/serializers/tree_root_entity.rb index 23b65aa4a4c..69702ae1493 100644 --- a/app/serializers/tree_root_entity.rb +++ b/app/serializers/tree_root_entity.rb @@ -1,8 +1,21 @@ # TODO: Inherit from TreeEntity, when `Tree` implements `id` and `name` like `Gitlab::Git::Tree`. class TreeRootEntity < Grape::Entity + include RequestAwareEntity + expose :path - + expose :trees, using: TreeEntity expose :blobs, using: BlobEntity expose :submodules, using: SubmoduleEntity + + expose :parent_tree_url do |tree| + path = tree.path.sub(%r{\A/}, '') + next unless path.present? + + path_segments = path.split('/') + path_segments.pop + parent_tree_path = path_segments.join('/') + + project_tree_path(request.project, File.join(request.ref, parent_tree_path)) + end end diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml index 4498c8f8349..7ad743b3b81 100644 --- a/app/views/shared/_ref_switcher.html.haml +++ b/app/views/shared/_ref_switcher.html.haml @@ -6,7 +6,7 @@ - @options && @options.each do |key, value| = hidden_field_tag key, value, id: nil .dropdown - = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" } + = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project), field_name: 'ref', submit_form_on_click: true, visit: true }, { toggle_class: "js-project-refs-dropdown" } .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) } = dropdown_title _("Switch branch/tag") = dropdown_filter _("Search branches and tags") diff --git a/app/views/shared/_target_switcher.html.haml b/app/views/shared/_target_switcher.html.haml index 3672b552f10..9236868652f 100644 --- a/app/views/shared/_target_switcher.html.haml +++ b/app/views/shared/_target_switcher.html.haml @@ -1,5 +1,5 @@ - dropdown_toggle_text = @ref || @project.default_branch -= form_tag nil, method: :get, class: "project-refs-target-form" do += form_tag nil, method: :get, style: { display: 'none' }, class: "project-refs-target-form" do = hidden_field_tag :destination, destination - if defined?(path) = hidden_field_tag :path, path diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml index 051a5783516..87fa2007d16 100644 --- a/app/views/shared/repo/_repo.html.haml +++ b/app/views/shared/repo/_repo.html.haml @@ -1 +1,7 @@ -#repo{ data: { url: content_url, project_name: project.name, refs_url: refs_project_path(project, format: :json), project_url: project_path(project), project_id: project.id, can_commit: (!!can_push_branch?(project, @ref)).to_s } } +#repo{ data: { url: content_url, + project_name: project.name, + refs_url: refs_project_path(project, format: :json), + project_url: project_path(project), + project_id: project.id, + can_commit: (!!can_push_branch?(project, @ref)).to_s, + on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s } } diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js index db2b7d51626..249a2f36fcd 100644 --- a/spec/javascripts/repo/components/repo_commit_section_spec.js +++ b/spec/javascripts/repo/components/repo_commit_section_spec.js @@ -1,57 +1,57 @@ import Vue from 'vue'; import repoCommitSection from '~/repo/components/repo_commit_section.vue'; import RepoStore from '~/repo/stores/repo_store'; -import RepoHelper from '~/repo/helpers/repo_helper'; import Api from '~/api'; describe('RepoCommitSection', () => { const branch = 'master'; const projectUrl = 'projectUrl'; - const openedFiles = [{ + const changedFiles = [{ id: 0, changed: true, url: `/namespace/${projectUrl}/blob/${branch}/dir/file0.ext`, + path: 'dir/file0.ext', newContent: 'a', }, { id: 1, changed: true, url: `/namespace/${projectUrl}/blob/${branch}/dir/file1.ext`, + path: 'dir/file1.ext', newContent: 'b', - }, { + }]; + const openedFiles = changedFiles.concat([{ id: 2, url: `/namespace/${projectUrl}/blob/${branch}/dir/file2.ext`, + path: 'dir/file2.ext', changed: false, - }]; + }]); RepoStore.projectUrl = projectUrl; - function createComponent() { + function createComponent(el) { const RepoCommitSection = Vue.extend(repoCommitSection); - return new RepoCommitSection().$mount(); + return new RepoCommitSection().$mount(el); } it('renders a commit section', () => { RepoStore.isCommitable = true; + RepoStore.currentBranch = branch; RepoStore.targetBranch = branch; RepoStore.openedFiles = openedFiles; - spyOn(RepoHelper, 'getBranch').and.returnValue(branch); - const vm = createComponent(); - const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')]; + const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')]; const commitMessage = vm.$el.querySelector('#commit-message'); - const submitCommit = vm.$el.querySelector('.submit-commit'); + const submitCommit = vm.$refs.submitCommit; const targetBranch = vm.$el.querySelector('.target-branch'); expect(vm.$el.querySelector(':scope > form')).toBeTruthy(); - expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)'); - expect(changedFiles.length).toEqual(2); + expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)'); + expect(changedFileElements.length).toEqual(2); - changedFiles.forEach((changedFile, i) => { - const filePath = RepoHelper.getFilePathFromFullPath(openedFiles[i].url, branch); - - expect(changedFile.textContent).toEqual(filePath); + changedFileElements.forEach((changedFile, i) => { + expect(changedFile.textContent.trim()).toEqual(changedFiles[i].path); }); expect(commitMessage.tagName).toEqual('TEXTAREA'); @@ -59,9 +59,9 @@ describe('RepoCommitSection', () => { expect(submitCommit.type).toEqual('submit'); expect(submitCommit.disabled).toBeTruthy(); expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy(); - expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files'); - expect(targetBranch.querySelector(':scope > label').textContent).toEqual('Target branch'); - expect(targetBranch.querySelector('.help-block').textContent).toEqual(branch); + expect(vm.$el.querySelector('.commit-summary').textContent.trim()).toEqual('Commit 2 files'); + expect(targetBranch.querySelector(':scope > label').textContent.trim()).toEqual('Target branch'); + expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual(branch); }); it('does not render if not isCommitable', () => { @@ -89,14 +89,20 @@ describe('RepoCommitSection', () => { const projectId = 'projectId'; const commitMessage = 'commitMessage'; RepoStore.isCommitable = true; + RepoStore.currentBranch = branch; + RepoStore.targetBranch = branch; RepoStore.openedFiles = openedFiles; RepoStore.projectId = projectId; - spyOn(RepoHelper, 'getBranch').and.returnValue(branch); + // We need to append to body to get form `submit` events working + // Otherwise we run into, "Form submission canceled because the form is not connected" + // See https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm + const el = document.createElement('div'); + document.body.appendChild(el); - const vm = createComponent(); + const vm = createComponent(el); const commitMessageEl = vm.$el.querySelector('#commit-message'); - const submitCommit = vm.$el.querySelector('.submit-commit'); + const submitCommit = vm.$refs.submitCommit; vm.commitMessage = commitMessage; @@ -124,10 +130,8 @@ describe('RepoCommitSection', () => { expect(actions[1].action).toEqual('update'); expect(actions[0].content).toEqual(openedFiles[0].newContent); expect(actions[1].content).toEqual(openedFiles[1].newContent); - expect(actions[0].file_path) - .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[0].url, branch)); - expect(actions[1].file_path) - .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[1].url, branch)); + expect(actions[0].file_path).toEqual(openedFiles[0].path); + expect(actions[1].file_path).toEqual(openedFiles[1].path); done(); }); @@ -140,7 +144,6 @@ describe('RepoCommitSection', () => { const vm = { submitCommitsLoading: true, changedFiles: new Array(10), - openedFiles: new Array(10), commitMessage: 'commitMessage', editMode: true, }; @@ -149,7 +152,6 @@ describe('RepoCommitSection', () => { expect(vm.submitCommitsLoading).toEqual(false); expect(vm.changedFiles).toEqual([]); - expect(vm.openedFiles).toEqual([]); expect(vm.commitMessage).toEqual(''); expect(vm.editMode).toEqual(false); }); diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js index 2e0406cae34..29dc2d21e4b 100644 --- a/spec/javascripts/repo/components/repo_edit_button_spec.js +++ b/spec/javascripts/repo/components/repo_edit_button_spec.js @@ -12,19 +12,21 @@ describe('RepoEditButton', () => { it('renders an edit button that toggles the view state', (done) => { RepoStore.isCommitable = true; RepoStore.changedFiles = []; + RepoStore.binary = false; + RepoStore.openedFiles = [{}, {}]; const vm = createComponent(); expect(vm.$el.tagName).toEqual('BUTTON'); expect(vm.$el.textContent).toMatch('Edit'); - spyOn(vm, 'editClicked').and.callThrough(); + spyOn(vm, 'editCancelClicked').and.callThrough(); spyOn(vm, 'toggleProjectRefsForm'); vm.$el.click(); Vue.nextTick(() => { - expect(vm.editClicked).toHaveBeenCalled(); + expect(vm.editCancelClicked).toHaveBeenCalled(); expect(vm.toggleProjectRefsForm).toHaveBeenCalled(); expect(vm.$el.textContent).toMatch('Cancel edit'); done(); @@ -40,14 +42,10 @@ describe('RepoEditButton', () => { }); describe('methods', () => { - describe('editClicked', () => { - it('sets dialog to open when there are changedFiles', () => { + describe('editCancelClicked', () => { + it('sets dialog to open when there are changedFiles'); - }); - - it('toggles editMode and calls toggleBlobView', () => { - - }); + it('toggles editMode and calls toggleBlobView'); }); }); }); diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js index d15c3e33459..dfab51710c3 100644 --- a/spec/javascripts/repo/components/repo_file_buttons_spec.js +++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js @@ -32,13 +32,13 @@ describe('RepoFileButtons', () => { expect(vm.$el.id).toEqual('repo-file-buttons'); expect(raw.href).toMatch(`/${activeFile.raw_path}`); - expect(raw.textContent).toEqual('Raw'); + expect(raw.textContent.trim()).toEqual('Raw'); expect(blame.href).toMatch(`/${activeFile.blame_path}`); - expect(blame.textContent).toEqual('Blame'); + expect(blame.textContent.trim()).toEqual('Blame'); expect(history.href).toMatch(`/${activeFile.commits_path}`); - expect(history.textContent).toEqual('History'); - expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink'); - expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel); + expect(history.textContent.trim()).toEqual('History'); + expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink'); + expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel); }); it('triggers rawPreviewToggle on preview click', () => { @@ -72,12 +72,4 @@ describe('RepoFileButtons', () => { expect(vm.$el.querySelector('.preview')).toBeFalsy(); }); - - it('does not render if not isMini', () => { - RepoStore.openedFiles = []; - - const vm = createComponent(); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); }); diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js index 90616ae13ca..518a2d25ecf 100644 --- a/spec/javascripts/repo/components/repo_file_spec.js +++ b/spec/javascripts/repo/components/repo_file_spec.js @@ -39,9 +39,9 @@ describe('RepoFile', () => { expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px'); expect(name.title).toEqual(file.url); expect(name.href).toMatch(`/${file.url}`); - expect(name.textContent).toEqual(file.name); - expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage); - expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated); + expect(name.textContent.trim()).toEqual(file.name); + expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage); + expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated); expect(fileIcon.classList.contains(file.icon)).toBeTruthy(); expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`); }); diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js index d84f4c5609e..a030314d749 100644 --- a/spec/javascripts/repo/components/repo_loading_file_spec.js +++ b/spec/javascripts/repo/components/repo_loading_file_spec.js @@ -13,7 +13,7 @@ describe('RepoLoadingFile', () => { function assertLines(lines) { lines.forEach((line, n) => { const index = n + 1; - expect(line.classList.contains(`line-of-code-${index}`)).toBeTruthy(); + expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy(); }); } diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js index edd27d3afb8..abcff8e537e 100644 --- a/spec/javascripts/repo/components/repo_sidebar_spec.js +++ b/spec/javascripts/repo/components/repo_sidebar_spec.js @@ -15,6 +15,7 @@ describe('RepoSidebar', () => { RepoStore.files = [{ id: 0, }]; + RepoStore.openedFiles = []; const vm = createComponent(); const thead = vm.$el.querySelector('thead'); const tbody = vm.$el.querySelector('tbody'); diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js index 306af735dee..a02b54efafc 100644 --- a/spec/javascripts/repo/components/repo_tabs_spec.js +++ b/spec/javascripts/repo/components/repo_tabs_spec.js @@ -29,14 +29,6 @@ describe('RepoTabs', () => { expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy(); }); - it('does not render a tabs list if not isMini', () => { - RepoStore.openedFiles = []; - - const vm = createComponent(); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); - describe('methods', () => { describe('tabClosed', () => { it('calls removeFromOpenedFiles with file obj', () => { |