Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

51 files changed, 356 insertions, 276 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
index e7ef731eed8..2387fe64b8f 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
@@ -1,7 +1,7 @@
 <script>
 import produce from 'immer';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { assigneesQueries } from '~/sidebar/constants';
 
 export default {
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index 20667e695ce..6a74ab83c22 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -110,7 +110,7 @@ export default {
 <template>
   <div
     v-gl-tooltip="tooltipOptions"
-    :class="{ 'multiple-users': hasMoreThanOneAssignee }"
+    :class="{ 'multiple-users gl-relative': hasMoreThanOneAssignee }"
     :title="tooltipTitle"
     class="sidebar-collapsed-icon sidebar-collapsed-user"
   >
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
index 1b28ba2afd1..5b4dc20e9c8 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
@@ -3,7 +3,7 @@ import { GlDropdownItem } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import Vue from 'vue';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { __, n__ } from '~/locale';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 8d5c3b2def3..a27dbee31ec 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -1,6 +1,6 @@
 <script>
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
 import AttentionRequestedToggle from '../attention_requested_toggle.vue';
 import AssigneeAvatarLink from './assignee_avatar_link.vue';
diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
index 38ba468d197..42e56906e2c 100644
--- a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
+++ b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
@@ -64,7 +64,7 @@ export default {
     <gl-button
       :loading="loading"
       :variant="user.attention_requested ? 'warning' : 'default'"
-      :icon="user.attention_requested ? 'star' : 'star-o'"
+      :icon="user.attention_requested ? 'attention-solid' : 'attention'"
       :aria-label="tooltipTitle"
       size="small"
       category="tertiary"
diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue
index 1fb4bd26533..209d1cca360 100644
--- a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlSprintf, GlButton } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
 import { confidentialityQueries } from '~/sidebar/constants';
 
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
new file mode 100644
index 00000000000..6d4da104952
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
@@ -0,0 +1,131 @@
+<script>
+import { GlIcon, GlPopover, GlTooltipDirective } from '@gitlab/ui';
+import { __, n__, sprintf } from '~/locale';
+import createFlash from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_ISSUE } from '~/graphql_shared/constants';
+import getIssueCrmContactsQuery from './queries/get_issue_crm_contacts.query.graphql';
+import issueCrmContactsSubscription from './queries/issue_crm_contacts.subscription.graphql';
+
+export default {
+  components: {
+    GlIcon,
+    GlPopover,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    issueId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      contacts: [],
+    };
+  },
+  apollo: {
+    contacts: {
+      query: getIssueCrmContactsQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      update(data) {
+        return data?.issue?.customerRelationsContacts?.nodes;
+      },
+      error(error) {
+        createFlash({
+          message: __('Something went wrong trying to load issue contacts.'),
+          error,
+          captureError: true,
+        });
+      },
+      subscribeToMore: {
+        document: issueCrmContactsSubscription,
+        variables() {
+          return this.queryVariables;
+        },
+        updateQuery(prev, { subscriptionData }) {
+          const draftData = subscriptionData?.data?.issueCrmContactsUpdated;
+          if (prev && draftData) return { issue: draftData };
+          return prev;
+        },
+      },
+    },
+  },
+  computed: {
+    shouldShowContacts() {
+      return this.contacts?.length;
+    },
+    queryVariables() {
+      return { id: convertToGraphQLId(TYPE_ISSUE, this.issueId) };
+    },
+    contactsLabel() {
+      return sprintf(n__('%{count} contact', '%{count} contacts', this.contactCount), {
+        count: this.contactCount,
+      });
+    },
+    contactCount() {
+      return this.contacts?.length || 0;
+    },
+  },
+  methods: {
+    shouldShowPopover(contact) {
+      return this.popOverData(contact).length > 0;
+    },
+    divider(index) {
+      if (index < this.contactCount - 1) return ',';
+      return '';
+    },
+    popOverData(contact) {
+      return [contact.organization?.name, contact.email, contact.phone, contact.description].filter(
+        Boolean,
+      );
+    },
+  },
+  i18n: {
+    help: __('Work in progress- click here to find out more'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-gl-tooltip.left.viewport :title="contactsLabel" class="sidebar-collapsed-icon">
+      <gl-icon name="users" />
+      <span> {{ contactCount }} </span>
+    </div>
+    <div
+      v-gl-tooltip.left.viewport="$options.i18n.help"
+      class="hide-collapsed help-button float-right"
+    >
+      <a href="https://gitlab.com/gitlab-org/gitlab/-/issues/2256"><gl-icon name="question-o" /></a>
+    </div>
+    <div class="title hide-collapsed gl-mb-2 gl-line-height-20">
+      {{ contactsLabel }}
+    </div>
+    <div class="hide-collapsed gl-display-flex gl-flex-wrap">
+      <div
+        v-for="(contact, index) in contacts"
+        :id="`contact_container_${index}`"
+        :key="index"
+        class="gl-pr-2"
+      >
+        <span :id="`contact_${index}`" class="gl-font-weight-bold"
+          >{{ contact.firstName }} {{ contact.lastName }}{{ divider(index) }}</span
+        >
+        <gl-popover
+          v-if="shouldShowPopover(contact)"
+          :target="`contact_${index}`"
+          :container="`contact_container_${index}`"
+          triggers="hover focus"
+          placement="top"
+        >
+          <div v-for="row in popOverData(contact)" :key="row">{{ row }}</div>
+        </gl-popover>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql b/app/assets/javascripts/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql
new file mode 100644
index 00000000000..30a0af10d56
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql
@@ -0,0 +1,7 @@
+#import "./issue_crm_contacts.fragment.graphql"
+
+query issueCrmContacts($id: IssueID!) {
+  issue(id: $id) {
+    ...CrmContacts
+  }
+}
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.fragment.graphql b/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.fragment.graphql
new file mode 100644
index 00000000000..750e1f1d1af
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.fragment.graphql
@@ -0,0 +1,17 @@
+fragment CrmContacts on Issue {
+  id
+  customerRelationsContacts {
+    nodes {
+      id
+      firstName
+      lastName
+      email
+      phone
+      description
+      organization {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql b/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql
new file mode 100644
index 00000000000..f3b6e4ec06f
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql
@@ -0,0 +1,9 @@
+#import "./issue_crm_contacts.fragment.graphql"
+
+subscription issueCrmContactsUpdated($id: IssuableID!) {
+  issueCrmContactsUpdated(issuableId: $id) {
+    ... on Issue {
+      ...CrmContacts
+    }
+  }
+}
diff --git a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue
index 1ff24dec884..404bcc3122a 100644
--- a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue
+++ b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlDatepicker, GlTooltipDirective, GlLink, GlPopover } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { dateInWords, formatDate, parsePikadayDate } from '~/lib/utils/datetime_utility';
 import { __, sprintf } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
@@ -124,6 +124,9 @@ export default {
     isLoading() {
       return this.$apollo.queries.issuable.loading || this.loading;
     },
+    initialLoading() {
+      return this.$apollo.queries.issuable.loading;
+    },
     hasDate() {
       return this.dateValue !== null;
     },
@@ -151,7 +154,7 @@ export default {
           };
     },
     dataTestId() {
-      return this.dateType === dateTypes.start ? 'start-date' : 'due-date';
+      return this.dateType === dateTypes.start ? 'sidebar-start-date' : 'sidebar-due-date';
     },
   },
   methods: {
@@ -266,15 +269,15 @@ export default {
       </gl-popover>
     </template>
     <template #collapsed>
-      <div v-gl-tooltip :title="dateLabel" class="sidebar-collapsed-icon">
+      <div v-gl-tooltip.viewport.left :title="dateLabel" class="sidebar-collapsed-icon">
         <gl-icon :size="16" name="calendar" />
         <span class="collapse-truncated-title">{{ formattedDate }}</span>
       </div>
       <sidebar-inherit-date
-        v-if="canInherit"
+        v-if="canInherit && !initialLoading"
         :issuable="issuable"
-        :is-loading="isLoading"
         :date-type="dateType"
+        :is-loading="isLoading"
         @reset-date="setDate(null)"
         @set-date="setFixedDate"
       />
diff --git a/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue b/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
index b6bfacb2e47..77f8e125dce 100644
--- a/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
+++ b/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
@@ -17,8 +17,9 @@ export default {
       type: Object,
     },
     isLoading: {
-      required: true,
+      required: false,
       type: Boolean,
+      default: false,
     },
     dateType: {
       type: String,
@@ -31,6 +32,7 @@ export default {
         return this.issuable?.[dateFields[this.dateType].isDateFixed] || false;
       },
       set(fixed) {
+        if (fixed === this.issuable[dateFields[this.dateType].isDateFixed]) return;
         this.$emit('set-date', fixed);
       },
     },
diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
deleted file mode 100644
index 5cd4a1a5192..00000000000
--- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<script>
-import $ from 'jquery';
-import { camelCase, difference, union } from 'lodash';
-import updateIssueLabelsMutation from '~/boards/graphql/issue_set_labels.mutation.graphql';
-import createFlash from '~/flash';
-import { getIdFromGraphQLId, MutationOperationMode } from '~/graphql_shared/utils';
-import { IssuableType } from '~/issue_show/constants';
-import { __ } from '~/locale';
-import updateMergeRequestLabelsMutation from '~/sidebar/queries/update_merge_request_labels.mutation.graphql';
-import { toLabelGid } from '~/sidebar/utils';
-import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants';
-import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
-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 glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-
-const mutationMap = {
-  [IssuableType.Issue]: {
-    mutation: updateIssueLabelsMutation,
-    mutationName: 'updateIssue',
-  },
-  [IssuableType.MergeRequest]: {
-    mutation: updateMergeRequestLabelsMutation,
-    mutationName: 'mergeRequestSetLabels',
-  },
-};
-
-export default {
-  components: {
-    LabelsSelect,
-    LabelsSelectWidget,
-  },
-  variant: DropdownVariant.Sidebar,
-  mixins: [glFeatureFlagMixin()],
-  inject: [
-    'allowLabelCreate',
-    'allowLabelEdit',
-    'allowScopedLabels',
-    'iid',
-    'fullPath',
-    'initiallySelectedLabels',
-    'issuableType',
-    'labelsFetchPath',
-    'labelsManagePath',
-    'projectIssuesPath',
-    'projectPath',
-  ],
-  data() {
-    return {
-      isLabelsSelectInProgress: false,
-      selectedLabels: this.initiallySelectedLabels,
-      LabelType,
-    };
-  },
-  methods: {
-    handleDropdownClose() {
-      $(this.$el).trigger('hidden.gl.dropdown');
-    },
-    getUpdateVariables(labels) {
-      let labelIds = [];
-
-      if (this.glFeatures.labelsWidget) {
-        labelIds = labels.map(({ id }) => toLabelGid(id));
-      } else {
-        const currentLabelIds = this.selectedLabels.map((label) => label.id);
-        const userAddedLabelIds = labels.filter((label) => label.set).map((label) => label.id);
-        const userRemovedLabelIds = labels.filter((label) => !label.set).map((label) => label.id);
-
-        labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds).map(
-          toLabelGid,
-        );
-      }
-
-      switch (this.issuableType) {
-        case IssuableType.Issue:
-          return {
-            iid: this.iid,
-            projectPath: this.projectPath,
-            labelIds,
-          };
-        case IssuableType.MergeRequest:
-          return {
-            iid: this.iid,
-            labelIds,
-            operationMode: MutationOperationMode.Replace,
-            projectPath: this.projectPath,
-          };
-        default:
-          return {};
-      }
-    },
-    handleUpdateSelectedLabels(dropdownLabels) {
-      this.updateSelectedLabels(this.getUpdateVariables(dropdownLabels));
-    },
-    getRemoveVariables(labelId) {
-      switch (this.issuableType) {
-        case IssuableType.Issue:
-          return {
-            iid: this.iid,
-            projectPath: this.projectPath,
-            removeLabelIds: [labelId],
-          };
-        case IssuableType.MergeRequest:
-          return {
-            iid: this.iid,
-            labelIds: [toLabelGid(labelId)],
-            operationMode: MutationOperationMode.Remove,
-            projectPath: this.projectPath,
-          };
-        default:
-          return {};
-      }
-    },
-    handleLabelRemove(labelId) {
-      this.updateSelectedLabels(this.getRemoveVariables(labelId));
-    },
-    updateSelectedLabels(inputVariables) {
-      this.isLabelsSelectInProgress = true;
-
-      this.$apollo
-        .mutate({
-          mutation: mutationMap[this.issuableType].mutation,
-          variables: { input: inputVariables },
-        })
-        .then(({ data }) => {
-          const { mutationName } = mutationMap[this.issuableType];
-
-          if (data[mutationName]?.errors?.length) {
-            throw new Error();
-          }
-
-          const issuableType = camelCase(this.issuableType);
-          this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map((label) => ({
-            ...label,
-            id: getIdFromGraphQLId(label.id),
-          }));
-        })
-        .catch(() => createFlash({ message: __('An error occurred while updating labels.') }))
-        .finally(() => {
-          this.isLabelsSelectInProgress = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <labels-select-widget
-    v-if="glFeatures.labelsWidget"
-    class="block labels js-labels-block"
-    :iid="iid"
-    :full-path="fullPath"
-    :allow-label-remove="allowLabelEdit"
-    :allow-multiselect="true"
-    :footer-create-label-title="__('Create project label')"
-    :footer-manage-label-title="__('Manage project labels')"
-    :labels-create-title="__('Create project label')"
-    :labels-filter-base-path="projectIssuesPath"
-    :variant="$options.variant"
-    :issuable-type="issuableType"
-    workspace-type="project"
-    :attr-workspace-path="fullPath"
-    :label-create-type="LabelType.project"
-    data-qa-selector="labels_block"
-  >
-    {{ __('None') }}
-  </labels-select-widget>
-  <labels-select
-    v-else
-    class="block labels js-labels-block"
-    :allow-label-remove="allowLabelEdit"
-    :allow-label-create="allowLabelCreate"
-    :allow-label-edit="allowLabelEdit"
-    :allow-multiselect="true"
-    :allow-scoped-labels="allowScopedLabels"
-    :footer-create-label-title="__('Create project label')"
-    :footer-manage-label-title="__('Manage project labels')"
-    :labels-create-title="__('Create project label')"
-    :labels-fetch-path="labelsFetchPath"
-    :labels-filter-base-path="projectIssuesPath"
-    :labels-manage-path="labelsManagePath"
-    :labels-select-in-progress="isLabelsSelectInProgress"
-    :selected-labels="selectedLabels"
-    :variant="$options.sidebar"
-    data-qa-selector="labels_block"
-    @onDropdownClose="handleDropdownClose"
-    @onLabelRemove="handleLabelRemove"
-    @updateSelectedLabels="handleUpdateSelectedLabels"
-  >
-    {{ __('None') }}
-  </labels-select>
-</template>
diff --git a/app/assets/javascripts/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql b/app/assets/javascripts/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql
index 2a1bcdf7136..cb9ee6abc9b 100644
--- a/app/assets/javascripts/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql
+++ b/app/assets/javascripts/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql
@@ -1,6 +1,7 @@
 mutation updateIssueLocked($input: IssueSetLockedInput!) {
   issueSetLocked(input: $input) {
     issue {
+      id
       discussionLocked
     }
     errors
diff --git a/app/assets/javascripts/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql b/app/assets/javascripts/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql
index 8590c8e71a6..11eb3611006 100644
--- a/app/assets/javascripts/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql
+++ b/app/assets/javascripts/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql
@@ -1,6 +1,7 @@
 mutation updateMergeRequestLocked($input: MergeRequestSetLockedInput!) {
   mergeRequestSetLocked(input: $input) {
     mergeRequest {
+      id
       discussionLocked
     }
     errors
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
index 9554a98121f..60d8fb4d408 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
@@ -89,7 +89,7 @@ export default {
 <template>
   <div
     v-gl-tooltip="tooltipOptions"
-    :class="{ 'multiple-users': hasMoreThanOneReviewer }"
+    :class="{ 'multiple-users gl-relative': hasMoreThanOneReviewer }"
     :title="tooltipTitle"
     class="sidebar-collapsed-icon sidebar-collapsed-user"
   >
diff --git a/app/assets/javascripts/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql b/app/assets/javascripts/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql
index 750e757971f..c9d36dfdb67 100644
--- a/app/assets/javascripts/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql
+++ b/app/assets/javascripts/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql
@@ -3,6 +3,7 @@ mutation updateIssuableSeverity($projectPath: ID!, $severity: IssuableSeverity!,
     errors
     issue {
       iid
+      id
       severity
     }
   }
diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
index 5dc93476120..86e46016534 100644
--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
+++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
@@ -5,7 +5,7 @@ import {
   GlLoadingIcon,
   GlTooltip,
   GlSprintf,
-  GlLink,
+  GlButton,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { INCIDENT_SEVERITY, ISSUABLE_TYPES, I18N } from './constants';
@@ -20,7 +20,7 @@ export default {
     GlSprintf,
     GlDropdown,
     GlDropdownItem,
-    GlLink,
+    GlButton,
     SeverityToken,
   },
   inject: ['canUpdate'],
@@ -150,23 +150,25 @@ export default {
 
     <div class="hide-collapsed">
       <p
-        class="gl-line-height-20 gl-mb-0 gl-text-gray-900 gl-display-flex gl-justify-content-space-between"
+        class="gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-display-flex gl-justify-content-space-between"
       >
         {{ $options.i18n.SEVERITY }}
-        <gl-link
+        <gl-button
           v-if="canUpdate"
+          category="tertiary"
+          size="small"
           data-testid="editButton"
-          href="#"
           @click="toggleFormDropdown"
           @keydown.esc="hideDropdown"
         >
           {{ $options.i18n.EDIT }}
-        </gl-link>
+        </gl-button>
       </p>
 
       <gl-dropdown
         :class="dropdownClass"
         block
+        :header-text="__('Assign severity')"
         :text="selectedItem.label"
         toggle-class="dropdown-menu-toggle gl-mb-2"
         @keydown.esc.native="hideDropdown"
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 0ba8c4f8907..da792b3a2aa 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -12,11 +12,12 @@ import {
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
-import { __, s__, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import {
+  dropdowni18nText,
   Tracking,
   IssuableAttributeState,
   IssuableAttributeType,
@@ -24,14 +25,11 @@ import {
   noAttributeId,
   defaultEpicSort,
   epicIidPattern,
-} from '~/sidebar/constants';
+} from 'ee_else_ce/sidebar/constants';
 
 export default {
   noAttributeId,
-  IssuableAttributeState,
-  issuableAttributesQueries,
   i18n: {
-    [IssuableAttributeType.Milestone]: __('Milestone'),
     expired: __('(expired)'),
     none: __('None'),
   },
@@ -53,14 +51,24 @@ export default {
     isClassicSidebar: {
       default: false,
     },
+    issuableAttributesQueries: {
+      default: issuableAttributesQueries,
+    },
+    issuableAttributesState: {
+      default: IssuableAttributeState,
+    },
+    widgetTitleText: {
+      default: {
+        [IssuableAttributeType.Milestone]: __('Milestone'),
+        expired: __('(expired)'),
+        none: __('None'),
+      },
+    },
   },
   props: {
     issuableAttribute: {
       type: String,
       required: true,
-      validator(value) {
-        return [IssuableAttributeType.Milestone].includes(value);
-      },
     },
     workspacePath: {
       required: true,
@@ -132,13 +140,13 @@ export default {
           return {
             fullPath: this.attrWorkspacePath,
             title: this.searchTerm,
-            state: this.$options.IssuableAttributeState[this.issuableAttribute],
+            state: this.issuableAttributesState[this.issuableAttribute],
           };
         }
 
         const variables = {
           fullPath: this.attrWorkspacePath,
-          state: this.$options.IssuableAttributeState[this.issuableAttribute],
+          state: this.issuableAttributesState[this.issuableAttribute],
           sort: defaultEpicSort,
         };
 
@@ -180,7 +188,7 @@ export default {
   },
   computed: {
     issuableAttributeQuery() {
-      return this.$options.issuableAttributesQueries[this.issuableAttribute];
+      return this.issuableAttributesQueries[this.issuableAttribute];
     },
     attributeTitle() {
       return this.currentAttribute?.title || this.i18n.noAttribute;
@@ -189,9 +197,7 @@ export default {
       return this.currentAttribute?.webUrl;
     },
     dropdownText() {
-      return this.currentAttribute
-        ? this.currentAttribute?.title
-        : this.$options.i18n[this.issuableAttribute];
+      return this.currentAttribute ? this.currentAttribute?.title : this.attributeTypeTitle;
     },
     loading() {
       return this.$apollo.queries.currentAttribute.loading;
@@ -200,7 +206,7 @@ export default {
       return this.attributesList.length === 0;
     },
     attributeTypeTitle() {
-      return this.$options.i18n[this.issuableAttribute];
+      return this.widgetTitleText[this.issuableAttribute];
     },
     attributeTypeIcon() {
       return this.icon || this.issuableAttribute;
@@ -209,37 +215,10 @@ export default {
       return timeFor(this.currentAttribute?.dueDate);
     },
     i18n() {
-      return {
-        noAttribute: sprintf(s__('DropdownWidget|No %{issuableAttribute}'), {
-          issuableAttribute: this.issuableAttribute,
-        }),
-        assignAttribute: sprintf(s__('DropdownWidget|Assign %{issuableAttribute}'), {
-          issuableAttribute: this.issuableAttribute,
-        }),
-        noAttributesFound: sprintf(s__('DropdownWidget|No %{issuableAttribute} found'), {
-          issuableAttribute: this.issuableAttribute,
-        }),
-        updateError: sprintf(
-          s__(
-            'DropdownWidget|Failed to set %{issuableAttribute} on this %{issuableType}. Please try again.',
-          ),
-          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
-        ),
-        listFetchError: sprintf(
-          s__(
-            'DropdownWidget|Failed to fetch the %{issuableAttribute} for this %{issuableType}. Please try again.',
-          ),
-          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
-        ),
-        currentFetchError: sprintf(
-          s__(
-            'DropdownWidget|An error occurred while fetching the assigned %{issuableAttribute} of the selected %{issuableType}.',
-          ),
-          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
-        ),
-      };
+      return dropdowni18nText(this.issuableAttribute, this.issuableType);
     },
     isEpic() {
+      // MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311
       return this.issuableAttribute === IssuableType.Epic;
     },
   },
@@ -252,7 +231,7 @@ export default {
 
       const selectedAttribute =
         Boolean(attributeId) && this.attributesList.find((p) => p.id === attributeId);
-      this.selectedTitle = selectedAttribute ? selectedAttribute.title : this.$options.i18n.none;
+      this.selectedTitle = selectedAttribute ? selectedAttribute.title : this.widgetTitleText.none;
 
       const { current } = this.issuableAttributeQuery;
       const { mutation } = current[this.issuableType];
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index bc7e377a966..701833c4e95 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 9a9d03353dc..91c67a03dfb 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { s__, __ } from '~/locale';
 import { timeTrackingQueries } from '~/sidebar/constants';
 
diff --git a/app/assets/javascripts/sidebar/constants.js b/app/assets/javascripts/sidebar/constants.js
index ac34a75ac5c..0238fb8e8d5 100644
--- a/app/assets/javascripts/sidebar/constants.js
+++ b/app/assets/javascripts/sidebar/constants.js
@@ -1,5 +1,6 @@
+import { s__, sprintf } from '~/locale';
 import updateIssueLabelsMutation from '~/boards/graphql/issue_set_labels.mutation.graphql';
-import { IssuableType, WorkspaceType } from '~/issue_show/constants';
+import { IssuableType, WorkspaceType } from '~/issues/constants';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import epicConfidentialQuery from '~/sidebar/queries/epic_confidential.query.graphql';
 import epicDueDateQuery from '~/sidebar/queries/epic_due_date.query.graphql';
@@ -272,3 +273,35 @@ export const todoMutations = {
   [TodoMutationTypes.Create]: todoCreateMutation,
   [TodoMutationTypes.MarkDone]: todoMarkDoneMutation,
 };
+
+export function dropdowni18nText(issuableAttribute, issuableType) {
+  return {
+    noAttribute: sprintf(s__('DropdownWidget|No %{issuableAttribute}'), {
+      issuableAttribute,
+    }),
+    assignAttribute: sprintf(s__('DropdownWidget|Assign %{issuableAttribute}'), {
+      issuableAttribute,
+    }),
+    noAttributesFound: sprintf(s__('DropdownWidget|No %{issuableAttribute} found'), {
+      issuableAttribute,
+    }),
+    updateError: sprintf(
+      s__(
+        'DropdownWidget|Failed to set %{issuableAttribute} on this %{issuableType}. Please try again.',
+      ),
+      { issuableAttribute, issuableType },
+    ),
+    listFetchError: sprintf(
+      s__(
+        'DropdownWidget|Failed to fetch the %{issuableAttribute} for this %{issuableType}. Please try again.',
+      ),
+      { issuableAttribute, issuableType },
+    ),
+    currentFetchError: sprintf(
+      s__(
+        'DropdownWidget|An error occurred while fetching the assigned %{issuableAttribute} of the selected %{issuableType}.',
+      ),
+      { issuableAttribute, issuableType },
+    ),
+  };
+}
diff --git a/app/assets/javascripts/sidebar/graphql.js b/app/assets/javascripts/sidebar/graphql.js
index 6a670db2d38..5b2ce3fe446 100644
--- a/app/assets/javascripts/sidebar/graphql.js
+++ b/app/assets/javascripts/sidebar/graphql.js
@@ -1,7 +1,7 @@
 import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import produce from 'immer';
 import VueApollo from 'vue-apollo';
-import getIssueStateQuery from '~/issue_show/queries/get_issue_state.query.graphql';
+import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql';
 import createDefaultClient from '~/lib/graphql';
 import introspectionQueryResultData from './fragmentTypes.json';
 
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
index 270b22fcdf9..1947c4801db 100644
--- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import timeTracker from './components/time_tracking/time_tracker.vue';
 
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);
diff --git a/app/assets/javascripts/sidebar/queries/epic_confidential.query.graphql b/app/assets/javascripts/sidebar/queries/epic_confidential.query.graphql
index 7a1fdb40e93..4998b2af666 100644
--- a/app/assets/javascripts/sidebar/queries/epic_confidential.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_confidential.query.graphql
@@ -1,6 +1,7 @@
 query epicConfidential($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/epic_due_date.query.graphql b/app/assets/javascripts/sidebar/queries/epic_due_date.query.graphql
index f60f44abebd..00529042e92 100644
--- a/app/assets/javascripts/sidebar/queries/epic_due_date.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_due_date.query.graphql
@@ -1,6 +1,7 @@
 query epicDueDate($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/epic_participants.query.graphql b/app/assets/javascripts/sidebar/queries/epic_participants.query.graphql
index fbebc50ab08..dada7ffc034 100644
--- a/app/assets/javascripts/sidebar/queries/epic_participants.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_participants.query.graphql
@@ -4,6 +4,7 @@
 query epicParticipants($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/epic_reference.query.graphql b/app/assets/javascripts/sidebar/queries/epic_reference.query.graphql
index bd10f09aed8..f35ca896ef8 100644
--- a/app/assets/javascripts/sidebar/queries/epic_reference.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_reference.query.graphql
@@ -1,6 +1,7 @@
 query epicReference($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/epic_start_date.query.graphql b/app/assets/javascripts/sidebar/queries/epic_start_date.query.graphql
index c6c24fd3d95..85fc7de8d02 100644
--- a/app/assets/javascripts/sidebar/queries/epic_start_date.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_start_date.query.graphql
@@ -1,6 +1,7 @@
 query epicStartDate($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/epic_subscribed.query.graphql b/app/assets/javascripts/sidebar/queries/epic_subscribed.query.graphql
index 9f1967e1685..a8fe6b8ddc3 100644
--- a/app/assets/javascripts/sidebar/queries/epic_subscribed.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_subscribed.query.graphql
@@ -1,6 +1,7 @@
 query epicSubscribed($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     emailsDisabled
     issuable: epic(iid: $iid) {
       __typename
diff --git a/app/assets/javascripts/sidebar/queries/epic_todo.query.graphql b/app/assets/javascripts/sidebar/queries/epic_todo.query.graphql
index 1e6f9bad5b2..b0ba724e727 100644
--- a/app/assets/javascripts/sidebar/queries/epic_todo.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/epic_todo.query.graphql
@@ -1,6 +1,7 @@
 query epicTodos($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     __typename
+    id
     issuable: epic(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/issuable_assignees.subscription.graphql b/app/assets/javascripts/sidebar/queries/issuable_assignees.subscription.graphql
index 47ce094418c..a58a04d87c4 100644
--- a/app/assets/javascripts/sidebar/queries/issuable_assignees.subscription.graphql
+++ b/app/assets/javascripts/sidebar/queries/issuable_assignees.subscription.graphql
@@ -3,6 +3,7 @@
 subscription issuableAssigneesUpdated($issuableId: IssuableID!) {
   issuableAssigneesUpdated(issuableId: $issuableId) {
     ... on Issue {
+      id
       assignees {
         nodes {
           ...User
diff --git a/app/assets/javascripts/sidebar/queries/issue_confidential.query.graphql b/app/assets/javascripts/sidebar/queries/issue_confidential.query.graphql
index 92cabf46af7..e578cf3bda5 100644
--- a/app/assets/javascripts/sidebar/queries/issue_confidential.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_confidential.query.graphql
@@ -1,6 +1,7 @@
 query issueConfidential($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/issue_due_date.query.graphql b/app/assets/javascripts/sidebar/queries/issue_due_date.query.graphql
index 6d3f782bd0a..48cbff252b3 100644
--- a/app/assets/javascripts/sidebar/queries/issue_due_date.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_due_date.query.graphql
@@ -1,6 +1,7 @@
 query issueDueDate($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/issue_reference.query.graphql b/app/assets/javascripts/sidebar/queries/issue_reference.query.graphql
index db4f58a4f69..c3128d6d961 100644
--- a/app/assets/javascripts/sidebar/queries/issue_reference.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_reference.query.graphql
@@ -1,5 +1,6 @@
 query issueReference($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
+    id
     __typename
     issuable: issue(iid: $iid) {
       __typename
diff --git a/app/assets/javascripts/sidebar/queries/issue_subscribed.query.graphql b/app/assets/javascripts/sidebar/queries/issue_subscribed.query.graphql
index 7d38b5d3bd8..e2722fc86a4 100644
--- a/app/assets/javascripts/sidebar/queries/issue_subscribed.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_subscribed.query.graphql
@@ -1,6 +1,7 @@
 query issueSubscribed($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/issue_time_tracking.query.graphql b/app/assets/javascripts/sidebar/queries/issue_time_tracking.query.graphql
index 7ac989b5c63..059361dd370 100644
--- a/app/assets/javascripts/sidebar/queries/issue_time_tracking.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_time_tracking.query.graphql
@@ -1,6 +1,7 @@
 query issueTimeTracking($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/issue_todo.query.graphql b/app/assets/javascripts/sidebar/queries/issue_todo.query.graphql
index 783d36352fe..5cd5d81c439 100644
--- a/app/assets/javascripts/sidebar/queries/issue_todo.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/issue_todo.query.graphql
@@ -1,6 +1,7 @@
 query issueTodos($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/merge_request_milestone.query.graphql b/app/assets/javascripts/sidebar/queries/merge_request_milestone.query.graphql
index 5c0edf5acee..b0a16677cf2 100644
--- a/app/assets/javascripts/sidebar/queries/merge_request_milestone.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/merge_request_milestone.query.graphql
@@ -3,6 +3,7 @@
 query mergeRequestMilestone($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: mergeRequest(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/merge_request_reference.query.graphql b/app/assets/javascripts/sidebar/queries/merge_request_reference.query.graphql
index 7979a1ccb3e..7c78f812b67 100644
--- a/app/assets/javascripts/sidebar/queries/merge_request_reference.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/merge_request_reference.query.graphql
@@ -1,6 +1,7 @@
 query mergeRequestReference($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: mergeRequest(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/merge_request_subscribed.query.graphql b/app/assets/javascripts/sidebar/queries/merge_request_subscribed.query.graphql
index 3b54a2e529b..d5e27ca7b69 100644
--- a/app/assets/javascripts/sidebar/queries/merge_request_subscribed.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/merge_request_subscribed.query.graphql
@@ -1,6 +1,7 @@
 query mergeRequestSubscribed($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: mergeRequest(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/merge_request_time_tracking.query.graphql b/app/assets/javascripts/sidebar/queries/merge_request_time_tracking.query.graphql
index b1ab1bcbe87..d480ff3d5ba 100644
--- a/app/assets/javascripts/sidebar/queries/merge_request_time_tracking.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/merge_request_time_tracking.query.graphql
@@ -1,6 +1,7 @@
 query mergeRequestTimeTracking($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: mergeRequest(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/merge_request_todo.query.graphql b/app/assets/javascripts/sidebar/queries/merge_request_todo.query.graphql
index 93a1c9ea925..65b9ef45260 100644
--- a/app/assets/javascripts/sidebar/queries/merge_request_todo.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/merge_request_todo.query.graphql
@@ -1,6 +1,7 @@
 query mergeRequestTodos($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: mergeRequest(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/project_issue_milestone.query.graphql b/app/assets/javascripts/sidebar/queries/project_issue_milestone.query.graphql
index 2bc42a0b011..c7f3adc9aca 100644
--- a/app/assets/javascripts/sidebar/queries/project_issue_milestone.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/project_issue_milestone.query.graphql
@@ -3,6 +3,7 @@
 query projectIssueMilestone($fullPath: ID!, $iid: String!) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     issuable: issue(iid: $iid) {
       __typename
       id
diff --git a/app/assets/javascripts/sidebar/queries/project_milestones.query.graphql b/app/assets/javascripts/sidebar/queries/project_milestones.query.graphql
index a3ab1ebc872..d9eab18628d 100644
--- a/app/assets/javascripts/sidebar/queries/project_milestones.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/project_milestones.query.graphql
@@ -3,6 +3,7 @@
 query projectMilestones($fullPath: ID!, $title: String, $state: MilestoneStateEnum) {
   workspace: project(fullPath: $fullPath) {
     __typename
+    id
     attributes: milestones(
       searchTitle: $title
       state: $state
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
index dd85eb1631b..90d1a7794ea 100644
--- a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
@@ -1,6 +1,8 @@
 query sidebarDetails($fullPath: ID!, $iid: String!) {
   project(fullPath: $fullPath) {
+    id
     issue(iid: $iid) {
+      id
       iid
     }
   }
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql
index 02498b18832..0505f88773d 100644
--- a/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql
@@ -1,6 +1,8 @@
 query mergeRequestSidebarDetails($fullPath: ID!, $iid: String!) {
   project(fullPath: $fullPath) {
+    id
     mergeRequest(iid: $iid) {
+      id
       iid # currently unused.
     }
   }
diff --git a/app/assets/javascripts/sidebar/queries/update_epic_title.mutation.graphql b/app/assets/javascripts/sidebar/queries/update_epic_title.mutation.graphql
index 2e6bc8c36ba..809cb2c9f76 100644
--- a/app/assets/javascripts/sidebar/queries/update_epic_title.mutation.graphql
+++ b/app/assets/javascripts/sidebar/queries/update_epic_title.mutation.graphql
@@ -1,6 +1,7 @@
 mutation updateEpicTitle($input: UpdateEpicInput!) {
   updateIssuableTitle: updateEpic(input: $input) {
     epic {
+      id
       title
     }
     errors
diff --git a/app/assets/javascripts/sidebar/queries/update_merge_request_labels.mutation.graphql b/app/assets/javascripts/sidebar/queries/update_merge_request_labels.mutation.graphql
index 016c31ea096..a48c9e96fc2 100644
--- a/app/assets/javascripts/sidebar/queries/update_merge_request_labels.mutation.graphql
+++ b/app/assets/javascripts/sidebar/queries/update_merge_request_labels.mutation.graphql
@@ -1,7 +1,7 @@
 mutation mergeRequestSetLabels($input: MergeRequestSetLabelsInput!) {
-  mergeRequestSetLabels(input: $input) {
+  updateIssuableLabels: mergeRequestSetLabels(input: $input) {
     errors
-    mergeRequest {
+    issuable: mergeRequest {
       id
       labels {
         nodes {
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 86580744ccc..a49ddac8c89 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -79,6 +79,20 @@ export default class SidebarMediator {
           }),
         );
       } else {
+        const currentUserId = gon.current_user_id;
+
+        if (currentUserId !== user.id) {
+          const currentUserReviewerOrAssignee = isReviewer
+            ? this.store.findReviewer({ id: currentUserId })
+            : this.store.findAssignee({ id: currentUserId });
+
+          if (currentUserReviewerOrAssignee?.attention_requested) {
+            // Update current users attention_requested state
+            this.store.updateReviewer(currentUserId, 'attention_requested');
+            this.store.updateAssignee(currentUserId, 'attention_requested');
+          }
+        }
+
         toast(sprintf(__('Requested attention from @%{username}'), { username: user.username }));
       }