Add Drag & Drop Across Axis Functionality to Vis Builder #7107

LDrago27 · 2024-06-25T23:07:04Z

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 · 2024-06-25T23:07:37Z

❌ 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 · 2024-06-25T23:12:07Z

❌ 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 · 2024-06-25T23:23:05Z

Codecov Report

Attention: Patch coverage is 10.55901% with 144 lines in your changes missing coverage. Please review.

Project coverage is 67.54%. Comparing base (60ecd36) to head (2236da3).

Files	Patch %	Lines
...r/public/application/components/data_tab/index.tsx	0.00%	39 Missing ⚠️
...ta_tab/drag_drop/replace_field_in_configuration.ts	0.00%	23 Missing ⚠️
...s/data_tab/drag_drop/move_field_between_schemas.ts	0.00%	18 Missing ⚠️
...mponents/data_tab/utils/get_valid_aggregations.tsx	21.73%	18 Missing ⚠️
...s/data_tab/drag_drop/add_field_to_configuration.ts	0.00%	13 Missing ⚠️
...data_tab/drag_drop/reorder_fields_within_schema.ts	0.00%	11 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.63%   67.54%   -0.09%     
==========================================
  Files        3471     3477       +6     
  Lines       68640    68757     +117     
  Branches    11174    11204      +30     
==========================================
+ Hits        46423    46443      +20     
- Misses      19511    19608      +97     
  Partials     2706     2706

Flag	Coverage Δ
Linux_1	`33.24% <10.55%> (-0.07%)`	⬇️
Linux_2	`55.30% <ø> (ø)`
Linux_3	`45.26% <ø> (ø)`
Linux_4	`34.69% <ø> (ø)`
Windows_1	`33.28% <10.55%> (-0.05%)`	⬇️
Windows_2	`55.25% <ø> (ø)`
Windows_3	`45.27% <ø> (ø)`
Windows_4	`34.69% <ø> (ø)`

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.

ashwin-pc

Really nice PR. I just had a few minor comments. Let em know once you have responded or addressed them and this change should be good to go

src/plugins/vis_builder/public/application/components/data_tab/index.tsx

src/plugins/vis_builder/public/application/components/data_tab/utils/get_valid_aggregations.tsx

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

ashwin-pc

Nice, thanks for the changes. Wont block on it, but the newly added functions could use tests. I'll be happy to reapprove it if you can let me know once you have added the tests.

ashwin-pc · 2024-07-15T12:42:35Z

...s/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

Can you add tests for this file?

ashwin-pc · 2024-07-15T12:43:08Z

...s/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

Can you add tests for this function?

ashwin-pc · 2024-07-15T12:43:17Z

...vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

Can you add tests for this function?

ashwin-pc · 2024-07-15T12:43:26Z

...s_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

Can you add tests for this function?

Signed-off-by: Suchit Sahoo <suchsah@amazon.com>

* Add Drag Across Axis Functionality to Vis Builder Signed-off-by: Suchit Sahoo <suchsah@amazon.com> * Changeset file for PR #7107 created/updated --------- Signed-off-by: Suchit Sahoo <suchsah@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 27669cf) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Add Drag Across Axis Functionality to Vis Builder * Changeset file for PR #7107 created/updated --------- (cherry picked from commit 27669cf) Signed-off-by: Suchit Sahoo <suchsah@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

* Add Drag Across Axis Functionality to Vis Builder * Changeset file for PR #7107 created/updated --------- (cherry picked from commit 27669cf) Signed-off-by: Suchit Sahoo <suchsah@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit b1e5237) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…) (#7416) * Add Drag Across Axis Functionality to Vis Builder * Changeset file for PR #7107 created/updated --------- (cherry picked from commit 27669cf) (cherry picked from commit b1e5237) Signed-off-by: Suchit Sahoo <suchsah@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: Anan Zhuang <ananzh@amazon.com>

github-actions bot added the valued-contributor label Jun 25, 2024

github-actions bot added the failed changeset label Jun 25, 2024

github-actions bot removed the failed changeset label Jun 25, 2024

opensearch-changeset-bot bot added a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jun 25, 2024

Changeset file for PR opensearch-project#7107 created/updated

ce9d1b1

opensearch-changeset-bot bot added a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jun 25, 2024

Changeset file for PR opensearch-project#7107 created/updated

4d8aa2e

LDrago27 force-pushed the pocDragDropMigration branch 2 times, most recently from 6e1483e to 56e4202 Compare June 26, 2024 00:03

LDrago27 changed the title ~~Add Drag Across Axis Functionality to Vis Builder~~ Add Drag & Drop Across Axis Functionality to Vis Builder Jun 26, 2024

