[Data Views] Enhance UX and Add drag and drop ordering for Filter properties and table column

[Mayank-Tripathi32]

What?

This PR addresses issue #66611. It implements the initial design mockup provided and adds drag-and-drop functionality to the property list. Additionally, it includes basic CSS adjustments for visual consistency and utilizes available icons for improved UI clarity.

Why?

This update enhances the user experience by allowing easier reordering of properties in the list through drag-and-drop functionality. It also improves UI consistency, aligning with the design specifications outlined in the mockup and leveraging existing icons to maintain visual coherence. This change aims to streamline interactions with the property list and increase usability.

How?

This implementation leverages React's built-in hooks to achieve drag-and-drop functionality. It combines JavaScript event handlers—onDragStart, onDrop, and onDragOver—with useState for managing component state dynamically. Additionally, useRef is utilized alongside setDragImage to render a preview of the row during dragging.

To keep the solution simple and lightweight, no external libraries were used, ensuring minimal dependencies and improved maintainability.

Testing Instructions

1. Navigate to the Site Editor: Go to Pages, then select "Table" View from Layout.
2. Open "View Options" and Start Dragging a Property: Click and hold on any item in the property list to initiate the drag. Ensure that a preview of the item appears as you drag.
3. Drag and Drop: Move the item to a new position in the list and release it to drop. Verify that the item is repositioned correctly in the new location, check dragging between hidden state and visible.
4. Check State Persistence: After reordering, confirm that the updated order is reflected in the list and that the component state is maintained correctly.
5. Cross-Browser Compatibility: Test the drag-and-drop functionality across multiple browsers (e.g., Chrome, Firefox, Safari) to ensure consistent behavior.
6. Responsiveness: Verify that the drag-and-drop feature works as expected on various screen sizes, including desktops, tablets, and mobile devices.
7. Edge Cases:
   • Empty List: Confirm the UI handles an empty list without errors.
   • Single Item: Check if dragging a single item does not cause unexpected behavior.
   • Rapid Reordering: Quickly drag and reorder items to test stability under rapid interactions.
8. Accessibility: Confirm that the drag-and-drop feature is accessible, ensuring keyboard navigation and screen reader compatibility where applicable.
9. Visual Consistency: Verify that all icons and CSS changes appear as intended and match the mockup design, while using the existing icons.

Screenshots

demo.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Mayank-Tripathi32! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.