debian-mirror-gitlab/app/assets/javascripts/sidebar/mount_sidebar.js

454 lines
12 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import Vue from 'vue';
2020-05-24 23:13:21 +05:30
import VueApollo from 'vue-apollo';
2021-03-11 19:13:27 +05:30
import createFlash from '~/flash';
2021-04-17 20:07:23 +05:30
import { IssuableType } from '~/issue_show/constants';
2021-03-11 19:13:27 +05:30
import {
isInIssuePage,
isInDesignPage,
isInIncidentPage,
parseBoolean,
} from '~/lib/utils/common_utils';
import { __ } from '~/locale';
2021-04-29 21:17:54 +05:30
import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue';
import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
2021-04-17 20:07:23 +05:30
import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
2021-06-08 01:23:25 +05:30
import SidebarDueDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
2021-04-17 20:07:23 +05:30
import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
import { apolloProvider } from '~/sidebar/graphql';
2021-03-11 19:13:27 +05:30
import Translate from '../vue_shared/translate';
2018-03-27 19:54:05 +05:30
import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
2021-03-11 19:13:27 +05:30
import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue';
import SidebarLabels from './components/labels/sidebar_labels.vue';
2020-10-24 23:57:45 +05:30
import IssuableLockForm from './components/lock/issuable_lock_form.vue';
2018-03-17 18:26:18 +05:30
import sidebarParticipants from './components/participants/sidebar_participants.vue';
2021-03-11 19:13:27 +05:30
import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue';
2020-11-24 15:15:51 +05:30
import SidebarSeverity from './components/severity/sidebar_severity.vue';
2021-06-08 01:23:25 +05:30
import SidebarSubscriptionsWidget from './components/subscriptions/sidebar_subscriptions_widget.vue';
2021-03-11 19:13:27 +05:30
import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
import SidebarMoveIssue from './lib/sidebar_move_issue';
2018-03-17 18:26:18 +05:30
Vue.use(Translate);
2020-05-24 23:13:21 +05:30
Vue.use(VueApollo);
2021-01-03 14:25:43 +05:30
function getSidebarOptions(sidebarOptEl = document.querySelector('.js-sidebar-options')) {
return JSON.parse(sidebarOptEl.innerHTML);
2020-05-24 23:13:21 +05:30
}
2018-03-17 18:26:18 +05:30
2021-03-11 19:13:27 +05:30
function getSidebarAssigneeAvailabilityData() {
const sidebarAssigneeEl = document.querySelectorAll('.js-sidebar-assignee-data input');
return Array.from(sidebarAssigneeEl)
.map((el) => el.dataset)
.reduce(
(acc, { username, availability = '' }) => ({
...acc,
[username]: availability,
}),
{},
);
}
2021-04-29 21:17:54 +05:30
function mountAssigneesComponentDeprecated(mediator) {
2018-03-17 18:26:18 +05:30
const el = document.getElementById('js-vue-sidebar-assignees');
if (!el) return;
2021-06-08 01:23:25 +05:30
const { id, iid, fullPath } = getSidebarOptions();
2021-03-11 19:13:27 +05:30
const assigneeAvailabilityStatus = getSidebarAssigneeAvailabilityData();
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line no-new
new Vue({
el,
2020-05-24 23:13:21 +05:30
apolloProvider,
2018-03-17 18:26:18 +05:30
components: {
SidebarAssignees,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2018-12-13 13:39:08 +05:30
createElement('sidebar-assignees', {
2021-01-03 14:25:43 +05:30
props: {
mediator,
issuableIid: String(iid),
projectPath: fullPath,
field: el.dataset.field,
signedIn: el.hasAttribute('data-signed-in'),
2021-03-11 19:13:27 +05:30
issuableType:
2021-04-17 20:07:23 +05:30
isInIssuePage() || isInIncidentPage() || isInDesignPage()
? IssuableType.Issue
: IssuableType.MergeRequest,
2021-06-08 01:23:25 +05:30
issuableId: id,
2021-03-11 19:13:27 +05:30
assigneeAvailabilityStatus,
2021-01-03 14:25:43 +05:30
},
}),
});
}
2021-04-29 21:17:54 +05:30
function mountAssigneesComponent() {
const el = document.getElementById('js-vue-sidebar-assignees');
if (!el) return;
2021-06-08 01:23:25 +05:30
const { id, iid, fullPath, editable } = getSidebarOptions();
2021-04-29 21:17:54 +05:30
// eslint-disable-next-line no-new
new Vue({
el,
apolloProvider,
components: {
SidebarAssigneesWidget,
},
provide: {
canUpdate: editable,
directlyInviteMembers: el.hasAttribute('data-directly-invite-members'),
},
render: (createElement) =>
createElement('sidebar-assignees-widget', {
props: {
iid: String(iid),
fullPath,
issuableType:
isInIssuePage() || isInIncidentPage() || isInDesignPage()
? IssuableType.Issue
: IssuableType.MergeRequest,
2021-06-08 01:23:25 +05:30
issuableId: id,
allowMultipleAssignees: !el.dataset.maxAssignees,
2021-04-29 21:17:54 +05:30
},
scopedSlots: {
collapsed: ({ users, onClick }) =>
createElement(CollapsedAssigneeList, {
props: {
users,
},
nativeOn: {
click: onClick,
},
}),
},
}),
});
}
2021-01-03 14:25:43 +05:30
function mountReviewersComponent(mediator) {
const el = document.getElementById('js-vue-sidebar-reviewers');
if (!el) return;
const { iid, fullPath } = getSidebarOptions();
// eslint-disable-next-line no-new
new Vue({
el,
apolloProvider,
components: {
SidebarReviewers,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2021-01-03 14:25:43 +05:30
createElement('sidebar-reviewers', {
2018-12-13 13:39:08 +05:30
props: {
mediator,
2020-05-24 23:13:21 +05:30
issuableIid: String(iid),
projectPath: fullPath,
2018-12-13 13:39:08 +05:30
field: el.dataset.field,
2021-03-11 19:13:27 +05:30
issuableType: isInIssuePage() || isInDesignPage() ? 'issue' : 'merge_request',
2018-12-13 13:39:08 +05:30
},
}),
2018-03-17 18:26:18 +05:30
});
}
2020-11-24 15:15:51 +05:30
export function mountSidebarLabels() {
const el = document.querySelector('.js-sidebar-labels');
if (!el) {
return false;
}
return new Vue({
el,
2021-01-29 00:20:46 +05:30
apolloProvider,
2020-11-24 15:15:51 +05:30
provide: {
...el.dataset,
allowLabelCreate: parseBoolean(el.dataset.allowLabelCreate),
allowLabelEdit: parseBoolean(el.dataset.canEdit),
allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
},
2021-03-08 18:12:59 +05:30
render: (createElement) => createElement(SidebarLabels),
2020-11-24 15:15:51 +05:30
});
}
2021-04-17 20:07:23 +05:30
function mountConfidentialComponent() {
2018-03-17 18:26:18 +05:30
const el = document.getElementById('js-confidential-entry-point');
2021-04-17 20:07:23 +05:30
if (!el) {
return;
}
2018-03-17 18:26:18 +05:30
2020-07-28 23:09:34 +05:30
const { fullPath, iid } = getSidebarOptions();
2018-03-17 18:26:18 +05:30
const dataNode = document.getElementById('js-confidential-issue-data');
const initialData = JSON.parse(dataNode.innerHTML);
2021-04-17 20:07:23 +05:30
// eslint-disable-next-line no-new
new Vue({
el,
apolloProvider,
components: {
SidebarConfidentialityWidget,
},
provide: {
canUpdate: initialData.is_editable,
},
render: (createElement) =>
createElement('sidebar-confidentiality-widget', {
props: {
2021-04-29 21:17:54 +05:30
iid: String(iid),
fullPath,
2021-04-17 20:07:23 +05:30
issuableType:
isInIssuePage() || isInIncidentPage() || isInDesignPage()
? IssuableType.Issue
: IssuableType.MergeRequest,
},
}),
});
}
2021-04-29 21:17:54 +05:30
function mountDueDateComponent() {
const el = document.getElementById('js-due-date-entry-point');
if (!el) {
return;
}
const { fullPath, iid, editable } = getSidebarOptions();
// eslint-disable-next-line no-new
new Vue({
el,
apolloProvider,
components: {
SidebarDueDateWidget,
},
provide: {
canUpdate: editable,
},
render: (createElement) =>
createElement('sidebar-due-date-widget', {
props: {
2021-06-08 01:23:25 +05:30
iid: String(iid),
fullPath,
2021-04-29 21:17:54 +05:30
issuableType: IssuableType.Issue,
},
}),
});
}
2021-04-17 20:07:23 +05:30
function mountReferenceComponent() {
const el = document.getElementById('js-reference-entry-point');
if (!el) {
return;
}
const { fullPath, iid } = getSidebarOptions();
// eslint-disable-next-line no-new
new Vue({
el,
apolloProvider,
components: {
SidebarReferenceWidget,
},
provide: {
iid: String(iid),
fullPath,
},
render: (createElement) =>
createElement('sidebar-reference-widget', {
props: {
issuableType:
isInIssuePage() || isInIncidentPage() || isInDesignPage()
? IssuableType.Issue
: IssuableType.MergeRequest,
},
}),
});
2018-03-17 18:26:18 +05:30
}
2020-10-24 23:57:45 +05:30
function mountLockComponent() {
2018-03-17 18:26:18 +05:30
const el = document.getElementById('js-lock-entry-point');
2021-01-03 14:25:43 +05:30
if (!el) {
return;
}
2020-10-24 23:57:45 +05:30
const { fullPath } = getSidebarOptions();
2018-03-17 18:26:18 +05:30
const dataNode = document.getElementById('js-lock-issue-data');
const initialData = JSON.parse(dataNode.innerHTML);
2021-01-03 14:25:43 +05:30
let importStore;
if (isInIssuePage() || isInIncidentPage()) {
importStore = import(/* webpackChunkName: 'notesStore' */ '~/notes/stores').then(
({ store }) => store,
);
} else {
importStore = import(/* webpackChunkName: 'mrNotesStore' */ '~/mr_notes/stores').then(
2021-03-08 18:12:59 +05:30
(store) => store.default,
2021-01-03 14:25:43 +05:30
);
}
importStore
.then(
2021-03-08 18:12:59 +05:30
(store) =>
2021-01-03 14:25:43 +05:30
new Vue({
el,
store,
provide: {
fullPath,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2021-01-03 14:25:43 +05:30
createElement(IssuableLockForm, {
props: {
isEditable: initialData.is_editable,
},
}),
}),
)
.catch(() => {
createFlash({ message: __('Failed to load sidebar lock status') });
});
2018-03-17 18:26:18 +05:30
}
function mountParticipantsComponent(mediator) {
const el = document.querySelector('.js-sidebar-participants-entry-point');
if (!el) return;
// eslint-disable-next-line no-new
new Vue({
el,
components: {
sidebarParticipants,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2018-12-13 13:39:08 +05:30
createElement('sidebar-participants', {
props: {
mediator,
},
}),
2018-03-17 18:26:18 +05:30
});
}
2021-06-08 01:23:25 +05:30
function mountSubscriptionsComponent() {
2018-03-17 18:26:18 +05:30
const el = document.querySelector('.js-sidebar-subscriptions-entry-point');
if (!el) return;
2021-06-08 01:23:25 +05:30
const { fullPath, iid, editable } = getSidebarOptions();
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line no-new
new Vue({
el,
2021-06-08 01:23:25 +05:30
apolloProvider,
2018-03-17 18:26:18 +05:30
components: {
2021-06-08 01:23:25 +05:30
SidebarSubscriptionsWidget,
},
provide: {
canUpdate: editable,
2018-03-17 18:26:18 +05:30
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2021-06-08 01:23:25 +05:30
createElement('sidebar-subscriptions-widget', {
2018-12-13 13:39:08 +05:30
props: {
2021-06-08 01:23:25 +05:30
iid: String(iid),
fullPath,
issuableType:
isInIssuePage() || isInIncidentPage() || isInDesignPage()
? IssuableType.Issue
: IssuableType.MergeRequest,
2018-12-13 13:39:08 +05:30
},
}),
2018-03-17 18:26:18 +05:30
});
}
function mountTimeTrackingComponent() {
const el = document.getElementById('issuable-time-tracker');
2021-06-08 01:23:25 +05:30
const { id, issuableType } = getSidebarOptions();
2018-03-17 18:26:18 +05:30
if (!el) return;
// eslint-disable-next-line no-new
new Vue({
el,
2021-06-08 01:23:25 +05:30
apolloProvider,
provide: { issuableId: id, issuableType },
render: (createElement) => createElement(SidebarTimeTracking, {}),
2018-03-17 18:26:18 +05:30
});
}
2020-11-24 15:15:51 +05:30
function mountSeverityComponent() {
const severityContainerEl = document.querySelector('#js-severity');
if (!severityContainerEl) {
return false;
}
const { fullPath, iid, severity } = getSidebarOptions();
return new Vue({
el: severityContainerEl,
apolloProvider,
components: {
SidebarSeverity,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2020-11-24 15:15:51 +05:30
createElement('sidebar-severity', {
props: {
projectPath: fullPath,
iid: String(iid),
initialSeverity: severity.toUpperCase(),
},
}),
});
}
2021-03-08 18:12:59 +05:30
function mountCopyEmailComponent() {
const el = document.getElementById('issuable-copy-email');
if (!el) return;
const { createNoteEmail } = getSidebarOptions();
// eslint-disable-next-line no-new
new Vue({
el,
render: (createElement) =>
2021-04-29 21:17:54 +05:30
createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }),
2021-03-08 18:12:59 +05:30
});
}
2021-04-29 21:17:54 +05:30
const isAssigneesWidgetShown =
(isInIssuePage() || isInDesignPage()) && gon.features.issueAssigneesWidget;
2018-03-17 18:26:18 +05:30
export function mountSidebar(mediator) {
2021-04-29 21:17:54 +05:30
if (isAssigneesWidgetShown) {
mountAssigneesComponent();
} else {
mountAssigneesComponentDeprecated(mediator);
}
2021-01-03 14:25:43 +05:30
mountReviewersComponent(mediator);
2018-03-17 18:26:18 +05:30
mountConfidentialComponent(mediator);
2021-04-29 21:17:54 +05:30
mountDueDateComponent(mediator);
2021-04-17 20:07:23 +05:30
mountReferenceComponent(mediator);
2021-01-03 14:25:43 +05:30
mountLockComponent();
2018-03-17 18:26:18 +05:30
mountParticipantsComponent(mediator);
2021-06-08 01:23:25 +05:30
mountSubscriptionsComponent();
2021-03-08 18:12:59 +05:30
mountCopyEmailComponent();
2018-03-17 18:26:18 +05:30
new SidebarMoveIssue(
mediator,
$('.js-move-issue'),
$('.js-move-issue-confirmation-button'),
).init();
mountTimeTrackingComponent();
2020-11-24 15:15:51 +05:30
mountSeverityComponent();
2018-03-17 18:26:18 +05:30
}
2020-05-24 23:13:21 +05:30
export { getSidebarOptions };