Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat(DND): Enable Simple DND #1620

Merged
merged 1 commit into from
Dec 19, 2024
Merged

Conversation

shivamG640
Copy link
Contributor

@shivamG640 shivamG640 commented Nov 15, 2024

Fixes #80 partially

Following are the changes coming with this PR:

  • Enabled DND of nodes over other nodes.
  • Enabled containers drag only when collapsed.
  • Added Visual Feedback when DND on nodes.
  • Added feature flag for the DND on the settings page.
  • Enabled re-arrangement of when/doCatch containers in case of choice/doTry.

Above changes can be tested live here.

Note:

  • We have restricted group drop on placeholder as there are few breaking cases which needs to be handled.
  • There is known console error on every successful drag and drop which needs some attention.

Copy link

codecov bot commented Nov 15, 2024

Codecov Report

Attention: Patch coverage is 37.01299% with 97 lines in your changes missing coverage. Please review.

Project coverage is 78.45%. Comparing base (001a9b4) to head (98e4a92).
Report is 16 commits behind head on main.

Files with missing lines Patch % Lines
...omponents/Visualization/Custom/Node/CustomNode.tsx 61.42% 26 Missing and 1 partial ⚠️
...isualization/flows/abstract-camel-visual-entity.ts 0.00% 21 Missing and 1 partial ⚠️
...ents/Visualization/Custom/Node/PlaceholderNode.tsx 20.00% 18 Missing and 2 partials ⚠️
...c/models/visualization/flows/pipe-visual-entity.ts 0.00% 10 Missing and 1 partial ⚠️
.../ui/src/models/visualization/visualization-node.ts 0.00% 6 Missing ⚠️
...ization/flows/camel-error-handler-visual-entity.ts 0.00% 4 Missing ⚠️
...on/flows/camel-rest-configuration-visual-entity.ts 0.00% 4 Missing ⚠️
...Visualization/Custom/Group/CustomGroupExpanded.tsx 77.77% 2 Missing ⚠️
...ponents/Visualization/Canvas/controller.service.ts 50.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##               main    #1620      +/-   ##
============================================
- Coverage     78.62%   78.45%   -0.17%     
  Complexity      365      365              
============================================
  Files           439      465      +26     
  Lines         14234    14667     +433     
  Branches       2769     2792      +23     
============================================
+ Hits          11191    11507     +316     
+ Misses         2954     2888      -66     
- Partials         89      272     +183     

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

@shivamG640 shivamG640 force-pushed the Feat-Simple-DND branch 6 times, most recently from 5e1e2c0 to ea6483e Compare December 9, 2024 05:54
@shivamG640 shivamG640 force-pushed the Feat-Simple-DND branch 5 times, most recently from 27a26a6 to 98e4a92 Compare December 19, 2024 08:55
@shivamG640 shivamG640 marked this pull request as ready for review December 19, 2024 08:59
@shivamG640 shivamG640 requested a review from lordrip December 19, 2024 14:41

export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer(
({ element, onContextMenu, onCollapseToggle }) => {
export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = observer(
Copy link
Member

@lordrip lordrip Dec 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For another PR: we don't need to export this component anymore :)

Suggested change
export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = observer(
const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = observer(


export const CustomNodeWithSelection = withContextMenu(NodeContextMenuFn)(CustomNode);
export const CustomNodeWithSelection = withDndDrop(customNodeDropTargetSpec)(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For another PR: we can rename this component to CustomNode

Suggested change
export const CustomNodeWithSelection = withDndDrop(customNodeDropTargetSpec)(
export const CustomNode = withDndDrop(customNodeDropTargetSpec)(

Copy link
Member

@lordrip lordrip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shivamG640 👍 I'm merging this one so we can move to the next phase 💪

@lordrip lordrip merged commit 6ca0112 into KaotoIO:main Dec 19, 2024
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Reorder nodes using drag and drop
2 participants