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

EditedEnhancementVisBUilder.mp4

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

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

Attention: Patch coverage is 12.40876% with 120 lines in your changes missing coverage. Please review.

Project coverage is 67.37%. Comparing base (e74ed2c) to head (34ab28f).
Report is 18 commits behind head on main.

Files	Patch %	Lines
...r/public/application/components/data_tab/index.tsx	0.00%	80 Missing ⚠️
...mponents/data_tab/utils/get_valid_aggregations.tsx	21.73%	18 Missing ⚠️
...pplication/components/data_tab/use/use_dropbox.tsx	0.00%	11 Missing ⚠️
...public/application/components/data_tab/dropbox.tsx	0.00%	9 Missing ⚠️
...c/application/components/data_tab/config_panel.tsx	0.00%	1 Missing ⚠️
...lication/components/data_tab/schema_to_dropbox.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7107      +/-   ##
==========================================
- Coverage   67.45%   67.37%   -0.08%     
==========================================
  Files        3442     3450       +8     
  Lines       67816    68057     +241     
  Branches    11027    11086      +59     
==========================================
+ Hits        45742    45853     +111     
- Misses      19408    19531     +123     
- Partials     2666     2673       +7     

Flag	Coverage Δ
Linux_1	33.05% <12.40%> (-0.03%)	⬇️
Linux_2	55.06% <ø> (-0.06%)	⬇️
Linux_3	45.25% <ø> (+0.05%)	⬆️
Linux_4	34.83% <ø> (-0.04%)	⬇️
Windows_1	33.07% <12.40%> (-0.03%)	⬇️
Windows_2	55.01% <ø> (-0.06%)	⬇️
Windows_3	45.25% <ø> (+0.04%)	⬆️
Windows_4	34.83% <ø> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ananzh]

Duplicate of

OpenSearch-Dashboards/src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx

Line 214 in 5ee6f58

const getIndexPatternField = (indexFieldName: string, availableFields: IndexPatternField[]) =>

[LDrago27]

I have consolidated the common functions into a util and reused it across required components.

[ananzh]

I don't quite get this part. If types can be both metric or bucket agg, why we assign only bucket agg type here aggType as BucketAggType?

[ananzh]

nit: should we memorize this computation func with useCallback? same question for handleFieldSelectorToConfigurationPanelTransition

[LDrago27]

In my opinion that might not work here. The params that we have are source, destination, combine which have droppableId of the area and an index that to the fieldAggregation i.e being moved around. So ideally for 2 differrent transitions the index value may remain same but the underlying fieldAggreagtion can be different. In those scenarios the memoization can prove to be detrimental.