Commit 8619042d authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett

Merge branch 'master' into droplab-templating-xss-fix

parents 606275da c3bb21ff
image: "dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.3.3-git-2.7-phantomjs-2.1-node-7.1" image: "dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.3.3-golang-1.8-git-2.7-phantomjs-2.1-node-7.1"
cache: cache:
key: "ruby-233" key: "ruby-233"
......
...@@ -25,14 +25,20 @@ logs, and code as it's very hard to read otherwise.) ...@@ -25,14 +25,20 @@ logs, and code as it's very hard to read otherwise.)
#### Results of GitLab environment info #### Results of GitLab environment info
<details>
(For installations with omnibus-gitlab package run and paste the output of: (For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`) `sudo gitlab-rake gitlab:env:info`)
(For installations from source run and paste the output of: (For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`) `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
</details>
#### Results of GitLab application Check #### Results of GitLab application Check
<details>
(For installations with omnibus-gitlab package run and paste the output of: (For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:check SANITIZE=true`) `sudo gitlab-rake gitlab:check SANITIZE=true`)
...@@ -41,6 +47,8 @@ logs, and code as it's very hard to read otherwise.) ...@@ -41,6 +47,8 @@ logs, and code as it's very hard to read otherwise.)
(we will only investigate if the tests are passing) (we will only investigate if the tests are passing)
</details>
### Possible fixes ### Possible fixes
(If you can, link to the line of code that might be responsible for the problem) (If you can, link to the line of code that might be responsible for the problem)
...@@ -7,100 +7,98 @@ import boardBlankState from './board_blank_state'; ...@@ -7,100 +7,98 @@ import boardBlankState from './board_blank_state';
require('./board_delete'); require('./board_delete');
require('./board_list'); require('./board_list');
(() => { const Store = gl.issueBoards.BoardsStore;
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {}; window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.Board = Vue.extend({ gl.issueBoards.Board = Vue.extend({
template: '#js-board-template', template: '#js-board-template',
components: { components: {
boardList, boardList,
'board-delete': gl.issueBoards.BoardDelete, 'board-delete': gl.issueBoards.BoardDelete,
boardBlankState, boardBlankState,
}, },
props: { props: {
list: Object, list: Object,
disabled: Boolean, disabled: Boolean,
issueLinkBase: String, issueLinkBase: String,
rootPath: String, rootPath: String,
}, },
data () { data () {
return { return {
detailIssue: Store.detail, detailIssue: Store.detail,
filter: Store.filter, filter: Store.filter,
}; };
}, },
watch: { watch: {
filter: { filter: {
handler() { handler() {
this.list.page = 1; this.list.page = 1;
this.list.getIssues(true); this.list.getIssues(true);
},
deep: true,
}, },
detailIssue: { deep: true,
handler () { },
if (!Object.keys(this.detailIssue.issue).length) return; detailIssue: {
handler () {
if (!Object.keys(this.detailIssue.issue).length) return;
const issue = this.list.findIssue(this.detailIssue.issue.id); const issue = this.list.findIssue(this.detailIssue.issue.id);
if (issue) { if (issue) {
const offsetLeft = this.$el.offsetLeft; const offsetLeft = this.$el.offsetLeft;
const boardsList = document.querySelectorAll('.boards-list')[0]; const boardsList = document.querySelectorAll('.boards-list')[0];
const left = boardsList.scrollLeft - offsetLeft; const left = boardsList.scrollLeft - offsetLeft;
let right = (offsetLeft + this.$el.offsetWidth); let right = (offsetLeft + this.$el.offsetWidth);
if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) { if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
// -290 here because width of boardsList is animating so therefore // -290 here because width of boardsList is animating so therefore
// getting the width here is incorrect // getting the width here is incorrect
// 290 is the width of the sidebar // 290 is the width of the sidebar
right -= (boardsList.offsetWidth - 290); right -= (boardsList.offsetWidth - 290);
} else { } else {
right -= boardsList.offsetWidth; right -= boardsList.offsetWidth;
} }
if (right - boardsList.scrollLeft > 0) { if (right - boardsList.scrollLeft > 0) {
$(boardsList).animate({ $(boardsList).animate({
scrollLeft: right scrollLeft: right
}, this.sortableOptions.animation); }, this.sortableOptions.animation);
} else if (left > 0) { } else if (left > 0) {
$(boardsList).animate({ $(boardsList).animate({
scrollLeft: offsetLeft scrollLeft: offsetLeft
}, this.sortableOptions.animation); }, this.sortableOptions.animation);
}
} }
}, }
deep: true },
} deep: true
}, }
methods: { },
showNewIssueForm() { methods: {
this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; showNewIssueForm() {
} this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
}, }
mounted () { },
this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({ mounted () {
disabled: this.disabled, this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
group: 'boards', disabled: this.disabled,
draggable: '.is-draggable', group: 'boards',
handle: '.js-board-handle', draggable: '.is-draggable',
onEnd: (e) => { handle: '.js-board-handle',
gl.issueBoards.onEnd(); onEnd: (e) => {
gl.issueBoards.onEnd();
if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) { if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
const order = this.sortable.toArray(); const order = this.sortable.toArray();
const list = Store.findList('id', parseInt(e.item.dataset.id, 10)); const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
this.$nextTick(() => { this.$nextTick(() => {
Store.moveList(list, order); Store.moveList(list, order);
}); });
}
} }
}); }
});
this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions); this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
}, },
}); });
})();
...@@ -2,22 +2,20 @@ ...@@ -2,22 +2,20 @@
import Vue from 'vue'; import Vue from 'vue';
(() => { window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardDelete = Vue.extend({ gl.issueBoards.BoardDelete = Vue.extend({
props: { props: {
list: Object list: Object
}, },
methods: { methods: {
deleteBoard () { deleteBoard () {
$(this.$el).tooltip('hide'); $(this.$el).tooltip('hide');
if (confirm('Are you sure you want to delete this list?')) { if (confirm('Are you sure you want to delete this list?')) {
this.list.destroy(); this.list.destroy();
}
} }
} }
}); }
})(); });
...@@ -8,66 +8,64 @@ import Vue from 'vue'; ...@@ -8,66 +8,64 @@ import Vue from 'vue';
require('./sidebar/remove_issue'); require('./sidebar/remove_issue');
(() => { const Store = gl.issueBoards.BoardsStore;
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {}; window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardSidebar = Vue.extend({ gl.issueBoards.BoardSidebar = Vue.extend({
props: { props: {
currentUser: Object currentUser: Object
}, },
data() { data() {
return { return {
detail: Store.detail, detail: Store.detail,
issue: {}, issue: {},
list: {}, list: {},
}; };
}, },
computed: { computed: {
showSidebar () { showSidebar () {
return Object.keys(this.issue).length; return Object.keys(this.issue).length;
} }
}, },
watch: { watch: {
detail: { detail: {
handler () { handler () {
if (this.issue.id !== this.detail.issue.id) { if (this.issue.id !== this.detail.issue.id) {
$('.js-issue-board-sidebar', this.$el).each((i, el) => { $('.js-issue-board-sidebar', this.$el).each((i, el) => {
$(el).data('glDropdown').clearMenu(); $(el).data('glDropdown').clearMenu();
});
}
this.issue = this.detail.issue;
this.list = this.detail.list;
},
deep: true
},
issue () {
if (this.showSidebar) {
this.$nextTick(() => {
$('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
$('.right-sidebar').getNiceScroll().resize();
}); });
} }
}
this.issue = this.detail.issue;
this.list = this.detail.list;
},
deep: true
}, },
methods: { issue () {
closeSidebar () { if (this.showSidebar) {
this.detail.issue = {}; this.$nextTick(() => {
$('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
$('.right-sidebar').getNiceScroll().resize();
});
} }
}, }
mounted () { },
new IssuableContext(this.currentUser); methods: {
new MilestoneSelect(); closeSidebar () {
new gl.DueDateSelectors(); this.detail.issue = {};
new LabelsSelect(); }
new Sidebar(); },
gl.Subscription.bindAll('.subscription'); mounted () {
}, new IssuableContext(this.currentUser);
components: { new MilestoneSelect();
removeBtn: gl.issueBoards.RemoveIssueBtn, new gl.DueDateSelectors();
}, new LabelsSelect();
}); new Sidebar();
})(); gl.Subscription.bindAll('.subscription');
},
components: {
removeBtn: gl.issueBoards.RemoveIssueBtn,
},
});
import Vue from 'vue'; import Vue from 'vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
(() => { const Store = gl.issueBoards.BoardsStore;
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {}; window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.IssueCardInner = Vue.extend({ gl.issueBoards.IssueCardInner = Vue.extend({
props: { props: {
issue: { issue: {
type: Object, type: Object,
required: true, required: true,
},
issueLinkBase: {
type: String,
required: true,
},
list: {
type: Object,
required: false,
default: () => ({}),
},
rootPath: {
type: String,
required: true,
},
updateFilters: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { issueLinkBase: {
cardUrl() { type: String,
return `${this.issueLinkBase}/${this.issue.id}`; required: true,
},
assigneeUrl() {
return `${this.rootPath}${this.issue.assignee.username}`;
},
assigneeUrlTitle() {
return `Assigned to ${this.issue.assignee.name}`;
},
avatarUrlTitle() {
return `Avatar for ${this.issue.assignee.name}`;
},
issueId() {
return `#${this.issue.id}`;
},
showLabelFooter() {
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
},
}, },
methods: { list: {
showLabel(label) { type: Object,
if (!this.list) return true; required: false,
default: () => ({}),
},
rootPath: {
type: String,
required: true,
},
updateFilters: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
cardUrl() {
return `${this.issueLinkBase}/${this.issue.id}`;
},
assigneeUrl() {
return `${this.rootPath}${this.issue.assignee.username}`;
},
assigneeUrlTitle() {
return `Assigned to ${this.issue.assignee.name}`;
},
avatarUrlTitle() {
return `Avatar for ${this.issue.assignee.name}`;
},
issueId() {
return `#${this.issue.id}`;
},
showLabelFooter() {
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
},
},
methods: {
showLabel(label) {
if (!this.list) return true;
return !this.list.label || label.id !== this.list.label.id; return !this.list.label || label.id !== this.list.label.id;
}, },
filterByLabel(label, e) { filterByLabel(label, e) {
if (!this.updateFilters) return; if (!this.updateFilters) return;
const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&'); const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
const labelTitle = encodeURIComponent(label.title); const labelTitle = encodeURIComponent(label.title);
const param = `label_name[]=${labelTitle}`; const param = `label_name[]=${labelTitle}`;
const labelIndex = filterPath.indexOf(param); const labelIndex = filterPath.indexOf(param);
$(e.currentTarget).tooltip('hide'); $(e.currentTarget).tooltip('hide');
if (labelIndex === -1) { if (labelIndex === -1) {
filterPath.push(param); filterPath.push(param);
} else { } else {
filterPath.splice(labelIndex, 1); filterPath.splice(labelIndex, 1);
} }
gl.issueBoards.BoardsStore.filter.path = filterPath.join('&'); gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
Store.updateFiltersUrl(); Store.updateFiltersUrl();
eventHub.$emit('updateTokens'); eventHub.$emit('updateTokens');
}, },
labelStyle(label) { labelStyle(label) {
return { return {
backgroundColor: label.color, backgroundColor: label.color,
color: label.textColor, color: label.textColor,
}; };
},
}, },
template: ` },
<div> template: `
<div class="card-header"> <div>
<h4 class="card-title"> <div class="card-header">
<i <h4 class="card-title">
class="fa fa-eye-slash confidential-icon" <i
v-if="issue.confidential" class="fa fa-eye-slash confidential-icon"
aria-hidden="true" v-if="issue.confidential"
/> aria-hidden="true"
<a />
class="js-no-trigger"
:href="cardUrl"
:title="issue.title">{{ issue.title }}</a>
<span
class="card-number"
v-if="issue.id"
>
{{ issueId }}
</span>
</h4>
<a <a
class="card-assignee has-tooltip js-no-trigger" class="js-no-trigger"
:href="assigneeUrl" :href="cardUrl"
:title="assigneeUrlTitle" :title="issue.title">{{ issue.title }}</a>
v-if="issue.assignee" <span
data-container="body" class="card-number"
v-if="issue.id"
> >
<img {{ issueId }}
class="avatar avatar-inline s20 js-no-trigger" </span>
:src="issue.assignee.avatar" </h4>
width="20" <a
height="20" class="card-assignee has-tooltip js-no-trigger"
:alt="avatarUrlTitle" :href="assigneeUrl"
/> :title="assigneeUrlTitle"
</a> v-if="issue.assignee"
</div> data-container="body"
<div class="card-footer" v-if="showLabelFooter"> >
<button <img
class="label color-label has-tooltip js-no-trigger" class="avatar avatar-inline s20 js-no-trigger"
v-for="label in issue.labels" :src="issue.assignee.avatar"
type="button" width="20"
v-if="showLabel(label)" height="20"
@click="filterByLabel(label, $event)" :alt="avatarUrlTitle"
:style="labelStyle(label)" />
:title="label.description" </a>
data-container="body"> </div>
{{ label.title }} <div class="card-footer" v-if="showLabelFooter">
</button> <button
</div> class="label color-label has-tooltip js-no-trigger"
v-for="label in issue.labels"
type="button"
v-if="showLabel(label)"
@click="filterByLabel(label, $event)"
:style="labelStyle(label)"
:title="label.description"
data-container="body">
{{ label.title }}
</button>
</div> </div>
`, </div>
}); `,
})(); });
import Vue from 'vue'; import Vue from 'vue';
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalEmptyState = Vue.extend({ gl.issueBoards.ModalEmptyState = Vue.extend({
mixins: [gl.issueBoards.ModalMixins], mixins: [gl.issueBoards.ModalMixins],
data() { data() {
return ModalStore.store; return ModalStore.store;
},
props: {
image: {
type: String,
required: true,
}, },
props: { newIssuePath: {
image: { type: String,
type: String, required: true,
required: true,
},
newIssuePath: {
type: String,
required: true,
},
}, },
computed: { },
contents() { computed: {
const obj = { contents() {
title: 'You haven\'t added any issues to your project yet', const obj = {
content: ` title: 'You haven\'t added any issues to your project yet',
An issue can be a bug, a todo or a feature request that needs to be content: `
discussed in a project. Besides, issues are searchable and filterable. An issue can be a bug, a todo or a feature request that needs to be
`, discussed in a project. Besides, issues are searchable and filterable.
}; `,
};
if (this.activeTab === 'selected') { if (this.activeTab === 'selected') {
obj.title = 'You haven\'t selected any issues yet'; obj.title = 'You haven\'t selected any issues yet';
obj.content = ` obj.content = `
Go back to <strong>Open issues</strong> and select some issues Go back to <strong>Open issues</strong> and select some issues
to add to your board. to add to your board.
`; `;
} }
return obj; return obj;
},
}, },
template: ` },
<section class="empty-state"> template: `
<div class="row"> <section class="empty-state">
<div class="col-xs-12 col-sm-6 col-sm-push-6"> <div class="row">
<aside class="svg-content" v-html="image"></aside> <div class="col-xs-12 col-sm-6 col-sm-push-6">
</div> <aside class="svg-content" v-html="image"></aside>
<div class="col-xs-12 col-sm-6 col-sm-pull-6"> </div>
<div class="text-content"> <div class="col-xs-12 col-sm-6 col-sm-pull-6">
<h4>{{ contents.title }}</h4> <div class="text-content">
<p v-html="contents.content"></p> <h4>{{ contents.title }}</h4>
<a <p v-html="contents.content"></p>
:href="newIssuePath" <a
class="btn btn-success btn-inverted" :href="newIssuePath"
v-if="activeTab === 'all'"> class="btn btn-success btn-inverted"
New issue v-if="activeTab === 'all'">
</a> New issue
<button </a>
type="button" <button
class="btn btn-default" type="button"
@click="changeTab('all')" class="btn btn-default"
v-if="activeTab === 'selected'"> @click="changeTab('all')"
Open issues v-if="activeTab === 'selected'">
</button> Open issues
</div> </button>
</div> </div>
</div> </div>
</section> </div>
`, </section>
}); `,
})(); });
...@@ -5,80 +5,78 @@ import Vue from 'vue'; ...@@ -5,80 +5,78 @@ import Vue from 'vue';
require('./lists_dropdown'); require('./lists_dropdown');
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalFooter = Vue.extend({ gl.issueBoards.ModalFooter = Vue.extend({
mixins: [gl.issueBoards.ModalMixins], mixins: [gl.issueBoards.ModalMixins],
data() { data() {
return { return {
modal: ModalStore.store, modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state, state: gl.issueBoards.BoardsStore.state,
}; };
},
computed: {
submitDisabled() {
return !ModalStore.selectedCount();
}, },
computed: { submitText() {
submitDisabled() { const count = ModalStore.selectedCount();
return !ModalStore.selectedCount();
},
submitText() {
const count = ModalStore.selectedCount();
return `Add ${count > 0 ? count : ''} ${gl.text.pluralize('issue', count)}`; return `Add ${count > 0 ? count : ''} ${gl.text.pluralize('issue', count)}`;
},
}, },
methods: { },
addIssues() { methods: {
const list = this.modal.selectedList || this.state.lists[0]; addIssues() {
const selectedIssues = ModalStore.getSelectedIssues(); const list = this.modal.selectedList || this.state.lists[0];
const issueIds = selectedIssues.map(issue => issue.globalId); const selectedIssues = ModalStore.getSelectedIssues();
const issueIds = selectedIssues.map(issue => issue.globalId);
// Post the data to the backend // Post the data to the backend
gl.boardService.bulkUpdate(issueIds, { gl.boardService.bulkUpdate(issueIds, {
add_label_ids: [list.label.id], add_label_ids: [list.label.id],
}).catch(() => { }).catch(() => {
new Flash('Failed to update issues, please try again.', 'alert'); new Flash('Failed to update issues, please try again.', 'alert');
selectedIssues.forEach((issue) => {
list.removeIssue(issue);
list.issuesSize -= 1;
});
});
// Add the issues on the frontend
selectedIssues.forEach((issue) => { selectedIssues.forEach((issue) => {
list.addIssue(issue); list.removeIssue(issue);
list.issuesSize += 1; list.issuesSize -= 1;
}); });
});
this.toggleModal(false); // Add the issues on the frontend
}, selectedIssues.forEach((issue) => {
}, list.addIssue(issue);
components: { list.issuesSize += 1;
'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, });
this.toggleModal(false);
}, },
template: ` },
<footer components: {
class="form-actions add-issues-footer"> 'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
<div class="pull-left"> },
<button template: `
class="btn btn-success" <footer
type="button" class="form-actions add-issues-footer">
:disabled="submitDisabled" <div class="pull-left">
@click="addIssues">
{{ submitText }}
</button>
<span class="inline add-issues-footer-to-list">
to list
</span>
<lists-dropdown></lists-dropdown>
</div>
<button <button
class="btn btn-default pull-right" class="btn btn-success"
type="button" type="button"
@click="toggleModal(false)"> :disabled="submitDisabled"
Cancel @click="addIssues">
{{ submitText }}
</button> </button>
</footer> <span class="inline add-issues-footer-to-list">
`, to list
}); </span>
})(); <lists-dropdown></lists-dropdown>
</div>
<button
class="btn btn-default pull-right"
type="button"
@click="toggleModal(false)">
Cancel
</button>
</footer>
`,
});
...@@ -3,80 +3,78 @@ import modalFilters from './filters'; ...@@ -3,80 +3,78 @@ import modalFilters from './filters';
require('./tabs'); require('./tabs');
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalHeader = Vue.extend({ gl.issueBoards.ModalHeader = Vue.extend({
mixins: [gl.issueBoards.ModalMixins], mixins: [gl.issueBoards.ModalMixins],
props: { props: {
projectId: { projectId: {
type: Number, type: Number,
required: true, required: true,
},
milestonePath: {
type: String,
required: true,
},
labelPath: {
type: String,
required: true,
},
}, },
data() { milestonePath: {
return ModalStore.store; type: String,
required: true,
}, },
computed: { labelPath: {
selectAllText() { type: String,
if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) { required: true,
return 'Select all';
}
return 'Deselect all';
},
showSearch() {
return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
},
}, },
methods: { },
toggleAll() { data() {
this.$refs.selectAllBtn.blur(); return ModalStore.store;
},
computed: {
selectAllText() {
if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
return 'Select all';
}
ModalStore.toggleAll(); return 'Deselect all';
}, },
showSearch() {
return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
}, },
components: { },
'modal-tabs': gl.issueBoards.ModalTabs, methods: {
modalFilters, toggleAll() {
this.$refs.selectAllBtn.blur();
ModalStore.toggleAll();
}, },
template: ` },
<div> components: {
<header class="add-issues-header form-actions"> 'modal-tabs': gl.issueBoards.ModalTabs,
<h2> modalFilters,
Add issues },
<button template: `
type="button" <div>
class="close" <header class="add-issues-header form-actions">
data-dismiss="modal" <h2>
aria-label="Close" Add issues
@click="toggleModal(false)">
<span aria-hidden="true">×</span>
</button>
</h2>
</header>
<modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
<div
class="add-issues-search append-bottom-10"
v-if="showSearch">
<modal-filters :store="filter" />
<button <button
type="button" type="button"
class="btn btn-success btn-inverted prepend-left-10" class="close"
ref="selectAllBtn" data-dismiss="modal"
@click="toggleAll"> aria-label="Close"
{{ selectAllText }} @click="toggleModal(false)">
<span aria-hidden="true">×</span>
</button> </button>
</div> </h2>
</header>
<modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
<div
class="add-issues-search append-bottom-10"
v-if="showSearch">
<modal-filters :store="filter" />
<button
type="button"
class="btn btn-success btn-inverted prepend-left-10"
ref="selectAllBtn"
@click="toggleAll">
{{ selectAllText }}
</button>
</div> </div>
`, </div>
}); `,
})(); });
...@@ -8,160 +8,158 @@ require('./list'); ...@@ -8,160 +8,158 @@ require('./list');
require('./footer'); require('./footer');
require('./empty_state'); require('./empty_state');
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.IssuesModal = Vue.extend({ gl.issueBoards.IssuesModal = Vue.extend({
props: { props: {
blankStateImage: { blankStateImage: {
type: String, type: String,
required: true, required: true,
},
newIssuePath: {
type: String,
required: true,
},
issueLinkBase: {
type: String,
required: true,
},
rootPath: {
type: String,
required: true,
},
projectId: {
type: Number,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelPath: {
type: String,
required: true,
},
}, },
data() { newIssuePath: {
return ModalStore.store; type: String,
required: true,
}, },
watch: { issueLinkBase: {
page() { type: String,
this.loadIssues(); required: true,
}, },
showAddIssuesModal() { rootPath: {
if (this.showAddIssuesModal && !this.issues.length) { type: String,
this.loading = true; required: true,
},
projectId: {
type: Number,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelPath: {
type: String,
required: true,
},
},
data() {
return ModalStore.store;
},
watch: {
page() {
this.loadIssues();
},
showAddIssuesModal() {
if (this.showAddIssuesModal && !this.issues.length) {
this.loading = true;
this.loadIssues()
.then(() => {
this.loading = false;
});
} else if (!this.showAddIssuesModal) {
this.issues = [];
this.selectedIssues = [];
this.issuesCount = false;
}
},
filter: {
handler() {
if (this.$el.tagName) {
this.page = 1;
this.filterLoading = true;
this.loadIssues() this.loadIssues(true)
.then(() => { .then(() => {
this.loading = false; this.filterLoading = false;
}); });
} else if (!this.showAddIssuesModal) {
this.issues = [];
this.selectedIssues = [];
this.issuesCount = false;
} }
}, },
filter: { deep: true,
handler() {
if (this.$el.tagName) {
this.page = 1;
this.filterLoading = true;
this.loadIssues(true)
.then(() => {
this.filterLoading = false;
});
}
},
deep: true,
},
}, },
methods: { },
loadIssues(clearIssues = false) { methods: {
if (!this.showAddIssuesModal) return false; loadIssues(clearIssues = false) {
if (!this.showAddIssuesModal) return false;
return gl.boardService.getBacklog(queryData(this.filter.path, {
page: this.page,
per: this.perPage,
})).then((res) => {
const data = res.json();
if (clearIssues) {
this.issues = [];
}
data.issues.forEach((issueObj) => { return gl.boardService.getBacklog(queryData(this.filter.path, {
const issue = new ListIssue(issueObj); page: this.page,
const foundSelectedIssue = ModalStore.findSelectedIssue(issue); per: this.perPage,
issue.selected = !!foundSelectedIssue; })).then((res) => {
const data = res.json();
this.issues.push(issue); if (clearIssues) {
}); this.issues = [];
}
this.loadingNewPage = false; data.issues.forEach((issueObj) => {
const issue = new ListIssue(issueObj);
const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
issue.selected = !!foundSelectedIssue;
if (!this.issuesCount) { this.issues.push(issue);
this.issuesCount = data.size;
}
}); });
},
},
computed: {
showList() {
if (this.activeTab === 'selected') {
return this.selectedIssues.length > 0;
}
return this.issuesCount > 0; this.loadingNewPage = false;
},
showEmptyState() {
if (!this.loading && this.issuesCount === 0) {
return true;
}
return this.activeTab === 'selected' && this.selectedIssues.length === 0; if (!this.issuesCount) {
}, this.issuesCount = data.size;
}
});
}, },
created() { },
this.page = 1; computed: {
showList() {
if (this.activeTab === 'selected') {
return this.selectedIssues.length > 0;
}
return this.issuesCount > 0;
}, },
components: { showEmptyState() {
'modal-header': gl.issueBoards.ModalHeader, if (!this.loading && this.issuesCount === 0) {
'modal-list': gl.issueBoards.ModalList, return true;
'modal-footer': gl.issueBoards.ModalFooter, }
'empty-state': gl.issueBoards.ModalEmptyState,
return this.activeTab === 'selected' && this.selectedIssues.length === 0;
}, },
template: ` },
<div created() {
class="add-issues-modal" this.page = 1;
v-if="showAddIssuesModal"> },
<div class="add-issues-container"> components: {
<modal-header 'modal-header': gl.issueBoards.ModalHeader,
:project-id="projectId" 'modal-list': gl.issueBoards.ModalList,
:milestone-path="milestonePath" 'modal-footer': gl.issueBoards.ModalFooter,
:label-path="labelPath"> 'empty-state': gl.issueBoards.ModalEmptyState,
</modal-header> },
<modal-list template: `
:image="blankStateImage" <div
:issue-link-base="issueLinkBase" class="add-issues-modal"
:root-path="rootPath" v-if="showAddIssuesModal">
v-if="!loading && showList && !filterLoading"></modal-list> <div class="add-issues-container">
<empty-state <modal-header
v-if="showEmptyState" :project-id="projectId"
:image="blankStateImage" :milestone-path="milestonePath"
:new-issue-path="newIssuePath"></empty-state> :label-path="labelPath">
<section </modal-header>
class="add-issues-list text-center" <modal-list
v-if="loading || filterLoading"> :image="blankStateImage"
<div class="add-issues-list-loading"> :issue-link-base="issueLinkBase"
<i class="fa fa-spinner fa-spin"></i> :root-path="rootPath"
</div> v-if="!loading && showList && !filterLoading"></modal-list>
</section> <empty-state
<modal-footer></modal-footer> v-if="showEmptyState"
</div> :image="blankStateImage"
:new-issue-path="newIssuePath"></empty-state>
<section
class="add-issues-list text-center"
v-if="loading || filterLoading">
<div class="add-issues-list-loading">
<i class="fa fa-spinner fa-spin"></i>
</div>
</section>
<modal-footer></modal-footer>
</div> </div>
`, </div>
}); `,
})(); });
...@@ -3,159 +3,157 @@ ...@@ -3,159 +3,157 @@
import Vue from 'vue'; import Vue from 'vue';
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalList = Vue.extend({ gl.issueBoards.ModalList = Vue.extend({
props: { props: {
issueLinkBase: { issueLinkBase: {
type: String, type: String,
required: true, required: true,
},
rootPath: {
type: String,
required: true,
},
image: {
type: String,
required: true,
},
}, },
data() { rootPath: {
return ModalStore.store; type: String,
required: true,
}, },
watch: { image: {
activeTab() { type: String,
if (this.activeTab === 'all') { required: true,
ModalStore.purgeUnselectedIssues();
}
},
}, },
computed: { },
loopIssues() { data() {
if (this.activeTab === 'all') { return ModalStore.store;
return this.issues; },
} watch: {
activeTab() {
return this.selectedIssues; if (this.activeTab === 'all') {
}, ModalStore.purgeUnselectedIssues();
groupedIssues() { }
const groups = []; },
this.loopIssues.forEach((issue, i) => { },
const index = i % this.columns; computed: {
loopIssues() {
if (!groups[index]) { if (this.activeTab === 'all') {
groups.push([]); return this.issues;
} }
groups[index].push(issue);
});
return groups; return this.selectedIssues;
},
}, },
methods: { groupedIssues() {
scrollHandler() { const groups = [];
const currentPage = Math.floor(this.issues.length / this.perPage); this.loopIssues.forEach((issue, i) => {
const index = i % this.columns;
if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage if (!groups[index]) {
&& currentPage === this.page) { groups.push([]);
this.loadingNewPage = true;
this.page += 1;
} }
},
toggleIssue(e, issue) {
if (e.target.tagName !== 'A') {
ModalStore.toggleIssue(issue);
}
},
listHeight() {
return this.$refs.list.getBoundingClientRect().height;
},
scrollHeight() {
return this.$refs.list.scrollHeight;
},
scrollTop() {
return this.$refs.list.scrollTop + this.listHeight();
},
showIssue(issue) {
if (this.activeTab === 'all') return true;
const index = ModalStore.selectedIssueIndex(issue);
return index !== -1; groups[index].push(issue);
}, });
setColumnCount() {
const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'lg' || breakpoint === 'md') { return groups;
this.columns = 3;
} else if (breakpoint === 'sm') {
this.columns = 2;
} else {
this.columns = 1;
}
},
}, },
mounted() { },
this.scrollHandlerWrapper = this.scrollHandler.bind(this); methods: {
this.setColumnCountWrapper = this.setColumnCount.bind(this); scrollHandler() {
this.setColumnCount(); const currentPage = Math.floor(this.issues.length / this.perPage);
this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper); if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
window.addEventListener('resize', this.setColumnCountWrapper); && currentPage === this.page) {
this.loadingNewPage = true;
this.page += 1;
}
},
toggleIssue(e, issue) {
if (e.target.tagName !== 'A') {
ModalStore.toggleIssue(issue);
}
},
listHeight() {
return this.$refs.list.getBoundingClientRect().height;
}, },
beforeDestroy() { scrollHeight() {
this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper); return this.$refs.list.scrollHeight;
window.removeEventListener('resize', this.setColumnCountWrapper);
}, },
components: { scrollTop() {
'issue-card-inner': gl.issueBoards.IssueCardInner, return this.$refs.list.scrollTop + this.listHeight();
}, },
template: ` showIssue(issue) {
<section if (this.activeTab === 'all') return true;
class="add-issues-list add-issues-list-columns"
ref="list"> const index = ModalStore.selectedIssueIndex(issue);
return index !== -1;
},
setColumnCount() {
const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'lg' || breakpoint === 'md') {
this.columns = 3;
} else if (breakpoint === 'sm') {
this.columns = 2;
} else {
this.columns = 1;
}
},
},
mounted() {
this.scrollHandlerWrapper = this.scrollHandler.bind(this);
this.setColumnCountWrapper = this.setColumnCount.bind(this);
this.setColumnCount();
this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
window.addEventListener('resize', this.setColumnCountWrapper);
},
beforeDestroy() {
this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
window.removeEventListener('resize', this.setColumnCountWrapper);
},
components: {
'issue-card-inner': gl.issueBoards.IssueCardInner,
},
template: `
<section
class="add-issues-list add-issues-list-columns"
ref="list">
<div
class="empty-state add-issues-empty-state-filter text-center"
v-if="issuesCount > 0 && issues.length === 0">
<div <div
class="empty-state add-issues-empty-state-filter text-center" class="svg-content"
v-if="issuesCount > 0 && issues.length === 0"> v-html="image">
<div </div>
class="svg-content" <div class="text-content">
v-html="image"> <h4>
</div> There are no issues to show.
<div class="text-content"> </h4>
<h4>
There are no issues to show.
</h4>
</div>
</div> </div>
</div>
<div
v-for="group in groupedIssues"
class="add-issues-list-column">
<div <div
v-for="group in groupedIssues" v-for="issue in group"
class="add-issues-list-column"> v-if="showIssue(issue)"
class="card-parent">
<div <div
v-for="issue in group" class="card"
v-if="showIssue(issue)" :class="{ 'is-active': issue.selected }"
class="card-parent"> @click="toggleIssue($event, issue)">
<div <issue-card-inner
class="card" :issue="issue"
:class="{ 'is-active': issue.selected }" :issue-link-base="issueLinkBase"
@click="toggleIssue($event, issue)"> :root-path="rootPath">
<issue-card-inner </issue-card-inner>
:issue="issue" <span
:issue-link-base="issueLinkBase" :aria-label="'Issue #' + issue.id + ' selected'"
:root-path="rootPath"> aria-checked="true"
</issue-card-inner> v-if="issue.selected"
<span class="issue-card-selected text-center">
:aria-label="'Issue #' + issue.id + ' selected'" <i class="fa fa-check"></i>
aria-checked="true" </span>
v-if="issue.selected"
class="issue-card-selected text-center">
<i class="fa fa-check"></i>
</span>
</div>
</div> </div>
</div> </div>
</section> </div>
`, </section>
}); `,
})(); });
import Vue from 'vue'; import Vue from 'vue';
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalFooterListsDropdown = Vue.extend({ gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
data() { data() {
return { return {
modal: ModalStore.store, modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state, state: gl.issueBoards.BoardsStore.state,
}; };
},
computed: {
selected() {
return this.modal.selectedList || this.state.lists[0];
}, },
computed: { },
selected() { destroyed() {
return this.modal.selectedList || this.state.lists[0]; this.modal.selectedList = null;
}, },
}, template: `
destroyed() { <div class="dropdown inline">
this.modal.selectedList = null; <button
}, class="dropdown-menu-toggle"
template: ` type="button"
<div class="dropdown inline"> data-toggle="dropdown"
<button aria-expanded="false">
class="dropdown-menu-toggle" <span
type="button" class="dropdown-label-box"
data-toggle="dropdown" :style="{ backgroundColor: selected.label.color }">
aria-expanded="false"> </span>
<span {{ selected.title }}
class="dropdown-label-box" <i class="fa fa-chevron-down"></i>
:style="{ backgroundColor: selected.label.color }"> </button>
</span> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
{{ selected.title }} <ul>
<i class="fa fa-chevron-down"></i> <li
</button> v-for="list in state.lists"
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"> v-if="list.type == 'label'">
<ul> <a
<li href="#"
v-for="list in state.lists" role="button"
v-if="list.type == 'label'"> :class="{ 'is-active': list.id == selected.id }"
<a @click.prevent="modal.selectedList = list">
href="#" <span
role="button" class="dropdown-label-box"
:class="{ 'is-active': list.id == selected.id }" :style="{ backgroundColor: list.label.color }">
@click.prevent="modal.selectedList = list"> </span>
<span {{ list.title }}
class="dropdown-label-box" </a>
:style="{ backgroundColor: list.label.color }"> </li>
</span> </ul>
{{ list.title }}
</a>
</li>
</ul>
</div>
</div> </div>
`, </div>
}); `,
})(); });
import Vue from 'vue'; import Vue from 'vue';
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalTabs = Vue.extend({ gl.issueBoards.ModalTabs = Vue.extend({
mixins: [gl.issueBoards.ModalMixins], mixins: [gl.issueBoards.ModalMixins],
data() { data() {
return ModalStore.store; return ModalStore.store;
},
computed: {
selectedCount() {
return ModalStore.selectedCount();
}, },
computed: { },
selectedCount() { destroyed() {
return ModalStore.selectedCount(); this.activeTab = 'all';
}, },
}, template: `
destroyed() { <div class="top-area prepend-top-10 append-bottom-10">
this.activeTab = 'all'; <ul class="nav-links issues-state-filters">
}, <li :class="{ 'active': activeTab == 'all' }">
template: ` <a
<div class="top-area prepend-top-10 append-bottom-10"> href="#"
<ul class="nav-links issues-state-filters"> role="button"
<li :class="{ 'active': activeTab == 'all' }"> @click.prevent="changeTab('all')">
<a Open issues
href="#" <span class="badge">
role="button" {{ issuesCount }}
@click.prevent="changeTab('all')"> </span>
Open issues </a>
<span class="badge"> </li>
{{ issuesCount }} <li :class="{ 'active': activeTab == 'selected' }">
</span> <a
</a> href="#"
</li> role="button"
<li :class="{ 'active': activeTab == 'selected' }"> @click.prevent="changeTab('selected')">
<a Selected issues
href="#" <span class="badge">
role="button" {{ selectedCount }}
@click.prevent="changeTab('selected')"> </span>
Selected issues </a>
<span class="badge"> </li>
{{ selectedCount }} </ul>
</span> </div>
</a> `,
</li> });
</ul>
</div>
`,
});
})();
/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var */ /* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var */
(() => { window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore; const Store = gl.issueBoards.BoardsStore;
$(document).off('created.label').on('created.label', (e, label) => { $(document).off('created.label').on('created.label', (e, label) => {
Store.new({ Store.new({
title: label.title,
position: Store.state.lists.length - 2,
list_type: 'label',
label: {
id: label.id,
title: label.title, title: label.title,
position: Store.state.lists.length - 2, color: label.color
list_type: 'label', }
label: {
id: label.id,
title: label.title,
color: label.color
}
});
}); });
});
gl.issueBoards.newListDropdownInit = () => { gl.issueBoards.newListDropdownInit = () => {
$('.js-new-board-list').each(function () { $('.js-new-board-list').each(function () {
const $this = $(this); const $this = $(this);
new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path')); new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
$this.glDropdown({ $this.glDropdown({
data(term, callback) { data(term, callback) {
$.get($this.attr('data-labels')) $.get($this.attr('data-labels'))
.then((resp) => { .then((resp) => {
callback(resp); callback(resp);
});
},
renderRow (label) {
const active = Store.findList('title', label.title);
const $li = $('<li />');
const $a = $('<a />', {
class: (active ? `is-active js-board-list-${active.id}` : ''),
text: label.title,
href: '#'
});
const $labelColor = $('<span />', {
class: 'dropdown-label-box',
style: `background-color: ${label.color}`
}); });
},
renderRow (label) {
const active = Store.findList('title', label.title);
const $li = $('<li />');
const $a = $('<a />', {
class: (active ? `is-active js-board-list-${active.id}` : ''),
text: label.title,
href: '#'
});
const $labelColor = $('<span />', {
class: 'dropdown-label-box',
style: `background-color: ${label.color}`
});
return $li.append($a.prepend($labelColor)); return $li.append($a.prepend($labelColor));
}, },
search: { search: {
fields: ['title'] fields: ['title']
}, },
filterable: true, filterable: true,
selectable: true, selectable: true,
multiSelect: true, multiSelect: true,
clicked (label, $el, e) { clicked (label, $el, e) {
e.preventDefault(); e.preventDefault();
if (!Store.findList('title', label.title)) { if (!Store.findList('title', label.title)) {
Store.new({ Store.new({
title: label.title,
position: Store.state.lists.length - 2,
list_type: 'label',
label: {
id: label.id,
title: label.title, title: label.title,
position: Store.state.lists.length - 2, color: label.color
list_type: 'label', }
label: { });
id: label.id,
title: label.title,
color: label.color
}
});
Store.state.lists = _.sortBy(Store.state.lists, 'position'); Store.state.lists = _.sortBy(Store.state.lists, 'position');
}
} }
}); }
}); });
}; });
})(); };
...@@ -3,59 +3,57 @@ ...@@ -3,59 +3,57 @@
import Vue from 'vue'; import Vue from 'vue';
(() => { const Store = gl.issueBoards.BoardsStore;
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.RemoveIssueBtn = Vue.extend({
gl.issueBoards.RemoveIssueBtn = Vue.extend({ props: {
props: { issue: {
issue: { type: Object,
type: Object, required: true,
required: true,
},
list: {
type: Object,
required: true,
},
}, },
methods: { list: {
removeIssue() { type: Object,
const issue = this.issue; required: true,
const lists = issue.getLists(); },
const labelIds = lists.map(list => list.label.id); },
methods: {
// Post the remove data removeIssue() {
gl.boardService.bulkUpdate([issue.globalId], { const issue = this.issue;
remove_label_ids: labelIds, const lists = issue.getLists();
}).catch(() => { const labelIds = lists.map(list => list.label.id);
new Flash('Failed to remove issue from board, please try again.', 'alert');
// Post the remove data
lists.forEach((list) => { gl.boardService.bulkUpdate([issue.globalId], {
list.addIssue(issue); remove_label_ids: labelIds,
}); }).catch(() => {
}); new Flash('Failed to remove issue from board, please try again.', 'alert');
// Remove from the frontend store
lists.forEach((list) => { lists.forEach((list) => {
list.removeIssue(issue); list.addIssue(issue);
}); });
});
// Remove from the frontend store
lists.forEach((list) => {
list.removeIssue(issue);
});
Store.detail.issue = {}; Store.detail.issue = {};
},
}, },
template: ` },
<div template: `
class="block list" <div
v-if="list.type !== 'closed'"> class="block list"
<button v-if="list.type !== 'closed'">
class="btn btn-default btn-block" <button
type="button" class="btn btn-default btn-block"
@click="removeIssue"> type="button"
Remove from board @click="removeIssue">
</button> Remove from board
</div> </button>
`, </div>
}); `,
})(); });
(() => { const ModalStore = gl.issueBoards.ModalStore;
const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalMixins = { gl.issueBoards.ModalMixins = {
methods: { methods: {
toggleModal(toggle) { toggleModal(toggle) {
ModalStore.store.showAddIssuesModal = toggle; ModalStore.store.showAddIssuesModal = toggle;
},
changeTab(tab) {
ModalStore.store.activeTab = tab;
},
}, },
}; changeTab(tab) {
})(); ModalStore.store.activeTab = tab;
},
},
};
/* eslint-disable no-unused-vars, no-mixed-operators, comma-dangle */ /* eslint-disable no-unused-vars, no-mixed-operators, comma-dangle */
/* global DocumentTouch */ /* global DocumentTouch */
((w) => { window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.onStart = () => { gl.issueBoards.onStart = () => {
$('.has-tooltip').tooltip('hide') $('.has-tooltip').tooltip('hide')
.tooltip('disable'); .tooltip('disable');
document.body.classList.add('is-dragging'); document.body.classList.add('is-dragging');
}; };
gl.issueBoards.onEnd = () => {
$('.has-tooltip').tooltip('enable');
document.body.classList.remove('is-dragging');
};
gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; gl.issueBoards.onEnd = () => {
$('.has-tooltip').tooltip('enable');
document.body.classList.remove('is-dragging');
};
gl.issueBoards.getBoardSortableDefaultOptions = (obj) => { gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
const defaultSortOptions = {
animation: 200,
forceFallback: true,
fallbackClass: 'is-dragging',
fallbackOnBody: true,
ghostClass: 'is-ghost',
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
};
Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; }); gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
return defaultSortOptions; const defaultSortOptions = {
animation: 200,
forceFallback: true,
fallbackClass: 'is-dragging',
fallbackOnBody: true,
ghostClass: 'is-ghost',
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
}; };
})(window);
Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
return defaultSortOptions;
};
...@@ -3,125 +3,123 @@ ...@@ -3,125 +3,123 @@
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
(() => { window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardsStore = { gl.issueBoards.BoardsStore = {
disabled: false, disabled: false,
filter: { filter: {
path: '', path: '',
}, },
state: {}, state: {},
detail: { detail: {
issue: {} issue: {}
}, },
moving: { moving: {
issue: {}, issue: {},
list: {} list: {}
}, },
create () { create () {
this.state.lists = []; this.state.lists = [];
this.filter.path = gl.utils.getUrlParamsArray().join('&'); this.filter.path = gl.utils.getUrlParamsArray().join('&');
}, },
addList (listObj) { addList (listObj) {
const list = new List(listObj); const list = new List(listObj);
this.state.lists.push(list); this.state.lists.push(list);
return list; return list;
}, },
new (listObj) { new (listObj) {
const list = this.addList(listObj); const list = this.addList(listObj);
list list
.save() .save()
.then(() => { .then(() => {
this.state.lists = _.sortBy(this.state.lists, 'position'); this.state.lists = _.sortBy(this.state.lists, 'position');
});
this.removeBlankState();
},
updateNewListDropdown (listId) {
$(`.js-board-list-${listId}`).removeClass('is-active');
},
shouldAddBlankState () {
// Decide whether to add the blank state
return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
},
addBlankState () {
if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
this.addList({
id: 'blank',
list_type: 'blank',
title: 'Welcome to your Issue Board!',
position: 0
}); });
this.removeBlankState();
},
updateNewListDropdown (listId) {
$(`.js-board-list-${listId}`).removeClass('is-active');
},
shouldAddBlankState () {
// Decide whether to add the blank state
return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
},
addBlankState () {
if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
this.state.lists = _.sortBy(this.state.lists, 'position'); this.addList({
}, id: 'blank',
removeBlankState () { list_type: 'blank',
this.removeList('blank'); title: 'Welcome to your Issue Board!',
position: 0
Cookies.set('issue_board_welcome_hidden', 'true', { });
expires: 365 * 10,
path: ''
});
},
welcomeIsHidden () {
return Cookies.get('issue_board_welcome_hidden') === 'true';
},
removeList (id, type = 'blank') {
const list = this.findList('id', id, type);
if (!list) return; this.state.lists = _.sortBy(this.state.lists, 'position');
},
removeBlankState () {
this.removeList('blank');
this.state.lists = this.state.lists.filter(list => list.id !== id); Cookies.set('issue_board_welcome_hidden', 'true', {
}, expires: 365 * 10,
moveList (listFrom, orderLists) { path: ''
orderLists.forEach((id, i) => { });
const list = this.findList('id', parseInt(id, 10)); },
welcomeIsHidden () {
return Cookies.get('issue_board_welcome_hidden') === 'true';
},
removeList (id, type = 'blank') {
const list = this.findList('id', id, type);
list.position = i; if (!list) return;
});
listFrom.update();
},
moveIssueToList (listFrom, listTo, issue, newIndex) {
const issueTo = listTo.findIssue(issue.id);
const issueLists = issue.getLists();
const listLabels = issueLists.map(listIssue => listIssue.label);
if (!issueTo) { this.state.lists = this.state.lists.filter(list => list.id !== id);
// Add to new lists issues if it doesn't already exist },
listTo.addIssue(issue, listFrom, newIndex); moveList (listFrom, orderLists) {
} else { orderLists.forEach((id, i) => {
listTo.updateIssueLabel(issue, listFrom); const list = this.findList('id', parseInt(id, 10));
issueTo.removeLabel(listFrom.label);
}
if (listTo.type === 'closed') { list.position = i;
issueLists.forEach((list) => { });
list.removeIssue(issue); listFrom.update();
}); },
issue.removeLabels(listLabels); moveIssueToList (listFrom, listTo, issue, newIndex) {
} else { const issueTo = listTo.findIssue(issue.id);
listFrom.removeIssue(issue); const issueLists = issue.getLists();
} const listLabels = issueLists.map(listIssue => listIssue.label);
},
moveIssueInList (list, issue, oldIndex, newIndex, idArray) {
const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
const afterId = parseInt(idArray[newIndex + 1], 10) || null;
list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId); if (!issueTo) {
}, // Add to new lists issues if it doesn't already exist
findList (key, val, type = 'label') { listTo.addIssue(issue, listFrom, newIndex);
return this.state.lists.filter((list) => { } else {
const byType = type ? list['type'] === type : true; listTo.updateIssueLabel(issue, listFrom);
issueTo.removeLabel(listFrom.label);
}
return list[key] === val && byType; if (listTo.type === 'closed') {
})[0]; issueLists.forEach((list) => {
}, list.removeIssue(issue);
updateFiltersUrl () { });
history.pushState(null, null, `?${this.filter.path}`); issue.removeLabels(listLabels);
} else {
listFrom.removeIssue(issue);
} }
}; },
})(); moveIssueInList (list, issue, oldIndex, newIndex, idArray) {
const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
const afterId = parseInt(idArray[newIndex + 1], 10) || null;
list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
},
findList (key, val, type = 'label') {
return this.state.lists.filter((list) => {
const byType = type ? list['type'] === type : true;
return list[key] === val && byType;
})[0];
},
updateFiltersUrl () {
history.pushState(null, null, `?${this.filter.path}`);
}
};
(() => { window.gl = window.gl || {};
window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
class ModalStore {
class ModalStore { constructor() {
constructor() { this.store = {
this.store = { columns: 3,
columns: 3, issues: [],
issues: [], issuesCount: false,
issuesCount: false, selectedIssues: [],
selectedIssues: [], showAddIssuesModal: false,
showAddIssuesModal: false, activeTab: 'all',
activeTab: 'all', selectedList: null,
selectedList: null, searchTerm: '',
searchTerm: '', loading: false,
loading: false, loadingNewPage: false,
loadingNewPage: false, filterLoading: false,
filterLoading: false, page: 1,
page: 1, perPage: 50,
perPage: 50, filter: {
filter: { path: '',
path: '', },
}, };
}; }
}
selectedCount() { selectedCount() {
return this.getSelectedIssues().length; return this.getSelectedIssues().length;
} }
toggleIssue(issueObj) { toggleIssue(issueObj) {
const issue = issueObj; const issue = issueObj;
const selected = issue.selected; const selected = issue.selected;
issue.selected = !selected; issue.selected = !selected;
if (!selected) { if (!selected) {
this.addSelectedIssue(issue); this.addSelectedIssue(issue);
} else { } else {
this.removeSelectedIssue(issue); this.removeSelectedIssue(issue);
}
} }
}
toggleAll() { toggleAll() {
const select = this.selectedCount() !== this.store.issues.length; const select = this.selectedCount() !== this.store.issues.length;
this.store.issues.forEach((issue) => { this.store.issues.forEach((issue) => {
const issueUpdate = issue; const issueUpdate = issue;
if (issueUpdate.selected !== select) { if (issueUpdate.selected !== select) {
issueUpdate.selected = select; issueUpdate.selected = select;
if (select) { if (select) {
this.addSelectedIssue(issue); this.addSelectedIssue(issue);
} else { } else {
this.removeSelectedIssue(issue); this.removeSelectedIssue(issue);
}
} }
}); }
} });
}
getSelectedIssues() { getSelectedIssues() {
return this.store.selectedIssues.filter(issue => issue.selected); return this.store.selectedIssues.filter(issue => issue.selected);
} }
addSelectedIssue(issue) { addSelectedIssue(issue) {
const index = this.selectedIssueIndex(issue); const index = this.selectedIssueIndex(issue);
if (index === -1) { if (index === -1) {
this.store.selectedIssues.push(issue); this.store.selectedIssues.push(issue);
}
} }
}
removeSelectedIssue(issue, forcePurge = false) { removeSelectedIssue(issue, forcePurge = false) {
if (this.store.activeTab === 'all' || forcePurge) { if (this.store.activeTab === 'all' || forcePurge) {
this.store.selectedIssues = this.store.selectedIssues this.store.selectedIssues = this.store.selectedIssues
.filter(fIssue => fIssue.id !== issue.id); .filter(fIssue => fIssue.id !== issue.id);
}
} }
}
purgeUnselectedIssues() { purgeUnselectedIssues() {
this.store.selectedIssues.forEach((issue) => { this.store.selectedIssues.forEach((issue) => {
if (!issue.selected) { if (!issue.selected) {
this.removeSelectedIssue(issue, true); this.removeSelectedIssue(issue, true);
} }
}); });
} }
selectedIssueIndex(issue) { selectedIssueIndex(issue) {
return this.store.selectedIssues.indexOf(issue); return this.store.selectedIssues.indexOf(issue);
} }
findSelectedIssue(issue) { findSelectedIssue(issue) {
return this.store.selectedIssues return this.store.selectedIssues
.filter(filteredIssue => filteredIssue.id === issue.id)[0]; .filter(filteredIssue => filteredIssue.id === issue.id)[0];
}
} }
}
gl.issueBoards.ModalStore = new ModalStore(); gl.issueBoards.ModalStore = new ModalStore();
})();
...@@ -2,46 +2,45 @@ ...@@ -2,46 +2,45 @@
import Vue from 'vue'; import Vue from 'vue';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageCodeComponent = Vue.extend({ global.cycleAnalytics.StageCodeComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="mergeRequest in items" class="stage-event-item">
<div class="item-details">
<img class="avatar" :src="mergeRequest.author.avatarUrl">
<h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url">
{{ mergeRequest.title }}
</a>
</h5>
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
&middot;
<span>
Opened
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
</span>
<span>
by
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
</span>
</div>
<div class="item-time">
<total-time :time="mergeRequest.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="mergeRequest in items" class="stage-event-item">
})(window.gl || (window.gl = {})); <div class="item-details">
<img class="avatar" :src="mergeRequest.author.avatarUrl">
<h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url">
{{ mergeRequest.title }}
</a>
</h5>
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
&middot;
<span>
Opened
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
</span>
<span>
by
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
</span>
</div>
<div class="item-time">
<total-time :time="mergeRequest.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -2,48 +2,47 @@ ...@@ -2,48 +2,47 @@
import Vue from 'vue'; import Vue from 'vue';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageIssueComponent = Vue.extend({ global.cycleAnalytics.StageIssueComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="issue in items" class="stage-event-item">
<div class="item-details">
<img class="avatar" :src="issue.author.avatarUrl">
<h5 class="item-title issue-title">
<a class="issue-title" :href="issue.url">
{{ issue.title }}
</a>
</h5>
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
&middot;
<span>
Opened
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
by
<a :href="issue.author.webUrl" class="issue-author-link">
{{ issue.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="issue.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="issue in items" class="stage-event-item">
})(window.gl || (window.gl = {})); <div class="item-details">
<img class="avatar" :src="issue.author.avatarUrl">
<h5 class="item-title issue-title">
<a class="issue-title" :href="issue.url">
{{ issue.title }}
</a>
</h5>
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
&middot;
<span>
Opened
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
by
<a :href="issue.author.webUrl" class="issue-author-link">
{{ issue.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="issue.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -2,50 +2,49 @@ ...@@ -2,50 +2,49 @@
import Vue from 'vue'; import Vue from 'vue';
import iconCommit from '../svg/icon_commit.svg'; import iconCommit from '../svg/icon_commit.svg';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StagePlanComponent = Vue.extend({ global.cycleAnalytics.StagePlanComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
data() { data() {
return { iconCommit }; return { iconCommit };
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="commit in items" class="stage-event-item">
<div class="item-details item-conmmit-component">
<img class="avatar" :src="commit.author.avatarUrl">
<h5 class="item-title commit-title">
<a :href="commit.commitUrl">
{{ commit.title }}
</a>
</h5>
<span>
First
<span class="commit-icon">${iconCommit}</span>
<a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
pushed by
<a :href="commit.author.webUrl" class="commit-author-link">
{{ commit.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="commit.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="commit in items" class="stage-event-item">
})(window.gl || (window.gl = {})); <div class="item-details item-conmmit-component">
<img class="avatar" :src="commit.author.avatarUrl">
<h5 class="item-title commit-title">
<a :href="commit.commitUrl">
{{ commit.title }}
</a>
</h5>
<span>
First
<span class="commit-icon">${iconCommit}</span>
<a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
pushed by
<a :href="commit.author.webUrl" class="commit-author-link">
{{ commit.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="commit.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -2,48 +2,47 @@ ...@@ -2,48 +2,47 @@
import Vue from 'vue'; import Vue from 'vue';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageProductionComponent = Vue.extend({ global.cycleAnalytics.StageProductionComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="issue in items" class="stage-event-item">
<div class="item-details">
<img class="avatar" :src="issue.author.avatarUrl">
<h5 class="item-title issue-title">
<a class="issue-title" :href="issue.url">
{{ issue.title }}
</a>
</h5>
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
&middot;
<span>
Opened
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
by
<a :href="issue.author.webUrl" class="issue-author-link">
{{ issue.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="issue.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="issue in items" class="stage-event-item">
})(window.gl || (window.gl = {})); <div class="item-details">
<img class="avatar" :src="issue.author.avatarUrl">
<h5 class="item-title issue-title">
<a class="issue-title" :href="issue.url">
{{ issue.title }}
</a>
</h5>
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
&middot;
<span>
Opened
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
by
<a :href="issue.author.webUrl" class="issue-author-link">
{{ issue.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="issue.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -2,58 +2,57 @@ ...@@ -2,58 +2,57 @@
import Vue from 'vue'; import Vue from 'vue';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageReviewComponent = Vue.extend({ global.cycleAnalytics.StageReviewComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div> </div>
<ul class="stage-event-list"> <ul class="stage-event-list">
<li v-for="mergeRequest in items" class="stage-event-item"> <li v-for="mergeRequest in items" class="stage-event-item">
<div class="item-details"> <div class="item-details">
<img class="avatar" :src="mergeRequest.author.avatarUrl"> <img class="avatar" :src="mergeRequest.author.avatarUrl">
<h5 class="item-title merge-merquest-title"> <h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url"> <a :href="mergeRequest.url">
{{ mergeRequest.title }} {{ mergeRequest.title }}
</a> </a>
</h5> </h5>
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
&middot; &middot;
<span> <span>
Opened Opened
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a> <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
</span>
<span>
by
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
</span>
<template v-if="mergeRequest.state === 'closed'">
<span class="merge-request-state">
<i class="fa fa-ban"></i>
{{ mergeRequest.state.toUpperCase() }}
</span> </span>
<span> </template>
by <template v-else>
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a> <span class="merge-request-branch" v-if="mergeRequest.branch">
<i class= "fa fa-code-fork"></i>
<a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
</span> </span>
<template v-if="mergeRequest.state === 'closed'"> </template>
<span class="merge-request-state"> </div>
<i class="fa fa-ban"></i> <div class="item-time">
{{ mergeRequest.state.toUpperCase() }} <total-time :time="mergeRequest.totalTime"></total-time>
</span> </div>
</template> </li>
<template v-else> </ul>
<span class="merge-request-branch" v-if="mergeRequest.branch"> </div>
<i class= "fa fa-code-fork"></i> `,
<a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a> });
</span>
</template>
</div>
<div class="item-time">
<total-time :time="mergeRequest.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
})(window.gl || (window.gl = {}));
...@@ -2,48 +2,47 @@ ...@@ -2,48 +2,47 @@
import Vue from 'vue'; import Vue from 'vue';
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageStagingComponent = Vue.extend({ global.cycleAnalytics.StageStagingComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
data() { data() {
return { iconBranch }; return { iconBranch };
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="build in items" class="stage-event-item item-build-component">
<div class="item-details">
<img class="avatar" :src="build.author.avatarUrl">
<h5 class="item-title">
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
<span class="icon-branch">${iconBranch}</span>
<a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
</h5>
<span>
<a :href="build.url" class="build-date">{{ build.date }}</a>
by
<a :href="build.author.webUrl" class="issue-author-link">
{{ build.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="build in items" class="stage-event-item item-build-component">
})(window.gl || (window.gl = {})); <div class="item-details">
<img class="avatar" :src="build.author.avatarUrl">
<h5 class="item-title">
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
<span class="icon-branch">${iconBranch}</span>
<a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
</h5>
<span>
<a :href="build.url" class="build-date">{{ build.date }}</a>
by
<a :href="build.author.webUrl" class="issue-author-link">
{{ build.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -3,48 +3,47 @@ import Vue from 'vue'; ...@@ -3,48 +3,47 @@ import Vue from 'vue';
import iconBuildStatus from '../svg/icon_build_status.svg'; import iconBuildStatus from '../svg/icon_build_status.svg';
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.StageTestComponent = Vue.extend({ global.cycleAnalytics.StageTestComponent = Vue.extend({
props: { props: {
items: Array, items: Array,
stage: Object, stage: Object,
}, },
data() { data() {
return { iconBuildStatus, iconBranch }; return { iconBuildStatus, iconBranch };
}, },
template: ` template: `
<div> <div>
<div class="events-description"> <div class="events-description">
{{ stage.description }} {{ stage.description }}
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li v-for="build in items" class="stage-event-item item-build-component">
<div class="item-details">
<h5 class="item-title">
<span class="icon-build-status">${iconBuildStatus}</span>
<a :href="build.url" class="item-build-name">{{ build.name }}</a>
&middot;
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
<span class="icon-branch">${iconBranch}</span>
<a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
</h5>
<span>
<a :href="build.url" class="issue-date">
{{ build.date }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"></total-time>
</div>
</li>
</ul>
</div> </div>
`, <ul class="stage-event-list">
}); <li v-for="build in items" class="stage-event-item item-build-component">
})(window.gl || (window.gl = {})); <div class="item-details">
<h5 class="item-title">
<span class="icon-build-status">${iconBuildStatus}</span>
<a :href="build.url" class="item-build-name">{{ build.name }}</a>
&middot;
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<i class="fa fa-code-fork"></i>
<a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
<span class="icon-branch">${iconBranch}</span>
<a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
</h5>
<span>
<a :href="build.url" class="issue-date">
{{ build.date }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"></total-time>
</div>
</li>
</ul>
</div>
`,
});
...@@ -2,25 +2,24 @@ ...@@ -2,25 +2,24 @@
import Vue from 'vue'; import Vue from 'vue';
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
global.cycleAnalytics.TotalTimeComponent = Vue.extend({ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
props: { props: {
time: Object, time: Object,
}, },
template: ` template: `
<span class="total-time"> <span class="total-time">
<template v-if="Object.keys(time).length"> <template v-if="Object.keys(time).length">
<template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' }}</span></template> <template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' }}</span></template>
<template v-if="time.hours">{{ time.hours }} <span>hr</span></template> <template v-if="time.hours">{{ time.hours }} <span>hr</span></template>
<template v-if="time.mins && !time.days">{{ time.mins }} <span>mins</span></template> <template v-if="time.mins && !time.days">{{ time.mins }} <span>mins</span></template>
<template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template> <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
</template> </template>
<template v-else> <template v-else>
-- --
</template> </template>
</span> </span>
`, `,
}); });
})(window.gl || (window.gl = {}));
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
((global) => {
global.cycleAnalytics = global.cycleAnalytics || {};
class CycleAnalyticsService { const global = window.gl || (window.gl = {});
constructor(options) { global.cycleAnalytics = global.cycleAnalytics || {};
this.requestPath = options.requestPath;
}
fetchCycleAnalyticsData(options) { class CycleAnalyticsService {
options = options || { startDate: 30 }; constructor(options) {
this.requestPath = options.requestPath;
return $.ajax({ }
url: this.requestPath,
method: 'GET',
dataType: 'json',
contentType: 'application/json',
data: {
cycle_analytics: {
start_date: options.startDate,
},
},
});
}
fetchStageData(options) { fetchCycleAnalyticsData(options) {
const { options = options || { startDate: 30 };
stage,
startDate,
} = options;
return $.get(`${this.requestPath}/events/${stage.title.toLowerCase()}.json`, { return $.ajax({
url: this.requestPath,
method: 'GET',
dataType: 'json',
contentType: 'application/json',
data: {
cycle_analytics: { cycle_analytics: {
start_date: startDate, start_date: options.startDate,
}, },
}); },
} });
}
fetchStageData(options) {
const {
stage,
startDate,
} = options;
return $.get(`${this.requestPath}/events/${stage.title.toLowerCase()}.json`, {
cycle_analytics: {
start_date: startDate,
},
});
} }
}
global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService; global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService;
})(window.gl || (window.gl = {}));
...@@ -3,102 +3,101 @@ ...@@ -3,102 +3,101 @@
require('../lib/utils/text_utility'); require('../lib/utils/text_utility');
const DEFAULT_EVENT_OBJECTS = require('./default_event_objects'); const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
((global) => { const global = window.gl || (window.gl = {});
global.cycleAnalytics = global.cycleAnalytics || {}; global.cycleAnalytics = global.cycleAnalytics || {};
const EMPTY_STAGE_TEXTS = { const EMPTY_STAGE_TEXTS = {
issue: 'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.', issue: 'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
plan: 'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.', plan: 'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
code: 'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.', code: 'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
test: 'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.', test: 'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
review: 'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.', review: 'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
staging: 'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.', staging: 'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
production: 'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.', production: 'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.',
}; };
global.cycleAnalytics.CycleAnalyticsStore = { global.cycleAnalytics.CycleAnalyticsStore = {
state: { state: {
summary: '', summary: '',
stats: '', stats: '',
analytics: '', analytics: '',
events: [], events: [],
stages: [], stages: [],
}, },
setCycleAnalyticsData(data) { setCycleAnalyticsData(data) {
this.state = Object.assign(this.state, this.decorateData(data)); this.state = Object.assign(this.state, this.decorateData(data));
}, },
decorateData(data) { decorateData(data) {
const newData = {}; const newData = {};
newData.stages = data.stats || []; newData.stages = data.stats || [];
newData.summary = data.summary || []; newData.summary = data.summary || [];
newData.summary.forEach((item) => { newData.summary.forEach((item) => {
item.value = item.value || '-'; item.value = item.value || '-';
}); });
newData.stages.forEach((item) => { newData.stages.forEach((item) => {
const stageSlug = gl.text.dasherize(item.title.toLowerCase()); const stageSlug = gl.text.dasherize(item.title.toLowerCase());
item.active = false; item.active = false;
item.isUserAllowed = data.permissions[stageSlug]; item.isUserAllowed = data.permissions[stageSlug];
item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug]; item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
item.component = `stage-${stageSlug}-component`; item.component = `stage-${stageSlug}-component`;
item.slug = stageSlug; item.slug = stageSlug;
}); });
newData.analytics = data; newData.analytics = data;
return newData; return newData;
}, },
setLoadingState(state) { setLoadingState(state) {
this.state.isLoading = state; this.state.isLoading = state;
}, },
setErrorState(state) { setErrorState(state) {
this.state.hasError = state; this.state.hasError = state;
}, },
deactivateAllStages() { deactivateAllStages() {
this.state.stages.forEach((stage) => { this.state.stages.forEach((stage) => {
stage.active = false; stage.active = false;
}); });
}, },
setActiveStage(stage) { setActiveStage(stage) {
this.deactivateAllStages(); this.deactivateAllStages();
stage.active = true; stage.active = true;
}, },
setStageEvents(events, stage) { setStageEvents(events, stage) {
this.state.events = this.decorateEvents(events, stage); this.state.events = this.decorateEvents(events, stage);
}, },
decorateEvents(events, stage) { decorateEvents(events, stage) {
const newEvents = []; const newEvents = [];
events.forEach((item) => { events.forEach((item) => {
if (!item) return; if (!item) return;
const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item); const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
eventItem.totalTime = eventItem.total_time; eventItem.totalTime = eventItem.total_time;
if (eventItem.author) { if (eventItem.author) {
eventItem.author.webUrl = eventItem.author.web_url; eventItem.author.webUrl = eventItem.author.web_url;
eventItem.author.avatarUrl = eventItem.author.avatar_url; eventItem.author.avatarUrl = eventItem.author.avatar_url;
} }
if (eventItem.created_at) eventItem.createdAt = eventItem.created_at; if (eventItem.created_at) eventItem.createdAt = eventItem.created_at;
if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha; if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha;
if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url; if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url;
delete eventItem.author.web_url; delete eventItem.author.web_url;
delete eventItem.author.avatar_url; delete eventItem.author.avatar_url;
delete eventItem.total_time; delete eventItem.total_time;
delete eventItem.created_at; delete eventItem.created_at;
delete eventItem.short_sha; delete eventItem.short_sha;
delete eventItem.commit_url; delete eventItem.commit_url;
newEvents.push(eventItem); newEvents.push(eventItem);
}); });
return newEvents; return newEvents;
}, },
currentActiveStage() { currentActiveStage() {
return this.state.stages.find(stage => stage.active); return this.state.stages.find(stage => stage.active);
}, },
}; };
})(window.gl || (window.gl = {}));
...@@ -50,7 +50,7 @@ window.gl.GfmAutoComplete = { ...@@ -50,7 +50,7 @@ window.gl.GfmAutoComplete = {
template: '<li>${title}</li>' template: '<li>${title}</li>'
}, },
Loading: { Loading: {
template: '<li style="pointer-events: none;"><i class="fa fa-refresh fa-spin"></i> Loading...</li>' template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>'
}, },
DefaultOptions: { DefaultOptions: {
sorter: function(query, items, searchKey) { sorter: function(query, items, searchKey) {
......
...@@ -20,57 +20,60 @@ class Issue { ...@@ -20,57 +20,60 @@ class Issue {
}); });
Issue.initIssueBtnEventListeners(); Issue.initIssueBtnEventListeners();
} }
Issue.$btnNewBranch = $('#new-branch');
Issue.initMergeRequests(); Issue.initMergeRequests();
Issue.initRelatedBranches(); Issue.initRelatedBranches();
Issue.initCanCreateBranch(); Issue.initCanCreateBranch();
} }
static initIssueBtnEventListeners() { static initIssueBtnEventListeners() {
var issueFailMessage; const issueFailMessage = 'Unable to update this issue at this time.';
issueFailMessage = 'Unable to update this issue at this time.';
return $('a.btn-close, a.btn-reopen').on('click', function(e) { const closeButtons = $('a.btn-close');
var $this, isClose, shouldSubmit, url; const isClosedBadge = $('div.status-box-closed');
const isOpenBadge = $('div.status-box-open');
const projectIssuesCounter = $('.issue_counter');
const reopenButtons = $('a.btn-reopen');
return closeButtons.add(reopenButtons).on('click', function(e) {
var $this, shouldSubmit, url;
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
$this = $(this); $this = $(this);
isClose = $this.hasClass('btn-close');
shouldSubmit = $this.hasClass('btn-comment'); shouldSubmit = $this.hasClass('btn-comment');
if (shouldSubmit) { if (shouldSubmit) {
Issue.submitNoteForm($this.closest('form')); Issue.submitNoteForm($this.closest('form'));
} }
$this.prop('disabled', true); $this.prop('disabled', true);
Issue.setNewBranchButtonState(true, null);
url = $this.attr('href'); url = $this.attr('href');
return $.ajax({ return $.ajax({
type: 'PUT', type: 'PUT',
url: url, url: url
error: function(jqXHR, textStatus, errorThrown) { }).fail(function(jqXHR, textStatus, errorThrown) {
var issueStatus; new Flash(issueFailMessage);
issueStatus = isClose ? 'close' : 'open'; Issue.initCanCreateBranch();
return new Flash(issueFailMessage, 'alert'); }).done(function(data, textStatus, jqXHR) {
}, if ('id' in data) {
success: function(data, textStatus, jqXHR) { $(document).trigger('issuable:change');
if ('id' in data) {
$(document).trigger('issuable:change'); const isClosed = $this.hasClass('btn-close');
let total = Number($('.issue_counter').text().replace(/[^\d]/, '')); closeButtons.toggleClass('hidden', isClosed);
if (isClose) { reopenButtons.toggleClass('hidden', !isClosed);
$('a.btn-close').addClass('hidden'); isClosedBadge.toggleClass('hidden', !isClosed);
$('a.btn-reopen').removeClass('hidden'); isOpenBadge.toggleClass('hidden', isClosed);
$('div.status-box-closed').removeClass('hidden');
$('div.status-box-open').addClass('hidden'); let numProjectIssues = Number(projectIssuesCounter.text().replace(/[^\d]/, ''));
total -= 1; numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
} else { projectIssuesCounter.text(gl.text.addDelimiter(numProjectIssues));
$('a.btn-reopen').addClass('hidden'); } else {
$('a.btn-close').removeClass('hidden'); new Flash(issueFailMessage);
$('div.status-box-closed').addClass('hidden');
$('div.status-box-open').removeClass('hidden');
total += 1;
}
$('.issue_counter').text(gl.text.addDelimiter(total));
} else {
new Flash(issueFailMessage, 'alert');
}
return $this.prop('disabled', false);
} }
$this.prop('disabled', false);
Issue.initCanCreateBranch();
}); });
}); });
} }
...@@ -86,9 +89,9 @@ class Issue { ...@@ -86,9 +89,9 @@ class Issue {
static initMergeRequests() { static initMergeRequests() {
var $container; var $container;
$container = $('#merge-requests'); $container = $('#merge-requests');
return $.getJSON($container.data('url')).error(function() { return $.getJSON($container.data('url')).fail(function() {
return new Flash('Failed to load referenced merge requests', 'alert'); return new Flash('Failed to load referenced merge requests');
}).success(function(data) { }).done(function(data) {
if ('html' in data) { if ('html' in data) {
return $container.html(data.html); return $container.html(data.html);
} }
...@@ -98,9 +101,9 @@ class Issue { ...@@ -98,9 +101,9 @@ class Issue {
static initRelatedBranches() { static initRelatedBranches() {
var $container; var $container;
$container = $('#related-branches'); $container = $('#related-branches');
return $.getJSON($container.data('url')).error(function() { return $.getJSON($container.data('url')).fail(function() {
return new Flash('Failed to load related branches', 'alert'); return new Flash('Failed to load related branches');
}).success(function(data) { }).done(function(data) {
if ('html' in data) { if ('html' in data) {
return $container.html(data.html); return $container.html(data.html);
} }
...@@ -108,24 +111,27 @@ class Issue { ...@@ -108,24 +111,27 @@ class Issue {
} }
static initCanCreateBranch() { static initCanCreateBranch() {
var $container;
$container = $('#new-branch');
// If the user doesn't have the required permissions the container isn't // If the user doesn't have the required permissions the container isn't
// rendered at all. // rendered at all.
if ($container.length === 0) { if (Issue.$btnNewBranch.length === 0) {
return; return;
} }
return $.getJSON($container.data('path')).error(function() { return $.getJSON(Issue.$btnNewBranch.data('path')).fail(function() {
$container.find('.unavailable').show(); Issue.setNewBranchButtonState(false, false);
return new Flash('Failed to check if a new branch can be created.', 'alert'); new Flash('Failed to check if a new branch can be created.');
}).success(function(data) { }).done(function(data) {
if (data.can_create_branch) { Issue.setNewBranchButtonState(false, data.can_create_branch);
$container.find('.available').show();
} else {
return $container.find('.unavailable').show();
}
}); });
} }
static setNewBranchButtonState(isPending, canCreate) {
if (Issue.$btnNewBranch.length === 0) {
return;
}
Issue.$btnNewBranch.find('.available').toggle(!isPending && canCreate);
Issue.$btnNewBranch.find('.unavailable').toggle(!isPending && !canCreate);
}
} }
export default Issue; export default Issue;
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, one-var, one-var-declaration-per-line, no-void, guard-for-in, no-restricted-syntax, prefer-template, quotes, max-len */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, one-var, one-var-declaration-per-line, no-void, guard-for-in, no-restricted-syntax, prefer-template, quotes, max-len */
(function() { var base;
(function(w) { var w = window;
var base; if (w.gl == null) {
if (w.gl == null) { w.gl = {};
w.gl = {}; }
if ((base = w.gl).utils == null) {
base.utils = {};
}
// Returns an array containing the value(s) of the
// of the key passed as an argument
w.gl.utils.getParameterValues = function(sParam) {
var i, sPageURL, sParameterName, sURLVariables, values;
sPageURL = decodeURIComponent(window.location.search.substring(1));
sURLVariables = sPageURL.split('&');
sParameterName = void 0;
values = [];
i = 0;
while (i < sURLVariables.length) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
values.push(sParameterName[1].replace(/\+/g, ' '));
} }
if ((base = w.gl).utils == null) { i += 1;
base.utils = {}; }
return values;
};
// @param {Object} params - url keys and value to merge
// @param {String} url
w.gl.utils.mergeUrlParams = function(params, url) {
var lastChar, newUrl, paramName, paramValue, pattern;
newUrl = decodeURIComponent(url);
for (paramName in params) {
paramValue = params[paramName];
pattern = new RegExp("\\b(" + paramName + "=).*?(&|$)");
if (paramValue == null) {
newUrl = newUrl.replace(pattern, '');
} else if (url.search(pattern) !== -1) {
newUrl = newUrl.replace(pattern, "$1" + paramValue + "$2");
} else {
newUrl = "" + newUrl + (newUrl.indexOf('?') > 0 ? '&' : '?') + paramName + "=" + paramValue;
} }
// Returns an array containing the value(s) of the }
// of the key passed as an argument // Remove a trailing ampersand
w.gl.utils.getParameterValues = function(sParam) { lastChar = newUrl[newUrl.length - 1];
var i, sPageURL, sParameterName, sURLVariables, values; if (lastChar === '&') {
sPageURL = decodeURIComponent(window.location.search.substring(1)); newUrl = newUrl.slice(0, -1);
sURLVariables = sPageURL.split('&'); }
sParameterName = void 0; return newUrl;
values = []; };
i = 0; // removes parameter query string from url. returns the modified url
while (i < sURLVariables.length) { w.gl.utils.removeParamQueryString = function(url, param) {
sParameterName = sURLVariables[i].split('='); var urlVariables, variables;
if (sParameterName[0] === sParam) { url = decodeURIComponent(url);
values.push(sParameterName[1].replace(/\+/g, ' ')); urlVariables = url.split('&');
} return ((function() {
i += 1; var j, len, results;
results = [];
for (j = 0, len = urlVariables.length; j < len; j += 1) {
variables = urlVariables[j];
if (variables.indexOf(param) === -1) {
results.push(variables);
} }
return values; }
}; return results;
// @param {Object} params - url keys and value to merge })()).join('&');
// @param {String} url };
w.gl.utils.mergeUrlParams = function(params, url) { w.gl.utils.removeParams = (params) => {
var lastChar, newUrl, paramName, paramValue, pattern; const url = new URL(window.location.href);
newUrl = decodeURIComponent(url); params.forEach((param) => {
for (paramName in params) { url.search = w.gl.utils.removeParamQueryString(url.search, param);
paramValue = params[paramName]; });
pattern = new RegExp("\\b(" + paramName + "=).*?(&|$)"); return url.href;
if (paramValue == null) { };
newUrl = newUrl.replace(pattern, ''); w.gl.utils.getLocationHash = function(url) {
} else if (url.search(pattern) !== -1) { var hashIndex;
newUrl = newUrl.replace(pattern, "$1" + paramValue + "$2"); if (typeof url === 'undefined') {
} else { // Note: We can't use window.location.hash here because it's
newUrl = "" + newUrl + (newUrl.indexOf('?') > 0 ? '&' : '?') + paramName + "=" + paramValue; // not consistent across browsers - Firefox will pre-decode it
} url = window.location.href;
} }
// Remove a trailing ampersand hashIndex = url.indexOf('#');
lastChar = newUrl[newUrl.length - 1]; return hashIndex === -1 ? null : url.substring(hashIndex + 1);
if (lastChar === '&') { };
newUrl = newUrl.slice(0, -1);
}
return newUrl;
};
// removes parameter query string from url. returns the modified url
w.gl.utils.removeParamQueryString = function(url, param) {
var urlVariables, variables;
url = decodeURIComponent(url);
urlVariables = url.split('&');
return ((function() {
var j, len, results;
results = [];
for (j = 0, len = urlVariables.length; j < len; j += 1) {
variables = urlVariables[j];
if (variables.indexOf(param) === -1) {
results.push(variables);
}
}
return results;
})()).join('&');
};
w.gl.utils.removeParams = (params) => {
const url = new URL(window.location.href);
params.forEach((param) => {
url.search = w.gl.utils.removeParamQueryString(url.search, param);
});
return url.href;
};
w.gl.utils.getLocationHash = function(url) {
var hashIndex;
if (typeof url === 'undefined') {
// Note: We can't use window.location.hash here because it's
// not consistent across browsers - Firefox will pre-decode it
url = window.location.href;
}
hashIndex = url.indexOf('#');
return hashIndex === -1 ? null : url.substring(hashIndex + 1);
};
w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href); w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
w.gl.utils.visitUrl = (url) => { w.gl.utils.visitUrl = (url) => {
document.location.href = url; document.location.href = url;
}; };
})(window);
}).call(window);
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */ /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */
(function() { import '~/lib/utils/url_utility';
var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
(function() {
this.MergedButtons = (function() { this.MergedButtons = (function() {
function MergedButtons() { function MergedButtons() {
this.removeSourceBranch = bind(this.removeSourceBranch, this); this.removeSourceBranch = this.removeSourceBranch.bind(this);
this.removeBranchSuccess = this.removeBranchSuccess.bind(this);
this.removeBranchError = this.removeBranchError.bind(this);
this.$removeBranchWidget = $('.remove_source_branch_widget'); this.$removeBranchWidget = $('.remove_source_branch_widget');
this.$removeBranchProgress = $('.remove_source_branch_in_progress'); this.$removeBranchProgress = $('.remove_source_branch_in_progress');
this.$removeBranchFailed = $('.remove_source_branch_widget.failed'); this.$removeBranchFailed = $('.remove_source_branch_widget.failed');
...@@ -22,7 +24,7 @@ ...@@ -22,7 +24,7 @@
MergedButtons.prototype.initEventListeners = function() { MergedButtons.prototype.initEventListeners = function() {
$(document).on('click', '.remove_source_branch', this.removeSourceBranch); $(document).on('click', '.remove_source_branch', this.removeSourceBranch);
$(document).on('ajax:success', '.remove_source_branch', this.removeBranchSuccess); $(document).on('ajax:success', '.remove_source_branch', this.removeBranchSuccess);
return $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError); $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError);
}; };
MergedButtons.prototype.removeSourceBranch = function() { MergedButtons.prototype.removeSourceBranch = function() {
...@@ -31,7 +33,7 @@ ...@@ -31,7 +33,7 @@
}; };
MergedButtons.prototype.removeBranchSuccess = function() { MergedButtons.prototype.removeBranchSuccess = function() {
return location.reload(); gl.utils.refreshCurrentPage();
}; };
MergedButtons.prototype.removeBranchError = function() { MergedButtons.prototype.removeBranchError = function() {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
direction: rtl; direction: rtl;
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
overflow-x: scroll; overflow-x: auto;
} }
} }
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
.input-token:last-child { .input-token:last-child {
flex: 1; flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
max-width: initial; max-width: inherit;
} }
} }
...@@ -246,17 +246,17 @@ ...@@ -246,17 +246,17 @@
} }
} }
.filtered-search-history-dropdown-toggle-button { .filtered-search-history-dropdown-wrapper {
position: static;
display: flex; display: flex;
align-items: center; flex-direction: column;
}
.filtered-search-history-dropdown-toggle-button {
flex: 1;
width: auto; width: auto;
height: 100%; padding-right: 10px;
padding-top: 0;
padding-left: 0.75em;
padding-bottom: 0;
padding-right: 0.5em;
background-color: transparent;
border-radius: 0; border-radius: 0;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
...@@ -264,6 +264,7 @@ ...@@ -264,6 +264,7 @@
border-right: 1px solid $border-color; border-right: 1px solid $border-color;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
line-height: 1;
transition: color 0.1s linear; transition: color 0.1s linear;
...@@ -275,24 +276,21 @@ ...@@ -275,24 +276,21 @@
} }
.dropdown-toggle-text { .dropdown-toggle-text {
display: inline-block;
color: inherit; color: inherit;
.fa { .fa {
vertical-align: middle;
color: inherit; color: inherit;
} }
} }
.fa { .fa {
position: initial; position: static;
} }
} }
.filtered-search-history-dropdown-wrapper {
position: initial;
flex-shrink: 0;
}
.filtered-search-history-dropdown { .filtered-search-history-dropdown {
width: 40%; width: 40%;
......
...@@ -158,6 +158,7 @@ ...@@ -158,6 +158,7 @@
li.task-list-item { li.task-list-item {
list-style-type: none; list-style-type: none;
position: relative; position: relative;
min-height: 22px;
padding-left: 28px; padding-left: 28px;
margin-left: 0 !important; margin-left: 0 !important;
......
...@@ -26,6 +26,7 @@ $gray-dark: darken($gray-light, $darken-dark-factor); ...@@ -26,6 +26,7 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee; $gray-darker: #eee;
$gray-darkest: #c4c4c4; $gray-darkest: #c4c4c4;
$green-25: #f6fcf8;
$green-50: #e4f5eb; $green-50: #e4f5eb;
$green-100: #bae6cc; $green-100: #bae6cc;
$green-200: #8dd5aa; $green-200: #8dd5aa;
...@@ -37,6 +38,7 @@ $green-700: #12753a; ...@@ -37,6 +38,7 @@ $green-700: #12753a;
$green-800: #0e5a2d; $green-800: #0e5a2d;
$green-900: #0a4020; $green-900: #0a4020;
$blue-25: #f6fafd;
$blue-50: #e4eff9; $blue-50: #e4eff9;
$blue-100: #bcd7f1; $blue-100: #bcd7f1;
$blue-200: #8fbce8; $blue-200: #8fbce8;
...@@ -48,6 +50,7 @@ $blue-700: #17599c; ...@@ -48,6 +50,7 @@ $blue-700: #17599c;
$blue-800: #134a81; $blue-800: #134a81;
$blue-900: #0f3b66; $blue-900: #0f3b66;
$orange-25: #fffcf8;
$orange-50: #fff2e1; $orange-50: #fff2e1;
$orange-100: #fedfb3; $orange-100: #fedfb3;
$orange-200: #feca81; $orange-200: #feca81;
...@@ -59,6 +62,7 @@ $orange-700: #c26700; ...@@ -59,6 +62,7 @@ $orange-700: #c26700;
$orange-800: #a35100; $orange-800: #a35100;
$orange-900: #853b00; $orange-900: #853b00;
$red-25: #fef7f6;
$red-50: #fbe7e4; $red-50: #fbe7e4;
$red-100: #f4c4bc; $red-100: #f4c4bc;
$red-200: #ed9d90; $red-200: #ed9d90;
...@@ -147,7 +151,7 @@ $gl-sidebar-padding: 22px; ...@@ -147,7 +151,7 @@ $gl-sidebar-padding: 22px;
/* /*
* Misc * Misc
*/ */
$row-hover: lighten($blue-50, 2%); $row-hover: $blue-25;
$row-hover-border: $blue-100; $row-hover-border: $blue-100;
$progress-color: #c0392b; $progress-color: #c0392b;
$header-height: 50px; $header-height: 50px;
...@@ -223,18 +227,18 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; ...@@ -223,18 +227,18 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
/* /*
* Commit Diff Colors * Commit Diff Colors
*/ */
$added: $green-300; $added: #63c363;
$deleted: $red-300; $deleted: #f77;
$line-added: $green-50; $line-added: #ecfdf0;
$line-added-dark: $green-100; $line-added-dark: #c7f0d2;
$line-removed: $red-50; $line-removed: #fbe9eb;
$line-removed-dark: $red-100; $line-removed-dark: #fac5cd;
$line-number-old: lighten($red-100, 5%); $line-number-old: #f9d7dc;
$line-number-new: lighten($green-100, 5%); $line-number-new: #ddfbe6;
$line-number-select: lighten($orange-100, 5%); $line-number-select: #fbf2da;
$line-target-blue: $blue-50; $line-target-blue: #f6faff;
$line-select-yellow: $orange-50; $line-select-yellow: #fcf8e7;
$line-select-yellow-dark: $orange-100; $line-select-yellow-dark: #f0e2bd;
$dark-diff-match-bg: rgba(255, 255, 255, 0.3); $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
$dark-diff-match-color: rgba(255, 255, 255, 0.1); $dark-diff-match-color: rgba(255, 255, 255, 0.1);
$file-mode-changed: #777; $file-mode-changed: #777;
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
overflow-y: hidden; overflow-y: hidden;
font-size: 12px; font-size: 12px;
.fa-refresh { .fa-spinner {
font-size: 24px; font-size: 24px;
margin-left: 20px; margin-left: 20px;
} }
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
font-size: 12px; font-size: 12px;
position: relative; position: relative;
.fa-refresh { .fa-spinner {
font-size: 24px; font-size: 24px;
} }
...@@ -366,7 +366,7 @@ ...@@ -366,7 +366,7 @@
background-color: $row-hover; background-color: $row-hover;
} }
.fa-refresh { .fa-spinner {
font-size: 13px; font-size: 13px;
margin-left: 3px; margin-left: 3px;
} }
......
...@@ -10,10 +10,14 @@ ...@@ -10,10 +10,14 @@
position: relative; position: relative;
&.event-inline { &.event-inline {
.profile-icon { .system-note-image {
top: 20px; top: 20px;
} }
.user-avatar {
top: 14px;
}
.event-title, .event-title,
.event-item-timestamp { .event-item-timestamp {
line-height: 40px; line-height: 40px;
...@@ -24,7 +28,7 @@ ...@@ -24,7 +28,7 @@
color: $gl-text-color; color: $gl-text-color;
} }
.profile-icon { .system-note-image {
position: absolute; position: absolute;
left: 0; left: 0;
top: 14px; top: 14px;
...@@ -35,15 +39,18 @@ ...@@ -35,15 +39,18 @@
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
} }
&.open-icon svg { &.opened-icon,
fill: $green-300; &.created-icon {
svg {
fill: $green-300;
}
} }
&.closed-icon svg { &.closed-icon svg {
fill: $red-300; fill: $red-300;
} }
&.fork-icon svg { &.accepted-icon svg {
fill: $blue-300; fill: $blue-300;
} }
} }
...@@ -128,8 +135,7 @@ ...@@ -128,8 +135,7 @@
li { li {
&.commit { &.commit {
background: transparent; background: transparent;
padding: 3px; padding: 0;
padding-left: 0;
border: none; border: none;
.commit-row-title { .commit-row-title {
...@@ -183,7 +189,7 @@ ...@@ -183,7 +189,7 @@
max-width: 100%; max-width: 100%;
} }
.profile-icon { .system-note-image {
display: none; display: none;
} }
......
...@@ -18,12 +18,12 @@ ul.notes { ...@@ -18,12 +18,12 @@ ul.notes {
float: left; float: left;
svg { svg {
width: 18px; width: 16px;
height: 18px; height: 16px;
fill: $gray-darkest; fill: $gray-darkest;
position: absolute; position: absolute;
left: 30px; left: 0;
top: 15px; top: 16px;
} }
} }
...@@ -144,6 +144,10 @@ ul.notes { ...@@ -144,6 +144,10 @@ ul.notes {
padding: 0; padding: 0;
clear: both; clear: both;
@media (min-width: $screen-sm-min) {
margin-left: 65px;
}
&.timeline-entry::after { &.timeline-entry::after {
clear: none; clear: none;
} }
...@@ -172,6 +176,10 @@ ul.notes { ...@@ -172,6 +176,10 @@ ul.notes {
.timeline-content { .timeline-content {
padding: 14px 10px; padding: 14px 10px;
@media (min-width: $screen-sm-min) {
margin-left: 20px;
}
} }
.note-header { .note-header {
...@@ -619,7 +627,6 @@ ul.notes { ...@@ -619,7 +627,6 @@ ul.notes {
} }
&:not(.is-disabled):hover, &:not(.is-disabled):hover,
&:not(.is-disabled):focus,
&.is-active { &.is-active {
color: $gl-text-green; color: $gl-text-green;
...@@ -633,6 +640,11 @@ ul.notes { ...@@ -633,6 +640,11 @@ ul.notes {
height: 15px; height: 15px;
width: 15px; width: 15px;
} }
.loading {
margin: 0;
height: auto;
}
} }
.discussion-next-btn { .discussion-next-btn {
......
...@@ -10,7 +10,7 @@ class Projects::HooksController < Projects::ApplicationController ...@@ -10,7 +10,7 @@ class Projects::HooksController < Projects::ApplicationController
@hook = @project.hooks.new(hook_params) @hook = @project.hooks.new(hook_params)
@hook.save @hook.save
unless @hook.valid? unless @hook.valid?
@hooks = @project.hooks.select(&:persisted?) @hooks = @project.hooks.select(&:persisted?)
flash[:alert] = @hook.errors.full_messages.join.html_safe flash[:alert] = @hook.errors.full_messages.join.html_safe
end end
...@@ -49,7 +49,7 @@ class Projects::HooksController < Projects::ApplicationController ...@@ -49,7 +49,7 @@ class Projects::HooksController < Projects::ApplicationController
def hook_params def hook_params
params.require(:hook).permit( params.require(:hook).permit(
:build_events, :job_events,
:pipeline_events, :pipeline_events,
:enable_ssl_verification, :enable_ssl_verification,
:issues_events, :issues_events,
......
...@@ -38,7 +38,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController ...@@ -38,7 +38,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
@collection_type = "MergeRequest" @collection_type = "MergeRequest"
@merge_requests = merge_requests_collection @merge_requests = merge_requests_collection
@merge_requests = @merge_requests.page(params[:page]) @merge_requests = @merge_requests.page(params[:page])
@merge_requests = @merge_requests.includes(merge_request_diff: :merge_request) @merge_requests = @merge_requests.preload(merge_request_diff: :merge_request)
@issuable_meta_data = issuable_meta_data(@merge_requests, @collection_type) @issuable_meta_data = issuable_meta_data(@merge_requests, @collection_type)
if @merge_requests.out_of_range? && @merge_requests.total_pages != 0 if @merge_requests.out_of_range? && @merge_requests.total_pages != 0
......
...@@ -60,7 +60,7 @@ class RegistrationsController < Devise::RegistrationsController ...@@ -60,7 +60,7 @@ class RegistrationsController < Devise::RegistrationsController
end end
def resource def resource
@resource ||= Users::CreateService.new(current_user, sign_up_params).build @resource ||= Users::BuildService.new(current_user, sign_up_params).execute
end end
def devise_mapping def devise_mapping
......
module EventsHelper module EventsHelper
ICON_NAMES_BY_EVENT_TYPE = {
'pushed to' => 'icon_commit',
'pushed new' => 'icon_commit',
'created' => 'icon_status_open',
'opened' => 'icon_status_open',
'closed' => 'icon_status_closed',
'accepted' => 'icon_code_fork',
'commented on' => 'icon_comment_o',
'deleted' => 'icon_trash_o'
}.freeze
def link_to_author(event) def link_to_author(event)
author = event.author author = event.author
...@@ -183,4 +194,21 @@ module EventsHelper ...@@ -183,4 +194,21 @@ module EventsHelper
"event-inline" "event-inline"
end end
end end
def icon_for_event(note)
icon_name = ICON_NAMES_BY_EVENT_TYPE[note]
custom_icon(icon_name) if icon_name
end
def icon_for_profile_event(event)
if current_path?('users#show')
content_tag :div, class: "system-note-image #{event.action_name.parameterize}-icon" do
icon_for_event(event.action_name)
end
else
content_tag :div, class: 'system-note-image user-avatar' do
author_avatar(event, size: 32)
end
end
end
end end
...@@ -3,7 +3,8 @@ module JavascriptHelper ...@@ -3,7 +3,8 @@ module JavascriptHelper
javascript_include_tag asset_path(js) javascript_include_tag asset_path(js)
end end
def page_specific_javascript_bundle_tag(js) # deprecated; use webpack_bundle_tag directly instead
javascript_include_tag(*webpack_asset_paths(js)) def page_specific_javascript_bundle_tag(bundle)
webpack_bundle_tag(bundle)
end end
end end
require 'webpack/rails/manifest'
module WebpackHelper
def webpack_bundle_tag(bundle)
javascript_include_tag(*gitlab_webpack_asset_paths(bundle))
end
# override webpack-rails gem helper until changes can make it upstream
def gitlab_webpack_asset_paths(source, extension: nil)
return "" unless source.present?
paths = Webpack::Rails::Manifest.asset_paths(source)
if extension
paths = paths.select { |p| p.ends_with? ".#{extension}" }
end
# include full webpack-dev-server url for rspec tests running locally
if Rails.env.test? && Rails.configuration.webpack.dev_server.enabled
host = Rails.configuration.webpack.dev_server.host
port = Rails.configuration.webpack.dev_server.port
protocol = Rails.configuration.webpack.dev_server.https ? 'https' : 'http'
paths.map! do |p|
"#{protocol}://#{host}:#{port}#{p}"
end
end
paths
end
end
...@@ -326,14 +326,13 @@ class Commit ...@@ -326,14 +326,13 @@ class Commit
end end
def raw_diffs(*args) def raw_diffs(*args)
use_gitaly = Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs) # NOTE: This feature is intentionally disabled until
deltas_only = args.last.is_a?(Hash) && args.last[:deltas_only] # https://gitlab.com/gitlab-org/gitaly/issues/178 is resolved
# if Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
if use_gitaly && !deltas_only # Gitlab::GitalyClient::Commit.diff_from_parent(self, *args)
Gitlab::GitalyClient::Commit.diff_from_parent(self, *args) # else
else raw.diffs(*args)
raw.diffs(*args) # end
end
end end
def diffs(diff_options = nil) def diffs(diff_options = nil)
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
module DiscussionOnDiff module DiscussionOnDiff
extend ActiveSupport::Concern extend ActiveSupport::Concern
included do NUMBER_OF_TRUNCATED_DIFF_LINES = 16
NUMBER_OF_TRUNCATED_DIFF_LINES = 16
included do
delegate :line_code, delegate :line_code,
:original_line_code, :original_line_code,
:diff_file, :diff_file,
......
...@@ -20,7 +20,8 @@ class ContainerRepository < ActiveRecord::Base ...@@ -20,7 +20,8 @@ class ContainerRepository < ActiveRecord::Base
end end
def path def path
@path ||= [project.full_path, name].select(&:present?).join('/') @path ||= [project.full_path, name]
.select(&:present?).join('/').downcase
end end
def location def location
......
...@@ -21,6 +21,8 @@ class Label < ActiveRecord::Base ...@@ -21,6 +21,8 @@ class Label < ActiveRecord::Base
has_many :issues, through: :label_links, source: :target, source_type: 'Issue' has_many :issues, through: :label_links, source: :target, source_type: 'Issue'
has_many :merge_requests, through: :label_links, source: :target, source_type: 'MergeRequest' has_many :merge_requests, through: :label_links, source: :target, source_type: 'MergeRequest'
before_validation :strip_whitespace_from_title_and_color
validates :color, color: true, allow_blank: false validates :color, color: true, allow_blank: false
# Don't allow ',' for label titles # Don't allow ',' for label titles
...@@ -193,4 +195,8 @@ class Label < ActiveRecord::Base ...@@ -193,4 +195,8 @@ class Label < ActiveRecord::Base
def sanitize_title(value) def sanitize_title(value)
CGI.unescapeHTML(Sanitize.clean(value.to_s)) CGI.unescapeHTML(Sanitize.clean(value.to_s))
end end
def strip_whitespace_from_title_and_color
%w(color title).each { |attr| self[attr] = self[attr]&.strip }
end
end end
...@@ -96,6 +96,7 @@ class Note < ActiveRecord::Base ...@@ -96,6 +96,7 @@ class Note < ActiveRecord::Base
before_validation :set_discussion_id, on: :create before_validation :set_discussion_id, on: :create
after_save :keep_around_commit, unless: :for_personal_snippet? after_save :keep_around_commit, unless: :for_personal_snippet?
after_save :expire_etag_cache after_save :expire_etag_cache
after_destroy :expire_etag_cache
class << self class << self
def model_name def model_name
......
...@@ -963,13 +963,15 @@ class Repository ...@@ -963,13 +963,15 @@ class Repository
end end
def is_ancestor?(ancestor_id, descendant_id) def is_ancestor?(ancestor_id, descendant_id)
Gitlab::GitalyClient.migrate(:is_ancestor) do |is_enabled| # NOTE: This feature is intentionally disabled until
if is_enabled # https://gitlab.com/gitlab-org/gitlab-ce/issues/30586 is resolved
raw_repository.is_ancestor?(ancestor_id, descendant_id) # Gitlab::GitalyClient.migrate(:is_ancestor) do |is_enabled|
else # if is_enabled
merge_base_commit(ancestor_id, descendant_id) == ancestor_id # raw_repository.is_ancestor?(ancestor_id, descendant_id)
end # else
end merge_base_commit(ancestor_id, descendant_id) == ancestor_id
# end
# end
end end
def empty_repo? def empty_repo?
......
...@@ -28,6 +28,7 @@ class GroupPolicy < BasePolicy ...@@ -28,6 +28,7 @@ class GroupPolicy < BasePolicy
can! :admin_namespace can! :admin_namespace
can! :admin_group_member can! :admin_group_member
can! :change_visibility_level can! :change_visibility_level
can! :create_subgroup if @user.can_create_group
end end
if globally_viewable && @subject.request_access_enabled && !member if globally_viewable && @subject.request_access_enabled && !member
......
...@@ -58,6 +58,9 @@ module Projects ...@@ -58,6 +58,9 @@ module Projects
fail(error: @project.errors.full_messages.join(', ')) fail(error: @project.errors.full_messages.join(', '))
end end
@project @project
rescue ActiveRecord::RecordInvalid => e
message = "Unable to save #{e.record.type}: #{e.record.errors.full_messages.join(", ")} "
fail(error: message)
rescue => e rescue => e
fail(error: e.message) fail(error: e.message)
end end
......
module Users
# Service for building a new user.
class BuildService < BaseService
def initialize(current_user, params = {})
@current_user = current_user
@params = params.dup
end
def execute
raise Gitlab::Access::AccessDeniedError unless can_create_user?
user = User.new(build_user_params)
if current_user&.admin?
if params[:reset_password]
user.generate_reset_token
params[:force_random_password] = true
end
if params[:force_random_password]
random_password = Devise.friendly_token.first(Devise.password_length.min)
user.password = user.password_confirmation = random_password
end
end
identity_attrs = params.slice(:extern_uid, :provider)
if identity_attrs.any?
user.identities.build(identity_attrs)
end
user
end
private
def can_create_user?
(current_user.nil? && current_application_settings.signup_enabled?) || current_user&.admin?
end
# Allowed params for creating a user (admins only)
def admin_create_params
[
:access_level,
:admin,
:avatar,
:bio,
:can_create_group,
:color_scheme_id,
:email,
:external,
:force_random_password,
:hide_no_password,
:hide_no_ssh_key,
:key_id,
:linkedin,
:name,
:password,
:password_automatically_set,
:password_expires_at,
:projects_limit,
:remember_me,
:skip_confirmation,
:skype,
:theme_id,
:twitter,
:username,
:website_url
]
end
# Allowed params for user signup
def signup_params
[
:email,
:email_confirmation,
:password_automatically_set,
:name,
:password,
:username
]
end
def build_user_params
if current_user&.admin?
user_params = params.slice(*admin_create_params)
user_params[:created_by_id] = current_user&.id
if params[:reset_password]
user_params.merge!(force_random_password: true, password_expires_at: nil)
end
else
user_params = params.slice(*signup_params)
user_params[:skip_confirmation] = !current_application_settings.send_user_confirmation_email
end
user_params
end
end
end
...@@ -6,34 +6,10 @@ module Users ...@@ -6,34 +6,10 @@ module Users
@params = params.dup @params = params.dup
end end
def build
raise Gitlab::Access::AccessDeniedError unless can_create_user?
user = User.new(build_user_params)
if current_user&.admin?
if params[:reset_password]
@reset_token = user.generate_reset_token
params[:force_random_password] = true
end
if params[:force_random_password]
random_password = Devise.friendly_token.first(Devise.password_length.min)
user.password = user.password_confirmation = random_password
end
end
identity_attrs = params.slice(:extern_uid, :provider)
if identity_attrs.any?
user.identities.build(identity_attrs)
end
user
end
def execute def execute
user = build user = Users::BuildService.new(current_user, params).execute
@reset_token = user.generate_reset_token if user.recently_sent_password_reset?
if user.save if user.save
log_info("User \"#{user.name}\" (#{user.email}) was created") log_info("User \"#{user.name}\" (#{user.email}) was created")
...@@ -43,70 +19,5 @@ module Users ...@@ -43,70 +19,5 @@ module Users
user user
end end
private
def can_create_user?
(current_user.nil? && current_application_settings.signup_enabled?) || current_user&.admin?
end
# Allowed params for creating a user (admins only)
def admin_create_params
[
:access_level,
:admin,
:avatar,
:bio,
:can_create_group,
:color_scheme_id,
:email,
:external,
:force_random_password,
:password_automatically_set,
:hide_no_password,
:hide_no_ssh_key,
:key_id,
:linkedin,
:name,
:password,
:password_expires_at,
:projects_limit,
:remember_me,
:skip_confirmation,
:skype,
:theme_id,
:twitter,
:username,
:website_url
]
end
# Allowed params for user signup
def signup_params
[
:email,
:email_confirmation,
:password_automatically_set,
:name,
:password,
:username
]
end
def build_user_params
if current_user&.admin?
user_params = params.slice(*admin_create_params)
user_params[:created_by_id] = current_user&.id
if params[:reset_password]
user_params.merge!(force_random_password: true, password_expires_at: nil)
end
else
user_params = params.slice(*signup_params)
user_params[:skip_confirmation] = !current_application_settings.send_user_confirmation_email
end
user_params
end
end end
end end
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
= button_to reset_health_check_token_admin_application_settings_path, = button_to reset_health_check_token_admin_application_settings_path,
method: :put, class: 'btn btn-default', method: :put, class: 'btn btn-default',
data: { confirm: 'Are you sure you want to reset the health check token?' } do data: { confirm: 'Are you sure you want to reset the health check token?' } do
= icon('refresh') = icon('spinner')
Reset health check access token Reset health check access token
%p.light %p.light
Health information can be retrieved as plain text, JSON, or XML using: Health information can be retrieved as plain text, JSON, or XML using:
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
= button_to reset_runners_token_admin_application_settings_path, = button_to reset_runners_token_admin_application_settings_path,
method: :put, class: 'btn btn-default', method: :put, class: 'btn btn-default',
data: { confirm: 'Are you sure you want to reset registration token?' } do data: { confirm: 'Are you sure you want to reset registration token?' } do
= icon('refresh') = icon('spinner')
Reset runners registration token Reset runners registration token
.bs-callout .bs-callout
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
- @services.sort_by(&:title).each do |service| - @services.sort_by(&:title).each do |service|
%tr %tr
%td %td
= icon("copy", class: 'clgray') = boolean_to_icon service.activated?
%td %td
= link_to edit_admin_application_settings_service_path(service.id) do = link_to edit_admin_application_settings_service_path(service.id) do
%strong= service.title %strong= service.title
......
This diff is collapsed.
.profile-icon.open-icon = icon_for_profile_event(event)
= custom_icon("icon_status_open")
.event-title .event-title
%span.author_name= link_to_author event %span.author_name= link_to_author event
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment