Update QA selectors to use Vue component

qa/qa/ee/page/project/settings/services/jenkins.rb

@@ -7,11 +7,11 @@ module QA
         module Settings
           module Services
             class Jenkins < QA::Page::Base
-              view 'app/views/shared/_field.html.haml' do
-                element :jenkins_url_field, 'data: { qa_selector: "#{name.downcase.gsub' # rubocop:disable QA/ElementWithPattern
-                element :project_name_field, 'data: { qa_selector: "#{name.downcase.gsub' # rubocop:disable QA/ElementWithPattern
-                element :username_field, 'data: { qa_selector: "#{name.downcase.gsub' # rubocop:disable QA/ElementWithPattern
-                element :password_field, 'data: { qa_selector: "#{name.downcase.gsub' # rubocop:disable QA/ElementWithPattern
+              view 'app/assets/javascripts/integrations/edit/components/dynamic_field.vue' do
+                element :jenkins_url_field, ':data-qa-selector="`${fieldId}_field`"' # rubocop:disable QA/ElementWithPattern
+                element :project_name_field, ':data-qa-selector="`${fieldId}_field`"' # rubocop:disable QA/ElementWithPattern
+                element :username_field, ':data-qa-selector="`${fieldId}_field`"' # rubocop:disable QA/ElementWithPattern
+                element :password_field, ':data-qa-selector="`${fieldId}_field`"' # rubocop:disable QA/ElementWithPattern
               end
 
               view 'app/helpers/services_helper.rb' do