Status icons and tooltips on integrations list

Adds icons and tooltips to status column on alerts integrations list

app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

 <script>
-import { GlTable } from '@gitlab/ui';
+import { GlTable, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 
 export const i18n = {
   title: s__('AlertsIntegrations|Current integrations'),
   emptyState: s__('AlertsIntegrations|No integrations have been added yet'),
   status: {
-    enabled: __('Enabled'),
-    disabled: __('Disabled'),
+    enabled: {
+      name: __('Enabled'),
+      tooltip: s__('AlertsIntegrations|Alerts will be created through this integration'),
+    },
+    disabled: {
+      name: __('Disabled'),
+      tooltip: s__('AlertsIntegrations|Alerts will not be created through this integration'),
+    },
   },
 };
 
@@ -18,6 +24,10 @@ export default {
   i18n,
   components: {
     GlTable,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     integrations: {
@@ -28,11 +38,8 @@ export default {
   },
   fields: [
     {
-      key: 'status',
+      key: 'activated',
       label: __('Status'),
-      formatter(enabled) {
-        return enabled ? i18n.status.enabled : i18n.status.disabled;
-      },
     },
     {
       key: 'name',
@@ -63,6 +70,29 @@ export default {
       stacked="md"
       :tbody-tr-class="tbodyTrClass"
       show-empty
-    />
+    >
+      <template #cell(activated)="{ item }">
+        <span v-if="item.activated" data-testid="integration-activated-status">
+          <gl-icon
+            v-gl-tooltip
+            name="check-circle-filled"
+            :size="16"
+            class="gl-text-green-500 gl-hover-cursor-pointer gl-mr-3"
+            :title="$options.i18n.status.enabled.tooltip"
+          />
+          {{ $options.i18n.status.enabled.name }}
+        </span>
+        <span v-else data-testid="integration-activated-status">
+          <gl-icon
+            v-gl-tooltip
+            name="warning-solid"
+            :size="16"
+            class="gl-text-red-600 gl-hover-cursor-pointer gl-mr-3"
+            :title="$options.i18n.status.disabled.tooltip"
+          />
+          {{ $options.i18n.status.disabled.name }}
+        </span>
+      </template>
+    </gl-table>
   </div>
 </template>

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -159,12 +159,12 @@ export default {
         {
           name: s__('AlertSettings|HTTP endpoint'),
           type: s__('AlertsIntegrations|HTTP endpoint'),
-          status: this.generic.activated,
+          activated: this.generic.activated,
         },
         {
           name: s__('AlertSettings|External Prometheus'),
           type: s__('AlertsIntegrations|Prometheus'),
-          status: this.prometheus.activated,
+          activated: this.prometheus.activated,
         },
       ];
     },

changelogs/unreleased/245337-integrations-list-icons.yml

+---
+title: Status icons for alerts integratiosn list
+merge_request: 44318
+author:
+type: added

locale/gitlab.pot

@@ -2488,6 +2488,12 @@ msgstr ""
 msgid "Alerts endpoint"
 msgstr ""
 
+msgid "AlertsIntegrations|Alerts will be created through this integration"
+msgstr ""
+
+msgid "AlertsIntegrations|Alerts will not be created through this integration"
+msgstr ""
+
 msgid "AlertsIntegrations|Current integrations"
 msgstr ""
 

spec/frontend/alert_settings/alerts_integrations_list_spec.js

-import { GlTable } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlTable, GlIcon } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import AlertIntegrationsList, {
   i18n,
 } from '~/alerts_settings/components/alerts_integrations_list.vue';
 
 const mockIntegrations = [
   {
-    status: true,
+    activated: true,
     name: 'Integration 1',
     type: 'HTTP endpoint',
   },
   {
-    status: false,
+    activated: false,
     name: 'Integration 2',
     type: 'HTTP endpoint',
   },
@@ -21,11 +21,14 @@ describe('AlertIntegrationsList', () => {
   let wrapper;
 
   function mountComponent(propsData = {}) {
-    wrapper = shallowMount(AlertIntegrationsList, {
+    wrapper = mount(AlertIntegrationsList, {
       propsData: {
         integrations: mockIntegrations,
         ...propsData,
       },
+      stubs: {
+        GlIcon: true,
+      },
     });
   }
 
@@ -41,9 +44,32 @@ describe('AlertIntegrationsList', () => {
   });
 
   const findTableComponent = () => wrapper.find(GlTable);
+  const finsStatusCell = () => wrapper.findAll('[data-testid="integration-activated-status"]');
 
   it('renders a table', () => {
     expect(findTableComponent().exists()).toBe(true);
-    expect(findTableComponent().attributes('empty-text')).toBe(i18n.emptyState);
+  });
+
+  it('renders an empty state when no integrations provided', () => {
+    mountComponent({ integrations: [] });
+    expect(findTableComponent().text()).toContain(i18n.emptyState);
+  });
+
+  describe('integration status', () => {
+    it('enabled', () => {
+      const cell = finsStatusCell().at(0);
+      const activatedIcon = cell.find(GlIcon);
+      expect(cell.text()).toBe(i18n.status.enabled.name);
+      expect(activatedIcon.attributes('name')).toBe('check-circle-filled');
+      expect(activatedIcon.attributes('title')).toBe(i18n.status.enabled.tooltip);
+    });
+
+    it('disabled', () => {
+      const cell = finsStatusCell().at(1);
+      const notActivatedIcon = cell.find(GlIcon);
+      expect(cell.text()).toBe(i18n.status.disabled.name);
+      expect(notActivatedIcon.attributes('name')).toBe('warning-solid');
+      expect(notActivatedIcon.attributes('title')).toBe(i18n.status.disabled.tooltip);
+    });
   });
 });