Merge pull request #871 from glific/feature/webhook-logs

Display the webhook logs

src/common/constants.ts

@@ -74,6 +74,14 @@ export const setColumnToBackendTerms: any = (listName: string, columnName: strin
     STATUS: 'status',
     BENEFICIARY: 'name',
     'PHONE NO': 'phone',
+    TIME: 'updated_at',
+    URL: 'url',
+    'STATUS CODE': 'status_code',
+    ERROR: 'error',
+    METHOD: 'method',
+    'REQUEST HEADER': 'request_headers',
+    'REQUEST JSON': 'request_json',
+    'RESPONSE JSON': 'response_json',
   };
 
   if (listName === 'Collection') {

src/components/UI/Layout/Layout.module.css

@@ -1,3 +1,3 @@
 .Main {
-  width: calc(100%);
+  width: calc(100% - 233px);
 }

src/components/UI/Menu/MenuItem/MenuItem.module.css

@@ -1,3 +1,7 @@
 .Danger {
   color: #dd1f1f !important;
 }
+
+.Spacing {
+  margin-left: 12px;
+}

src/components/UI/Menu/MenuItem/MenuItem.tsx

@@ -22,7 +22,7 @@ const MenuItem: React.SFC<MenuItemProps> = (props) => {
   return (
     <MenuItemElement onClick={onClickHandler} component={Link} to={path} data-testid="MenuItem">
       {icon}
-      <div className={menuItemClass}>{title}</div>
+      <div className={`${menuItemClass} ${icon ? styles.Spacing : ''}`}>{title}</div>
     </MenuItemElement>
   );
 };

src/components/UI/Pager/Pager.module.css

@@ -32,14 +32,16 @@
 
 .TableContainer {
   margin: 14px 24px;
-  margin-bottom: 10px;
+  margin-bottom: 50px;
+  overflow: auto;
+
 }
 
 .TableFooter {
-  position: absolute;
+  position: fixed;
   display: flex !important;
   justify-content: flex-end !important;
-  width: 80%;
+  width: calc(100% - 243px);
   background: #fafafa;
   bottom: 0px;
   right: 4px;
@@ -52,7 +54,7 @@
 }
 
 .FooterRow > div {
-  min-height: 72px;
+  min-height: 55px;
 }
 
 .TableText {
@@ -76,5 +78,3 @@
   margin-bottom: 12px;
   line-height: 1;
 }
-
-

src/components/UI/Pager/Pager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   Table,
   TableHead,
@@ -205,9 +205,6 @@ export const Pager: React.SFC<PagerProps> = (props) => {
     collapseRow,
   } = props;
 
-  // Creates the rows for the table
-  const [tableFooterStyle, setTableFooterStyle] = useState<string | undefined>(undefined);
-
   const rows = createRows(data, columnStyles, showCheckbox, collapseOpen, collapseRow);
   const tableHead = tableHeadColumns(
     columnNames,
@@ -220,24 +217,14 @@ export const Pager: React.SFC<PagerProps> = (props) => {
 
   const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals);
 
-  useEffect(() => {
-    const table = document.querySelector('.MuiTable-root');
-    const html = document.querySelector('html');
-    if (table && html) {
-      if (table.scrollHeight < html.clientHeight - 142) {
-        setTableFooterStyle(styles.TableFooter);
-      }
-    }
-  }, []);
-
   return (
     <div className={styles.TableContainer}>
       <Table className={styles.Table} data-testid="table">
         <TableHead className={styles.TagListHeader} data-testid="tableHead">
           {tableHead}
         </TableHead>
         <TableBody data-testid="tableBody">{rows}</TableBody>
-        <TableFooter className={tableFooterStyle} data-testid="tableFooter">
+        <TableFooter className={styles.TableFooter} data-testid="tableFooter">
           <TableRow>{tablePagination}</TableRow>
         </TableFooter>
       </Table>

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',
         },
       },

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;
+}

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 = (
   <MockedProvider mocks={mocks}>
-    <FlowList />
+    <MemoryRouter>
+      <FlowList />
+    </MemoryRouter>
   </MockedProvider>
 );
 

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<FlowListProps> = () => {
   ];
 
   return (
-    <List
-      title="Flows"
-      listItem="flows"
-      listItemName="flow"
-      pageLink="flow"
-      listIcon={flowIcon}
-      dialogMessage={dialogMessage}
-      refetchQueries={{ query: GET_FLOWS, variables: setVariables() }}
-      {...queries}
-      {...columnAttributes}
-      searchParameter="name"
-      additionalAction={additionalAction}
-      button={{ show: true, label: '+ CREATE FLOW' }}
-    />
+    <>
+      <List
+        title="Flows"
+        listItem="flows"
+        listItemName="flow"
+        pageLink="flow"
+        listIcon={flowIcon}
+        dialogMessage={dialogMessage}
+        refetchQueries={{ query: GET_FLOWS, variables: setVariables() }}
+        {...queries}
+        {...columnAttributes}
+        searchParameter="name"
+        additionalAction={additionalAction}
+        button={{ show: true, label: '+ CREATE FLOW' }}
+      />
+
+      <Link to="/webhook-logs" className={styles.Webhook}>
+        <WebhookLogsIcon />
+        View webhook logs
+      </Link>
+    </>
   );
 };

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',
         },
       },
     },

src/containers/Group/GroupList/GroupList.module.css

@@ -16,6 +16,3 @@
   height: 32px;
 }
 
-.Icon{
-  margin-right: 12px;
-}

src/containers/Group/GroupList/GroupList.tsx

@@ -238,12 +238,12 @@ export const GroupList: React.SFC<GroupListProps> = () => {
     <Menu
       menus={[
         {
-          icon: <ChatDarkIcon className={styles.Icon} />,
+          icon: <ChatDarkIcon />,
           title: 'Send a message',
           onClick: () => setSendMessageDialogShow(true),
         },
         {
-          icon: <FlowDarkIcon className={styles.Icon} />,
+          icon: <FlowDarkIcon />,
           title: 'Start a flow',
           onClick: setFlowDialog,
         },

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,