Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

4 files changed, 86 insertions, 37 deletions

diff --git a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
index 82223ab9ef4..06d1a2ee233 100644
--- a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
+++ b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
@@ -2,14 +2,21 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { __ } from '~/locale';
+import { IssuableType, WorkspaceType } from '~/issues/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 
 export default {
+  WorkspaceType,
+  IssuableType,
   components: {
     GlIcon,
+    ConfidentialityBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['hidden'],
   computed: {
     ...mapGetters(['getNoteableData']),
@@ -19,6 +26,9 @@ export default {
     isConfidential() {
       return this.getNoteableData.confidential;
     },
+    isMergeRequest() {
+      return this.getNoteableData.targetType === 'merge_request' && this.glFeatures.updatedMrHeader;
+    },
     warningIconsMeta() {
       return [
         {
@@ -27,11 +37,6 @@ export default {
           dataTestId: 'locked',
         },
         {
-          iconName: 'eye-slash',
-          visible: this.isConfidential,
-          dataTestId: 'confidential',
-        },
-        {
           iconName: 'spam',
           visible: this.hidden,
           dataTestId: 'hidden',
@@ -45,6 +50,12 @@ export default {
 
 <template>
   <div class="gl-display-inline-block">
+    <confidentiality-badge
+      v-if="isConfidential"
+      data-testid="confidential"
+      :workspace-type="$options.WorkspaceType.project"
+      :issuable-type="$options.IssuableType.Issue"
+    />
     <template v-for="meta in warningIconsMeta">
       <div
         v-if="meta.visible"
@@ -52,7 +63,11 @@ export default {
         v-gl-tooltip
         :data-testid="meta.dataTestId"
         :title="meta.tooltip || null"
-        class="issuable-warning-icon inline"
+        :class="{
+          'gl-mr-3 gl-mt-2 gl-display-flex gl-justify-content-center gl-align-items-center': isMergeRequest,
+          'gl-display-inline-block': !isMergeRequest,
+        }"
+        class="issuable-warning-icon"
       >
         <gl-icon :name="meta.iconName" class="icon" />
       </div>
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index 2bb0e3c80f9..dfe18567608 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -116,7 +116,7 @@ export default {
           <div
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
-            <gl-tooltip :target="() => this.$refs.iconElement">
+            <gl-tooltip :target="() => $refs.iconElement">
               <span v-safe-html="stateTitle"></span>
             </gl-tooltip>
             <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue
index bd6fdc131cb..498dc859186 100644
--- a/app/assets/javascripts/issuable/components/status_box.vue
+++ b/app/assets/javascripts/issuable/components/status_box.vue
@@ -1,32 +1,50 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlBadge, GlIcon } from '@gitlab/ui';
 import Vue from 'vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
 import { __ } from '~/locale';
+import { IssuableType } from '~/issues/constants';
+import { IssuableStates } from '~/vue_shared/issuable/list/constants';
 
-export const statusBoxState = Vue.observable({
+export const badgeState = Vue.observable({
   state: '',
   updateStatus: null,
 });
 
 const CLASSES = {
-  opened: 'status-box-open',
-  locked: 'status-box-open',
-  closed: 'status-box-mr-closed',
-  merged: 'status-box-mr-merged',
+  opened: 'issuable-status-badge-open',
+  locked: 'issuable-status-badge-open',
+  closed: 'issuable-status-badge-closed',
+  merged: 'issuable-status-badge-merged',
+};
+
+const ISSUE_ICONS = {
+  opened: 'issues',
+  locked: 'issues',
+  closed: 'issue-closed',
+};
+
+const MERGE_REQUEST_ICONS = {
+  opened: 'merge-request-open',
+  locked: 'merge-request-open',
+  closed: 'merge-request-close',
+  merged: 'merge',
 };
 
 const STATUS = {
-  opened: [__('Open'), 'issue-open-m'],
-  locked: [__('Open'), 'issue-open-m'],
-  closed: [__('Closed'), 'issue-close'],
-  merged: [__('Merged'), 'git-merge'],
+  opened: __('Open'),
+  locked: __('Open'),
+  closed: __('Closed'),
+  merged: __('Merged'),
 };
 
 export default {
   components: {
+    GlBadge,
     GlIcon,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     query: { default: null },
     projectPath: { default: null },
@@ -46,30 +64,47 @@ export default {
   },
   data() {
     if (this.initialState) {
-      statusBoxState.state = this.initialState;
+      badgeState.state = this.initialState;
     }
 
-    return statusBoxState;
+    return badgeState;
   },
   computed: {
-    statusBoxClass() {
-      return CLASSES[`${this.issuableType}_${this.state}`] || CLASSES[this.state];
+    badgeClass() {
+      return [
+        CLASSES[this.state],
+        {
+          'gl-vertical-align-bottom':
+            this.issuableType === IssuableType.MergeRequest && this.glFeatures.updatedMrHeader,
+        },
+      ];
+    },
+    badgeVariant() {
+      if (this.state === IssuableStates.Opened) {
+        return 'success';
+      } else if (this.state === IssuableStates.Closed) {
+        return this.issuableType === IssuableType.MergeRequest ? 'danger' : 'info';
+      }
+      return 'info';
     },
-    statusHumanName() {
-      return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[0];
+    badgeText() {
+      return STATUS[this.state];
     },
-    statusIconName() {
-      return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[1];
+    badgeIcon() {
+      if (this.issuableType === IssuableType.Issue) {
+        return ISSUE_ICONS[this.state];
+      }
+      return MERGE_REQUEST_ICONS[this.state];
     },
   },
   created() {
-    if (!statusBoxState.updateStatus) {
-      statusBoxState.updateStatus = this.fetchState;
+    if (!badgeState.updateStatus) {
+      badgeState.updateStatus = this.fetchState;
     }
   },
   beforeDestroy() {
-    if (statusBoxState.updateStatus && this.query) {
-      statusBoxState.updateStatus = null;
+    if (badgeState.updateStatus && this.query) {
+      badgeState.updateStatus = null;
     }
   },
   methods: {
@@ -83,17 +118,15 @@ export default {
         fetchPolicy: fetchPolicies.NO_CACHE,
       });
 
-      statusBoxState.state = data?.workspace?.issuable?.state;
+      badgeState.state = data?.workspace?.issuable?.state;
     },
   },
 };
 </script>
 
 <template>
-  <div :class="statusBoxClass" class="issuable-status-box status-box">
-    <gl-icon :name="statusIconName" class="gl-display-block gl-sm-display-none!" />
-    <span class="gl-display-none gl-sm-display-block">
-      {{ statusHumanName }}
-    </span>
-  </div>
+  <gl-badge class="issuable-status-badge gl-mr-3" :class="badgeClass" :variant="badgeVariant">
+    <gl-icon :name="badgeIcon" />
+    <span class="gl-display-none gl-sm-display-block gl-ml-2">{{ badgeText }}</span>
+  </gl-badge>
 </template>
diff --git a/app/assets/javascripts/issuable/issuable_form.js b/app/assets/javascripts/issuable/issuable_form.js
index 018cadad50f..8e76a33c7dd 100644
--- a/app/assets/javascripts/issuable/issuable_form.js
+++ b/app/assets/javascripts/issuable/issuable_form.js
@@ -65,7 +65,8 @@ export default class IssuableForm {
     this.gfmAutoComplete = new GfmAutoComplete(
       gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources,
     ).setup();
-    this.usersSelect = new UsersSelect();
+    const autoAssignToMe = form.get(0).id === 'new_merge_request';
+    this.usersSelect = new UsersSelect(undefined, undefined, { autoAssignToMe });
     this.reviewersSelect = new UsersSelect(undefined, '.js-reviewer-search');
     this.zenMode = new ZenMode();