LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add Integration hooks UI (#2301)

Browse Source
This commit is contained in:
Muhsin Keloth
2021-06-06 16:59:05 +05:30
committed by GitHub
parent c6487877bf
commit 14b51e108a
35 changed files with 1108 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/dashboard/store/modules/inboxes.js
View File

@@ -65,6 +65,11 @@ export const getters = {
getUIFlags($state) {
return $state.uiFlags;
},
getWebsiteInboxes($state) {
return $state.records.filter(
item => item.channel_type === 'Channel::WebWidget'
);
},
};
export const actions = {

52
app/javascript/dashboard/store/modules/integrations.js
View File

@@ -1,4 +1,5 @@
/* eslint no-param-reassign: 0 */
import Vue from 'vue';
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import * as types from '../mutation-types';
import IntegrationsAPI from '../../api/integrations';
@@ -6,15 +7,23 @@ import IntegrationsAPI from '../../api/integrations';
const state = {
records: [],
uiFlags: {
isCreating: false,
isFetching: false,
isFetchingItem: false,
isUpdating: false,
isCreatingHook: false,
isDeletingHook: false,
},
};
export const getters = {
getIntegrations($state) {
return $state.records;
return $state.records.filter(
item => item.id !== 'fullcontact' && item.id !== 'dialogflow'
);
},
getAppIntegrations($state) {
return $state.records.filter(item => item.id === 'dialogflow');
},
getIntegration: $state => integrationId => {
const [integration] = $state.records.filter(
@@ -63,6 +72,28 @@ export const actions = {
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false });
}
},
createHook: async ({ commit }, hookData) => {
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: true });
try {
const response = await IntegrationsAPI.createHook(hookData);
commit(types.default.ADD_INTEGRATION_HOOKS, response.data);
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false });
} catch (error) {
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false });
throw new Error(error);
}
},
deleteHook: async ({ commit }, { appId, hookId }) => {
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: true });
try {
await IntegrationsAPI.deleteHook(hookId);
commit(types.default.DELETE_INTEGRATION_HOOKS, { appId, hookId });
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false });
} catch (error) {
commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false });
throw new Error(error);
}
},
};
export const mutations = {
@@ -72,6 +103,25 @@ export const mutations = {
[types.default.SET_INTEGRATIONS]: MutationHelpers.set,
[types.default.ADD_INTEGRATION]: MutationHelpers.updateAttributes,
[types.default.DELETE_INTEGRATION]: MutationHelpers.updateAttributes,
[types.default.ADD_INTEGRATION_HOOKS]: ($state, data) => {
$state.records.forEach((element, index) => {
if (element.id === data.app_id) {
const record = $state.records[index];
Vue.set(record, 'hooks', [...record.hooks, data]);
}
});
},
[types.default.DELETE_INTEGRATION_HOOKS]: ($state, { appId, hookId }) => {
$state.records.forEach((element, index) => {
if (element.id === appId) {
const record = $state.records[index];
const hooksWithoutDeletedHook = record.hooks.filter(
hook => hook.id !== hookId
);
Vue.set(record, 'hooks', hooksWithoutDeletedHook);
}
});
},
};
export default {

5
app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js
View File

@@ -9,6 +9,11 @@ describe('#getters', () => {
expect(getters.getInboxes(state)).toEqual(inboxList);
});
it('getWebsiteInboxes', () => {
const state = { records: inboxList };
expect(getters.getWebsiteInboxes(state).length).toEqual(3);
});
it('getInbox', () => {
const state = {
records: inboxList,

81
app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js
View File

@@ -1,29 +1,30 @@
import axios from 'axios';
import { actions } from '../../integrations';
import * as types from '../../../mutation-types';
import types from '../../../mutation-types';
import integrationsList from './fixtures';
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
const errorMessage = { message: 'Incorrect header' };
describe('#actions', () => {
describe('#get', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: integrationsList });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
[types.default.SET_INTEGRATIONS, integrationsList.payload],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
[types.SET_INTEGRATIONS, integrationsList.payload],
[types.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
axios.get.mockRejectedValue(errorMessage);
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
[types.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
]);
});
});
@@ -34,17 +35,17 @@ describe('#actions', () => {
axios.post.mockResolvedValue({ data: data });
await actions.connectSlack({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
[types.default.ADD_INTEGRATION, data],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
[types.ADD_INTEGRATION, data],
[types.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
axios.post.mockRejectedValue(errorMessage);
await actions.connectSlack({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
[types.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
]);
});
});
@@ -55,17 +56,59 @@ describe('#actions', () => {
axios.delete.mockResolvedValue({ data: data });
await actions.deleteIntegration({ commit }, data.id);
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
[types.default.DELETE_INTEGRATION, data],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
[types.DELETE_INTEGRATION, data],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
axios.delete.mockRejectedValue(errorMessage);
await actions.deleteIntegration({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
[types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
]);
});
});
describe('#createHooks', () => {
it('sends correct actions if API is success', async () => {
let data = { id: 'slack', enabled: false };
axios.post.mockResolvedValue({ data: data });
await actions.createHook({ commit }, data);
expect(commit.mock.calls).toEqual([
[types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: true }],
[types.ADD_INTEGRATION_HOOKS, data],
[types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue(errorMessage);
await expect(actions.createHook({ commit })).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: true }],
[types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false }],
]);
});
});
describe('#deleteHook', () => {
it('sends correct actions if API is success', async () => {
let data = { appId: 'dialogflow', hookId: 2 };
axios.delete.mockResolvedValue({ data });
await actions.deleteHook({ commit }, data);
expect(commit.mock.calls).toEqual([
[types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: true }],
[types.DELETE_INTEGRATION_HOOKS, { appId: 'dialogflow', hookId: 2 }],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue(errorMessage);
await expect(actions.deleteHook({ commit }, {})).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: true }],
[types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false }],
]);
});
});

