Address backend maintainer feedback

- rename integration.name=>integration.title
- rename integration.type=>integration.name
- update changelog title

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

@@ -38,7 +38,7 @@ export default {
           thClass: 'gl-w-10',
         },
         {
-          key: 'name',
+          key: 'title',
           label: __('Integration'),
           thClass: 'gl-w-quarter',
         },
@@ -58,8 +58,8 @@ export default {
   },
   methods: {
     getStatusTooltipTitle(integration) {
-      return sprintf(s__('Integrations|%{integrationName}: active'), {
-        integrationName: integration.name,
+      return sprintf(s__('Integrations|%{integrationTitle}: active'), {
+        integrationTitle: integration.title,
       });
     },
   },
@@ -78,13 +78,13 @@ export default {
       />
     </template>
 
-    <template #cell(name)="{ item }">
+    <template #cell(title)="{ item }">
       <gl-link
         :href="item.edit_path"
         class="gl-font-weight-bold"
-        :data-qa-selector="`${item.type}_link`"
+        :data-qa-selector="`${item.name}_link`"
       >
-        {{ item.name }}
+        {{ item.title }}
       </gl-link>
     </template>
 

app/helpers/services_helper.rb

@@ -165,11 +165,11 @@ module ServicesHelper
   def serialize_integration(integration)
     {
       active: integration.operating?,
-      name: integration.title,
+      title: integration.title,
       description: integration.description,
       updated_at: integration.updated_at,
       edit_path: scoped_edit_integration_path(integration),
-      type: integration.to_param
+      name: integration.to_param
     }
   end
 end

ee/changelogs/unreleased/214885-active-integrations-should-be-displayed-in-a-separate-table.yml

 ---
-title: Separate active integrations in integrations list to new table
+title: Display active integrations in separate table
 merge_request: 57198
 author:
 type: changed

locale/gitlab.pot

@@ -17056,7 +17056,7 @@ msgstr ""
 msgid "Integrations"
 msgstr ""
 
-msgid "Integrations|%{integrationName}: active"
+msgid "Integrations|%{integrationTitle}: active"
 msgstr ""
 
 msgid "Integrations|%{integration} settings saved and active."

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

@@ -11,8 +11,8 @@ module QA
             def self.prepended(base)
               base.class_eval do
                 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
+                  element :jenkins_link, %q(:data-qa-selector="`${item.name}_link`") # rubocop:disable QA/ElementWithPattern
+                  element :jira_link, %q(:data-qa-selector="`${item.name}_link`") # rubocop:disable QA/ElementWithPattern
                 end
               end
             end

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

@@ -6,8 +6,8 @@ module QA
       module Settings
         class Integrations < QA::Page::Base
           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
+            element :prometheus_link, %q(:data-qa-selector="`${item.name}_link`") # rubocop:disable QA/ElementWithPattern
+            element :jira_link, %q(:data-qa-selector="`${item.name}_link`") # rubocop:disable QA/ElementWithPattern
           end
 
           def click_on_prometheus_integration

spec/frontend/integrations/index/mock_data.js

 export const mockActiveIntegrations = [
   {
     active: true,
-    name: 'Asana',
+    title: 'Asana',
     description: 'Asana - Teamwork without email',
     updated_at: '2021-03-18T00:27:09.634Z',
     edit_path:
       '/gitlab-qa-sandbox-group/project_with_jenkins_6a55a67c-57c6ed0597c9319a/-/services/asana/edit',
-    type: 'asana',
+    name: 'asana',
   },
   {
     active: true,
-    name: 'Jira',
+    title: 'Jira',
     description: 'Jira issue tracker',
     updated_at: '2021-01-29T06:41:25.806Z',
     edit_path:
       '/gitlab-qa-sandbox-group/project_with_jenkins_6a55a67c-57c6ed0597c9319a/-/services/jira/edit',
-    type: 'jira',
+    name: 'jira',
   },
 ];
 
 export const mockInactiveIntegrations = [
   {
     active: false,
-    name: 'Webex Teams',
+    title: 'Webex Teams',
     description: 'Receive event notifications in Webex Teams',
     updated_at: null,
     edit_path:
       '/gitlab-qa-sandbox-group/project_with_jenkins_6a55a67c-57c6ed0597c9319a/-/services/webex_teams/edit',
-    type: 'webex_teams',
+    name: 'webex_teams',
   },
   {
     active: false,
-    name: 'YouTrack',
+    title: 'YouTrack',
     description: 'YouTrack issue tracker',
     updated_at: null,
     edit_path:
       '/gitlab-qa-sandbox-group/project_with_jenkins_6a55a67c-57c6ed0597c9319a/-/services/youtrack/edit',
-    type: 'youtrack',
+    name: 'youtrack',
   },
   {
     active: false,
-    name: 'Atlassian Bamboo CI',
+    title: 'Atlassian Bamboo CI',
     description: 'A continuous integration and build server',
     updated_at: null,
     edit_path:
       '/gitlab-qa-sandbox-group/project_with_jenkins_6a55a67c-57c6ed0597c9319a/-/services/bamboo/edit',
-    type: 'bamboo',
+    name: 'bamboo',
   },
 ];