Add latest changes from gitlab-org/gitlab@master

4 files changed, 93 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql
index 577bea8c342..b04d5773a37 100644
--- a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql
+++ b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql
@@ -7,8 +7,8 @@ mutation alertSetAssignees($fullPath: ID!, $assigneeUsernames: [String!]!, $iid:
     input: { iid: $iid, assigneeUsernames: $assigneeUsernames, projectPath: $fullPath }
   ) {
     errors
-    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     issuable: alert {
+      id
       iid
       assignees {
         nodes {
diff --git a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql
index 2af1940c723..c860bf0915c 100644
--- a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql
+++ b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql
@@ -4,7 +4,6 @@
 mutation alertTodoCreate($projectPath: ID!, $iid: String!) {
   alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {
     errors
-    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     alert {
       ...AlertDetailItem
       assignees {
diff --git a/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql b/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql
index 9683233d191..0ea209ffd39 100644
--- a/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql
+++ b/app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql
@@ -5,7 +5,6 @@ query alertDetailsAssignees($fullPath: ID!, $alertId: String) {
   project(fullPath: $fullPath) {
     id
     alertManagementAlerts(iid: $alertId) {
-      # eslint-disable-next-line @graphql-eslint/require-id-when-available
       nodes {
         ...AlertDetailItem
         assignees {
diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue
new file mode 100644
index 00000000000..b3f9c8d9fcd
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue
@@ -0,0 +1,92 @@
+<script>
+import { GlFormGroup, GlIcon } from '@gitlab/ui';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import LabelsSelect from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlIcon,
+    LabelsSelect,
+  },
+  inject: [
+    'allowLabelRemove',
+    'attrWorkspacePath',
+    'fieldName',
+    'fullPath',
+    'labelsFilterBasePath',
+    'initialLabels',
+    'issuableType',
+    'labelType',
+    'variant',
+    'workspaceType',
+  ],
+  data() {
+    return {
+      selectedLabels: this.initialLabels || [],
+    };
+  },
+  methods: {
+    handleUpdateSelectedLabels({ labels }) {
+      this.selectedLabels = labels.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id) }));
+    },
+    handleLabelRemove(labelId) {
+      this.selectedLabels = this.selectedLabels.filter((label) => label.id !== labelId);
+    },
+  },
+  i18n: {
+    fieldLabel: __('Labels'),
+    dropdownButtonText: __('Select label'),
+    listTitle: __('Select label'),
+    createTitle: __('Create project label'),
+    manageTitle: __('Manage project labels'),
+    emptySelection: __('None'),
+  },
+};
+</script>
+
+<template>
+  <gl-form-group class="row" label-class="gl-display-none">
+    <label class="col-12 gl-display-flex gl-align-center gl-mb-1">
+      {{ $options.i18n.fieldLabel }}
+      <div class="gl-ml-3">
+        <gl-icon name="labels" />
+        <span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span>
+      </div>
+    </label>
+    <div class="col-12">
+      <div class="issuable-form-select-holder">
+        <input
+          v-for="selectedLabel in selectedLabels"
+          :key="selectedLabel.id"
+          :value="selectedLabel.id"
+          :name="fieldName"
+          type="hidden"
+        />
+        <labels-select
+          class="block labels"
+          :allow-label-remove="allowLabelRemove"
+          :allow-multiselect="true"
+          :show-embedded-labels-list="true"
+          :full-path="fullPath"
+          :attr-workspace-path="attrWorkspacePath"
+          :labels-filter-base-path="labelsFilterBasePath"
+          :dropdown-button-text="$options.i18n.dropdownButtonText"
+          :labels-list-title="$options.i18n.listTitle"
+          :footer-create-label-title="$options.i18n.createTitle"
+          :footer-manage-label-title="$options.i18n.manageTitle"
+          :variant="variant"
+          :workspace-type="workspaceType"
+          :issuable-type="issuableType"
+          :label-create-type="labelType"
+          :selected-labels="selectedLabels"
+          @updateSelectedLabels="handleUpdateSelectedLabels"
+          @onLabelRemove="handleLabelRemove"
+        >
+          {{ $options.i18n.emptySelection }}
+        </labels-select>
+      </div>
+    </div>
+  </gl-form-group>
+</template>