Add latest changes from gitlab-org/gitlab@master

3 files changed, 37 insertions, 22 deletions

diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
index 1eff4db3970..06876546fa4 100644
--- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlIcon, GlTooltipDirective, GlOutsideDirective as Outside } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
-import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
+import { TYPE_ISSUE } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { createAlert } from '~/alert';
 import toast from '~/vue_shared/plugins/global_toast';
@@ -45,10 +46,8 @@ export default {
   },
   computed: {
     ...mapGetters(['getNoteableData']),
-    isMergeRequest() {
-      return (
-        this.getNoteableData.targetType === TYPE_MERGE_REQUEST && this.glFeatures.movedMrSidebar
-      );
+    isMovedMrSidebar() {
+      return this.glFeatures.movedMrSidebar;
     },
     issuableDisplayName() {
       const isInIssuePage = this.getNoteableData.targetType === TYPE_ISSUE;
@@ -60,7 +59,6 @@ export default {
     lockStatus() {
       return this.isLocked ? this.$options.locked : this.$options.unlocked;
     },
-
     tooltipLabel() {
       return this.isLocked ? __('Locked') : __('Unlocked');
     },
@@ -89,8 +87,13 @@ export default {
         fullPath: this.fullPath,
       })
         .then(() => {
-          if (this.isMergeRequest) {
-            toast(this.isLocked ? __('Merge request locked.') : __('Merge request unlocked.'));
+          if (this.isMovedMrSidebar) {
+            toast(
+              sprintf(__('%{issuableDisplayName} %{lockStatus}.'), {
+                issuableDisplayName: capitalizeFirstCharacter(this.issuableDisplayName),
+                lockStatus: this.isLocked ? __('locked') : __('unlocked'),
+              }),
+            );
           }
         })
         .catch(() => {
@@ -113,14 +116,14 @@ export default {
 </script>
 
 <template>
-  <li v-if="isMergeRequest" class="gl-dropdown-item">
-    <button type="button" class="dropdown-item" @click="toggleLocked">
+  <li v-if="isMovedMrSidebar" class="gl-dropdown-item">
+    <button type="button" class="dropdown-item" data-testid="issuable-lock" @click="toggleLocked">
       <span class="gl-dropdown-item-text-wrapper">
         <template v-if="isLocked">
-          {{ __('Unlock merge request') }}
+          {{ sprintf(__('Unlock %{issuableType}'), { issuableType: issuableDisplayName }) }}
         </template>
         <template v-else>
-          {{ __('Lock merge request') }}
+          {{ sprintf(__('Lock %{issuableType}'), { issuableType: issuableDisplayName }) }}
         </template>
       </span>
     </button>
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 344fa880131..f2b960ed02c 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,12 +1,7 @@
 <script>
 import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import {
-  TYPE_EPIC,
-  TYPE_MERGE_REQUEST,
-  WORKSPACE_GROUP,
-  WORKSPACE_PROJECT,
-} from '~/issues/constants';
+import { TYPE_EPIC, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -91,8 +86,8 @@ export default {
     },
   },
   computed: {
-    isMergeRequest() {
-      return this.issuableType === TYPE_MERGE_REQUEST && this.glFeatures.movedMrSidebar;
+    isMovedMrSidebar() {
+      return this.glFeatures.movedMrSidebar;
     },
     isLoading() {
       return this.$apollo.queries?.subscribed?.loading || this.loading;
@@ -148,7 +143,7 @@ export default {
               });
             }
 
-            if (this.isMergeRequest) {
+            if (this.isMovedMrSidebar) {
               toast(subscribed ? __('Notifications turned on.') : __('Notifications turned off.'));
             }
           },
@@ -187,7 +182,7 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown-form v-if="isMergeRequest" class="gl-dropdown-item">
+  <gl-dropdown-form v-if="isMovedMrSidebar" class="gl-dropdown-item">
     <div class="gl-px-5 gl-pb-2 gl-pt-1">
       <gl-toggle
         :value="subscribed"
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 540d57bb5ce..74843bcc006 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -17,6 +17,7 @@ import { __ } from '~/locale';
 import { apolloProvider } from '~/graphql_shared/issuable_client';
 import Translate from '~/vue_shared/translate';
 import UserSelect from '~/vue_shared/components/user_select/user_select.vue';
+import NewHeaderActionsPopover from '~/issues/show/components/new_header_actions_popover.vue';
 import CollapsedAssigneeList from './components/assignees/collapsed_assignee_list.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import SidebarAssigneesWidget from './components/assignees/sidebar_assignees_widget.vue';
@@ -785,6 +786,21 @@ export function mountAssigneesDropdown() {
   });
 }
 
+function mountNewIssuePopover() {
+  const el = document.querySelector('.js-sidebar-header-popover');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'NewHeaderActionsPopover',
+    render: (createElement) =>
+      createElement(NewHeaderActionsPopover, { props: { issueType: TYPE_MERGE_REQUEST } }),
+  });
+}
+
 const isAssigneesWidgetShown =
   (isInIssuePage() || isInDesignPage() || isInMRPage()) && gon.features.issueAssigneesWidget;
 
@@ -812,6 +828,7 @@ export function mountSidebar(mediator, store) {
   mountSidebarSeverityWidget();
   mountSidebarEscalationStatus();
   mountMoveIssueButton();
+  mountNewIssuePopover();
 }
 
 export { getSidebarOptions };