Add latest changes from gitlab-org/gitlab@master

3 files changed, 222 insertions, 36 deletions

diff --git a/qa/qa/page/project/web_ide/vscode.rb b/qa/qa/page/project/web_ide/vscode.rb
index 1a9fad56a10..6a570978dbe 100644
--- a/qa/qa/page/project/web_ide/vscode.rb
+++ b/qa/qa/page/project/web_ide/vscode.rb
@@ -1,64 +1,183 @@
 # frozen_string_literal: true
 
-# VSCode WebIDE is built off an iFrame application therefore we are uanble to use `qa-selectors`
+# VSCode WebIDE is built off an iFrame application therefore we are unable to use `qa-selectors`
 module QA
   module Page
     module Project
       module WebIDE
         class VSCode < Page::Base
-          # Use to Pass Test::Sanity::Selectors temporarily until iframe [data-qa-* selector added
           view 'app/views/shared/_broadcast_message.html.haml' do
             element :broadcast_notification_container
             element :close_button
           end
 
-          # Used for stablility, due to feature_caching of vscode_web_ide
-          def wait_for_ide_to_load
-            page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)
-            wait_for_requests
-            Support::Waiter.wait_until(max_duration: 60, reload_page: page, retry_on_exception: true) do
+          def has_file_explorer?
+            page.has_css?('.explorer-folders-view', visible: true)
+          end
+
+          def right_click_file_explorer
+            page.find('.explorer-folders-view', visible: true).right_click
+          end
+
+          def has_new_folder_menu_item?
+            page.has_css?('[aria-label="New Folder..."]', visible: true)
+          end
+
+          def click_new_folder_menu_item
+            page.find('[aria-label="New Folder..."]').click
+          end
+
+          def enter_new_folder_text_input(name)
+            page.find('.explorer-item-edited', visible: true)
+            send_keys(name, :enter)
+          end
+
+          def has_upload_menu_item?
+            page.has_css?('[aria-label="Upload..."]', visible: true)
+          end
+
+          def click_upload_menu_item
+            page.find('[aria-label="Upload..."]').click
+          end
+
+          def enter_file_input(file)
+            page.find('input[type="file"]', visible: false).send_keys(file)
+          end
+
+          def has_commit_pending_tab?
+            page.has_css?('.scm-viewlet-label', visible: true)
+          end
+
+          def click_commit_pending_tab
+            page.find('.scm-viewlet-label', visible: true).click
+          end
+
+          def click_commit_tab
+            page.find('a.codicon-source-control-view-icon', visible: true).click
+          end
+
+          def has_commit_message_box?
+            page.has_css?('div.view-lines.monaco-mouse-cursor-text', visible: true)
+          end
+
+          def enter_commit_message(message)
+            page.find('div.view-lines.monaco-mouse-cursor-text', visible: true).send_keys(message)
+          end
+
+          def click_commit_button
+            page.find('a.monaco-text-button', visible: true).click
+          end
+
+          def has_notification_box?
+            page.has_css?('a.monaco-text-button', visible: true)
+          end
+
+          def create_merge_request
+            Support::Waiter.wait_until(max_duration: 10, retry_on_exception: true) do
               within_vscode_editor do
-                # vscode file_explorer element
-                page.has_css?('.explorer-folders-view', visible: true)
+                page.find('.monaco-button[title="Create MR"]').click
               end
             end
           end
 
+          def click_new_branch
+            page.find('.monaco-button[title="Create new branch"]').click
+          end
+
+          def has_branch_input_field?
+            page.has_css?('.monaco-findInput', visible: true)
+          end
+
+          def has_message?(content)
+            within_vscode_editor do
+              page.has_content?(content)
+            end
+          end
+
           def within_vscode_editor(&block)
             iframe = find('#ide iframe')
             page.within_frame(iframe, &block)
           end
 
+          # Used for stablility, due to feature_caching of vscode_web_ide
+          def wait_for_ide_to_load
+            page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)
+            # On test environments we have a broadcast message that can cover the buttons
+            if has_element?(:broadcast_notification_container, wait: 5)
+              within_element(:broadcast_notification_container) do
+                click_element(:close_button)
+              end
+            end
+
+            wait_for_requests
+            Support::Waiter.wait_until(max_duration: 10, reload_page: page, retry_on_exception: true) do
+              within_vscode_editor do
+                # Check for webide file_explorer element
+                has_file_explorer?
+              end
+            end
+          end
+
           def create_new_folder(name)
             within_vscode_editor do
-              # Use for stability, WebIDE inside an iframe is finnicky
-              Support::Waiter.wait_until(max_duration: 60, retry_on_exception: true) do
-                page.find('.explorer-folders-view').right_click
-                # new_folder_button
-                page.has_css?('[aria-label="New Folder..."]', visible: true)
-              end
+              right_click_file_explorer
+              has_new_folder_menu_item?
 
-              # Additonal wait for stability, webdriver sometimes moves too fast
-              Support::Waiter.wait_until(max_duration: 60, retry_on_exception: true) do
-                page.find('[aria-label="New Folder..."]').click
+              # Use for stability, WebIDE inside an iframe is finnicky, webdriver sometimes moves too fast
+              Support::Waiter.wait_until(max_duration: 20, retry_on_exception: true) do
+                click_new_folder_menu_item
                 # Verify New Folder button is triggered and textbox is waiting for input
-                page.find('.explorer-item-edited', visible: true)
-                send_keys(name, :enter)
+                enter_new_folder_text_input(name)
                 page.has_content?(name)
               end
             end
           end
 
