Add header context menu - ViewEventList

Author: Sugavanas

src/components/view/view-context-menu-builder.ts

@@ -28,7 +28,7 @@ export class ViewEventContextMenuBuilder {
         private onDelete: (event: CollectedEvent) => void,
         private onBuildRuleFromExchange: (exchange: HttpExchangeView) => void,
         private onPrepareToResendRequest?: (exchange: HttpExchangeView) => void,
-        private onHeaderColumnOptionChange?: (columnName: string, show: boolean) => void,
+        private onHeaderColumnOptionChange?: (visibleViewColumns: Map<string, boolean>, columnName: string, show: boolean) => void,
     ) {
     }
 
@@ -144,15 +144,15 @@ export class ViewEventContextMenuBuilder {
         };
     }
 
-    getHeaderContextMenuCallback(enabledColumns: Map<string, boolean>) {
+    getHeaderToggleContextMenu(enabledColumns: Map<string, boolean>) {
         let menuOptions: ContextMenuItem<void>[] = [];
 
         enabledColumns.forEach((enabled, columnName) => {
             menuOptions.push({
                 type: 'option',
                 label: (!enabled ? "Show " : "Hide ") + columnName,
                 callback: () => {
-                    this.onHeaderColumnOptionChange ? this.onHeaderColumnOptionChange(columnName, !enabled) : console.log('onHeaderColumnOptionChange callback not set');
+                    this.onHeaderColumnOptionChange ? this.onHeaderColumnOptionChange(enabledColumns, columnName, !enabled) : console.log('onHeaderColumnOptionChange callback not set');
                 }
             });
         });

src/components/view/view-event-list.tsx

@@ -854,9 +854,12 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
         const { events, filteredEvents, isPaused } = this.props;
 
         return <ListContainer role="table">
-            <TableHeaderRow role="row">
+            <TableHeaderRow
+                role="row"
+                onContextMenu={this.props.contextMenuBuilder.getHeaderToggleContextMenu(this.props.uiStore.visibleViewColumns)}
+            >
                 <MarkerHeader role="columnheader" aria-label="Category" />
-                <Timestamp role="columnheader">Timestamp</Timestamp>}
+                <Timestamp role="columnheader">Timestamp</Timestamp>
                 <Method role="columnheader">Method</Method>
                 <Status role="columnheader">Status</Status>
                 <Source role="columnheader">Source</Source>

src/components/view/view-page.tsx

@@ -225,13 +225,13 @@ class ViewPage extends React.Component<ViewPageProps> {
 
         return contentPerspective === 'client'
             ? this.selectedEvent.downstream
-        : contentPerspective === 'server'
-            ? (this.selectedEvent.upstream ?? this.selectedEvent.downstream)
-        : contentPerspective === 'original'
-            ? this.selectedEvent.original
-        : contentPerspective === 'transformed'
-            ? this.selectedEvent.transformed
-        : unreachableCheck(contentPerspective)
+            : contentPerspective === 'server'
+                ? (this.selectedEvent.upstream ?? this.selectedEvent.downstream)
+                : contentPerspective === 'original'
+                    ? this.selectedEvent.original
+                    : contentPerspective === 'transformed'
+                        ? this.selectedEvent.transformed
+                        : unreachableCheck(contentPerspective)
     }
 
     private readonly contextMenuBuilder = new ViewEventContextMenuBuilder(
@@ -240,7 +240,8 @@ class ViewPage extends React.Component<ViewPageProps> {
         this.onPin,
         this.onDelete,
         this.onBuildRuleFromExchange,
-        this.onPrepareToResendRequest
+        this.onPrepareToResendRequest,
+        this.onHeaderColumnOptionChange
     );
 
     componentDidMount() {
@@ -558,6 +559,11 @@ class ViewPage extends React.Component<ViewPageProps> {
         navigate(`/send`);
     }
 
+    @action.bound
+    async onHeaderColumnOptionChange(visibleViewColumns: Map<string, boolean>, columnName: string, show: boolean) {
+        visibleViewColumns.set(columnName, show);
+    }
+
     @action.bound
     onDelete(event: CollectedEvent) {
         const { filteredEvents } = this.filteredEventState;