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

Table dnd enhancement #3839

Merged
merged 2 commits into from
Feb 5, 2024
Merged

Table dnd enhancement #3839

merged 2 commits into from
Feb 5, 2024

Conversation

Happyrajsinh
Copy link
Collaborator

Closes #3838

Summary

Enahnces table drag and drop feature to drop table rows outside the table over breadcrumb nodes.

Change List (commits, features, bugs, etc)

Majority of the work is done in the useTableDnd.jsx. Prop hasBreadcrumbDrop is used to enable this feature in addition to hasDragAndDrop of table. When drag is started upon setting up of drag and drop through useEffect hook, mouse events like mouseEnter and mouseLeave are attached to all the breadcrumb nodes in the dom. Upon drop or drag cancel all these event listeners are removed.

Acceptance Test (how to verify the PR)

  • Storybook: Table > with drag and drop rows. hasBradcrumbDrop checked in knobs. Will allow drop over breadcrumb nodes. For nodes inside the ellipsis, user need to first open that by clicking then need to perfrom drag and drop over those nodes.
  • New test that are part of StatefulTable.test.jsx.

Regression Test (how to make sure this PR doesn't break old functionality)

  • Existing table tests.

Things to look for during review

  • Make sure all references to iot or bx class prefix is using the prefix variable
  • (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
  • UI should be checked in RTL mode to ensure the proper handling of layout and text.
  • All strings should be translatable.
  • The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
  • Unit test should be written and should have a coverage of 90% or higher in all areas.
  • All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
  • Changes or new components should either write new or update existing documentation.
  • PR should link and close out an existing issue

Happyrajsinh Bhadoriya and others added 2 commits January 23, 2024 16:49
Added new feature of enabling table rows drop outside table over breadcrumb nodes and returning the breadcrumb dom element when dropped over it.
added mouse event to avoid warnings in test execution
Copy link

netlify bot commented Feb 1, 2024

Deploy Preview for carbon-addons-iot-react ready!

Name Link
🔨 Latest commit 866940c
🔍 Latest deploy log https://app.netlify.com/sites/carbon-addons-iot-react/deploys/65bbcc3ee2bbe60008a66961
😎 Deploy Preview https://deploy-preview-3839--carbon-addons-iot-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Collaborator

@abpaul1993 abpaul1993 left a comment

Choose a reason for hiding this comment

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

LGTM

@Happyrajsinh Happyrajsinh merged commit fe6f8ea into next Feb 5, 2024
29 checks passed
@Happyrajsinh Happyrajsinh deleted the table-dnd-enhancement branch February 5, 2024 04:34
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.

[Table] Support drag and drop of rows on breadcrumb items
2 participants