Add latest changes from gitlab-org/gitlab@master

4 files changed, 48 insertions, 63 deletions

diff --git a/qa/qa/page/project/settings/ci_variables.rb b/qa/qa/page/project/settings/ci_variables.rb
index 2bb285d6086..6cdf40cd1da 100644
--- a/qa/qa/page/project/settings/ci_variables.rb
+++ b/qa/qa/page/project/settings/ci_variables.rb
@@ -7,75 +7,47 @@ module QA
         class CiVariables < Page::Base
           include Common
 
-          view 'app/views/ci/variables/_variable_row.html.haml' do
-            element :variable_row, '.ci-variable-row-body' # rubocop:disable QA/ElementWithPattern
-            element :variable_key, '.qa-ci-variable-input-key' # rubocop:disable QA/ElementWithPattern
-            element :variable_value, '.qa-ci-variable-input-value' # rubocop:disable QA/ElementWithPattern
-            element :variable_masked
+          view 'app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue' do
+            element :ci_variable_key_field
+            element :ci_variable_value_field
+            element :ci_variable_masked_checkbox
+            element :ci_variable_save_button
+            element :ci_variable_delete_button
           end
 
-          view 'app/views/ci/variables/_index.html.haml' do
-            element :save_variables, '.js-ci-variables-save-button' # rubocop:disable QA/ElementWithPattern
-            element :reveal_values, '.js-secret-value-reveal-button' # rubocop:disable QA/ElementWithPattern
+          view 'app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue' do
+            element :ci_variable_table_content
+            element :add_ci_variable_button
+            element :edit_ci_variable_button
+            element :reveal_ci_variable_value_button
           end
 
           def fill_variable(key, value, masked)
-            keys = all_elements(:ci_variable_input_key, minimum: 1)
-            index = keys.size - 1
-
-            # After we fill the key, JS would generate another field so
-            # we need to use the same index to find the corresponding one.
-            keys[index].set(key)
-            node = all_elements(:ci_variable_input_value, count: keys.size + 1)[index]
-
-            # Simply run `node.set(value)` is too slow for long text here,
-            # so we need to run JavaScript directly to set the value.
-            # The code was inspired from:
-            # https://github.com/teamcapybara/capybara/blob/679548cea10773d45e32808f4d964377cfe5e892/lib/capybara/selenium/node.rb#L217
-            execute_script("arguments[0].value = #{value.to_json}", node)
-
-            masked_node = all_elements(:variable_masked, count: keys.size + 1)[index]
-            toggle_masked(masked_node, masked)
-          end
-
-          def save_variables
-            find('.js-ci-variables-save-button').click
-          end
-
-          def reveal_variables
-            find('.js-secret-value-reveal-button').click
+            fill_element :ci_variable_key_field, key
+            fill_element :ci_variable_value_field, value
+            click_ci_variable_save_button
           end
 
-          def variable_value(key)
-            within('.ci-variable-row-body', text: key) do
-              find('.qa-ci-variable-input-value').value
-            end
+          def click_add_variable
+            click_element :add_ci_variable_button
           end
 
-          def remove_variable(location: :first)
-            within('.ci-variable-row-body', match: location) do
-              find('button.ci-variable-row-remove-button').click
+          def click_edit_ci_variable
+            within_element(:ci_variable_table_content) do
+              click_element :edit_ci_variable_button
             end
-
-            save_variables
           end
 
-          private
-
-          def toggle_masked(masked_node, masked)
-            wait_until(reload: false) do
-              masked_node.click
-
-              masked ? masked_enabled?(masked_node) : masked_disabled?(masked_node)
-            end
+          def click_ci_variable_save_button
+            click_element :ci_variable_save_button
           end
 
-          def masked_enabled?(masked_node)
-            masked_node[:class].include?('is-checked')
+          def click_reveal_ci_variable_value_button
+            click_element :reveal_ci_variable_value_button
           end
 
