Repository: hasura/graphql-engine
File: console/src/components/Services/Events/Common/Components/EventsTable.tsx (TypeScript)

Code before:

  const changePageSize = (size: number) => {
    if (filterState.limit !== size) {
      runQuery({
        limit: size,
      });
    }
  };

  const gridHeadings = sortedColumns.map(column => {
    return {
      Header: column,
      accessor: column,
    };
  });

  const invocationColumns = ['status', 'id', 'created_at'];

  const invocationGridHeadings = invocationColumns.map(column => {
    return {
      Header: column,
      accessor: column,
    };
  });

  const cancelButtonHandler = (row: {
    id: string;
    trigger_name?: string;
    cron_event_logs?: string;
  }) => {
    const isCronTrigger = row?.trigger_name && row?.cron_event_logs;

    if (isCronTrigger) {
      cancelEvent(
        dispatch,
        'hdb_cron_events',
        row.id,
        'Successfully cancelled cron event',
        'Error in deleting cron event',
        () => runQuery()
      );
    }

    if (row?.id && !isCronTrigger) {
      cancelEvent(
        dispatch,
        'hdb_scheduled_events',
        row.id,
        'Successfully cancelled one-off scheduled event',
        'Error in deleting one-off scheduled event',
        () => runQuery()

Review comment (suggestion):
out, create handlers in `PendingEvents.tsx` , and pass:
`onCancelEvent` prop to:
```
  const renderRows: FilterRenderProp = (
    rows,
    count,
    filterState,
    setFilterState,
    runQuery
  ) => (
    <EventsTable
      rows={rows}
      count={count}
      filterState={filterState}
      setFilterState={setFilterState}
      runQuery={runQuery}
      columns={[
        'id',
        'status',
        'scheduled_time',
        'created_at',
        'tries',
        'actions',
      ]}
      identifier={triggerName}
      onCancelEvent={}
    />
  );
```

Code after:
  const rowsFormatted = rows.map(row => {
    const formattedRow = Object.keys(row).reduce((fr, col) => {
      return {
        ...fr,
        [col]: <div>{row[col]}</div>,
      };
    }, {});
    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 ? (
        <div>{convertDateTimeToLocale(row.scheduled_time)}</div>
      ) : undefined,
      created_at: row.created_at ? (
        <div>{convertDateTimeToLocale(row.created_at)}</div>
      ) : undefined,
    };
  });

  const getTheadThProps: ComponentPropsGetterC = (
    finalState,
    some,
    column
  ) => ({
    onClick: () => {
      if (
        column &&
        column.Header &&
        shouldSortColumn &&
        column.Header !== 'Actions'
      ) {
        sortByColumn(column.Header as string);
      }
      shouldSortColumn = true;
    },
  });

  const getResizerProps: ComponentPropsGetter0 = (
    finalState,
    none,
    column,
    ctx
  ) => ({
    onMouseDown: (e: React.MouseEvent) => {