console: improve events table UX (close #5477) (#5507)

https://github.com/hasura/graphql-engine/pull/5507

console/src/components/Common/CustomInputTypes/JsonInput.js

@@ -88,7 +88,7 @@ const JsonInput = props => {
         theme="github"
         name="jsontoggler"
         minLines={10}
-        maxLines={100}
+        maxLines={30}
         width="100%"
         value={data}
         showPrintMargin={false}

console/src/components/Common/CustomInputTypes/TextInput.js

@@ -103,7 +103,7 @@ const TextInput = props => {
         theme="chrome"
         name="texttoggler"
         minLines={10}
-        maxLines={100}
+        maxLines={30}
         width="100%"
         value={data}
         showPrintMargin={false}

console/src/components/Services/Events/Common/Components/EventsTable.tsx

@@ -4,10 +4,11 @@ import ReactTable, {
   ComponentPropsGetter0,
 } from 'react-table';
 import 'react-table/react-table.css';
-import { FilterTableProps } from './types';
+import { FilterTableProps, GridHeadingProps } from './types';
 import { ordinalColSort } from '../../../Data/utils';
 import styles from '../../Events.scss';
 import EventsSubTable from './EventsSubTable';
+import ExpanderButton from './ExpanderButton';
 import { sanitiseRow } from '../../utils';
 import { makeOrderBy } from '../../../../Common/utils/v1QueryUtils';
 import { convertDateTimeToLocale } from '../../../../Common/utils/jsUtils';
@@ -16,7 +17,7 @@ import Button from '../../../../Common/Button';
 
 type CancelButtonProps = {
   id: string;
-  onClickHandler: () => void;
+  onClickHandler: (e: React.MouseEvent) => void;
 };
 
 const CancelEventButton: React.FC<CancelButtonProps> = ({
@@ -25,10 +26,14 @@ const CancelEventButton: React.FC<CancelButtonProps> = ({
 }) => (
   <Button
     key={id}
+    className={styles.add_mar_right_small}
     onClick={onClickHandler}
     color="white"
     size="xs"
     title="Cancel Event"
+    onMouseDown={e => {
+      e.preventDefault();
+    }}
   >
     <i className="fa fa-close" />
   </Button>
@@ -92,31 +97,57 @@ const EventsTable: React.FC<Props> = props => {
     }
   };
 
-  const gridHeadings = sortedColumns.map(column => {
-    if (column === 'actions') {
-      return { Header: '', accessor: column, width: 50 };
-    }
-    return {
-      Header: column,
-      accessor: column,
-    };
-  });
-
-  const invocationColumns = ['status', 'id', 'created_at'];
-
-  const invocationGridHeadings = invocationColumns.map(column => {
-    return {
-      Header: column,
-      accessor: column,
-    };
-  });
-
   const onCancelHandler = (id: string, scheduledAt: string) => {
     if (onCancelEvent) {
       onCancelEvent(id, scheduledAt, runQuery);
     }
   };
 
+  const expanderActions: GridHeadingProps = {
+    expander: true,
+    Header: '',
+    accessor: 'expander',
+    Expander: ({ isExpanded, viewIndex }) => {
+      const row = rows[viewIndex];
+      return (
+        <>
+          {columns.includes('actions') && (
+            <CancelEventButton
+              id={row.id}
+              onClickHandler={event => {
+                onCancelHandler(row.id, row.scheduled_time);
+                event.stopPropagation();
+              }}
+            />
+          )}
+          <ExpanderButton isExpanded={isExpanded} />
+        </>
+      );
+    },
+  };
+
+  const gridHeadings = [expanderActions];
+
+  sortedColumns.forEach(column => {
+    if (column !== 'actions') {
+      gridHeadings.push({
+        Header: column,
+        accessor: column,
+      });
+    }
+  });
+
+  const invocationColumns = ['status', 'id', 'created_at'];
+
+  const invocationGridHeadings: GridHeadingProps[] = [expanderActions];
+
+  invocationColumns.forEach(column => {
+    invocationGridHeadings.push({
+      Header: column,
+      accessor: column,
+    });
+  });
+
   const rowsFormatted = rows.map(row => {
     const formattedRow = Object.keys(row).reduce((fr, col) => {
       return {
@@ -126,12 +157,6 @@ const EventsTable: React.FC<Props> = props => {
     }, {});
     return {
       ...formattedRow,
-      actions: columns.includes('actions') ? (
-        <CancelEventButton
-          id={row.id}
-          onClickHandler={() => onCancelHandler(row.id, row.scheduled_time)}
-        />
-      ) : undefined,
       delivered: getEventDeliveryIcon(row.delivered),
       status: getEventStatusIcon(row.status),
       scheduled_time: row.scheduled_time ? (

console/src/components/Services/Events/Common/Components/ExpanderButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from '../../../../Common/Button';
+
+interface Props extends React.ComponentProps<React.FC> {
+  isExpanded: boolean;
+}
+
+const ExpanderButton: React.FC<Props> = ({ isExpanded }) => (
+  <Button
+    color="white"
+    size="xs"
+    title={isExpanded ? 'Collapse row' : 'Expand row'}
+    // This is needed to remove focus on button when clicked (to avoid button style change)
+    onMouseDown={e => {
+      e.preventDefault();
+    }}
+  >
+    {isExpanded ? (
+      <i className="fa fa-compress" />
+    ) : (
+      <i className="fa fa-expand" />
+    )}
+  </Button>
+);
+
+export default ExpanderButton;

console/src/components/Services/Events/Common/Components/InvocationLogsTable.tsx

@@ -4,13 +4,13 @@ import ReactTable, {
   ComponentPropsGetter0,
 } from 'react-table';
 import 'react-table/react-table.css';
-import { FilterTableProps } from './types';
+import { FilterTableProps, GridHeadingProps } from './types';
 import { Dispatch } from '../../../../../types';
-// import { convertDateTimeToLocale } from '../../../../Common/utils/jsUtils';
 import { makeOrderBy } from '../../../../Common/utils/v1QueryUtils';
 import { ordinalColSort } from '../../../Data/utils';
 import styles from '../../Events.scss';
 import InvocationLogDetails from './InvocationLogDetails';
+import ExpanderButton from './ExpanderButton';
 import { redeliverDataEvent } from '../../ServerIO';
 import ReloadIcon from '../../../../Common/Icons/Reload';
 import Modal from '../../../../Common/Modal/Modal';
@@ -18,6 +18,25 @@ import RedeliverEvent from './RedeliverEvent';
 import { convertDateTimeToLocale } from '../../../../Common/utils/jsUtils';
 import { Nullable } from '../../../../Common/utils/tsUtils';
 import { getInvocationLogStatus } from './utils';
+import Button from '../../../../Common/Button/Button';
+
+type RedeliverButtonProps = {
+  onClickHandler: (e: React.MouseEvent) => void;
+};
+
+const RedliverEventButton: React.FC<RedeliverButtonProps> = ({
+  onClickHandler,
+}) => (
+  <Button
+    color="white"
+    size="xs"
+    title="Redeliver event"
+    onClick={onClickHandler}
+    className={`${styles.cursorPointer} ${styles.add_mar_right_small}`}
+  >
+    <ReloadIcon className="" />
+  </Button>
+);
 
 interface Props extends FilterTableProps {
   dispatch: Dispatch;
@@ -100,11 +119,40 @@ const InvocationLogsTable: React.FC<Props> = props => {
     }
   };
 
-  const gridHeadings = sortedColumns.map(column => {
-    return {
-      Header: column,
-      accessor: column,
-    };
+  const expanderActions: GridHeadingProps = {
+    expander: true,
+    Header: '',
+    accessor: 'expander',
+    Expander: ({ isExpanded, viewIndex }) => {
+      const row = rows[viewIndex];
+      return (
+        <>
+          {columns.includes('redeliver') && (
+            <RedliverEventButton
+              onClickHandler={e => {
+                if (isRedelivering) {
+                  return;
+                }
+                redeliverHandler(row.event_id);
+                e.stopPropagation();
+              }}
+            />
+          )}
+          <ExpanderButton isExpanded={isExpanded} />
+        </>
+      );
+    },
+  };
+
+  const gridHeadings = [expanderActions];
+
+  sortedColumns.forEach(column => {
+    if (column !== 'redeliver') {
+      gridHeadings.push({
+        Header: column,
+        accessor: column,
+      });
+    }
   });
 
   const rowsFormatted = rows.map(r => {
@@ -125,21 +173,6 @@ const InvocationLogsTable: React.FC<Props> = props => {
         </div>
       ),
     };
-    if (columns.includes('redeliver')) {
-      formattedRow.redeliver = (
-        <div
-          onClick={() => {
-            if (isRedelivering) {
-              return;
-            }
-            redeliverHandler(r.event_id);
-          }}
-          className={styles.cursorPointer}
-        >
-          <ReloadIcon className="" />
-        </div>
-      );
-    }
     return formattedRow;
   });
 

console/src/components/Services/Events/Common/Components/types.ts

@@ -13,3 +13,14 @@ export type FilterTableProps = {
   columns: string[];
   identifier: string;
 };
+
+export type GridHeadingProps = {
+  Header: string;
+  accessor: string;
+  width?: number;
+  expander?: boolean;
+  Expander?: React.FC<{
+    isExpanded: boolean;
+    viewIndex: number;
+  }>;
+};