diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/mount_sidebar.js')
-rw-r--r-- | app/assets/javascripts/sidebar/mount_sidebar.js | 344 |
1 files changed, 180 insertions, 164 deletions
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 9b5bad710dd..b37486283ca 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -18,6 +18,7 @@ import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assi import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue'; import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue'; import SidebarDueDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue'; +import MilestoneDropdown from '~/sidebar/components/milestone/milestone_dropdown.vue'; import SidebarParticipantsWidget from '~/sidebar/components/participants/sidebar_participants_widget.vue'; import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue'; import SidebarDropdownWidget from '~/sidebar/components/sidebar_dropdown_widget.vue'; @@ -33,6 +34,7 @@ import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue'; import SidebarEscalationStatus from './components/incidents/sidebar_escalation_status.vue'; import IssuableLockForm from './components/lock/issuable_lock_form.vue'; import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue'; +import SidebarReviewersInputs from './components/reviewers/sidebar_reviewers_inputs.vue'; import SidebarSeverity from './components/severity/sidebar_severity.vue'; import SidebarSubscriptionsWidget from './components/subscriptions/sidebar_subscriptions_widget.vue'; import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue'; @@ -47,27 +49,24 @@ function getSidebarOptions(sidebarOptEl = document.querySelector('.js-sidebar-op return JSON.parse(sidebarOptEl.innerHTML); } -function mountSidebarToDoWidget() { - const el = document.querySelector('.js-issuable-todo'); +function mountSidebarTodoWidget() { + const el = document.querySelector('.js-sidebar-todo-widget-root'); if (!el) { - return false; + return null; } const { projectPath, iid, id } = el.dataset; return new Vue({ el, - name: 'SidebarTodoRoot', + name: 'SidebarTodoWidgetRoot', apolloProvider, - components: { - SidebarTodoWidget, - }, provide: { isClassicSidebar: true, }, render: (createElement) => - createElement('sidebar-todo-widget', { + createElement(SidebarTodoWidget, { props: { fullPath: projectPath, issuableId: @@ -97,23 +96,22 @@ function getSidebarAssigneeAvailabilityData() { ); } -function mountAssigneesComponentDeprecated(mediator) { - const el = document.getElementById('js-vue-sidebar-assignees'); +function mountSidebarAssigneesDeprecated(mediator) { + const el = document.querySelector('.js-sidebar-assignees-root'); - if (!el) return; + if (!el) { + return null; + } const { id, iid, fullPath } = getSidebarOptions(); const assigneeAvailabilityStatus = getSidebarAssigneeAvailabilityData(); - // eslint-disable-next-line no-new - new Vue({ + + return new Vue({ el, name: 'SidebarAssigneesRoot', apolloProvider, - components: { - SidebarAssignees, - }, render: (createElement) => - createElement('sidebar-assignees', { + createElement(SidebarAssignees, { props: { mediator, issuableIid: String(iid), @@ -131,10 +129,12 @@ function mountAssigneesComponentDeprecated(mediator) { }); } -function mountAssigneesComponent() { - const el = document.getElementById('js-vue-sidebar-assignees'); +function mountSidebarAssigneesWidget() { + const el = document.querySelector('.js-sidebar-assignees-root'); - if (!el) return; + if (!el) { + return; + } const { id, iid, fullPath, editable } = getSidebarOptions(); const isIssuablePage = isInIssuePage() || isInIncidentPage() || isInDesignPage(); @@ -144,9 +144,6 @@ function mountAssigneesComponent() { el, name: 'SidebarAssigneesRoot', apolloProvider, - components: { - SidebarAssigneesWidget, - }, provide: { canUpdate: editable, directlyInviteMembers: Object.prototype.hasOwnProperty.call( @@ -155,7 +152,7 @@ function mountAssigneesComponent() { ), }, render: (createElement) => - createElement('sidebar-assignees-widget', { + createElement(SidebarAssigneesWidget, { props: { iid: String(iid), fullPath, @@ -183,10 +180,12 @@ function mountAssigneesComponent() { } } -function mountReviewersComponent(mediator) { - const el = document.getElementById('js-vue-sidebar-reviewers'); +function mountSidebarReviewers(mediator) { + const el = document.querySelector('.js-sidebar-reviewers-root'); - if (!el) return; + if (!el) { + return; + } const { iid, fullPath } = getSidebarOptions(); // eslint-disable-next-line no-new @@ -194,11 +193,8 @@ function mountReviewersComponent(mediator) { el, name: 'SidebarReviewersRoot', apolloProvider, - components: { - SidebarReviewers, - }, render: (createElement) => - createElement('sidebar-reviewers', { + createElement(SidebarReviewers, { props: { mediator, issuableIid: String(iid), @@ -210,6 +206,18 @@ function mountReviewersComponent(mediator) { }), }); + const reviewersInputEl = document.querySelector('.js-reviewers-inputs'); + + if (reviewersInputEl) { + // eslint-disable-next-line no-new + new Vue({ + el: reviewersInputEl, + render(createElement) { + return createElement(SidebarReviewersInputs); + }, + }); + } + const reviewerDropdown = document.querySelector('.js-sidebar-reviewer-dropdown'); if (reviewerDropdown) { @@ -217,22 +225,21 @@ function mountReviewersComponent(mediator) { } } -function mountCrmContactsComponent() { - const el = document.getElementById('js-issue-crm-contacts'); +function mountSidebarCrmContacts() { + const el = document.querySelector('.js-sidebar-crm-contacts-root'); - if (!el) return; + if (!el) { + return null; + } const { issueId, groupIssuesPath } = el.dataset; - // eslint-disable-next-line no-new - new Vue({ + + return new Vue({ el, name: 'SidebarCrmContactsRoot', apolloProvider, - components: { - CrmContacts, - }, render: (createElement) => - createElement('crm-contacts', { + createElement(CrmContacts, { props: { issueId, groupIssuesPath, @@ -241,28 +248,25 @@ function mountCrmContactsComponent() { }); } -function mountMilestoneSelect() { - const el = document.querySelector('.js-milestone-select'); +function mountSidebarMilestoneWidget() { + const el = document.querySelector('.js-sidebar-milestone-widget-root'); if (!el) { - return false; + return null; } const { canEdit, projectPath, issueIid } = el.dataset; return new Vue({ el, - name: 'SidebarMilestoneRoot', + name: 'SidebarMilestoneWidgetRoot', apolloProvider, - components: { - SidebarDropdownWidget, - }, provide: { canUpdate: parseBoolean(canEdit), isClassicSidebar: true, }, render: (createElement) => - createElement('sidebar-dropdown-widget', { + createElement(SidebarDropdownWidget, { props: { attrWorkspacePath: projectPath, workspacePath: projectPath, @@ -276,21 +280,57 @@ function mountMilestoneSelect() { }); } -export function mountSidebarLabels() { - const el = document.querySelector('.js-sidebar-labels'); +export function mountMilestoneDropdown() { + const el = document.querySelector('.js-milestone-dropdown-root'); if (!el) { - return false; + return null; } + Vue.use(VueApollo); + + const { + canAdminMilestone, + fullPath, + inputName, + milestoneId, + milestoneTitle, + projectMilestonesPath, + workspaceType, + } = el.dataset; + return new Vue({ el, - name: 'SidebarLabelsRoot', + name: 'MilestoneDropdownRoot', apolloProvider, - - components: { - LabelsSelectWidget, + render(createElement) { + return createElement(MilestoneDropdown, { + props: { + attrWorkspacePath: fullPath, + canAdminMilestone, + inputName, + issuableType: isInIssuePage() ? IssuableType.Issue : IssuableType.MergeRequest, + milestoneId, + milestoneTitle, + projectMilestonesPath, + workspaceType, + }, + }); }, + }); +} + +export function mountSidebarLabelsWidget() { + const el = document.querySelector('.js-sidebar-labels-widget-root'); + + if (!el) { + return null; + } + + return new Vue({ + el, + name: 'SidebarLabelsWidgetRoot', + apolloProvider, provide: { ...el.dataset, canUpdate: parseBoolean(el.dataset.canEdit), @@ -300,7 +340,7 @@ export function mountSidebarLabels() { isClassicSidebar: true, }, render: (createElement) => - createElement('labels-select-widget', { + createElement(LabelsSelectWidget, { props: { iid: String(el.dataset.iid), fullPath: el.dataset.projectPath, @@ -327,31 +367,27 @@ export function mountSidebarLabels() { }); } -function mountConfidentialComponent() { - const el = document.getElementById('js-confidential-entry-point'); +function mountSidebarConfidentialityWidget() { + const el = document.querySelector('.js-sidebar-confidential-widget-root'); + if (!el) { - return; + return null; } const { fullPath, iid } = getSidebarOptions(); const dataNode = document.getElementById('js-confidential-issue-data'); const initialData = JSON.parse(dataNode.innerHTML); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, - name: 'SidebarConfidentialRoot', + name: 'SidebarConfidentialityWidgetRoot', apolloProvider, - components: { - SidebarConfidentialityWidget, - }, provide: { canUpdate: initialData.is_editable, isClassicSidebar: true, }, - render: (createElement) => - createElement('sidebar-confidentiality-widget', { + createElement(SidebarConfidentialityWidget, { props: { iid: String(iid), fullPath, @@ -364,28 +400,24 @@ function mountConfidentialComponent() { }); } -function mountDueDateComponent() { - const el = document.getElementById('js-due-date-entry-point'); +function mountSidebarDueDateWidget() { + const el = document.querySelector('.js-sidebar-due-date-widget-root'); + if (!el) { - return; + return null; } const { fullPath, iid, editable } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, - name: 'SidebarDueDateRoot', + name: 'SidebarDueDateWidgetRoot', apolloProvider, - components: { - SidebarDueDateWidget, - }, provide: { canUpdate: editable, }, - render: (createElement) => - createElement('sidebar-due-date-widget', { + createElement(SidebarDueDateWidget, { props: { iid: String(iid), fullPath, @@ -395,29 +427,25 @@ function mountDueDateComponent() { }); } -function mountReferenceComponent() { - const el = document.getElementById('js-reference-entry-point'); +function mountSidebarReferenceWidget() { + const el = document.querySelector('.js-sidebar-reference-widget-root'); + if (!el) { - return; + return null; } const { fullPath, iid } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, - name: 'SidebarReferenceRoot', + name: 'SidebarReferenceWidgetRoot', apolloProvider, - components: { - SidebarReferenceWidget, - }, provide: { iid: String(iid), fullPath, }, - render: (createElement) => - createElement('sidebar-reference-widget', { + createElement(SidebarReferenceWidget, { props: { issuableType: isInIssuePage() || isInIncidentPage() || isInDesignPage() @@ -428,17 +456,16 @@ function mountReferenceComponent() { }); } -function mountLockComponent(store) { - const el = document.getElementById('js-lock-entry-point'); +function mountIssuableLockForm(store) { + const el = document.querySelector('.js-sidebar-lock-root'); if (!el || !store) { - return; + return null; } const { fullPath, editable } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, name: 'SidebarLockRoot', store, @@ -454,23 +481,21 @@ function mountLockComponent(store) { }); } -function mountParticipantsComponent() { - const el = document.querySelector('.js-sidebar-participants-entry-point'); +function mountSidebarParticipantsWidget() { + const el = document.querySelector('.js-sidebar-participants-widget-root'); - if (!el) return; + if (!el) { + return null; + } const { fullPath, iid } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, - name: 'SidebarParticipantsRoot', + name: 'SidebarParticipantsWidgetRoot', apolloProvider, - components: { - SidebarParticipantsWidget, - }, render: (createElement) => - createElement('sidebar-participants-widget', { + createElement(SidebarParticipantsWidget, { props: { iid: String(iid), fullPath, @@ -483,26 +508,24 @@ function mountParticipantsComponent() { }); } -function mountSubscriptionsComponent() { - const el = document.querySelector('.js-sidebar-subscriptions-entry-point'); +function mountSidebarSubscriptionsWidget() { + const el = document.querySelector('.js-sidebar-subscriptions-widget-root'); - if (!el) return; + if (!el) { + return null; + } const { fullPath, iid, editable } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, - name: 'SidebarSubscriptionsRoot', + name: 'SidebarSubscriptionsWidgetRoot', apolloProvider, - components: { - SidebarSubscriptionsWidget, - }, provide: { canUpdate: editable, }, render: (createElement) => - createElement('sidebar-subscriptions-widget', { + createElement(SidebarSubscriptionsWidget, { props: { iid: String(iid), fullPath, @@ -515,14 +538,15 @@ function mountSubscriptionsComponent() { }); } -function mountTimeTrackingComponent() { - const el = document.getElementById('issuable-time-tracker'); +function mountSidebarTimeTracking() { + const el = document.querySelector('.js-sidebar-time-tracking-root'); const { id, iid, fullPath, issuableType, timeTrackingLimitToHours } = getSidebarOptions(); - if (!el) return; + if (!el) { + return null; + } - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, name: 'SidebarTimeTrackingRoot', apolloProvider, @@ -539,27 +563,24 @@ function mountTimeTrackingComponent() { }); } -function mountSeverityComponent() { - const severityContainerEl = document.querySelector('#js-severity'); +function mountSidebarSeverity() { + const el = document.querySelector('.js-sidebar-severity-root'); - if (!severityContainerEl) { - return false; + if (!el) { + return null; } const { fullPath, iid, severity, editable } = getSidebarOptions(); return new Vue({ - el: severityContainerEl, + el, name: 'SidebarSeverityRoot', apolloProvider, - components: { - SidebarSeverity, - }, provide: { canUpdate: editable, }, render: (createElement) => - createElement('sidebar-severity', { + createElement(SidebarSeverity, { props: { projectPath: fullPath, iid: String(iid), @@ -569,27 +590,25 @@ function mountSeverityComponent() { }); } -function mountEscalationStatusComponent() { - const statusContainerEl = document.querySelector('#js-escalation-status'); +function mountSidebarEscalationStatus() { + const el = document.querySelector('.js-sidebar-escalation-status-root'); - if (!statusContainerEl) { - return false; + if (!el) { + return null; } const { issuableType } = getSidebarOptions(); - const { canUpdate, issueIid, projectPath } = statusContainerEl.dataset; + const { canUpdate, issueIid, projectPath } = el.dataset; return new Vue({ - el: statusContainerEl, + el, + name: 'SidebarEscalationStatusRoot', apolloProvider, - components: { - SidebarEscalationStatus, - }, provide: { canUpdate: parseBoolean(canUpdate), }, render: (createElement) => - createElement('sidebar-escalation-status', { + createElement(SidebarEscalationStatus, { props: { iid: issueIid, issuableType, @@ -599,15 +618,16 @@ function mountEscalationStatusComponent() { }); } -function mountCopyEmailComponent() { - const el = document.getElementById('issuable-copy-email'); +function mountCopyEmailToClipboard() { + const el = document.querySelector('.js-sidebar-copy-email-root'); - if (!el) return; + if (!el) { + return null; + } const { createNoteEmail } = getSidebarOptions(); - // eslint-disable-next-line no-new - new Vue({ + return new Vue({ el, name: 'SidebarCopyEmailRoot', render: (createElement) => @@ -621,36 +641,32 @@ const isAssigneesWidgetShown = export function mountSidebar(mediator, store) { initInviteMembersModal(); initInviteMembersTrigger(); - - mountSidebarToDoWidget(); + mountSidebarTodoWidget(); if (isAssigneesWidgetShown) { - mountAssigneesComponent(); + mountSidebarAssigneesWidget(); } else { - mountAssigneesComponentDeprecated(mediator); + mountSidebarAssigneesDeprecated(mediator); } - mountReviewersComponent(mediator); - mountCrmContactsComponent(); - mountSidebarLabels(); - mountMilestoneSelect(); - mountConfidentialComponent(mediator); - mountDueDateComponent(mediator); - mountReferenceComponent(mediator); - mountLockComponent(store); - mountParticipantsComponent(); - mountSubscriptionsComponent(); - mountCopyEmailComponent(); + mountSidebarReviewers(mediator); + mountSidebarCrmContacts(); + mountSidebarLabelsWidget(); + mountSidebarMilestoneWidget(); + mountSidebarConfidentialityWidget(); + mountSidebarDueDateWidget(); + mountSidebarReferenceWidget(); + mountIssuableLockForm(store); + mountSidebarParticipantsWidget(); + mountSidebarSubscriptionsWidget(); + mountCopyEmailToClipboard(); + mountSidebarTimeTracking(); + mountSidebarSeverity(); + mountSidebarEscalationStatus(); new SidebarMoveIssue( mediator, $('.js-move-issue'), $('.js-move-issue-confirmation-button'), ).init(); - - mountTimeTrackingComponent(); - - mountSeverityComponent(); - - mountEscalationStatusComponent(); } export { getSidebarOptions }; |