-          def masked_disabled?(masked_node)
-            !masked_enabled?(masked_node)
+          def click_ci_variable_delete_button
+            click_element :ci_variable_delete_button
           end
         end
       end
diff --git a/qa/qa/resource/ci_variable.rb b/qa/qa/resource/ci_variable.rb
index b178a64b72d..f14fcdaac9f 100644
--- a/qa/qa/resource/ci_variable.rb
+++ b/qa/qa/resource/ci_variable.rb
@@ -19,9 +19,8 @@ module QA
 
         Page::Project::Settings::CICD.perform do |setting|
           setting.expand_ci_variables do |page|
+            page.click_add_variable
             page.fill_variable(key, value, masked)
-
-            page.save_variables
           end
         end
       end
diff --git a/qa/qa/specs/features/browser_ui/4_verify/ci_variable/add_remove_ci_variable_spec.rb b/qa/qa/specs/features/browser_ui/4_verify/ci_variable/add_remove_ci_variable_spec.rb
index cff415dcf97..f7a6c8411db 100644
--- a/qa/qa/specs/features/browser_ui/4_verify/ci_variable/add_remove_ci_variable_spec.rb
+++ b/qa/qa/specs/features/browser_ui/4_verify/ci_variable/add_remove_ci_variable_spec.rb
@@ -2,7 +2,7 @@
 
 module QA
   context 'Verify' do
-    describe 'Add or Remove CI variable via UI', :smoke, quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/issues/207915', type: :stale } do
+    describe 'Add or Remove CI variable via UI', :smoke do
       let!(:project) do
         Resource::Project.fabricate_via_api! do |project|
           project.name = 'project-with-ci-variables'
@@ -10,6 +10,14 @@ module QA
         end
       end
 
+      before(:all) do
+        Runtime::Feature.enable_and_verify('new_variables_ui')
+      end
+
+      after(:all) do
+        Runtime::Feature.remove('new_variables_ui')
+      end
+
       before do
         Flow::Login.sign_in
         add_ci_variable
@@ -19,12 +27,12 @@ module QA
       it 'user adds a CI variable' do
         Page::Project::Settings::CICD.perform do |settings|
           settings.expand_ci_variables do |page|
-            expect(page).to have_field(with: 'VARIABLE_KEY')
-            expect(page).not_to have_field(with: 'some_CI_variable')
+            expect(page).to have_text('VARIABLE_KEY')
+            expect(page).not_to have_text('some_CI_variable')
 
-            page.reveal_variables
+            page.click_reveal_ci_variable_value_button
 
-            expect(page).to have_field(with: 'some_CI_variable')
+            expect(page).to have_text('some_CI_variable')
           end
         end
       end
@@ -32,9 +40,10 @@ module QA
       it 'user removes a CI variable' do
         Page::Project::Settings::CICD.perform do |settings|
           settings.expand_ci_variables do |page|
-            page.remove_variable
+            page.click_edit_ci_variable
+            page.click_ci_variable_delete_button
 
-            expect(page).not_to have_field(with: 'VARIABLE_KEY')
+            expect(page).not_to have_text('VARIABLE_KEY')
           end
         end
       end
diff --git a/qa/qa/vendor/jenkins/page/last_job_console.rb b/qa/qa/vendor/jenkins/page/last_job_console.rb
index 4c511a8c1f8..f41b91c2cdb 100644
--- a/qa/qa/vendor/jenkins/page/last_job_console.rb
+++ b/qa/qa/vendor/jenkins/page/last_job_console.rb
@@ -14,7 +14,12 @@ module QA
           end
 
           def has_successful_build?
-            page.has_text?('Finished: SUCCESS')
+            # Retry on errors such as:
+            # Selenium::WebDriver::Error::JavascriptError:
+            #   javascript error: this.each is not a function
+            Support::Retrier.retry_on_exception(reload_page: page) do
+              page.has_text?('Finished: SUCCESS')
+            end
           end
 
           def no_failed_status_update?