E2E to open Web IDE from Diff Tab

Verify it opens ALL files of a multiple file MR
and changes made in Web IDE are reflected in the MR
See https://gitlab.com/gitlab-org/quality/testcases/-/issues/997

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -213,6 +213,8 @@ export default {
     ref="header"
     :class="{ 'gl-z-dropdown-menu!': moreActionsShown }"
     class="js-file-title file-title file-title-flex-parent"
+    data-qa-selector="file_title_container"
+    :data-qa-file-name="filePath"
     @click.self="handleToggleFile"
   >
     <div class="file-header-content">
@@ -307,6 +309,7 @@ export default {
           right
           toggle-class="btn-icon js-diff-more-actions"
           class="gl-pt-0!"
+          data-qa-selector="dropdown_button"
           @show="setMoreActionsShown(true)"
           @hidden="setMoreActionsShown(false)"
         >
@@ -340,6 +343,7 @@ export default {
               ref="ideEditButton"
               :href="diffFile.ide_edit_path"
               class="js-ide-edit-blob"
+              data-qa-selector="edit_in_ide_button"
             >
               {{ __('Edit in Web IDE') }}
             </gl-dropdown-item>

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -108,6 +108,7 @@ export default {
             class="d-flex"
             icon="remove"
             icon-classes="mr-2"
+            data-qa-selector="delete_button"
             @click="deleteEntry(path)"
           />
         </li>

app/assets/javascripts/vue_shared/components/file_row.vue

@@ -147,6 +147,7 @@ export default {
         :style="levelIndentation"
         class="file-row-name"
         data-qa-selector="file_name_content"
+        :data-qa-file-name="file.name"
         data-testid="file-row-name-container"
         :class="[fileClasses, { 'str-truncated': !truncateMiddle, 'gl-min-w-0': truncateMiddle }]"
       >

qa/qa/page/merge_request/show.rb

@@ -58,6 +58,9 @@ module QA
 
         view 'app/assets/javascripts/diffs/components/diff_file_header.vue' do
           element :file_name_content
+          element :file_title_container
+          element :dropdown_button
+          element :edit_in_ide_button
         end
 
         view 'app/assets/javascripts/diffs/components/inline_diff_table_row.vue' do
@@ -296,6 +299,13 @@ module QA
           click_element(:open_in_web_ide_button)
           wait_for_requests
         end
+
+        def edit_file_in_web_ide(file_name)
+          within_element(:file_title_container, file_name: file_name) do
+            click_element(:dropdown_button)
+            click_element(:edit_in_ide_button)
+          end
+        end
       end
     end
   end

qa/qa/page/project/web_ide/edit.rb

@@ -63,6 +63,7 @@ module QA
           view 'app/assets/javascripts/ide/components/new_dropdown/index.vue' do
             element :dropdown_button
             element :rename_move_button
+            element :delete_button
           end
 
           view 'app/views/shared/_confirm_fork_modal.html.haml' do
@@ -128,6 +129,13 @@ module QA
             end
           end
 
+          def has_file_content?(file_name, file_content)
+            click_element(:file_row_container, file_name: file_name)
+            within_element(:editor_container) do
+              has_text?(file_content)
+            end
+          end
+
           def go_to_project
             click_element(:project_path_content, Page::Project::Show)
           end
@@ -236,7 +244,7 @@ module QA
           end
 
           def rename_file(file_name, new_file_name)
-            click_element(:file_name_content, text: file_name)
+            click_element(:file_name_content, file_name: file_name)
             click_element(:dropdown_button)
             click_element(:rename_move_button, Page::Component::WebIDE::Modal::CreateNewFile)
             fill_element(:file_name_field, new_file_name)
@@ -259,6 +267,12 @@ module QA
               find_element(:file_upload_field, visible: false).send_keys(file_path)
             end
           end
+
+          def delete_file(file_name)
+            click_element(:file_name_content, file_name: file_name)
+            click_element(:dropdown_button)
+            click_element(:delete_button)
+          end
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/web_ide/open_web_ide_from_diff_tab_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    describe 'Open Web IDE from Diff Tab' do
+      files = [
+          {
+              file_path: 'file1',
+              content: 'test1'
+          },
+          {
+              file_path: 'file2',
+              content: 'test2'
+          },
+          {
+              file_path: 'file3',
+              content: 'test3'
+          }
+      ]
+
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.initialize_with_readme = true
+        end
+      end
+
+      let(:source) do
+        Resource::Repository::Commit.fabricate_via_api! do |commit|
+          commit.project = project
+          commit.branch = 'new-mr'
+          commit.start_branch = project.default_branch
+          commit.commit_message = 'Add new files'
+          commit.add_files(files)
+        end
+      end
+
+      let(:merge_request) do
+        Resource::MergeRequest.fabricate_via_api! do |mr|
+          mr.source = source
+          mr.project = project
+          mr.source_branch = 'new-mr'
+          mr.target_new_branch = false
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+
+        merge_request.visit!
+      end
+
+      it 'opens and edits a multi-file merge request in Web IDE from Diff Tab', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/997' do
+        Page::MergeRequest::Show.perform do |show|
+          show.click_diffs_tab
+          show.edit_file_in_web_ide('file1')
+        end
+
+        Page::Project::WebIDE::Edit.perform do |ide|
+          files.each do |files|
+            expect(ide).to have_file(files[:file_path])
+            expect(ide).to have_file_content(files[:file_path], files[:content])
+          end
+
+          ide.delete_file('file1')
+          ide.commit_changes
+        end
+
+        merge_request.visit!
+
+        Page::MergeRequest::Show.perform do |show|
+          show.click_diffs_tab
+
+          expect(show).not_to have_file('file1')
+          expect(show).to have_file('file2')
+          expect(show).to have_file('file3')
+        end
+      end
+    end
+  end
+end