diff options
Diffstat (limited to 'app/assets/javascripts')
28 files changed, 587 insertions, 443 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/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index cbc3ad23990..32cb42c8b10 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -15,6 +15,10 @@ export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; }; export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); +let headerHeight = 50; + +export const getHeaderHeight = () => headerHeight; + export const canShowActiveSubItems = (el) => { const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md'; @@ -74,7 +78,7 @@ export const moveSubItemsToPosition = (el, subItems) => { const isAbove = top < boundingRect.top; subItems.classList.add('fly-out-list'); - subItems.style.transform = `translate3d(0, ${Math.floor(top)}px, 0)`; // eslint-disable-line no-param-reassign + subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign const subItemsRect = subItems.getBoundingClientRect(); @@ -153,6 +157,8 @@ export default () => { }, getHideSubItemsInterval()); }); + headerHeight = document.querySelector('.nav-sidebar').offsetTop; + items.forEach((el) => { const subItems = el.querySelector('.sidebar-sub-level-items'); diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js index 1c379e9bb67..7ac9dcd1112 100644 --- a/app/assets/javascripts/gpg_badges.js +++ b/app/assets/javascripts/gpg_badges.js @@ -1,12 +1,14 @@ export default class GpgBadges { static fetch() { + const badges = $('.js-loading-gpg-badge'); const form = $('.commits-search-form'); + badges.html('<i class="fa fa-spinner fa-spin"></i>'); + $.get({ url: form.data('signatures-path'), data: form.serialize(), }).done((response) => { - const badges = $('.js-loading-gpg-badge'); response.signatures.forEach((signature) => { badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html); }); diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js deleted file mode 100644 index c827b7402dc..00000000000 --- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js +++ /dev/null @@ -1,50 +0,0 @@ -import Vue from 'vue'; -import Cookies from 'js-cookie'; -import Translate from '../../vue_shared/translate'; -import illustrationSvg from '../icons/intro_illustration.svg'; - -Vue.use(Translate); - -const cookieKey = 'pipeline_schedules_callout_dismissed'; - -export default { - name: 'PipelineSchedulesCallout', - data() { - return { - docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl, - illustrationSvg, - calloutDismissed: Cookies.get(cookieKey) === 'true', - }; - }, - methods: { - dismissCallout() { - this.calloutDismissed = true; - Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 }); - }, - }, - template: ` - <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout"> - <div class="bordered-box landing content-block"> - <button - id="dismiss-callout-btn" - class="btn btn-default close" - @click="dismissCallout"> - <i class="fa fa-times"></i> - </button> - <div class="svg-container" v-html="illustrationSvg"></div> - <div class="user-callout-copy"> - <h4>{{ __('Scheduling Pipelines') }}</h4> - <p> - {{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }} - </p> - <p> {{ __('Learn more in the') }} - <a - :href="docsUrl" - target="_blank" - rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period --> - </p> - </div> - </div> - </div> - `, -}; diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue new file mode 100644 index 00000000000..6e0bc2d697a --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue @@ -0,0 +1,59 @@ +<script> + import Vue from 'vue'; + import Cookies from 'js-cookie'; + import Translate from '../../vue_shared/translate'; + import illustrationSvg from '../icons/intro_illustration.svg'; + + Vue.use(Translate); + + const cookieKey = 'pipeline_schedules_callout_dismissed'; + + export default { + name: 'PipelineSchedulesCallout', + data() { + return { + docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl, + calloutDismissed: Cookies.get(cookieKey) === 'true', + }; + }, + methods: { + dismissCallout() { + this.calloutDismissed = true; + Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 }); + }, + }, + created() { + this.illustrationSvg = illustrationSvg; + }, + }; +</script> +<template> + <div + v-if="!calloutDismissed" + class="pipeline-schedules-user-callout user-callout"> + <div class="bordered-box landing content-block"> + <button + id="dismiss-callout-btn" + class="btn btn-default close" + @click="dismissCallout"> + <i + aria-hidden="true" + class="fa fa-times"> + </i> + </button> + <div class="svg-container" v-html="illustrationSvg"></div> + <div class="user-callout-copy"> + <h4>{{ __('Scheduling Pipelines') }}</h4> + <p> + {{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }} + </p> + <p> {{ __('Learn more in the') }} + <a + :href="docsUrl" + target="_blank" + rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period --> + </p> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js index 6584549ad06..a6c945e22b0 100644 --- a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js +++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import PipelineSchedulesCallout from './components/pipeline_schedules_callout'; +import PipelineSchedulesCallout from './components/pipeline_schedules_callout.vue'; document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#pipeline-schedules-callout', diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index 2944689a5a7..7695b04db74 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -48,6 +48,27 @@ return `${this.job.name} - ${this.job.status.label}`; }, }, + + methods: { + /** + * When the user right clicks or cmd/ctrl + click in the job name + * the dropdown should not be closed and the link should open in another tab, + * so we stop propagation of the click event inside the dropdown. + * + * Since this component is rendered multiple times per page we need to guarantee we only + * target the click event of this component. + */ + stopDropdownClickPropagation() { + $(this.$el.querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item')) + .on('click', (e) => { + e.stopPropagation(); + }); + }, + }, + + mounted() { + this.stopDropdownClickPropagation(); + }, }; </script> <template> diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js index 1c2100a1c25..d7e3ab42f00 100644 --- a/app/assets/javascripts/project.js +++ b/app/assets/javascripts/project.js @@ -126,11 +126,11 @@ 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) { - gl.utils.visitUrl(action + '' + divider + '' + $form.serialize()); + gl.utils.visitUrl(`${action}${divider}${$form.serialize()}`); } } } 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 bd83f80c928..5ec4a9b6593 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -2,18 +2,20 @@ /* 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'; -const RepoCommitSection = { +export default { data: () => Store, 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 @@ const RepoCommitSection = { 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,51 +48,80 @@ const RepoCommitSection = { resetCommitState() { this.submitCommitsLoading = false; this.changedFiles = []; - this.openedFiles = []; this.commitMessage = ''; this.editMode = false; - $('html, body').animate({ scrollTop: 0 }, 'fast'); + window.scrollTo(0, 0); }, }, }; - -export default RepoCommitSection; </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 e954fd38fc9..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; @@ -23,27 +26,33 @@ export default { this.editMode = !this.editMode; Store.toggleBlobView(); }, + toggleProjectRefsForm() { + $('.project-refs-form').toggleClass('disabled', this.editMode); + $('.js-tree-ref-target-holder').toggle(this.editMode); + }, }, watch: { editMode() { - if (this.editMode) { - $('.project-refs-form').addClass('disabled'); - $('.fa-long-arrow-right').show(); - $('.project-refs-target-form').show(); - } else { - $('.project-refs-form').removeClass('disabled'); - $('.fa-long-arrow-right').hide(); - $('.project-refs-target-form').hide(); - } + this.toggleProjectRefsForm(); }, }, }; </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 fd1a21e15b4..96d6a75bb61 100644 --- a/app/assets/javascripts/repo/components/repo_editor.vue +++ b/app/assets/javascripts/repo/components/repo_editor.vue @@ -8,38 +8,39 @@ 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); - this.showHide(); - 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'; @@ -49,41 +50,36 @@ const RepoEditor = { }, 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, - }); - }, - - activeFileLabel() { - this.showHide(); - }, - 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; @@ -94,35 +90,21 @@ const RepoEditor = { return f; }); this.editMode = false; + Store.toggleBlobView(); } }, deep: true, }, - isTree() { - this.showHide(); - }, - - openedFiles() { - this.showHide(); - }, - - binary() { - this.showHide(); - }, - blobRaw() { - this.showHide(); - - 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: { + shouldHideEditor() { + return !this.openedFiles.length || (this.binary && !this.activeFile.raw); }, }, }; @@ -131,5 +113,5 @@ export default RepoEditor; </script> <template> -<div id="ide"></div> +<div id="ide" v-if='!shouldHideEditor'></div> </template> 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_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..72b40288566 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/app/assets/javascripts/repo/components/repo_sidebar.vue @@ -8,7 +8,7 @@ import RepoFile from './repo_file.vue'; import RepoLoadingFile from './repo_loading_file.vue'; import RepoMixin from '../mixins/repo_mixin'; -const RepoSidebar = { +export default { mixins: [RepoMixin], components: { 'repo-file-options': RepoFileOptions, @@ -33,40 +33,36 @@ 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, () => { + if (file.loading) return; + 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); + }, }, }; - -export default RepoSidebar; </script> <template> -<div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak> +<div id="sidebar" :class="{'sidebar-mini' : isMini}"> <table class="table"> <thead v-if="!isMini"> <tr> @@ -82,7 +78,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 +90,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..0d0c34ec741 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -10,10 +10,16 @@ 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, - 'fa-circle': this.tab.changed, + 'fa-times close-icon': !this.tab.changed, + 'fa-circle unsaved-icon': this.tab.changed, }; return tabChangedObj; }, @@ -22,9 +28,9 @@ const RepoTab = { methods: { tabClicked: Store.setActiveFiles, - xClicked(file) { + closeTab(file) { if (file.changed) return; - this.$emit('xclicked', file); + this.$emit('tabclosed', file); }, }, }; @@ -33,13 +39,25 @@ export default RepoTab; </script> <template> -<li> - <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading"> - <i class="fa" :class="changedClass"></i> +<li @click="tabClicked(tab)"> + <a + href="#0" + class="close" + @click.stop.prevent="closeTab(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..9c5bfc5d0cf 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,30 +13,24 @@ const RepoTabs = { data: () => Store, methods: { - isOverflow() { - return this.$el.scrollWidth > this.$el.offsetWidth; - }, - - xClicked(file) { + tabClosed(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}"> - <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xClicked"/> +<ul id="tabs"> + <repo-tab + v-for="tab in openedFiles" + :key="tab.id" + :tab="tab" + :class="{'active' : tab.active}" + @tabclosed="tabClosed" + /> <li class="tabs-divider" /> </ul> </template> diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js index 8ee2df5c879..f8729bbf585 100644 --- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js +++ b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js @@ -1,16 +1,20 @@ /* 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); - }, 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..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, @@ -33,19 +35,23 @@ const RepoHelper = { ? window.performance : Date, - getBranch() { - return $('button.dropdown-menu-toggle').attr('data-ref'); + getFileExtension(fileName) { + return fileName.split('.').pop(); }, 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'; }, - 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) { @@ -58,11 +64,11 @@ const RepoHelper = { file.opened = true; file.icon = 'fa-folder-open'; - RepoHelper.toURL(file.url, file.name); + RepoHelper.updateHistoryEntry(file.url, file.name); return file; }, - isKindaBinary() { + isRenderable() { const okExts = ['md', 'svg']; return okExts.indexOf(Store.activeFile.extension) > -1; }, @@ -76,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; @@ -100,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; @@ -135,21 +130,17 @@ 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 +179,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 +189,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 +212,7 @@ const RepoHelper = { type, name, url, - icon: RepoHelper.toFA(icon), + icon: `fa-${icon}`, level: 0, loading: false, }; @@ -244,42 +230,24 @@ const RepoHelper = { setTimeout(() => { const tabs = document.getElementById('tabs'); if (!tabs) return; - tabs.scrollLeft = 12000; + tabs.scrollLeft = tabs.scrollWidth; }, 200); }, 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; - }, - - toURL(url, title) { + updateHistoryEntry(url, title) { const history = window.history; RepoHelper.key = RepoHelper.genKey(); @@ -296,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 67c03680fca..6c1d468e937 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() { @@ -34,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(); } @@ -44,6 +45,9 @@ function initRepo(el) { components: { repo: Repo, }, + render(createElement) { + return createElement('repo'); + }, }); } diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js index 8fba928e456..3cf204e6ec8 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: '', @@ -12,16 +13,9 @@ 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 transformResponse: [res => res], }); }, @@ -36,7 +30,7 @@ const RepoService = { }, urlIsRichBlob(url = this.url) { - const extension = url.split('.').pop(); + const extension = Helper.getFileExtension(url); return this.richExtensionRegExp.test(extension); }, @@ -73,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 06ca391ed0c..1c0df528aea 100644 --- a/app/assets/javascripts/repo/stores/repo_store.js +++ b/app/assets/javascripts/repo/stores/repo_store.js @@ -3,13 +3,11 @@ import Helper from '../helpers/repo_helper'; import Service from '../services/repo_service'; const RepoStore = { - ideEl: {}, monaco: {}, monacoLoading: false, - monacoInstance: {}, service: '', - editor: '', - sidebar: '', + canCommit: false, + onTopOfBranch: false, editMode: false, isTree: false, isRoot: false, @@ -17,19 +15,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 +34,6 @@ const RepoStore = { currentBranch: '', targetBranch: 'new-branch', commitMessage: '', - binaryMimeType: '', - // scroll bar space for windows - scrollWidth: 0, binaryTypes: { png: false, md: false, @@ -58,7 +44,6 @@ const RepoStore = { tree: false, blob: false, }, - readOnly: true, resetBinaryTypes() { Object.keys(RepoStore.binaryTypes).forEach((key) => { @@ -68,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) { @@ -96,7 +74,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 { @@ -107,7 +84,7 @@ const RepoStore = { }).catch(Helper.loadingError); } - if (!file.loading) Helper.toURL(file.url, file.name); + if (!file.loading) Helper.updateHistoryEntry(file.url, file.name); RepoStore.binary = file.binary; }, @@ -134,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; @@ -159,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. @@ -174,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; @@ -238,4 +195,5 @@ const RepoStore = { return RepoStore.currentBlobView === 'repo-preview'; }, }; + export default RepoStore; diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue index 422c02c7b7e..cfacba09fad 100644 --- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue @@ -71,7 +71,7 @@ export default { /> <div v-if="!isConfidential" class="no-value confidential-value"> <i class="fa fa-eye is-not-confidential"></i> - None + This issue is not confidential </div> <div v-else class="value confidential-value hide-collapsed"> <i aria-hidden="true" data-hidden="true" class="fa fa-eye-slash is-confidential"></i> diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue index 7d339c0e753..994b33bc1c9 100644 --- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -1,31 +1,37 @@ <script> -const PopupDialog = { +export default { name: 'popup-dialog', props: { - open: Boolean, - title: String, - body: String, + title: { + type: String, + required: true, + }, + body: { + type: String, + required: true, + }, kind: { type: String, + required: false, default: 'primary', }, closeButtonLabel: { type: String, + required: false, default: 'Cancel', }, primaryButtonLabel: { type: String, - default: 'Save changes', + required: true, }, }, computed: { - typeOfClass() { - const className = `btn-${this.kind}`; - const returnObj = {}; - returnObj[className] = true; - return returnObj; + btnKindClass() { + return { + [`btn-${this.kind}`]: true, + }; }, }, @@ -33,33 +39,45 @@ const PopupDialog = { close() { this.$emit('toggle', false); }, - - yesClick() { - this.$emit('submit', true); - }, - - noClick() { - this.$emit('submit', false); + emitSubmit(status) { + this.$emit('submit', status); }, }, }; - -export default PopupDialog; </script> + <template> -<div class="modal popup-dialog" tabindex="-1" v-show="open" role="dialog"> +<div + class="modal popup-dialog" + role="dialog" + tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <button type="button" + class="close" + @click="close" + aria-label="Close"> + <span aria-hidden="true">×</span> + </button> <h4 class="modal-title">{{this.title}}</h4> </div> <div class="modal-body"> <p>{{this.body}}</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-default" data-dismiss="modal" @click="noClick">{{closeButtonLabel}}</button> - <button type="button" class="btn" :class="typeOfClass" @click="yesClick">{{primaryButtonLabel}}</button> + <button + type="button" + class="btn btn-default" + @click="emitSubmit(false)"> + {{closeButtonLabel}} + </button> + <button type="button" + class="btn" + :class="btnKindClass" + @click="emitSubmit(true)"> + {{primaryButtonLabel}} + </button> </div> </div> </div> |