@@ -237,7 +224,7 @@ export const Pager: React.SFC = (props) => {
{tableHead}
{rows}
-
+
{tablePagination}
diff --git a/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts b/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts
index 773c637fe..502705550 100644
--- a/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts
+++ b/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts
@@ -6,7 +6,6 @@ const contactSearchQuery = {
query: CONTACT_SEARCH_QUERY,
variables: {
filter: {
- name: '',
status: 'BLOCKED',
},
opts: {
@@ -43,7 +42,6 @@ const contactSearchQueryBlocked = {
query: CONTACT_SEARCH_QUERY,
variables: {
filter: {
- name: '',
status: 'BLOCKED',
},
opts: {
@@ -79,7 +77,6 @@ const contactCountQuery = {
query: GET_CONTACT_COUNT,
variables: {
filter: {
- name: '',
status: 'BLOCKED',
},
opts: { limit: 50, offset: 0, order: 'ASC' },
@@ -105,7 +102,6 @@ export const CONTACT_LIST_MOCKS = [
query: GET_CONTACT_COUNT,
variables: {
filter: {
- name: '',
status: 'BLOCKED',
},
},
diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css
index 1b2ada6b3..2e0a44eea 100644
--- a/src/containers/Flow/FlowList/FlowList.module.css
+++ b/src/containers/Flow/FlowList/FlowList.module.css
@@ -43,3 +43,18 @@
padding-top: 12px;
color: #93a29b;
}
+
+.Webhook {
+ color: #119656;
+ position: fixed;
+ bottom: 16px;
+ font-size: 16px;
+ font-weight: 500;
+ left: 262px;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.Webhook svg {
+ margin-right: 8px;
+}
diff --git a/src/containers/Flow/FlowList/FlowList.test.tsx b/src/containers/Flow/FlowList/FlowList.test.tsx
index 85e15560a..7cda3b64a 100644
--- a/src/containers/Flow/FlowList/FlowList.test.tsx
+++ b/src/containers/Flow/FlowList/FlowList.test.tsx
@@ -3,12 +3,15 @@ import { render } from '@testing-library/react';
import { FlowList } from './FlowList';
import { MockedProvider } from '@apollo/client/testing';
import { getFlowCountQuery } from '../../../mocks/Flow';
+import { MemoryRouter } from 'react-router';
const mocks = [getFlowCountQuery];
const flowList = (
-
+
+
+
);
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 4595f0aa9..454903396 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -1,11 +1,12 @@
import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
import moment from 'moment';
import styles from './FlowList.module.css';
import { ReactComponent as FlowIcon } from '../../../assets/images/icons/Flow/Dark.svg';
import { ReactComponent as DuplicateIcon } from '../../../assets/images/icons/Flow/Duplicate.svg';
import { ReactComponent as ConfigureIcon } from '../../../assets/images/icons/Configure/UnselectedDark.svg';
+import { ReactComponent as WebhookLogsIcon } from '../../../assets/images/icons/Webhook/WebhookLight.svg';
import { List } from '../../List/List';
import { FILTER_FLOW, GET_FLOWS, GET_FLOW_COUNT } from '../../../graphql/queries/Flow';
import { DELETE_FLOW } from '../../../graphql/mutations/Flow';
@@ -66,19 +67,26 @@ export const FlowList: React.SFC
= () => {
];
return (
-
+ <>
+
+
+
+
+ View webhook logs
+
+
);
};
diff --git a/src/containers/Form/FormLayout.test.helper.ts b/src/containers/Form/FormLayout.test.helper.ts
index f69730363..2c740162f 100644
--- a/src/containers/Form/FormLayout.test.helper.ts
+++ b/src/containers/Form/FormLayout.test.helper.ts
@@ -94,9 +94,7 @@ export const LIST_ITEM_MOCKS = [
request: {
query: GET_TAGS_COUNT,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
},
},
result: {
@@ -109,14 +107,12 @@ export const LIST_ITEM_MOCKS = [
request: {
query: FILTER_TAGS,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
opts: {
limit: 50,
offset: 0,
order: 'ASC',
- orderWith:'label'
+ orderWith: 'label',
},
},
},
diff --git a/src/containers/Group/GroupList/GroupList.module.css b/src/containers/Group/GroupList/GroupList.module.css
index f4876bf9b..fa653c28a 100644
--- a/src/containers/Group/GroupList/GroupList.module.css
+++ b/src/containers/Group/GroupList/GroupList.module.css
@@ -16,6 +16,3 @@
height: 32px;
}
-.Icon{
- margin-right: 12px;
-}
diff --git a/src/containers/Group/GroupList/GroupList.tsx b/src/containers/Group/GroupList/GroupList.tsx
index cbeb0f367..a296ad255 100644
--- a/src/containers/Group/GroupList/GroupList.tsx
+++ b/src/containers/Group/GroupList/GroupList.tsx
@@ -238,12 +238,12 @@ export const GroupList: React.SFC = () => {
,
+ icon: ,
title: 'Send a message',
onClick: () => setSendMessageDialogShow(true),
},
{
- icon: ,
+ icon: ,
title: 'Start a flow',
onClick: setFlowDialog,
},
diff --git a/src/containers/List/List.test.helper.ts b/src/containers/List/List.test.helper.ts
index 919c22a79..1e8c7d798 100644
--- a/src/containers/List/List.test.helper.ts
+++ b/src/containers/List/List.test.helper.ts
@@ -24,9 +24,7 @@ const count = {
request: {
query: GET_TAGS_COUNT,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
},
},
result: {
@@ -40,9 +38,7 @@ const filter = {
request: {
query: FILTER_TAGS,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
opts: {
limit: 50,
offset: 0,
diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
index f062c567e..f729d138e 100644
--- a/src/containers/List/List.tsx
+++ b/src/containers/List/List.tsx
@@ -31,7 +31,7 @@ export interface ListProps {
countQuery: DocumentNode;
listItem: string;
filterItemsQuery: DocumentNode;
- deleteItemQuery: DocumentNode;
+ deleteItemQuery: DocumentNode | null;
listItemName: string;
dialogMessage: string;
pageLink: string;
@@ -166,7 +166,10 @@ export const List: React.SFC = ({
});
};
let filter: any = {};
- filter[searchParameter] = searchVal;
+
+ if (searchVal !== '') {
+ filter[searchParameter] = searchVal;
+ }
filter = { ...filter, ...filters };
const filterPayload = useCallback(() => {
return {
@@ -216,20 +219,23 @@ export const List: React.SFC = ({
}
}, [userRole]);
- // Make a new count request for a new count of the # of rows from this query in the back-end.
+ let deleteItem: any;
- const [deleteItem] = useMutation(deleteItemQuery, {
- onCompleted: () => {
- checkUserRole();
- refetchCount();
- },
- refetchQueries: () => {
- if (refetchQueries) {
- return [{ query: refetchQueries.query, variables: refetchQueries.variables }];
- }
- return [{ query: filterItemsQuery, variables: filterPayload() }];
- },
- });
+ // Make a new count request for a new count of the # of rows from this query in the back-end.
+ if (deleteItemQuery) {
+ [deleteItem] = useMutation(deleteItemQuery, {
+ onCompleted: () => {
+ checkUserRole();
+ refetchCount();
+ },
+ refetchQueries: () => {
+ if (refetchQueries) {
+ return [{ query: refetchQueries.query, variables: refetchQueries.variables }];
+ }
+ return [{ query: filterItemsQuery, variables: filterPayload() }];
+ },
+ });
+ }
const showDialogHandler = (id: any, label: string) => {
setDeleteItemName(label);
diff --git a/src/containers/Template/Template.test.helper.ts b/src/containers/Template/Template.test.helper.ts
index 56a26d1b1..21ce733a9 100644
--- a/src/containers/Template/Template.test.helper.ts
+++ b/src/containers/Template/Template.test.helper.ts
@@ -28,7 +28,6 @@ const speedSend = {
query: FILTER_TEMPLATES,
variables: {
filter: {
- label: '',
isHsm: false,
},
@@ -71,7 +70,7 @@ const speedSendOrderWith = {
request: {
query: FILTER_TEMPLATES,
variables: {
- filter: { label: '', isHsm: false },
+ filter: { isHsm: false },
opts: { limit: 50, offset: 0, order: 'ASC', orderWith: 'label' },
},
},
@@ -110,7 +109,6 @@ const HSMTemplate = {
query: FILTER_TEMPLATES,
variables: {
filter: {
- label: '',
isHsm: true,
},
diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.module.css b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.module.css
new file mode 100644
index 000000000..902871845
--- /dev/null
+++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.module.css
@@ -0,0 +1,95 @@
+.WebhookLogIcon {
+ width: 29px;
+ height: 29px;
+}
+
+.LabelText {
+ font-family: 'heebo', sans-serif;
+ display: flex;
+ font-weight: 500;
+ font-size: 20px;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ color: #073f24;
+ line-height: 1;
+}
+
+.TableText {
+ margin-right: 23px;
+ text-align: left;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #93a29b;
+ line-height: 1.25;
+ margin: 0;
+}
+
+.CroppedText {
+ composes: TableText;
+ cursor: pointer;
+}
+
+.LabelContainer {
+ display: flex;
+ height: fit-content;
+ align-items: baseline;
+ align-content: center;
+}
+
+.Time {
+ width: 180px;
+}
+
+.Url {
+ width: 200px;
+}
+
+.StatusCode {
+ width: 140px;
+}
+
+.Error {
+ width: 150px;
+}
+
+.Method {
+ width: 120px;
+}
+
+.Json {
+ width: 200px;
+}
+
+.PopoverText {
+ max-width: 400px;
+ overflow-x: auto;
+ max-height: 500px;
+ font-size: 16px;
+ color: #073f24;
+ padding: 10px;
+}
+
+
+
+.PopoverActions {
+ font-size: 16px;
+ color: #073f24;
+ display: flex;
+ align-items: center;
+ padding: 16px;
+}
+
+.PopoverActions span {
+ display: flex;
+ cursor: pointer;
+}
+
+.PopoverActions img {
+ height: 18px;
+ margin-right: 12px;
+}
+
+.PopoverActions button {
+ margin-left: auto;
+ margin-right: 0px !important;
+}
diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx
new file mode 100644
index 000000000..be0386611
--- /dev/null
+++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import { Popover } from '@material-ui/core';
+import { useApolloClient } from '@apollo/client';
+import moment from 'moment';
+
+import styles from './WebhookLogsList.module.css';
+import { ReactComponent as WebhookLogIcon } from '../../../assets/images/icons/Webhook/WebhookDark.svg';
+import { ReactComponent as ViewIcon } from '../../../assets/images/icons/View.svg';
+import CopyIcon from '../../../assets/images/icons/Copy.png';
+import { List } from '../../List/List';
+import { FILTER_WEBHOOK_LOGS, GET_WEBHOOK_LOGS_COUNT } from '../../../graphql/queries/WebhookLogs';
+import Menu from '../../../components/UI/Menu/Menu';
+import { setNotification } from '../../../common/notification';
+import { Button } from '../../../components/UI/Form/Button/Button';
+
+export interface TagListProps {}
+
+const getTime = (time: string) => (
+ {moment(time).format('DD-MM-YYYY hh:mm')}
+);
+
+const getText = (text: string) => {text}
;
+
+const columnNames = [
+ 'TIME',
+ 'URL',
+ 'STATUS CODE',
+ 'ERROR',
+ 'METHOD',
+ 'REQUEST HEADER',
+ 'REQUEST JSON',
+ 'RESPONSE JSON',
+];
+const dialogMessage = "You won't be able to use this for tagging messages.";
+const columnStyles = [
+ styles.Time,
+ styles.Url,
+ styles.StatusCode,
+ styles.Error,
+ styles.Method,
+ styles.Json,
+ styles.Json,
+ styles.Json,
+];
+const tagIcon = ;
+
+const queries = {
+ countQuery: GET_WEBHOOK_LOGS_COUNT,
+ filterItemsQuery: FILTER_WEBHOOK_LOGS,
+ deleteItemQuery: null,
+};
+
+const restrictedAction = () => {
+ return { delete: false, edit: false };
+};
+
+export const WebhookLogsList: React.SFC = () => {
+ const client = useApolloClient();
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [open, setOpen] = useState(false);
+ const [text, setText] = useState();
+
+ const handleClick = (event: any) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const copyToClipboard = (copiedText: any) => {
+ navigator.clipboard.writeText(copiedText).then(() => {
+ setNotification(client, 'Copied to clipboard');
+ });
+ };
+
+ const getCroppedText = (croppedtext: string, isUrl: boolean = false) => {
+ if (!croppedtext) {
+ return NULL
;
+ }
+
+ let newtext = croppedtext;
+ if (isUrl) {
+ newtext = JSON.stringify(croppedtext);
+ }
+
+ const Menus = [
+ {
+ title: 'Copy text',
+ icon: 
,
+ onClick: () => {
+ copyToClipboard(croppedtext);
+ },
+ },
+ {
+ title: 'View',
+ icon: ,
+ onClick: () => {
+ setText(newtext);
+ setOpen(true);
+ },
+ },
+ ];
+ return (
+
+ );
+ };
+
+ const getColumns = ({
+ url,
+ method,
+ requestHeaders,
+ requestJson,
+ statusCode,
+ responseJson,
+ error,
+ updatedAt,
+ }: any) => ({
+ updatedAt: getTime(updatedAt),
+ url: getCroppedText(url, true),
+ statusCode: getText(statusCode),
+ error: getCroppedText(error, true),
+ method: getText(method),
+ requestHeaders: getCroppedText(requestHeaders),
+ requestJson: getCroppedText(requestJson),
+ responseJson: getCroppedText(responseJson),
+ });
+
+ const handleClose = () => {
+ setOpen(false);
+ setAnchorEl(null);
+ };
+
+ const columnAttributes = {
+ columnNames,
+ columns: getColumns,
+ columnStyles,
+ };
+
+ const popover = (
+
+
+
{JSON.stringify(text ? JSON.parse(text) : '', null, 2)}
+
+
copyToClipboard(text)} aria-hidden="true">
+
+ Copy text
+
+
+
+ {popover}
+
+ );
+};
diff --git a/src/graphql/queries/WebhookLogs.ts b/src/graphql/queries/WebhookLogs.ts
new file mode 100644
index 000000000..b240bb277
--- /dev/null
+++ b/src/graphql/queries/WebhookLogs.ts
@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const FILTER_WEBHOOK_LOGS = gql`
+ query webhookLogs($filter: WebhookLogFilter, $opts: Opts) {
+ webhookLogs(filter: $filter, opts: $opts) {
+ id
+ url
+ method
+ requestHeaders
+ requestJson
+ statusCode
+ responseJson
+ error
+ updatedAt
+ }
+ }
+`;
+
+export const GET_WEBHOOK_LOGS_COUNT = gql`
+ query countWebhookLogs($filter: WebhookLogFilter) {
+ countWebhookLogs(filter: $filter)
+ }
+`;
diff --git a/src/mocks/Collection.tsx b/src/mocks/Collection.tsx
index 43f75c6be..523a87dd3 100644
--- a/src/mocks/Collection.tsx
+++ b/src/mocks/Collection.tsx
@@ -37,7 +37,7 @@ export const countCollectionsQuery = {
request: {
query: COLLECTION_QUERY_COUNT,
variables: {
- filter: { label: '' },
+ filter: {},
},
},
result: {
@@ -63,7 +63,7 @@ const collectionQuery = (QUERY: any, filter: any, limit: number, offset: number,
export const getCollectionsQuery = [
{
- request: collectionQuery(COLLECTION_QUERY, { label: '' }, 10, 0, 'ASC'),
+ request: collectionQuery(COLLECTION_QUERY, {}, 10, 0, 'ASC'),
result: {
data: {
savedSearches: [
diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx
index 981ed3a1b..57af295f5 100644
--- a/src/mocks/Contact.tsx
+++ b/src/mocks/Contact.tsx
@@ -129,7 +129,7 @@ export const updateContactStatusQuery = {
export const countGroupContactsQuery = {
request: {
query: GET_CONTACT_COUNT,
- variables: { filter: { name: '', includeGroups: 1 } },
+ variables: { filter: { includeGroups: 1 } },
},
result: {
data: {
@@ -159,7 +159,7 @@ export const getGroupContactsQuery = {
request: {
query: CONTACT_SEARCH_QUERY,
variables: {
- filter: { name: '', includeGroups: 1 },
+ filter: { includeGroups: 1 },
opts: {
limit: 50,
offset: 0,
diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx
index 2d1ad9a33..70dea2e17 100644
--- a/src/mocks/Flow.tsx
+++ b/src/mocks/Flow.tsx
@@ -81,9 +81,7 @@ export const getFlowCountQuery = {
request: {
query: GET_FLOW_COUNT,
variables: {
- filter: {
- name: '',
- },
+ filter: {},
},
},
diff --git a/src/mocks/Group.tsx b/src/mocks/Group.tsx
index 8fadd2c01..50c141968 100644
--- a/src/mocks/Group.tsx
+++ b/src/mocks/Group.tsx
@@ -82,7 +82,7 @@ export const getGroupUsersQuery = {
export const countGroupQuery = {
request: {
query: GET_GROUPS_COUNT,
- variables: { filter: { label: '' } },
+ variables: { filter: {} },
},
result: {
data: {
@@ -95,9 +95,7 @@ export const filterGroupQuery = {
request: {
query: FILTER_GROUPS,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
opts: {
limit: 50,
offset: 0,
diff --git a/src/mocks/Tag.tsx b/src/mocks/Tag.tsx
index 59337bde3..552fda53e 100644
--- a/src/mocks/Tag.tsx
+++ b/src/mocks/Tag.tsx
@@ -110,9 +110,7 @@ export const getTagsCountQuery = {
request: {
query: GET_TAGS_COUNT,
variables: {
- filter: {
- label: '',
- },
+ filter: {},
},
},
result: {
diff --git a/src/mocks/Template.tsx b/src/mocks/Template.tsx
index 074c590d2..007e0af73 100644
--- a/src/mocks/Template.tsx
+++ b/src/mocks/Template.tsx
@@ -137,7 +137,6 @@ export const templateCountQuery = (isHsm: boolean, count: number = 3) => {
query: GET_TEMPLATES_COUNT,
variables: {
filter: {
- label: '',
isHsm: isHsm,
},
},
diff --git a/src/route/AuthenticatedRoute/AuthenticatedRoute.tsx b/src/route/AuthenticatedRoute/AuthenticatedRoute.tsx
index 7132f82c6..315cb6177 100644
--- a/src/route/AuthenticatedRoute/AuthenticatedRoute.tsx
+++ b/src/route/AuthenticatedRoute/AuthenticatedRoute.tsx
@@ -30,6 +30,7 @@ import { getUserRole } from '../../context/role';
import { Organisation } from '../../containers/SettingList/Organisation/Organisation';
import { useToast } from '../../services/ToastService';
import { ChatSubscription } from '../../containers/Chat/ChatSubscription/ChatSubscription';
+import { WebhookLogsList } from '../../containers/WebhookLogs/WebhookLogsList/WebhookLogsList';
import Loading from '../../components/UI/Layout/Loading/Loading';
const defaultRedirect = () => ;
@@ -92,6 +93,7 @@ const routeAdmin = (
+