From dca050bcca33713022eb2182eb15c1986ae6f3b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <benoit.zugmeyer@datadoghq.com>
Date: Fri, 8 Sep 2023 10:18:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=8C=E2=9C=A8=20add=20a=20button=20to?=
 =?UTF-8?q?=20remove=20columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/tabs/eventsTab/columnDrag.tsx  |  2 +-
 .../components/tabs/eventsTab/eventRow.tsx    | 17 +++--
 .../components/tabs/eventsTab/eventsList.tsx  | 69 +++++++++++++++----
 3 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/developer-extension/src/panel/components/tabs/eventsTab/columnDrag.tsx b/developer-extension/src/panel/components/tabs/eventsTab/columnDrag.tsx
index 459b8f3c4d..354b1d1c45 100644
--- a/developer-extension/src/panel/components/tabs/eventsTab/columnDrag.tsx
+++ b/developer-extension/src/panel/components/tabs/eventsTab/columnDrag.tsx
@@ -117,7 +117,7 @@ function initColumnDrag(
       if (!targetCell) {
         return false
       }
-      const siblings = Array.from(targetCell.parentElement!.children)
+      const siblings = Array.from(targetCell.parentElement!.querySelectorAll(':scope > [data-header-cell]'))
       const columnIndex = siblings.indexOf(targetCell)
 
       state = {
diff --git a/developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx b/developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx
index 688c6916b5..cd2e3fb261 100644
--- a/developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx
+++ b/developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx
@@ -84,14 +84,20 @@ export const EventRow = React.memo(
 
     return (
       <tr>
-        {columns.map((column): React.ReactElement => {
+        {columns.map((column, index): React.ReactElement => {
+          const isLast = index === columns.length - 1
           switch (column.type) {
             case 'date':
-              return <Cell key="date">{formatDate(event.date)}</Cell>
+              return (
+                <Cell key="date" isLast={isLast}>
+                  {formatDate(event.date)}
+                </Cell>
+              )
             case 'description':
               return (
                 <Cell
                   key="description"
+                  isLast={isLast}
                   sx={{
                     cursor: 'pointer',
                   }}
@@ -119,7 +125,7 @@ export const EventRow = React.memo(
               )
             case 'type':
               return (
-                <Cell key="type">
+                <Cell key="type" isLast={isLast}>
                   {isRumEvent(event) || isTelemetryEvent(event) ? (
                     <Badge variant="outline" color={RUM_EVENT_TYPE_COLOR[event.type]}>
                       {event.type}
@@ -134,7 +140,7 @@ export const EventRow = React.memo(
             case 'field': {
               const value = facetRegistry.getFieldValueForEvent(event, column.path)
               return (
-                <Cell key={`field-${column.path}`}>
+                <Cell key={`field-${column.path}`} isLast={isLast}>
                   {value !== undefined && (
                     <Json
                       value={value}
@@ -153,11 +159,12 @@ export const EventRow = React.memo(
   }
 )
 
-function Cell(props: BoxProps & ComponentPropsWithoutRef<'div'>) {
+function Cell({ isLast, ...props }: BoxProps & ComponentPropsWithoutRef<'div'> & { isLast: boolean }) {
   return (
     <Box
       {...props}
       component="td"
+      colSpan={isLast ? 2 : 1}
       sx={[
         {
           verticalAlign: 'top',
diff --git a/developer-extension/src/panel/components/tabs/eventsTab/eventsList.tsx b/developer-extension/src/panel/components/tabs/eventsTab/eventsList.tsx
index eb51962306..bf58931322 100644
--- a/developer-extension/src/panel/components/tabs/eventsTab/eventsList.tsx
+++ b/developer-extension/src/panel/components/tabs/eventsTab/eventsList.tsx
@@ -1,4 +1,4 @@
-import { Popover, Box, Text, Button, Flex, Autocomplete, Table, useMantineTheme } from '@mantine/core'
+import { Popover, Box, Text, Button, Flex, Autocomplete, Table, useMantineTheme, CloseButton } from '@mantine/core'
 import type { ForwardedRef, ReactNode } from 'react'
 import React, { useMemo, useRef, useState, forwardRef } from 'react'
 import type { EventFilters, FacetRegistry } from '../../../hooks/useEvents'
@@ -38,20 +38,17 @@ export function EventsList({
       <Table>
         <thead>
           <tr ref={headerRowRef}>
-            {columns.map((column, index) => (
-              <th key={column.type === 'field' ? `field-${column.path}` : column.type} data-header-cell>
-                <Flex justify="space-between" gap="sm" align="center">
-                  {getColumnTitle(column)}
-                  {index === columns.length - 1 && (
-                    <AddColumnPopover
-                      columns={columns}
-                      onColumnsChange={onColumnsChange}
-                      facetRegistry={facetRegistry}
-                    />
-                  )}
-                </Flex>
-              </th>
+            {columns.map((column) => (
+              <ColumnHeader
+                key={column.type === 'field' ? `field-${column.path}` : column.type}
+                columns={columns}
+                column={column}
+                onColumnsChange={onColumnsChange}
+              ></ColumnHeader>
             ))}
+            <Box component="th" sx={{ width: 0 }}>
+              <AddColumnPopover columns={columns} onColumnsChange={onColumnsChange} facetRegistry={facetRegistry} />
+            </Box>
           </tr>
         </thead>
 
@@ -73,6 +70,50 @@ export function EventsList({
   )
 }
 
+function ColumnHeader({
+  columns,
+  column,
+  onColumnsChange,
+}: {
+  columns: EventListColumn[]
+  column: EventListColumn
+  onColumnsChange: (columns: EventListColumn[]) => void
+}) {
+  return (
+    <Box
+      component="th"
+      key={column.type === 'field' ? `field-${column.path}` : column.type}
+      data-header-cell
+      sx={{
+        width:
+          column.type === 'date' || column.type === 'type'
+            ? // Date and type columns cannot wrap and have mostly constant width. Let's
+              // set a width to 0 so they don't uselessly grow.
+              0
+            : // Let other column share the remaining space. This gives better result when
+              // things are wrapping.
+              undefined,
+
+        '& .mantine-CloseButton-root': {
+          opacity: 0,
+        },
+        '&:hover': {
+          '& .mantine-CloseButton-root': {
+            opacity: 1,
+          },
+        },
+      }}
+    >
+      <Flex gap="sm" align="center">
+        <Flex justify="space-between" gap="sm" align="center" sx={{ flex: 1 }}>
+          {getColumnTitle(column)}
+          <CloseButton size="xs" variant="filled" onClick={() => onColumnsChange(removeColumn(columns, column))} />
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
+
 function AddColumnPopover({
   columns,
   onColumnsChange,