Update integration tables to have different columns

- Remove "Last updated" column from inactive integrations
- Remove existing integrations table
- Update translations
- Add changelog

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

@@ -25,8 +25,8 @@ export default {
 
 <template>
   <div>
-    <integrations-table :integrations="activeIntegrations" />
+    <integrations-table :active="true" :integrations="activeIntegrations" />
     <h5>{{ s__('Integrations|Add an integration') }}</h5>
-    <integrations-table :integrations="inactiveIntegrations" />
+    <integrations-table :active="false" :integrations="inactiveIntegrations" />
   </div>
 </template>

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

@@ -11,34 +11,45 @@ export default {
     TimeAgoTooltip,
   },
   props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     integrations: {
       type: Array,
       required: true,
     },
   },
-  fields: [
-    {
-      key: 'active',
-      label: '',
-    },
-    {
-      key: 'name',
-      label: __('Integration'),
-    },
-    {
-      key: 'description',
-      label: __('Description'),
+  computed: {
+    fields() {
+      return [
+        {
+          key: 'active',
+          label: '',
+        },
+        {
+          key: 'name',
+          label: __('Integration'),
+        },
+        {
+          key: 'description',
+          label: __('Description'),
+        },
+        this.active
+          ? {
+              key: 'updated_at',
+              label: __('Last updated'),
+            }
+          : {},
+      ];
     },
-    {
-      key: 'updated_at',
-      label: __('Last updated'),
-    },
-  ],
+  },
 };
 </script>
 
 <template>
-  <gl-table :items="integrations" :fields="$options.fields">
+  <gl-table :items="integrations" :fields="fields">
     <template #cell(active)="{ item }">
       <gl-icon v-if="item.active" name="check" class="gl-text-green-500" />
     </template>

app/views/projects/settings/integrations/show.html.haml

@@ -12,7 +12,7 @@
     .gl-alert-actions
       = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'gl-button btn gl-alert-action btn-info'
 
-%h4= _('Integrations')
+%h4= s_('Integrations|Active integrations')
 - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/overview') }
 - webhooks_link_start = '<a href="%{url}">'.html_safe % { url: project_hooks_path(@project) }
 %p= _("%{integrations_link_start}Integrations%{link_end} enable you to make third-party applications part of your GitLab workflow. If the available integrations don't meet your needs, consider using a %{webhooks_link_start}webhook%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, webhooks_link_start: webhooks_link_start, link_end: '</a>'.html_safe }

app/views/shared/integrations/_index.html.haml

 .js-integrations-list{ data: integration_list_data(integrations) }
-
-%table.table.b-table.gl-table{ role: 'table', 'aria-busy': false, 'aria-colcount': 4 }
-  %colgroup
-    %col
-    %col
-    %col.d-none.d-sm-table-column
-    %col{ width: 135 }
-  %thead{ role: 'rowgroup' }
-    %tr{ role: 'row' }
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 1 }
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 2 }= _('Integration')
-      %th.d-none.d-sm-block{ role: 'columnheader', scope: 'col', 'aria-colindex': 3 }= _('Description')
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 4 }= _('Last updated')
-
-  %tbody{ role: 'rowgroup' }
-    - integrations.each do |integration|
-      - activated_label = (integration.activated? ? s_("ProjectService|%{service_title}: status on") : s_("ProjectService|%{service_title}: status off")) % { service_title: integration.title }
-      %tr{ role: 'row' }
-        %td{ role: 'cell', 'aria-colindex': 1, 'aria-label': activated_label, title: activated_label }
-          - if integration.operating?
-            = sprite_icon('check', css_class: 'gl-text-green-500')
-        %td{ role: 'cell', 'aria-colindex': 2 }
-          = link_to integration.title, scoped_edit_integration_path(integration), class: 'gl-font-weight-bold', data: { qa_selector: "#{integration.to_param}_link" }
-        %td.d-none.d-sm-table-cell{ role: 'cell', 'aria-colindex': 3 }
-          = integration.description
-        %td{ role: 'cell', 'aria-colindex': 4 }
-          - if integration.updated_at.present?
-            = time_ago_with_tooltip integration.updated_at

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

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

locale/gitlab.pot

@@ -17074,6 +17074,12 @@ msgstr ""
 msgid "Integrations|%{integration} settings saved, but not active."
 msgstr ""
 
+msgid "Integrations|Active integrations"
+msgstr ""
+
+msgid "Integrations|Add an integration"
+msgstr ""
+
 msgid "Integrations|Add namespace"
 msgstr ""