Update specs to use Vue app

- Update QA selectors
- Update translations
- Use JS in feature specs to render Vue

app/assets/javascripts/integrations/index/components/integrations_table.vue

@@ -55,7 +55,12 @@ export default {
     </template>
 
     <template #cell(name)="{ item }">
-      <gl-link :href="item.edit_path" class="gl-font-weight-bold">{{ item.name }}</gl-link>
+      <gl-link
+        :href="item.edit_path"
+        class="gl-font-weight-bold"
+        :data-qa-selector="`${item.type}_link`"
+        >{{ item.name }}</gl-link
+      >
     </template>
 
     <template #cell(updated_at)="{ item }">

app/helpers/services_helper.rb

@@ -168,7 +168,8 @@ module ServicesHelper
       name: integration.title,
       description: integration.description,
       updated_at: integration.updated_at,
-      edit_path: scoped_edit_integration_path(integration)
+      edit_path: scoped_edit_integration_path(integration),
+      type: integration.to_param
     }
   end
 end

qa/qa/ee/page/project/settings/integrations.rb

@@ -10,8 +10,9 @@ module QA
 
             def self.prepended(base)
               base.class_eval do
-                view 'app/views/shared/integrations/_index.html.haml' do
-                  element :jenkins_link, 'data: { qa_selector: "#{integration.to_param' # rubocop:disable QA/ElementWithPattern
+                view 'app/assets/javascripts/integrations/index/components/integrations_table.vue' do
+                  element :jenkins_link, %q(:data-qa-selector="`${item.type}_link`") # rubocop:disable QA/ElementWithPattern
+                  element :jira_link, %q(:data-qa-selector="`${item.type}_link`") # rubocop:disable QA/ElementWithPattern
                 end
               end
             end

qa/qa/page/project/settings/integrations.rb

@@ -5,9 +5,9 @@ module QA
     module Project
       module Settings
         class Integrations < QA::Page::Base
-          view 'app/views/shared/integrations/_index.html.haml' do
-            element :prometheus_link, 'data: { qa_selector: "#{integration.to_param' # rubocop:disable QA/ElementWithPattern
-            element :jira_link, 'data: { qa_selector: "#{integration.to_param' # rubocop:disable QA/ElementWithPattern
+          view 'app/assets/javascripts/integrations/index/components/integrations_table.vue' do
+            element :prometheus_link, %q(:data-qa-selector="`${item.type}_link`") # rubocop:disable QA/ElementWithPattern
+            element :jira_link, %q(:data-qa-selector="`${item.type}_link`") # rubocop:disable QA/ElementWithPattern
           end
 
           def click_on_prometheus_integration

spec/features/projects/services/user_views_services_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'User views services' do
+RSpec.describe 'User views services', :js do
   include_context 'project service activation'
 
   it 'shows the list of available services' do