1 files changed, 92 insertions, 0 deletions
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>