change: [M3-8533, M3-8761] - Fix firewall rules table and Replace react-beautiful-dnd with dnd-kit lib

[pmakode-akamai]

Description 📝

While working on ticket M3-8533 & PR #11109, we decided to implement/use semantic markup for the Firewall rules table to improve consistency and accessibility, rather than applying a styling band-aid to div grids to make it look like our normal tables. The react-beautiful-dnd library has made us rely on div(Box) grids instead of our normal tables, which complicates using semantic tables/grid layouts because of the draggable elements. Plus, this library has been deprecated (announcement: atlassian/react-beautiful-dnd#2672).

To solve these problems and make better use of our normal tables, switching to dnd-kit(https://dndkit.com/) would be the great idea, which is more popular, supports grid layouts better, and can replace react-beautiful-dnd. This will help us use our semantic tables properly and fix the issues with the Firewall rules table in both dark and light modes.

Changes 🔄

List any change relevant to the reviewer.

• Used Normal tables instead of Div Box grids
• Updated PolicyRow
  • Changed it to have borders on all sides.
  • Changed the alignment of the Select and helper text to be aligned with the Action column for screens < 'sm', and with the last column for screens >= 'sm'.
• Replaced react-beautiful-dnd with dnd-kit lib

Target release date 🗓️

N/A

Preview 📷

Before	After

How to test 🧪

Prerequisites

• Clear cache or test in Incognito.

Reproduction steps

• Go to any Firewall details page (https://cloud.linode.com/firewalls/948204/rules)
• Observe the broken looking table (in both dark and light mode)

Verification steps

• Ensure the table is not broken in both dark and light modes.
• Verify table across different screen sizes and ensure it matches our normal table colors.
• Ensure the drag and drop functionality work as expected in different screen sizes.
• Verify all firewall rule actions work as expected.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 87.05%
Current Coverage: 87.05%

[abailly-akamai]

Fantastic work @pmakode-akamai, and really appreciate considering going with a more holistic refactor, including replacing a non-supported library.

Implementation, markup and styling looks great (in both modes) for the most part, leaving some comments that shouldn't take too much extra work to implement.