From 3fcb932f285c8b337d570f10f9184f6dbfc355ba Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 23 Aug 2023 07:09:04 -0700
Subject: [PATCH] Add clear button and autoscroll to table

Reviewed By: lblasa

Differential Revision: D48600634

fbshipit-source-id: 4ccf82314e3ef3c7466e91e8c181f35ee264bc0a
---
 .../components/FrameworkEventsTable.tsx       | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
index 7d8e3a380..0f4dfd4f7 100644
--- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
+++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {PartitionOutlined} from '@ant-design/icons';
+import {DeleteOutlined, PartitionOutlined} from '@ant-design/icons';
 import {
   DataTable,
   DataTableColumn,
@@ -84,19 +84,30 @@ export function FrameworkEventsTable({
   return (
     <Layout.Container grow>
       <DataTable<FrameworkEvent>
+        enableAutoScroll
         dataSource={instance.frameworkEvents}
         tableManagerRef={managerRef}
         onSelect={onSelectRow}
         columns={allColumns}
         extraActions={
-          <Tooltip title="Back to tree">
-            <Button
-              onClick={() => {
-                instance.uiActions.onFocusNode(undefined);
-                instance.uiActions.onSetViewMode({mode: 'default'});
-              }}
-              icon={<PartitionOutlined />}></Button>
-          </Tooltip>
+          <>
+            <Tooltip title="Back to tree">
+              <Button
+                onClick={() => {
+                  instance.uiActions.onFocusNode(undefined);
+                  instance.uiActions.onSetViewMode({mode: 'default'});
+                }}
+                icon={<PartitionOutlined />}></Button>
+            </Tooltip>
+            <Tooltip title="Delete all events">
+              <Button
+                onClick={() => {
+                  instance.frameworkEvents.clear();
+                  managerRef.current?.clearSelection();
+                }}
+                icon={<DeleteOutlined />}></Button>
+            </Tooltip>
+          </>
         }
       />
       <DetailSidebar width={450}>