Add latest changes from gitlab-org/gitlab@master

4 files changed, 133 insertions, 22 deletions

diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue
index 27186281c42..83df9056af2 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue
@@ -110,6 +110,9 @@ export default {
     isStandalone() {
       return isDropdownVariantStandalone(this.variant);
     },
+    isSidebar() {
+      return isDropdownVariantSidebar(this.variant);
+    },
   },
   watch: {
     localSelectedLabels: {
@@ -129,7 +132,7 @@ export default {
       }
     },
     selectedLabels(newVal) {
-      if (!this.isDirty) {
+      if (!this.isDirty || !this.isSidebar) {
         this.localSelectedLabels = newVal;
       }
     },
@@ -159,7 +162,7 @@ export default {
     },
     handleDropdownHide() {
       this.$emit('closeDropdown');
-      if (!isDropdownVariantSidebar(this.variant)) {
+      if (!this.isSidebar) {
         this.setLabels();
       }
     },
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/embedded_labels_list.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/embedded_labels_list.vue
new file mode 100644
index 00000000000..3a93fc7f3b2
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/embedded_labels_list.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlLabel } from '@gitlab/ui';
+import { sortBy } from 'lodash';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    GlLabel,
+  },
+  inject: ['allowScopedLabels'],
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    selectedLabels: {
+      type: Array,
+      required: true,
+    },
+    allowLabelRemove: {
+      type: Boolean,
+      required: true,
+    },
+    labelsFilterBasePath: {
+      type: String,
+      required: true,
+    },
+    labelsFilterParam: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    sortedSelectedLabels() {
+      return sortBy(this.selectedLabels, (label) => isScopedLabel(label));
+    },
+  },
+  methods: {
+    buildFilterUrl({ title }) {
+      const { labelsFilterBasePath: basePath, labelsFilterParam: filterParam } = this;
+
+      return `${basePath}?${filterParam}[]=${encodeURIComponent(title)}`;
+    },
+    showScopedLabel(label) {
+      return this.allowScopedLabels && isScopedLabel(label);
+    },
+    removeLabel(labelId) {
+      this.$emit('onLabelRemove', labelId);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-label
+      v-for="label in sortedSelectedLabels"
+      :key="label.id"
+      class="gl-mr-2 gl-mb-2"
+      :data-qa-label-name="label.title"
+      :title="label.title"
+      :description="label.description"
+      :background-color="label.color"
+      :target="buildFilterUrl(label)"
+      :scoped="showScopedLabel(label)"
+      :show-close-button="allowLabelRemove"
+      :disabled="disabled"
+      tooltip-placement="top"
+      @close="removeLabel(label.id)"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
index b2b490b8ec4..b7b4bbac661 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
@@ -12,6 +12,7 @@ import SidebarEditableItem from '../../sidebar_editable_item.vue';
 import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants';
 import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
+import EmbeddedLabelsList from './embedded_labels_list.vue';
 import {
   isDropdownVariantSidebar,
   isDropdownVariantStandalone,
@@ -22,6 +23,7 @@ export default {
   components: {
     DropdownValue,
     DropdownContents,
+    EmbeddedLabelsList,
     SidebarEditableItem,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -50,6 +52,11 @@ export default {
       required: false,
       default: false,
     },
+    showEmbeddedLabelsList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     variant: {
       type: String,
       required: false,
@@ -106,6 +113,11 @@ export default {
       type: String,
       required: true,
     },
+    selectedLabels: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -124,11 +136,21 @@ export default {
       return this.issuableLabels.map((label) => label.id);
     },
     issuableLabels() {
-      return this.issuable?.labels.nodes || [];
+      if (this.iid !== '') {
+        return this.issuable?.labels.nodes || [];
+      }
+
+      return this.selectedLabels || [];
     },
     issuableId() {
       return this.issuable?.id;
     },
+    isRealtimeEnabled() {
+      return this.glFeatures.realtimeLabels;
+    },
+    isLabelListEnabled() {
+      return this.showEmbeddedLabelsList && isDropdownVariantEmbedded(this.variant);
+    },
   },
   apollo: {
     issuable: {
@@ -311,7 +333,10 @@ export default {
       }
     },
     handleLabelRemove(labelId) {
-      this.updateSelectedLabels(this.getRemoveVariables(labelId));
+      if (this.iid !== '') {
+        this.updateSelectedLabels(this.getRemoveVariables(labelId));
+      }
+
       this.$emit('onLabelRemove', labelId);
     },
     isDropdownVariantSidebar,
@@ -385,22 +410,32 @@ export default {
         </template>
       </sidebar-editable-item>
     </template>
-    <dropdown-contents
-      v-else
-      ref="dropdownContents"
-      :allow-multiselect="allowMultiselect"
-      :dropdown-button-text="dropdownButtonText"
-      :labels-list-title="labelsListTitle"
-      :footer-create-label-title="footerCreateLabelTitle"
-      :footer-manage-label-title="footerManageLabelTitle"
-      :labels-create-title="labelsCreateTitle"
-      :selected-labels="issuableLabels"
-      :variant="variant"
-      :full-path="fullPath"
-      :workspace-type="workspaceType"
-      :attr-workspace-path="attrWorkspacePath"
-      :label-create-type="labelCreateType"
-      @setLabels="handleDropdownClose"
-    />
+    <template v-else>
+      <dropdown-contents
+        ref="dropdownContents"
+        :allow-multiselect="allowMultiselect"
+        :dropdown-button-text="dropdownButtonText"
+        :labels-list-title="labelsListTitle"
+        :footer-create-label-title="footerCreateLabelTitle"
+        :footer-manage-label-title="footerManageLabelTitle"
+        :labels-create-title="labelsCreateTitle"
+        :selected-labels="issuableLabels"
+        :variant="variant"
+        :full-path="fullPath"
+        :workspace-type="workspaceType"
+        :attr-workspace-path="attrWorkspacePath"
+        :label-create-type="labelCreateType"
+        @setLabels="handleDropdownClose"
+      />
+      <embedded-labels-list
+        v-if="isLabelListEnabled"
+        :disabled="labelsSelectInProgress"
+        :selected-labels="issuableLabels"
+        :allow-label-remove="allowLabelRemove"
+        :labels-filter-base-path="labelsFilterBasePath"
+        :labels-filter-param="labelsFilterParam"
+        @onLabelRemove="handleLabelRemove"
+      />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/queries/get_alert_assignees.query.graphql b/app/assets/javascripts/sidebar/queries/get_alert_assignees.query.graphql
index 78c1f9e13cd..171eca50eab 100644
--- a/app/assets/javascripts/sidebar/queries/get_alert_assignees.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/get_alert_assignees.query.graphql
@@ -8,8 +8,8 @@ query alertAssignees(
 ) {
   workspace: project(fullPath: $fullPath) {
     id
-    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     issuable: alertManagementAlert(domain: $domain, iid: $iid) {
+      id
       iid
       assignees {
         nodes {