opensearch-changeset-bot bot added a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jun 26, 2024

Changeset file for PR opensearch-project#7107 created/updated

b5877bb

LDrago27 force-pushed the pocDragDropMigration branch 5 times, most recently from 4b31db9 to bd08a03 Compare June 27, 2024 17:53

LDrago27 added the vis builder label Jun 27, 2024

LDrago27 marked this pull request as ready for review June 27, 2024 18:38

LDrago27 requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX and Flyingliuhub as code owners June 27, 2024 18:38

LDrago27 force-pushed the pocDragDropMigration branch from a602190 to 7e41206 Compare June 28, 2024 23:01

ananzh previously approved these changes Jul 1, 2024

View reviewed changes

opensearch-changeset-bot bot added a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jul 1, 2024

Changeset file for PR opensearch-project#7107 created/updated

34ab28f

opensearch-changeset-bot bot dismissed ananzh’s stale review via 34ab28f July 1, 2024 16:07

ananzh previously approved these changes Jul 1, 2024

View reviewed changes

ashwin-pc reviewed Jul 6, 2024

View reviewed changes

LDrago27 dismissed ananzh’s stale review via 5b7a9e3 July 9, 2024 17:57

LDrago27 force-pushed the pocDragDropMigration branch from 34ab28f to 5b7a9e3 Compare July 9, 2024 17:57

LDrago27 requested a review from virajsanghvi as a code owner July 9, 2024 17:57

LDrago27 force-pushed the pocDragDropMigration branch 3 times, most recently from c967677 to 868f5e0 Compare July 10, 2024 17:43

ashwin-pc previously approved these changes Jul 15, 2024

View reviewed changes

ananzh previously approved these changes Jul 15, 2024

View reviewed changes

opensearch-changeset-bot bot added a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jul 15, 2024

Changeset file for PR opensearch-project#7107 created/updated

86ce1a5

opensearch-changeset-bot bot dismissed stale reviews from ananzh and ashwin-pc via 86ce1a5 July 15, 2024 17:37

ananzh approved these changes Jul 15, 2024

View reviewed changes

ashwin-pc approved these changes Jul 15, 2024

View reviewed changes

LDrago27 added the backport 2.x label Jul 16, 2024

LDrago27 and others added 2 commits July 16, 2024 10:53

Add Drag Across Axis Functionality to Vis Builder

44edae4

Signed-off-by: Suchit Sahoo <suchsah@amazon.com>

Changeset file for PR opensearch-project#7107 created/updated

2236da3

LDrago27 force-pushed the pocDragDropMigration branch from 86ce1a5 to 2236da3 Compare July 16, 2024 17:53

LDrago27 merged commit 27669cf into opensearch-project:main Jul 16, 2024
65 of 67 checks passed

opensearch-trigger-bot bot mentioned this pull request Jul 16, 2024

[Backport 2.x] Add Drag & Drop Across Axis Functionality to Vis Builder #7266

Merged

ashwin-pc added the v2.16.0 label Jul 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Drag & Drop Across Axis Functionality to Vis Builder #7107

Add Drag & Drop Across Axis Functionality to Vis Builder #7107

LDrago27 commented Jun 25, 2024 •

edited by ananzh

Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 25, 2024

codecov bot commented Jun 25, 2024 •

edited

Loading

ashwin-pc left a comment

ashwin-pc left a comment

ashwin-pc Jul 15, 2024

ashwin-pc Jul 15, 2024

ashwin-pc Jul 15, 2024

ashwin-pc Jul 15, 2024

Add Drag & Drop Across Axis Functionality to Vis Builder #7107

Add Drag & Drop Across Axis Functionality to Vis Builder #7107

Conversation

LDrago27 commented Jun 25, 2024 • edited by ananzh Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Jun 25, 2024

❌ Empty Changelog Section

github-actions bot commented Jun 25, 2024

❌ Empty Changelog Section

codecov bot commented Jun 25, 2024 • edited Loading

Codecov Report

ashwin-pc left a comment

Choose a reason for hiding this comment

ashwin-pc left a comment

Choose a reason for hiding this comment

ashwin-pc Jul 15, 2024

Choose a reason for hiding this comment

ashwin-pc Jul 15, 2024

Choose a reason for hiding this comment

ashwin-pc Jul 15, 2024

Choose a reason for hiding this comment

ashwin-pc Jul 15, 2024

Choose a reason for hiding this comment

LDrago27 commented Jun 25, 2024 •

edited by ananzh

Loading

codecov bot commented Jun 25, 2024 •

edited

Loading