1 files changed, 58 insertions, 12 deletions

diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 898be4a97ce..cbe40d0bfbe 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -5,13 +5,14 @@ import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import {
   isInIssuePage,
   isInDesignPage,
   isInIncidentPage,
   parseBoolean,
 } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
@@ -23,10 +24,11 @@ import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_wid
 import { apolloProvider } from '~/sidebar/graphql';
 import trackShowInviteMemberLink from '~/sidebar/track_invite_members';
 import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants';
+import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
+import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import Translate from '../vue_shared/translate';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue';
-import SidebarLabels from './components/labels/sidebar_labels.vue';
 import IssuableLockForm from './components/lock/issuable_lock_form.vue';
 import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue';
 import SidebarSeverity from './components/severity/sidebar_severity.vue';
@@ -34,6 +36,7 @@ import SidebarSubscriptionsWidget from './components/subscriptions/sidebar_subsc
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import { IssuableAttributeType } from './constants';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
+import CrmContacts from './components/crm_contacts/crm_contacts.vue';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -205,6 +208,28 @@ function mountReviewersComponent(mediator) {
   }
 }
 
+function mountCrmContactsComponent() {
+  const el = document.getElementById('js-issue-crm-contacts');
+
+  if (!el) return;
+
+  const { issueId } = el.dataset;
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    apolloProvider,
+    components: {
+      CrmContacts,
+    },
+    render: (createElement) =>
+      createElement('crm-contacts', {
+        props: {
+          issueId,
+        },
+      }),
+  });
+}
+
 function mountMilestoneSelect() {
   const el = document.querySelector('.js-milestone-select');
 
@@ -241,7 +266,6 @@ function mountMilestoneSelect() {
 
 export function mountSidebarLabels() {
   const el = document.querySelector('.js-sidebar-labels');
-  const { fullPath } = getSidebarOptions();
 
   if (!el) {
     return false;
@@ -250,22 +274,43 @@ export function mountSidebarLabels() {
   return new Vue({
     el,
     apolloProvider,
+
+    components: {
+      LabelsSelectWidget,
+    },
     provide: {
       ...el.dataset,
-      fullPath,
+      canUpdate: parseBoolean(el.dataset.canEdit),
       allowLabelCreate: parseBoolean(el.dataset.allowLabelCreate),
       allowLabelEdit: parseBoolean(el.dataset.canEdit),
       allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
-      initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
-      variant: DropdownVariant.Sidebar,
-      canUpdate: parseBoolean(el.dataset.canEdit),
       isClassicSidebar: true,
-      issuableType:
-        isInIssuePage() || isInIncidentPage() || isInDesignPage()
-          ? IssuableType.Issue
-          : IssuableType.MergeRequest,
     },
-    render: (createElement) => createElement(SidebarLabels),
+    render: (createElement) =>
+      createElement('labels-select-widget', {
+        props: {
+          iid: String(el.dataset.iid),
+          fullPath: el.dataset.projectPath,
+          allowLabelRemove: parseBoolean(el.dataset.canEdit),
+          allowMultiselect: true,
+          footerCreateLabelTitle: __('Create project label'),
+          footerManageLabelTitle: __('Manage project labels'),
+          labelsCreateTitle: __('Create project label'),
+          labelsFilterBasePath: el.dataset.projectIssuesPath,
+          variant: DropdownVariant.Sidebar,
+          issuableType:
+            isInIssuePage() || isInIncidentPage() || isInDesignPage()
+              ? IssuableType.Issue
+              : IssuableType.MergeRequest,
+          workspaceType: 'project',
+          attrWorkspacePath: el.dataset.projectPath,
+          labelCreateType: LabelType.project,
+        },
+        class: ['block labels js-labels-block'],
+        scopedSlots: {
+          default: () => __('None'),
+        },
+      }),
   });
 }
 
@@ -535,6 +580,7 @@ export function mountSidebar(mediator, store) {
     mountAssigneesComponentDeprecated(mediator);
   }
   mountReviewersComponent(mediator);
+  mountCrmContactsComponent();
   mountSidebarLabels();
   mountMilestoneSelect();
   mountConfidentialComponent(mediator);