Merge branch '407493-ce-requirements' into 'master'

Add rich text editor in requirements

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



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

app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue

 <script>
 import { GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
-
+import { __ } from '~/locale';
 import Autosave from '~/autosave';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import markdownEditorEventHub from '~/vue_shared/components/markdown/eventhub';
+import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '~/vue_shared/constants';
 import ZenMode from '~/zen_mode';
-
 import eventHub from '../event_hub';
 
 export default {
@@ -12,7 +13,7 @@ export default {
     GlForm,
     GlFormGroup,
     GlFormInput,
-    MarkdownField,
+    MarkdownEditor,
   },
   props: {
     issuable: {
@@ -48,8 +49,22 @@ export default {
     return {
       title: '',
       description: '',
+      formFieldProps: {
+        id: 'issuable-description',
+        name: 'issuable-description',
+        'aria-label': __('Description'),
+        placeholder: __('Write a comment or drag your files here…'),
+        class: 'note-textarea js-gfm-input js-autosize markdown-area',
+      },
     };
   },
+  computed: {
+    descriptionAutosaveKey() {
+      if (this.enableAutosave)
+        return [document.location.pathname, document.location.search, 'description'].join('/');
+      return '';
+    },
+  },
   watch: {
     issuable: {
       handler(value) {
@@ -76,25 +91,20 @@ export default {
   },
   methods: {
     initAutosave() {
-      const { titleInput, descriptionInput } = this.$refs;
+      const { titleInput } = this.$refs;
 
-      if (!titleInput || !descriptionInput) return;
+      if (!titleInput) return;
 
       this.autosaveTitle = new Autosave(titleInput.$el, [
         document.location.pathname,
         document.location.search,
         'title',
       ]);
-
-      this.autosaveDescription = new Autosave(descriptionInput, [
-        document.location.pathname,
-        document.location.search,
-        'description',
-      ]);
     },
     resetAutosave() {
       this.autosaveTitle.reset();
-      this.autosaveDescription.reset();
+
+      markdownEditorEventHub.$emit(CLEAR_AUTOSAVE_ENTRY_EVENT, this.descriptionAutosaveKey);
     },
     handleKeydown(e, inputType) {
       this.$emit(`keydown-${inputType}`, e, {
@@ -132,26 +142,15 @@ export default {
       label-for="issuable-description"
       class="col-12 gl-px-0 common-note-form"
     >
-      <markdown-field
-        :markdown-preview-path="descriptionPreviewPath"
+      <markdown-editor
+        v-model="description"
+        :render-markdown-path="descriptionPreviewPath"
         :markdown-docs-path="descriptionHelpPath"
         :enable-autocomplete="enableAutocomplete"
-        :textarea-value="description"
-      >
-        <template #textarea>
-          <textarea
-            id="issuable-description"
-            ref="descriptionInput"
-            v-model="description"
-            :data-supports-quick-actions="enableAutocomplete"
-            :aria-label="__('Description')"
-            :placeholder="__('Write a comment or drag your files here…')"
-            class="note-textarea js-gfm-input js-autosize markdown-area"
-            dir="auto"
-            @keydown="handleKeydown($event, 'description')"
-          ></textarea>
-        </template>
-      </markdown-field>
+        :supports-quick-actions="enableAutocomplete"
+        :form-field-props="formFieldProps"
+        @keydown="handleKeydown($event, 'description')"
+      />
     </gl-form-group>
     <div
       data-testid="actions"

spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js

 import { GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-
 import { nextTick } from 'vue';
 import IssuableEditForm from '~/vue_shared/issuable/show/components/issuable_edit_form.vue';
 import IssuableEventHub from '~/vue_shared/issuable/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import MarkdownToolbar from '~/vue_shared/components/markdown/toolbar.vue';
+import EditorModeSwitcher from '~/vue_shared/components/markdown/editor_mode_switcher.vue';
+import markdownEditorEventHub from '~/vue_shared/components/markdown/eventhub';
+import { CLEAR_AUTOSAVE_ENTRY_EVENT } from '~/vue_shared/constants';
 import Autosave from '~/autosave';
 
 import { mockIssuableShowProps, mockIssuable } from '../mock_data';
@@ -20,7 +24,10 @@ const createComponent = ({ propsData = issuableEditFormProps } = {}) =>
   shallowMount(IssuableEditForm, {
     propsData,
     stubs: {
+      MarkdownEditor,
       MarkdownField,
+      MarkdownToolbar,
+      EditorModeSwitcher,
     },
     slots: {
       'edit-form-actions': `
@@ -109,17 +116,18 @@ describe('IssuableEditForm', () => {
   describe('methods', () => {
     describe('initAutosave', () => {
       it('initializes autosave', () => {
-        expect(Autosave.mock.calls).toEqual([
-          [expect.any(Element), ['/', '', 'title']],
-          [expect.any(Element), ['/', '', 'description']],
-        ]);
+        expect(Autosave.mock.calls).toEqual([[expect.any(Element), ['/', '', 'title']]]);
       });
     });
 
     describe('resetAutosave', () => {
-      it('resets title and description on "update.issuable event"', () => {
+      it('resets title on "update.issuable event"', () => {
+        const clearDescriptionAutosaveSpy = jest.fn();
+        markdownEditorEventHub.$on(CLEAR_AUTOSAVE_ENTRY_EVENT, clearDescriptionAutosaveSpy);
+
         IssuableEventHub.$emit('update.issuable');
-        expect(Autosave.prototype.reset.mock.calls).toEqual([[], []]);
+        expect(Autosave.prototype.reset).toHaveBeenCalled();
+        expect(clearDescriptionAutosaveSpy).toHaveBeenCalled();
       });
     });
   });
@@ -152,6 +160,12 @@ describe('IssuableEditForm', () => {
       });
     });
 
+    it('allows switching to rich text editor', () => {
+      const descriptionEl = wrapper.find('[data-testid="description"]');
+
+      expect(descriptionEl.text()).toContain('Switch to rich text editing');
+    });
+
     it('renders form actions', () => {
       const actionsEl = wrapper.find('[data-testid="actions"]');