Update e2e editor for rich text

app/assets/javascripts/content_editor/components/wrappers/code_block.vue

@@ -278,6 +278,7 @@ export default {
         ref="nodeViewContent"
         as="code"
         class="gl-relative gl-z-1 !gl-break-words"
+        data-testid="suggestion-field"
       />
     </node-view-wrapper>
   </editor-state-observer>

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

@@ -394,17 +394,13 @@ export default {
         :editable="!disabled"
         :disable-attachments="disableAttachments"
         :code-suggestions-config="codeSuggestionsConfig"
+        :data-testid="formFieldProps['data-testid'] || 'markdown-editor-form-field'"
         @initialized="setEditorAsAutofocused"
         @change="updateMarkdownFromContentEditor"
         @keydown="onKeydown"
         @enableMarkdownEditor="onEditingModeChange('markdownField')"
       />
-      <input
-        v-bind="formFieldProps"
-        :value="markdown"
-        data-testid="markdown-editor-form-field"
-        type="hidden"
-      />
+      <input v-bind="formFieldProps" :value="markdown" type="hidden" />
     </div>
   </div>
 </template>

qa/qa/ee/page/group/iteration/cadence/new.rb

@@ -26,7 +26,7 @@ def click_create_iteration_cadence_button
               end
               def fill_description(description)
-                fill_element('iteration-cadence-description-field', description)
+                fill_editor_element('iteration-cadence-description-field', description)
               end
               def fill_duration(duration)

qa/qa/ee/page/group/iteration/new.rb

@@ -19,7 +19,7 @@ def click_create_iteration_button
             end
             def fill_description(description)
-              fill_element('iteration-description-field', description)
+              fill_editor_element('iteration-description-field', description)
             end
             def fill_due_date(due_date)

qa/qa/page/base.rb

@@ -276,6 +276,21 @@ def fill_element(name, content)
         find_element(name).set(content)
       end
+      # fill in editor element, whether plain text or rich text
+      def fill_editor_element(name, content)
+        element = find_element name
+
+        if element.tag_name == 'textarea'
+          element.set content
+        else
+          mod = page.driver.browser.capabilities.platform_name.include?("mac") ? :command : :control
+          prosemirror = element.find '[contenteditable].ProseMirror'
+          prosemirror.send_keys [mod, 'a']
+          prosemirror.send_keys :delete
+          prosemirror.send_keys content
+        end
+      end
+
       def select_element(name, value)
         element = find_element(name)

qa/qa/page/component/design_management.rb

@@ -47,7 +47,8 @@ def self.included(base)
         def add_annotation(note)
           click_element('design-image-button')
-          fill_element('note-textarea', note)
+          fill_editor_element('note-textarea', note)
+          has_active_element?('save-comment-button', wait: 0.5)
           click_element('save-comment-button')
           # It takes a moment for the annotation to be saved.

qa/qa/page/component/dropzone.rb

@@ -17,14 +17,24 @@ def initialize(page, container)
         # instantiated on one page because there is no distinguishing
         # attribute per dropzone file field.
         def attach_file(attachment)
-          filename = ::File.basename(attachment)
-          field_style = { visibility: 'visible', height: '', width: '' }
-          page.attach_file(attachment, class: 'dz-hidden-input', make_visible: field_style)
-          # Wait for link to be appended to dropzone text
-          page.wait_until(reload: false) do
-            page.find("#{container} textarea").value.match(filename)
+          if QA::Page::Base.perform { |d| d.has_element?('content-editor', wait: 0.5) } # Rich text editor
+            filename = attachment.match(%r{([^/]+$)})[1]
+            page.find('[data-testid="file-upload-field"]', visible: 'false').set attachment
+            # Wait for link to be appended to dropzone text
+            page.wait_until(reload: false) do
+              page.find("#{container} img")['alt'].match?(filename)
+            end
+          else # Plain text editor
+            filename = ::File.basename(attachment)
+            field_style = { visibility: 'visible', height: '', width: '' }
+            page.attach_file(attachment, class: 'dz-hidden-input', make_visible: field_style)
+
+            # Wait for link to be appended to dropzone text
+            page.wait_until(reload: false) do
+              page.find("#{container} textarea").value.match(filename)
+            end
           end
         end
       end

qa/qa/page/component/note.rb

@@ -73,19 +73,21 @@ def collapse_replies
         # Attachment option should be an absolute path
         def comment(text, attachment: nil, filter: :all_activities)
           method("select_#{filter}_filter").call
-          fill_element 'comment-field', "#{text}\n"
+          fill_editor_element 'comment-field', "#{text}\n"
           unless attachment.nil?
             QA::Page::Component::Dropzone.new(self, '.new-note')
               .attach_file(attachment)
           end
+          has_active_element?('comment-button', wait: 0.5)
           click_element 'comment-button'
         end
         def edit_comment(text)
           click_element 'note-edit-button'
-          fill_element 'reply-field', text
+          fill_editor_element 'reply-field', text
+          has_active_element?('reply-comment-button', wait: 0.5)
           click_element 'reply-comment-button'
         end
@@ -111,6 +113,7 @@ def noteable_note_item
         def reply_to_discussion(position, reply_text)
           type_reply_to_discussion(position, reply_text)
+          has_active_element?('reply-comment-button', wait: 0.5)
           click_element 'reply-comment-button'
         end
@@ -145,7 +148,7 @@ def select_history_only_filter
         end
         def start_discussion(text)
-          fill_element 'comment-field', text
+          fill_editor_element 'comment-field', text
           within_element('comment-button') { click_button(class: 'gl-new-dropdown-toggle') }
           click_element 'discussion-menu-item'
           click_element 'comment-button'
@@ -159,7 +162,7 @@ def toggle_comments(position)
         def type_reply_to_discussion(position, reply_text)
           all_elements('discussion-reply-tab', minimum: position)[position - 1].click
-          fill_element 'reply-field', reply_text
+          fill_editor_element 'reply-field', reply_text
         end
         private

qa/qa/page/component/wiki_page_form.rb

@@ -42,7 +42,7 @@ def set_title(title)
         end
         def set_content(content)
-          fill_element('markdown-editor-form-field', content)
+          fill_editor_element('markdown-editor-form-field', content)
         end
         def set_message(message)
@@ -67,6 +67,8 @@ def delete_page
         end
         def use_new_editor
+          return if has_element?('content-editor')
+
           click_element('editing-mode-switcher')
           wait_until(reload: false) do

qa/qa/page/group/milestone/new.rb

@@ -16,7 +16,7 @@ def click_create_milestone_button
           end
           def set_description(description)
-            fill_element('milestone-description-field', description)
+            fill_editor_element('milestone-description-field', description)
           end
           def set_title(title)

qa/qa/page/issuable/new.rb

@@ -37,7 +37,7 @@ def fill_title(title)
         end
         def fill_description(description)
-          fill_element('issuable-form-description-field', description)
+          fill_editor_element('issuable-form-description-field', description)
         end
         def choose_milestone(milestone)

qa/qa/page/merge_request/show.rb

@@ -103,6 +103,10 @@ class Show < Page::Base
           element 'artifacts-dropdown'
         end
+        view 'app/assets/javascripts/content_editor/components/formatting_toolbar.vue' do
+          element 'code-suggestion'
+        end
+
         view 'app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue' do
           element 'apply-suggestion-dropdown'
           element 'commit-message-field'
@@ -149,6 +153,7 @@ class Show < Page::Base
         end
         def start_review
+          has_active_element?('start-review-button', wait: 0.5)
           click_element('start-review-button')
           # After clicking the button, wait for it to disappear
@@ -198,7 +203,7 @@ def add_comment_to_diff(text)
           click_element('dismiss-suggestion-popover-button') if has_element?('dismiss-suggestion-popover-button',
             wait: 1)
-          fill_element('reply-field', text)
+          fill_editor_element('reply-field', text)
         end
         def click_discussions_tab
@@ -445,10 +450,20 @@ def edit_file_in_web_ide(file_name)
         def add_suggestion_to_diff(suggestion, line)
           find("a[data-linenumber='#{line}']").hover
           click_element('left-comment-button')
-          click_element('suggestion-button')
-          initial_content = find_element('reply-field').value
-          fill_element('reply-field', '')
-          fill_element('reply-field', initial_content.gsub(/(```suggestion:-0\+0\n).*(\n```)/, "\\1#{suggestion}\\2"))
+
+          if has_element?('suggestion-button', wait: 0.5)
+            click_element('suggestion-button')
+            initial_content = find_element('reply-field').value
+            fill_editor_element('reply-field', '')
+            fill_editor_element('reply-field',
+              initial_content.gsub(/(```suggestion:-0\+0\n).*(\n```)/, "\\1#{suggestion}\\2"))
+          else
+            click_element('code-suggestion')
+            suggestion_field = find_element('suggestion-field')
+            suggestion_field.set(suggestion)
+            has_active_element?('comment-now-button', wait: 0.5)
+          end
+
           click_element('comment-now-button')
           wait_for_requests
         end

qa/qa/page/project/milestone/new.rb

@@ -20,7 +20,7 @@ def set_title(title)
           end
           def set_description(description)
-            fill_element('milestone-description-field', description)
+            fill_editor_element('milestone-description-field', description)
           end
         end
       end