diff options
Diffstat (limited to 'app/assets/javascripts')
244 files changed, 4093 insertions, 5133 deletions
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js index 0f28bd233ac..0da872db7e5 100644 --- a/app/assets/javascripts/autosave.js +++ b/app/assets/javascripts/autosave.js @@ -3,10 +3,10 @@ import AccessorUtilities from './lib/utils/accessor'; export default class Autosave { - constructor(field, key, resource) { + constructor(field, key) { this.field = field; + this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe(); - this.resource = resource; if (key.join != null) { key = key.join('/'); } @@ -17,31 +17,27 @@ export default class Autosave { } restore() { - var text; - if (!this.isLocalStorageAvailable) return; + if (!this.field.length) return; - text = window.localStorage.getItem(this.key); + const text = window.localStorage.getItem(this.key); if ((text != null ? text.length : void 0) > 0) { this.field.val(text); } - if (!this.resource && this.resource !== 'issue') { - this.field.trigger('input'); - } else { - // v-model does not update with jQuery trigger - // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137 - const event = new Event('change', { bubbles: true, cancelable: false }); - const field = this.field.get(0); - if (field) { - field.dispatchEvent(event); - } - } + + this.field.trigger('input'); + // v-model does not update with jQuery trigger + // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137 + const event = new Event('change', { bubbles: true, cancelable: false }); + const field = this.field.get(0); + field.dispatchEvent(event); } save() { - var text; - text = this.field.val(); + if (!this.field.length) return; + + const text = this.field.val(); if (this.isLocalStorageAvailable && (text != null ? text.length : void 0) > 0) { return window.localStorage.setItem(this.key, text); diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 9456edebccb..26e62732b33 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import Cookies from 'js-cookie'; import { __ } from './locale'; -import { isInIssuePage, updateTooltipTitle } from './lib/utils/common_utils'; +import { isInIssuePage, isInMRPage, hasVueMRDiscussionsCookie, updateTooltipTitle } from './lib/utils/common_utils'; import flash from './flash'; import axios from './lib/utils/axios_utils'; @@ -239,9 +239,9 @@ class AwardsHandler { } addAward(votesBlock, awardUrl, emoji, checkMutuality, callback) { - const isMainAwardsBlock = votesBlock.closest('.js-issue-note-awards').length; + const isMainAwardsBlock = votesBlock.closest('.js-noteable-awards').length; - if (isInIssuePage() && !isMainAwardsBlock) { + if (this.isInVueNoteablePage() && !isMainAwardsBlock) { const id = votesBlock.attr('id').replace('note_', ''); this.hideMenuElement($('.emoji-menu')); @@ -293,8 +293,16 @@ class AwardsHandler { } } + isVueMRDiscussions() { + return isInMRPage() && hasVueMRDiscussionsCookie() && !$('#diffs').is(':visible'); + } + + isInVueNoteablePage() { + return isInIssuePage() || this.isVueMRDiscussions(); + } + getVotesBlock() { - if (isInIssuePage()) { + if (this.isInVueNoteablePage()) { const $el = $('.js-add-award.is-active').closest('.note.timeline-entry'); if ($el.length) { diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js index 312edc0cd69..51bd5b8ebe5 100644 --- a/app/assets/javascripts/behaviors/quick_submit.js +++ b/app/assets/javascripts/behaviors/quick_submit.js @@ -72,5 +72,5 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q title, trigger: 'manual', }); - $this.tooltip('show').one('blur', () => $this.tooltip('hide')); + $this.tooltip('show').one('blur click', () => $this.tooltip('hide')); }); diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js index 417ac31fc86..81c89441424 100644 --- a/app/assets/javascripts/behaviors/toggler_behavior.js +++ b/app/assets/javascripts/behaviors/toggler_behavior.js @@ -12,7 +12,7 @@ $(() => { const $container = $(container); $container - .find('.js-toggle-button .fa') + .find('.js-toggle-button .fa-chevron-up, .js-toggle-button .fa-chevron-down') .toggleClass('fa-chevron-up', toggleState) .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); @@ -22,7 +22,7 @@ $(() => { } $('body').on('click', '.js-toggle-button', function toggleButton(e) { - e.target.classList.toggle('open'); + e.currentTarget.classList.toggle(e.currentTarget.dataset.toggleOpenClass || 'open'); toggleContainer($(this).closest('.js-toggle-container')); const targetTag = e.currentTarget.tagName.toLowerCase(); diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js index 062577af385..06ef86ecb77 100644 --- a/app/assets/javascripts/blob/balsamiq_viewer.js +++ b/app/assets/javascripts/blob/balsamiq_viewer.js @@ -7,7 +7,7 @@ function onError() { return flash; } -function loadBalsamiqFile() { +export default function loadBalsamiqFile() { const viewer = document.getElementById('js-balsamiq-viewer'); if (!(viewer instanceof Element)) return; @@ -17,5 +17,3 @@ function loadBalsamiqFile() { const balsamiqViewer = new BalsamiqViewer(viewer); balsamiqViewer.loadFile(endpoint).catch(onError); } - -$(loadBalsamiqFile); diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js index b7a0a195a92..226ae69893e 100644 --- a/app/assets/javascripts/blob/notebook_viewer.js +++ b/app/assets/javascripts/blob/notebook_viewer.js @@ -1,3 +1,3 @@ import renderNotebook from './notebook'; -document.addEventListener('DOMContentLoaded', renderNotebook); +export default renderNotebook; diff --git a/app/assets/javascripts/blob/pdf_viewer.js b/app/assets/javascripts/blob/pdf_viewer.js index 91abe9dd699..cabbb396ea7 100644 --- a/app/assets/javascripts/blob/pdf_viewer.js +++ b/app/assets/javascripts/blob/pdf_viewer.js @@ -1,3 +1,3 @@ import renderPDF from './pdf'; -document.addEventListener('DOMContentLoaded', renderPDF); +export default renderPDF; diff --git a/app/assets/javascripts/blob/sketch_viewer.js b/app/assets/javascripts/blob/sketch_viewer.js index 0640dd26855..2c1c6339fdb 100644 --- a/app/assets/javascripts/blob/sketch_viewer.js +++ b/app/assets/javascripts/blob/sketch_viewer.js @@ -1,8 +1,8 @@ /* eslint-disable no-new */ import SketchLoader from './sketch'; -document.addEventListener('DOMContentLoaded', () => { +export default () => { const el = document.getElementById('js-sketch-viewer'); new SketchLoader(el); -}); +}; diff --git a/app/assets/javascripts/blob/stl_viewer.js b/app/assets/javascripts/blob/stl_viewer.js index f611c4fe640..63236b6477f 100644 --- a/app/assets/javascripts/blob/stl_viewer.js +++ b/app/assets/javascripts/blob/stl_viewer.js @@ -1,6 +1,6 @@ import Renderer from './3d_viewer'; -document.addEventListener('DOMContentLoaded', () => { +export default () => { const viewer = new Renderer(document.getElementById('js-stl-viewer')); [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => { @@ -16,4 +16,4 @@ document.addEventListener('DOMContentLoaded', () => { viewer.changeObjectMaterials(target.dataset.type); }); }); -}); +}; diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 612f604e725..92ea91c45a8 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -5,6 +5,7 @@ import axios from '../../lib/utils/axios_utils'; export default class BlobViewer { constructor() { BlobViewer.initAuxiliaryViewer(); + BlobViewer.initRichViewer(); this.initMainViewers(); } @@ -16,6 +17,38 @@ export default class BlobViewer { BlobViewer.loadViewer(auxiliaryViewer); } + static initRichViewer() { + const viewer = document.querySelector('.blob-viewer[data-type="rich"]'); + if (!viewer || !viewer.dataset.richType) return; + + const initViewer = promise => promise + .then(module => module.default(viewer)) + .catch((error) => { + Flash('Error loading file viewer.'); + throw error; + }); + + switch (viewer.dataset.richType) { + case 'balsamiq': + initViewer(import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer')); + break; + case 'notebook': + initViewer(import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer')); + break; + case 'pdf': + initViewer(import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer')); + break; + case 'sketch': + initViewer(import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer')); + break; + case 'stl': + initViewer(import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer')); + break; + default: + break; + } + } + initMainViewers() { this.$fileHolder = $('.file-holder'); if (!this.$fileHolder.length) return; diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 23fec503586..84885ca9306 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/require-default-prop */ import './issue_card_inner'; import eventHub from '../eventhub'; @@ -34,6 +35,9 @@ export default { type: String, default: '', }, + groupId: { + type: Number, + }, }, data() { return { @@ -88,6 +92,7 @@ export default { :list="list" :issue="issue" :issue-link-base="issueLinkBase" + :group-id="groupId" :root-path="rootPath" :update-filters="true" /> diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 9a0442e2afe..0d03c1c419c 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -1,6 +1,6 @@ <script> import Sortable from 'vendor/Sortable'; -import boardNewIssue from './board_new_issue'; +import boardNewIssue from './board_new_issue.vue'; import boardCard from './board_card.vue'; import eventHub from '../eventhub'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; @@ -15,6 +15,11 @@ export default { loadingIcon, }, props: { + groupId: { + type: Number, + required: false, + default: 0, + }, disabled: { type: Boolean, required: true, @@ -170,6 +175,7 @@ export default { <loading-icon /> </div> <board-new-issue + :group-id="groupId" :list="list" v-if="list.type !== 'closed' && showIssueForm"/> <ul @@ -185,6 +191,7 @@ export default { :list="list" :issue="issue" :issue-link-base="issueLinkBase" + :group-id="groupId" :root-path="rootPath" :disabled="disabled" :key="issue.id" /> diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.vue index bc28f7f45f4..870d242e774 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.js +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -1,11 +1,21 @@ -/* global ListIssue */ +<script> import eventHub from '../eventhub'; +import ProjectSelect from './project_select.vue'; +import ListIssue from '../models/issue'; const Store = gl.issueBoards.BoardsStore; export default { name: 'BoardNewIssue', + components: { + ProjectSelect, + }, props: { + groupId: { + type: Number, + required: false, + default: 0, + }, list: { type: Object, required: true, @@ -15,8 +25,21 @@ export default { return { title: '', error: false, + selectedProject: {}, }; }, + computed: { + disabled() { + if (this.groupId) { + return this.title === '' || !this.selectedProject.name; + } + return this.title === ''; + }, + }, + mounted() { + this.$refs.input.focus(); + eventHub.$on('setSelectedProject', this.setSelectedProject); + }, methods: { submit(e) { e.preventDefault(); @@ -30,6 +53,7 @@ export default { labels, subscribed: true, assignees: [], + project_id: this.selectedProject.id, }); eventHub.$emit(`scroll-board-list-${this.list.id}`); @@ -58,43 +82,62 @@ export default { this.title = ''; eventHub.$emit(`hide-issue-form-${this.list.id}`); }, + setSelectedProject(selectedProject) { + this.selectedProject = selectedProject; + }, }, - mounted() { - this.$refs.input.focus(); - }, - template: ` - <div class="card board-new-issue-form"> +}; +</script> + +<template> + <div class="board-new-issue-form"> + <div class="card"> <form @submit="submit($event)"> - <div class="flash-container" - v-if="error"> + <div + class="flash-container" + v-if="error" + > <div class="flash-alert"> An error occurred. Please try again. </div> </div> - <label class="label-light" - :for="list.id + '-title'"> + <label + class="label-light" + :for="list.id + '-title'" + > Title </label> - <input class="form-control" + <input + class="form-control" type="text" v-model="title" ref="input" autocomplete="off" - :id="list.id + '-title'" /> + :id="list.id + '-title'" + /> + <project-select + v-if="groupId" + :group-id="groupId" + /> <div class="clearfix prepend-top-10"> - <button class="btn btn-success pull-left" + <button + class="btn btn-success pull-left" type="submit" - :disabled="title === ''" - ref="submit-button"> + :disabled="disabled" + ref="submit-button" + > Submit issue </button> - <button class="btn btn-default pull-right" + <button + class="btn btn-default pull-right" type="button" - @click="cancel"> + @click="cancel" + > Cancel </button> </div> </form> </div> - `, -}; + </div> +</template> + diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index add24303e7b..9501e35b178 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/app/assets/javascripts/boards/components/board_sidebar.js @@ -6,7 +6,7 @@ import { __ } from '../../locale'; import Sidebar from '../../right_sidebar'; import eventHub from '../../sidebar/event_hub'; import assigneeTitle from '../../sidebar/components/assignees/assignee_title'; -import assignees from '../../sidebar/components/assignees/assignees'; +import assignees from '../../sidebar/components/assignees/assignees.vue'; import DueDateSelectors from '../../due_date_select'; import './sidebar/remove_issue'; import IssuableContext from '../../issuable_context'; diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js index bf474879024..fc2bad2415f 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.js +++ b/app/assets/javascripts/boards/components/issue_card_inner.js @@ -31,6 +31,10 @@ gl.issueBoards.IssueCardInner = Vue.extend({ required: false, default: false, }, + groupId: { + type: Number, + required: false, + }, }, data() { return { @@ -64,7 +68,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({ return this.issue.assignees.length > this.numberOverLimit; }, cardUrl() { - return `${this.issueLinkBase}/${this.issue.iid}`; + let baseUrl = this.issueLinkBase; + + if (this.groupId && this.issue.project) { + baseUrl = this.issueLinkBase.replace(':project_path', this.issue.project.path); + } + + return `${baseUrl}/${this.issue.iid}`; }, issueId() { if (this.issue.iid) { @@ -148,7 +158,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({ class="card-number" v-if="issueId" > - {{ issueId }} + <template v-if="groupId && issue.project">{{issue.project.path}}</template>{{ issueId }} </span> </h4> <div class="card-assignee"> diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue new file mode 100644 index 00000000000..d99b222c305 --- /dev/null +++ b/app/assets/javascripts/boards/components/project_select.vue @@ -0,0 +1,127 @@ +<script> + /* global ListIssue */ + import _ from 'underscore'; + import eventHub from '../eventhub'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import Api from '../../api'; + + export default { + name: 'BoardProjectSelect', + components: { + loadingIcon, + }, + props: { + groupId: { + type: Number, + required: true, + default: 0, + }, + }, + data() { + return { + loading: true, + selectedProject: {}, + }; + }, + computed: { + selectedProjectName() { + return this.selectedProject.name || 'Select a project'; + }, + }, + mounted() { + $(this.$refs.projectsDropdown).glDropdown({ + filterable: true, + filterRemote: true, + search: { + fields: ['name_with_namespace'], + }, + clicked: ({ $el, e }) => { + e.preventDefault(); + this.selectedProject = { + id: $el.data('project-id'), + name: $el.data('project-name'), + }; + eventHub.$emit('setSelectedProject', this.selectedProject); + }, + selectable: true, + data: (term, callback) => { + this.loading = true; + return Api.groupProjects(this.groupId, term, (projects) => { + this.loading = false; + callback(projects); + }); + }, + renderRow(project) { + return ` + <li> + <a href='#' class='dropdown-menu-link' data-project-id="${project.id}" data-project-name="${project.name}"> + ${_.escape(project.name)} + </a> + </li> + `; + }, + text: project => project.name, + }); + }, + }; +</script> + +<template> + <div> + <label class="label-light prepend-top-10"> + Project + </label> + <div + ref="projectsDropdown" + class="dropdown" + > + <button + class="dropdown-menu-toggle wide" + type="button" + data-toggle="dropdown" + aria-expanded="false" + > + {{ selectedProjectName }} + <i + class="fa fa-chevron-down" + aria-hidden="true" + > + </i> + </button> + <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> + <div class="dropdown-title"> + <span>Projects</span> + <button + aria-label="Close" + type="button" + class="dropdown-title-button dropdown-menu-close" + > + <i + aria-hidden="true" + data-hidden="true" + class="fa fa-times dropdown-menu-close-icon" + > + </i> + </button> + </div> + <div class="dropdown-input"> + <input + class="dropdown-input-field" + type="search" + placeholder="Search projects" + /> + <i + aria-hidden="true" + data-hidden="true" + class="fa fa-search dropdown-input-search" + > + </i> + </div> + <div class="dropdown-content"></div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js index 0ae32bb4d0a..09c683ff621 100644 --- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js +++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js @@ -24,7 +24,7 @@ gl.issueBoards.RemoveIssueBtn = Vue.extend({ }, computed: { updateUrl() { - return this.issueUpdate; + return this.issueUpdate.replace(':project_path', this.issue.project.path); }, }, methods: { @@ -32,17 +32,21 @@ gl.issueBoards.RemoveIssueBtn = Vue.extend({ const issue = this.issue; const lists = issue.getLists(); const listLabelIds = lists.map(list => list.label.id); - let labelIds = this.issue.labels + + let labelIds = issue.labels .map(label => label.id) .filter(id => !listLabelIds.includes(id)); if (labelIds.length === 0) { labelIds = ['']; } + const data = { issue: { label_ids: labelIds, }, }; + + // Post the remove data Vue.http.patch(this.updateUrl, data).catch(() => { Flash(__('Failed to remove issue from board, please try again.')); diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js index 0df1f7a6f82..fb40b9f5565 100644 --- a/app/assets/javascripts/boards/filtered_search_boards.js +++ b/app/assets/javascripts/boards/filtered_search_boards.js @@ -4,7 +4,10 @@ import FilteredSearchManager from '../filtered_search/filtered_search_manager'; export default class FilteredSearchBoards extends FilteredSearchManager { constructor(store, updateUrl = false, cantEdit = []) { - super('boards'); + super({ + page: 'boards', + stateFiltersSelector: '.issues-state-filters', + }); this.store = store; this.updateUrl = updateUrl; diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index 06a8abea940..efc0da2e7a2 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -2,15 +2,18 @@ import _ from 'underscore'; import Vue from 'vue'; -import Flash from '../flash'; -import { __ } from '../locale'; + +import Flash from '~/flash'; +import { __ } from '~/locale'; +import '~/vue_shared/models/label'; + import FilteredSearchBoards from './filtered_search_boards'; import eventHub from './eventhub'; -import sidebarEventHub from '../sidebar/event_hub'; +import sidebarEventHub from '~/sidebar/event_hub'; // eslint-disable-line import/first import './models/issue'; -import './models/label'; import './models/list'; import './models/milestone'; +import './models/project'; import './models/assignee'; import './stores/boards_store'; import './stores/modal_store'; @@ -22,7 +25,7 @@ import './components/board'; import './components/board_sidebar'; import './components/new_list_dropdown'; import './components/modal/index'; -import '../vue_shared/vue_resource_interceptor'; +import '~/vue_shared/vue_resource_interceptor'; // eslint-disable-line import/first export default () => { const $boardApp = document.getElementById('board-app'); @@ -87,7 +90,7 @@ export default () => { sidebarEventHub.$off('toggleSubscription', this.toggleSubscription); }, mounted () { - this.filterManager = new FilteredSearchBoards(Store.filter, true); + this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit); this.filterManager.setup(); Store.disabled = this.disabled; @@ -177,6 +180,7 @@ export default () => { return { modal: ModalStore.store, store: Store.state, + canAdminList: this.$options.el.hasAttribute('data-can-admin-list'), }; }, computed: { @@ -230,6 +234,7 @@ export default () => { :class="{ 'disabled': disabled }" :title="tooltipTitle" :aria-disabled="disabled" + v-if="canAdminList" @click="openModal"> Add issues </button> diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js index 38a0eb12f92..5e31c6314b2 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js +++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js @@ -1,6 +1,8 @@ /* eslint-disable no-unused-vars, no-mixed-operators, comma-dangle */ /* global DocumentTouch */ +import sortableConfig from '../../sortable/sortable_config'; + window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; @@ -18,19 +20,14 @@ gl.issueBoards.onEnd = () => { gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; gl.issueBoards.getBoardSortableDefaultOptions = (obj) => { - const defaultSortOptions = { - animation: 200, - forceFallback: true, - fallbackClass: 'is-dragging', - fallbackOnBody: true, - ghostClass: 'is-ghost', + const defaultSortOptions = Object.assign({}, sortableConfig, { filter: '.board-delete, .btn', delay: gl.issueBoards.touchEnabled ? 100 : 0, scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100, scrollSpeed: 20, onStart: gl.issueBoards.onStart, - onEnd: gl.issueBoards.onEnd - }; + onEnd: gl.issueBoards.onEnd, + }); Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; }); return defaultSortOptions; diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js index 81edd95bf2b..4c5079efc8b 100644 --- a/app/assets/javascripts/boards/models/issue.js +++ b/app/assets/javascripts/boards/models/issue.js @@ -4,6 +4,7 @@ /* global ListAssignee */ import Vue from 'vue'; +import IssueProject from './project'; class ListIssue { constructor (obj, defaultAvatar) { @@ -23,6 +24,12 @@ class ListIssue { this.isLoading = {}; this.sidebarInfoEndpoint = obj.issue_sidebar_endpoint; this.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint; + this.milestone_id = obj.milestone_id; + this.project_id = obj.project_id; + + if (obj.project) { + this.project = new IssueProject(obj.project); + } if (obj.milestone) { this.milestone = new ListMilestone(obj.milestone); @@ -105,8 +112,11 @@ class ListIssue { data.issue.label_ids = ['']; } - return Vue.http.patch(url, data); + const projectPath = this.project ? this.project.path : ''; + return Vue.http.patch(url.replace(':project_path', projectPath), data); } } window.ListIssue = ListIssue; + +export default ListIssue; diff --git a/app/assets/javascripts/boards/models/project.js b/app/assets/javascripts/boards/models/project.js new file mode 100644 index 00000000000..a3d5c7af7ac --- /dev/null +++ b/app/assets/javascripts/boards/models/project.js @@ -0,0 +1,6 @@ +export default class IssueProject { + constructor(obj) { + this.id = obj.id; + this.path = obj.path; + } +} diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index 798d7e0d147..348cdeec737 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -2,7 +2,7 @@ /* global List */ import _ from 'underscore'; import Cookies from 'js-cookie'; -import { getUrlParamsArray } from '../../lib/utils/common_utils'; +import { getUrlParamsArray } from '~/lib/utils/common_utils'; window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index b070a59cf15..01aec4f36af 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -37,10 +37,11 @@ export default class Clusters { clusterStatusReason, helpPath, ingressHelpPath, + ingressDnsHelpPath, } = document.querySelector('.js-edit-cluster-form').dataset; this.store = new ClustersStore(); - this.store.setHelpPaths(helpPath, ingressHelpPath); + this.store.setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath); this.store.setManagePrometheusPath(managePrometheusPath); this.store.updateStatus(clusterStatus); this.store.updateStatusReason(clusterStatusReason); @@ -98,6 +99,7 @@ export default class Clusters { helpPath: this.state.helpPath, ingressHelpPath: this.state.ingressHelpPath, managePrometheusPath: this.state.managePrometheusPath, + ingressDnsHelpPath: this.state.ingressDnsHelpPath, }, }); }, diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 50e35bbbba5..c2a35341eb2 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -36,10 +36,6 @@ type: String, required: false, }, - description: { - type: String, - required: true, - }, status: { type: String, required: false, @@ -148,7 +144,7 @@ class="table-section section-wrap" role="gridcell" > - <div v-html="description"></div> + <slot name="description"></slot> </div> <div class="table-section table-button-footer section-align-top" diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 978881a4831..f8dcdf3f60a 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -2,10 +2,16 @@ import _ from 'underscore'; import { s__, sprintf } from '../../locale'; import applicationRow from './application_row.vue'; + import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; + import { + APPLICATION_INSTALLED, + INGRESS, + } from '../constants'; export default { components: { applicationRow, + clipboardButton, }, props: { applications: { @@ -23,6 +29,11 @@ required: false, default: '', }, + ingressDnsHelpPath: { + type: String, + required: false, + default: '', + }, managePrometheusPath: { type: String, required: false, @@ -43,19 +54,16 @@ false, ); }, - helmTillerDescription() { - return _.escape(s__( - `ClusterIntegration|Helm streamlines installing and managing Kubernetes applications. - Tiller runs inside of your Kubernetes Cluster, and manages - releases of your charts.`, - )); + ingressId() { + return INGRESS; + }, + ingressInstalled() { + return this.applications.ingress.status === APPLICATION_INSTALLED; + }, + ingressExternalIp() { + return this.applications.ingress.externalIp; }, ingressDescription() { - const descriptionParagraph = _.escape(s__( - `ClusterIntegration|Ingress gives you a way to route requests to services based on the - request host or path, centralizing a number of services into a single entrypoint.`, - )); - const extraCostParagraph = sprintf( _.escape(s__( `ClusterIntegration|%{boldNotice} This will add some extra resources @@ -84,9 +92,6 @@ return ` <p> - ${descriptionParagraph} - </p> - <p> ${extraCostParagraph} </p> <p class="settings-message append-bottom-0"> @@ -94,12 +99,6 @@ </p> `; }, - gitlabRunnerDescription() { - return _.escape(s__( - `ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs - and send the results back to GitLab.`, - )); - }, prometheusDescription() { return sprintf( _.escape(s__( @@ -118,7 +117,10 @@ </script> <template> - <section class="settings no-animate expanded"> + <section + id="cluster-applications" + class="settings no-animate expanded" + > <div class="settings-header"> <h4> {{ s__('ClusterIntegration|Applications') }} @@ -136,33 +138,137 @@ id="helm" :title="applications.helm.title" title-link="https://docs.helm.sh/" - :description="helmTillerDescription" :status="applications.helm.status" :status-reason="applications.helm.statusReason" :request-status="applications.helm.requestStatus" :request-reason="applications.helm.requestReason" - /> + > + <div slot="description"> + {{ s__(`ClusterIntegration|Helm streamlines installing + and managing Kubernetes applications. + Tiller runs inside of your Kubernetes Cluster, + and manages releases of your charts.`) }} + </div> + </application-row> <application-row - id="ingress" + :id="ingressId" :title="applications.ingress.title" title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/" - :description="ingressDescription" :status="applications.ingress.status" :status-reason="applications.ingress.statusReason" :request-status="applications.ingress.requestStatus" :request-reason="applications.ingress.requestReason" - /> + > + <div slot="description"> + <p> + {{ s__(`ClusterIntegration|Ingress gives you a way to route + requests to services based on the request host or path, + centralizing a number of services into a single entrypoint.`) }} + </p> + + <template v-if="ingressInstalled"> + <div class="form-group"> + <label for="ingress-ip-address"> + {{ s__('ClusterIntegration|Ingress IP Address') }} + </label> + <div + v-if="ingressExternalIp" + class="input-group" + > + <input + type="text" + id="ingress-ip-address" + class="form-control js-ip-address" + :value="ingressExternalIp" + readonly + /> + <span class="input-group-btn"> + <clipboard-button + :text="ingressExternalIp" + :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')" + class="js-clipboard-btn" + /> + </span> + </div> + <input + v-else + type="text" + class="form-control js-ip-address" + readonly + value="?" + /> + </div> + + <p + v-if="!ingressExternalIp" + class="settings-message js-no-ip-message" + > + {{ s__(`ClusterIntegration|The IP address is in + the process of being assigned. Please check your Kubernetes + cluster or Quotas on GKE if it takes a long time.`) }} + + <a + :href="ingressHelpPath" + target="_blank" + rel="noopener noreferrer" + > + {{ __('More information') }} + </a> + </p> + + <p> + {{ s__(`ClusterIntegration|Point a wildcard DNS to this + generated IP address in order to access + your application after it has been deployed.`) }} + <a + :href="ingressDnsHelpPath" + target="_blank" + rel="noopener noreferrer" + > + {{ __('More information') }} + </a> + </p> + + </template> + <div + v-else + v-html="ingressDescription" + > + </div> + </div> + </application-row> <application-row id="prometheus" :title="applications.prometheus.title" title-link="https://prometheus.io/docs/introduction/overview/" :manage-link="managePrometheusPath" - :description="prometheusDescription" :status="applications.prometheus.status" :status-reason="applications.prometheus.statusReason" :request-status="applications.prometheus.requestStatus" :request-reason="applications.prometheus.requestReason" - /> + > + <div + slot="description" + v-html="prometheusDescription" + > + </div> + </application-row> + <application-row + id="runner" + :title="applications.runner.title" + title-link="https://docs.gitlab.com/runner/" + :status="applications.runner.status" + :status-reason="applications.runner.statusReason" + :request-status="applications.runner.requestStatus" + :request-reason="applications.runner.requestReason" + > + <div slot="description"> + {{ s__(`ClusterIntegration|GitLab Runner connects to this + project's repository and executes CI/CD jobs, + pushing results back and deploying, + applications to production.`) }} + </div> + </application-row> <!-- NOTE: Don't forget to update `clusters.scss` min-height for this block and uncomment `application_spec` tests diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js index 93223aefff8..b7179f52bb3 100644 --- a/app/assets/javascripts/clusters/constants.js +++ b/app/assets/javascripts/clusters/constants.js @@ -10,3 +10,4 @@ export const APPLICATION_ERROR = 'errored'; export const REQUEST_LOADING = 'request-loading'; export const REQUEST_SUCCESS = 'request-success'; export const REQUEST_FAILURE = 'request-failure'; +export const INGRESS = 'ingress'; diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index 904ee5fd475..348bbec3b25 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -1,4 +1,5 @@ import { s__ } from '../../locale'; +import { INGRESS } from '../constants'; export default class ClusterStore { constructor() { @@ -21,6 +22,7 @@ export default class ClusterStore { statusReason: null, requestStatus: null, requestReason: null, + externalIp: null, }, runner: { title: s__('ClusterIntegration|GitLab Runner'), @@ -40,9 +42,10 @@ export default class ClusterStore { }; } - setHelpPaths(helpPath, ingressHelpPath) { + setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath) { this.state.helpPath = helpPath; this.state.ingressHelpPath = ingressHelpPath; + this.state.ingressDnsHelpPath = ingressDnsHelpPath; } setManagePrometheusPath(managePrometheusPath) { @@ -64,6 +67,7 @@ export default class ClusterStore { updateStateFromServer(serverState = {}) { this.state.status = serverState.status; this.state.statusReason = serverState.status_reason; + serverState.applications.forEach((serverAppEntry) => { const { name: appId, @@ -76,6 +80,10 @@ export default class ClusterStore { status, statusReason, }; + + if (appId === INGRESS) { + this.state.applications.ingress.externalIp = serverAppEntry.external_ip; + } }); } } diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js index 1f9153d95bd..3d89bf1316e 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js @@ -15,7 +15,7 @@ const CommitPipelinesTable = Vue.extend(commitPipelinesTable); window.gl = window.gl || {}; window.gl.CommitPipelinesTable = CommitPipelinesTable; -document.addEventListener('DOMContentLoaded', () => { +export default () => { const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view'); if (pipelineTableViewEl) { @@ -43,4 +43,4 @@ document.addEventListener('DOMContentLoaded', () => { pipelineTableViewEl.appendChild(table.$el); } } -}); +}; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index ce19069f103..466a5b5d635 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -20,10 +20,6 @@ type: String, required: true, }, - emptyStateSvgPath: { - type: String, - required: true, - }, errorStateSvgPath: { type: String, required: true, @@ -45,23 +41,14 @@ }, computed: { - /** - * Empty state is only rendered if after the first request we receive no pipelines. - * - * @return {Boolean} - */ - shouldRenderEmptyState() { - return !this.state.pipelines.length && - !this.isLoading && - this.hasMadeRequest && - !this.hasError; - }, - shouldRenderTable() { return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError; }, + shouldRenderErrorState() { + return this.hasError && !this.isLoading; + }, }, created() { this.service = new PipelinesService(this.endpoint); @@ -92,25 +79,22 @@ <div class="content-list pipelines"> <loading-icon - label="Loading pipelines" + :label="s__('Pipelines|Loading Pipelines')" size="3" v-if="isLoading" + class="prepend-top-20" /> - <empty-state - v-if="shouldRenderEmptyState" - :help-page-path="helpPagePath" - :empty-state-svg-path="emptyStateSvgPath" - /> - - <error-state - v-if="shouldRenderErrorState" - :error-state-svg-path="errorStateSvgPath" + <svg-blank-state + v-else-if="shouldRenderErrorState" + :svg-path="errorStateSvgPath" + :message="s__(`Pipelines|There was an error fetching the pipelines. + Try again in a few moments or contact your support team.`)" /> <div class="table-holder" - v-if="shouldRenderTable" + v-else-if="shouldRenderTable" > <pipelines-table-component :pipelines="state.pipelines" diff --git a/app/assets/javascripts/commons/vue.js b/app/assets/javascripts/commons/vue.js index 8b62d78c043..798623b94fb 100644 --- a/app/assets/javascripts/commons/vue.js +++ b/app/assets/javascripts/commons/vue.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import '../vue_shared/vue_resource_interceptor'; if (process.env.NODE_ENV !== 'production') { Vue.config.productionTip = false; diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index 034f2923b3b..46d89c825f9 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -14,10 +14,10 @@ import CycleAnalyticsStore from './cycle_analytics_store'; Vue.use(Translate); -$(() => { +export default () => { const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed'; - gl.cycleAnalyticsApp = new Vue({ + new Vue({ // eslint-disable-line no-new el: '#cycle-analytics', name: 'CycleAnalytics', components: { @@ -132,4 +132,4 @@ $(() => { }, }, }); -}); +}; diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js index e77910a83d4..fadc34959e1 100644 --- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js +++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js @@ -197,7 +197,7 @@ const JumpToDiscussion = Vue.extend({ } $.scrollTo($target, { - offset: 0 + offset: -150 }); } }, diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js index 20ddcbfb8bd..cc9192deae3 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_btn.js +++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js @@ -87,6 +87,7 @@ const ResolveBtn = Vue.extend({ CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by); this.discussion.updateHeadline(data); gl.mrWidget.checkStatus(); + document.dispatchEvent(new CustomEvent('refreshVueNotes')); this.updateTooltip(); }) diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js index 679057e787c..5f49609fe88 100644 --- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js +++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js @@ -14,6 +14,7 @@ import './components/resolve_count'; import './components/resolve_discussion_btn'; import './components/diff_note_avatars'; import './components/new_issue_for_discussion'; +import { hasVueMRDiscussionsCookie } from '../lib/utils/common_utils'; export default () => { const projectPathHolder = document.querySelector('.merge-request') || document.querySelector('.commit-box'); @@ -67,12 +68,14 @@ export default () => { gl.diffNotesCompileComponents(); - new Vue({ - el: '#resolve-count-app', - components: { - 'resolve-count': ResolveCount - }, - }); + if (!hasVueMRDiscussionsCookie()) { + new Vue({ + el: '#resolve-count-app', + components: { + 'resolve-count': ResolveCount + }, + }); + } $(window).trigger('resize.nav'); }; diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js index 96fe23640af..d16f9297de1 100644 --- a/app/assets/javascripts/diff_notes/services/resolve.js +++ b/app/assets/javascripts/diff_notes/services/resolve.js @@ -8,8 +8,8 @@ window.gl = window.gl || {}; class ResolveServiceClass { constructor(root) { - this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`); - this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`); + this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve?html=true`); + this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve?html=true`); } resolve(noteId) { @@ -45,6 +45,7 @@ class ResolveServiceClass { if (gl.mrWidget) gl.mrWidget.checkStatus(); discussion.updateHeadline(data); + document.dispatchEvent(new CustomEvent('refreshVueNotes')); }) .catch(() => new Flash('An error occurred when trying to resolve a discussion. Please try again.')); } diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index acf0effa00d..1ccf96a75dc 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -6,177 +6,80 @@ import GlFieldErrors from './gl_field_errors'; import Shortcuts from './shortcuts'; import SearchAutocomplete from './search_autocomplete'; -var Dispatcher; - -(function() { - Dispatcher = (function() { - function Dispatcher() { - this.initSearch(); - this.initFieldErrors(); - this.initPageScripts(); - } - - Dispatcher.prototype.initPageScripts = function() { - var path, shortcut_handler; - const page = $('body').attr('data-page'); - if (!page) { - return false; - } - - const fail = () => Flash('Error loading dynamic module'); - const callDefault = m => m.default(); - - path = page.split(':'); - shortcut_handler = null; - - $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => { - const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); - const enableGFM = convertPermissionToBoolean(el.dataset.supportsAutocomplete); - gfm.setup($(el), { - emojis: true, - members: enableGFM, - issues: enableGFM, - milestones: enableGFM, - mergeRequests: enableGFM, - labels: enableGFM, - }); - }); - - const shortcutHandlerPages = [ - 'projects:activity', - 'projects:artifacts:browse', - 'projects:artifacts:file', - 'projects:blame:show', - 'projects:blob:show', - 'projects:commit:show', - 'projects:commits:show', - 'projects:find_file:show', - 'projects:issues:edit', - 'projects:issues:index', - 'projects:issues:new', - 'projects:issues:show', - 'projects:merge_requests:creations:diffs', - 'projects:merge_requests:creations:new', - 'projects:merge_requests:edit', - 'projects:merge_requests:index', - 'projects:merge_requests:show', - 'projects:network:show', - 'projects:show', - 'projects:tree:show', - 'groups:show', - ]; +function initSearch() { + // Only when search form is present + if ($('.search').length) { + return new SearchAutocomplete(); + } +} - if (shortcutHandlerPages.indexOf(page) !== -1) { - shortcut_handler = true; - } +function initFieldErrors() { + $('.gl-show-field-errors').each((i, form) => { + new GlFieldErrors(form); + }); +} - switch (path[0]) { - case 'admin': - switch (path[1]) { - case 'broadcast_messages': - import('./pages/admin/broadcast_messages') - .then(callDefault) - .catch(fail); - break; - case 'cohorts': - import('./pages/admin/cohorts') - .then(callDefault) - .catch(fail); - break; - case 'groups': - switch (path[2]) { - case 'show': - import('./pages/admin/groups/show') - .then(callDefault) - .catch(fail); - break; - } - break; - case 'projects': - import('./pages/admin/projects') - .then(callDefault) - .catch(fail); - break; - case 'labels': - switch (path[2]) { - case 'new': - import('./pages/admin/labels/new') - .then(callDefault) - .catch(fail); - break; - case 'edit': - import('./pages/admin/labels/edit') - .then(callDefault) - .catch(fail); - break; - } - case 'abuse_reports': - import('./pages/admin/abuse_reports') - .then(callDefault) - .catch(fail); - break; - } - break; - case 'profiles': - import('./pages/profiles/index') - .then(callDefault) - .catch(fail); - break; - case 'projects': - import('./pages/projects') - .then(callDefault) - .catch(fail); - shortcut_handler = true; - switch (path[1]) { - case 'compare': - import('./pages/projects/compare') - .then(callDefault) - .catch(fail); - break; - case 'create': - case 'new': - import('./pages/projects/new') - .then(callDefault) - .catch(fail); - break; - case 'wikis': - import('./pages/projects/wikis') - .then(callDefault) - .catch(fail); - shortcut_handler = true; - break; - } - break; - } - // If we haven't installed a custom shortcut handler, install the default one - if (!shortcut_handler) { - new Shortcuts(); - } +function initPageShortcuts(page) { + const pagesWithCustomShortcuts = [ + 'projects:activity', + 'projects:artifacts:browse', + 'projects:artifacts:file', + 'projects:blame:show', + 'projects:blob:show', + 'projects:commit:show', + 'projects:commits:show', + 'projects:find_file:show', + 'projects:issues:edit', + 'projects:issues:index', + 'projects:issues:new', + 'projects:issues:show', + 'projects:merge_requests:creations:diffs', + 'projects:merge_requests:creations:new', + 'projects:merge_requests:edit', + 'projects:merge_requests:index', + 'projects:merge_requests:show', + 'projects:network:show', + 'projects:show', + 'projects:tree:show', + 'groups:show', + ]; - if (document.querySelector('#peek')) { - import('./performance_bar') - .then(m => new m.default({ container: '#peek' })) // eslint-disable-line new-cap - .catch(fail); - } - }; + if (pagesWithCustomShortcuts.indexOf(page) === -1) { + new Shortcuts(); + } +} - Dispatcher.prototype.initSearch = function() { - // Only when search form is present - if ($('.search').length) { - return new SearchAutocomplete(); - } - }; +function initGFMInput() { + $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => { + const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); + const enableGFM = convertPermissionToBoolean(el.dataset.supportsAutocomplete); + gfm.setup($(el), { + emojis: true, + members: enableGFM, + issues: enableGFM, + milestones: enableGFM, + mergeRequests: enableGFM, + labels: enableGFM, + }); + }); +} - Dispatcher.prototype.initFieldErrors = function() { - $('.gl-show-field-errors').each((i, form) => { - new GlFieldErrors(form); - }); - }; +function initPerformanceBar() { + if (document.querySelector('#peek')) { + import('./performance_bar') + .then(m => new m.default({ container: '#peek' })) // eslint-disable-line new-cap + .catch(() => Flash('Error loading performance bar module')); + } +} - return Dispatcher; - })(); -})(); +export default () => { + initSearch(); + initFieldErrors(); -export default function initDispatcher() { - return new Dispatcher(); -} + const page = $('body').attr('data-page'); + if (page) { + initPageShortcuts(page); + initGFMInput(); + initPerformanceBar(); + } +}; diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index b4eca47957e..22863e926d4 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -2,8 +2,8 @@ /** * Render environments table. */ +import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import environmentItem from './environment_item.vue'; -import loadingIcon from '../../vue_shared/components/loading_icon.vue'; export default { components: { diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js index 5d2d14c7682..de0fbdb2e91 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js @@ -5,7 +5,7 @@ import Translate from '../../vue_shared/translate'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => new Vue({ +export default () => new Vue({ el: '#environments-folder-list-view', components: { environmentsFolderApp, @@ -32,4 +32,4 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ }, }); }, -})); +}); diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/index.js index 2e0a4001b7c..afc4aba6554 100644 --- a/app/assets/javascripts/environments/environments_bundle.js +++ b/app/assets/javascripts/environments/index.js @@ -5,7 +5,7 @@ import Translate from '../vue_shared/translate'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => new Vue({ +export default () => new Vue({ el: '#environments-list-view', components: { environmentsComponent, @@ -36,4 +36,4 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ }, }); }, -})); +}); diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js deleted file mode 100644 index 293154917fa..00000000000 --- a/app/assets/javascripts/filtered_search/filtered_search_bundle.js +++ /dev/null @@ -1,10 +0,0 @@ -import './dropdown_emoji'; -import './dropdown_hint'; -import './dropdown_non_user'; -import './dropdown_user'; -import './dropdown_utils'; -import './filtered_search_dropdown_manager'; -import './filtered_search_dropdown'; -import './filtered_search_manager'; -import './filtered_search_tokenizer'; -import './filtered_search_visual_tokens'; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js index c64553a1b92..e6390f0855b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js @@ -10,13 +10,24 @@ import DropdownUser from './dropdown_user'; import FilteredSearchVisualTokens from './filtered_search_visual_tokens'; export default class FilteredSearchDropdownManager { - constructor(baseEndpoint = '', tokenizer, page, isGroup, filteredSearchTokenKeys) { + constructor({ + baseEndpoint = '', + tokenizer, + page, + isGroup, + isGroupAncestor, + isGroupDecendent, + filteredSearchTokenKeys, + }) { this.container = FilteredSearchContainer.container; this.baseEndpoint = baseEndpoint.replace(/\/$/, ''); this.tokenizer = tokenizer; this.filteredSearchTokenKeys = filteredSearchTokenKeys || FilteredSearchTokenKeys; this.filteredSearchInput = this.container.querySelector('.filtered-search'); this.page = page; + this.groupsOnly = isGroup; + this.groupAncestor = isGroupAncestor; + this.isGroupDecendent = isGroupDecendent; this.setupMapping(); @@ -59,7 +70,7 @@ export default class FilteredSearchDropdownManager { reference: null, gl: DropdownNonUser, extraArguments: { - endpoint: `${this.baseEndpoint}/milestones.json`, + endpoint: this.getMilestoneEndpoint(), symbol: '%', }, element: this.container.querySelector('#js-dropdown-milestone'), @@ -68,7 +79,7 @@ export default class FilteredSearchDropdownManager { reference: null, gl: DropdownNonUser, extraArguments: { - endpoint: `${this.baseEndpoint}/labels.json`, + endpoint: this.getLabelsEndpoint(), symbol: '~', preprocessing: DropdownUtils.duplicateLabelPreprocessing, }, @@ -90,6 +101,18 @@ export default class FilteredSearchDropdownManager { this.mapping = allowedMappings; } + getMilestoneEndpoint() { + const endpoint = `${this.baseEndpoint}/milestones.json`; + + return endpoint; + } + + getLabelsEndpoint() { + const endpoint = `${this.baseEndpoint}/labels.json`; + + return endpoint; + } + static addWordToInput(tokenName, tokenValue = '', clicked = false) { const input = FilteredSearchContainer.container.querySelector('.filtered-search'); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index e294b629bd0..71b7e80335b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -20,10 +20,15 @@ import DropdownUtils from './dropdown_utils'; export default class FilteredSearchManager { constructor({ page, + isGroup = false, + isGroupAncestor = false, + isGroupDecendent = false, filteredSearchTokenKeys = FilteredSearchTokenKeys, stateFiltersSelector = '.issues-state-filters', }) { - this.isGroup = false; + this.isGroup = isGroup; + this.isGroupAncestor = isGroupAncestor; + this.isGroupDecendent = isGroupDecendent; this.states = ['opened', 'closed', 'merged', 'all']; this.page = page; @@ -75,13 +80,14 @@ export default class FilteredSearchManager { if (this.filteredSearchInput) { this.tokenizer = FilteredSearchTokenizer; - this.dropdownManager = new FilteredSearchDropdownManager( - this.filteredSearchInput.getAttribute('data-base-endpoint') || '', - this.tokenizer, - this.page, - this.isGroup, - this.filteredSearchTokenKeys, - ); + this.dropdownManager = new FilteredSearchDropdownManager({ + baseEndpoint: this.filteredSearchInput.getAttribute('data-base-endpoint') || '', + tokenizer: this.tokenizer, + page: this.page, + isGroup: this.isGroup, + isGroupAncestor: this.isGroupAncestor, + filteredSearchTokenKeys: this.filteredSearchTokenKeys, + }); this.recentSearchesRoot = new RecentSearchesRoot( this.recentSearchesStore, diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js index a19bb882410..600024c21c3 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js +++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js @@ -1,5 +1,6 @@ import _ from 'underscore'; -import AjaxCache from '../lib/utils/ajax_cache'; +import AjaxCache from '~/lib/utils/ajax_cache'; +import { objectToQueryString } from '~/lib/utils/common_utils'; import Flash from '../flash'; import FilteredSearchContainer from './container'; import UsersCache from '../lib/utils/users_cache'; @@ -16,6 +17,21 @@ export default class FilteredSearchVisualTokens { }; } + /** + * Returns a computed API endpoint + * and query string composed of values from endpointQueryParams + * @param {String} endpoint + * @param {String} endpointQueryParams + */ + static getEndpointWithQueryParams(endpoint, endpointQueryParams) { + if (!endpointQueryParams) { + return endpoint; + } + + const queryString = objectToQueryString(JSON.parse(endpointQueryParams)); + return `${endpoint}?${queryString}`; + } + static unselectTokens() { const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected'); [].forEach.call(otherTokens, t => t.classList.remove('selected')); @@ -86,7 +102,10 @@ export default class FilteredSearchVisualTokens { static updateLabelTokenColor(tokenValueContainer, tokenValue) { const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search'); const baseEndpoint = filteredSearchInput.dataset.baseEndpoint; - const labelsEndpoint = `${baseEndpoint}/labels.json`; + const labelsEndpoint = FilteredSearchVisualTokens.getEndpointWithQueryParams( + `${baseEndpoint}/labels.json`, + filteredSearchInput.dataset.endpointQueryParams, + ); return AjaxCache.retrieve(labelsEndpoint) .then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint)) diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index b8f0566f48c..0578f43d5af 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -152,14 +152,14 @@ export default { showLeaveGroupModal(group, parentGroup) { this.targetGroup = group; this.targetParentGroup = parentGroup; - this.updateModal = true; + this.showModal = true; this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`); }, hideLeaveGroupModal() { - this.updateModal = false; + this.showModal = false; }, leaveGroup() { - this.updateModal = false; + this.showModal = false; this.targetGroup.isBeingRemoved = true; this.service.leaveGroup(this.targetGroup.leavePath) .then(res => res.json()) @@ -208,9 +208,9 @@ export default { :page-info="pageInfo" /> <modal - v-show="showModal" - :primary-button-label="__('Leave')" + v-if="showModal" kind="warning" + :primary-button-label="__('Leave')" :title="__('Are you sure?')" :text="groupLeaveConfirmationMessage" @cancel="hideLeaveGroupModal" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue deleted file mode 100644 index a8459b011df..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import icon from '../../../vue_shared/components/icon.vue'; - import listItem from './list_item.vue'; - import listCollapsed from './list_collapsed.vue'; - - export default { - components: { - icon, - listItem, - listCollapsed, - }, - props: { - title: { - type: String, - required: true, - }, - fileList: { - type: Array, - required: true, - }, - }, - computed: { - ...mapState([ - 'currentProjectId', - 'currentBranchId', - 'rightPanelCollapsed', - ]), - }, - methods: { - toggleCollapsed() { - this.$emit('toggleCollapsed'); - }, - }, - }; -</script> - -<template> - <div class="multi-file-commit-list"> - <list-collapsed - v-if="rightPanelCollapsed" - /> - <template v-else> - <ul - v-if="fileList.length" - class="list-unstyled append-bottom-0" - > - <li - v-for="file in fileList" - :key="file.key" - > - <list-item - :file="file" - /> - </li> - </ul> - <div - v-else - class="help-block prepend-top-0" - > - No changes - </div> - </template> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue deleted file mode 100644 index 6a0262f271b..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ /dev/null @@ -1,35 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - }, - computed: { - ...mapGetters([ - 'addedFiles', - 'modifiedFiles', - ]), - }, - }; -</script> - -<template> - <div - class="multi-file-commit-list-collapsed text-center" - > - <icon - name="file-addition" - :size="18" - css-classes="multi-file-addition append-bottom-10" - /> - {{ addedFiles.length }} - <icon - name="file-modified" - :size="18" - css-classes="multi-file-modified prepend-top-10 append-bottom-10" - /> - {{ modifiedFiles.length }} - </div> -</template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue deleted file mode 100644 index 742f746e02f..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ /dev/null @@ -1,36 +0,0 @@ -<script> - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - }, - props: { - file: { - type: Object, - required: true, - }, - }, - computed: { - iconName() { - return this.file.tempFile ? 'file-addition' : 'file-modified'; - }, - iconClass() { - return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`; - }, - }, - }; -</script> - -<template> - <div class="multi-file-commit-list-item"> - <icon - :name="iconName" - :size="16" - :css-classes="iconClass" - /> - <span class="multi-file-commit-list-path"> - {{ file.path }} - </span> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue deleted file mode 100644 index 89981ab2c65..00000000000 --- a/app/assets/javascripts/ide/components/ide.vue +++ /dev/null @@ -1,99 +0,0 @@ -<script> - import { mapState, mapGetters } from 'vuex'; - import ideSidebar from './ide_side_bar.vue'; - import ideContextbar from './ide_context_bar.vue'; - import repoTabs from './repo_tabs.vue'; - import repoFileButtons from './repo_file_buttons.vue'; - import ideStatusBar from './ide_status_bar.vue'; - import repoPreview from './repo_preview.vue'; - import repoEditor from './repo_editor.vue'; - - export default { - components: { - ideSidebar, - ideContextbar, - repoTabs, - repoFileButtons, - ideStatusBar, - repoEditor, - repoPreview, - }, - props: { - emptyStateSvgPath: { - type: String, - required: true, - }, - }, - computed: { - ...mapState([ - 'currentBlobView', - 'selectedFile', - ]), - ...mapGetters([ - 'changedFiles', - 'activeFile', - ]), - }, - mounted() { - const returnValue = 'Are you sure you want to lose unsaved changes?'; - window.onbeforeunload = (e) => { - if (!this.changedFiles.length) return undefined; - - Object.assign(e, { - returnValue, - }); - return returnValue; - }; - }, - }; -</script> - -<template> - <div - class="ide-view" - > - <ide-sidebar /> - <div - class="multi-file-edit-pane" - > - <template - v-if="activeFile" - > - <repo-tabs/> - <component - class="multi-file-edit-pane-content" - :is="currentBlobView" - /> - <repo-file-buttons /> - <ide-status-bar - :file="selectedFile" - /> - </template> - <template - v-else - > - <div class="ide-empty-state"> - <div class="row js-empty-state"> - <div class="col-xs-12"> - <div class="svg-content svg-250"> - <img :src="emptyStateSvgPath" /> - </div> - </div> - <div class="col-xs-12"> - <div class="text-content text-center"> - <h4> - Welcome to the GitLab IDE - </h4> - <p> - You can select a file in the left sidebar to begin - editing and use the right sidebar to commit your changes. - </p> - </div> - </div> - </div> - </div> - </template> - </div> - <ide-contextbar/> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue deleted file mode 100644 index dd947f66969..00000000000 --- a/app/assets/javascripts/ide/components/ide_context_bar.vue +++ /dev/null @@ -1,108 +0,0 @@ -<script> - import { mapGetters, mapState, mapActions } from 'vuex'; - import repoCommitSection from './repo_commit_section.vue'; - import icon from '../../vue_shared/components/icon.vue'; - import panelResizer from '../../vue_shared/components/panel_resizer.vue'; - - export default { - components: { - repoCommitSection, - icon, - panelResizer, - }, - data() { - return { - width: 290, - }; - }, - computed: { - ...mapState([ - 'rightPanelCollapsed', - ]), - ...mapGetters([ - 'changedFiles', - ]), - currentIcon() { - return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right'; - }, - maxSize() { - return window.innerWidth / 2; - }, - panelStyle() { - if (!this.rightPanelCollapsed) { - return { width: `${this.width}px` }; - } - return {}; - }, - }, - methods: { - ...mapActions([ - 'setPanelCollapsedStatus', - 'setResizingStatus', - ]), - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'right', - collapsed: !this.rightPanelCollapsed, - }); - }, - resizingStarted() { - this.setResizingStatus(true); - }, - resizingEnded() { - this.setResizingStatus(false); - }, - }, - }; -</script> - -<template> - <div - class="multi-file-commit-panel" - :class="{ - 'is-collapsed': rightPanelCollapsed, - }" - :style="panelStyle" - > - <div class="multi-file-commit-panel-section"> - <header - class="multi-file-commit-panel-header" - :class="{ - 'is-collapsed': rightPanelCollapsed, - }" - > - <div - class="multi-file-commit-panel-header-title" - v-if="!rightPanelCollapsed" - > - <icon - name="list-bulleted" - :size="18" - /> - Staged - </div> - <button - type="button" - class="btn btn-transparent multi-file-commit-panel-collapse-btn" - @click="toggleCollapsed" - > - <icon - :name="currentIcon" - :size="18" - /> - </button> - </header> - <repo-commit-section /> - </div> - <panel-resizer - :size.sync="width" - :enabled="!rightPanelCollapsed" - :start-size="290" - :min-size="200" - :max-size="maxSize" - @resize-start="resizingStarted" - @resize-end="resizingEnded" - side="left" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue deleted file mode 100644 index af2f7341a91..00000000000 --- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue +++ /dev/null @@ -1,47 +0,0 @@ -<script> -import repoTree from './ide_repo_tree.vue'; -import icon from '../../vue_shared/components/icon.vue'; -import newDropdown from './new_dropdown/index.vue'; - -export default { - components: { - repoTree, - icon, - newDropdown, - }, - props: { - projectId: { - type: String, - required: true, - }, - branch: { - type: Object, - required: true, - }, - }, -}; -</script> - -<template> - <div class="branch-container"> - <div class="branch-header"> - <div class="branch-header-title"> - <icon - name="branch" - :size="12" - /> - {{ branch.name }} - </div> - <div class="branch-header-btns"> - <new-dropdown - :project-id="projectId" - :branch="branch.name" - path="" - /> - </div> - </div> - <div> - <repo-tree :tree-id="branch.treeId" /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue deleted file mode 100644 index ed49a0e72a2..00000000000 --- a/app/assets/javascripts/ide/components/ide_project_tree.vue +++ /dev/null @@ -1,49 +0,0 @@ -<script> -import branchesTree from './ide_project_branches_tree.vue'; -import projectAvatarImage from '../../vue_shared/components/project_avatar/image.vue'; - -export default { - components: { - branchesTree, - projectAvatarImage, - }, - props: { - project: { - type: Object, - required: true, - }, - }, -}; -</script> - -<template> - <div class="projects-sidebar"> - <div class="context-header"> - <a - :title="project.name" - :href="project.web_url" - > - <div class="avatar-container s40 project-avatar"> - <project-avatar-image - class="avatar-container project-avatar" - :link-href="project.path" - :img-src="project.avatar_url" - :img-alt="project.name" - :img-size="40" - /> - </div> - <div class="sidebar-context-title"> - {{ project.name }} - </div> - </a> - </div> - <div class="multi-file-commit-panel-inner-scroll"> - <branches-tree - v-for="branch in project.branches" - :key="branch.name" - :project-id="project.path_with_namespace" - :branch="branch" - /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue deleted file mode 100644 index 4651e345d75..00000000000 --- a/app/assets/javascripts/ide/components/ide_repo_tree.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> -import { mapState } from 'vuex'; -import repoPreviousDirectory from './repo_prev_directory.vue'; -import repoFile from './repo_file.vue'; -import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; -import { treeList } from '../stores/utils'; - -export default { - components: { - repoPreviousDirectory, - repoFile, - skeletonLoadingContainer, - }, - props: { - treeId: { - type: String, - required: true, - }, - }, - computed: { - ...mapState([ - 'trees', - 'isRoot', - ]), - ...mapState({ - projectName(state) { - return state.project.name; - }, - }), - fetchedList() { - return treeList(this.$store.state, this.treeId); - }, - hasPreviousDirectory() { - return !this.isRoot && this.fetchedList.length; - }, - showLoading() { - if (this.trees[this.treeId]) { - return this.trees[this.treeId].loading; - } - return true; - }, - }, -}; -</script> - -<template> - <div> - <div class="ide-file-list"> - <table class="table"> - <tbody - v-if="treeId" - > - <repo-previous-directory - v-if="hasPreviousDirectory" - /> - <template v-if="showLoading"> - <div - class="multi-file-loading-container" - v-for="n in 3" - :key="n" - > - <skeleton-loading-container /> - </div> - </template> - <repo-file - v-for="file in fetchedList" - :key="file.key" - :file="file" - /> - </tbody> - </table> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue deleted file mode 100644 index a68f8ce0169..00000000000 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ /dev/null @@ -1,114 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - import projectTree from './ide_project_tree.vue'; - import icon from '../../vue_shared/components/icon.vue'; - import panelResizer from '../../vue_shared/components/panel_resizer.vue'; - import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; - - export default { - components: { - projectTree, - icon, - panelResizer, - skeletonLoadingContainer, - }, - data() { - return { - width: 290, - }; - }, - computed: { - ...mapState([ - 'loading', - 'projects', - 'leftPanelCollapsed', - ]), - currentIcon() { - return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left'; - }, - maxSize() { - return window.innerWidth / 2; - }, - panelStyle() { - if (!this.leftPanelCollapsed) { - return { width: `${this.width}px` }; - } - return {}; - }, - showLoading() { - return this.loading; - }, - }, - methods: { - ...mapActions([ - 'setPanelCollapsedStatus', - 'setResizingStatus', - ]), - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'left', - collapsed: !this.leftPanelCollapsed, - }); - }, - resizingStarted() { - this.setResizingStatus(true); - }, - resizingEnded() { - this.setResizingStatus(false); - }, - }, - }; -</script> - -<template> - <div - class="multi-file-commit-panel" - :class="{ - 'is-collapsed': leftPanelCollapsed, - }" - :style="panelStyle" - > - <div class="multi-file-commit-panel-inner"> - <template v-if="showLoading"> - <div - class="multi-file-loading-container" - v-for="n in 3" - :key="n" - > - <skeleton-loading-container /> - </div> - </template> - <project-tree - v-for="project in projects" - :key="project.id" - :project="project" - /> - </div> - <button - type="button" - class="btn btn-transparent left-collapse-btn" - @click="toggleCollapsed" - > - <icon - :name="currentIcon" - :size="18" - /> - <span - v-if="!leftPanelCollapsed" - class="collapse-text" - > - Collapse sidebar - </span> - </button> - <panel-resizer - :size.sync="width" - :enabled="!leftPanelCollapsed" - :start-size="290" - :min-size="200" - :max-size="maxSize" - @resize-start="resizingStarted" - @resize-end="resizingEnded" - side="right" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue deleted file mode 100644 index e48c446c4a4..00000000000 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ /dev/null @@ -1,66 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import icon from '../../vue_shared/components/icon.vue'; - import tooltip from '../../vue_shared/directives/tooltip'; - import timeAgoMixin from '../../vue_shared/mixins/timeago'; - - export default { - components: { - icon, - }, - directives: { - tooltip, - }, - mixins: [ - timeAgoMixin, - ], - props: { - file: { - type: Object, - required: true, - }, - }, - computed: { - ...mapState([ - 'selectedFile', - ]), - }, - }; -</script> - -<template> - <div class="ide-status-bar"> - <div> - <icon - name="branch" - :size="12" - /> - {{ selectedFile.branchId }} - </div> - <div> - <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id"> - Last commit: - <a - v-tooltip - :title="selectedFile.lastCommit.message" - :href="selectedFile.lastCommit.url" - > - {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by - {{ selectedFile.lastCommit.author }} - </a> - </div> - </div> - <div class="text-right"> - {{ selectedFile.name }} - </div> - <div class="text-right"> - {{ selectedFile.eol }} - </div> - <div class="text-right"> - {{ file.editorRow }}:{{ file.editorColumn }} - </div> - <div class="text-right"> - {{ selectedFile.fileLanguage }} - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_branch_form.vue b/app/assets/javascripts/ide/components/new_branch_form.vue deleted file mode 100644 index 56e31256132..00000000000 --- a/app/assets/javascripts/ide/components/new_branch_form.vue +++ /dev/null @@ -1,108 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - import flash, { hideFlash } from '../../flash'; - import loadingIcon from '../../vue_shared/components/loading_icon.vue'; - - export default { - components: { - loadingIcon, - }, - data() { - return { - branchName: '', - loading: false, - }; - }, - computed: { - ...mapState([ - 'currentBranch', - ]), - btnDisabled() { - return this.loading || this.branchName === ''; - }, - }, - created() { - // Dropdown is outside of Vue instance & is controlled by Bootstrap - this.$dropdown = $('.git-revision-dropdown'); - - // text element is outside Vue app - this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text'); - }, - methods: { - ...mapActions([ - 'createNewBranch', - ]), - toggleDropdown() { - this.$dropdown.dropdown('toggle'); - }, - submitNewBranch() { - // need to query as the element is appended outside of Vue - const flashEl = this.$refs.flashContainer.querySelector('.flash-alert'); - - this.loading = true; - - if (flashEl) { - hideFlash(flashEl, false); - } - - this.createNewBranch(this.branchName) - .then(() => { - this.loading = false; - this.branchName = ''; - - if (this.dropdownText) { - this.dropdownText.textContent = this.currentBranchId; - } - - this.toggleDropdown(); - }) - .catch(res => res.json().then((data) => { - this.loading = false; - flash(data.message, 'alert', this.$el); - })); - }, - }, - }; -</script> - -<template> - <div> - <div - class="flash-container" - ref="flashContainer" - > - </div> - <p> - Create from: - <code>{{ currentBranch }}</code> - </p> - <input - class="form-control js-new-branch-name" - type="text" - placeholder="Name new branch" - v-model="branchName" - @keyup.enter.stop.prevent="submitNewBranch" - /> - <div class="prepend-top-default clearfix"> - <button - type="button" - class="btn btn-primary pull-left" - :disabled="btnDisabled" - @click.stop.prevent="submitNewBranch" - > - <loading-icon - v-if="loading" - :inline="true" - /> - <span>Create</span> - </button> - <button - type="button" - class="btn btn-default pull-right" - @click.stop.prevent="toggleDropdown" - > - Cancel - </button> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue deleted file mode 100644 index ef653357f5f..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ /dev/null @@ -1,101 +0,0 @@ -<script> - import newModal from './modal.vue'; - import upload from './upload.vue'; - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - newModal, - upload, - }, - props: { - branch: { - type: String, - required: true, - }, - path: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - }, - data() { - return { - openModal: false, - modalType: '', - }; - }, - methods: { - createNewItem(type) { - this.modalType = type; - this.openModal = true; - }, - hideModal() { - this.openModal = false; - }, - }, - }; -</script> - -<template> - <div class="repo-new-btn pull-right"> - <div class="dropdown"> - <button - type="button" - class="btn btn-sm btn-default dropdown-toggle add-to-tree" - data-toggle="dropdown" - aria-label="Create new file or directory" - > - <icon - name="plus" - :size="12" - css-classes="pull-left" - /> - <icon - name="arrow-down" - :size="12" - css-classes="pull-left" - /> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li> - <a - href="#" - role="button" - @click.prevent="createNewItem('blob')" - > - {{ __('New file') }} - </a> - </li> - <li> - <upload - :branch-id="branch" - :path="path" - :parent="parent" - /> - </li> - <li> - <a - href="#" - role="button" - @click.prevent="createNewItem('tree')" - > - {{ __('New directory') }} - </a> - </li> - </ul> - </div> - <new-modal - v-if="openModal" - :type="modalType" - :branch-id="branch" - :path="path" - :parent="parent" - @hide="hideModal" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue deleted file mode 100644 index 36cd825c6dd..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ /dev/null @@ -1,112 +0,0 @@ -<script> - import { mapActions, mapState } from 'vuex'; - import { __ } from '../../../locale'; - import modal from '../../../vue_shared/components/modal.vue'; - - export default { - components: { - modal, - }, - props: { - branchId: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - type: { - type: String, - required: true, - }, - path: { - type: String, - required: true, - }, - }, - data() { - return { - entryName: this.path !== '' ? `${this.path}/` : '', - }; - }, - computed: { - ...mapState([ - 'currentProjectId', - ]), - modalTitle() { - if (this.type === 'tree') { - return __('Create new directory'); - } - - return __('Create new file'); - }, - buttonLabel() { - if (this.type === 'tree') { - return __('Create directory'); - } - - return __('Create file'); - }, - formLabelName() { - if (this.type === 'tree') { - return __('Directory name'); - } - - return __('File name'); - }, - }, - mounted() { - this.$refs.fieldName.focus(); - }, - methods: { - ...mapActions([ - 'createTempEntry', - ]), - createEntryInStore() { - this.createTempEntry({ - projectId: this.currentProjectId, - branchId: this.branchId, - parent: this.parent, - name: this.entryName.replace(new RegExp(`^${this.path}/`), ''), - type: this.type, - }); - - this.hideModal(); - }, - hideModal() { - this.$emit('hide'); - }, - }, - }; -</script> - -<template> - <modal - :title="modalTitle" - :primary-button-label="buttonLabel" - kind="success" - @cancel="hideModal" - @submit="createEntryInStore" - > - <form - class="form-horizontal" - slot="body" - @submit.prevent="createEntryInStore" - > - <fieldset class="form-group append-bottom-0"> - <label class="label-light col-sm-3"> - {{ formLabelName }} - </label> - <div class="col-sm-9"> - <input - type="text" - class="form-control" - v-model="entryName" - ref="fieldName" - /> - </div> - </fieldset> - </form> - </modal> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue deleted file mode 100644 index 6244737fa43..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ /dev/null @@ -1,87 +0,0 @@ -<script> - import { mapActions, mapState } from 'vuex'; - - export default { - props: { - branchId: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - }, - computed: { - ...mapState([ - 'trees', - 'currentProjectId', - ]), - }, - mounted() { - this.$refs.fileUpload.addEventListener('change', this.openFile); - }, - beforeDestroy() { - this.$refs.fileUpload.removeEventListener('change', this.openFile); - }, - methods: { - ...mapActions([ - 'createTempEntry', - ]), - createFile(target, file, isText) { - const { name } = file; - let { result } = target; - - if (!isText) { - result = result.split('base64,')[1]; - } - - this.createTempEntry({ - name, - projectId: this.currentProjectId, - branchId: this.branchId, - parent: this.parent, - type: 'blob', - content: result, - base64: !isText, - }); - }, - readFile(file) { - const reader = new FileReader(); - const isText = file.type.match(/text.*/) !== null; - - reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true }); - - if (isText) { - reader.readAsText(file); - } else { - reader.readAsDataURL(file); - } - }, - openFile() { - Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file)); - }, - startFileUpload() { - this.$refs.fileUpload.click(); - }, - }, - }; -</script> - -<template> - <div> - <a - href="#" - role="button" - @click.prevent="startFileUpload" - > - {{ __('Upload file') }} - </a> - <input - id="file-upload" - type="file" - class="hidden" - ref="fileUpload" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue deleted file mode 100644 index 96b1bb78c1d..00000000000 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ /dev/null @@ -1,171 +0,0 @@ -<script> -import { mapGetters, mapState, mapActions } from 'vuex'; -import tooltip from '../../vue_shared/directives/tooltip'; -import icon from '../../vue_shared/components/icon.vue'; -import modal from '../../vue_shared/components/modal.vue'; -import commitFilesList from './commit_sidebar/list.vue'; - -export default { - components: { - modal, - icon, - commitFilesList, - }, - directives: { - tooltip, - }, - data() { - return { - showNewBranchModal: false, - submitCommitsLoading: false, - startNewMR: false, - commitMessage: '', - }; - }, - computed: { - ...mapState([ - 'currentProjectId', - 'currentBranchId', - 'rightPanelCollapsed', - ]), - ...mapGetters([ - 'changedFiles', - ]), - commitButtonDisabled() { - return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length; - }, - commitMessageCount() { - return this.commitMessage.length; - }, - }, - methods: { - ...mapActions([ - 'checkCommitStatus', - 'commitChanges', - 'getTreeData', - 'setPanelCollapsedStatus', - ]), - makeCommit(newBranch = false) { - const createNewBranch = newBranch || this.startNewMR; - - const payload = { - branch: createNewBranch ? - `${this.currentBranchId}-${new Date().getTime().toString()}` : - this.currentBranchId, - commit_message: this.commitMessage, - actions: this.changedFiles.map(f => ({ - action: f.tempFile ? 'create' : 'update', - file_path: f.path, - content: f.content, - encoding: f.base64 ? 'base64' : 'text', - })), - start_branch: createNewBranch ? this.currentBranchId : undefined, - }; - - this.showNewBranchModal = false; - this.submitCommitsLoading = true; - - this.commitChanges({ payload, newMr: this.startNewMR }) - .then(() => { - this.submitCommitsLoading = false; - this.commitMessage = ''; - this.startNewMR = false; - }) - .catch(() => { - this.submitCommitsLoading = false; - }); - }, - tryCommit() { - this.submitCommitsLoading = true; - - this.checkCommitStatus() - .then((branchChanged) => { - if (branchChanged) { - this.showNewBranchModal = true; - } else { - this.makeCommit(); - } - }) - .catch(() => { - this.submitCommitsLoading = false; - }); - }, - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'right', - collapsed: !this.rightPanelCollapsed, - }); - }, - }, -}; -</script> - -<template> - <div class="multi-file-commit-panel-section"> - <modal - v-if="showNewBranchModal" - :primary-button-label="__('Create new branch')" - kind="primary" - :title="__('Branch has changed')" - :text="__(`This branch has changed since -you started editing. Would you like to create a new branch?`)" - @cancel="showNewBranchModal = false" - @submit="makeCommit(true)" - /> - <commit-files-list - title="Staged" - :file-list="changedFiles" - :collapsed="rightPanelCollapsed" - @toggleCollapsed="toggleCollapsed" - /> - <form - class="form-horizontal multi-file-commit-form" - @submit.prevent="tryCommit" - v-if="!rightPanelCollapsed" - > - <div class="multi-file-commit-fieldset"> - <textarea - class="form-control multi-file-commit-message" - name="commit-message" - v-model="commitMessage" - placeholder="Commit message" - > - </textarea> - </div> - <div class="multi-file-commit-fieldset"> - <label - v-tooltip - title="Create a new merge request with these changes" - data-container="body" - data-placement="top" - > - <input - type="checkbox" - v-model="startNewMR" - /> - Merge Request - </label> - <button - type="submit" - :disabled="commitButtonDisabled" - class="btn btn-default btn-sm append-right-10 prepend-left-10" - :class="{ disabled: submitCommitsLoading }" - > - <i - v-if="submitCommitsLoading" - class="js-commit-loading-icon fa fa-spinner fa-spin" - aria-hidden="true" - aria-label="loading" - > - </i> - Commit - </button> - <div - class="multi-file-commit-message-count" - > - {{ commitMessageCount }} - </div> - </div> - </form> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue deleted file mode 100644 index c43e9163340..00000000000 --- a/app/assets/javascripts/ide/components/repo_edit_button.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { mapGetters, mapActions, mapState } from 'vuex'; -import modal from '../../vue_shared/components/modal.vue'; - -export default { - components: { - modal, - }, - computed: { - ...mapState([ - 'editMode', - 'discardPopupOpen', - ]), - ...mapGetters([ - 'canEditFile', - ]), - buttonLabel() { - return this.editMode ? this.__('Cancel edit') : this.__('Edit'); - }, - }, - methods: { - ...mapActions([ - 'toggleEditMode', - 'closeDiscardPopup', - ]), - }, -}; -</script> - -<template> - <div class="editable-mode"> - <button - v-if="canEditFile" - class="btn btn-default" - type="button" - @click.prevent="toggleEditMode()"> - <i - v-if="!editMode" - class="fa fa-pencil" - aria-hidden="true"> - </i> - <span> - {{ buttonLabel }} - </span> - </button> - <modal - v-if="discardPopupOpen" - class="text-left" - :primary-button-label="__('Discard changes')" - kind="warning" - :title="__('Are you sure?')" - :text="__('Are you sure you want to discard your changes?')" - @cancel="closeDiscardPopup" - @submit="toggleEditMode(true)" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue deleted file mode 100644 index f99228012f4..00000000000 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ /dev/null @@ -1,136 +0,0 @@ -<script> -/* global monaco */ -import { mapState, mapGetters, mapActions } from 'vuex'; -import flash from '../../flash'; -import monacoLoader from '../monaco_loader'; -import Editor from '../lib/editor'; - -export default { - computed: { - ...mapGetters([ - 'activeFile', - 'activeFileExtension', - ]), - ...mapState([ - 'leftPanelCollapsed', - 'rightPanelCollapsed', - 'panelResizing', - ]), - shouldHideEditor() { - return this.activeFile.binary && !this.activeFile.raw; - }, - }, - watch: { - activeFile(oldVal, newVal) { - if (newVal && !newVal.active) { - this.initMonaco(); - } - }, - leftPanelCollapsed() { - this.editor.updateDimensions(); - }, - rightPanelCollapsed() { - this.editor.updateDimensions(); - }, - panelResizing(isResizing) { - if (isResizing === false) { - this.editor.updateDimensions(); - } - }, - }, - beforeDestroy() { - this.editor.dispose(); - }, - mounted() { - if (this.editor && monaco) { - this.initMonaco(); - } else { - monacoLoader(['vs/editor/editor.main'], () => { - this.editor = Editor.create(monaco); - - this.initMonaco(); - }); - } - }, - methods: { - ...mapActions([ - 'getRawFileData', - 'changeFileContent', - 'setFileLanguage', - 'setEditorPosition', - 'setFileEOL', - ]), - initMonaco() { - if (this.shouldHideEditor) return; - - this.editor.clearEditor(); - - this.getRawFileData(this.activeFile) - .then(() => { - this.editor.createInstance(this.$refs.editor); - }) - .then(() => this.setupEditor()) - .catch((err) => { - flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true); - throw err; - }); - }, - setupEditor() { - if (!this.activeFile) return; - - const model = this.editor.createModel(this.activeFile); - - this.editor.attachModel(model); - - model.onChange((m) => { - this.changeFileContent({ - file: this.activeFile, - content: m.getValue(), - }); - }); - - // Handle Cursor Position - this.editor.onPositionChange((instance, e) => { - this.setEditorPosition({ - editorRow: e.position.lineNumber, - editorColumn: e.position.column, - }); - }); - - this.editor.setPosition({ - lineNumber: this.activeFile.editorRow, - column: this.activeFile.editorColumn, - }); - - // Handle File Language - this.setFileLanguage({ - fileLanguage: model.language, - }); - - // Get File eol - this.setFileEOL({ - eol: model.eol, - }); - }, - }, -}; -</script> - -<template> - <div - id="ide" - class="blob-viewer-container blob-editor-container" - > - <div - v-if="shouldHideEditor" - v-html="activeFile.html" - > - </div> - <div - v-show="!shouldHideEditor" - ref="editor" - class="multi-file-editor-holder" - > - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue deleted file mode 100644 index 110918872fb..00000000000 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ /dev/null @@ -1,165 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import timeAgoMixin from '../../vue_shared/mixins/timeago'; - import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; - import newDropdown from './new_dropdown/index.vue'; - import fileIcon from '../../vue_shared/components/file_icon.vue'; - - export default { - components: { - skeletonLoadingContainer, - newDropdown, - fileIcon, - }, - mixins: [ - timeAgoMixin, - ], - props: { - file: { - type: Object, - required: true, - }, - showExtraColumns: { - type: Boolean, - default: false, - }, - }, - computed: { - ...mapState([ - 'leftPanelCollapsed', - ]), - isSubmodule() { - return this.file.type === 'submodule'; - }, - isTree() { - return this.file.type === 'tree'; - }, - levelIndentation() { - if (this.file.level > 0) { - return { - marginLeft: `${this.file.level * 16}px`, - }; - } - return {}; - }, - shortId() { - return this.file.id.substr(0, 8); - }, - submoduleColSpan() { - return !this.leftPanelCollapsed && this.isSubmodule ? 3 : 1; - }, - fileClass() { - if (this.file.type === 'blob') { - if (this.file.active) { - return 'file-open file-active'; - } - return this.file.opened ? 'file-open' : ''; - } - return ''; - }, - changedClass() { - return { - 'fa-circle unsaved-icon': this.file.changed || this.file.tempFile, - }; - }, - }, - updated() { - if (this.file.type === 'blob' && this.file.active) { - this.$el.scrollIntoView(); - } - }, - methods: { - clickFile(row) { - // Manual Action if a tree is selected/opened - if (this.file.type === 'tree' && this.$router.currentRoute.path === `/project${row.url}`) { - this.$store.dispatch('toggleTreeOpen', { - endpoint: this.file.url, - tree: this.file, - }); - } - this.$router.push(`/project${row.url}`); - }, - }, - }; -</script> - -<template> - <tr - class="file" - :class="fileClass" - @click="clickFile(file)"> - <td - class="multi-file-table-name" - :colspan="submoduleColSpan" - > - <a - class="repo-file-name" - > - <file-icon - :file-name="file.name" - :loading="file.loading" - :folder="file.type === 'tree'" - :opened="file.opened" - :style="levelIndentation" - :size="16" - /> - {{ file.name }} - </a> - <new-dropdown - v-if="isTree" - :project-id="file.projectId" - :branch="file.branchId" - :path="file.path" - :parent="file" - /> - <i - class="fa" - v-if="file.changed || file.tempFile" - :class="changedClass" - aria-hidden="true" - > - </i> - <template v-if="isSubmodule && file.id"> - @ - <span class="commit-sha"> - <a - @click.stop - :href="file.tree_url" - > - {{ shortId }} - </a> - </span> - </template> - </td> - - <template v-if="showExtraColumns && !isSubmodule"> - <td class="multi-file-table-col-commit-message hidden-sm hidden-xs"> - <a - v-if="file.lastCommit.message" - @click.stop - :href="file.lastCommit.url" - > - {{ file.lastCommit.message }} - </a> - <skeleton-loading-container - v-else - :small="true" - /> - </td> - - <td class="commit-update hidden-xs text-right"> - <span - v-if="file.lastCommit.updatedAt" - :title="tooltipTitle(file.lastCommit.updatedAt)" - > - {{ timeFormated(file.lastCommit.updatedAt) }} - </span> - <skeleton-loading-container - v-else - class="animation-container-right" - :small="true" - /> - </td> - </template> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue deleted file mode 100644 index aabc0d8eada..00000000000 --- a/app/assets/javascripts/ide/components/repo_file_buttons.vue +++ /dev/null @@ -1,60 +0,0 @@ -<script> -import { mapGetters } from 'vuex'; - -export default { - computed: { - ...mapGetters([ - 'activeFile', - ]), - showButtons() { - return this.activeFile.rawPath || - this.activeFile.blamePath || - this.activeFile.commitsPath || - this.activeFile.permalink; - }, - rawDownloadButtonLabel() { - return this.activeFile.binary ? 'Download' : 'Raw'; - }, - }, -}; -</script> - -<template> - <div - v-if="showButtons" - class="multi-file-editor-btn-group" - > - <a - :href="activeFile.rawPath" - target="_blank" - class="btn btn-default btn-sm raw" - rel="noopener noreferrer"> - {{ rawDownloadButtonLabel }} - </a> - - <div - class="btn-group" - role="group" - aria-label="File actions" - > - <a - :href="activeFile.blamePath" - class="btn btn-default btn-sm blame" - > - Blame - </a> - <a - :href="activeFile.commitsPath" - class="btn btn-default btn-sm history" - > - History - </a> - <a - :href="activeFile.permalink" - class="btn btn-default btn-sm permalink" - > - Permalink - </a> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue deleted file mode 100644 index 3aeb6f0b28f..00000000000 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ /dev/null @@ -1,42 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; - - export default { - components: { - skeletonLoadingContainer, - }, - computed: { - ...mapState([ - 'leftPanelCollapsed', - ]), - }, - }; -</script> - -<template> - <tr - class="loading-file" - aria-label="Loading files" - > - <td class="multi-file-table-col-name"> - <skeleton-loading-container - :small="true" - /> - </td> - <template v-if="!leftPanelCollapsed"> - <td class="hidden-sm hidden-xs"> - <skeleton-loading-container - :small="true" - /> - </td> - - <td class="hidden-xs"> - <skeleton-loading-container - class="animation-container-right" - :small="true" - /> - </td> - </template> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_prev_directory.vue b/app/assets/javascripts/ide/components/repo_prev_directory.vue deleted file mode 100644 index 7cd359ea4ed..00000000000 --- a/app/assets/javascripts/ide/components/repo_prev_directory.vue +++ /dev/null @@ -1,32 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - - export default { - computed: { - ...mapState([ - 'parentTreeUrl', - 'leftPanelCollapsed', - ]), - colSpanCondition() { - return this.leftPanelCollapsed ? undefined : 3; - }, - }, - methods: { - ...mapActions([ - 'getTreeData', - ]), - }, - }; -</script> - -<template> - <tr class="file prev-directory"> - <td - :colspan="colSpanCondition" - class="table-cell" - @click.prevent="getTreeData({ endpoint: parentTreeUrl })" - > - <a :href="parentTreeUrl">...</a> - </td> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_preview.vue b/app/assets/javascripts/ide/components/repo_preview.vue deleted file mode 100644 index e47270a9855..00000000000 --- a/app/assets/javascripts/ide/components/repo_preview.vue +++ /dev/null @@ -1,71 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import LineHighlighter from '../../line_highlighter'; - import syntaxHighlight from '../../syntax_highlight'; - - export default { - computed: { - ...mapGetters([ - 'activeFile', - ]), - renderErrorTooLarge() { - return this.activeFile.renderError === 'too_large'; - }, - }, - mounted() { - this.highlightFile(); - this.lineHighlighter = new LineHighlighter({ - fileHolderSelector: '.blob-viewer-container', - scrollFileHolder: true, - }); - }, - updated() { - this.$nextTick(() => { - this.highlightFile(); - }); - }, - methods: { - highlightFile() { - syntaxHighlight($(this.$el).find('.file-content')); - }, - }, - }; -</script> - -<template> - <div> - <div - v-if="!activeFile.renderError" - v-html="activeFile.html" - class="multi-file-preview-holder" - > - </div> - <div - v-else-if="activeFile.tempFile" - class="vertical-center render-error"> - <p class="text-center"> - The source could not be displayed for this temporary file. - </p> - </div> - <div - v-else-if="renderErrorTooLarge" - 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.rawPath" - download>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 occurred. - You can <a - :href="activeFile.rawPath" - download>download</a> it instead. - </p> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue deleted file mode 100644 index 5ed7bddf6ae..00000000000 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> - import { mapActions } from 'vuex'; - import fileIcon from '../../vue_shared/components/file_icon.vue'; - - export default { - components: { - fileIcon, - }, - props: { - tab: { - type: Object, - required: true, - }, - }, - computed: { - closeLabel() { - if (this.tab.changed || this.tab.tempFile) { - return `${this.tab.name} changed`; - } - return `Close ${this.tab.name}`; - }, - changedClass() { - const tabChangedObj = { - 'fa-times close-icon': !this.tab.changed && !this.tab.tempFile, - 'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile, - }; - return tabChangedObj; - }, - }, - - methods: { - ...mapActions([ - 'closeFile', - ]), - clickFile(tab) { - this.$router.push(`/project${tab.url}`); - }, - }, - }; -</script> - -<template> - <li @click="clickFile(tab)"> - <button - type="button" - class="multi-file-tab-close" - @click.stop.prevent="closeFile({ file: tab })" - :aria-label="closeLabel" - :class="{ - 'modified': tab.changed, - }" - :disabled="tab.changed" - > - <i - class="fa" - :class="changedClass" - aria-hidden="true" - > - </i> - </button> - - <div - class="multi-file-tab" - :class="{active : tab.active }" - :title="tab.url" - > - <file-icon - :file-name="tab.name" - :size="16" - /> - {{ tab.name }} - </div> - </li> -</template> diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue deleted file mode 100644 index ca363bba0ef..00000000000 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import RepoTab from './repo_tab.vue'; - - export default { - components: { - 'repo-tab': RepoTab, - }, - computed: { - ...mapState([ - 'openFiles', - ]), - }, - }; -</script> - -<template> - <ul - class="multi-file-tabs list-unstyled append-bottom-0" - > - <repo-tab - v-for="tab in openFiles" - :key="tab.key" - :tab="tab" - /> - </ul> -</template> diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js deleted file mode 100644 index a7fb9e0588a..00000000000 --- a/app/assets/javascripts/ide/ide_router.js +++ /dev/null @@ -1,101 +0,0 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import store from './stores'; -import flash from '../flash'; -import { - getTreeEntry, -} from './stores/utils'; - -Vue.use(VueRouter); - -/** - * Routes below /-/ide/: - -/project/h5bp/html5-boilerplate/blob/master -/project/h5bp/html5-boilerplate/blob/master/app/js/test.js - -/project/h5bp/html5-boilerplate/mr/123 -/project/h5bp/html5-boilerplate/mr/123/app/js/test.js - -/workspace/123 -/workspace/project/h5bp/html5-boilerplate/blob/my-special-branch -/workspace/project/h5bp/html5-boilerplate/mr/123 - -/ = /workspace - -/settings -*/ - -// Unfortunately Vue Router doesn't work without at least a fake component -// If you do only data handling -const EmptyRouterComponent = { - render(createElement) { - return createElement('div'); - }, -}; - -const router = new VueRouter({ - mode: 'history', - base: `${gon.relative_url_root}/-/ide/`, - routes: [ - { - path: '/project/:namespace/:project', - component: EmptyRouterComponent, - children: [ - { - path: ':targetmode/:branch/*', - component: EmptyRouterComponent, - }, - { - path: 'mr/:mrid', - component: EmptyRouterComponent, - }, - ], - }, - ], -}); - -router.beforeEach((to, from, next) => { - if (to.params.namespace && to.params.project) { - store.dispatch('getProjectData', { - namespace: to.params.namespace, - projectId: to.params.project, - }) - .then(() => { - const fullProjectId = `${to.params.namespace}/${to.params.project}`; - - if (to.params.branch) { - store.dispatch('getBranchData', { - projectId: fullProjectId, - branchId: to.params.branch, - }); - - store.dispatch('getTreeData', { - projectId: fullProjectId, - branch: to.params.branch, - endpoint: `/tree/${to.params.branch}`, - }) - .then(() => { - if (to.params[0]) { - const treeEntry = getTreeEntry(store, `${to.params.namespace}/${to.params.project}/${to.params.branch}`, to.params[0]); - if (treeEntry) { - store.dispatch('handleTreeEntryAction', treeEntry); - } - } - }) - .catch((e) => { - flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true); - throw e; - }); - } - }) - .catch((e) => { - flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true); - throw e; - }); - } - - next(); -}); - -export default router; diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js deleted file mode 100644 index e8a19f47cee..00000000000 --- a/app/assets/javascripts/ide/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import Vue from 'vue'; -import ide from './components/ide.vue'; -import store from './stores'; -import router from './ide_router'; -import Translate from '../vue_shared/translate'; - -function initIde(el) { - if (!el) return null; - - return new Vue({ - el, - store, - router, - components: { - ide, - }, - render(createElement) { - return createElement('ide', { - props: { - emptyStateSvgPath: el.dataset.emptyStateSvgPath, - }, - }); - }, - }); -} - -const ideElement = document.getElementById('ide'); - -Vue.use(Translate); - -initIde(ideElement); diff --git a/app/assets/javascripts/ide/lib/common/disposable.js b/app/assets/javascripts/ide/lib/common/disposable.js deleted file mode 100644 index 84b29bdb600..00000000000 --- a/app/assets/javascripts/ide/lib/common/disposable.js +++ /dev/null @@ -1,14 +0,0 @@ -export default class Disposable { - constructor() { - this.disposers = new Set(); - } - - add(...disposers) { - disposers.forEach(disposer => this.disposers.add(disposer)); - } - - dispose() { - this.disposers.forEach(disposer => disposer.dispose()); - this.disposers.clear(); - } -} diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js deleted file mode 100644 index 14d9fe4771e..00000000000 --- a/app/assets/javascripts/ide/lib/common/model.js +++ /dev/null @@ -1,64 +0,0 @@ -/* global monaco */ -import Disposable from './disposable'; - -export default class Model { - constructor(monaco, file) { - this.monaco = monaco; - this.disposable = new Disposable(); - this.file = file; - this.content = file.content !== '' ? file.content : file.raw; - - this.disposable.add( - this.originalModel = this.monaco.editor.createModel( - this.file.raw, - undefined, - new this.monaco.Uri(null, null, `original/${this.file.path}`), - ), - this.model = this.monaco.editor.createModel( - this.content, - undefined, - new this.monaco.Uri(null, null, this.file.path), - ), - ); - - this.events = new Map(); - } - - get url() { - return this.model.uri.toString(); - } - - get language() { - return this.model.getModeId(); - } - - get eol() { - return this.model.getEOL() === '\n' ? 'LF' : 'CRLF'; - } - - get path() { - return this.file.path; - } - - getModel() { - return this.model; - } - - getOriginalModel() { - return this.originalModel; - } - - onChange(cb) { - this.events.set( - this.path, - this.disposable.add( - this.model.onDidChangeContent(e => cb(this.model, e)), - ), - ); - } - - dispose() { - this.disposable.dispose(); - this.events.clear(); - } -} diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js deleted file mode 100644 index fd462252795..00000000000 --- a/app/assets/javascripts/ide/lib/common/model_manager.js +++ /dev/null @@ -1,32 +0,0 @@ -import Disposable from './disposable'; -import Model from './model'; - -export default class ModelManager { - constructor(monaco) { - this.monaco = monaco; - this.disposable = new Disposable(); - this.models = new Map(); - } - - hasCachedModel(path) { - return this.models.has(path); - } - - addModel(file) { - if (this.hasCachedModel(file.path)) { - return this.models.get(file.path); - } - - const model = new Model(this.monaco, file); - this.models.set(model.path, model); - this.disposable.add(model); - - return model; - } - - dispose() { - // dispose of all the models - this.disposable.dispose(); - this.models.clear(); - } -} diff --git a/app/assets/javascripts/ide/lib/decorations/controller.js b/app/assets/javascripts/ide/lib/decorations/controller.js deleted file mode 100644 index 0954b7973c4..00000000000 --- a/app/assets/javascripts/ide/lib/decorations/controller.js +++ /dev/null @@ -1,43 +0,0 @@ -export default class DecorationsController { - constructor(editor) { - this.editor = editor; - this.decorations = new Map(); - this.editorDecorations = new Map(); - } - - getAllDecorationsForModel(model) { - if (!this.decorations.has(model.url)) return []; - - const modelDecorations = this.decorations.get(model.url); - const decorations = []; - - modelDecorations.forEach(val => decorations.push(...val)); - - return decorations; - } - - addDecorations(model, decorationsKey, decorations) { - const decorationMap = this.decorations.get(model.url) || new Map(); - - decorationMap.set(decorationsKey, decorations); - - this.decorations.set(model.url, decorationMap); - - this.decorate(model); - } - - decorate(model) { - const decorations = this.getAllDecorationsForModel(model); - const oldDecorations = this.editorDecorations.get(model.url) || []; - - this.editorDecorations.set( - model.url, - this.editor.instance.deltaDecorations(oldDecorations, decorations), - ); - } - - dispose() { - this.decorations.clear(); - this.editorDecorations.clear(); - } -} diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js deleted file mode 100644 index dc0b1c95e59..00000000000 --- a/app/assets/javascripts/ide/lib/diff/controller.js +++ /dev/null @@ -1,71 +0,0 @@ -/* global monaco */ -import { throttle } from 'underscore'; -import DirtyDiffWorker from './diff_worker'; -import Disposable from '../common/disposable'; - -export const getDiffChangeType = (change) => { - if (change.modified) { - return 'modified'; - } else if (change.added) { - return 'added'; - } else if (change.removed) { - return 'removed'; - } - - return ''; -}; - -export const getDecorator = change => ({ - range: new monaco.Range( - change.lineNumber, - 1, - change.endLineNumber, - 1, - ), - options: { - isWholeLine: true, - linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`, - }, -}); - -export default class DirtyDiffController { - constructor(modelManager, decorationsController) { - this.disposable = new Disposable(); - this.editorSimpleWorker = null; - this.modelManager = modelManager; - this.decorationsController = decorationsController; - this.dirtyDiffWorker = new DirtyDiffWorker(); - this.throttledComputeDiff = throttle(this.computeDiff, 250); - this.decorate = this.decorate.bind(this); - - this.dirtyDiffWorker.addEventListener('message', this.decorate); - } - - attachModel(model) { - model.onChange(() => this.throttledComputeDiff(model)); - } - - computeDiff(model) { - this.dirtyDiffWorker.postMessage({ - path: model.path, - originalContent: model.getOriginalModel().getValue(), - newContent: model.getModel().getValue(), - }); - } - - reDecorate(model) { - this.decorationsController.decorate(model); - } - - decorate({ data }) { - const decorations = data.changes.map(change => getDecorator(change)); - this.decorationsController.addDecorations(data.path, 'dirtyDiff', decorations); - } - - dispose() { - this.disposable.dispose(); - - this.dirtyDiffWorker.removeEventListener('message', this.decorate); - this.dirtyDiffWorker.terminate(); - } -} diff --git a/app/assets/javascripts/ide/lib/diff/diff.js b/app/assets/javascripts/ide/lib/diff/diff.js deleted file mode 100644 index 0e37f5c4704..00000000000 --- a/app/assets/javascripts/ide/lib/diff/diff.js +++ /dev/null @@ -1,30 +0,0 @@ -import { diffLines } from 'diff'; - -// eslint-disable-next-line import/prefer-default-export -export const computeDiff = (originalContent, newContent) => { - const changes = diffLines(originalContent, newContent); - - let lineNumber = 1; - return changes.reduce((acc, change) => { - const findOnLine = acc.find(c => c.lineNumber === lineNumber); - - if (findOnLine) { - Object.assign(findOnLine, change, { - modified: true, - endLineNumber: (lineNumber + change.count) - 1, - }); - } else if ('added' in change || 'removed' in change) { - acc.push(Object.assign({}, change, { - lineNumber, - modified: undefined, - endLineNumber: (lineNumber + change.count) - 1, - })); - } - - if (!change.removed) { - lineNumber += change.count; - } - - return acc; - }, []); -}; diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js deleted file mode 100644 index e74c4046330..00000000000 --- a/app/assets/javascripts/ide/lib/diff/diff_worker.js +++ /dev/null @@ -1,10 +0,0 @@ -import { computeDiff } from './diff'; - -self.addEventListener('message', (e) => { - const data = e.data; - - self.postMessage({ - path: data.path, - changes: computeDiff(data.originalContent, data.newContent), - }); -}); diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js deleted file mode 100644 index 51255f15658..00000000000 --- a/app/assets/javascripts/ide/lib/editor.js +++ /dev/null @@ -1,110 +0,0 @@ -import _ from 'underscore'; -import DecorationsController from './decorations/controller'; -import DirtyDiffController from './diff/controller'; -import Disposable from './common/disposable'; -import ModelManager from './common/model_manager'; -import editorOptions from './editor_options'; - -export default class Editor { - static create(monaco) { - this.editorInstance = new Editor(monaco); - - return this.editorInstance; - } - - constructor(monaco) { - this.monaco = monaco; - this.currentModel = null; - this.instance = null; - this.dirtyDiffController = null; - this.disposable = new Disposable(); - - this.disposable.add( - this.modelManager = new ModelManager(this.monaco), - this.decorationsController = new DecorationsController(this), - ); - - this.debouncedUpdate = _.debounce(() => { - this.updateDimensions(); - }, 200); - window.addEventListener('resize', this.debouncedUpdate, false); - } - - createInstance(domElement) { - if (!this.instance) { - this.disposable.add( - this.instance = this.monaco.editor.create(domElement, { - model: null, - readOnly: false, - contextmenu: true, - scrollBeyondLastLine: false, - minimap: { - enabled: false, - }, - }), - this.dirtyDiffController = new DirtyDiffController( - this.modelManager, this.decorationsController, - ), - ); - } - } - - createModel(file) { - return this.modelManager.addModel(file); - } - - attachModel(model) { - this.instance.setModel(model.getModel()); - if (this.dirtyDiffController) this.dirtyDiffController.attachModel(model); - - this.currentModel = model; - - this.instance.updateOptions(editorOptions.reduce((acc, obj) => { - Object.keys(obj).forEach((key) => { - Object.assign(acc, { - [key]: obj[key](model), - }); - }); - return acc; - }, {})); - - if (this.dirtyDiffController) this.dirtyDiffController.reDecorate(model); - } - - clearEditor() { - if (this.instance) { - this.instance.setModel(null); - } - } - - dispose() { - this.disposable.dispose(); - window.removeEventListener('resize', this.debouncedUpdate); - - // dispose main monaco instance - if (this.instance) { - this.instance = null; - } - } - - updateDimensions() { - this.instance.layout(); - } - - setPosition({ lineNumber, column }) { - this.instance.revealPositionInCenter({ - lineNumber, - column, - }); - this.instance.setPosition({ - lineNumber, - column, - }); - } - - onPositionChange(cb) { - this.disposable.add( - this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)), - ); - } -} diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js deleted file mode 100644 index 701affc466e..00000000000 --- a/app/assets/javascripts/ide/lib/editor_options.js +++ /dev/null @@ -1,2 +0,0 @@ -export default [{ -}]; diff --git a/app/assets/javascripts/ide/monaco_loader.js b/app/assets/javascripts/ide/monaco_loader.js deleted file mode 100644 index 142a220097b..00000000000 --- a/app/assets/javascripts/ide/monaco_loader.js +++ /dev/null @@ -1,16 +0,0 @@ -import monacoContext from 'monaco-editor/dev/vs/loader'; - -monacoContext.require.config({ - paths: { - vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase - }, -}); - -// ignore CDN config and use local assets path for service worker which cannot be cross-domain -const relativeRootPath = (gon && gon.relative_url_root) || ''; -const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`; -window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` }; - -// eslint-disable-next-line no-underscore-dangle -window.__monaco_context__ = monacoContext; -export default monacoContext.require; diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js deleted file mode 100644 index 1fb24e93f2e..00000000000 --- a/app/assets/javascripts/ide/services/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import Vue from 'vue'; -import VueResource from 'vue-resource'; -import Api from '../../api'; - -Vue.use(VueResource); - -export default { - getTreeData(endpoint) { - return Vue.http.get(endpoint, { params: { format: 'json' } }); - }, - getFileData(endpoint) { - return Vue.http.get(endpoint, { params: { format: 'json' } }); - }, - getRawFileData(file) { - if (file.tempFile) { - return Promise.resolve(file.content); - } - - if (file.raw) { - return Promise.resolve(file.raw); - } - - return Vue.http.get(file.rawPath, { params: { format: 'json' } }) - .then(res => res.text()); - }, - getProjectData(namespace, project) { - return Api.project(`${namespace}/${project}`); - }, - getBranchData(projectId, currentBranchId) { - return Api.branchSingle(projectId, currentBranchId); - }, - createBranch(projectId, payload) { - const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId); - - return Vue.http.post(url, payload); - }, - commit(projectId, payload) { - return Api.commitMultiple(projectId, payload); - }, - getTreeLastCommit(endpoint) { - return Vue.http.get(endpoint, { - params: { - format: 'json', - }, - }); - }, -}; diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js deleted file mode 100644 index d007d0ae78f..00000000000 --- a/app/assets/javascripts/ide/stores/actions.js +++ /dev/null @@ -1,196 +0,0 @@ -import Vue from 'vue'; -import { visitUrl } from '../../lib/utils/url_utility'; -import flash from '../../flash'; -import service from '../services'; -import * as types from './mutation_types'; -import { stripHtml } from '../../lib/utils/text_utility'; - -export const redirectToUrl = (_, url) => visitUrl(url); - -export const setInitialData = ({ commit }, data) => - commit(types.SET_INITIAL_DATA, data); - -export const closeDiscardPopup = ({ commit }) => - commit(types.TOGGLE_DISCARD_POPUP, false); - -export const discardAllChanges = ({ commit, getters, dispatch }) => { - const changedFiles = getters.changedFiles; - - changedFiles.forEach((file) => { - commit(types.DISCARD_FILE_CHANGES, file); - - if (file.tempFile) { - dispatch('closeFile', { file, force: true }); - } - }); -}; - -export const closeAllFiles = ({ state, dispatch }) => { - state.openFiles.forEach(file => dispatch('closeFile', { file })); -}; - -export const toggleEditMode = ( - { state, commit, getters, dispatch }, - force = false, -) => { - const changedFiles = getters.changedFiles; - - if (changedFiles.length && !force) { - commit(types.TOGGLE_DISCARD_POPUP, true); - } else { - commit(types.TOGGLE_EDIT_MODE); - commit(types.TOGGLE_DISCARD_POPUP, false); - dispatch('toggleBlobView'); - - if (!state.editMode) { - dispatch('discardAllChanges'); - } - } -}; - -export const toggleBlobView = ({ commit, state }) => { - if (state.editMode) { - commit(types.SET_EDIT_MODE); - } else { - commit(types.SET_PREVIEW_MODE); - } -}; - -export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => { - if (side === 'left') { - commit(types.SET_LEFT_PANEL_COLLAPSED, collapsed); - } else { - commit(types.SET_RIGHT_PANEL_COLLAPSED, collapsed); - } -}; - -export const setResizingStatus = ({ commit }, resizing) => { - commit(types.SET_RESIZING_STATUS, resizing); -}; - -export const checkCommitStatus = ({ state }) => - service - .getBranchData(state.currentProjectId, state.currentBranchId) - .then(({ data }) => { - const { id } = data.commit; - const selectedBranch = - state.projects[state.currentProjectId].branches[state.currentBranchId]; - - if (selectedBranch.workingReference !== id) { - return true; - } - - return false; - }) - .catch(() => flash('Error checking branch data. Please try again.', 'alert', document, null, false, true)); - -export const commitChanges = ( - { commit, state, dispatch, getters }, - { payload, newMr }, -) => - service - .commit(state.currentProjectId, payload) - .then(({ data }) => { - const { branch } = payload; - if (!data.short_id) { - flash(data.message, 'alert', document, null, false, true); - return; - } - - const selectedProject = state.projects[state.currentProjectId]; - const lastCommit = { - commit_path: `${selectedProject.web_url}/commit/${data.id}`, - commit: { - message: data.message, - authored_date: data.committed_date, - }, - }; - - let commitMsg = `Your changes have been committed. Commit ${data.short_id}`; - if (data.stats) { - commitMsg += ` with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`; - } - - flash( - commitMsg, - 'notice', - document, - null, - false, - true); - window.dispatchEvent(new Event('resize')); - - if (newMr) { - dispatch('discardAllChanges'); - dispatch( - 'redirectToUrl', - `${selectedProject.web_url}/merge_requests/new?merge_request%5Bsource_branch%5D=${branch}`, - ); - } else { - commit(types.SET_BRANCH_WORKING_REFERENCE, { - projectId: state.currentProjectId, - branchId: state.currentBranchId, - reference: data.id, - }); - - getters.changedFiles.forEach((entry) => { - commit(types.SET_LAST_COMMIT_DATA, { - entry, - lastCommit, - }); - }); - - dispatch('discardAllChanges'); - - window.scrollTo(0, 0); - } - }) - .catch((err) => { - let errMsg = 'Error committing changes. Please try again.'; - if (err.response.data && err.response.data.message) { - errMsg += ` (${stripHtml(err.response.data.message)})`; - } - flash(errMsg, 'alert', document, null, false, true); - window.dispatchEvent(new Event('resize')); - }); - -export const createTempEntry = ( - { state, dispatch }, - { projectId, branchId, parent, name, type, content = '', base64 = false }, -) => { - const selectedParent = parent || state.trees[`${projectId}/${branchId}`]; - if (type === 'tree') { - dispatch('createTempTree', { - projectId, - branchId, - parent: selectedParent, - name, - }); - } else if (type === 'blob') { - dispatch('createTempFile', { - projectId, - branchId, - parent: selectedParent, - name, - base64, - content, - }); - } -}; - -export const scrollToTab = () => { - Vue.nextTick(() => { - const tabs = document.getElementById('tabs'); - - if (tabs) { - const tabEl = tabs.querySelector('.active .repo-tab'); - - tabEl.focus(); - } - }); -}; - -export * from './actions/tree'; -export * from './actions/file'; -export * from './actions/project'; -export * from './actions/branch'; diff --git a/app/assets/javascripts/ide/stores/actions/branch.js b/app/assets/javascripts/ide/stores/actions/branch.js deleted file mode 100644 index bc6fd2d4163..00000000000 --- a/app/assets/javascripts/ide/stores/actions/branch.js +++ /dev/null @@ -1,43 +0,0 @@ -import service from '../../services'; -import flash from '../../../flash'; -import * as types from '../mutation_types'; - -export const getBranchData = ( - { commit, state, dispatch }, - { projectId, branchId, force = false } = {}, -) => new Promise((resolve, reject) => { - if ((typeof state.projects[`${projectId}`] === 'undefined' || - !state.projects[`${projectId}`].branches[branchId]) - || force) { - service.getBranchData(`${projectId}`, branchId) - .then(({ data }) => { - const { id } = data.commit; - commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data }); - commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id }); - resolve(data); - }) - .catch(() => { - flash('Error loading branch data. Please try again.', 'alert', document, null, false, true); - reject(new Error(`Branch not loaded - ${projectId}/${branchId}`)); - }); - } else { - resolve(state.projects[`${projectId}`].branches[branchId]); - } -}); - -export const createNewBranch = ({ state, commit }, branch) => service.createBranch( - state.currentProjectId, - { - branch, - ref: state.currentBranchId, - }, -) -.then(res => res.json()) -.then((data) => { - const branchName = data.name; - const url = location.href.replace(state.currentBranchId, branchName); - - if (this.$router) this.$router.push(url); - - commit(types.SET_CURRENT_BRANCH, branchName); -}); diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js deleted file mode 100644 index 670af2fb89e..00000000000 --- a/app/assets/javascripts/ide/stores/actions/file.js +++ /dev/null @@ -1,137 +0,0 @@ -import { normalizeHeaders } from '../../../lib/utils/common_utils'; -import flash from '../../../flash'; -import service from '../../services'; -import * as types from '../mutation_types'; -import router from '../../ide_router'; -import { - findEntry, - setPageTitle, - createTemp, - findIndexOfFile, -} from '../utils'; - -export const closeFile = ({ commit, state, dispatch }, { file, force = false }) => { - if ((file.changed || file.tempFile) && !force) return; - - const indexOfClosedFile = findIndexOfFile(state.openFiles, file); - const fileWasActive = file.active; - - commit(types.TOGGLE_FILE_OPEN, file); - commit(types.SET_FILE_ACTIVE, { file, active: false }); - - if (state.openFiles.length > 0 && fileWasActive) { - const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1; - const nextFileToOpen = state.openFiles[nextIndexToOpen]; - - dispatch('setFileActive', nextFileToOpen); - } else if (!state.openFiles.length) { - router.push(`/project/${file.projectId}/tree/${file.branchId}/`); - } - - dispatch('getLastCommitData'); -}; - -export const setFileActive = ({ commit, state, getters, dispatch }, file) => { - const currentActiveFile = getters.activeFile; - - if (file.active) return; - - if (currentActiveFile) { - commit(types.SET_FILE_ACTIVE, { file: currentActiveFile, active: false }); - } - - commit(types.SET_FILE_ACTIVE, { file, active: true }); - dispatch('scrollToTab'); - - // reset hash for line highlighting - location.hash = ''; - - commit(types.SET_CURRENT_PROJECT, file.projectId); - commit(types.SET_CURRENT_BRANCH, file.branchId); -}; - -export const getFileData = ({ state, commit, dispatch }, file) => { - commit(types.TOGGLE_LOADING, file); - - service.getFileData(file.url) - .then((res) => { - const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']); - - setPageTitle(pageTitle); - - return res.json(); - }) - .then((data) => { - commit(types.SET_FILE_DATA, { data, file }); - commit(types.TOGGLE_FILE_OPEN, file); - dispatch('setFileActive', file); - commit(types.TOGGLE_LOADING, file); - }) - .catch(() => { - commit(types.TOGGLE_LOADING, file); - flash('Error loading file data. Please try again.', 'alert', document, null, false, true); - }); -}; - -export const getRawFileData = ({ commit, dispatch }, file) => service.getRawFileData(file) - .then((raw) => { - commit(types.SET_FILE_RAW_DATA, { file, raw }); - }) - .catch(() => flash('Error loading file content. Please try again.', 'alert', document, null, false, true)); - -export const changeFileContent = ({ commit }, { file, content }) => { - commit(types.UPDATE_FILE_CONTENT, { file, content }); -}; - -export const setFileLanguage = ({ state, commit }, { fileLanguage }) => { - if (state.selectedFile) { - commit(types.SET_FILE_LANGUAGE, { file: state.selectedFile, fileLanguage }); - } -}; - -export const setFileEOL = ({ state, commit }, { eol }) => { - if (state.selectedFile) { - commit(types.SET_FILE_EOL, { file: state.selectedFile, eol }); - } -}; - -export const setEditorPosition = ({ state, commit }, { editorRow, editorColumn }) => { - if (state.selectedFile) { - commit(types.SET_FILE_POSITION, { file: state.selectedFile, editorRow, editorColumn }); - } -}; - -export const createTempFile = ({ state, commit, dispatch }, { projectId, branchId, parent, name, content = '', base64 = '' }) => { - const path = parent.path !== undefined ? parent.path : ''; - // We need to do the replacement otherwise the web_url + file.url duplicate - const newUrl = `/${projectId}/blob/${branchId}/${path}${path ? '/' : ''}${name}`; - const file = createTemp({ - projectId, - branchId, - name: name.replace(`${path}/`, ''), - path, - type: 'blob', - level: parent.level !== undefined ? parent.level + 1 : 0, - changed: true, - content, - base64, - url: newUrl, - }); - - if (findEntry(parent.tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`, 'alert', document, null, false, true); - - commit(types.CREATE_TMP_FILE, { - parent, - file, - }); - commit(types.TOGGLE_FILE_OPEN, file); - dispatch('setFileActive', file); - - if (!state.editMode && !file.base64) { - dispatch('toggleEditMode', true); - } - - router.push(`/project${file.url}`); - - return Promise.resolve(file); -}; diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js deleted file mode 100644 index faeceb430a2..00000000000 --- a/app/assets/javascripts/ide/stores/actions/project.js +++ /dev/null @@ -1,27 +0,0 @@ -import service from '../../services'; -import flash from '../../../flash'; -import * as types from '../mutation_types'; - -// eslint-disable-next-line import/prefer-default-export -export const getProjectData = ( - { commit, state, dispatch }, - { namespace, projectId, force = false } = {}, -) => new Promise((resolve, reject) => { - if (!state.projects[`${namespace}/${projectId}`] || force) { - commit(types.TOGGLE_LOADING, state); - service.getProjectData(namespace, projectId) - .then(res => res.data) - .then((data) => { - commit(types.TOGGLE_LOADING, state); - commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data }); - if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`); - resolve(data); - }) - .catch(() => { - flash('Error loading project data. Please try again.', 'alert', document, null, false, true); - reject(new Error(`Project not loaded ${namespace}/${projectId}`)); - }); - } else { - resolve(state.projects[`${namespace}/${projectId}`]); - } -}); diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js deleted file mode 100644 index 302ba45edee..00000000000 --- a/app/assets/javascripts/ide/stores/actions/tree.js +++ /dev/null @@ -1,188 +0,0 @@ -import { visitUrl } from '../../../lib/utils/url_utility'; -import { normalizeHeaders } from '../../../lib/utils/common_utils'; -import flash from '../../../flash'; -import service from '../../services'; -import * as types from '../mutation_types'; -import router from '../../ide_router'; -import { - setPageTitle, - findEntry, - createTemp, - createOrMergeEntry, -} from '../utils'; - -export const getTreeData = ( - { commit, state, dispatch }, - { endpoint, tree = null, projectId, branch, force = false } = {}, -) => new Promise((resolve, reject) => { - // We already have the base tree so we resolve immediately - if (!tree && state.trees[`${projectId}/${branch}`] && !force) { - resolve(); - } else { - if (tree) commit(types.TOGGLE_LOADING, tree); - const selectedProject = state.projects[projectId]; - // We are merging the web_url that we got on the project info with the endpoint - // we got on the tree entry, as both contain the projectId, we replace it in the tree endpoint - const completeEndpoint = selectedProject.web_url + (endpoint).replace(projectId, ''); - if (completeEndpoint && (!tree || !tree.tempFile)) { - service.getTreeData(completeEndpoint) - .then((res) => { - const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']); - - setPageTitle(pageTitle); - - return res.json(); - }) - .then((data) => { - if (!state.isInitialRoot) { - commit(types.SET_ROOT, data.path === '/'); - } - - dispatch('updateDirectoryData', { data, tree, projectId, branch }); - const selectedTree = tree || state.trees[`${projectId}/${branch}`]; - - commit(types.SET_PARENT_TREE_URL, data.parent_tree_url); - commit(types.SET_LAST_COMMIT_URL, { tree: selectedTree, url: data.last_commit_path }); - if (tree) commit(types.TOGGLE_LOADING, selectedTree); - - const prevLastCommitPath = selectedTree.lastCommitPath; - if (prevLastCommitPath !== null) { - dispatch('getLastCommitData', selectedTree); - } - resolve(data); - }) - .catch((e) => { - flash('Error loading tree data. Please try again.', 'alert', document, null, false, true); - if (tree) commit(types.TOGGLE_LOADING, tree); - reject(e); - }); - } else { - resolve(); - } - } -}); - -export const toggleTreeOpen = ({ commit, dispatch }, { endpoint, tree }) => { - if (tree.opened) { - // send empty data to clear the tree - const data = { trees: [], blobs: [], submodules: [] }; - - dispatch('updateDirectoryData', { data, tree, projectId: tree.projectId, branchId: tree.branchId }); - } else { - dispatch('getTreeData', { endpoint, tree, projectId: tree.projectId, branch: tree.branchId }); - } - - commit(types.TOGGLE_TREE_OPEN, tree); -}; - -export const handleTreeEntryAction = ({ commit, dispatch }, row) => { - if (row.type === 'tree') { - dispatch('toggleTreeOpen', { - endpoint: row.url, - tree: row, - }); - } else if (row.type === 'submodule') { - commit(types.TOGGLE_LOADING, row); - visitUrl(row.url); - } else if (row.type === 'blob' && row.opened) { - dispatch('setFileActive', row); - } else { - dispatch('getFileData', row); - } -}; - -export const createTempTree = ( - { state, commit, dispatch }, - { projectId, branchId, parent, name }, -) => { - let selectedTree = parent; - const dirNames = name.replace(new RegExp(`^${state.path}/`), '').split('/'); - - dirNames.forEach((dirName) => { - const foundEntry = findEntry(selectedTree.tree, 'tree', dirName); - - if (!foundEntry) { - const path = selectedTree.path !== undefined ? selectedTree.path : ''; - const tmpEntry = createTemp({ - projectId, - branchId, - name: dirName, - path, - type: 'tree', - level: selectedTree.level !== undefined ? selectedTree.level + 1 : 0, - tree: [], - url: `/${projectId}/blob/${branchId}/${path}${path ? '/' : ''}${dirName}`, - }); - - commit(types.CREATE_TMP_TREE, { - parent: selectedTree, - tmpEntry, - }); - commit(types.TOGGLE_TREE_OPEN, tmpEntry); - - router.push(`/project${tmpEntry.url}`); - - selectedTree = tmpEntry; - } else { - selectedTree = foundEntry; - } - }); -}; - -export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => { - if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return; - - service.getTreeLastCommit(tree.lastCommitPath) - .then((res) => { - const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null; - - commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath }); - - return res.json(); - }) - .then((data) => { - data.forEach((lastCommit) => { - const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name); - - if (entry) { - commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit }); - } - }); - - dispatch('getLastCommitData', tree); - }) - .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true)); -}; - -export const updateDirectoryData = ( - { commit, state }, - { data, tree, projectId, branch }, -) => { - if (!tree) { - const existingTree = state.trees[`${projectId}/${branch}`]; - if (!existingTree) { - commit(types.CREATE_TREE, { treePath: `${projectId}/${branch}` }); - } - } - - const selectedTree = tree || state.trees[`${projectId}/${branch}`]; - const level = selectedTree.level !== undefined ? selectedTree.level + 1 : 0; - const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl; - const createEntry = (entry, type) => createOrMergeEntry({ - tree: selectedTree, - projectId: `${projectId}`, - branchId: branch, - entry, - level, - type, - parentTreeUrl, - }); - - const formattedData = [ - ...data.trees.map(t => createEntry(t, 'tree')), - ...data.submodules.map(m => createEntry(m, 'submodule')), - ...data.blobs.map(b => createEntry(b, 'blob')), - ]; - - commit(types.SET_DIRECTORY_DATA, { tree: selectedTree, data: formattedData }); -}; diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js deleted file mode 100644 index 6b51ccff817..00000000000 --- a/app/assets/javascripts/ide/stores/getters.js +++ /dev/null @@ -1,19 +0,0 @@ -export const changedFiles = state => state.openFiles.filter(file => file.changed); - -export const activeFile = state => state.openFiles.find(file => file.active) || null; - -export const activeFileExtension = (state) => { - const file = activeFile(state); - return file ? `.${file.path.split('.').pop()}` : ''; -}; - -export const canEditFile = (state) => { - const currentActiveFile = activeFile(state); - - return state.canCommit && - (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary); -}; - -export const addedFiles = state => changedFiles(state).filter(f => f.tempFile); - -export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile); diff --git a/app/assets/javascripts/ide/stores/index.js b/app/assets/javascripts/ide/stores/index.js deleted file mode 100644 index 6ac9bfd8189..00000000000 --- a/app/assets/javascripts/ide/stores/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import Vue from 'vue'; -import Vuex from 'vuex'; -import state from './state'; -import * as actions from './actions'; -import * as getters from './getters'; -import mutations from './mutations'; - -Vue.use(Vuex); - -export default new Vuex.Store({ - state: state(), - actions, - mutations, - getters, -}); diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js deleted file mode 100644 index 69b218a5e7d..00000000000 --- a/app/assets/javascripts/ide/stores/mutation_types.js +++ /dev/null @@ -1,46 +0,0 @@ -export const SET_INITIAL_DATA = 'SET_INITIAL_DATA'; -export const TOGGLE_LOADING = 'TOGGLE_LOADING'; -export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL'; -export const SET_ROOT = 'SET_ROOT'; -export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA'; -export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED'; -export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED'; -export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS'; - -// Project Mutation Types -export const SET_PROJECT = 'SET_PROJECT'; -export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT'; -export const TOGGLE_PROJECT_OPEN = 'TOGGLE_PROJECT_OPEN'; - -// Branch Mutation Types -export const SET_BRANCH = 'SET_BRANCH'; -export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE'; -export const TOGGLE_BRANCH_OPEN = 'TOGGLE_BRANCH_OPEN'; - -// Tree mutation types -export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA'; -export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN'; -export const CREATE_TMP_TREE = 'CREATE_TMP_TREE'; -export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL'; -export const CREATE_TREE = 'CREATE_TREE'; - -// File mutation types -export const SET_FILE_DATA = 'SET_FILE_DATA'; -export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN'; -export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE'; -export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA'; -export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT'; -export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE'; -export const SET_FILE_POSITION = 'SET_FILE_POSITION'; -export const SET_FILE_EOL = 'SET_FILE_EOL'; -export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES'; -export const CREATE_TMP_FILE = 'CREATE_TMP_FILE'; - -// Viewer mutation types -export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE'; -export const SET_EDIT_MODE = 'SET_EDIT_MODE'; -export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE'; -export const TOGGLE_DISCARD_POPUP = 'TOGGLE_DISCARD_POPUP'; - -export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH'; - diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js deleted file mode 100644 index 03d81be10a1..00000000000 --- a/app/assets/javascripts/ide/stores/mutations.js +++ /dev/null @@ -1,70 +0,0 @@ -import * as types from './mutation_types'; -import projectMutations from './mutations/project'; -import fileMutations from './mutations/file'; -import treeMutations from './mutations/tree'; -import branchMutations from './mutations/branch'; - -export default { - [types.SET_INITIAL_DATA](state, data) { - Object.assign(state, data); - }, - [types.SET_PREVIEW_MODE](state) { - Object.assign(state, { - currentBlobView: 'repo-preview', - }); - }, - [types.SET_EDIT_MODE](state) { - Object.assign(state, { - currentBlobView: 'repo-editor', - }); - }, - [types.TOGGLE_LOADING](state, entry) { - Object.assign(entry, { - loading: !entry.loading, - }); - }, - [types.TOGGLE_EDIT_MODE](state) { - Object.assign(state, { - editMode: !state.editMode, - }); - }, - [types.TOGGLE_DISCARD_POPUP](state, discardPopupOpen) { - Object.assign(state, { - discardPopupOpen, - }); - }, - [types.SET_ROOT](state, isRoot) { - Object.assign(state, { - isRoot, - isInitialRoot: isRoot, - }); - }, - [types.SET_LEFT_PANEL_COLLAPSED](state, collapsed) { - Object.assign(state, { - leftPanelCollapsed: collapsed, - }); - }, - [types.SET_RIGHT_PANEL_COLLAPSED](state, collapsed) { - Object.assign(state, { - rightPanelCollapsed: collapsed, - }); - }, - [types.SET_RESIZING_STATUS](state, resizing) { - Object.assign(state, { - panelResizing: resizing, - }); - }, - [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) { - Object.assign(entry.lastCommit, { - id: lastCommit.commit.id, - url: lastCommit.commit_path, - message: lastCommit.commit.message, - author: lastCommit.commit.author_name, - updatedAt: lastCommit.commit.authored_date, - }); - }, - ...projectMutations, - ...fileMutations, - ...treeMutations, - ...branchMutations, -}; diff --git a/app/assets/javascripts/ide/stores/mutations/branch.js b/app/assets/javascripts/ide/stores/mutations/branch.js deleted file mode 100644 index 04b9582c5bb..00000000000 --- a/app/assets/javascripts/ide/stores/mutations/branch.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as types from '../mutation_types'; - -export default { - [types.SET_CURRENT_BRANCH](state, currentBranchId) { - Object.assign(state, { - currentBranchId, - }); - }, - [types.SET_BRANCH](state, { projectPath, branchName, branch }) { - // Add client side properties - Object.assign(branch, { - treeId: `${projectPath}/${branchName}`, - active: true, - workingReference: '', - }); - - Object.assign(state.projects[projectPath], { - branches: { - [branchName]: branch, - }, - }); - }, - [types.SET_BRANCH_WORKING_REFERENCE](state, { projectId, branchId, reference }) { - Object.assign(state.projects[projectId].branches[branchId], { - workingReference: reference, - }); - }, -}; diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js deleted file mode 100644 index 72db1c180c9..00000000000 --- a/app/assets/javascripts/ide/stores/mutations/file.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as types from '../mutation_types'; -import { findIndexOfFile } from '../utils'; - -export default { - [types.SET_FILE_ACTIVE](state, { file, active }) { - Object.assign(file, { - active, - }); - - Object.assign(state, { - selectedFile: file, - }); - }, - [types.TOGGLE_FILE_OPEN](state, file) { - Object.assign(file, { - opened: !file.opened, - }); - - if (file.opened) { - state.openFiles.push(file); - } else { - state.openFiles.splice(findIndexOfFile(state.openFiles, file), 1); - } - }, - [types.SET_FILE_DATA](state, { data, file }) { - Object.assign(file, { - blamePath: data.blame_path, - commitsPath: data.commits_path, - permalink: data.permalink, - rawPath: data.raw_path, - binary: data.binary, - html: data.html, - renderError: data.render_error, - }); - }, - [types.SET_FILE_RAW_DATA](state, { file, raw }) { - Object.assign(file, { - raw, - }); - }, - [types.UPDATE_FILE_CONTENT](state, { file, content }) { - const changed = content !== file.raw; - - Object.assign(file, { - content, - changed, - }); - }, - [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) { - Object.assign(file, { - fileLanguage, - }); - }, - [types.SET_FILE_EOL](state, { file, eol }) { - Object.assign(file, { - eol, - }); - }, - [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) { - Object.assign(file, { - editorRow, - editorColumn, - }); - }, - [types.DISCARD_FILE_CHANGES](state, file) { - Object.assign(file, { - content: file.raw, - changed: false, - }); - }, - [types.CREATE_TMP_FILE](state, { file, parent }) { - parent.tree.push(file); - }, -}; diff --git a/app/assets/javascripts/ide/stores/mutations/project.js b/app/assets/javascripts/ide/stores/mutations/project.js deleted file mode 100644 index 2816562a919..00000000000 --- a/app/assets/javascripts/ide/stores/mutations/project.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as types from '../mutation_types'; - -export default { - [types.SET_CURRENT_PROJECT](state, currentProjectId) { - Object.assign(state, { - currentProjectId, - }); - }, - [types.SET_PROJECT](state, { projectPath, project }) { - // Add client side properties - Object.assign(project, { - tree: [], - branches: {}, - active: true, - }); - - Object.assign(state, { - projects: Object.assign({}, state.projects, { - [projectPath]: project, - }), - }); - }, -}; diff --git a/app/assets/javascripts/ide/stores/mutations/tree.js b/app/assets/javascripts/ide/stores/mutations/tree.js deleted file mode 100644 index 4fe438ab465..00000000000 --- a/app/assets/javascripts/ide/stores/mutations/tree.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as types from '../mutation_types'; - -export default { - [types.TOGGLE_TREE_OPEN](state, tree) { - Object.assign(tree, { - opened: !tree.opened, - }); - }, - [types.CREATE_TREE](state, { treePath }) { - Object.assign(state, { - trees: Object.assign({}, state.trees, { - [treePath]: { - tree: [], - }, - }), - }); - }, - [types.SET_DIRECTORY_DATA](state, { data, tree }) { - Object.assign(tree, { - tree: data, - }); - }, - [types.SET_PARENT_TREE_URL](state, url) { - Object.assign(state, { - parentTreeUrl: url, - }); - }, - [types.SET_LAST_COMMIT_URL](state, { tree = state, url }) { - Object.assign(tree, { - lastCommitPath: url, - }); - }, - [types.CREATE_TMP_TREE](state, { parent, tmpEntry }) { - parent.tree.push(tmpEntry); - }, -}; diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js deleted file mode 100644 index 61d12096946..00000000000 --- a/app/assets/javascripts/ide/stores/state.js +++ /dev/null @@ -1,23 +0,0 @@ -export default () => ({ - canCommit: false, - currentProjectId: '', - currentBranchId: '', - currentBlobView: 'repo-editor', - discardPopupOpen: false, - editMode: true, - endpoints: {}, - isRoot: false, - isInitialRoot: false, - lastCommitPath: '', - loading: false, - onTopOfBranch: false, - openFiles: [], - selectedFile: null, - path: '', - parentTreeUrl: '', - trees: {}, - projects: {}, - leftPanelCollapsed: false, - rightPanelCollapsed: true, - panelResizing: false, -}); diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js deleted file mode 100644 index d556404faa5..00000000000 --- a/app/assets/javascripts/ide/stores/utils.js +++ /dev/null @@ -1,177 +0,0 @@ -import _ from 'underscore'; - -export const dataStructure = () => ({ - id: '', - key: '', - type: '', - projectId: '', - branchId: '', - name: '', - url: '', - path: '', - level: 0, - tempFile: false, - icon: '', - tree: [], - loading: false, - opened: false, - active: false, - changed: false, - lastCommitPath: '', - lastCommit: { - id: '', - url: '', - message: '', - updatedAt: '', - author: '', - }, - tree_url: '', - blamePath: '', - commitsPath: '', - permalink: '', - rawPath: '', - binary: false, - html: '', - raw: '', - content: '', - parentTreeUrl: '', - renderError: false, - base64: false, - editorRow: 1, - editorColumn: 1, - fileLanguage: '', - eol: '', -}); - -export const decorateData = (entity) => { - const { - id, - projectId, - branchId, - type, - url, - name, - icon, - tree_url, - path, - renderError, - content = '', - tempFile = false, - active = false, - opened = false, - changed = false, - parentTreeUrl = '', - level = 0, - base64 = false, - } = entity; - - return { - ...dataStructure(), - id, - projectId, - branchId, - key: `${name}-${type}-${id}`, - type, - name, - url, - tree_url, - path, - level, - tempFile, - icon: `fa-${icon}`, - opened, - active, - parentTreeUrl, - changed, - renderError, - content, - base64, - }; -}; - -/* - Takes the multi-dimensional tree and returns a flattened array. - This allows for the table to recursively render the table rows but keeps the data - structure nested to make it easier to add new files/directories. -*/ -export const treeList = (state, treeId) => { - const baseTree = state.trees[treeId]; - if (baseTree) { - const mapTree = arr => (!arr.tree || !arr.tree.length ? - [] : _.map(arr.tree, a => [a, mapTree(a)])); - - return _.chain(baseTree.tree) - .map(arr => [arr, mapTree(arr)]) - .flatten() - .value(); - } - return []; -}; - -export const getTree = state => (namespace, projectId, branch) => state.trees[`${namespace}/${projectId}/${branch}`]; - -export const getTreeEntry = (store, treeId, path) => { - const fileList = treeList(store.state, treeId); - return fileList ? fileList.find(file => file.path === path) : null; -}; - -export const findEntry = (tree, type, name) => tree.find( - f => f.type === type && f.name === name, -); - -export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path); - -export const setPageTitle = (title) => { - document.title = title; -}; - -export const createTemp = ({ - projectId, branchId, name, path, type, level, changed, content, base64, url, -}) => { - const treePath = path ? `${path}/${name}` : name; - - return decorateData({ - id: new Date().getTime().toString(), - projectId, - branchId, - name, - type, - tempFile: true, - path: treePath, - icon: type === 'tree' ? 'folder' : 'file-text-o', - changed, - content, - parentTreeUrl: '', - level, - base64, - renderError: base64, - url, - }); -}; - -export const createOrMergeEntry = ({ tree, - projectId, - branchId, - entry, - type, - parentTreeUrl, - level }) => { - const found = findEntry(tree.tree || tree, type, entry.name); - - if (found) { - return Object.assign({}, found, { - id: entry.id, - url: entry.url, - tempFile: false, - }); - } - - return decorateData({ - ...entry, - projectId, - branchId, - type, - parentTreeUrl, - level, - }); -}; diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js index 35094f8e73b..523bd2adb93 100644 --- a/app/assets/javascripts/importer_status.js +++ b/app/assets/javascripts/importer_status.js @@ -1,11 +1,14 @@ -import { __ } from './locale'; +import _ from 'underscore'; +import { __, sprintf } from './locale'; import axios from './lib/utils/axios_utils'; import flash from './flash'; +import { convertPermissionToBoolean } from './lib/utils/common_utils'; class ImporterStatus { - constructor(jobsUrl, importUrl) { + constructor({ jobsUrl, importUrl, ciCdOnly }) { this.jobsUrl = jobsUrl; this.importUrl = importUrl; + this.ciCdOnly = ciCdOnly; this.initStatusPage(); this.setAutoUpdate(); } @@ -45,6 +48,7 @@ class ImporterStatus { repo_id: id, target_namespace: targetNamespace, new_name: newName, + ci_cd_only: this.ciCdOnly, }) .then(({ data }) => { const job = $(`tr#repo_${id}`); @@ -54,7 +58,13 @@ class ImporterStatus { $('table.import-jobs tbody').prepend(job); job.addClass('active'); - job.find('.import-actions').html('<i class="fa fa-spinner fa-spin" aria-label="importing"></i> started'); + const connectingVerb = this.ciCdOnly ? __('connecting') : __('importing'); + job.find('.import-actions').html(sprintf( + _.escape(__('%{loadingIcon} Started')), { + loadingIcon: `<i class="fa fa-spinner fa-spin" aria-label="${_.escape(connectingVerb)}"></i>`, + }, + false, + )); }) .catch(() => flash(__('An error occurred while importing project'))); } @@ -71,13 +81,16 @@ class ImporterStatus { switch (job.import_status) { case 'finished': jobItem.removeClass('active').addClass('success'); - statusField.html('<span><i class="fa fa-check"></i> done</span>'); + statusField.html(`<span><i class="fa fa-check"></i> ${__('Done')}</span>`); break; case 'scheduled': - statusField.html(`${spinner} scheduled`); + statusField.html(`${spinner} ${__('Scheduled')}`); break; case 'started': - statusField.html(`${spinner} started`); + statusField.html(`${spinner} ${__('Started')}`); + break; + case 'failed': + statusField.html(__('Failed')); break; default: statusField.html(job.import_status); @@ -98,7 +111,11 @@ function initImporterStatus() { if (importerStatus) { const data = importerStatus.dataset; - return new ImporterStatus(data.jobsImportPath, data.importPath); + return new ImporterStatus({ + jobsUrl: data.jobsImportPath, + importUrl: data.importPath, + ciCdOnly: convertPermissionToBoolean(data.ciCdOnly), + }); } } diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index 7151ac05a09..9b46bbf83da 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -21,7 +21,7 @@ export default class LabelsSelect { } $els.each(function(i, dropdown) { - var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer; + var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer; $dropdown = $(dropdown); $dropdownContainer = $dropdown.closest('.labels-filter'); $toggleText = $dropdown.find('.dropdown-toggle-text'); @@ -53,13 +53,6 @@ export default class LabelsSelect { .map(function () { return this.value; }).get(); - if (issueUpdateURL != null) { - issueURLSplit = issueUpdateURL.split('/'); - } - if (issueUpdateURL) { - labelHTMLTemplate = _.template('<% _.each(labels, function(label){ %> <a href="<%- ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name[]=<%- encodeURIComponent(label.title) %>"> <span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;"> <%- label.title %> </span> </a> <% }); %>'); - labelNoneHTMLTemplate = '<span class="no-value">None</span>'; - } const handleClick = options.handleClick; $sidebarLabelTooltip.tooltip(); @@ -91,14 +84,17 @@ export default class LabelsSelect { $loading.fadeOut(); $dropdown.trigger('loaded.gl.dropdown'); $selectbox.hide(); - data.issueURLSplit = issueURLSplit; + data.issueUpdateURL = issueUpdateURL; labelCount = 0; - if (data.labels.length) { - template = labelHTMLTemplate(data); + if (data.labels.length && issueUpdateURL) { + template = LabelsSelect.getLabelTemplate({ + labels: data.labels, + issueUpdateURL, + }); labelCount = data.labels.length; } else { - template = labelNoneHTMLTemplate; + template = '<span class="no-value">None</span>'; } $value.removeAttr('style').html(template); $sidebarCollapsedValue.text(labelCount); @@ -242,10 +238,16 @@ export default class LabelsSelect { filterable: true, selected: $dropdown.data('selected') || [], toggleLabel: function(selected, el) { + var $dropdownParent = $dropdown.parent(); + var $dropdownInputField = $dropdownParent.find('.dropdown-input-field'); var isSelected = el !== null ? el.hasClass('is-active') : false; var title = selected.title; var selectedLabels = this.selected; + if ($dropdownInputField.length && $dropdownInputField.val().length) { + $dropdownParent.find('.dropdown-input-clear').trigger('click'); + } + if (selected.id === 0) { this.selected = []; return 'No Label'; @@ -412,6 +414,26 @@ export default class LabelsSelect { this.bindEvents(); } + static getLabelTemplate(tplData) { + // We could use ES6 template string here + // and properly indent markup for readability + // but that also introduces unintended white-space + // so best approach is to use traditional way of + // concatenation + // see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays + const tpl = _.template([ + '<% _.each(labels, function(label){ %>', + '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">', + '<span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">', + '<%- label.title %>', + '</span>', + '</a>', + '<% }); %>', + ].join('')); + + return tpl(tplData); + } + bindEvents() { return $('body').on('change', '.selected_issue', this.onSelectCheckboxIssue); } diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 017f3b986fd..ed90db317df 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -1,3 +1,5 @@ +import jQuery from 'jquery'; +import Cookies from 'js-cookie'; import axios from './axios_utils'; import { getLocationHash } from './url_utility'; import { convertToCamelCase } from './text_utility'; @@ -22,13 +24,18 @@ export const getGroupSlug = () => { return null; }; -export const isInIssuePage = () => { - const page = getPagePath(1); - const action = getPagePath(2); +export const checkPageAndAction = (page, action) => { + const pagePath = getPagePath(1); + const actionPath = getPagePath(2); - return page === 'issues' && action === 'show'; + return pagePath === page && actionPath === action; }; +export const isInIssuePage = () => checkPageAndAction('issues', 'show'); +export const isInMRPage = () => checkPageAndAction('merge_requests', 'show'); +export const isInNoteablePage = () => isInIssuePage() || isInMRPage(); +export const hasVueMRDiscussionsCookie = () => Cookies.get('vue_mr_discussions'); + export const ajaxGet = url => axios.get(url, { params: { format: 'js' }, responseType: 'text', @@ -133,7 +140,11 @@ export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; // 3) Middle-click or Mouse Wheel Click (e.which is 2) export const isMetaClick = e => e.metaKey || e.ctrlKey || e.which === 2; -export const scrollToElement = ($el) => { +export const scrollToElement = (element) => { + let $el = element; + if (!(element instanceof jQuery)) { + $el = $(element); + } const top = $el.offset().top; const mrTabsHeight = $('.merge-request-tabs').height() || 0; const headerHeight = $('.navbar-gitlab').height() || 0; @@ -291,6 +302,14 @@ export const parseQueryStringIntoObject = (query = '') => { }, {}); }; +/** + * Converts object with key-value pairs + * into query-param string + * + * @param {Object} params + */ +export const objectToQueryString = (params = {}) => Object.keys(params).map(param => `${param}=${params[param]}`).join('&'); + export const buildUrlWithCurrentLocation = param => (param ? `${window.location.pathname}${param}` : window.location.pathname); /** diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index 94d03621bff..c0ce0786518 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -65,6 +65,20 @@ export function capitalizeFirstCharacter(text) { return `${text[0].toUpperCase()}${text.slice(1)}`; } +export function camelCase(str) { + return str.replace(/_+([a-z])/gi, ($1, $2) => $2.toUpperCase()); +} + +export function camelCaseKeys(obj = {}) { + return Object.keys(obj).reduce((acc, key) => { + const camelKey = camelCase(key); + return { + ...acc, + [camelKey]: obj[key], + }; + }, {}); +} + /** * Replaces all html tags from a string with the given replacement. * diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 659dc9eaa1f..53b01cca1d3 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -36,8 +36,11 @@ import initBreadcrumbs from './breadcrumb'; import initDispatcher from './dispatcher'; -// eslint-disable-next-line global-require, import/no-commonjs -if (process.env.NODE_ENV !== 'production') require('./test_utils/'); +// inject test utilities if necessary +if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) { + $.fx.off = true; + import(/* webpackMode: "eager" */ './test_utils/'); +} svg4everybody(); diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js index b4b3c15108d..66b258839ae 100644 --- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js +++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js @@ -12,7 +12,7 @@ import './components/inline_conflict_lines'; import './components/parallel_conflict_lines'; import syntaxHighlight from '../syntax_highlight'; -$(() => { +export default function initMergeConflicts() { const INTERACTIVE_RESOLVE_MODE = 'interactive'; const conflictsEl = document.querySelector('#conflicts'); const mergeConflictsStore = gl.mergeConflicts.mergeConflictsStore; @@ -91,4 +91,4 @@ $(() => { } } }); -}); +} diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 41971e92ec0..46789e324c2 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -241,6 +241,10 @@ export default class MergeRequestTabs { return newState; } + getCurrentAction() { + return this.currentAction; + } + loadCommits(source) { if (this.commitsLoaded) { return; diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js index 2841ecb558b..c259d5405bd 100644 --- a/app/assets/javascripts/milestone_select.js +++ b/app/assets/javascripts/milestone_select.js @@ -216,6 +216,9 @@ export default class MilestoneSelect { $value.html(milestoneLinkNoneTemplate); return $sidebarCollapsedValue.find('span').text('No'); } + }) + .catch(() => { + $loading.fadeOut(); }); } } diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 031badc7026..8ca94ef3e2a 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -7,34 +7,82 @@ import EmptyState from './empty_state.vue'; import MonitoringStore from '../stores/monitoring_store'; import eventHub from '../event_hub'; - import { convertPermissionToBoolean } from '../../lib/utils/common_utils'; export default { - components: { Graph, GraphGroup, EmptyState, }, - data() { - const metricsData = document.querySelector('#prometheus-graphs').dataset; - const store = new MonitoringStore(); + props: { + hasMetrics: { + type: Boolean, + required: false, + default: true, + }, + showLegend: { + type: Boolean, + required: false, + default: true, + }, + showPanels: { + type: Boolean, + required: false, + default: true, + }, + forceSmallGraph: { + type: Boolean, + required: false, + default: false, + }, + documentationPath: { + type: String, + required: true, + }, + settingsPath: { + type: String, + required: true, + }, + clustersPath: { + type: String, + required: true, + }, + tagsPath: { + type: String, + required: true, + }, + projectPath: { + type: String, + required: true, + }, + metricsEndpoint: { + type: String, + required: true, + }, + deploymentEndpoint: { + type: String, + required: false, + default: null, + }, + emptyGettingStartedSvgPath: { + type: String, + required: true, + }, + emptyLoadingSvgPath: { + type: String, + required: true, + }, + emptyUnableToConnectSvgPath: { + type: String, + required: true, + }, + }, + data() { return { - store, + store: new MonitoringStore(), state: 'gettingStarted', - hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics), - documentationPath: metricsData.documentationPath, - settingsPath: metricsData.settingsPath, - clustersPath: metricsData.clustersPath, - tagsPath: metricsData.tagsPath, - projectPath: metricsData.projectPath, - metricsEndpoint: metricsData.additionalMetrics, - deploymentEndpoint: metricsData.deploymentEndpoint, - emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath, - emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath, - emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath, showEmptyState: true, updateAspectRatio: false, updatedAspectRatios: 0, @@ -67,6 +115,7 @@ window.addEventListener('resize', this.resizeThrottled, false); } }, + methods: { getGraphsData() { this.state = 'loading'; @@ -115,6 +164,7 @@ v-for="(groupData, index) in store.groups" :key="index" :name="groupData.group" + :show-panels="showPanels" > <graph v-for="(graphData, index) in groupData.metrics" @@ -125,6 +175,8 @@ :deployment-data="store.deploymentData" :project-path="projectPath" :tags-path="tagsPath" + :show-legend="showLegend" + :small-graph="forceSmallGraph" /> </graph-group> </div> diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index ea5c24efaf9..9e67a6f2146 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -52,6 +52,16 @@ type: String, required: true, }, + showLegend: { + type: Boolean, + required: false, + default: true, + }, + smallGraph: { + type: Boolean, + required: false, + default: false, + }, }, data() { @@ -130,7 +140,7 @@ const breakpointSize = bp.getBreakpointSize(); const query = this.graphData.queries[0]; this.margin = measurements.large.margin; - if (breakpointSize === 'xs' || breakpointSize === 'sm') { + if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') { this.graphHeight = 300; this.margin = measurements.small.margin; this.measurements = measurements.small; @@ -182,7 +192,9 @@ this.graphHeightOffset, ); - if (this.timeSeries.length > 3) { + if (!this.showLegend) { + this.baseGraphHeight -= 50; + } else if (this.timeSeries.length > 3) { this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20; } @@ -255,6 +267,7 @@ :time-series="timeSeries" :unit-of-display="unitOfDisplay" :current-data-index="currentDataIndex" + :show-legend-group="showLegend" /> <svg class="graph-data" diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index c6e8d726ffc..3149397b61f 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -39,6 +39,11 @@ type: Number, required: true, }, + showLegendGroup: { + type: Boolean, + required: false, + default: true, + }, }, data() { return { @@ -57,8 +62,9 @@ }, rectTransform() { - const yCoordinate = ((this.graphHeight - this.margin.top) / 2) - + (this.yLabelWidth / 2) + 10 || 0; + const yCoordinate = (((this.graphHeight - this.margin.top) + + this.measurements.axisLabelLineOffset) / 2) + + (this.yLabelWidth / 2) || 0; return `translate(0, ${yCoordinate}) rotate(-90)`; }, @@ -166,39 +172,41 @@ > Time </text> - <g - class="legend-group" - v-for="(series, index) in timeSeries" - :key="index" - :transform="translateLegendGroup(index)" - > - <line - :stroke="series.lineColor" - :stroke-width="measurements.legends.height" - :stroke-dasharray="strokeDashArray(series.lineStyle)" - :x1="measurements.legends.offsetX" - :x2="measurements.legends.offsetX + measurements.legends.width" - :y1="graphHeight - measurements.legends.offsetY" - :y2="graphHeight - measurements.legends.offsetY" - /> - <text - v-if="timeSeries.length > 1" - class="legend-metric-title" - ref="legendTitleSvg" - x="38" - :y="graphHeight - 30" - > - {{ createSeriesString(index, series) }} - </text> - <text - v-else - class="legend-metric-title" - ref="legendTitleSvg" - x="38" - :y="graphHeight - 30" + <template v-if="showLegendGroup"> + <g + class="legend-group" + v-for="(series, index) in timeSeries" + :key="index" + :transform="translateLegendGroup(index)" > - {{ legendTitle }} {{ formatMetricUsage(series) }} - </text> - </g> + <line + :stroke="series.lineColor" + :stroke-width="measurements.legends.height" + :stroke-dasharray="strokeDashArray(series.lineStyle)" + :x1="measurements.legends.offsetX" + :x2="measurements.legends.offsetX + measurements.legends.width" + :y1="graphHeight - measurements.legends.offsetY" + :y2="graphHeight - measurements.legends.offsetY" + /> + <text + v-if="timeSeries.length > 1" + class="legend-metric-title" + ref="legendTitleSvg" + x="38" + :y="graphHeight - 30" + > + {{ createSeriesString(index, series) }} + </text> + <text + v-else + class="legend-metric-title" + ref="legendTitleSvg" + x="38" + :y="graphHeight - 30" + > + {{ legendTitle }} {{ formatMetricUsage(series) }} + </text> + </g> + </template> </g> </template> diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue index 079351a69af..f71cf614552 100644 --- a/app/assets/javascripts/monitoring/components/graph_group.vue +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -5,12 +5,20 @@ type: String, required: true, }, + showPanels: { + type: Boolean, + required: false, + default: true, + }, }, }; </script> <template> - <div class="panel panel-default prometheus-panel"> + <div + v-if="showPanels" + class="panel panel-default prometheus-panel" + > <div class="panel-heading"> <h4>{{ name }}</h4> </div> @@ -18,4 +26,10 @@ <slot></slot> </div> </div> + <div + v-else + class="prometheus-graph-group" + > + <slot></slot> + </div> </template> diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js index c3b0ef7e9ca..41270e015d4 100644 --- a/app/assets/javascripts/monitoring/monitoring_bundle.js +++ b/app/assets/javascripts/monitoring/monitoring_bundle.js @@ -1,7 +1,22 @@ import Vue from 'vue'; +import { convertPermissionToBoolean } from '~/lib/utils/common_utils'; import Dashboard from './components/dashboard.vue'; -export default () => new Vue({ - el: '#prometheus-graphs', - render: createElement => createElement(Dashboard), -}); +export default () => { + const el = document.getElementById('prometheus-graphs'); + + if (el && el.dataset) { + // eslint-disable-next-line no-new + new Vue({ + el, + render(createElement) { + return createElement(Dashboard, { + props: { + ...el.dataset, + hasMetrics: convertPermissionToBoolean(el.dataset.hasMetrics), + }, + }); + }, + }); + } +}; diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js index e230a06cd8c..6fcca36d2fa 100644 --- a/app/assets/javascripts/monitoring/services/monitoring_service.js +++ b/app/assets/javascripts/monitoring/services/monitoring_service.js @@ -40,6 +40,9 @@ export default class MonitoringService { } getDeploymentData() { + if (!this.deploymentEndpoint) { + return Promise.resolve([]); + } return backOffRequest(() => axios.get(this.deploymentEndpoint)) .then(resp => resp.data) .then((response) => { diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 4ce3dad440c..b5b8e3c255d 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -76,7 +76,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; [lineColor, areaColor] = pickColor(seriesCustomizationData.color); } else { - metricTag = timeSeriesMetricLabel || `series ${timeSeriesNumber + 1}`; + metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`; [lineColor, areaColor] = pickColor(); } diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js new file mode 100644 index 00000000000..972fdb2b791 --- /dev/null +++ b/app/assets/javascripts/mr_notes/index.js @@ -0,0 +1,41 @@ +import Vue from 'vue'; +import notesApp from '../notes/components/notes_app.vue'; +import discussionCounter from '../notes/components/discussion_counter.vue'; +import store from '../notes/stores'; + +export default function initMrNotes() { + new Vue({ // eslint-disable-line + el: '#js-vue-mr-discussions', + components: { + notesApp, + }, + data() { + const notesDataset = document.getElementById('js-vue-mr-discussions').dataset; + return { + noteableData: JSON.parse(notesDataset.noteableData), + currentUserData: JSON.parse(notesDataset.currentUserData), + notesData: JSON.parse(notesDataset.notesData), + }; + }, + render(createElement) { + return createElement('notes-app', { + props: { + noteableData: this.noteableData, + notesData: this.notesData, + userData: this.currentUserData, + }, + }); + }, + }); + + new Vue({ // eslint-disable-line + el: '#js-vue-discussion-counter', + components: { + discussionCounter, + }, + store, + render(createElement) { + return createElement('discussion-counter'); + }, + }); +} diff --git a/app/assets/javascripts/network/network_bundle.js b/app/assets/javascripts/network/network_bundle.js deleted file mode 100644 index 129f1724cb8..00000000000 --- a/app/assets/javascripts/network/network_bundle.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, camelcase, comma-dangle, consistent-return, max-len */ - -import ShortcutsNetwork from '../shortcuts_network'; -import Network from './network'; - -$(function() { - if (!$(".network-graph").length) return; - - var network_graph; - network_graph = new Network({ - url: $(".network-graph").attr('data-url'), - commit_url: $(".network-graph").attr('data-commit-url'), - ref: $(".network-graph").attr('data-ref'), - commit_id: $(".network-graph").attr('data-commit-id') - }); - return new ShortcutsNetwork(network_graph.branch_graph); -}); diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index f17b432cffd..c640003d958 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -24,7 +24,7 @@ import GLForm from './gl_form'; import loadAwardsHandler from './awards_handler'; import Autosave from './autosave'; import TaskList from './task_list'; -import { isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils'; +import { isInViewport, getPagePath, scrollToElement, isMetaKey, hasVueMRDiscussionsCookie } from './lib/utils/common_utils'; import imageDiffHelper from './image_diff/helpers/index'; import { localTimeAgo } from './lib/utils/datetime_utility'; @@ -44,6 +44,10 @@ export default class Notes { } } + static getInstance() { + return this.instance; + } + constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) { this.updateTargetButtons = this.updateTargetButtons.bind(this); this.updateComment = this.updateComment.bind(this); @@ -102,67 +106,77 @@ export default class Notes { } addBinding() { + this.$wrapperEl = hasVueMRDiscussionsCookie() ? $(document).find('.diffs') : $(document); + // Edit note link - $(document).on('click', '.js-note-edit', this.showEditForm.bind(this)); - $(document).on('click', '.note-edit-cancel', this.cancelEdit); + this.$wrapperEl.on('click', '.js-note-edit', this.showEditForm.bind(this)); + this.$wrapperEl.on('click', '.note-edit-cancel', this.cancelEdit); // Reopen and close actions for Issue/MR combined with note form submit - $(document).on('click', '.js-comment-submit-button', this.postComment); - $(document).on('click', '.js-comment-save-button', this.updateComment); - $(document).on('keyup input', '.js-note-text', this.updateTargetButtons); + this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment); + this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment); + this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons); // resolve a discussion - $(document).on('click', '.js-comment-resolve-button', this.postComment); + this.$wrapperEl.on('click', '.js-comment-resolve-button', this.postComment); // remove a note (in general) - $(document).on('click', '.js-note-delete', this.removeNote); + this.$wrapperEl.on('click', '.js-note-delete', this.removeNote); // delete note attachment - $(document).on('click', '.js-note-attachment-delete', this.removeAttachment); + this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment); // reset main target form when clicking discard - $(document).on('click', '.js-note-discard', this.resetMainTargetForm); + this.$wrapperEl.on('click', '.js-note-discard', this.resetMainTargetForm); // update the file name when an attachment is selected - $(document).on('change', '.js-note-attachment-input', this.updateFormAttachment); + this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment); // reply to diff/discussion notes - $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote); + this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote); // add diff note - $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote); + this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote); // add diff note for images - $(document).on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote); + this.$wrapperEl.on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote); // hide diff note form - $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm); + this.$wrapperEl.on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm); // toggle commit list - $(document).on('click', '.system-note-commit-list-toggler', this.toggleCommitList); + this.$wrapperEl.on('click', '.system-note-commit-list-toggler', this.toggleCommitList); // fetch notes when tab becomes visible - $(document).on('visibilitychange', this.visibilityChange); + this.$wrapperEl.on('visibilitychange', this.visibilityChange); // when issue status changes, we need to refresh data - $(document).on('issuable:change', this.refresh); + this.$wrapperEl.on('issuable:change', this.refresh); // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs. - $(document).on('ajax:success', '.js-main-target-form', this.addNote); - $(document).on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote); - $(document).on('ajax:success', '.js-main-target-form', this.resetMainTargetForm); - $(document).on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton); + this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.addNote); + this.$wrapperEl.on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote); + this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.resetMainTargetForm); + this.$wrapperEl.on('ajax:complete', '.js-main-target-form', this.reenableTargetFormSubmitButton); // when a key is clicked on the notes - $(document).on('keydown', '.js-note-text', this.keydownNoteText); + this.$wrapperEl.on('keydown', '.js-note-text', this.keydownNoteText); // When the URL fragment/hash has changed, `#note_xxx` - return $(window).on('hashchange', this.onHashChange); + $(window).on('hashchange', this.onHashChange); + this.boundGetContent = this.getContent.bind(this); + document.addEventListener('refreshLegacyNotes', this.boundGetContent); + this.eventsBound = true; } cleanBinding() { - $(document).off('click', '.js-note-edit'); - $(document).off('click', '.note-edit-cancel'); - $(document).off('click', '.js-note-delete'); - $(document).off('click', '.js-note-attachment-delete'); - $(document).off('click', '.js-discussion-reply-button'); - $(document).off('click', '.js-add-diff-note-button'); - $(document).off('click', '.js-add-image-diff-note-button'); - $(document).off('visibilitychange'); - $(document).off('keyup input', '.js-note-text'); - $(document).off('click', '.js-note-target-reopen'); - $(document).off('click', '.js-note-target-close'); - $(document).off('click', '.js-note-discard'); - $(document).off('keydown', '.js-note-text'); - $(document).off('click', '.js-comment-resolve-button'); - $(document).off('click', '.system-note-commit-list-toggler'); - $(document).off('ajax:success', '.js-main-target-form'); - $(document).off('ajax:success', '.js-discussion-note-form'); - $(document).off('ajax:complete', '.js-main-target-form'); + if (!this.eventsBound) { + return; + } + + this.$wrapperEl.off('click', '.js-note-edit'); + this.$wrapperEl.off('click', '.note-edit-cancel'); + this.$wrapperEl.off('click', '.js-note-delete'); + this.$wrapperEl.off('click', '.js-note-attachment-delete'); + this.$wrapperEl.off('click', '.js-discussion-reply-button'); + this.$wrapperEl.off('click', '.js-add-diff-note-button'); + this.$wrapperEl.off('click', '.js-add-image-diff-note-button'); + this.$wrapperEl.off('visibilitychange'); + this.$wrapperEl.off('keyup input', '.js-note-text'); + this.$wrapperEl.off('click', '.js-note-target-reopen'); + this.$wrapperEl.off('click', '.js-note-target-close'); + this.$wrapperEl.off('click', '.js-note-discard'); + this.$wrapperEl.off('keydown', '.js-note-text'); + this.$wrapperEl.off('click', '.js-comment-resolve-button'); + this.$wrapperEl.off('click', '.system-note-commit-list-toggler'); + this.$wrapperEl.off('ajax:success', '.js-main-target-form'); + this.$wrapperEl.off('ajax:success', '.js-discussion-note-form'); + this.$wrapperEl.off('ajax:complete', '.js-main-target-form'); + document.removeEventListener('refreshLegacyNotes', this.boundGetContent); $(window).off('hashchange', this.onHashChange); } @@ -252,8 +266,10 @@ export default class Notes { if (this.refreshing) { return; } + this.refreshing = true; - axios.get(this.notes_url, { + + axios.get(`${this.notes_url}?html=true`, { headers: { 'X-Last-Fetched-At': this.last_fetched_at, }, @@ -350,7 +366,7 @@ export default class Notes { } if (!noteEntity.valid) { - if (noteEntity.errors.commands_only) { + if (noteEntity.errors && noteEntity.errors.commands_only) { if (noteEntity.commands_changes && Object.keys(noteEntity.commands_changes).length > 0) { $notesList.find('.system-note.being-posted').remove(); @@ -363,6 +379,10 @@ export default class Notes { const $note = $notesList.find(`#note_${noteEntity.id}`); if (Notes.isNewNote(noteEntity, this.note_ids)) { + if (hasVueMRDiscussionsCookie()) { + return; + } + this.note_ids.push(noteEntity.id); if ($notesList.length) { @@ -399,6 +419,8 @@ export default class Notes { this.setupNewNote($updatedNote); } } + + Notes.refreshVueNotes(); } isParallelView() { @@ -406,12 +428,11 @@ export default class Notes { } /** - * Render note in discussion area. - * - * Note: for rendering inline notes use renderDiscussionNote + * Render note in discussion area. To render inline notes use renderDiscussionNote. */ renderDiscussionNote(noteEntity, $form) { var discussionContainer, form, row, lineType, diffAvatarContainer; + if (!Notes.isNewNote(noteEntity, this.note_ids)) { return; } @@ -452,7 +473,9 @@ export default class Notes { // Init discussion on 'Discussion' page if it is merge request page const page = $('body').attr('data-page'); if ((page && page.indexOf('projects:merge_request') !== -1) || !noteEntity.diff_discussion_html) { - Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list')); + if (!hasVueMRDiscussionsCookie()) { + Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list')); + } } } else { // append new note to all matching discussions @@ -634,7 +657,6 @@ export default class Notes { var $noteEntityEl, $note_li; // Convert returned HTML to a jQuery object so we can modify it further $noteEntityEl = $(noteEntity.html); - $noteEntityEl.addClass('fade-in-full'); this.revertNoteEditForm($targetNote); $noteEntityEl.renderGFM(); // Find the note's `li` element by ID and replace it with the updated HTML @@ -730,7 +752,7 @@ export default class Notes { var selector = this.getEditFormSelector($target); var $editForm = $(selector); - $editForm.insertBefore('.notes-form'); + $editForm.insertBefore('.diffs'); $editForm.find('.js-comment-save-button').enable(); $editForm.find('.js-finish-edit-warning').hide(); } @@ -746,7 +768,8 @@ export default class Notes { } removeNoteEditForm($note) { - var form = $note.find('.current-note-edit-form'); + var form = $note.find('.diffs .current-note-edit-form'); + $note.removeClass('is-editing'); form.removeClass('current-note-edit-form'); form.find('.js-finish-edit-warning').hide(); @@ -818,6 +841,7 @@ export default class Notes { }; })(this)); + Notes.refreshVueNotes(); Notes.checkMergeRequestStatus(); return this.updateNotesCount(-1); } @@ -1157,7 +1181,7 @@ export default class Notes { this.glForm = new GLForm($editForm.find('form'), this.enableGFM); $editForm.find('form') - .attr('action', postUrl) + .attr('action', `${postUrl}?html=true`) .attr('data-remote', 'true'); $editForm.find('.js-form-target-id').val(targetId); $editForm.find('.js-form-target-type').val(targetType); @@ -1280,6 +1304,10 @@ export default class Notes { return $updatedNote; } + static refreshVueNotes() { + document.dispatchEvent(new CustomEvent('refreshVueNotes')); + } + /** * Get data from Form attributes to use for saving/submitting comment. */ @@ -1481,7 +1509,7 @@ export default class Notes { /* eslint-disable promise/catch-or-return */ // Make request to submit comment on server - axios.post(formAction, formData) + axios.post(`${formAction}?html=true`, formData) .then((res) => { const note = res.data; @@ -1546,6 +1574,8 @@ export default class Notes { if ($notesContainer.length) { $notesContainer.append('<div class="flash-container" style="display: none;"></div>'); } + + Notes.refreshVueNotes(); } else if (isMainForm) { // Check if this was main thread comment // Show final note element on UI and perform form and action buttons cleanup this.addNote($form, note); @@ -1627,7 +1657,7 @@ export default class Notes { /* eslint-disable promise/catch-or-return */ // Make request to update comment on server - axios.post(formAction, formData) + axios.post(`${formAction}?html=true`, formData) .then(({ data }) => { // Submission successful! render final note element this.updateNote(data, $editingNote); diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index df796050e0d..b85c1a6ad72 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -2,10 +2,11 @@ import { mapActions, mapGetters } from 'vuex'; import _ from 'underscore'; import Autosize from 'autosize'; - import { __ } from '~/locale'; + import { __, sprintf } from '~/locale'; import Flash from '../../flash'; import Autosave from '../../autosave'; import TaskList from '../../task_list'; + import { capitalizeFirstCharacter, convertToCamelCase } from '../../lib/utils/text_utility'; import * as constants from '../constants'; import eventHub from '../event_hub'; import issueWarning from '../../vue_shared/components/issue/issue_warning.vue'; @@ -29,6 +30,12 @@ mixins: [ issuableStateMixin, ], + props: { + noteableType: { + type: String, + required: true, + }, + }, data() { return { note: '', @@ -43,37 +50,51 @@ 'getUserData', 'getNoteableData', 'getNotesData', - 'issueState', + 'openState', ]), + noteableDisplayName() { + return this.noteableType.replace(/_/g, ' '); + }, isLoggedIn() { return this.getUserData.id; }, commentButtonTitle() { return this.noteType === constants.COMMENT ? 'Comment' : 'Start discussion'; }, - isIssueOpen() { - return this.issueState === constants.OPENED || this.issueState === constants.REOPENED; + isOpen() { + return this.openState === constants.OPENED || this.openState === constants.REOPENED; }, canCreateNote() { return this.getNoteableData.current_user.can_create_note; }, issueActionButtonTitle() { - if (this.note.length) { - const actionText = this.isIssueOpen ? 'close' : 'reopen'; + const openOrClose = this.isOpen ? 'close' : 'reopen'; - return this.noteType === constants.COMMENT ? - `Comment & ${actionText} issue` : - `Start discussion & ${actionText} issue`; + if (this.note.length) { + return sprintf( + __('%{actionText} & %{openOrClose} %{noteable}'), + { + actionText: this.commentButtonTitle, + openOrClose, + noteable: this.noteableDisplayName, + }, + ); } - return this.isIssueOpen ? 'Close issue' : 'Reopen issue'; + return sprintf( + __('%{openOrClose} %{noteable}'), + { + openOrClose: capitalizeFirstCharacter(openOrClose), + noteable: this.noteableDisplayName, + }, + ); }, actionButtonClassNames() { return { - 'btn-reopen': !this.isIssueOpen, - 'btn-close': this.isIssueOpen, - 'js-note-target-close': this.isIssueOpen, - 'js-note-target-reopen': !this.isIssueOpen, + 'btn-reopen': !this.isOpen, + 'btn-close': this.isOpen, + 'js-note-target-close': this.isOpen, + 'js-note-target-reopen': !this.isOpen, }; }, markdownDocsPath() { @@ -138,7 +159,7 @@ flashContainer: this.$el, data: { note: { - noteable_type: constants.NOTEABLE_TYPE, + noteable_type: this.noteableType, noteable_id: this.getNoteableData.id, note: this.note, }, @@ -193,19 +214,29 @@ Please check your network connection and try again.`; this.isSubmitting = false; }, toggleIssueState() { - if (this.isIssueOpen) { + if (this.isOpen) { this.closeIssue() .then(() => this.enableButton()) .catch(() => { this.enableButton(); - Flash(__('Something went wrong while closing the issue. Please try again later')); + Flash( + sprintf( + __('Something went wrong while closing the %{issuable}. Please try again later'), + { issuable: this.noteableDisplayName }, + ), + ); }); } else { this.reopenIssue() .then(() => this.enableButton()) .catch(() => { this.enableButton(); - Flash(__('Something went wrong while reopening the issue. Please try again later')); + Flash( + sprintf( + __('Something went wrong while reopening the %{issuable}. Please try again later'), + { issuable: this.noteableDisplayName }, + ), + ); }); } }, @@ -221,7 +252,6 @@ Please check your network connection and try again.`; this.$refs.markdownField.previewMarkdown = false; } - // reset autostave this.autosave.reset(); }, setNoteType(type) { @@ -240,10 +270,11 @@ Please check your network connection and try again.`; }, initAutoSave() { if (this.isLoggedIn) { + const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType)); + this.autosave = new Autosave( $(this.$refs.textarea), - ['Note', 'Issue', this.getNoteableData.id], - 'issue', + ['Note', noteableType, this.getNoteableData.id], ); } }, @@ -331,7 +362,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" :disabled="isSubmitButtonDisabled" class="btn btn-create comment-btn js-comment-button js-comment-submit-button" type="submit"> - {{ commentButtonTitle }} + {{ __(commentButtonTitle) }} </button> <button :disabled="isSubmitButtonDisabled" @@ -359,7 +390,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" <div class="description"> <strong>Comment</strong> <p> - Add a general comment to this issue. + Add a general comment to this {{ noteableDisplayName }}. </p> </div> </button> diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue new file mode 100644 index 00000000000..3bcde17f07c --- /dev/null +++ b/app/assets/javascripts/notes/components/diff_file_header.vue @@ -0,0 +1,94 @@ +<script> + import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; + import Icon from '~/vue_shared/components/icon.vue'; + + export default { + components: { + ClipboardButton, + Icon, + }, + props: { + diffFile: { + type: Object, + required: true, + }, + }, + computed: { + titleTag() { + return this.diffFile.discussionPath ? 'a' : 'span'; + }, + }, + }; +</script> + +<template> + <div class="file-header-content"> + <div + v-if="diffFile.submodule" + > + <span> + <icon name="archive" /> + <strong + v-html="diffFile.submoduleLink" + class="file-title-name" + ></strong> + <clipboard-button + title="Copy file path to clipboard" + :text="diffFile.submoduleLink" + css-class="btn-default btn-transparent btn-clipboard" + /> + </span> + </div> + <template v-else> + <component + ref="titleWrapper" + :is="titleTag" + :href="diffFile.discussionPath" + > + <span v-html="diffFile.blobIcon"></span> + <span v-if="diffFile.renamedFile"> + <strong + class="file-title-name has-tooltip" + :title="diffFile.oldPath" + data-container="body" + > + {{ diffFile.oldPath }} + </strong> + → + <strong + class="file-title-name has-tooltip" + :title="diffFile.newPath" + data-container="body" + > + {{ diffFile.newPath }} + </strong> + </span> + + <strong + v-else + class="file-title-name has-tooltip" + :title="diffFile.oldPath" + data-container="body" + > + {{ diffFile.filePath }} + <span v-if="diffFile.deletedFile"> + deleted + </span> + </strong> + </component> + + <clipboard-button + title="Copy file path to clipboard" + :text="diffFile.filePath" + css-class="btn-default btn-transparent btn-clipboard" + /> + + <small + v-if="diffFile.modeChanged" + ref="fileMode" + > + {{ diffFile.aMode }} → {{ diffFile.bMode }} + </small> + </template> + </div> +</template> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue new file mode 100644 index 00000000000..75a32709ad5 --- /dev/null +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -0,0 +1,96 @@ +<script> + import syntaxHighlight from '~/syntax_highlight'; + import imageDiffHelper from '~/image_diff/helpers/index'; + import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; + import DiffFileHeader from './diff_file_header.vue'; + + export default { + components: { + DiffFileHeader, + }, + props: { + discussion: { + type: Object, + required: true, + }, + }, + computed: { + isImageDiff() { + return !this.diffFile.text; + }, + diffFileClass() { + const { text } = this.diffFile; + return text ? 'text-file' : 'js-image-file'; + }, + diffRows() { + return $(this.discussion.truncatedDiffLines); + }, + diffFile() { + return convertObjectPropsToCamelCase(this.discussion.diffFile); + }, + imageDiffHtml() { + return this.discussion.imageDiffHtml; + }, + }, + mounted() { + if (this.isImageDiff) { + const canCreateNote = false; + const renderCommentBadge = true; + imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge); + } else { + const fileHolder = $(this.$refs.fileHolder); + this.$nextTick(() => { + syntaxHighlight(fileHolder); + }); + } + }, + methods: { + rowTag(html) { + return html.outerHTML ? 'tr' : 'template'; + }, + }, + }; +</script> + +<template> + <div + ref="fileHolder" + class="diff-file file-holder" + :class="diffFileClass" + > + <div class="js-file-title file-title file-title-flex-parent"> + <diff-file-header + :diff-file="diffFile" + /> + </div> + <div + v-if="diffFile.text" + class="diff-content code js-syntax-highlight" + > + <table> + <component + :is="rowTag(html)" + :class="html.className" + v-for="(html, index) in diffRows" + v-html="html.outerHTML" + :key="index" + /> + <tr class="notes_holder"> + <td + class="notes_line" + colspan="2" + ></td> + <td class="notes_content"> + <slot></slot> + </td> + </tr> + </table> + </div> + <div + v-else + > + <div v-html="imageDiffHtml"></div> + <slot></slot> + </div> + </div> +</template> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue new file mode 100644 index 00000000000..0158f58b569 --- /dev/null +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -0,0 +1,119 @@ +<script> + import { mapGetters } from 'vuex'; + import resolveSvg from 'icons/_icon_resolve_discussion.svg'; + import resolvedSvg from 'icons/_icon_status_success_solid.svg'; + import mrIssueSvg from 'icons/_icon_mr_issue.svg'; + import nextDiscussionSvg from 'icons/_next_discussion.svg'; + import { pluralize } from '../../lib/utils/text_utility'; + import { scrollToElement } from '../../lib/utils/common_utils'; + import tooltip from '../../vue_shared/directives/tooltip'; + + export default { + directives: { + tooltip, + }, + computed: { + ...mapGetters([ + 'getUserData', + 'getNoteableData', + 'discussionCount', + 'unresolvedDiscussions', + 'resolvedDiscussionCount', + ]), + isLoggedIn() { + return this.getUserData.id; + }, + hasNextButton() { + return this.isLoggedIn && !this.allResolved; + }, + countText() { + return pluralize('discussion', this.discussionCount); + }, + allResolved() { + return this.resolvedDiscussionCount === this.discussionCount; + }, + resolveAllDiscussionsIssuePath() { + return this.getNoteableData.create_issue_to_resolve_discussions_path; + }, + firstUnresolvedDiscussionId() { + const item = this.unresolvedDiscussions[0] || {}; + + return item.id; + }, + }, + created() { + this.resolveSvg = resolveSvg; + this.resolvedSvg = resolvedSvg; + this.mrIssueSvg = mrIssueSvg; + this.nextDiscussionSvg = nextDiscussionSvg; + }, + methods: { + jumpToFirstDiscussion() { + const el = document.querySelector(`[data-discussion-id="${this.firstUnresolvedDiscussionId}"]`); + const activeTab = window.mrTabs.currentAction; + + if (activeTab === 'commits' || activeTab === 'pipelines') { + window.mrTabs.activateTab('show'); + } + + if (el) { + scrollToElement(el); + } + }, + }, + }; +</script> + +<template> + <div class="line-resolve-all-container prepend-top-10"> + <div> + <div + v-if="discussionCount > 0" + :class="{ 'has-next-btn': hasNextButton }" + class="line-resolve-all"> + <span + :class="{ 'is-active': allResolved }" + class="line-resolve-btn is-disabled" + type="button"> + <span + v-if="allResolved" + v-html="resolvedSvg" + ></span> + <span + v-else + v-html="resolveSvg" + ></span> + </span> + <span class=".line-resolve-text"> + {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved + </span> + </div> + <div + v-if="resolveAllDiscussionsIssuePath && !allResolved" + class="btn-group" + role="group"> + <a + :href="resolveAllDiscussionsIssuePath" + v-tooltip + title="Resolve all discussions in new issue" + data-container="body" + class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"> + <span v-html="mrIssueSvg"></span> + </a> + </div> + <div + v-if="isLoggedIn && !allResolved" + class="btn-group" + role="group"> + <button + @click="jumpToFirstDiscussion" + v-tooltip + title="Jump to first unresolved discussion" + data-container="body" + class="btn btn-default discussion-next-btn"> + <span v-html="nextDiscussionSvg"></span> + </button> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 46ffb60aa60..c26aa6fa15d 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -4,6 +4,8 @@ import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmiley from 'icons/_emoji_smiley.svg'; import editSvg from 'icons/_icon_pencil.svg'; + import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg'; + import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg'; import ellipsisSvg from 'icons/_ellipsis_v.svg'; import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; @@ -42,6 +44,26 @@ type: Boolean, required: true, }, + resolvable: { + type: Boolean, + required: false, + default: false, + }, + isResolved: { + type: Boolean, + required: false, + default: false, + }, + isResolving: { + type: Boolean, + required: false, + default: false, + }, + resolvedBy: { + type: Object, + required: false, + default: () => ({}), + }, canReportAsAbuse: { type: Boolean, required: true, @@ -63,6 +85,15 @@ currentUserId() { return this.getUserDataByProp('id'); }, + resolveButtonTitle() { + let title = 'Mark as resolved'; + + if (this.resolvedBy) { + title = `Resolved by ${this.resolvedBy.name}`; + } + + return title; + }, }, created() { this.emojiSmiling = emojiSmiling; @@ -70,6 +101,8 @@ this.emojiSmiley = emojiSmiley; this.editSvg = editSvg; this.ellipsisSvg = ellipsisSvg; + this.resolveDiscussionSvg = resolveDiscussionSvg; + this.resolvedDiscussionSvg = resolvedDiscussionSvg; }, methods: { onEdit() { @@ -78,6 +111,9 @@ onDelete() { this.$emit('handleDelete'); }, + onResolve() { + this.$emit('handleResolve'); + }, }, }; </script> @@ -90,6 +126,31 @@ {{ accessLevel }} </span> <div + v-if="resolvable" + class="note-actions-item"> + <button + v-tooltip + @click="onResolve" + :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }" + :title="resolveButtonTitle" + :aria-label="resolveButtonTitle" + type="button" + class="line-resolve-btn note-action-button"> + <template v-if="!isResolving"> + <div + v-if="isResolved" + v-html="resolvedDiscussionSvg"></div> + <div + v-else + v-html="resolveDiscussionSvg"></div> + </template> + <loading-icon + v-else + :inline="true" + /> + </button> + </div> + <div v-if="canAddAwardEmoji" class="note-actions-item"> <a diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 2d7cd30115d..ca12df9db64 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -41,7 +41,7 @@ this.initTaskList(); if (this.isEditing) { - this.initAutoSave(); + this.initAutoSave(this.note.noteable_type); } }, updated() { @@ -50,7 +50,7 @@ if (this.isEditing) { if (!this.autosave) { - this.initAutoSave(); + this.initAutoSave(this.note.noteable_type); } else { this.setAutoSave(); } diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index d382a9bb642..1a13fdbeb7c 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -1,9 +1,10 @@ <script> - import { mapGetters } from 'vuex'; + import { mapGetters, mapActions } from 'vuex'; import eventHub from '../event_hub'; import issueWarning from '../../vue_shared/components/issue/issue_warning.vue'; import markdownField from '../../vue_shared/components/markdown/field.vue'; import issuableStateMixin from '../mixins/issuable_state'; + import resolvable from '../mixins/resolvable'; export default { name: 'IssueNoteForm', @@ -13,6 +14,7 @@ }, mixins: [ issuableStateMixin, + resolvable, ], props: { noteBody: { @@ -30,7 +32,7 @@ required: false, default: 'Save comment', }, - discussion: { + note: { type: Object, required: false, default: () => ({}), @@ -42,9 +44,11 @@ }, data() { return { - note: this.noteBody, + updatedNoteBody: this.noteBody, conflictWhileEditing: false, isSubmitting: false, + isResolving: false, + resolveAsThread: true, }; }, computed: { @@ -71,13 +75,13 @@ return this.getUserDataByProp('id'); }, isDisabled() { - return !this.note.length || this.isSubmitting; + return !this.updatedNoteBody.length || this.isSubmitting; }, }, watch: { noteBody() { - if (this.note === this.noteBody) { - this.note = this.noteBody; + if (this.updatedNoteBody === this.noteBody) { + this.updatedNoteBody = this.noteBody; } else { this.conflictWhileEditing = true; } @@ -87,16 +91,24 @@ this.$refs.textarea.focus(); }, methods: { - handleUpdate() { + ...mapActions([ + 'toggleResolveNote', + ]), + handleUpdate(shouldResolve) { + const beforeSubmitDiscussionState = this.discussionResolved; this.isSubmitting = true; - this.$emit('handleFormUpdate', this.note, this.$refs.editNoteForm, () => { + this.$emit('handleFormUpdate', this.updatedNoteBody, this.$refs.editNoteForm, () => { this.isSubmitting = false; + + if (shouldResolve) { + this.resolveHandler(beforeSubmitDiscussionState); + } }); }, editMyLastNote() { - if (this.note === '') { - const lastNoteInDiscussion = this.getDiscussionLastNote(this.discussion); + if (this.updatedNoteBody === '') { + const lastNoteInDiscussion = this.getDiscussionLastNote(this.updatedNoteBody); if (lastNoteInDiscussion) { eventHub.$emit('enterEditMode', { @@ -107,7 +119,7 @@ }, cancelHandler(shouldConfirm = false) { // Sends information about confirm message and if the textarea has changed - this.$emit('cancelFormEdition', shouldConfirm, this.noteBody !== this.note); + this.$emit('cancelFormEdition', shouldConfirm, this.noteBody !== this.updatedNoteBody); }, }, }; @@ -150,7 +162,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea" :data-supports-quick-actions="!isEditing" aria-label="Description" - v-model="note" + v-model="updatedNoteBody" ref="textarea" slot="textarea" placeholder="Write a comment or drag your files here..." @@ -169,6 +181,13 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea" {{ saveButtonTitle }} </button> <button + v-if="note.resolvable" + @click.prevent="handleUpdate(true)" + class="btn btn-nr btn-default append-right-10 js-comment-resolve-button" + > + {{ resolveButtonTitle }} + </button> + <button @click="cancelHandler()" class="btn btn-cancel note-edit-cancel" type="button"> diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 5b255d4a710..4743d95b951 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -34,15 +34,15 @@ required: false, default: false, }, - }, - data() { - return { - isExpanded: true, - }; + expanded: { + type: Boolean, + required: false, + default: true, + }, }, computed: { toggleChevronClass() { - return this.isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'; + return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down'; }, noteTimestampLink() { return `#note_${this.noteId}`; @@ -53,7 +53,6 @@ 'setTargetNoteHash', ]), handleToggle() { - this.isExpanded = !this.isExpanded; this.$emit('toggleHandler'); }, updateTargetNoteHash() { diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 98a06c5fc71..76bb53eaf2f 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -1,5 +1,7 @@ <script> import { mapActions, mapGetters } from 'vuex'; + import resolveDiscussionsSvg from 'icons/_icon_mr_issue.svg'; + import nextDiscussionsSvg from 'icons/_next_discussion.svg'; import Flash from '../../flash'; import { SYSTEM_NOTE } from '../constants'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; @@ -8,13 +10,19 @@ import noteSignedOutWidget from './note_signed_out_widget.vue'; import noteEditedText from './note_edited_text.vue'; import noteForm from './note_form.vue'; + import diffWithNote from './diff_with_note.vue'; import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import autosave from '../mixins/autosave'; + import noteable from '../mixins/noteable'; + import resolvable from '../mixins/resolvable'; + import tooltip from '../../vue_shared/directives/tooltip'; + import { scrollToElement } from '../../lib/utils/common_utils'; export default { components: { noteableNote, + diffWithNote, userAvatarLink, noteHeader, noteSignedOutWidget, @@ -23,8 +31,13 @@ placeholderNote, placeholderSystemNote, }, + directives: { + tooltip, + }, mixins: [ autosave, + noteable, + resolvable, ], props: { note: { @@ -35,14 +48,25 @@ data() { return { isReplying: false, + isResolving: false, + resolveAsThread: true, }; }, computed: { ...mapGetters([ 'getNoteableData', + 'discussionCount', + 'resolvedDiscussionCount', + 'unresolvedDiscussions', ]), discussion() { - return this.note.notes[0]; + return { + ...this.note.notes[0], + truncatedDiffLines: this.note.truncated_diff_lines, + diffFile: this.note.diff_file, + diffDiscussion: this.note.diff_discussion, + imageDiffHtml: this.note.image_diff_html, + }; }, author() { return this.discussion.author; @@ -71,26 +95,40 @@ return null; }, + hasUnresolvedDiscussion() { + return this.unresolvedDiscussions.length > 0; + }, + wrapperComponent() { + return (this.discussion.diffDiscussion && this.discussion.diffFile) ? diffWithNote : 'div'; + }, + wrapperClass() { + return this.isDiffDiscussion ? '' : 'panel panel-default'; + }, }, mounted() { if (this.isReplying) { - this.initAutoSave(); + this.initAutoSave(this.discussion.noteable_type); } }, updated() { if (this.isReplying) { if (!this.autosave) { - this.initAutoSave(); + this.initAutoSave(this.discussion.noteable_type); } else { this.setAutoSave(); } } }, + created() { + this.resolveDiscussionsSvg = resolveDiscussionsSvg; + this.nextDiscussionsSvg = nextDiscussionsSvg; + }, methods: { ...mapActions([ 'saveNote', 'toggleDiscussion', 'removePlaceholderNotes', + 'toggleResolveNote', ]), componentName(note) { if (note.isPlaceholderNote) { @@ -103,7 +141,7 @@ return noteableNote; }, componentData(note) { - return note.isPlaceholderNote ? note.notes[0] : note; + return note.isPlaceholderNote ? this.note.notes[0] : note; }, toggleDiscussionHandler() { this.toggleDiscussion({ discussionId: this.note.id }); @@ -128,7 +166,7 @@ flashContainer: this.$el, data: { in_reply_to_discussion_id: this.note.reply_id, - target_type: 'issue', + target_type: this.noteableType, target_id: this.discussion.noteable_id, note: { note: noteText }, }, @@ -152,12 +190,27 @@ Please check your network connection and try again.`; }); }); }, + jumpToDiscussion() { + const unresolvedIds = this.unresolvedDiscussions.map(d => d.id); + const index = unresolvedIds.indexOf(this.note.id); + + if (index >= 0 && index !== unresolvedIds.length) { + const nextId = unresolvedIds[index + 1]; + const el = document.querySelector(`[data-discussion-id="${nextId}"]`); + + if (el) { + scrollToElement(el); + } + } + }, }, }; </script> <template> - <li class="note note-discussion timeline-entry"> + <li + :data-discussion-id="note.id" + class="note note-discussion timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> <user-avatar-link @@ -175,6 +228,7 @@ Please check your network connection and try again.`; :created-at="discussion.created_at" :note-id="discussion.id" :include-toggle="true" + :expanded="note.expanded" @toggleHandler="toggleDiscussionHandler" action-text="started a discussion" class="discussion" @@ -187,43 +241,103 @@ Please check your network connection and try again.`; class-name="discussion-headline-light js-discussion-headline" /> </div> - </div> - <div - v-if="note.expanded" - class="discussion-body"> - <div class="panel panel-default"> - <div class="discussion-notes"> - <ul class="notes"> - <component - v-for="note in note.notes" - :is="componentName(note)" - :note="componentData(note)" - :key="note.id" - /> - </ul> - <div - :class="{ 'is-replying': isReplying }" - class="discussion-reply-holder"> - <button - v-if="canReply && !isReplying" - @click="showReplyForm" - type="button" - class="js-vue-discussion-reply btn btn-text-field" - title="Add a reply"> - Reply... - </button> - <note-form - v-if="isReplying" - save-button-title="Comment" - :discussion="note" - :is-editing="false" - @handleFormUpdate="saveReply" - @cancelFormEdition="cancelReplyForm" - ref="noteForm" - /> - <note-signed-out-widget v-if="!canReply" /> + <div + v-if="note.expanded" + class="discussion-body"> + <component + :is="wrapperComponent" + :discussion="discussion" + :class="wrapperClass" + > + <div class="discussion-notes"> + <ul class="notes"> + <component + v-for="note in note.notes" + :is="componentName(note)" + :note="componentData(note)" + :key="note.id" + /> + </ul> + <div + :class="{ 'is-replying': isReplying }" + class="discussion-reply-holder"> + <template v-if="!isReplying && canReply"> + <div + class="btn-group-justified discussion-with-resolve-btn" + role="group"> + <div + class="btn-group" + role="group"> + <button + @click="showReplyForm" + type="button" + class="js-vue-discussion-reply btn btn-text-field" + title="Add a reply">Reply...</button> + </div> + <div + v-if="note.resolvable" + class="btn-group" + role="group"> + <button + @click="resolveHandler()" + type="button" + class="btn btn-default" + > + <i + v-if="isResolving" + aria-hidden="true" + class="fa fa-spinner fa-spin" + ></i> + {{ resolveButtonTitle }} + </button> + </div> + <div + class="btn-group discussion-actions" + role="group"> + <div + v-if="note.resolvable && !discussionResolved" + class="btn-group" + role="group"> + <a + :href="note.resolve_with_issue_path" + v-tooltip + class="new-issue-for-discussion btn + btn-default discussion-create-issue-btn" + title="Resolve this discussion in a new issue" + data-container="body" + > + <span v-html="resolveDiscussionsSvg"></span> + </a> + </div> + <div + v-if="hasUnresolvedDiscussion" + class="btn-group" + role="group"> + <button + @click="jumpToDiscussion" + v-tooltip + class="btn btn-default discussion-next-btn" + title="Jump to next unresolved discussion" + data-container="body" + > + <span v-html="nextDiscussionsSvg"></span> + </button> + </div> + </div> + </div> + </template> + <note-form + v-if="isReplying" + save-button-title="Comment" + :note="note" + :is-editing="false" + @handleFormUpdate="saveReply" + @cancelFormEdition="cancelReplyForm" + ref="noteForm" /> + <note-signed-out-widget v-if="!canReply" /> + </div> </div> - </div> + </component> </div> </div> </div> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index 045077de383..4d17bd5acc2 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -7,6 +7,8 @@ import noteActions from './note_actions.vue'; import noteBody from './note_body.vue'; import eventHub from '../event_hub'; + import noteable from '../mixins/noteable'; + import resolvable from '../mixins/resolvable'; export default { components: { @@ -15,6 +17,10 @@ noteActions, noteBody, }, + mixins: [ + noteable, + resolvable, + ], props: { note: { type: Object, @@ -26,6 +32,7 @@ isEditing: false, isDeleting: false, isRequesting: false, + isResolving: false, }; }, computed: { @@ -65,6 +72,7 @@ ...mapActions([ 'deleteNote', 'updateNote', + 'toggleResolveNote', 'scrollToNoteIfNeeded', ]), editHandler() { @@ -89,7 +97,7 @@ const data = { endpoint: this.note.path, note: { - target_type: 'issue', + target_type: this.noteableType, target_id: this.note.noteable_id, note: { note: noteText }, }, @@ -134,7 +142,7 @@ // we need to do this to prevent noteForm inconsistent content warning // this is something we intentionally do so we need to recover the content this.note.note = noteText; - this.$refs.noteBody.$refs.noteForm.note = noteText; + this.$refs.noteBody.$refs.noteForm.note.note = noteText; }, }, }; @@ -171,8 +179,13 @@ :can-delete="note.current_user.can_edit" :can-report-as-abuse="canReportAsAbuse" :report-abuse-path="note.report_abuse_path" + :resolvable="note.resolvable" + :is-resolved="note.resolved" + :is-resolving="isResolving" + :resolved-by="note.resolved_by" @handleEdit="editHandler" @handleDelete="deleteHandler" + @handleResolve="resolveHandler" /> </div> <note-body diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 92db4830704..74afed5560b 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -11,6 +11,7 @@ import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; export default { name: 'NotesApp', @@ -48,7 +49,24 @@ ...mapGetters([ 'notes', 'getNotesDataByProp', + 'discussionCount', ]), + noteableType() { + // FIXME -- @fatihacet Get this from JSON data. + const { ISSUE_NOTEABLE_TYPE, MERGE_REQUEST_NOTEABLE_TYPE } = constants; + + return this.noteableData.merge_params ? MERGE_REQUEST_NOTEABLE_TYPE : ISSUE_NOTEABLE_TYPE; + }, + allNotes() { + if (this.isLoading) { + const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0; + + return new Array(totalNotes).fill({ + isSkeletonNote: true, + }); + } + return this.notes; + }, }, created() { this.setNotesData(this.notesData); @@ -67,6 +85,10 @@ this.actionToggleAward({ awardName, noteId }); }); } + document.addEventListener('refreshVueNotes', this.fetchNotes); + }, + beforeDestroy() { + document.removeEventListener('refreshVueNotes', this.fetchNotes); }, methods: { ...mapActions({ @@ -81,6 +103,9 @@ setTargetNoteHash: 'setTargetNoteHash', }), getComponentName(note) { + if (note.isSkeletonNote) { + return skeletonLoadingContainer; + } if (note.isPlaceholderNote) { if (note.placeholderType === constants.SYSTEM_NOTE) { return placeholderSystemNote; @@ -109,9 +134,14 @@ }); }, initPolling() { + if (this.isPollingInitialized) { + return; + } + this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt')); this.poll(); + this.isPollingInitialized = true; }, checkLocationHash() { const hash = getLocationHash(); @@ -128,25 +158,20 @@ <template> <div id="notes"> - <div - v-if="isLoading" - class="js-loading loading"> - <loading-icon /> - </div> - <ul - v-if="!isLoading" id="notes-list" class="notes main-notes-list timeline"> <component - v-for="note in notes" + v-for="note in allNotes" :is="getComponentName(note)" :note="getComponentData(note)" :key="note.id" /> </ul> - <comment-form /> + <comment-form + :noteable-type="noteableType" + /> </div> </template> diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js index a6961063c01..f4f407ffd8a 100644 --- a/app/assets/javascripts/notes/constants.js +++ b/app/assets/javascripts/notes/constants.js @@ -1,4 +1,5 @@ export const DISCUSSION_NOTE = 'DiscussionNote'; +export const DIFF_NOTE = 'DiffNote'; export const DISCUSSION = 'discussion'; export const NOTE = 'note'; export const SYSTEM_NOTE = 'systemNote'; @@ -8,4 +9,7 @@ export const REOPENED = 'reopened'; export const CLOSED = 'closed'; export const EMOJI_THUMBSUP = 'thumbsup'; export const EMOJI_THUMBSDOWN = 'thumbsdown'; -export const NOTEABLE_TYPE = 'Issue'; +export const ISSUE_NOTEABLE_TYPE = 'issue'; +export const MERGE_REQUEST_NOTEABLE_TYPE = 'merge_request'; +export const UNRESOLVE_NOTE_METHOD_NAME = 'delete'; +export const RESOLVE_NOTE_METHOD_NAME = 'post'; diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js index 48e7cfddb63..545bf2c99a7 100644 --- a/app/assets/javascripts/notes/index.js +++ b/app/assets/javascripts/notes/index.js @@ -20,17 +20,7 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ return { noteableData: JSON.parse(notesDataset.noteableData), currentUserData, - notesData: { - lastFetchedAt: notesDataset.lastFetchedAt, - discussionsPath: notesDataset.discussionsPath, - newSessionPath: notesDataset.newSessionPath, - registerPath: notesDataset.registerPath, - notesPath: notesDataset.notesPath, - markdownDocsPath: notesDataset.markdownDocsPath, - quickActionsDocsPath: notesDataset.quickActionsDocsPath, - closeIssuePath: notesDataset.closeIssuePath, - reopenIssuePath: notesDataset.reopenIssuePath, - }, + notesData: JSON.parse(notesDataset.notesData), }; }, render(createElement) { diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js index a008171beda..a3d897f2f12 100644 --- a/app/assets/javascripts/notes/mixins/autosave.js +++ b/app/assets/javascripts/notes/mixins/autosave.js @@ -1,9 +1,10 @@ import Autosave from '../../autosave'; +import { capitalizeFirstCharacter } from '../../lib/utils/text_utility'; export default { methods: { - initAutoSave() { - this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), ['Note', 'Issue', this.note.id], 'issue'); + initAutoSave(noteableType) { + this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), ['Note', capitalizeFirstCharacter(noteableType), this.note.id]); }, resetAutoSave() { this.autosave.reset(); diff --git a/app/assets/javascripts/notes/mixins/noteable.js b/app/assets/javascripts/notes/mixins/noteable.js new file mode 100644 index 00000000000..0da4ff49f08 --- /dev/null +++ b/app/assets/javascripts/notes/mixins/noteable.js @@ -0,0 +1,22 @@ +import * as constants from '../constants'; + +export default { + props: { + note: { + type: Object, + required: true, + }, + }, + computed: { + noteableType() { + switch (this.note.noteable_type) { + case 'MergeRequest': + return constants.MERGE_REQUEST_NOTEABLE_TYPE; + case 'Issue': + return constants.ISSUE_NOTEABLE_TYPE; + default: + return ''; + } + }, + }, +}; diff --git a/app/assets/javascripts/notes/mixins/resolvable.js b/app/assets/javascripts/notes/mixins/resolvable.js new file mode 100644 index 00000000000..ab1ae115e52 --- /dev/null +++ b/app/assets/javascripts/notes/mixins/resolvable.js @@ -0,0 +1,50 @@ +import Flash from '~/flash'; +import { __ } from '~/locale'; + +export default { + props: { + note: { + type: Object, + required: true, + }, + }, + computed: { + discussionResolved() { + const { notes, resolved } = this.note; + + if (notes) { // Decide resolved state using store. Only valid for discussions. + return notes.every(note => note.resolved && !note.system); + } + + return resolved; + }, + resolveButtonTitle() { + if (this.updatedNoteBody) { + if (this.discussionResolved) { + return __('Comment and unresolve discussion'); + } + + return __('Comment and resolve discussion'); + } + return this.discussionResolved ? __('Unresolve discussion') : __('Resolve discussion'); + }, + }, + methods: { + resolveHandler(resolvedState = false) { + this.isResolving = true; + const endpoint = this.note.resolve_path || `${this.note.path}/resolve`; + const isResolved = this.discussionResolved || resolvedState; + const discussion = this.resolveAsThread; + + this.toggleResolveNote({ endpoint, isResolved, discussion }) + .then(() => { + this.isResolving = false; + }) + .catch(() => { + this.isResolving = false; + const msg = __('Something went wrong while resolving this discussion. Please try again.'); + Flash(msg, 'alert', this.$el); + }); + }, + }, +}; diff --git a/app/assets/javascripts/notes/services/notes_service.js b/app/assets/javascripts/notes/services/notes_service.js index b8e7ffc8c46..4766351dfc5 100644 --- a/app/assets/javascripts/notes/services/notes_service.js +++ b/app/assets/javascripts/notes/services/notes_service.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import VueResource from 'vue-resource'; +import * as constants from '../constants'; Vue.use(VueResource); @@ -19,6 +20,12 @@ export default { createNewNote(endpoint, data) { return Vue.http.post(endpoint, data, { emulateJSON: true }); }, + toggleResolveNote(endpoint, isResolved) { + const { RESOLVE_NOTE_METHOD_NAME, UNRESOLVE_NOTE_METHOD_NAME } = constants; + const method = isResolved ? UNRESOLVE_NOTE_METHOD_NAME : RESOLVE_NOTE_METHOD_NAME; + + return Vue.http[method](endpoint); + }, poll(data = {}) { const { endpoint, lastFetchedAt } = data; const options = { diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js index 4c846d69b86..42fc2a131b8 100644 --- a/app/assets/javascripts/notes/stores/actions.js +++ b/app/assets/javascripts/notes/stores/actions.js @@ -61,8 +61,17 @@ export const createNewNote = ({ commit }, { endpoint, data }) => service export const removePlaceholderNotes = ({ commit }) => commit(types.REMOVE_PLACEHOLDER_NOTES); +export const toggleResolveNote = ({ commit }, { endpoint, isResolved, discussion }) => service + .toggleResolveNote(endpoint, isResolved) + .then(res => res.json()) + .then((res) => { + const mutationType = discussion ? types.UPDATE_DISCUSSION : types.UPDATE_NOTE; + + commit(mutationType, res); + }); + export const closeIssue = ({ commit, dispatch, state }) => service - .toggleIssueState(state.notesData.closeIssuePath) + .toggleIssueState(state.notesData.closePath) .then(res => res.json()) .then((data) => { commit(types.CLOSE_ISSUE); @@ -70,7 +79,7 @@ export const closeIssue = ({ commit, dispatch, state }) => service }); export const reopenIssue = ({ commit, dispatch, state }) => service - .toggleIssueState(state.notesData.reopenIssuePath) + .toggleIssueState(state.notesData.reopenPath) .then(res => res.json()) .then((data) => { commit(types.REOPEN_ISSUE); @@ -80,7 +89,7 @@ export const reopenIssue = ({ commit, dispatch, state }) => service export const emitStateChangedEvent = ({ commit, getters }, data) => { const event = new CustomEvent('issuable_vue_app:change', { detail: { data, - isClosed: getters.issueState === constants.CLOSED, + isClosed: getters.openState === constants.CLOSED, } }); document.dispatchEvent(event); @@ -174,7 +183,7 @@ const pollSuccessCallBack = (resp, commit, state, getters) => { resp.notes.forEach((note) => { if (notesById[note.id]) { commit(types.UPDATE_NOTE, note); - } else if (note.type === constants.DISCUSSION_NOTE) { + } else if (note.type === constants.DISCUSSION_NOTE || note.type === constants.DIFF_NOTE) { const discussion = utils.findNoteObjectById(state.notes, note.discussion_id); if (discussion) { diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js index 82024104d73..e6180101c58 100644 --- a/app/assets/javascripts/notes/stores/getters.js +++ b/app/assets/javascripts/notes/stores/getters.js @@ -8,7 +8,7 @@ export const getNotesDataByProp = state => prop => state.notesData[prop]; export const getNoteableData = state => state.noteableData; export const getNoteableDataByProp = state => prop => state.noteableData[prop]; -export const issueState = state => state.noteableData.state; +export const openState = state => state.noteableData.state; export const getUserData = state => state.userData || {}; export const getUserDataByProp = state => prop => state.userData && state.userData[prop]; @@ -30,3 +30,37 @@ export const getCurrentUserLastNote = state => _.flatten( export const getDiscussionLastNote = state => discussion => reverseNotes(discussion.notes) .find(el => isLastNote(el, state)); + +export const discussionCount = (state) => { + const discussions = state.notes.filter(n => !n.individual_note); + + return discussions.length; +}; + +export const unresolvedDiscussions = (state, getters) => { + const resolvedMap = getters.resolvedDiscussionsById; + + return state.notes.filter(n => !n.individual_note && !resolvedMap[n.id]); +}; + +export const resolvedDiscussionsById = (state) => { + const map = {}; + + state.notes.forEach((n) => { + if (n.notes) { + const resolved = n.notes.every(note => note.resolved && !note.system); + + if (resolved) { + map[n.id] = n; + } + } + }); + + return map; +}; + +export const resolvedDiscussionCount = (state, getters) => { + const resolvedMap = getters.resolvedDiscussionsById; + + return Object.keys(resolvedMap).length; +}; diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js index 6d7c3bbae0f..da1b5a9e51a 100644 --- a/app/assets/javascripts/notes/stores/mutation_types.js +++ b/app/assets/javascripts/notes/stores/mutation_types.js @@ -12,6 +12,7 @@ export const SHOW_PLACEHOLDER_NOTE = 'SHOW_PLACEHOLDER_NOTE'; export const TOGGLE_AWARD = 'TOGGLE_AWARD'; export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION'; export const UPDATE_NOTE = 'UPDATE_NOTE'; +export const UPDATE_DISCUSSION = 'UPDATE_DISCUSSION'; // Issue export const CLOSE_ISSUE = 'CLOSE_ISSUE'; diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js index b3f66578c9a..963b40be3fd 100644 --- a/app/assets/javascripts/notes/stores/mutations.js +++ b/app/assets/javascripts/notes/stores/mutations.js @@ -1,22 +1,32 @@ import * as utils from './utils'; import * as types from './mutation_types'; import * as constants from '../constants'; +import { isInMRPage } from '../../lib/utils/common_utils'; export default { [types.ADD_NEW_NOTE](state, note) { const { discussion_id, type } = note; const [exists] = state.notes.filter(n => n.id === note.discussion_id); + const isDiscussion = (type === constants.DISCUSSION_NOTE); if (!exists) { const noteData = { expanded: true, id: discussion_id, - individual_note: !(type === constants.DISCUSSION_NOTE), + individual_note: !isDiscussion, notes: [note], reply_id: discussion_id, }; + if (isDiscussion && isInMRPage()) { + noteData.resolvable = note.resolvable; + noteData.resolved = false; + noteData.resolve_path = note.resolve_path; + noteData.resolve_with_issue_path = note.resolve_with_issue_path; + } + state.notes.push(noteData); + document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); } }, @@ -25,6 +35,7 @@ export default { if (noteObj) { noteObj.notes.push(note); + document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); } }, @@ -41,6 +52,8 @@ export default { state.notes.splice(state.notes.indexOf(noteObj), 1); } } + + document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); }, [types.REMOVE_PLACEHOLDER_NOTES](state) { @@ -77,15 +90,19 @@ export default { const notes = []; notesData.forEach((note) => { + const nn = Object.assign({}, note); + // To support legacy notes, should be very rare case. if (note.individual_note && note.notes.length > 1) { note.notes.forEach((n) => { - const nn = Object.assign({}, note); nn.notes = [n]; // override notes array to only have one item to mimick individual_note notes.push(nn); }); } else { - notes.push(note); + const oldNote = utils.findNoteObjectById(state.notes, note.id); + nn.expanded = oldNote ? oldNote.expanded : note.expanded; + + notes.push(nn); } }); @@ -134,6 +151,8 @@ export default { user: { id, name, username }, }); } + + document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); }, [types.TOGGLE_DISCUSSION](state, { discussionId }) { @@ -151,6 +170,24 @@ export default { const comment = utils.findNoteObjectById(noteObj.notes, note.id); noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note); } + + // document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); + }, + + [types.UPDATE_DISCUSSION](state, noteData) { + const note = noteData; + let index = 0; + + state.notes.forEach((n, i) => { + if (n.id === note.id) { + index = i; + } + }); + + note.expanded = true; // override expand flag to prevent collapse + state.notes.splice(index, 1, note); + + document.dispatchEvent(new CustomEvent('refreshLegacyNotes')); }, [types.CLOSE_ISSUE](state) { diff --git a/app/assets/javascripts/notes/stores/utils.js b/app/assets/javascripts/notes/stores/utils.js index 6074115e855..275263a2aaa 100644 --- a/app/assets/javascripts/notes/stores/utils.js +++ b/app/assets/javascripts/notes/stores/utils.js @@ -28,4 +28,3 @@ export const getQuickActionText = (note) => { export const hasQuickActions = note => REGEX_QUICK_ACTIONS.test(note); export const stripQuickActions = note => note.replace(REGEX_QUICK_ACTIONS, '').trim(); - diff --git a/app/assets/javascripts/pages/admin/abuse_reports/index.js b/app/assets/javascripts/pages/admin/abuse_reports/index.js index c0b6e8d4095..d76b1f174fc 100644 --- a/app/assets/javascripts/pages/admin/abuse_reports/index.js +++ b/app/assets/javascripts/pages/admin/abuse_reports/index.js @@ -1,3 +1,3 @@ import AbuseReports from './abuse_reports'; -export default () => new AbuseReports(); +document.addEventListener('DOMContentLoaded', () => new AbuseReports()); diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js index b68ce5d32d8..f92450cbaa7 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js @@ -3,7 +3,7 @@ import axios from '~/lib/utils/axios_utils'; import flash from '~/flash'; import { __ } from '~/locale'; -export default function initBroadcastMessagesForm() { +export default () => { $('input#broadcast_message_color').on('input', function onMessageColorInput() { const previewColor = $(this).val(); $('div.broadcast-message-preview').css('background-color', previewColor); @@ -32,4 +32,4 @@ export default function initBroadcastMessagesForm() { .catch(() => flash(__('An error occurred while rendering preview broadcast message'))); } }, 250)); -} +}; diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/index.js b/app/assets/javascripts/pages/admin/broadcast_messages/index.js index b548c48282a..d6cc6a850eb 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/index.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/index.js @@ -1,3 +1,3 @@ import initBroadcastMessagesForm from './broadcast_message'; -export default () => initBroadcastMessagesForm(); +document.addEventListener('DOMContentLoaded', initBroadcastMessagesForm); diff --git a/app/assets/javascripts/pages/admin/cohorts/index.js b/app/assets/javascripts/pages/admin/cohorts/index.js index 42ef9d38ef7..2d5020dbef4 100644 --- a/app/assets/javascripts/pages/admin/cohorts/index.js +++ b/app/assets/javascripts/pages/admin/cohorts/index.js @@ -1,3 +1,3 @@ import initUsagePing from './usage_ping'; -export default () => initUsagePing(); +document.addEventListener('DOMContentLoaded', initUsagePing); diff --git a/app/assets/javascripts/pages/admin/groups/show/index.js b/app/assets/javascripts/pages/admin/groups/show/index.js index 5defea104d4..b0cdad627a6 100644 --- a/app/assets/javascripts/pages/admin/groups/show/index.js +++ b/app/assets/javascripts/pages/admin/groups/show/index.js @@ -1,3 +1,3 @@ import UsersSelect from '../../../../users_select'; -export default () => new UsersSelect(); +document.addEventListener('DOMContentLoaded', () => new UsersSelect()); diff --git a/app/assets/javascripts/pages/admin/labels/edit/index.js b/app/assets/javascripts/pages/admin/labels/edit/index.js index d7ec6e47f67..5de1d4d6344 100644 --- a/app/assets/javascripts/pages/admin/labels/edit/index.js +++ b/app/assets/javascripts/pages/admin/labels/edit/index.js @@ -1,3 +1,3 @@ import Labels from '../../../../labels'; -export default () => new Labels(); +document.addEventListener('DOMContentLoaded', () => new Labels()); diff --git a/app/assets/javascripts/pages/admin/labels/new/index.js b/app/assets/javascripts/pages/admin/labels/new/index.js index d7ec6e47f67..5de1d4d6344 100644 --- a/app/assets/javascripts/pages/admin/labels/new/index.js +++ b/app/assets/javascripts/pages/admin/labels/new/index.js @@ -1,3 +1,3 @@ import Labels from '../../../../labels'; -export default () => new Labels(); +document.addEventListener('DOMContentLoaded', () => new Labels()); diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js index 71e0ddcd7b6..31c96eb87af 100644 --- a/app/assets/javascripts/pages/admin/projects/index.js +++ b/app/assets/javascripts/pages/admin/projects/index.js @@ -1,9 +1,9 @@ import ProjectsList from '../../../projects_list'; import NamespaceSelect from '../../../namespace_select'; -export default () => { +document.addEventListener('DOMContentLoaded', () => { new ProjectsList(); // eslint-disable-line no-new document.querySelectorAll('.js-namespace-select') .forEach(dropdown => new NamespaceSelect({ dropdown })); -}; +}); diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js index b3f6a72fdcb..42f7460ad55 100644 --- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js +++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js @@ -2,9 +2,9 @@ import { visitUrl } from '~/lib/utils/url_utility'; import UsersSelect from '~/users_select'; import { isMetaClick } from '~/lib/utils/common_utils'; -import { __ } from '../../../../locale'; -import flash from '../../../../flash'; -import axios from '../../../../lib/utils/axios_utils'; +import { __ } from '~/locale'; +import flash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; export default class Todos { constructor() { diff --git a/app/assets/javascripts/pages/groups/boards/index.js b/app/assets/javascripts/pages/groups/boards/index.js new file mode 100644 index 00000000000..5cfe8723204 --- /dev/null +++ b/app/assets/javascripts/pages/groups/boards/index.js @@ -0,0 +1,9 @@ +import UsersSelect from '~/users_select'; +import ShortcutsNavigation from '~/shortcuts_navigation'; +import initBoards from '~/boards'; + +document.addEventListener('DOMContentLoaded', () => { + new UsersSelect(); // eslint-disable-line no-new + new ShortcutsNavigation(); // eslint-disable-line no-new + initBoards(); +}); diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue new file mode 100644 index 00000000000..22248418c41 --- /dev/null +++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue @@ -0,0 +1,64 @@ +<script> + import axios from '~/lib/utils/axios_utils'; + import createFlash from '~/flash'; + import GlModal from '~/vue_shared/components/gl_modal.vue'; + import { s__, sprintf } from '~/locale'; + import { visitUrl } from '~/lib/utils/url_utility'; + import eventHub from '../event_hub'; + + export default { + components: { + GlModal, + }, + props: { + milestoneTitle: { + type: String, + required: true, + }, + url: { + type: String, + required: true, + }, + }, + computed: { + title() { + return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), { milestoneTitle: this.milestoneTitle }); + }, + text() { + return s__(`Milestones|Promoting this milestone will make it available for all projects inside the group. + Existing project milestones with the same title will be merged. + This action cannot be reversed.`); + }, + }, + methods: { + onSubmit() { + eventHub.$emit('promoteMilestoneModal.requestStarted', this.url); + return axios.post(this.url, { params: { format: 'json' } }) + .then((response) => { + eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: true }); + visitUrl(response.data.url); + }) + .catch((error) => { + eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: false }); + createFlash(error); + }); + }, + }, + }; +</script> +<template> + <gl-modal + id="promote-milestone-modal" + footer-primary-button-variant="warning" + :footer-primary-button-text="s__('Milestones|Promote Milestone')" + @submit="onSubmit" + > + <template + slot="title" + > + {{ title }} + </template> + {{ text }} + </gl-modal> +</template> + diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js new file mode 100644 index 00000000000..d51b5c221e3 --- /dev/null +++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js @@ -0,0 +1,84 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import deleteMilestoneModal from './components/delete_milestone_modal.vue'; +import eventHub from './event_hub'; + +export default () => { + Vue.use(Translate); + + const onRequestFinished = ({ milestoneUrl, successful }) => { + const button = document.querySelector(`.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`); + + if (!successful) { + button.removeAttribute('disabled'); + } + + button.querySelector('.js-loading-icon').classList.add('hidden'); + }; + + const onRequestStarted = (milestoneUrl) => { + const button = document.querySelector(`.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`); + button.setAttribute('disabled', ''); + button.querySelector('.js-loading-icon').classList.remove('hidden'); + eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished); + }; + + const onDeleteButtonClick = (event) => { + const button = event.currentTarget; + const modalProps = { + milestoneId: parseInt(button.dataset.milestoneId, 10), + milestoneTitle: button.dataset.milestoneTitle, + milestoneUrl: button.dataset.milestoneUrl, + issueCount: parseInt(button.dataset.milestoneIssueCount, 10), + mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), + }; + eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); + eventHub.$emit('deleteMilestoneModal.props', modalProps); + }; + + const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); + deleteMilestoneButtons.forEach((button) => { + button.addEventListener('click', onDeleteButtonClick); + }); + + eventHub.$once('deleteMilestoneModal.mounted', () => { + deleteMilestoneButtons.forEach((button) => { + button.removeAttribute('disabled'); + }); + }); + + return new Vue({ + el: '#delete-milestone-modal', + components: { + deleteMilestoneModal, + }, + data() { + return { + modalProps: { + milestoneId: -1, + milestoneTitle: '', + milestoneUrl: '', + issueCount: -1, + mergeRequestCount: -1, + }, + }; + }, + mounted() { + eventHub.$on('deleteMilestoneModal.props', this.setModalProps); + eventHub.$emit('deleteMilestoneModal.mounted'); + }, + beforeDestroy() { + eventHub.$off('deleteMilestoneModal.props', this.setModalProps); + }, + methods: { + setModalProps(modalProps) { + this.modalProps = modalProps; + }, + }, + render(createElement) { + return createElement(deleteMilestoneModal, { + props: this.modalProps, + }); + }, + }); +}; diff --git a/app/assets/javascripts/pages/milestones/shared/index.js b/app/assets/javascripts/pages/milestones/shared/index.js index 327e2cf569c..dabfe32848b 100644 --- a/app/assets/javascripts/pages/milestones/shared/index.js +++ b/app/assets/javascripts/pages/milestones/shared/index.js @@ -1,88 +1,7 @@ -import Vue from 'vue'; - -import Translate from '~/vue_shared/translate'; - -import deleteMilestoneModal from './components/delete_milestone_modal.vue'; -import eventHub from './event_hub'; +import initDeleteMilestoneModal from './delete_milestone_modal_init'; +import initPromoteMilestoneModal from './promote_milestone_modal_init'; export default () => { - Vue.use(Translate); - - const onRequestFinished = ({ milestoneUrl, successful }) => { - const button = document.querySelector(`.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`); - - if (!successful) { - button.removeAttribute('disabled'); - } - - button.querySelector('.js-loading-icon').classList.add('hidden'); - }; - - const onRequestStarted = (milestoneUrl) => { - const button = document.querySelector(`.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`); - button.setAttribute('disabled', ''); - button.querySelector('.js-loading-icon').classList.remove('hidden'); - eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished); - }; - - const onDeleteButtonClick = (event) => { - const button = event.currentTarget; - const modalProps = { - milestoneId: parseInt(button.dataset.milestoneId, 10), - milestoneTitle: button.dataset.milestoneTitle, - milestoneUrl: button.dataset.milestoneUrl, - issueCount: parseInt(button.dataset.milestoneIssueCount, 10), - mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), - }; - eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); - eventHub.$emit('deleteMilestoneModal.props', modalProps); - }; - - const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); - for (let i = 0; i < deleteMilestoneButtons.length; i += 1) { - const button = deleteMilestoneButtons[i]; - button.addEventListener('click', onDeleteButtonClick); - } - - eventHub.$once('deleteMilestoneModal.mounted', () => { - for (let i = 0; i < deleteMilestoneButtons.length; i += 1) { - const button = deleteMilestoneButtons[i]; - button.removeAttribute('disabled'); - } - }); - - return new Vue({ - el: '#delete-milestone-modal', - components: { - deleteMilestoneModal, - }, - data() { - return { - modalProps: { - milestoneId: -1, - milestoneTitle: '', - milestoneUrl: '', - issueCount: -1, - mergeRequestCount: -1, - }, - }; - }, - mounted() { - eventHub.$on('deleteMilestoneModal.props', this.setModalProps); - eventHub.$emit('deleteMilestoneModal.mounted'); - }, - beforeDestroy() { - eventHub.$off('deleteMilestoneModal.props', this.setModalProps); - }, - methods: { - setModalProps(modalProps) { - this.modalProps = modalProps; - }, - }, - render(createElement) { - return createElement(deleteMilestoneModal, { - props: this.modalProps, - }); - }, - }); + initDeleteMilestoneModal(); + initPromoteMilestoneModal(); }; diff --git a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js new file mode 100644 index 00000000000..d00f81c9094 --- /dev/null +++ b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js @@ -0,0 +1,82 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import PromoteMilestoneModal from './components/promote_milestone_modal.vue'; +import eventHub from './event_hub'; + +Vue.use(Translate); + +export default () => { + const onRequestFinished = ({ milestoneUrl, successful }) => { + const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`); + + if (!successful) { + button.removeAttribute('disabled'); + } + }; + + const onRequestStarted = (milestoneUrl) => { + const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`); + button.setAttribute('disabled', ''); + eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished); + }; + + const onDeleteButtonClick = (event) => { + const button = event.currentTarget; + const modalProps = { + milestoneTitle: button.dataset.milestoneTitle, + url: button.dataset.url, + }; + eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted); + eventHub.$emit('promoteMilestoneModal.props', modalProps); + }; + + const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button'); + promoteMilestoneButtons.forEach((button) => { + button.addEventListener('click', onDeleteButtonClick); + }); + + eventHub.$once('promoteMilestoneModal.mounted', () => { + promoteMilestoneButtons.forEach((button) => { + button.removeAttribute('disabled'); + }); + }); + + const promoteMilestoneModal = document.getElementById('promote-milestone-modal'); + let promoteMilestoneComponent; + + if (promoteMilestoneModal) { + promoteMilestoneComponent = new Vue({ + el: promoteMilestoneModal, + components: { + PromoteMilestoneModal, + }, + data() { + return { + modalProps: { + milestoneTitle: '', + url: '', + }, + }; + }, + mounted() { + eventHub.$on('promoteMilestoneModal.props', this.setModalProps); + eventHub.$emit('promoteMilestoneModal.mounted'); + }, + beforeDestroy() { + eventHub.$off('promoteMilestoneModal.props', this.setModalProps); + }, + methods: { + setModalProps(modalProps) { + this.modalProps = modalProps; + }, + }, + render(createElement) { + return createElement('promote-milestone-modal', { + props: this.modalProps, + }); + }, + }); + } + + return promoteMilestoneComponent; +}; diff --git a/app/assets/javascripts/pages/profiles/index.js b/app/assets/javascripts/pages/profiles/index.js new file mode 100644 index 00000000000..c52ad7bc335 --- /dev/null +++ b/app/assets/javascripts/pages/profiles/index.js @@ -0,0 +1,16 @@ +import '~/profile/gl_crop'; +import Profile from '~/profile/profile'; + +document.addEventListener('DOMContentLoaded', () => { + $(document).on('input.ssh_key', '#key_key', function () { // eslint-disable-line func-names + const $title = $('#key_title'); + const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/); + + // Extract the SSH Key title from its comment + if (comment && comment.length > 1) { + $title.val(comment[1]).change(); + } + }); + + new Profile(); // eslint-disable-line no-new +}); diff --git a/app/assets/javascripts/pages/profiles/index/index.js b/app/assets/javascripts/pages/profiles/index/index.js index 90eed38777a..9bd430f4f11 100644 --- a/app/assets/javascripts/pages/profiles/index/index.js +++ b/app/assets/javascripts/pages/profiles/index/index.js @@ -1,7 +1,7 @@ import NotificationsForm from '../../../notifications_form'; import notificationsDropdown from '../../../notifications_dropdown'; -export default () => { +document.addEventListener('DOMContentLoaded', () => { new NotificationsForm(); // eslint-disable-line no-new notificationsDropdown(); -}; +}); diff --git a/app/assets/javascripts/two_factor_auth.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js index e3414d9afff..5b2473e0989 100644 --- a/app/assets/javascripts/two_factor_auth.js +++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js @@ -1,4 +1,4 @@ -import U2FRegister from './u2f/register'; +import U2FRegister from '~/u2f/register'; document.addEventListener('DOMContentLoaded', () => { const twoFactorNode = document.querySelector('.js-two-factor-auth'); diff --git a/app/assets/javascripts/pages/projects/commit/pipelines/index.js b/app/assets/javascripts/pages/projects/commit/pipelines/index.js index 7889704a324..cd923f13ce8 100644 --- a/app/assets/javascripts/pages/projects/commit/pipelines/index.js +++ b/app/assets/javascripts/pages/projects/commit/pipelines/index.js @@ -1,8 +1,10 @@ import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown'; +import initPipelines from '~/commit/pipelines/pipelines_bundle'; document.addEventListener('DOMContentLoaded', () => { new MiniPipelineGraph({ container: '.js-commit-pipeline-graph', }).bindEvents(); $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); + initPipelines(); }); diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index 460a54ab504..1aeed197385 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/app/assets/javascripts/pages/projects/commit/show/index.js @@ -5,6 +5,7 @@ import ShortcutsNavigation from '~/shortcuts_navigation'; import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown'; import initNotes from '~/init_notes'; import initChangesDropdown from '~/init_changes_dropdown'; +import initDiffNotes from '~/diff_notes/diff_notes_bundle'; import { fetchCommitMergeRequests } from '~/commit_merge_requests'; document.addEventListener('DOMContentLoaded', () => { @@ -19,4 +20,5 @@ document.addEventListener('DOMContentLoaded', () => { initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop); $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); fetchCommitMergeRequests(); + initDiffNotes(); }); diff --git a/app/assets/javascripts/pages/projects/compare/index.js b/app/assets/javascripts/pages/projects/compare/index.js index 890062eeee6..d1c78bd61db 100644 --- a/app/assets/javascripts/pages/projects/compare/index.js +++ b/app/assets/javascripts/pages/projects/compare/index.js @@ -1,5 +1,3 @@ import initCompareAutocomplete from '~/compare_autocomplete'; -export default () => { - initCompareAutocomplete(); -}; +document.addEventListener('DOMContentLoaded', initCompareAutocomplete); diff --git a/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js new file mode 100644 index 00000000000..df58e9dd072 --- /dev/null +++ b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js @@ -0,0 +1,3 @@ +import initCycleAnalytics from '~/cycle_analytics/cycle_analytics_bundle'; + +document.addEventListener('DOMContentLoaded', initCycleAnalytics); diff --git a/app/assets/javascripts/pages/projects/environments/folder/index.js b/app/assets/javascripts/pages/projects/environments/folder/index.js new file mode 100644 index 00000000000..5feaf944038 --- /dev/null +++ b/app/assets/javascripts/pages/projects/environments/folder/index.js @@ -0,0 +1,3 @@ +import initEnvironmentsFolderBundle from '~/environments/folder/environments_folder_bundle'; + +document.addEventListener('DOMContentLoaded', initEnvironmentsFolderBundle); diff --git a/app/assets/javascripts/pages/projects/environments/index/index.js b/app/assets/javascripts/pages/projects/environments/index/index.js new file mode 100644 index 00000000000..ace8af00ece --- /dev/null +++ b/app/assets/javascripts/pages/projects/environments/index/index.js @@ -0,0 +1,3 @@ +import initEnviroments from '~/environments/'; + +document.addEventListener('DOMContentLoaded', initEnviroments); diff --git a/app/assets/javascripts/pages/projects/environments/terminal/index.js b/app/assets/javascripts/pages/projects/environments/terminal/index.js new file mode 100644 index 00000000000..7129e24cee1 --- /dev/null +++ b/app/assets/javascripts/pages/projects/environments/terminal/index.js @@ -0,0 +1,3 @@ +import initTerminal from '~/terminal/'; + +document.addEventListener('DOMContentLoaded', initTerminal); diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index 9b1d52692a3..de1e13de7e9 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,7 +1,7 @@ import Project from './project'; import ShortcutsNavigation from '../../shortcuts_navigation'; -export default () => { +document.addEventListener('DOMContentLoaded', () => { new Project(); // eslint-disable-line no-new new ShortcutsNavigation(); // eslint-disable-line no-new -}; +}); diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js new file mode 100644 index 00000000000..500fbd27340 --- /dev/null +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -0,0 +1,13 @@ +import initIssuableSidebar from '~/init_issuable_sidebar'; +import Issue from '~/issue'; +import ShortcutsIssuable from '~/shortcuts_issuable'; +import ZenMode from '~/zen_mode'; +import '~/notes/index'; +import '~/issue_show/index'; + +export default function () { + new Issue(); // eslint-disable-line no-new + new ShortcutsIssuable(); // eslint-disable-line no-new + new ZenMode(); // eslint-disable-line no-new + initIssuableSidebar(); +} diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js index 1e56aa58da2..7968dfd7a12 100644 --- a/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/app/assets/javascripts/pages/projects/issues/show/index.js @@ -1,13 +1,7 @@ -import initIssuableSidebar from '~/init_issuable_sidebar'; -import Issue from '~/issue'; -import ShortcutsIssuable from '~/shortcuts_issuable'; -import ZenMode from '~/zen_mode'; -import '~/notes/index'; -import '~/issue_show/index'; +import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initShow from '../show'; document.addEventListener('DOMContentLoaded', () => { - new Issue(); // eslint-disable-line no-new - new ShortcutsIssuable(); // eslint-disable-line no-new - new ZenMode(); // eslint-disable-line no-new - initIssuableSidebar(); + initShow(); + initSidebarBundle(); }); diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue new file mode 100644 index 00000000000..54695dfeb99 --- /dev/null +++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue @@ -0,0 +1,79 @@ +<script> + import axios from '~/lib/utils/axios_utils'; + import createFlash from '~/flash'; + import GlModal from '~/vue_shared/components/gl_modal.vue'; + import { s__, sprintf } from '~/locale'; + import { visitUrl } from '~/lib/utils/url_utility'; + import eventHub from '../event_hub'; + + export default { + components: { + GlModal, + }, + props: { + url: { + type: String, + required: true, + }, + labelTitle: { + type: String, + required: true, + }, + labelColor: { + type: String, + required: true, + }, + labelTextColor: { + type: String, + required: true, + }, + }, + computed: { + text() { + return s__(`Milestones|Promoting this label will make it available for all projects inside the group. + Existing project labels with the same title will be merged. This action cannot be reversed.`); + }, + title() { + const label = `<span + class="label color-label" + style="background-color: ${this.labelColor}; color: ${this.labelTextColor};" + >${this.labelTitle}</span>`; + + return sprintf(s__('Labels|Promote label %{labelTitle} to Group Label?'), { + labelTitle: label, + }, false); + }, + }, + methods: { + onSubmit() { + eventHub.$emit('promoteLabelModal.requestStarted', this.url); + return axios.post(this.url, { params: { format: 'json' } }) + .then((response) => { + eventHub.$emit('promoteLabelModal.requestFinished', { labelUrl: this.url, successful: true }); + visitUrl(response.data.url); + }) + .catch((error) => { + eventHub.$emit('promoteLabelModal.requestFinished', { labelUrl: this.url, successful: false }); + createFlash(error); + }); + }, + }, + }; +</script> +<template> + <gl-modal + id="promote-label-modal" + footer-primary-button-variant="warning" + :footer-primary-button-text="s__('Labels|Promote Label')" + @submit="onSubmit" + > + <div + slot="title" + v-html="title" + > + {{ title }} + </div> + + {{ text }} + </gl-modal> +</template> diff --git a/app/assets/javascripts/pages/projects/labels/event_hub.js b/app/assets/javascripts/pages/projects/labels/event_hub.js new file mode 100644 index 00000000000..0948c2e5352 --- /dev/null +++ b/app/assets/javascripts/pages/projects/labels/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js index 6e45de2a724..2abcbfab1ed 100644 --- a/app/assets/javascripts/pages/projects/labels/index/index.js +++ b/app/assets/javascripts/pages/projects/labels/index/index.js @@ -1,3 +1,91 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; import initLabels from '~/init_labels'; +import eventHub from '../event_hub'; +import PromoteLabelModal from '../components/promote_label_modal.vue'; -document.addEventListener('DOMContentLoaded', initLabels); +Vue.use(Translate); + +const initLabelIndex = () => { + initLabels(); + + const onRequestFinished = ({ labelUrl, successful }) => { + const button = document.querySelector(`.js-promote-project-label-button[data-url="${labelUrl}"]`); + + if (!successful) { + button.removeAttribute('disabled'); + } + }; + + const onRequestStarted = (labelUrl) => { + const button = document.querySelector(`.js-promote-project-label-button[data-url="${labelUrl}"]`); + button.setAttribute('disabled', ''); + eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished); + }; + + const onDeleteButtonClick = (event) => { + const button = event.currentTarget; + const modalProps = { + labelTitle: button.dataset.labelTitle, + labelColor: button.dataset.labelColor, + labelTextColor: button.dataset.labelTextColor, + url: button.dataset.url, + }; + eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted); + eventHub.$emit('promoteLabelModal.props', modalProps); + }; + + const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button'); + promoteLabelButtons.forEach((button) => { + button.addEventListener('click', onDeleteButtonClick); + }); + + eventHub.$once('promoteLabelModal.mounted', () => { + promoteLabelButtons.forEach((button) => { + button.removeAttribute('disabled'); + }); + }); + + const promoteLabelModal = document.getElementById('promote-label-modal'); + let promoteLabelModalComponent; + + if (promoteLabelModal) { + promoteLabelModalComponent = new Vue({ + el: promoteLabelModal, + components: { + PromoteLabelModal, + }, + data() { + return { + modalProps: { + labelTitle: '', + labelColor: '', + labelTextColor: '', + url: '', + }, + }; + }, + mounted() { + eventHub.$on('promoteLabelModal.props', this.setModalProps); + eventHub.$emit('promoteLabelModal.mounted'); + }, + beforeDestroy() { + eventHub.$off('promoteLabelModal.props', this.setModalProps); + }, + methods: { + setModalProps(modalProps) { + this.modalProps = modalProps; + }, + }, + render(createElement) { + return createElement('promote-label-modal', { + props: this.modalProps, + }); + }, + }); + } + + return promoteLabelModalComponent; +}; + +document.addEventListener('DOMContentLoaded', initLabelIndex); diff --git a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js new file mode 100644 index 00000000000..28641104c58 --- /dev/null +++ b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js @@ -0,0 +1,7 @@ +import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initMergeConflicts from '~/merge_conflicts/merge_conflicts_bundle'; + +document.addEventListener('DOMContentLoaded', () => { + initSidebarBundle(); + initMergeConflicts(); +}); diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js index 1d5aec4001d..6c9afddefac 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js @@ -1,5 +1,6 @@ import Compare from '~/compare'; import MergeRequest from '~/merge_request'; +import initPipelines from '~/commit/pipelines/pipelines_bundle'; document.addEventListener('DOMContentLoaded', () => { const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare'); @@ -14,5 +15,6 @@ document.addEventListener('DOMContentLoaded', () => { new MergeRequest({ // eslint-disable-line no-new action: mrNewSubmitNode.dataset.mrSubmitAction, }); + initPipelines(); } }); diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js new file mode 100644 index 00000000000..28d8761b502 --- /dev/null +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js @@ -0,0 +1,32 @@ +import MergeRequest from '~/merge_request'; +import ZenMode from '~/zen_mode'; +import initNotes from '~/init_notes'; +import initIssuableSidebar from '~/init_issuable_sidebar'; +import initDiffNotes from '~/diff_notes/diff_notes_bundle'; +import ShortcutsIssuable from '~/shortcuts_issuable'; +import Diff from '~/diff'; +import { handleLocationHash } from '~/lib/utils/common_utils'; +import howToMerge from '~/how_to_merge'; +import initPipelines from '~/commit/pipelines/pipelines_bundle'; +import initWidget from '../../../vue_merge_request_widget'; + +export default function () { + new Diff(); // eslint-disable-line no-new + new ZenMode(); // eslint-disable-line no-new + + initIssuableSidebar(); + initNotes(); + initDiffNotes(); + initPipelines(); + + const mrShowNode = document.querySelector('.merge-request'); + + window.mergeRequest = new MergeRequest({ + action: mrShowNode.dataset.mrAction, + }); + + new ShortcutsIssuable(true); // eslint-disable-line no-new + handleLocationHash(); + howToMerge(); + initWidget(); +} diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js index 07f3e579c97..e5b2827b50c 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js @@ -1,28 +1,13 @@ -import MergeRequest from '~/merge_request'; -import ZenMode from '~/zen_mode'; -import initNotes from '~/init_notes'; -import initIssuableSidebar from '~/init_issuable_sidebar'; -import initDiffNotes from '~/diff_notes/diff_notes_bundle'; -import ShortcutsIssuable from '~/shortcuts_issuable'; -import Diff from '~/diff'; -import { handleLocationHash } from '~/lib/utils/common_utils'; -import howToMerge from '~/how_to_merge'; +import { hasVueMRDiscussionsCookie } from '~/lib/utils/common_utils'; +import initMrNotes from '~/mr_notes'; +import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initShow from '../init_merge_request_show'; document.addEventListener('DOMContentLoaded', () => { - new Diff(); // eslint-disable-line no-new - new ZenMode(); // eslint-disable-line no-new + initShow(); + initSidebarBundle(); - initIssuableSidebar(); - initNotes(); - initDiffNotes(); - - const mrShowNode = document.querySelector('.merge-request'); - - window.mergeRequest = new MergeRequest({ - action: mrShowNode.dataset.mrAction, - }); - - new ShortcutsIssuable(true); // eslint-disable-line no-new - handleLocationHash(); - howToMerge(); + if (hasVueMRDiscussionsCookie()) { + initMrNotes(); + } }); diff --git a/app/assets/javascripts/network/network.js b/app/assets/javascripts/pages/projects/network/network.js index a3fd22aff2a..7354243e4c8 100644 --- a/app/assets/javascripts/network/network.js +++ b/app/assets/javascripts/pages/projects/network/network.js @@ -1,6 +1,6 @@ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */ -import BranchGraph from './branch_graph'; +import BranchGraph from '../../../network/branch_graph'; export default (function() { function Network(opts) { diff --git a/app/assets/javascripts/pages/projects/network/show/index.js b/app/assets/javascripts/pages/projects/network/show/index.js new file mode 100644 index 00000000000..e7dfd2d0128 --- /dev/null +++ b/app/assets/javascripts/pages/projects/network/show/index.js @@ -0,0 +1,16 @@ +import ShortcutsNetwork from '../../../../shortcuts_network'; +import Network from '../network'; + +document.addEventListener('DOMContentLoaded', () => { + if (!$('.network-graph').length) return; + + const networkGraph = new Network({ + url: $('.network-graph').attr('data-url'), + commit_url: $('.network-graph').attr('data-commit-url'), + ref: $('.network-graph').attr('data-ref'), + commit_id: $('.network-graph').attr('data-commit-id'), + }); + + // eslint-disable-next-line no-new + new ShortcutsNetwork(networkGraph.branch_graph); +}); diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index 71c49deb9d0..ea6fd961393 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -2,8 +2,8 @@ import ProjectNew from '../shared/project_new'; import initProjectVisibilitySelector from '../../../project_visibility'; import initProjectNew from '../../../projects/project_new'; -export default () => { +document.addEventListener('DOMContentLoaded', () => { new ProjectNew(); // eslint-disable-line no-new initProjectVisibilitySelector(); initProjectNew.bindEvents(); -}; +}); diff --git a/app/assets/javascripts/pages/projects/pipelines/builds/index.js b/app/assets/javascripts/pages/projects/pipelines/builds/index.js index fbe9824c34b..7a57e417b41 100644 --- a/app/assets/javascripts/pages/projects/pipelines/builds/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/builds/index.js @@ -1,3 +1,7 @@ +import initPipelineDetails from '~/pipelines/pipeline_details_bundle'; import initPipelines from '../init_pipelines'; -document.addEventListener('DOMContentLoaded', initPipelines); +document.addEventListener('DOMContentLoaded', () => { + initPipelines(); + initPipelineDetails(); +}); diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js new file mode 100644 index 00000000000..a84e2790680 --- /dev/null +++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import PipelinesStore from '../../../../pipelines/stores/pipelines_store'; +import pipelinesComponent from '../../../../pipelines/components/pipelines.vue'; +import Translate from '../../../../vue_shared/translate'; +import { convertPermissionToBoolean } from '../../../../lib/utils/common_utils'; + +Vue.use(Translate); + +document.addEventListener('DOMContentLoaded', () => new Vue({ + el: '#pipelines-list-vue', + components: { + pipelinesComponent, + }, + data() { + return { + store: new PipelinesStore(), + }; + }, + created() { + this.dataset = document.querySelector(this.$options.el).dataset; + }, + render(createElement) { + return createElement('pipelines-component', { + props: { + store: this.store, + endpoint: this.dataset.endpoint, + helpPagePath: this.dataset.helpPagePath, + emptyStateSvgPath: this.dataset.emptyStateSvgPath, + errorStateSvgPath: this.dataset.errorStateSvgPath, + noPipelinesSvgPath: this.dataset.noPipelinesSvgPath, + autoDevopsPath: this.dataset.helpAutoDevopsPath, + newPipelinePath: this.dataset.newPipelinePath, + canCreatePipeline: convertPermissionToBoolean(this.dataset.canCreatePipeline), + hasGitlabCi: convertPermissionToBoolean(this.dataset.hasGitlabCi), + ciLintPath: this.dataset.ciLintPath, + resetCachePath: this.dataset.resetCachePath, + }, + }); + }, +})); diff --git a/app/assets/javascripts/pages/projects/pipelines/show/index.js b/app/assets/javascripts/pages/projects/pipelines/show/index.js index fbe9824c34b..7a57e417b41 100644 --- a/app/assets/javascripts/pages/projects/pipelines/show/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/show/index.js @@ -1,3 +1,7 @@ +import initPipelineDetails from '~/pipelines/pipeline_details_bundle'; import initPipelines from '../init_pipelines'; -document.addEventListener('DOMContentLoaded', initPipelines); +document.addEventListener('DOMContentLoaded', () => { + initPipelines(); + initPipelineDetails(); +}); diff --git a/app/assets/javascripts/pages/projects/registry/repositories/index.js b/app/assets/javascripts/pages/projects/registry/repositories/index.js new file mode 100644 index 00000000000..35564754ee0 --- /dev/null +++ b/app/assets/javascripts/pages/projects/registry/repositories/index.js @@ -0,0 +1,3 @@ +import initRegistryImages from '~/registry/index'; + +document.addEventListener('DOMContentLoaded', initRegistryImages); diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js index 5a6f4138b10..788d86d1192 100644 --- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js @@ -1,7 +1,17 @@ +/* eslint-disable no-new */ + +import ProtectedTagCreate from '~/protected_tags/protected_tag_create'; +import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list'; import initSettingsPanels from '~/settings_panels'; import initDeployKeys from '~/deploy_keys'; +import ProtectedBranchCreate from '~/protected_branches/protected_branch_create'; +import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list'; document.addEventListener('DOMContentLoaded', () => { + new ProtectedTagCreate(); + new ProtectedTagEditList(); initDeployKeys(); initSettingsPanels(); + new ProtectedBranchCreate(); // eslint-disable-line no-new + new ProtectedBranchEditList(); // eslint-disable-line no-new }); diff --git a/app/assets/javascripts/pages/projects/snippets/edit/index.js b/app/assets/javascripts/pages/projects/snippets/edit/index.js index caf9ee9b398..c15f798b630 100644 --- a/app/assets/javascripts/pages/projects/snippets/edit/index.js +++ b/app/assets/javascripts/pages/projects/snippets/edit/index.js @@ -1,3 +1,7 @@ +import initSnippet from '~/snippet/snippet_bundle'; import initForm from '~/pages/projects/init_form'; -document.addEventListener('DOMContentLoaded', () => initForm($('.snippet-form'))); +document.addEventListener('DOMContentLoaded', () => { + initSnippet(); + initForm($('.snippet-form')); +}); diff --git a/app/assets/javascripts/pages/projects/snippets/new/index.js b/app/assets/javascripts/pages/projects/snippets/new/index.js index caf9ee9b398..c15f798b630 100644 --- a/app/assets/javascripts/pages/projects/snippets/new/index.js +++ b/app/assets/javascripts/pages/projects/snippets/new/index.js @@ -1,3 +1,7 @@ +import initSnippet from '~/snippet/snippet_bundle'; import initForm from '~/pages/projects/init_form'; -document.addEventListener('DOMContentLoaded', () => initForm($('.snippet-form'))); +document.addEventListener('DOMContentLoaded', () => { + initSnippet(); + initForm($('.snippet-form')); +}); diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js index eb14c7a0e78..b9f8707fd6e 100644 --- a/app/assets/javascripts/pages/projects/wikis/index.js +++ b/app/assets/javascripts/pages/projects/wikis/index.js @@ -3,9 +3,9 @@ import ShortcutsWiki from '../../../shortcuts_wiki'; import ZenMode from '../../../zen_mode'; import GLForm from '../../../gl_form'; -export default () => { +document.addEventListener('DOMContentLoaded', () => { new Wikis(); // eslint-disable-line no-new new ShortcutsWiki(); // eslint-disable-line no-new new ZenMode(); // eslint-disable-line no-new new GLForm($('.wiki-form'), true); // eslint-disable-line no-new -}; +}); diff --git a/app/assets/javascripts/pages/search/init_filtered_search.js b/app/assets/javascripts/pages/search/init_filtered_search.js index de8d4168d71..7fdf4ee0bf3 100644 --- a/app/assets/javascripts/pages/search/init_filtered_search.js +++ b/app/assets/javascripts/pages/search/init_filtered_search.js @@ -1,9 +1,23 @@ import FilteredSearchManager from '~/filtered_search/filtered_search_manager'; -export default ({ page }) => { +export default ({ + page, + filteredSearchTokenKeys, + isGroup, + isGroupAncestor, + isGroupDecendent, + stateFiltersSelector, +}) => { const filteredSearchEnabled = FilteredSearchManager && document.querySelector('.filtered-search'); if (filteredSearchEnabled) { - const filteredSearchManager = new FilteredSearchManager({ page }); + const filteredSearchManager = new FilteredSearchManager({ + page, + isGroup, + isGroupAncestor, + isGroupDecendent, + filteredSearchTokenKeys, + stateFiltersSelector, + }); filteredSearchManager.setup(); } }; diff --git a/app/assets/javascripts/pages/snippets/edit/index.js b/app/assets/javascripts/pages/snippets/edit/index.js index 2ee38b64ca1..d86e1632ae5 100644 --- a/app/assets/javascripts/pages/snippets/edit/index.js +++ b/app/assets/javascripts/pages/snippets/edit/index.js @@ -1,3 +1,7 @@ +import initSnippet from '~/snippet/snippet_bundle'; import form from '../form'; -document.addEventListener('DOMContentLoaded', form); +document.addEventListener('DOMContentLoaded', () => { + initSnippet(); + form(); +}); diff --git a/app/assets/javascripts/pages/snippets/new/index.js b/app/assets/javascripts/pages/snippets/new/index.js index 2ee38b64ca1..d86e1632ae5 100644 --- a/app/assets/javascripts/pages/snippets/new/index.js +++ b/app/assets/javascripts/pages/snippets/new/index.js @@ -1,3 +1,7 @@ +import initSnippet from '~/snippet/snippet_bundle'; import form from '../form'; -document.addEventListener('DOMContentLoaded', form); +document.addEventListener('DOMContentLoaded', () => { + initSnippet(); + form(); +}); diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue new file mode 100644 index 00000000000..8d3d6223d7b --- /dev/null +++ b/app/assets/javascripts/pipelines/components/blank_state.vue @@ -0,0 +1,32 @@ +<script> + export default { + name: 'PipelinesSvgState', + props: { + svgPath: { + type: String, + required: true, + }, + + message: { + type: String, + required: true, + }, + }, + }; +</script> + +<template> + <div class="row empty-state"> + <div class="col-xs-12"> + <div class="svg-content"> + <img :src="svgPath" /> + </div> + </div> + + <div class="col-xs-12 text-center"> + <div class="text-content"> + <h4>{{ message }}</h4> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue index dfaa2574091..10ac8c08bed 100644 --- a/app/assets/javascripts/pipelines/components/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/empty_state.vue @@ -1,5 +1,6 @@ <script> export default { + name: 'PipelinesEmptyState', props: { helpPagePath: { type: String, @@ -9,6 +10,10 @@ type: String, required: true, }, + canSetCi: { + type: Boolean, + required: true, + }, }, }; </script> @@ -22,22 +27,36 @@ <div class="col-xs-12"> <div class="text-content"> - <h4 class="text-center"> - {{ s__("Pipelines|Build with confidence") }} - </h4> - <p> - {{ s__(`Pipelines|Continous Integration can help -catch bugs by running your tests automatically, -while Continuous Deployment can help you deliver code to your product environment.`) }} + + <template v-if="canSetCi"> + <h4 class="text-center"> + {{ s__('Pipelines|Build with confidence') }} + </h4> + + <p> + {{ s__(`Pipelines|Continous Integration can help + catch bugs by running your tests automatically, + while Continuous Deployment can help you deliver + code to your product environment.`) }} + </p> + + <div class="text-center"> + <a + :href="helpPagePath" + class="btn btn-primary js-get-started-pipelines" + > + {{ s__('Pipelines|Get started with Pipelines') }} + </a> + </div> + </template> + + <p + v-else + class="text-center" + > + {{ s__('Pipelines|This project is not currently set up to run pipelines.') }} </p> - <div class="text-center"> - <a - :href="helpPagePath" - class="btn btn-info" - > - {{ s__("Pipelines|Get started with Pipelines") }} - </a> - </div> + </div> </div> </div> diff --git a/app/assets/javascripts/pipelines/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue deleted file mode 100644 index 012853b201d..00000000000 --- a/app/assets/javascripts/pipelines/components/error_state.vue +++ /dev/null @@ -1,26 +0,0 @@ -<script> -export default { - props: { - errorStateSvgPath: { - type: String, - required: true, - }, - }, -}; -</script> - -<template> - <div class="row empty-state js-pipelines-error-state"> - <div class="col-xs-12"> - <div class="svg-content"> - <img :src="errorStateSvgPath"/> - </div> - </div> - - <div class="col-xs-12 text-center"> - <div class="text-content"> - <h4>The API failed to fetch the pipelines.</h4> - </div> - </div> - </div> -</template> diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue index f31a91c3403..eba5678e3e5 100644 --- a/app/assets/javascripts/pipelines/components/nav_controls.vue +++ b/app/assets/javascripts/pipelines/components/nav_controls.vue @@ -1,67 +1,67 @@ <script> -export default { - name: 'PipelineNavControls', - props: { - newPipelinePath: { - type: String, - required: true, - }, + import LoadingButton from '../../vue_shared/components/loading_button.vue'; - hasCiEnabled: { - type: Boolean, - required: true, + export default { + name: 'PipelineNavControls', + components: { + LoadingButton, }, + props: { + newPipelinePath: { + type: String, + required: false, + default: null, + }, - helpPagePath: { - type: String, - required: true, - }, + resetCachePath: { + type: String, + required: false, + default: null, + }, - resetCachePath: { - type: String, - required: true, - }, + ciLintPath: { + type: String, + required: false, + default: null, + }, - ciLintPath: { - type: String, - required: true, + isResetCacheButtonLoading: { + type: Boolean, + required: false, + default: false, + }, }, - - canCreatePipeline: { - type: Boolean, - required: true, + methods: { + onClickResetCache() { + this.$emit('resetRunnersCache', this.resetCachePath); + }, }, - }, -}; + }; </script> <template> <div class="nav-controls"> <a - v-if="canCreatePipeline" + v-if="newPipelinePath" :href="newPipelinePath" - class="btn btn-create"> - Run Pipeline + class="btn btn-create js-run-pipeline" + > + {{ s__('Pipelines|Run Pipeline') }} </a> - <a - v-if="!hasCiEnabled" - :href="helpPagePath" - class="btn btn-info"> - Get started with Pipelines - </a> - - <a - data-method="post" - rel="nofollow" - :href="resetCachePath" - class="btn btn-default"> - Clear runner caches - </a> + <loading-button + v-if="resetCachePath" + @click="onClickResetCache" + :loading="isResetCacheButtonLoading" + class="btn btn-default js-clear-cache" + :label="s__('Pipelines|Clear Runner Caches')" + /> <a + v-if="ciLintPath" :href="ciLintPath" - class="btn btn-default"> - CI Lint + class="btn btn-default js-ci-lint" + > + {{ s__('Pipelines|CI Lint') }} </a> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 90930d5ff44..e0a7284124d 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -1,12 +1,13 @@ <script> import _ from 'underscore'; + import { __, sprintf, s__ } from '../../locale'; + import createFlash from '../../flash'; import PipelinesService from '../services/pipelines_service'; import pipelinesMixin from '../mixins/pipelines'; - import tablePagination from '../../vue_shared/components/table_pagination.vue'; - import navigationTabs from '../../vue_shared/components/navigation_tabs.vue'; - import navigationControls from './nav_controls.vue'; + import TablePagination from '../../vue_shared/components/table_pagination.vue'; + import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue'; + import NavigationControls from './nav_controls.vue'; import { - convertPermissionToBoolean, getParameterByName, parseQueryStringIntoObject, } from '../../lib/utils/common_utils'; @@ -14,9 +15,9 @@ export default { components: { - tablePagination, - navigationTabs, - navigationControls, + TablePagination, + NavigationTabs, + NavigationControls, }, mixins: [ pipelinesMixin, @@ -36,111 +37,187 @@ required: false, default: 'root', }, + endpoint: { + type: String, + required: true, + }, + helpPagePath: { + type: String, + required: true, + }, + emptyStateSvgPath: { + type: String, + required: true, + }, + errorStateSvgPath: { + type: String, + required: true, + }, + noPipelinesSvgPath: { + type: String, + required: true, + }, + autoDevopsPath: { + type: String, + required: true, + }, + hasGitlabCi: { + type: Boolean, + required: true, + }, + canCreatePipeline: { + type: Boolean, + required: true, + }, + ciLintPath: { + type: String, + required: false, + default: null, + }, + resetCachePath: { + type: String, + required: false, + default: null, + }, + newPipelinePath: { + type: String, + required: false, + default: null, + }, }, data() { - const pipelinesData = document.querySelector('#pipelines-list-vue').dataset; - return { - endpoint: pipelinesData.endpoint, - helpPagePath: pipelinesData.helpPagePath, - emptyStateSvgPath: pipelinesData.emptyStateSvgPath, - errorStateSvgPath: pipelinesData.errorStateSvgPath, - autoDevopsPath: pipelinesData.helpAutoDevopsPath, - newPipelinePath: pipelinesData.newPipelinePath, - canCreatePipeline: pipelinesData.canCreatePipeline, - hasCi: pipelinesData.hasCi, - ciLintPath: pipelinesData.ciLintPath, - resetCachePath: pipelinesData.resetCachePath, + // Start with loading state to avoid a glitch when the empty state will be rendered + isLoading: true, state: this.store.state, scope: getParameterByName('scope') || 'all', page: getParameterByName('page') || '1', requestData: {}, + isResetCacheButtonLoading: false, }; }, - computed: { - canCreatePipelineParsed() { - return convertPermissionToBoolean(this.canCreatePipeline); - }, + stateMap: { + // with tabs + loading: 'loading', + tableList: 'tableList', + error: 'error', + emptyTab: 'emptyTab', + // without tabs + emptyState: 'emptyState', + }, + scopes: { + all: 'all', + pending: 'pending', + running: 'running', + finished: 'finished', + branches: 'branches', + tags: 'tags', + }, + computed: { /** - * The empty state should only be rendered when the request is made to fetch all pipelines - * and none is returned. - * - * @return {Boolean} - */ - shouldRenderEmptyState() { - return !this.isLoading && - !this.hasError && - this.hasMadeRequest && - !this.state.pipelines.length && - (this.scope === 'all' || this.scope === null); + * `hasGitlabCi` handles both internal and external CI. + * The order on which the checks are made in this method is + * important to guarantee we handle all the corner cases. + */ + stateToRender() { + const { stateMap } = this.$options; + + if (this.isLoading) { + return stateMap.loading; + } + + if (this.hasError) { + return stateMap.error; + } + + if (this.state.pipelines.length) { + return stateMap.tableList; + } + + if ((this.scope !== 'all' && this.scope !== null) || this.hasGitlabCi) { + return stateMap.emptyTab; + } + + return stateMap.emptyState; }, /** - * When a specific scope does not have pipelines we render a message. - * - * @return {Boolean} + * Tabs are rendered in all states except empty state. + * They are not rendered before the first request to avoid a flicker on first load. */ - shouldRenderNoPipelinesMessage() { - return !this.isLoading && - !this.hasError && - !this.state.pipelines.length && - this.scope !== 'all' && - this.scope !== null; + shouldRenderTabs() { + const { stateMap } = this.$options; + return this.hasMadeRequest && + [ + stateMap.loading, + stateMap.tableList, + stateMap.error, + stateMap.emptyTab, + ].includes(this.stateToRender); }, - shouldRenderTable() { - return !this.hasError && - !this.isLoading && this.state.pipelines.length; + shouldRenderButtons() { + return (this.newPipelinePath || + this.resetCachePath || + this.ciLintPath) && this.shouldRenderTabs; }, - /** - * Pagination should only be rendered when there is more than one page. - * - * @return {Boolean} - */ + shouldRenderPagination() { return !this.isLoading && this.state.pipelines.length && this.state.pageInfo.total > this.state.pageInfo.perPage; }, - hasCiEnabled() { - return this.hasCi !== undefined; + + emptyTabMessage() { + const { scopes } = this.$options; + const possibleScopes = [scopes.pending, scopes.running, scopes.finished]; + + if (possibleScopes.includes(this.scope)) { + return sprintf(s__('Pipelines|There are currently no %{scope} pipelines.'), { + scope: this.scope, + }); + } + + return s__('Pipelines|There are currently no pipelines.'); }, tabs() { const { count } = this.state; + const { scopes } = this.$options; + return [ { - name: 'All', - scope: 'all', + name: __('All'), + scope: scopes.all, count: count.all, isActive: this.scope === 'all', }, { - name: 'Pending', - scope: 'pending', + name: __('Pending'), + scope: scopes.pending, count: count.pending, isActive: this.scope === 'pending', }, { - name: 'Running', - scope: 'running', + name: __('Running'), + scope: scopes.running, count: count.running, isActive: this.scope === 'running', }, { - name: 'Finished', - scope: 'finished', + name: __('Finished'), + scope: scopes.finished, count: count.finished, isActive: this.scope === 'finished', }, { - name: 'Branches', - scope: 'branches', + name: __('Branches'), + scope: scopes.branches, isActive: this.scope === 'branches', }, { - name: 'Tags', - scope: 'tags', + name: __('Tags'), + scope: scopes.tags, isActive: this.scope === 'tags', }, ]; @@ -187,7 +264,24 @@ this.errorCallback(); // restart polling - this.poll.restart(); + this.poll.restart({ data: this.requestData }); + }); + }, + + handleResetRunnersCache(endpoint) { + this.isResetCacheButtonLoading = true; + + this.service.postAction(endpoint) + .then(() => { + this.isResetCacheButtonLoading = false; + createFlash( + s__('Pipelines|Project cache successfully reset.'), + 'notice', + ); + }) + .catch(() => { + this.isResetCacheButtonLoading = false; + createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.')); }); }, }, @@ -197,69 +291,72 @@ <div class="pipelines-container"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs" - v-if="!shouldRenderEmptyState" + v-if="shouldRenderTabs || shouldRenderButtons" > <div class="fade-left"> <i class="fa fa-angle-left" - aria-hidden="true"> + aria-hidden="true" + > </i> </div> <div class="fade-right"> <i class="fa fa-angle-right" - aria-hidden="true"> + aria-hidden="true" + > </i> </div> <navigation-tabs + v-if="shouldRenderTabs" :tabs="tabs" @onChangeTab="onChangeTab" scope="pipelines" /> <navigation-controls + v-if="shouldRenderButtons" :new-pipeline-path="newPipelinePath" - :has-ci-enabled="hasCiEnabled" - :help-page-path="helpPagePath" :reset-cache-path="resetCachePath" :ci-lint-path="ciLintPath" - :can-create-pipeline="canCreatePipelineParsed " + @resetRunnersCache="handleResetRunnersCache" + :is-reset-cache-button-loading="isResetCacheButtonLoading" /> </div> <div class="content-list pipelines"> <loading-icon - label="Loading Pipelines" + v-if="stateToRender === $options.stateMap.loading" + :label="s__('Pipelines|Loading Pipelines')" size="3" - v-if="isLoading" class="prepend-top-20" /> <empty-state - v-if="shouldRenderEmptyState" + v-else-if="stateToRender === $options.stateMap.emptyState" :help-page-path="helpPagePath" :empty-state-svg-path="emptyStateSvgPath" + :can-set-ci="canCreatePipeline" /> - <error-state - v-if="shouldRenderErrorState" - :error-state-svg-path="errorStateSvgPath" + <svg-blank-state + v-else-if="stateToRender === $options.stateMap.error" + :svg-path="errorStateSvgPath" + :message="s__(`Pipelines|There was an error fetching the pipelines. + Try again in a few moments or contact your support team.`)" /> - <div - class="blank-state-row" - v-if="shouldRenderNoPipelinesMessage" - > - <div class="blank-state-center"> - <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2> - </div> - </div> + <svg-blank-state + v-else-if="stateToRender === $options.stateMap.emptyTab" + :svg-path="noPipelinesSvgPath" + :message="emptyTabMessage" + /> <div class="table-holder" - v-if="shouldRenderTable" + v-else-if="stateToRender === $options.stateMap.tableList" > <pipelines-table-component diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index 2ba59051773..4cbd67e0372 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -316,7 +316,7 @@ v-if="pipeline.flags.cancelable" :endpoint="pipeline.cancel_path" css-class="js-pipelines-cancel-button btn-remove" - title="Cancel" + title="Stop" icon="close" :pipeline-id="pipeline.id" data-toggle="modal" diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js index 50bdf80c3e3..522a4277bd7 100644 --- a/app/assets/javascripts/pipelines/mixins/pipelines.js +++ b/app/assets/javascripts/pipelines/mixins/pipelines.js @@ -1,23 +1,19 @@ import Visibility from 'visibilityjs'; +import { __ } from '../../locale'; import Flash from '../../flash'; import Poll from '../../lib/utils/poll'; -import emptyState from '../components/empty_state.vue'; -import errorState from '../components/error_state.vue'; -import loadingIcon from '../../vue_shared/components/loading_icon.vue'; -import pipelinesTableComponent from '../components/pipelines_table.vue'; +import EmptyState from '../components/empty_state.vue'; +import SvgBlankState from '../components/blank_state.vue'; +import LoadingIcon from '../../vue_shared/components/loading_icon.vue'; +import PipelinesTableComponent from '../components/pipelines_table.vue'; import eventHub from '../event_hub'; export default { components: { - pipelinesTableComponent, - errorState, - emptyState, - loadingIcon, - }, - computed: { - shouldRenderErrorState() { - return this.hasError && !this.isLoading; - }, + PipelinesTableComponent, + SvgBlankState, + EmptyState, + LoadingIcon, }, data() { return { @@ -55,12 +51,10 @@ export default { } }); - eventHub.$on('refreshPipelines', this.fetchPipelines); eventHub.$on('postAction', this.postAction); }, beforeDestroy() { - eventHub.$off('refreshPipelines'); - eventHub.$on('postAction', this.postAction); + eventHub.$off('postAction', this.postAction); }, destroyed() { this.poll.stop(); @@ -85,6 +79,7 @@ export default { this.hasError = true; this.isLoading = false; this.updateGraphDropdown = false; + this.hasMadeRequest = true; }, setIsMakingRequest(isMakingRequest) { this.isMakingRequest = isMakingRequest; @@ -95,8 +90,8 @@ export default { }, postAction(endpoint) { this.service.postAction(endpoint) - .then(() => eventHub.$emit('refreshPipelines')) - .catch(() => new Flash('An error occurred while making the request.')); + .then(() => this.fetchPipelines()) + .catch(() => Flash(__('An error occurred while making the request.'))); }, }, }; diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js index 705a60b3ba2..6b26708148c 100644 --- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js +++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js @@ -9,7 +9,7 @@ import eventHub from './event_hub'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { +export default () => { const dataset = document.querySelector('.js-pipeline-details-vue').dataset; const mediator = new PipelinesMediator({ endpoint: dataset.endpoint }); @@ -70,4 +70,4 @@ document.addEventListener('DOMContentLoaded', () => { }); }, }); -}); +}; diff --git a/app/assets/javascripts/pipelines/pipelines_bundle.js b/app/assets/javascripts/pipelines/pipelines_bundle.js deleted file mode 100644 index ab5596e70f0..00000000000 --- a/app/assets/javascripts/pipelines/pipelines_bundle.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; -import PipelinesStore from './stores/pipelines_store'; -import pipelinesComponent from './components/pipelines.vue'; -import Translate from '../vue_shared/translate'; - -Vue.use(Translate); - -document.addEventListener('DOMContentLoaded', () => new Vue({ - el: '#pipelines-list-vue', - components: { - pipelinesComponent, - }, - data() { - const store = new PipelinesStore(); - - return { - store, - }; - }, - render(createElement) { - return createElement('pipelines-component', { - props: { - store: this.store, - }, - }); - }, -})); diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js index e2285494e62..47736fc5f42 100644 --- a/app/assets/javascripts/pipelines/services/pipelines_service.js +++ b/app/assets/javascripts/pipelines/services/pipelines_service.js @@ -1,6 +1,7 @@ /* eslint-disable class-methods-use-this */ import Vue from 'vue'; import VueResource from 'vue-resource'; +import '../../vue_shared/vue_resource_interceptor'; Vue.use(VueResource); diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js index 930f0fb381e..a811781853b 100644 --- a/app/assets/javascripts/profile/profile.js +++ b/app/assets/javascripts/profile/profile.js @@ -1,103 +1,85 @@ /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */ import Cookies from 'js-cookie'; -import { getPagePath } from '~/lib/utils/common_utils'; import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; import flash from '../flash'; -((global) => { - class Profile { - constructor({ form } = {}) { - this.onSubmitForm = this.onSubmitForm.bind(this); - this.form = form || $('.edit-user'); - this.newRepoActivated = Cookies.get('new_repo'); - this.setRepoRadio(); - this.bindEvents(); - this.initAvatarGlCrop(); - } - - initAvatarGlCrop() { - const cropOpts = { - filename: '.js-avatar-filename', - previewImage: '.avatar-image .avatar', - modalCrop: '.modal-profile-crop', - pickImageEl: '.js-choose-user-avatar-button', - uploadImageBtn: '.js-upload-user-avatar', - modalCropImg: '.modal-profile-crop-image' - }; - this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop'); - } +export default class Profile { + constructor({ form } = {}) { + this.onSubmitForm = this.onSubmitForm.bind(this); + this.form = form || $('.edit-user'); + this.newRepoActivated = Cookies.get('new_repo'); + this.setRepoRadio(); + this.bindEvents(); + this.initAvatarGlCrop(); + } - bindEvents() { - $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm); - $('input[name="user[multi_file]"]').on('change', this.setNewRepoCookie); - $('#user_notification_email').on('change', this.submitForm); - $('#user_notified_of_own_activity').on('change', this.submitForm); - this.form.on('submit', this.onSubmitForm); - } + initAvatarGlCrop() { + const cropOpts = { + filename: '.js-avatar-filename', + previewImage: '.avatar-image .avatar', + modalCrop: '.modal-profile-crop', + pickImageEl: '.js-choose-user-avatar-button', + uploadImageBtn: '.js-upload-user-avatar', + modalCropImg: '.modal-profile-crop-image' + }; + this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop'); + } - submitForm() { - return $(this).parents('form').submit(); - } + bindEvents() { + $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm); + $('input[name="user[multi_file]"]').on('change', this.setNewRepoCookie); + $('#user_notification_email').on('change', this.submitForm); + $('#user_notified_of_own_activity').on('change', this.submitForm); + this.form.on('submit', this.onSubmitForm); + } - onSubmitForm(e) { - e.preventDefault(); - return this.saveForm(); - } + submitForm() { + return $(this).parents('form').submit(); + } - saveForm() { - const self = this; - const formData = new FormData(this.form[0]); - const avatarBlob = this.avatarGlCrop.getBlob(); + onSubmitForm(e) { + e.preventDefault(); + return this.saveForm(); + } - if (avatarBlob != null) { - formData.append('user[avatar]', avatarBlob, 'avatar.png'); - } + saveForm() { + const self = this; + const formData = new FormData(this.form[0]); + const avatarBlob = this.avatarGlCrop.getBlob(); - axios({ - method: this.form.attr('method'), - url: this.form.attr('action'), - data: formData, - }) - .then(({ data }) => flash(data.message, 'notice')) - .then(() => { - window.scrollTo(0, 0); - // Enable submit button after requests ends - self.form.find(':input[disabled]').enable(); - }) - .catch(error => flash(error.message)); + if (avatarBlob != null) { + formData.append('user[avatar]', avatarBlob, 'avatar.png'); } - setNewRepoCookie() { - if (this.value === 'off') { - Cookies.remove('new_repo'); - } else { - Cookies.set('new_repo', true, { expires_in: 365 }); - } - } + axios({ + method: this.form.attr('method'), + url: this.form.attr('action'), + data: formData, + }) + .then(({ data }) => flash(data.message, 'notice')) + .then(() => { + window.scrollTo(0, 0); + // Enable submit button after requests ends + self.form.find(':input[disabled]').enable(); + }) + .catch(error => flash(error.message)); + } - setRepoRadio() { - const multiEditRadios = $('input[name="user[multi_file]"]'); - if (this.newRepoActivated || this.newRepoActivated === 'true') { - multiEditRadios.filter('[value=on]').prop('checked', true); - } else { - multiEditRadios.filter('[value=off]').prop('checked', true); - } + setNewRepoCookie() { + if (this.value === 'off') { + Cookies.remove('new_repo'); + } else { + Cookies.set('new_repo', true, { expires_in: 365 }); } } - $(function() { - $(document).on('input.ssh_key', '#key_key', function() { - const $title = $('#key_title'); - const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/); - - // Extract the SSH Key title from its comment - if (comment && comment.length > 1) { - return $title.val(comment[1]).change(); - } - }); - if (getPagePath() === 'profiles') { - return new Profile(); + setRepoRadio() { + const multiEditRadios = $('input[name="user[multi_file]"]'); + if (this.newRepoActivated || this.newRepoActivated === 'true') { + multiEditRadios.filter('[value=on]').prop('checked', true); + } else { + multiEditRadios.filter('[value=off]').prop('checked', true); } - }); -})(window.gl || (window.gl = {})); + } +} diff --git a/app/assets/javascripts/profile/profile_bundle.js b/app/assets/javascripts/profile/profile_bundle.js deleted file mode 100644 index ff35a9bcb83..00000000000 --- a/app/assets/javascripts/profile/profile_bundle.js +++ /dev/null @@ -1,2 +0,0 @@ -import './gl_crop'; -import './profile'; diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js index e8126ac573d..03bb281395a 100644 --- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js +++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js @@ -1,3 +1,5 @@ +import _ from 'underscore'; +import { s__, n__, sprintf } from '~/locale'; import axios from '../lib/utils/axios_utils'; import PANEL_STATE from './constants'; import { backOff } from '../lib/utils/common_utils'; @@ -20,6 +22,7 @@ export default class PrometheusMetrics { this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list'); this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics'); + this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path'); this.$panelToggle.on('click', e => this.handlePanelToggle(e)); } @@ -59,23 +62,39 @@ export default class PrometheusMetrics { populateActiveMetrics(metrics) { let totalMonitoredMetrics = 0; let totalMissingEnvVarMetrics = 0; + let totalExporters = 0; metrics.forEach((metric) => { - this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`); - totalMonitoredMetrics += metric.active_metrics; - if (metric.metrics_missing_requirements > 0) { - this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`); - totalMissingEnvVarMetrics += 1; + if (metric.active_metrics > 0) { + totalExporters += 1; + this.$monitoredMetricsList.append(`<li>${_.escape(metric.group)}<span class="badge">${_.escape(metric.active_metrics)}</span></li>`); + totalMonitoredMetrics += metric.active_metrics; + if (metric.metrics_missing_requirements > 0) { + this.$missingEnvVarMetricsList.append(`<li>${_.escape(metric.group)}</li>`); + totalMissingEnvVarMetrics += 1; + } } }); - this.$monitoredMetricsCount.text(totalMonitoredMetrics); - this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); + if (totalMonitoredMetrics === 0) { + const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), { + docsUrl: this.helpMetricsPath, + }, false); + this.$monitoredMetricsEmpty.empty(); + this.$monitoredMetricsEmpty.append(emptyCommonMetricsText); + this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); + } else { + const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), { + exporters: n__('%d exporter', '%d exporters', totalExporters), + metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics), + }); + this.$monitoredMetricsCount.text(metricsCountText); + this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); - if (totalMissingEnvVarMetrics > 0) { - this.$missingEnvVarPanel.removeClass('hidden'); - this.$missingEnvVarPanel.find('.flash-container').off('click'); - this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); + if (totalMissingEnvVarMetrics > 0) { + this.$missingEnvVarPanel.removeClass('hidden'); + this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); + } } } @@ -97,15 +116,15 @@ export default class PrometheusMetrics { }) .catch(stop); }) - .then((res) => { - if (res && res.data && res.data.length) { - this.populateActiveMetrics(res.data); - } else { + .then((res) => { + if (res && res.data && res.data.length) { + this.populateActiveMetrics(res.data); + } else { + this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); + } + }) + .catch(() => { this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - } - }) - .catch(() => { - this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); - }); + }); } } diff --git a/app/assets/javascripts/protected_branches/index.js b/app/assets/javascripts/protected_branches/index.js deleted file mode 100644 index c9e7af127d2..00000000000 --- a/app/assets/javascripts/protected_branches/index.js +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable no-unused-vars */ - -import ProtectedBranchCreate from './protected_branch_create'; -import ProtectedBranchEditList from './protected_branch_edit_list'; - -$(() => { - const protectedBranchCreate = new ProtectedBranchCreate(); - const protectedBranchEditList = new ProtectedBranchEditList(); -}); diff --git a/app/assets/javascripts/protected_tags/index.js b/app/assets/javascripts/protected_tags/index.js deleted file mode 100644 index b1618e24e49..00000000000 --- a/app/assets/javascripts/protected_tags/index.js +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable no-unused-vars */ - -import ProtectedTagCreate from './protected_tag_create'; -import ProtectedTagEditList from './protected_tag_edit_list'; - -$(() => { - const protectedtTagCreate = new ProtectedTagCreate(); - const protectedtTagEditList = new ProtectedTagEditList(); -}); diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index b4906ba4ee5..a03180e80e6 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -86,6 +86,7 @@ v-if="repo.location" :text="clipboardText" :title="repo.location" + css-class="btn-default btn-transparent btn-clipboard" /> <div class="controls hidden-xs pull-right"> diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index bef850eddc0..ee4eb3581f3 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -90,6 +90,7 @@ v-if="item.location" :title="item.location" :text="clipboardText(item.location)" + css-class="btn-default btn-transparent btn-clipboard" /> </td> <td> diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js index d8edff73f72..6fb125192b2 100644 --- a/app/assets/javascripts/registry/index.js +++ b/app/assets/javascripts/registry/index.js @@ -4,7 +4,7 @@ import Translate from '../vue_shared/translate'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => new Vue({ +export default () => new Vue({ el: '#js-vue-registry-images', components: { registryApp, @@ -22,4 +22,4 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ }, }); }, -})); +}); diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.js b/app/assets/javascripts/sidebar/components/assignees/assignees.js deleted file mode 100644 index 643877b9d47..00000000000 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.js +++ /dev/null @@ -1,224 +0,0 @@ -export default { - name: 'Assignees', - data() { - return { - defaultRenderCount: 5, - defaultMaxCounter: 99, - showLess: true, - }; - }, - props: { - rootPath: { - type: String, - required: true, - }, - users: { - type: Array, - required: true, - }, - editable: { - type: Boolean, - required: true, - }, - }, - computed: { - firstUser() { - return this.users[0]; - }, - hasMoreThanTwoAssignees() { - return this.users.length > 2; - }, - hasMoreThanOneAssignee() { - return this.users.length > 1; - }, - hasAssignees() { - return this.users.length > 0; - }, - hasNoUsers() { - return !this.users.length; - }, - hasOneUser() { - return this.users.length === 1; - }, - renderShowMoreSection() { - return this.users.length > this.defaultRenderCount; - }, - numberOfHiddenAssignees() { - return this.users.length - this.defaultRenderCount; - }, - isHiddenAssignees() { - return this.numberOfHiddenAssignees > 0; - }, - hiddenAssigneesLabel() { - return `+ ${this.numberOfHiddenAssignees} more`; - }, - collapsedTooltipTitle() { - const maxRender = Math.min(this.defaultRenderCount, this.users.length); - const renderUsers = this.users.slice(0, maxRender); - const names = renderUsers.map(u => u.name); - - if (this.users.length > maxRender) { - names.push(`+ ${this.users.length - maxRender} more`); - } - - return names.join(', '); - }, - sidebarAvatarCounter() { - let counter = `+${this.users.length - 1}`; - - if (this.users.length > this.defaultMaxCounter) { - counter = `${this.defaultMaxCounter}+`; - } - - return counter; - }, - }, - methods: { - assignSelf() { - this.$emit('assign-self'); - }, - toggleShowLess() { - this.showLess = !this.showLess; - }, - renderAssignee(index) { - return !this.showLess || (index < this.defaultRenderCount && this.showLess); - }, - avatarUrl(user) { - return user.avatar || user.avatar_url || gon.default_avatar_url; - }, - assigneeUrl(user) { - return `${this.rootPath}${user.username}`; - }, - assigneeAlt(user) { - return `${user.name}'s avatar`; - }, - assigneeUsername(user) { - return `@${user.username}`; - }, - shouldRenderCollapsedAssignee(index) { - const firstTwo = this.users.length <= 2 && index <= 2; - - return index === 0 || firstTwo; - }, - }, - template: ` - <div> - <div - class="sidebar-collapsed-icon sidebar-collapsed-user" - :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }" - data-container="body" - data-placement="left" - :title="collapsedTooltipTitle" - > - <i - v-if="hasNoUsers" - aria-label="No Assignee" - class="fa fa-user" - /> - <button - type="button" - class="btn-link" - v-for="(user, index) in users" - v-if="shouldRenderCollapsedAssignee(index)" - > - <img - width="24" - class="avatar avatar-inline s24" - :alt="assigneeAlt(user)" - :src="avatarUrl(user)" - /> - <span class="author"> - {{ user.name }} - </span> - </button> - <button - v-if="hasMoreThanTwoAssignees" - class="btn-link" - type="button" - > - <span - class="avatar-counter sidebar-avatar-counter" - > - {{ sidebarAvatarCounter }} - </span> - </button> - </div> - <div class="value hide-collapsed"> - <template v-if="hasNoUsers"> - <span class="assign-yourself no-value"> - No assignee - <template v-if="editable"> - - - <button - type="button" - class="btn-link" - @click="assignSelf" - > - assign yourself - </button> - </template> - </span> - </template> - <template v-else-if="hasOneUser"> - <a - class="author_link bold" - :href="assigneeUrl(firstUser)" - > - <img - width="32" - class="avatar avatar-inline s32" - :alt="assigneeAlt(firstUser)" - :src="avatarUrl(firstUser)" - /> - <span class="author"> - {{ firstUser.name }} - </span> - <span class="username"> - {{ assigneeUsername(firstUser) }} - </span> - </a> - </template> - <template v-else> - <div class="user-list"> - <div - class="user-item" - v-for="(user, index) in users" - v-if="renderAssignee(index)" - > - <a - class="user-link has-tooltip" - data-placement="bottom" - :href="assigneeUrl(user)" - :data-title="user.name" - > - <img - width="32" - class="avatar avatar-inline s32" - :alt="assigneeAlt(user)" - :src="avatarUrl(user)" - /> - </a> - </div> - </div> - <div - v-if="renderShowMoreSection" - class="user-list-more" - > - <button - type="button" - class="btn-link" - @click="toggleShowLess" - > - <template v-if="showLess"> - {{ hiddenAssigneesLabel }} - </template> - <template v-else> - - show less - </template> - </button> - </div> - </template> - </div> - </div> - `, -}; diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue new file mode 100644 index 00000000000..1e7f46454bf --- /dev/null +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -0,0 +1,232 @@ +<script> +export default { + name: 'Assignees', + props: { + rootPath: { + type: String, + required: true, + }, + users: { + type: Array, + required: true, + }, + editable: { + type: Boolean, + required: true, + }, + }, + data() { + return { + defaultRenderCount: 5, + defaultMaxCounter: 99, + showLess: true, + }; + }, + computed: { + firstUser() { + return this.users[0]; + }, + hasMoreThanTwoAssignees() { + return this.users.length > 2; + }, + hasMoreThanOneAssignee() { + return this.users.length > 1; + }, + hasAssignees() { + return this.users.length > 0; + }, + hasNoUsers() { + return !this.users.length; + }, + hasOneUser() { + return this.users.length === 1; + }, + renderShowMoreSection() { + return this.users.length > this.defaultRenderCount; + }, + numberOfHiddenAssignees() { + return this.users.length - this.defaultRenderCount; + }, + isHiddenAssignees() { + return this.numberOfHiddenAssignees > 0; + }, + hiddenAssigneesLabel() { + return `+ ${this.numberOfHiddenAssignees} more`; + }, + collapsedTooltipTitle() { + const maxRender = Math.min(this.defaultRenderCount, this.users.length); + const renderUsers = this.users.slice(0, maxRender); + const names = renderUsers.map(u => u.name); + + if (this.users.length > maxRender) { + names.push(`+ ${this.users.length - maxRender} more`); + } + + return names.join(', '); + }, + sidebarAvatarCounter() { + let counter = `+${this.users.length - 1}`; + + if (this.users.length > this.defaultMaxCounter) { + counter = `${this.defaultMaxCounter}+`; + } + + return counter; + }, + }, + methods: { + assignSelf() { + this.$emit('assign-self'); + }, + toggleShowLess() { + this.showLess = !this.showLess; + }, + renderAssignee(index) { + return !this.showLess || (index < this.defaultRenderCount && this.showLess); + }, + avatarUrl(user) { + return user.avatar || user.avatar_url || gon.default_avatar_url; + }, + assigneeUrl(user) { + return `${this.rootPath}${user.username}`; + }, + assigneeAlt(user) { + return `${user.name}'s avatar`; + }, + assigneeUsername(user) { + return `@${user.username}`; + }, + shouldRenderCollapsedAssignee(index) { + const firstTwo = this.users.length <= 2 && index <= 2; + + return index === 0 || firstTwo; + }, + }, +}; +</script> + +<template> + <div> + <div + class="sidebar-collapsed-icon sidebar-collapsed-user" + :class="{ 'multiple-users': hasMoreThanOneAssignee, 'has-tooltip': hasAssignees }" + data-container="body" + data-placement="left" + :title="collapsedTooltipTitle" + > + <i + v-if="hasNoUsers" + aria-label="No Assignee" + class="fa fa-user" + > + </i> + <button + type="button" + class="btn-link" + v-for="(user, index) in users" + v-if="shouldRenderCollapsedAssignee(index)" + :key="user.id" + > + <img + width="24" + class="avatar avatar-inline s24" + :alt="assigneeAlt(user)" + :src="avatarUrl(user)" + /> + <span class="author"> + {{ user.name }} + </span> + </button> + <button + v-if="hasMoreThanTwoAssignees" + class="btn-link" + type="button" + > + <span + class="avatar-counter sidebar-avatar-counter" + > + {{ sidebarAvatarCounter }} + </span> + </button> + </div> + <div class="value hide-collapsed"> + <template v-if="hasNoUsers"> + <span class="assign-yourself no-value"> + No assignee + <template v-if="editable"> + - + <button + type="button" + class="btn-link" + @click="assignSelf" + > + assign yourself + </button> + </template> + </span> + </template> + <template v-else-if="hasOneUser"> + <a + class="author_link bold" + :href="assigneeUrl(firstUser)" + > + <img + width="32" + class="avatar avatar-inline s32" + :alt="assigneeAlt(firstUser)" + :src="avatarUrl(firstUser)" + /> + <span class="author"> + {{ firstUser.name }} + </span> + <span class="username"> + {{ assigneeUsername(firstUser) }} + </span> + </a> + </template> + <template v-else> + <div class="user-list"> + <div + class="user-item" + v-for="(user, index) in users" + v-if="renderAssignee(index)" + :key="user.id" + > + <a + class="user-link has-tooltip" + data-container="body" + data-placement="bottom" + :href="assigneeUrl(user)" + :data-title="user.name" + > + <img + width="32" + class="avatar avatar-inline s32" + :alt="assigneeAlt(user)" + :src="avatarUrl(user)" + /> + </a> + </div> + </div> + <div + v-if="renderShowMoreSection" + class="user-list-more" + > + <button + type="button" + class="btn-link" + @click="toggleShowLess" + > + <template v-if="showLess"> + {{ hiddenAssigneesLabel }} + </template> + <template v-else> + - show less + </template> + </button> + </div> + </template> + </div> + </div> +</template> + diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue index 9e47039d920..b58e04b5e60 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue @@ -1,16 +1,15 @@ +<script> import Flash from '../../../flash'; import AssigneeTitle from './assignee_title'; -import Assignees from './assignees'; +import Assignees from './assignees.vue'; import Store from '../../stores/sidebar_store'; import eventHub from '../../event_hub'; export default { name: 'SidebarAssignees', - data() { - return { - store: new Store(), - loading: false, - }; + components: { + AssigneeTitle, + Assignees, }, props: { mediator: { @@ -27,9 +26,28 @@ export default { default: false, }, }, - components: { - 'assignee-title': AssigneeTitle, - assignees: Assignees, + data() { + return { + store: new Store(), + loading: false, + }; + }, + created() { + this.removeAssignee = this.store.removeAssignee.bind(this.store); + this.addAssignee = this.store.addAssignee.bind(this.store); + this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store); + + // Get events from glDropdown + eventHub.$on('sidebar.removeAssignee', this.removeAssignee); + eventHub.$on('sidebar.addAssignee', this.addAssignee); + eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees); + eventHub.$on('sidebar.saveAssignees', this.saveAssignees); + }, + beforeDestroy() { + eventHub.$off('sidebar.removeAssignee', this.removeAssignee); + eventHub.$off('sidebar.addAssignee', this.addAssignee); + eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees); + eventHub.$off('sidebar.saveAssignees', this.saveAssignees); }, methods: { assignSelf() { @@ -54,39 +72,24 @@ export default { }); }, }, - created() { - this.removeAssignee = this.store.removeAssignee.bind(this.store); - this.addAssignee = this.store.addAssignee.bind(this.store); - this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store); - - // Get events from glDropdown - eventHub.$on('sidebar.removeAssignee', this.removeAssignee); - eventHub.$on('sidebar.addAssignee', this.addAssignee); - eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees); - eventHub.$on('sidebar.saveAssignees', this.saveAssignees); - }, - beforeDestroy() { - eventHub.$off('sidebar.removeAssignee', this.removeAssignee); - eventHub.$off('sidebar.addAssignee', this.addAssignee); - eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees); - eventHub.$off('sidebar.saveAssignees', this.saveAssignees); - }, - template: ` - <div> - <assignee-title - :number-of-assignees="store.assignees.length" - :loading="loading || store.isFetching.assignees" - :editable="store.editable" - :show-toggle="!signedIn" - /> - <assignees - v-if="!store.isFetching.assignees" - class="value" - :root-path="store.rootPath" - :users="store.assignees" - :editable="store.editable" - @assign-self="assignSelf" - /> - </div> - `, }; +</script> + +<template> + <div> + <assignee-title + :number-of-assignees="store.assignees.length" + :loading="loading || store.isFetching.assignees" + :editable="store.editable" + :show-toggle="!signedIn" + /> + <assignees + v-if="!store.isFetching.assignees" + class="value" + :root-path="store.rootPath" + :users="store.assignees" + :editable="store.editable" + @assign-self="assignSelf" + /> + </div> +</template> diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 56cc78ca0ca..ef748f18301 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking'; -import SidebarAssignees from './components/assignees/sidebar_assignees'; +import SidebarAssignees from './components/assignees/sidebar_assignees.vue'; import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue'; import SidebarMoveIssue from './lib/sidebar_move_issue'; import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue'; diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js index 04c39d7b6b5..377846db70e 100644 --- a/app/assets/javascripts/sidebar/sidebar_bundle.js +++ b/app/assets/javascripts/sidebar/sidebar_bundle.js @@ -1,13 +1,9 @@ import Mediator from './sidebar_mediator'; import { mountSidebar, getSidebarOptions } from './mount_sidebar'; -function domContentLoaded() { +export default () => { const mediator = new Mediator(getSidebarOptions()); mediator.fetch(); mountSidebar(mediator); -} - -document.addEventListener('DOMContentLoaded', domContentLoaded); - -export default domContentLoaded; +}; diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js index a98403f4cf2..ce0fd3f6ff8 100644 --- a/app/assets/javascripts/snippet/snippet_bundle.js +++ b/app/assets/javascripts/snippet/snippet_bundle.js @@ -1,12 +1,9 @@ -/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, max-len */ /* global ace */ -(function() { - $(function() { - var editor = ace.edit("editor"); +export default () => { + const editor = ace.edit('editor'); - $(".snippet-form-holder form").on('submit', function() { - $(".snippet-file-content").val(editor.getValue()); - }); + $('.snippet-form-holder form').on('submit', () => { + $('.snippet-file-content').val(editor.getValue()); }); -}).call(window); +}; diff --git a/app/assets/javascripts/sortable/sortable_config.js b/app/assets/javascripts/sortable/sortable_config.js new file mode 100644 index 00000000000..43ef5d66422 --- /dev/null +++ b/app/assets/javascripts/sortable/sortable_config.js @@ -0,0 +1,7 @@ +export default { + animation: 200, + forceFallback: true, + fallbackClass: 'is-dragging', + fallbackOnBody: true, + ghostClass: 'is-ghost', +}; diff --git a/app/assets/javascripts/terminal/terminal_bundle.js b/app/assets/javascripts/terminal/index.js index 134522ef961..1a75e072c4e 100644 --- a/app/assets/javascripts/terminal/terminal_bundle.js +++ b/app/assets/javascripts/terminal/index.js @@ -6,4 +6,4 @@ import './terminal'; window.Terminal = Terminal; -$(() => new gl.Terminal({ selector: '#terminal' })); +export default () => new gl.Terminal({ selector: '#terminal' }); diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js index 6b9422b1816..904b0093f7b 100644 --- a/app/assets/javascripts/terminal/terminal.js +++ b/app/assets/javascripts/terminal/terminal.js @@ -6,8 +6,14 @@ constructor(options) { this.options = options || {}; - this.options.cursorBlink = options.cursorBlink || true; - this.options.screenKeys = options.screenKeys || true; + if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) { + this.options.cursorBlink = true; + } + + if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) { + this.options.screenKeys = true; + } + this.container = document.querySelector(options.selector); this.setSocketUrl(); diff --git a/app/assets/javascripts/test.js b/app/assets/javascripts/test.js deleted file mode 100644 index c4c7918a68f..00000000000 --- a/app/assets/javascripts/test.js +++ /dev/null @@ -1 +0,0 @@ -$.fx.off = true; diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js index a3cc04e35fe..fd42f9c3baa 100644 --- a/app/assets/javascripts/u2f/authenticate.js +++ b/app/assets/javascripts/u2f/authenticate.js @@ -1,7 +1,5 @@ -/* eslint-disable func-names, wrap-iife */ -/* global u2f */ import _ from 'underscore'; -import isU2FSupported from './util'; +import importU2FLibrary from './util'; import U2FError from './error'; // Authenticate U2F (universal 2nd factor) devices for users to authenticate with. @@ -10,6 +8,7 @@ import U2FError from './error'; // State Flow #2: setup -> in_progress -> error -> setup export default class U2FAuthenticate { constructor(container, form, u2fParams, fallbackButton, fallbackUI) { + this.u2fUtils = null; this.container = container; this.renderNotSupported = this.renderNotSupported.bind(this); this.renderAuthenticated = this.renderAuthenticated.bind(this); @@ -50,22 +49,23 @@ export default class U2FAuthenticate { } start() { - if (isU2FSupported()) { - return this.renderInProgress(); - } - return this.renderNotSupported(); + return importU2FLibrary() + .then((utils) => { + this.u2fUtils = utils; + this.renderInProgress(); + }) + .catch(() => this.renderNotSupported()); } authenticate() { - return u2f.sign(this.appId, this.challenge, this.signRequests, (function (_this) { - return function (response) { + return this.u2fUtils.sign(this.appId, this.challenge, this.signRequests, + (response) => { if (response.errorCode) { const error = new U2FError(response.errorCode, 'authenticate'); - return _this.renderError(error); + return this.renderError(error); } - return _this.renderAuthenticated(JSON.stringify(response)); - }; - })(this), 10); + return this.renderAuthenticated(JSON.stringify(response)); + }, 10); } renderTemplate(name, params) { diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js index cc3f02e75f6..869fac658e8 100644 --- a/app/assets/javascripts/u2f/register.js +++ b/app/assets/javascripts/u2f/register.js @@ -1,8 +1,5 @@ -/* eslint-disable func-names, wrap-iife */ -/* global u2f */ - import _ from 'underscore'; -import isU2FSupported from './util'; +import importU2FLibrary from './util'; import U2FError from './error'; // Register U2F (universal 2nd factor) devices for users to authenticate with. @@ -11,6 +8,7 @@ import U2FError from './error'; // State Flow #2: setup -> in_progress -> error -> setup export default class U2FRegister { constructor(container, u2fParams) { + this.u2fUtils = null; this.container = container; this.renderNotSupported = this.renderNotSupported.bind(this); this.renderRegistered = this.renderRegistered.bind(this); @@ -34,22 +32,23 @@ export default class U2FRegister { } start() { - if (isU2FSupported()) { - return this.renderSetup(); - } - return this.renderNotSupported(); + return importU2FLibrary() + .then((utils) => { + this.u2fUtils = utils; + this.renderSetup(); + }) + .catch(() => this.renderNotSupported()); } register() { - return u2f.register(this.appId, this.registerRequests, this.signRequests, (function (_this) { - return function (response) { + return this.u2fUtils.register(this.appId, this.registerRequests, this.signRequests, + (response) => { if (response.errorCode) { const error = new U2FError(response.errorCode, 'register'); - return _this.renderError(error); + return this.renderError(error); } - return _this.renderRegistered(JSON.stringify(response)); - }; - })(this), 10); + return this.renderRegistered(JSON.stringify(response)); + }, 10); } renderTemplate(name, params) { diff --git a/app/assets/javascripts/u2f/util.js b/app/assets/javascripts/u2f/util.js index 9771ff935c2..5778f00332d 100644 --- a/app/assets/javascripts/u2f/util.js +++ b/app/assets/javascripts/u2f/util.js @@ -1,3 +1,41 @@ -export default function isU2FSupported() { - return window.u2f; +function isOpera(userAgent) { + return userAgent.indexOf('Opera') >= 0 || userAgent.indexOf('OPR') >= 0; +} + +function getOperaVersion(userAgent) { + const match = userAgent.match(/OPR[^0-9]*([0-9]+)[^0-9]+/); + return match ? parseInt(match[1], 10) : false; +} + +function isChrome(userAgent) { + return userAgent.indexOf('Chrom') >= 0 && !isOpera(userAgent); +} + +function getChromeVersion(userAgent) { + const match = userAgent.match(/Chrom(?:e|ium)\/([0-9]+)\./); + return match ? parseInt(match[1], 10) : false; +} + +export function canInjectU2fApi(userAgent) { + const isSupportedChrome = isChrome(userAgent) && getChromeVersion(userAgent) >= 41; + const isSupportedOpera = isOpera(userAgent) && getOperaVersion(userAgent) >= 40; + const isMobile = ( + userAgent.indexOf('droid') >= 0 || + userAgent.indexOf('CriOS') >= 0 || + /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent) + ); + return (isSupportedChrome || isSupportedOpera) && !isMobile; +} + +export default function importU2FLibrary() { + if (window.u2f) { + return Promise.resolve(window.u2f); + } + + const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : ''; + if (canInjectU2fApi(userAgent) || (gon && gon.test_env)) { + return import(/* webpackMode: "eager" */ 'vendor/u2f').then(() => window.u2f); + } + + return Promise.reject(); } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue index 69e70ba1dd6..a16f9055a6d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue @@ -1,11 +1,15 @@ +<script> import statusCodes from '../../lib/utils/http_status'; import { bytesToMiB } from '../../lib/utils/number_utils'; import { backOff } from '../../lib/utils/common_utils'; -import MemoryGraph from '../../vue_shared/components/memory_graph'; +import MemoryGraph from '../../vue_shared/components/memory_graph.vue'; import MRWidgetService from '../services/mr_widget_service'; export default { name: 'MemoryUsage', + components: { + MemoryGraph, + }, props: { metricsUrl: { type: String, @@ -28,9 +32,6 @@ export default { backOffRequestCounter: 0, }; }, - components: { - 'mr-memory-graph': MemoryGraph, - }, computed: { shouldShowLoading() { return this.loadingMetrics && !this.hasMetrics && !this.loadFailed; @@ -57,6 +58,10 @@ export default { return 'unchanged'; }, }, + mounted() { + this.loadingMetrics = true; + this.loadMetrics(); + }, methods: { getMegabytes(bytesString) { const valueInBytes = Number(bytesString).toFixed(2); @@ -114,40 +119,42 @@ export default { }); }, }, - mounted() { - this.loadingMetrics = true; - this.loadMetrics(); - }, - template: ` - <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> - <p - v-if="shouldShowLoading" - class="usage-info js-usage-info usage-info-loading"> - <i - class="fa fa-spinner fa-spin usage-info-load-spinner" - aria-hidden="true" />Loading deployment statistics - </p> - <p - v-if="shouldShowMemoryGraph" - class="usage-info js-usage-info"> - <a :href="metricsMonitoringUrl">Memory</a> usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB - </p> - <p - v-if="shouldShowLoadFailure" - class="usage-info js-usage-info usage-info-failed"> - Failed to load deployment statistics - </p> - <p - v-if="shouldShowMetricsUnavailable" - class="usage-info js-usage-info usage-info-unavailable"> - Deployment statistics are not available currently - </p> - <mr-memory-graph - v-if="shouldShowMemoryGraph" - :metrics="memoryMetrics" - :deploymentTime="deploymentTime" - height="25" - width="100" /> - </div> - `, }; +</script> + +<template> + <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> + <p + v-if="shouldShowLoading" + class="usage-info js-usage-info usage-info-loading"> + <i + class="fa fa-spinner fa-spin usage-info-load-spinner" + aria-hidden="true"> + </i>Loading deployment statistics + </p> + <p + v-if="shouldShowMemoryGraph" + class="usage-info js-usage-info"> + <a + :href="metricsMonitoringUrl" + >Memory</a> usage <b>{{ memoryChangeType }}</b> from {{ memoryFrom }}MB to {{ memoryTo }}MB + </p> + <p + v-if="shouldShowLoadFailure" + class="usage-info js-usage-info usage-info-failed"> + Failed to load deployment statistics + </p> + <p + v-if="shouldShowMetricsUnavailable" + class="usage-info js-usage-info usage-info-unavailable"> + Deployment statistics are not available currently + </p> + <memory-graph + v-if="shouldShowMemoryGraph" + :metrics="memoryMetrics" + :deployment-time="deploymentTime" + height="25" + width="100" + /> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js index d174a900f63..c7f992384c8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js @@ -1,7 +1,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility'; import { visitUrl } from '../../lib/utils/url_utility'; import Flash from '../../flash'; -import MemoryUsage from './mr_widget_memory_usage'; +import MemoryUsage from './memory_usage.vue'; import StatusIcon from './mr_widget_status_icon.vue'; import MRWidgetService from '../services/mr_widget_service'; @@ -12,8 +12,8 @@ export default { service: { type: Object, required: true }, }, components: { - 'mr-widget-memory-usage': MemoryUsage, - 'status-icon': StatusIcon, + MemoryUsage, + StatusIcon, }, methods: { formatDate(date) { @@ -100,7 +100,7 @@ export default { class="btn btn-default btn-xs"> Stop environment </button> - <mr-widget-memory-usage + <memory-usage v-if="deployment.metrics_url" :metrics-url="deployment.metrics_url" :metrics-monitoring-url="deployment.metrics_monitoring_url" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 18a3787857d..3d886e7d628 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -67,6 +67,7 @@ <clipboard-button :text="branchNameClipboardData" :title="__('Copy branch name to clipboard')" + css-class="btn-default btn-transparent btn-clipboard" /> {{ s__("mrWidget|into") }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue new file mode 100644 index 00000000000..f0298f732ea --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue @@ -0,0 +1,20 @@ +<script> + export default { + name: 'MRWidgetMaintainerEdit', + props: { + maintainerEditAllowed: { + type: Boolean, + default: false, + required: false, + }, + }, + }; +</script> + +<template> + <section class="mr-info-list mr-links"> + <p v-if="maintainerEditAllowed"> + {{ s__("mrWidget|Allows edits from maintainers") }} + </p> + </section> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 109a302a172..54a98abf860 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -1,8 +1,8 @@ <script> /* eslint-disable vue/require-default-prop */ - import pipelineStage from '../../pipelines/components/stage.vue'; - import ciIcon from '../../vue_shared/components/ci_icon.vue'; - import icon from '../../vue_shared/components/icon.vue'; + import pipelineStage from '~/pipelines/components/stage.vue'; + import ciIcon from '~/vue_shared/components/ci_icon.vue'; + import icon from '~/vue_shared/components/icon.vue'; export default { name: 'MRWidgetPipeline', diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue new file mode 100644 index 00000000000..460437ceeff --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue @@ -0,0 +1,34 @@ +<script> + import tooltip from '../../vue_shared/directives/tooltip'; + import { __ } from '../../locale'; + + export default { + directives: { + tooltip, + }, + created() { + this.removesBranchText = __('<strong>Removes</strong> source branch'); + this.tooltipTitle = __('A user with write access to the source branch selected this option'); + }, + }; +</script> + +<template> + <p + v-once + class="mr-info-list mr-links source-branch-removal-status append-bottom-0" + > + <span + class="status-text" + v-html="removesBranchText" + > + </span> + <i + v-tooltip + class="fa fa-question-circle" + :title="tooltipTitle" + :aria-label="tooltipTitle" + > + </i> + </p> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js index 162f048aac7..3c781ccddc8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js @@ -93,7 +93,7 @@ export default { || this.mr.preventMerge); }, isRemoveSourceBranchButtonDisabled() { - return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch; + return this.isMergeButtonDisabled; }, shouldShowSquashBeforeMerge() { const { commitsCount, enableSquashBeforeMerge } = this.mr; @@ -282,7 +282,7 @@ export default { </span> <div class="media-body-wrap space-children"> <template v-if="shouldShowMergeControls()"> - <label> + <label v-if="mr.canRemoveSourceBranch"> <input id="remove-source-branch-input" v-model="removeSourceBranch" diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js index edb3baa39e4..b867dd90a41 100644 --- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js +++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js @@ -15,6 +15,7 @@ export { default as WidgetHeader } from './components/mr_widget_header.vue'; export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue'; export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue'; export { default as WidgetDeployment } from './components/mr_widget_deployment'; +export { default as WidgetMaintainerEdit } from './components/mr_widget_maintainer_edit.vue'; export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue'; export { default as MergedState } from './components/states/mr_widget_merged.vue'; export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue'; @@ -39,7 +40,9 @@ export { default as MRWidgetStore } from './stores/mr_widget_store'; export { default as MRWidgetService } from './services/mr_widget_service'; export { default as eventHub } from './event_hub'; export { default as getStateKey } from './stores/get_state_key'; -export { default as mrWidgetOptions } from './mr_widget_options'; export { default as stateMaps } from './stores/state_maps'; export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge'; export { default as notify } from '../lib/utils/notify'; +export { default as SourceBranchRemovalStatus } from './components/source_branch_removal_status.vue'; + +export { default as mrWidgetOptions } from './mr_widget_options'; diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js index 6b9918b65b0..69a9132a2da 100644 --- a/app/assets/javascripts/vue_merge_request_widget/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/index.js @@ -6,7 +6,7 @@ import Translate from '../vue_shared/translate'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { +export default () => { gl.mrWidgetData.gitlabLogo = gon.gitlab_logo; const vm = new Vue(mrWidgetOptions); @@ -14,4 +14,4 @@ document.addEventListener('DOMContentLoaded', () => { window.gl.mrWidget = { checkStatus: vm.checkStatus, }; -}); +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js index 797f0f6ec0f..01365b70897 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js @@ -6,6 +6,7 @@ import { WidgetMergeHelp, WidgetPipeline, WidgetDeployment, + WidgetMaintainerEdit, WidgetRelatedLinks, MergedState, ClosedState, @@ -32,6 +33,7 @@ import { stateMaps, SquashBeforeMerge, notify, + SourceBranchRemovalStatus, } from './dependencies'; import { setFavicon } from '../lib/utils/common_utils'; @@ -68,6 +70,9 @@ export default { shouldRenderDeployments() { return this.mr.deployments.length; }, + shouldRenderSourceBranchRemovalStatus() { + return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch; + }, }, methods: { createService(store) { @@ -211,6 +216,7 @@ export default { 'mr-widget-merge-help': WidgetMergeHelp, 'mr-widget-pipeline': WidgetPipeline, 'mr-widget-deployment': WidgetDeployment, + 'mr-widget-maintainer-edit': WidgetMaintainerEdit, 'mr-widget-related-links': WidgetRelatedLinks, 'mr-widget-merged': MergedState, 'mr-widget-closed': ClosedState, @@ -232,6 +238,7 @@ export default { 'mr-widget-merge-when-pipeline-succeeds': MergeWhenPipelineSucceedsState, 'mr-widget-auto-merge-failed': AutoMergeFailed, 'mr-widget-rebase': RebaseState, + SourceBranchRemovalStatus, }, template: ` <div class="mr-state-widget prepend-top-default"> @@ -251,11 +258,15 @@ export default { :is="componentName" :mr="mr" :service="service" /> + <mr-widget-maintainer-edit + :maintainerEditAllowed="mr.maintainerEditAllowed" /> <mr-widget-related-links v-if="shouldRenderRelatedLinks" :state="mr.state" - :related-links="mr.relatedLinks" - /> + :related-links="mr.relatedLinks" /> + <source-branch-removal-status + v-if="shouldRenderSourceBranchRemovalStatus" + /> </div> <div class="mr-widget-footer" diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 9a750ce42bd..5d07bcf1bb9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -76,6 +76,7 @@ export default class MergeRequestStore { this.canBeMerged = data.can_be_merged || false; this.isMergeAllowed = data.mergeable || false; this.mergeOngoing = data.merge_ongoing; + this.maintainerEditAllowed = data.allow_maintainer_to_push; // Cherry-pick and Revert actions related this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false; diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue index 31d9b9d9c48..cab126a7eca 100644 --- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue +++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue @@ -1,8 +1,8 @@ <script> - import tooltip from '../directives/tooltip'; /** * Falls back to the code used in `copy_to_clipboard.js` */ + import tooltip from '../directives/tooltip'; export default { name: 'ClipboardButton', @@ -28,6 +28,11 @@ required: false, default: false, }, + cssClass: { + type: String, + required: false, + default: 'btn-default', + }, }, }; </script> @@ -35,7 +40,8 @@ <template> <button type="button" - class="btn btn-transparent btn-clipboard" + class="btn" + :class="cssClass" :title="title" :data-clipboard-text="text" v-tooltip diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index 3595a9389e9..c943c8d98a4 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -39,7 +39,7 @@ @click="onClick"> ... </button> - <span v-show="!isCollapsed"> + <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span> </span> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue index b48828ae81f..3d39b3ab173 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue @@ -11,14 +11,12 @@ default: false, required: false, }, - isConfidential: { type: Boolean, default: false, required: false, }, }, - computed: { warningIcon() { if (this.isConfidential) return 'eye-slash'; @@ -26,7 +24,6 @@ return ''; }, - isLockedAndConfidential() { return this.isConfidential && this.isLocked; }, diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.vue index f37ef1a5ca3..b07f6b07afe 100644 --- a/app/assets/javascripts/vue_shared/components/memory_graph.js +++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue @@ -1,3 +1,4 @@ +<script> import { getTimeago } from '../../lib/utils/datetime_utility'; export default { @@ -22,6 +23,9 @@ export default { return `Deployed ${deployedSince}`; }, }, + mounted() { + this.renderGraph(this.deploymentTime, this.metrics); + }, methods: { /** * Returns metric value index in metrics array @@ -103,15 +107,27 @@ export default { this.dotY = dotY; }, }, - mounted() { - this.renderGraph(this.deploymentTime, this.metrics); - }, - template: ` - <div class="memory-graph-container"> - <svg class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg"> - <path :d="pathD" :viewBox="pathViewBox" /> - <circle r="1.5" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" /> - </svg> - </div> - `, }; +</script> + +<template> + <div class="memory-graph-container"> + <svg + class="has-tooltip" + :title="getFormattedMedian" + :width="width" + :height="height" + xmlns="http://www.w3.org/2000/svg"> + <path + :d="pathD" + :viewBox="pathViewBox" + /> + <circle + r="1.5" + :cx="dotX" + :cy="dotY" + tranform="translate(0 -1)" + /> + </svg> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue new file mode 100644 index 00000000000..80e3db52cb0 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -0,0 +1,24 @@ +<template> + <li class="timeline-entry note"> + <div class="timeline-entry-inner"> + <div class="timeline-icon"> + </div> + <div class="timeline-content"> + <div class="note-header"></div> + <div class="note-body"> + <skeleton-loading-container /> + </div> + </div> + </div> + </li> +</template> + +<script> + import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; + + export default { + components: { + skeletonLoadingContainer, + }, + }; +</script> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue index 1413dd69f24..3fcacd156c5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue @@ -14,6 +14,11 @@ collapsedCalendarIcon, }, props: { + blockClass: { + type: String, + required: false, + default: '', + }, collapsed: { type: Boolean, required: false, @@ -91,7 +96,10 @@ </script> <template> - <div class="block"> + <div + class="block" + :class="blockClass" + > <div class="issuable-sidebar-header"> <toggle-sidebar :collapsed="collapsed" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue new file mode 100644 index 00000000000..c1dd4d42d9d --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue @@ -0,0 +1,149 @@ +<script> +import LabelsSelect from '~/labels_select'; +import LoadingIcon from '../../loading_icon.vue'; + +import DropdownTitle from './dropdown_title.vue'; +import DropdownValue from './dropdown_value.vue'; +import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; +import DropdownButton from './dropdown_button.vue'; +import DropdownHiddenInput from './dropdown_hidden_input.vue'; +import DropdownHeader from './dropdown_header.vue'; +import DropdownSearchInput from './dropdown_search_input.vue'; +import DropdownFooter from './dropdown_footer.vue'; +import DropdownCreateLabel from './dropdown_create_label.vue'; + +export default { + components: { + LoadingIcon, + DropdownTitle, + DropdownValue, + DropdownValueCollapsed, + DropdownButton, + DropdownHiddenInput, + DropdownHeader, + DropdownSearchInput, + DropdownFooter, + DropdownCreateLabel, + }, + props: { + showCreate: { + type: Boolean, + required: false, + default: false, + }, + abilityName: { + type: String, + required: true, + }, + context: { + type: Object, + required: true, + }, + namespace: { + type: String, + required: false, + default: '', + }, + updatePath: { + type: String, + required: false, + default: '', + }, + labelsPath: { + type: String, + required: true, + }, + labelsWebUrl: { + type: String, + required: false, + default: '', + }, + labelFilterBasePath: { + type: String, + required: false, + default: '', + }, + canEdit: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + hiddenInputName() { + return this.showCreate ? `${this.abilityName}[label_names][]` : 'label_id[]'; + }, + }, + mounted() { + this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, { + handleClick: this.handleClick, + }); + }, + methods: { + handleClick(label) { + this.$emit('onLabelClick', label); + }, + }, +}; +</script> + +<template> + <div class="block labels js-labels-block"> + <dropdown-value-collapsed + v-if="showCreate" + :labels="context.labels" + /> + <dropdown-title + :can-edit="canEdit" + /> + <dropdown-value + :labels="context.labels" + :label-filter-base-path="labelFilterBasePath" + > + <slot></slot> + </dropdown-value> + <div + v-if="canEdit" + class="selectbox js-selectbox" + style="display: none;" + > + <dropdown-hidden-input + v-for="label in context.labels" + :key="label.id" + :name="hiddenInputName" + :label="label" + /> + <div class="dropdown"> + <dropdown-button + :ability-name="abilityName" + :field-name="hiddenInputName" + :update-path="updatePath" + :labels-path="labelsPath" + :namespace="namespace" + :labels="context.labels" + :show-extra-options="!showCreate" + /> + <div + class="dropdown-menu dropdown-select dropdown-menu-paging +dropdown-menu-labels dropdown-menu-selectable" + > + <div class="dropdown-page-one"> + <dropdown-header v-if="showCreate" /> + <dropdown-search-input/> + <div class="dropdown-content"></div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + <dropdown-footer + v-if="showCreate" + :labels-web-url="labelsWebUrl" + /> + </div> + <dropdown-create-label + v-if="showCreate" + /> + </div> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue new file mode 100644 index 00000000000..47497c1de98 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue @@ -0,0 +1,78 @@ +<script> +import { __, s__, sprintf } from '~/locale'; + +export default { + props: { + abilityName: { + type: String, + required: true, + }, + fieldName: { + type: String, + required: true, + }, + updatePath: { + type: String, + required: true, + }, + labelsPath: { + type: String, + required: true, + }, + namespace: { + type: String, + required: true, + }, + labels: { + type: Array, + required: true, + }, + showExtraOptions: { + type: Boolean, + required: true, + }, + }, + computed: { + dropdownToggleText() { + if (this.labels.length === 0) { + return __('Label'); + } + + if (this.labels.length > 1) { + return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), { + firstLabelName: this.labels[0].title, + remainingLabelCount: this.labels.length - 1, + }); + } + + return this.labels[0].title; + }, + }, +}; +</script> + +<template> + <button + type="button" + ref="dropdownButton" + class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" + data-toggle="dropdown" + :class="{ 'js-extra-options': showExtraOptions }" + :data-ability-name="abilityName" + :data-field-name="fieldName" + :data-issue-update="updatePath" + :data-labels="labelsPath" + :data-namespace-path="namespace" + :data-show-any="showExtraOptions" + > + <span class="dropdown-toggle-text"> + {{ dropdownToggleText }} + </span> + <i + aria-hidden="true" + class="fa fa-chevron-down" + data-hidden="true" + > + </i> + </button> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue new file mode 100644 index 00000000000..4200d1e8473 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -0,0 +1,84 @@ +<script> +export default { + created() { + this.suggestedColors = gon.suggested_label_colors; + }, +}; +</script> + +<template> + <div class="dropdown-page-two dropdown-new-label"> + <div class="dropdown-title"> + <button + type="button" + class="dropdown-title-button dropdown-menu-back" + :aria-label="__('Go back')" + > + <i + aria-hidden="true" + class="fa fa-arrow-left" + data-hidden="true" + > + </i> + </button> + {{ __('Create new label') }} + <button + type="button" + class="dropdown-title-button dropdown-menu-close" + :aria-label="__('Close')" + > + <i + aria-hidden="true" + class="fa fa-times dropdown-menu-close-icon" + data-hidden="true" + > + </i> + </button> + </div> + <div class="dropdown-content"> + <div class="dropdown-labels-error js-label-error"></div> + <input + id="new_label_name" + type="text" + class="default-dropdown-input" + :placeholder="__('Name new label')" + /> + <div class="suggest-colors suggest-colors-dropdown"> + <a + v-for="(color, index) in suggestedColors" + href="#" + :key="index" + :data-color="color" + :style="{ + backgroundColor: color, + }" + > + + </a> + </div> + <div class="dropdown-label-color-input"> + <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div> + <input + id="new_label_color" + type="text" + class="default-dropdown-input" + :placeholder="__('Assign custom color like #FF0000')" + /> + </div> + <div class="clearfix"> + <button + type="button" + class="btn btn-primary pull-left js-new-label-btn disabled" + > + {{ __('Create') }} + </button> + <button + type="button" + class="btn btn-default pull-right js-cancel-label-btn" + > + {{ __('Cancel') }} + </button> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue new file mode 100644 index 00000000000..e951a863811 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue @@ -0,0 +1,34 @@ +<script> +export default { + props: { + labelsWebUrl: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="dropdown-footer"> + <ul class="dropdown-footer-list"> + <li> + <a + href="#" + class="dropdown-toggle-page" + > + {{ __('Create new label') }} + </a> + </li> + <li> + <a + data-is-link="true" + class="dropdown-external-link" + :href="labelsWebUrl" + > + {{ __('Manage labels') }} + </a> + </li> + </ul> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue new file mode 100644 index 00000000000..7664acdf19c --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue @@ -0,0 +1,21 @@ +<script> +export default {}; +</script> + +<template> + <div class="dropdown-title"> + <span>{{ __('Assign labels') }}</span> + <button + type="button" + class="dropdown-title-button dropdown-menu-close" + :aria-label="__('Close')" + > + <i + aria-hidden="true" + class="fa fa-times dropdown-menu-close-icon" + data-hidden="true" + > + </i> + </button> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue new file mode 100644 index 00000000000..1832c3c1757 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue @@ -0,0 +1,22 @@ +<script> +export default { + props: { + name: { + type: String, + required: true, + }, + label: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <input + type="hidden" + :name="name" + :value="label.id" + /> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue new file mode 100644 index 00000000000..ae633460c95 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue @@ -0,0 +1,27 @@ +<script> +export default {}; +</script> + +<template> + <div class="dropdown-input"> + <input + autocomplete="off" + class="dropdown-input-field" + type="search" + :placeholder="__('Search')" + /> + <i + aria-hidden="true" + class="fa fa-search dropdown-input-search" + data-hidden="true" + > + </i> + <i + aria-hidden="true" + class="fa fa-times dropdown-input-clear js-dropdown-input-clear" + data-hidden="true" + role="button" + > + </i> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue new file mode 100644 index 00000000000..7da82e90e29 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue @@ -0,0 +1,30 @@ +<script> +export default { + props: { + canEdit: { + type: Boolean, + required: true, + }, + }, +}; +</script> + +<template> + <div class="title hide-collapsed append-bottom-10"> + {{ __('Labels') }} + <template v-if="canEdit"> + <i + aria-hidden="true" + class="fa fa-spinner fa-spin block-loading" + data-hidden="true" + > + </i> + <button + type="button" + class="edit-link btn btn-blank pull-right js-sidebar-dropdown-toggle" + > + {{ __('Edit') }} + </button> + </template> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue new file mode 100644 index 00000000000..69d588eb25d --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue @@ -0,0 +1,63 @@ +<script> +import tooltip from '~/vue_shared/directives/tooltip'; + +export default { + directives: { + tooltip, + }, + props: { + labels: { + type: Array, + required: true, + }, + labelFilterBasePath: { + type: String, + required: true, + }, + }, + computed: { + isEmpty() { + return this.labels.length === 0; + }, + }, + methods: { + labelFilterUrl(label) { + return `${this.labelFilterBasePath}?label_name[]=${encodeURIComponent(label.title)}`; + }, + labelStyle(label) { + return { + color: label.textColor, + backgroundColor: label.color, + }; + }, + }, +}; +</script> + +<template> + <div class="hide-collapsed value issuable-show-labels js-value"> + <span + v-if="isEmpty" + class="text-secondary" + > + <slot>{{ __('None') }}</slot> + </span> + <a + v-else + v-for="label in labels" + :key="label.id" + :href="labelFilterUrl(label)" + > + <span + v-tooltip + class="label color-label" + data-placement="bottom" + data-container="body" + :style="labelStyle(label)" + :title="label.description" + > + {{ label.title }} + </span> + </a> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue new file mode 100644 index 00000000000..5cf728fe050 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -0,0 +1,48 @@ +<script> +import { s__, sprintf } from '~/locale'; +import tooltip from '~/vue_shared/directives/tooltip'; + +export default { + directives: { + tooltip, + }, + props: { + labels: { + type: Array, + required: true, + }, + }, + computed: { + labelsList() { + const labelsString = this.labels.slice(0, 5).map(label => label.title).join(', '); + + if (this.labels.length > 5) { + return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), { + labelsString, + remainingLabelCount: this.labels.length - 5, + }); + } + + return labelsString; + }, + }, +}; +</script> + +<template> + <div + v-tooltip + class="sidebar-collapsed-icon" + data-placement="left" + data-container="body" + :title="labelsList" + > + <i + aria-hidden="true" + data-hidden="true" + class="fa fa-tags" + > + </i> + <span>{{ labels.length }}</span> + </div> +</template> diff --git a/app/assets/javascripts/boards/models/label.js b/app/assets/javascripts/vue_shared/models/label.js index 98c1ec014c4..70b9efe0c68 100644 --- a/app/assets/javascripts/boards/models/label.js +++ b/app/assets/javascripts/vue_shared/models/label.js @@ -1,7 +1,5 @@ -/* eslint-disable no-unused-vars, space-before-function-paren */ - class ListLabel { - constructor (obj) { + constructor(obj) { this.id = obj.id; this.title = obj.title; this.type = obj.type; |