1 files changed, 94 insertions, 0 deletions

diff --git a/app/assets/javascripts/issues/new/components/title_suggestions.vue b/app/assets/javascripts/issues/new/components/title_suggestions.vue
new file mode 100644
index 00000000000..0a9cdb12519
--- /dev/null
+++ b/app/assets/javascripts/issues/new/components/title_suggestions.vue
@@ -0,0 +1,94 @@
+<script>
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import query from '../queries/issues.query.graphql';
+import TitleSuggestionsItem from './title_suggestions_item.vue';
+
+export default {
+  components: {
+    GlIcon,
+    TitleSuggestionsItem,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    search: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    issues: {
+      query,
+      debounce: 1000,
+      skip() {
+        return this.isSearchEmpty;
+      },
+      update: (data) => data.project.issues.edges.map(({ node }) => node),
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          search: this.search,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      issues: [],
+      loading: 0,
+    };
+  },
+  computed: {
+    isSearchEmpty() {
+      return !this.search.length;
+    },
+    showSuggestions() {
+      return !this.isSearchEmpty && this.issues.length && !this.loading;
+    },
+  },
+  watch: {
+    search() {
+      if (this.isSearchEmpty) {
+        this.issues = [];
+      }
+    },
+  },
+  helpText: __(
+    'These existing issues have a similar title. It might be better to comment there instead of creating another similar issue.',
+  ),
+};
+</script>
+
+<template>
+  <div v-show="showSuggestions" class="form-group row">
+    <div v-once class="col-form-label col-sm-2 pt-0">
+      {{ __('Similar issues') }}
+      <gl-icon
+        v-gl-tooltip.bottom
+        :title="$options.helpText"
+        :aria-label="$options.helpText"
+        name="question-o"
+        class="text-secondary gl-cursor-help"
+      />
+    </div>
+    <div class="col-sm-10">
+      <ul class="list-unstyled m-0">
+        <li
+          v-for="(suggestion, index) in issues"
+          :key="suggestion.id"
+          :class="{
+            'gl-mb-3': index !== issues.length - 1,
+          }"
+        >
+          <title-suggestions-item :suggestion="suggestion" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>