Add latest changes from gitlab-org/gitlab@master

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

@@ -1,13 +1,16 @@
 <script>
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
+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],
+  mixins: [updateMixin, glFeaturesFlagMixin()],
   props: {
     value: {
       type: String,
@@ -51,7 +54,26 @@ export default {
 <template>
   <div class="common-note-form">
     <label class="sr-only" for="issue-description">{{ __('Description') }}</label>
+    <markdown-editor
+      v-if="glFeatures.contentEditorOnIssues"
+      class="gl-mt-3"
+      :value="value"
+      :render-markdown-path="markdownPreviewPath"
+      :markdown-docs-path="markdownDocsPath"
+      :form-field-aria-label="__('Description')"
+      :form-field-placeholder="__('Write a comment or drag your files here…')"
+      form-field-id="issue-description"
+      form-field-name="issue-description"
+      :quick-actions-docs-path="quickActionsDocsPath"
+      :enable-autocomplete="enableAutocomplete"
+      supports-quick-actions
+      init-on-autofocus
+      @input="$emit('input', $event)"
+      @keydown.meta.enter="updateIssuable"
+      @keydown.ctrl.enter="updateIssuable"
+    />
     <markdown-field
+      v-else
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
       :quick-actions-docs-path="quickActionsDocsPath"

app/assets/javascripts/issues/show/index.js

@@ -60,6 +60,7 @@ export function initIncidentApp(issueData = {}) {
       projectId,
       slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
       uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable),
+      contentEditorOnIssues: gon.features.contentEditorOnIssues,
     },
     render(createElement) {
       return createElement(IssueApp, {

app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue

@@ -29,6 +29,11 @@ export default {
       type: String,
       required: true,
     },
+    quickActionsDocsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     uploadsPath: {
       type: String,
       required: false,
@@ -72,6 +77,11 @@ export default {
       required: false,
       default: false,
     },
+    supportsQuickActions: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -159,6 +169,7 @@ export default {
       :enable-autocomplete="enableAutocomplete"
       :textarea-value="value"
       :markdown-docs-path="markdownDocsPath"
+      :quick-actions-docs-path="quickActionsDocsPath"
       :uploads-path="uploadsPath"
       :enable-preview="enablePreview"
       class="bordered-box"
@@ -171,7 +182,7 @@ export default {
           :name="formFieldName"
           class="note-textarea js-gfm-input js-autosize markdown-area"
           dir="auto"
-          data-supports-quick-actions="false"
+          :data-supports-quick-actions="supportsQuickActions"
           data-qa-selector="markdown_editor_form_field"
           :aria-label="formFieldAriaLabel"
           :placeholder="formFieldPlaceholder"

app/controllers/projects/issues_controller.rb

@@ -42,6 +42,8 @@ class Projects::IssuesController < Projects::ApplicationController
 
   before_action do
     push_frontend_feature_flag(:incident_timeline, project)
+    push_frontend_feature_flag(:preserve_unchanged_markdown, project)
+    push_frontend_feature_flag(:content_editor_on_issues, project)
   end
 
   before_action only: [:index, :show] do

config/feature_flags/development/content_editor_on_issues.yml

@@ -0,0 +1,8 @@
+---
+name: content_editor_on_issues
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/98703
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/375172
+milestone: '15.5'
+type: development
+group: group::editor
+default_enabled: false

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

@@ -2,13 +2,15 @@ import { shallowMount } from '@vue/test-utils';
 import DescriptionField from '~/issues/show/components/fields/description.vue';
 import eventHub from '~/issues/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+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') =>
+  const mountComponent = ({ description = 'test', contentEditorOnIssues = false } = {}) =>
     shallowMount(DescriptionField, {
       attachTo: document.body,
       propsData: {
@@ -17,6 +19,11 @@ describe('Description field component', () => {
         quickActionsDocsPath: '/',
         value: description,
       },
+      provide: {
+        glFeatures: {
+          contentEditorOnIssues,
+        },
+      },
       stubs: {
         MarkdownField,
       },
@@ -40,7 +47,7 @@ describe('Description field component', () => {
   it('renders markdown field with a markdown description', () => {
     const markdown = '**test**';
 
-    wrapper = mountComponent(markdown);
+    wrapper = mountComponent({ description: markdown });
 
     expect(findTextarea().element.value).toBe(markdown);
   });
@@ -66,4 +73,52 @@ describe('Description field component', () => {
 
     expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
+
+  describe('when contentEditorOnIssues feature flag is on', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ contentEditorOnIssues: true });
+    });
+
+    it('uses the MarkdownEditor component to edit markdown', () => {
+      expect(findMarkdownEditor().props()).toEqual(
+        expect.objectContaining({
+          value: 'test',
+          renderMarkdownPath: '/',
+          markdownDocsPath: '/',
+          quickActionsDocsPath: expect.any(String),
+          initOnAutofocus: true,
+          supportsQuickActions: true,
+          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,
+      });
+
+      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]]);
+    });
+  });
 });

spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js

@@ -18,6 +18,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   const value = 'test markdown';
   const renderMarkdownPath = '/api/markdown';
   const markdownDocsPath = '/help/markdown';
+  const quickActionsDocsPath = '/help/quickactions';
   const enableAutocomplete = true;
   const enablePreview = false;
   const formFieldId = 'markdown_field';
@@ -33,6 +34,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
         value,
         renderMarkdownPath,
         markdownDocsPath,
+        quickActionsDocsPath,
         enableAutocomplete,
         enablePreview,
         formFieldId,
@@ -63,11 +65,12 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   });
 
   it('displays markdown field by default', () => {
-    buildWrapper();
+    buildWrapper({ propsData: { supportsQuickActions: true } });
 
     expect(findMarkdownField().props()).toEqual(
       expect.objectContaining({
         markdownPreviewPath: renderMarkdownPath,
+        quickActionsDocsPath,
         canAttachFile: true,
         enableAutocomplete,
         textareaValue: value,