[Tech Debt] Clean up draggables in security solution

[christineweng]

Background

With the introduction of unified table in timeline (PR, feature flag removed), draggable row renderers are not used anymore. Recently, this PR removed all the isDraggable usage. However, there are many legacy draggable components in the code base.

Goals

• Rename all the Components started with Draggable prefix (like DraggableZeekElement)
• Remove unused props (props for creating data providers and/or draggables)
• Ensure all the renderers have scopeId specified ([Security Solution]Filter in and Filter out action available under Rule Preview #173608, [Security Solution]Raw Event default view showing for Show Top under Alert Reason #164801, [Security Solution]timeline fly out additional filter not working in down section #181229)

Current state

To understand how all the components work together, the following is a flow chart of key components. SecurityCellAction (with blue title) is the new cell actions that should be used. Components with yellow title are legacy components that should be refactored. Other components in circles are ones that depend on these legacy draggable components and thus will be affected by name change, prop change etc.

• There is redundancy in creating a data provider prop in DefaultDraggable, then deconstruct it in CellActionsWrapper to get field and value. We should just pass field and value through components
• CellActionsWrapper and DraggableWrapper can be merged, since both are preparing data for the cell actions in some way
• If data provider prop is removed, then all the props in red (id,fieldType, name, isAggregatable are not needed)

Challenges

Even though the exercise of cleaning up component names and removing props seem straightforward, the main challenges of doing so are

• Scope of impact: many components rely on DefaultDraggable (like tables, network components) and DraggableBadge (event renderers, row renderers).
• Downstream changes: most of the renders use DraggableBadge, despite only 31 direct uses, the renderers were built via prop drilling, and removing props will cause many file changes
• Overall the effort to benefit ratio is not appealing

Example of prop drilling for 1 row renderer

Proposed work plan

• Step 1: Pass scopeid to all event renderers [Security Solution] Fix - Alert Table Event Rendered View + Cell actions #212721

Step 2: remove the data provider logic, merge redundant draggable components

• [Security Solution] Remove draggable wrapper and data provider props #212589

Step 3: clean up `DraggableBadge` and all the down stream renderer components (most time consuming)

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)