-          def commit_and_push(folder_name)
+          def commit_and_push(file_name)
+            commit_toggle(file_name)
+            push_to_new_branch
+          end
+
+          def commit_toggle(message)
             within_vscode_editor do
-              # Commit Tab
-              page.find('a.codicon-source-control-view-icon').click
-              send_keys(folder_name)
-              page.has_content?(folder_name)
-
-              # Commit Button
-              page.find('a.monaco-text-button').click
-              page.has_css?('.notification-list-item-details-row', visible: true)
+              if has_commit_pending_tab?
+                click_commit_pending_tab
+              else
+                click_commit_tab
+              end
+
+              has_commit_message_box?
+              send_keys(message)
+              page.has_content?(message)
+              click_commit_button
+              has_notification_box?
+            end
+          end
+
+          def push_to_new_branch
+            within_vscode_editor do
+              click_new_branch
+              has_branch_input_field?
+              # Typing enter to 'New branch name' popup to take the default branch name
+              send_keys(:enter)
+            end
+          end
+
+          def upload_file(file_path)
+            wait_for_ide_to_load
+            within_vscode_editor do
+              # VSCode eagerly removes the input[type='file'] from click on Upload.
+              # We need to execute a script on the iframe to stub out the iframes body.removeChild to add it back in.
+              page.execute_script("document.body.removeChild = function(){};")
+
+              right_click_file_explorer
+              has_upload_menu_item?
+
+              # Use for stability, WebIDE inside an iframe is finnicky, webdriver sometimes moves too fast
+              Support::Waiter.wait_until(max_duration: 20, retry_on_exception: true) do
+                click_upload_menu_item
+                enter_file_input(file_path)
+              end
             end
           end
         end
diff --git a/qa/qa/specs/features/browser_ui/3_create/web_ide/add_new_directory_in_web_ide_spec.rb b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_new_directory_in_web_ide_spec.rb
index af3d064a37c..3e8f9307cec 100644
--- a/qa/qa/specs/features/browser_ui/3_create/web_ide/add_new_directory_in_web_ide_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/web_ide/add_new_directory_in_web_ide_spec.rb
@@ -42,9 +42,7 @@ module QA
           Page::Project::WebIDE::VSCode.perform do |ide|
             ide.wait_for_ide_to_load
             ide.create_new_folder(directory_name)
-            ide.within_vscode_editor do
-              expect(page).to have_content('A file or folder first_directory already exists at this location.')
-            end
+            ide.has_message?('A file or folder first_directory already exists at this location.')
           end
         end
       end
@@ -61,10 +59,8 @@ module QA
           Page::Project::WebIDE::VSCode.perform do |ide|
             ide.wait_for_ide_to_load
             ide.create_new_folder(directory_name)
-            ide.commit_and_push(directory_name)
-            ide.within_vscode_editor do
-              expect(page).to have_content('No changes found. Not able to commit.')
-            end
+            ide.commit_toggle(directory_name)
+            ide.has_message?('No changes found. Not able to commit.')
           end
         end
       end
diff --git a/qa/qa/specs/features/browser_ui/3_create/web_ide/upload_new_file_in_web_ide_spec.rb b/qa/qa/specs/features/browser_ui/3_create/web_ide/upload_new_file_in_web_ide_spec.rb
new file mode 100644
index 00000000000..336d32bcc35
--- /dev/null
+++ b/qa/qa/specs/features/browser_ui/3_create/web_ide/upload_new_file_in_web_ide_spec.rb
@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create', product_group: :ide,
+    quarantine: {
+      only: { job: 'slow-network' },
+      issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/387609',
+      type: :flaky
+    } do
+    describe 'Upload a file in Web IDE' do
+      let(:file_path) { File.absolute_path(File.join('qa', 'fixtures', 'web_ide', file_name)) }
+
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'upload-file-project'
+          project.initialize_with_readme = true
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+        project.visit!
+      end
+
+      context 'when a file with the same name already exists' do
+        let(:file_name) { 'README.md' }
+
+        it 'throws an error', testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/390005' do
+          Page::Project::Show.perform(&:open_web_ide!)
+          Page::Project::WebIDE::VSCode.perform do |ide|
+            ide.upload_file(file_path)
+            ide.has_message?("A file or folder with the name 'README.md' already exists in the destination folder")
+          end
+        end
+      end
+
+      shared_examples 'upload a file' do
+        it "verifies it successfully uploads and commits to a MR" do
+          Page::Project::Show.perform(&:open_web_ide!)
+          Page::Project::WebIDE::VSCode.perform do |ide|
+            ide.upload_file(file_path)
+            ide.has_message?(file_name)
+            ide.commit_and_push(file_name)
+            ide.has_message?('Success! Your changes have been committed.')
+            ide.create_merge_request
+          end
+
+          # Opens the MR in new tab and verify the file is in the MR
+          page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)
+          Page::MergeRequest::Show.perform do |merge_request|
+            expect(merge_request).to have_content(file_name)
+          end
+        end
+      end
+
+      context 'when the file is a text file',
+        testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/390006' do
+        let(:file_name) { 'text_file.txt' }
+
+        it_behaves_like 'upload a file'
+      end
+
+      context 'when the file is an image',
+        testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/390007' do
+        let(:file_name) { 'dk.png' }
+
+        it_behaves_like 'upload a file'
+      end
+    end
+  end
+end