Merge branch 'http-highlight-current-edit' into 'master'

Add row highlight for alert settings

See merge request gitlab-org/gitlab!47001

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

@@ -58,6 +58,11 @@ export default {
       required: false,
       default: false,
     },
+    currentIntegration: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   fields: [
     {
@@ -82,17 +87,16 @@ export default {
       integrationToDelete: integrationToDeleteDefault,
     };
   },
-  computed: {
-    tbodyTrClass() {
-      return {
-        [bodyTrClass]: this.integrations.length,
-      };
-    },
-  },
   mounted() {
     this.trackPageViews();
   },
   methods: {
+    tbodyTrClass(item) {
+      return {
+        [bodyTrClass]: this.integrations.length,
+        'gl-bg-blue-50': item?.id === this.currentIntegration?.id,
+      };
+    },
     trackPageViews() {
       const { category, action } = trackAlertIntegrationsViewsOptions;
       Tracking.event(category, action);

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

@@ -23,6 +23,7 @@ import {
   DELETE_INTEGRATION_ERROR,
   ADD_INTEGRATION_ERROR,
   RESET_INTEGRATION_TOKEN_ERROR,
+  UPDATE_INTEGRATION_ERROR,
 } from '../utils/error_messages';
 
 export default {
@@ -162,8 +163,8 @@ export default {
             type: FLASH_TYPES.SUCCESS,
           });
         })
-        .catch(err => {
-          createFlash({ message: err });
+        .catch(() => {
+          createFlash({ message: UPDATE_INTEGRATION_ERROR });
         })
         .finally(() => {
           this.isUpdating = false;
@@ -234,7 +235,6 @@ export default {
           });
         })
         .catch(() => {
-          this.errored = true;
           createFlash({ message: DELETE_INTEGRATION_ERROR });
         })
         .finally(() => {
@@ -253,6 +253,7 @@ export default {
     <integrations-list
       :integrations="glFeatures.httpIntegrationsList ? integrations.list : intergrationsOptionsOld"
       :loading="loading"
+      :current-integration="currentIntegration"
       @edit-integration="editIntegration"
       @delete-integration="deleteIntegration"
     />

app/assets/javascripts/alerts_settings/constants.js

@@ -57,15 +57,6 @@ export const typeSet = {
   prometheus: 'PROMETHEUS',
 };
 
-export const defaultFormState = {
-  name: '',
-  active: false,
-  token: '',
-  url: '',
-  apiUrl: '',
-  integrationTestPayload: { json: null, error: null },
-};
-
 export const integrationToDeleteDefault = { id: null, name: '' };
 
 export const JSON_VALIDATE_DELAY = 250;

app/assets/javascripts/alerts_settings/utils/error_messages.js

@@ -8,6 +8,10 @@ export const ADD_INTEGRATION_ERROR = s__(
   'AlertsIntegrations|The integration could not be added. Please try again.',
 );
 
+export const UPDATE_INTEGRATION_ERROR = s__(
+  'AlertsIntegrations|The current integration could not be updated. Please try again.',
+);
+
 export const RESET_INTEGRATION_TOKEN_ERROR = s__(
   'AlertsIntegrations|The integration token could not be reset. Please try again.',
 );

locale/gitlab.pot

@@ -2671,6 +2671,9 @@ msgstr ""
 msgid "AlertsIntegrations|Prometheus"
 msgstr ""
 
+msgid "AlertsIntegrations|The current integration could not be updated. Please try again."
+msgstr ""
+
 msgid "AlertsIntegrations|The integration could not be added. Please try again."
 msgstr ""
 

spec/frontend/alerts_settings/alerts_integrations_list_spec.js

-import { GlTable, GlIcon } from '@gitlab/ui';
+import { GlTable, GlIcon, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Tracking from '~/tracking';
 import AlertIntegrationsList, {
@@ -8,11 +8,13 @@ import { trackAlertIntegrationsViewsOptions } from '~/alerts_settings/constants'
 
 const mockIntegrations = [
   {
+    id: '1',
     active: true,
     name: 'Integration 1',
     type: 'HTTP endpoint',
   },
   {
+    id: '2',
     active: false,
     name: 'Integration 2',
     type: 'HTTP endpoint',
@@ -30,6 +32,7 @@ describe('AlertIntegrationsList', () => {
       },
       stubs: {
         GlIcon: true,
+        GlButton: true,
       },
     });
   }
@@ -46,6 +49,7 @@ describe('AlertIntegrationsList', () => {
   });
 
   const findTableComponent = () => wrapper.find(GlTable);
+  const findTableComponentRows = () => wrapper.find(GlTable).findAll('table tbody tr');
   const finsStatusCell = () => wrapper.findAll('[data-testid="integration-activated-status"]');
 
   it('renders a table', () => {
@@ -57,6 +61,19 @@ describe('AlertIntegrationsList', () => {
     expect(findTableComponent().text()).toContain(i18n.emptyState);
   });
 
+  it('renders an an edit and delete button for each integration', () => {
+    expect(findTableComponent().findAll(GlButton).length).toBe(4);
+  });
+
+  it('renders an highlighted row when a current integration is selected to edit', () => {
+    mountComponent({ currentIntegration: { id: '1' } });
+    expect(
+      findTableComponentRows()
+        .at(0)
+        .classes(),
+    ).toContain('gl-bg-blue-50');
+  });
+
   describe('integration status', () => {
     it('enabled', () => {
       const cell = finsStatusCell().at(0);

spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js

@@ -19,6 +19,7 @@ import { typeSet } from '~/alerts_settings/constants';
 import {
   ADD_INTEGRATION_ERROR,
   RESET_INTEGRATION_TOKEN_ERROR,
+  UPDATE_INTEGRATION_ERROR,
 } from '~/alerts_settings/utils/error_messages';
 import createFlash from '~/flash';
 import { defaultAlertSettingsConfig } from './util';
@@ -148,16 +149,6 @@ describe('AlertsSettingsWrapper', () => {
       expect(findIntegrations()).toHaveLength(mockIntegrations.length);
     });
 
-    it('shows an error message when a user cannot create a new integration', () => {
-      createComponent({
-        data: { integrations: { list: mockIntegrations } },
-        provide: { glFeatures: { httpIntegrationsList: true } },
-        loading: false,
-      });
-      expect(findLoader().exists()).toBe(false);
-      expect(findIntegrations()).toHaveLength(mockIntegrations.length);
-    });
-
     it('calls `$apollo.mutate` with `createHttpIntegrationMutation`', () => {
       createComponent({
         data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
@@ -292,7 +283,7 @@ describe('AlertsSettingsWrapper', () => {
       });
     });
 
-    it('shows error alert when integration creation fails ', async () => {
+    it('shows an error alert when integration creation fails ', async () => {
       createComponent({
         data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
         provide: { glFeatures: { httpIntegrationsList: true } },
@@ -307,7 +298,7 @@ describe('AlertsSettingsWrapper', () => {
       expect(createFlash).toHaveBeenCalledWith({ message: ADD_INTEGRATION_ERROR });
     });
 
-    it('shows error alert when integration token reset fails ', async () => {
+    it('shows an error alert when integration token reset fails ', async () => {
       createComponent({
         data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
         provide: { glFeatures: { httpIntegrationsList: true } },
@@ -322,7 +313,7 @@ describe('AlertsSettingsWrapper', () => {
       expect(createFlash).toHaveBeenCalledWith({ message: RESET_INTEGRATION_TOKEN_ERROR });
     });
 
-    it('shows error alert when integration update fails ', async () => {
+    it('shows an error alert when integration update fails ', async () => {
       createComponent({
         data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
         provide: { glFeatures: { httpIntegrationsList: true } },
@@ -334,7 +325,7 @@ describe('AlertsSettingsWrapper', () => {
       wrapper.find(AlertsSettingsFormNew).vm.$emit('update-integration', {});
 
       await waitForPromises();
-      expect(createFlash).toHaveBeenCalledWith({ message: errorMsg });
+      expect(createFlash).toHaveBeenCalledWith({ message: UPDATE_INTEGRATION_ERROR });
     });
   });