Commit 7a752db3 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

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

Add row highlight for alert settings

See merge request gitlab-org/gitlab!47001
parents c7b7ea20 79b2ffc3
......@@ -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);
......
......@@ -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"
/>
......
......@@ -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;
......
......@@ -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.',
);
......@@ -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 ""
......
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);
......
......@@ -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 });
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment