Merge branch '410081-autocomplete-descriptions' into 'master'

Fix autocomplete suggestions in issue descriptions

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/124771



Merged-by: Kushal Pandya <kushal@gitlab.com>
Approved-by: Kushal Pandya <kushal@gitlab.com>
Reviewed-by: Himanshu Kapoor <info@fleon.org>
Co-authored-by: Himanshu Kapoor <hkapoor@gitlab.com>

app/assets/javascripts/issues/show/components/fields/description.vue

 <script>
 import { __ } from '~/locale';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import glFeaturesFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import updateMixin from '../../mixins/update';
 
 export default {
   components: {
-    MarkdownField,
     MarkdownEditor,
   },
   mixins: [updateMixin, glFeaturesFlagMixin()],
@@ -45,6 +43,11 @@ export default {
       },
     };
   },
+  computed: {
+    autocompleteDataSources() {
+      return gl.GfmAutoComplete?.dataSources;
+    },
+  },
   mounted() {
     this.focus();
   },
@@ -60,44 +63,20 @@ export default {
   <div class="common-note-form">
     <label class="sr-only" for="issue-description">{{ __('Description') }}</label>
     <markdown-editor
-      v-if="glFeatures.contentEditorOnIssues"
+      :enable-content-editor="Boolean(glFeatures.contentEditorOnIssues)"
       class="gl-mt-3"
       :value="value"
       :render-markdown-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
       :form-field-props="formFieldProps"
       :enable-autocomplete="enableAutocomplete"
+      :autocomplete-data-sources="autocompleteDataSources"
       supports-quick-actions
       autofocus
+      data-qa-selector="description_field"
       @input="$emit('input', $event)"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable"
     />
-    <markdown-field
-      v-else
-      class="gl-mt-3"
-      :markdown-preview-path="markdownPreviewPath"
-      :markdown-docs-path="markdownDocsPath"
-      supports-quick-actions
-      :can-attach-file="canAttachFile"
-      :enable-autocomplete="enableAutocomplete"
-      :textarea-value="value"
-    >
-      <template #textarea>
-        <textarea
-          v-bind="formFieldProps"
-          ref="textarea"
-          :value="value"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
-          data-qa-selector="description_field"
-          dir="auto"
-          data-supports-quick-actions="true"
-          @input="$emit('input', $event.target.value)"
-          @keydown.meta.enter="updateIssuable"
-          @keydown.ctrl.enter="updateIssuable"
-        >
-        </textarea>
-      </template>
-    </markdown-field>
   </div>
 </template>

spec/frontend/issues/show/components/fields/description_spec.js

@@ -7,11 +7,9 @@ import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue
 describe('Description field component', () => {
   let wrapper;
 
-  const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
   const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
-
-  const mountComponent = ({ description = 'test', contentEditorOnIssues = false } = {}) =>
-    shallowMount(DescriptionField, {
+  const mountComponent = ({ description = 'test', contentEditorOnIssues = false } = {}) => {
+    wrapper = shallowMount(DescriptionField, {
       attachTo: document.body,
       propsData: {
         markdownPreviewPath: '/',
@@ -27,89 +25,58 @@ describe('Description field component', () => {
         MarkdownField,
       },
     });
+  };
 
   beforeEach(() => {
     jest.spyOn(eventHub, '$emit');
-  });
-
-  it('renders markdown field with description', () => {
-    wrapper = mountComponent();
 
-    expect(findTextarea().element.value).toBe('test');
+    mountComponent({ contentEditorOnIssues: true });
   });
 
-  it('renders markdown field with a markdown description', () => {
-    const markdown = '**test**';
+  it('passes feature flag to the MarkdownEditorComponent', () => {
+    expect(findMarkdownEditor().props('enableContentEditor')).toBe(true);
 
-    wrapper = mountComponent({ description: markdown });
+    mountComponent({ contentEditorOnIssues: false });
 
-    expect(findTextarea().element.value).toBe(markdown);
+    expect(findMarkdownEditor().props('enableContentEditor')).toBe(false);
   });
 
-  it('focuses field when mounted', () => {
-    wrapper = mountComponent();
-
-    expect(document.activeElement).toBe(findTextarea().element);
+  it('uses the MarkdownEditor component to edit markdown', () => {
+    expect(findMarkdownEditor().props()).toMatchObject({
+      value: 'test',
+      renderMarkdownPath: '/',
+      autofocus: true,
+      supportsQuickActions: true,
+      markdownDocsPath: '/',
+      enableAutocomplete: true,
+    });
   });
 
   it('triggers update with meta+enter', () => {
-    wrapper = mountComponent();
-
-    findTextarea().trigger('keydown.enter', { metaKey: true });
+    findMarkdownEditor().vm.$emit('keydown', {
+      type: 'keydown',
+      keyCode: 13,
+      metaKey: true,
+    });
 
     expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 
   it('triggers update with ctrl+enter', () => {
-    wrapper = mountComponent();
-
-    findTextarea().trigger('keydown.enter', { ctrlKey: true });
+    findMarkdownEditor().vm.$emit('keydown', {
+      type: 'keydown',
+      keyCode: 13,
+      ctrlKey: true,
+    });
 
     expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 
-  describe('when contentEditorOnIssues feature flag is on', () => {
-    beforeEach(() => {
-      wrapper = mountComponent({ contentEditorOnIssues: true });
-    });
+  it('emits input event when MarkdownEditor emits input event', () => {
+    const markdown = 'markdown';
 
-    it('uses the MarkdownEditor component to edit markdown', () => {
-      expect(findMarkdownEditor().props()).toMatchObject({
-        value: 'test',
-        renderMarkdownPath: '/',
-        autofocus: true,
-        supportsQuickActions: true,
-        markdownDocsPath: '/',
-        enableAutocomplete: true,
-      });
-    });
-
-    it('triggers update with meta+enter', () => {
-      findMarkdownEditor().vm.$emit('keydown', {
-        type: 'keydown',
-        keyCode: 13,
-        metaKey: true,
-      });
-
-      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
-    });
-
-    it('triggers update with ctrl+enter', () => {
-      findMarkdownEditor().vm.$emit('keydown', {
-        type: 'keydown',
-        keyCode: 13,
-        ctrlKey: true,
-      });
+    findMarkdownEditor().vm.$emit('input', markdown);
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
-    });
-
-    it('emits input event when MarkdownEditor emits input event', () => {
-      const markdown = 'markdown';
-
-      findMarkdownEditor().vm.$emit('input', markdown);
-
-      expect(wrapper.emitted('input')).toEqual([[markdown]]);
-    });
+    expect(wrapper.emitted('input')).toEqual([[markdown]]);
   });
 });