Add Drag & Drop Across Axis Functionality to Vis Builder

[LDrago27]

Description

This change aims to enhance the drag and drop functionality present within Vis-Builder. The enhancements are

• Users can drag a new field from left panel and drop it over an existing field (replacing the existing field)
• User can move a selected field from one axis to an empty axis
• User can move a selected field from one axis to another axis replacing an existing field.

To support the Drag and Drop functionality the custom Drag and Drop containers were converted to Draggable and Droppable Components (part of OUI). Besides the OUIAccordion didn't support Dragging of the elements present within the accordion hence instead of using it a custom version of Accordion was used.

Issues Resolved

#7015

Screenshot

https://github.com/opensearch-project/OpenSearch-Dashboards/assets/38322563/c559858b-0fb1-419c-b78c-27ca2393add4

Testing the changes

Changelog

• feat: Enhance Drag & Drop functionality in Vis Builder

Check List

• [ ] All tests pass
  • [ ] yarn test:jest
  • [ ] yarn test:jest_integration
• [ ] New functionality includes testing.
• [ ] New functionality has been documented.
• [ ] Update CHANGELOG.md
• [ ] Commits are signed per the DCO using --signoff