27
app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
View File

@@ -34,6 +34,33 @@ describe('#getters', () => {
]);
});
it('getAppIntegrations', () => {
const state = {
records: [
{
id: 1,
name: 'test1',
logo: 'test',
enabled: true,
},
{
id: 'dialogflow',
name: 'test2',
logo: 'test',
enabled: true,
},
],
};
expect(getters.getAppIntegrations(state)).toEqual([
{
id: 'dialogflow',
name: 'test2',
logo: 'test',
enabled: true,
},
]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {

59
app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js
View File

@@ -1,11 +1,11 @@
import * as types from '../../../mutation-types';
import types from '../../../mutation-types';
import { mutations } from '../../integrations';
describe('#mutations', () => {
describe('#GET_INTEGRATIONS', () => {
it('set integrations records', () => {
const state = { records: [] };
mutations[types.default.SET_INTEGRATIONS](state, [
mutations[types.SET_INTEGRATIONS](state, [
{
id: 1,
name: 'test1',
@@ -23,4 +23,59 @@ describe('#mutations', () => {
]);
});
});
describe('#ADD_INTEGRATION_HOOKS', () => {
it('set integrations hook records', () => {
const state = { records: [{ id: 'dialogflow', hooks: [] }] };
const hookRecord = {
id: 1,
app_id: 'dialogflow',
status: false,
inbox: { id: 1, name: 'Chatwoot' },
account_id: 1,
hook_type: 'inbox',
settings: { project_id: 'test', credentials: {} },
};
mutations[types.ADD_INTEGRATION_HOOKS](state, hookRecord);
expect(state.records).toEqual([
{
id: 'dialogflow',
hooks: [hookRecord],
},
]);
});
});
describe('#DELETE_INTEGRATION_HOOKS', () => {
it('delete integrations hook record', () => {
const state = {
records: [
{
id: 'dialogflow',
hooks: [
{
id: 1,
app_id: 'dialogflow',
status: false,
inbox: { id: 1, name: 'Chatwoot' },
account_id: 1,
hook_type: 'inbox',
settings: { project_id: 'test', credentials: {} },
},
],
},
],
};
mutations[types.DELETE_INTEGRATION_HOOKS](state, {
appId: 'dialogflow',
hookId: 1,
});
expect(state.records).toEqual([
{
id: 'dialogflow',
hooks: [],
},
]);
});
});
});