Merge pull request #914 from glific/feature/webhook-update

Webhook status field update

src/components/UI/Pager/Pager.tsx

@@ -16,6 +16,7 @@ import { setColumnToBackendTerms } from '../../../common/constants';
 
 interface PagerProps {
   columnNames: Array<any>;
+  removeSortBy: Array<any>;
   data: any;
   columnStyles?: Array<any>;
   totalRows: number;
@@ -127,7 +128,8 @@ const tableHeadColumns = (
   tableVals: any,
   handleTableChange: Function,
   showCheckbox?: boolean,
-  listName?: string
+  listName?: string,
+  removeSortBy?: Array<any>
 ) => {
   let batchAction = null;
   if (showCheckbox) {
@@ -142,7 +144,7 @@ const tableHeadColumns = (
             key={name}
             className={`${styles.TableCell} ${columnStyles ? columnStyles[i] : null}`}
           >
-            {i !== columnNames.length - 1 ? (
+            {i !== columnNames.length - 1 && !removeSortBy?.includes(name) ? (
               <TableSortLabel
                 active={setColumnToBackendTerms(listName, name) === tableVals.sortCol}
                 direction={tableVals.sortDirection}
@@ -203,6 +205,7 @@ export const Pager: React.SFC<PagerProps> = (props) => {
     totalRows,
     collapseOpen,
     collapseRow,
+    removeSortBy = [],
   } = props;
 
   const rows = createRows(data, columnStyles, showCheckbox, collapseOpen, collapseRow);
@@ -212,7 +215,8 @@ export const Pager: React.SFC<PagerProps> = (props) => {
     tableVals,
     handleTableChange,
     showCheckbox,
-    listItemName
+    listItemName,
+    removeSortBy
   );
 
   const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals);

src/containers/List/List.tsx

@@ -69,6 +69,7 @@ export interface ListProps {
   collapseOpen?: any;
   collapseRow?: any;
   defaultSortBy?: string | null;
+  removeSortBy?: any;
 }
 
 interface TableVals {
@@ -92,6 +93,7 @@ export const List: React.SFC<ListProps> = ({
   columnStyles,
   title,
   dialogTitle,
+  removeSortBy = null,
   button = {
     show: true,
     label: 'Add New',
@@ -453,6 +455,7 @@ export const List: React.SFC<ListProps> = ({
     displayList = (
       <Pager
         columnStyles={columnStyles}
+        removeSortBy={removeSortBy !== null ? removeSortBy : []}
         columnNames={columnNames}
         data={itemList}
         listItemName={listItemName}

src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.module.css

@@ -17,13 +17,22 @@
 .TableText {
   margin-right: 23px;
   text-align: left;
-  padding: 12px 0px;
+  padding: 8px 0px;
   font-size: 16px;
   color: #93a29b;
   line-height: 1.25;
   margin: 0;
 }
 
+.ErrorStyle {
+  background-color: #fbe8e8;
+  border-radius: 14px;
+  padding: 4px 8px;
+  color: #dd1f1f;
+  min-width: 77px;
+  text-align: center;
+}
+
 .CroppedText {
   composes: TableText;
   cursor: pointer;
@@ -36,6 +45,19 @@
   align-content: center;
 }
 
+.Success {
+  background-color: #c8ebdc;
+  border-radius: 14px;
+  padding: 4px 8px;
+  color: #119656;
+}
+
+.Redirect {
+  background-color: #dfa1f9;
+  border-radius: 14px;
+  padding: 4px 8px;
+  color: #7200a1;
+}
 .Time {
   width: 180px;
 }
@@ -48,6 +70,10 @@
   width: 140px;
 }
 
+.Status {
+  width: 140px;
+}
+
 .Error {
   width: 150px;
 }
@@ -69,8 +95,6 @@
   padding: 10px;
 }
 
-
-
 .PopoverActions {
   font-size: 16px;
   color: #073f24;
@@ -79,6 +103,13 @@
   padding: 16px;
 }
 
+.StatusContainer {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  font-size: 16px;
+}
+
 .PopoverActions span {
   display: flex;
   cursor: pointer;

src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx

@@ -19,11 +19,34 @@ const getTime = (time: string) => (
   <div className={styles.TableText}>{moment(time).format('DD-MM-YYYY hh:mm')}</div>
 );
 
+const getStatus = (status: string) => {
+  let showStatus;
+  switch (status) {
+    case 'Success':
+      showStatus = <div className={styles.Success}>{status}</div>;
+      break;
+    case 'Error':
+      showStatus = <div className={styles.ErrorStyle}>{status}</div>;
+      break;
+    case 'Redirect':
+      showStatus = <div className={styles.Redirect}>{status}</div>;
+      break;
+    case 'Undefined':
+      showStatus = null;
+      break;
+    default:
+      showStatus = status;
+  }
+
+  return <div className={styles.StatusContainer}>{showStatus}</div>;
+};
+
 const getText = (text: string) => <div className={styles.TableText}>{text}</div>;
 
 const columnNames = [
   'TIME',
   'URL',
+  'STATUS',
   'STATUS CODE',
   'ERROR',
   'METHOD',
@@ -35,6 +58,7 @@ const dialogMessage = "You won't be able to use this for tagging messages.";
 const columnStyles = [
   styles.Time,
   styles.Url,
+  styles.Status,
   styles.StatusCode,
   styles.Error,
   styles.Method,
@@ -114,6 +138,7 @@ export const WebhookLogsList: React.SFC<TagListProps> = () => {
   const getColumns = ({
     url,
     method,
+    status,
     requestHeaders,
     requestJson,
     statusCode,
@@ -123,6 +148,7 @@ export const WebhookLogsList: React.SFC<TagListProps> = () => {
   }: any) => ({
     updatedAt: getTime(updatedAt),
     url: getCroppedText(url, true),
+    status: getStatus(status),
     statusCode: getText(statusCode),
     error: getCroppedText(error, true),
     method: getText(method),
@@ -172,6 +198,7 @@ export const WebhookLogsList: React.SFC<TagListProps> = () => {
         {...queries}
         restrictedAction={restrictedAction}
         {...columnAttributes}
+        removeSortBy={['STATUS']}
       />
       {popover}
     </>

src/graphql/queries/WebhookLogs.ts

@@ -6,6 +6,7 @@ export const FILTER_WEBHOOK_LOGS = gql`
       id
       url
       method
+      status
       requestHeaders
       requestJson
       statusCode