✨ [extension] add columns to the event list

[BenoitZugmeyer]

Motivation

When adding a new field or investigating a specific field value, it is a bit annoying to expand it
on every event.

Changes

• Use a grid instead of a table for event list (this was not strictly needed but I find it more predictable even if it has a few issues)
• Add support for columns in the event list to display some arbitrary fields.
  • Add columns by clicking on the json fields or by using the "Add column" button
  • Reorder columns by drag and dropping
  • Remove columns by dragging them out of the header

Note: see, the space between the facet list and the event list is back!

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[BenoitZugmeyer]

Current dependencies on/for this PR:

• main
  • PR ✨ [extension] filter outdated events #2369
    • PR ✨ [extension] revamp filter UI #2370
      • PR ✨ [extension] revamp event description and JSON viz #2371
        • PR ✨ [extension] add columns to the event list #2372 👈

This comment was auto-generated by Graphite.

[amortemousque]

❓ question: ‏Why move from a table to a grid?

[BenoitZugmeyer]

I reverted back to a table, the grid offers more control over the exact size of columns, but was too much trouble to implement. I want to revisit this one day when I have time :)

[bcaudan]

After playing with the UI:

🐛 You can "add column" on an already added column which create a new column with empty values

🐛 the display does not seem to handle well long URL in the message, maybe truncating them?

💬 for removing a column, drag and drop outside of the header seems quite unusual.
What about adding a dropdown on column header with remove column (move left / right could also be added)?

💬 to indicate the columns can be reorderd by drag and drop, what about displaying "move" cursor on hover?

[BenoitZugmeyer]

Current dependencies on/for this PR:

• main:
  • PR ✨ [extension] filter outdated events #2369
    • PR ✨ [extension] revamp filter UI #2370
      • PR ✨ [extension] revamp event description and JSON viz #2371
        • PR ✨ [extension] add columns to the event list #2372 👈

This comment was autogenerated by Freephite.

[codecov-commenter]

Codecov Report

Merging #2372 (1ce9dd9) into main (bd5aa77) will decrease coverage by 0.08%.
The diff coverage is 33.33%.

@@            Coverage Diff             @@
##             main    #2372      +/-   ##
==========================================
- Coverage   93.47%   93.40%   -0.08%     
==========================================
  Files         226      226              
  Lines        6617     6622       +5     
  Branches     1470     1470              
==========================================
  Hits         6185     6185              
- Misses        432      437       +5     

Files Changed	Coverage Δ
...tension/src/panel/hooks/useEvents/facetRegistry.ts	55.73% <33.33%> (-3.20%)	⬇️

... and 2 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[BenoitZugmeyer]

After playing with the UI:

🐛 You can "add column" on an already added column which create a new column with empty values

Fixed

🐛 the display does not seem to handle well long URL in the message, maybe truncating them?

Fixed by reverting to using a Table, so now long strings should wrap properly

💬 for removing a column, drag and drop outside of the header seems quite unusual. What about adding a dropdown on column header with remove column (move left / right could also be added)?

Added a button to remove columns.

💬 to indicate the columns can be reorderd by drag and drop, what about displaying "move" cursor on hover?

Native devtools tabs can be reordered by drag and drop, but don't have a "move" cursor. I think it could be best to follow the same UI, so I didn't change the cursor. I will revisit the drag behavior later to make it closer to the native devtools experience.