1 files changed, 97 insertions, 44 deletions

diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index be559b16420..00b4e2de5e5 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,10 +1,10 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import SidebarLabels from './components/labels/sidebar_labels.vue';
+import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
 import IssuableLockForm from './components/lock/issuable_lock_form.vue';
@@ -13,17 +13,15 @@ import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptio
 import SidebarSeverity from './components/severity/sidebar_severity.vue';
 import Translate from '../vue_shared/translate';
 import createDefaultClient from '~/lib/graphql';
-import { store } from '~/notes/stores';
-import { isInIssuePage, parseBoolean } from '~/lib/utils/common_utils';
-import mergeRequestStore from '~/mr_notes/stores';
-import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+import { isInIssuePage, isInIncidentPage, parseBoolean } from '~/lib/utils/common_utils';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
-Vue.use(Vuex);
 
-function getSidebarOptions() {
-  return JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
+function getSidebarOptions(sidebarOptEl = document.querySelector('.js-sidebar-options')) {
+  return JSON.parse(sidebarOptEl.innerHTML);
 }
 
 function mountAssigneesComponent(mediator) {
@@ -50,6 +48,36 @@ function mountAssigneesComponent(mediator) {
           projectPath: fullPath,
           field: el.dataset.field,
           signedIn: el.hasAttribute('data-signed-in'),
+          issuableType: isInIssuePage() || isInIncidentPage() ? 'issue' : 'merge_request',
+        },
+      }),
+  });
+}
+
+function mountReviewersComponent(mediator) {
+  const el = document.getElementById('js-vue-sidebar-reviewers');
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  if (!el) return;
+
+  const { iid, fullPath } = getSidebarOptions();
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    apolloProvider,
+    components: {
+      SidebarReviewers,
+    },
+    render: createElement =>
+      createElement('sidebar-reviewers', {
+        props: {
+          mediator,
+          issuableIid: String(iid),
+          projectPath: fullPath,
+          field: el.dataset.field,
+          signedIn: el.hasAttribute('data-signed-in'),
           issuableType: isInIssuePage() ? 'issue' : 'merge_request',
         },
       }),
@@ -63,8 +91,6 @@ export function mountSidebarLabels() {
     return false;
   }
 
-  const labelsStore = new Vuex.Store(labelsSelectModule());
-
   return new Vue({
     el,
     provide: {
@@ -74,7 +100,6 @@ export function mountSidebarLabels() {
       allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
       initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
     },
-    store: labelsStore,
     render: createElement => createElement(SidebarLabels),
   });
 }
@@ -89,47 +114,74 @@ function mountConfidentialComponent(mediator) {
   const dataNode = document.getElementById('js-confidential-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    store,
-    components: {
-      ConfidentialIssueSidebar,
-    },
-    render: createElement =>
-      createElement('confidential-issue-sidebar', {
-        props: {
-          iid: String(iid),
-          fullPath,
-          isEditable: initialData.is_editable,
-          service: mediator.service,
-        },
-      }),
-  });
+  import(/* webpackChunkName: 'notesStore' */ '~/notes/stores')
+    .then(
+      ({ store }) =>
+        new Vue({
+          el,
+          store,
+          components: {
+            ConfidentialIssueSidebar,
+          },
+          render: createElement =>
+            createElement('confidential-issue-sidebar', {
+              props: {
+                iid: String(iid),
+                fullPath,
+                isEditable: initialData.is_editable,
+                service: mediator.service,
+              },
+            }),
+        }),
+    )
+    .catch(() => {
+      createFlash({ message: __('Failed to load sidebar confidential toggle') });
+    });
 }
 
 function mountLockComponent() {
   const el = document.getElementById('js-lock-entry-point');
+
+  if (!el) {
+    return;
+  }
+
   const { fullPath } = getSidebarOptions();
 
   const dataNode = document.getElementById('js-lock-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  return el
-    ? new Vue({
-        el,
-        store: isInIssuePage() ? store : mergeRequestStore,
-        provide: {
-          fullPath,
-        },
-        render: createElement =>
-          createElement(IssuableLockForm, {
-            props: {
-              isEditable: initialData.is_editable,
-            },
-          }),
-      })
-    : undefined;
+  let importStore;
+  if (isInIssuePage() || isInIncidentPage()) {
+    importStore = import(/* webpackChunkName: 'notesStore' */ '~/notes/stores').then(
+      ({ store }) => store,
+    );
+  } else {
+    importStore = import(/* webpackChunkName: 'mrNotesStore' */ '~/mr_notes/stores').then(
+      store => store.default,
+    );
+  }
+
+  importStore
+    .then(
+      store =>
+        new Vue({
+          el,
+          store,
+          provide: {
+            fullPath,
+          },
+          render: createElement =>
+            createElement(IssuableLockForm, {
+              props: {
+                isEditable: initialData.is_editable,
+              },
+            }),
+        }),
+    )
+    .catch(() => {
+      createFlash({ message: __('Failed to load sidebar lock status') });
+    });
 }
 
 function mountParticipantsComponent(mediator) {
@@ -218,8 +270,9 @@ function mountSeverityComponent() {
 
 export function mountSidebar(mediator) {
   mountAssigneesComponent(mediator);
+  mountReviewersComponent(mediator);
   mountConfidentialComponent(mediator);
-  mountLockComponent(mediator);
+  mountLockComponent();
   mountParticipantsComponent(mediator);
   mountSubscriptionsComponent(mediator);