From 699bb48edac9e8536ab5eb1ecdf6cfb0ce11d379 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 10 Oct 2022 06:08:48 +0000
Subject: [PATCH] Add latest changes from gitlab-org/gitlab@master

---
 .../show/components/fields/description.vue    | 24 +++++++-
 app/assets/javascripts/issues/show/index.js   |  1 +
 .../components/markdown/markdown_editor.vue   | 13 +++-
 app/controllers/projects/issues_controller.rb |  2 +
 .../development/content_editor_on_issues.yml  |  8 +++
 .../components/fields/description_spec.js     | 59 ++++++++++++++++++-
 .../markdown/markdown_editor_spec.js          |  5 +-
 7 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 config/feature_flags/development/content_editor_on_issues.yml

diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index 21bf11f7b93..dbe634e7295 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/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"
diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index e5eed9f6b79..3cb5007ab0d 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/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, {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
index 64cc95cc287..b38772d5aa5 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/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"
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index ac42f58047e..65c23d52271 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/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
diff --git a/config/feature_flags/development/content_editor_on_issues.yml b/config/feature_flags/development/content_editor_on_issues.yml
new file mode 100644
index 00000000000..4527ea3b807
--- /dev/null
+++ b/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
diff --git a/spec/frontend/issues/show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js
index 61433607a2b..cd4d422583b 100644
--- a/spec/frontend/issues/show/components/fields/description_spec.js
+++ b/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]]);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
index f2a7d04e229..f7e93f45148 100644
--- a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
+++ b/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,