Mockup for Thread shield IP UI: manage blocked IPs

[gsanchietti]

Create a mockup for parent issue: #924

The mockup should address the following tasks:

1. Dynamic Blocklist Management:

   • Create a section to display all IP addresses currently on the dynamic blocklist.
   • Implement a search bar to search for a specific IP address within the dynamic blocklist.
   • Provide an option to unban an IP address directly from the UI.

2. All Blocklists Management:

   • Add a search functionality in the UI to look up a specific IP address across all blocklists (both dynamic and static).

[AmaLuci]

Mockups in Figma here

[andre8244]

LGTM ✅

[gsanchietti]

Ok for me

[AmaLuci]

Updated the mockups with the following changes:

• Renamed section label from "Dynamic blocklist" to "Blocked IPs"
• Added a "Ban expiration" column to the Blocked IPs table
• Included the IP address in the unbanned toast message
• Updated the empty state text
• Replaced the toast with a confirmation tooltip and disabled button for the "Add to local allowlist" action
• Added mouse hover effect on table rows for better interactivity

You can check the updated designs here: Figma link
@cotosso @Tbaile

[Tbaile]

GJ! Just few things:

• added a comment where, unfortunately, when searching if IP is inside an active list only the first hit is returned, not a list.
• Is it possible to have a empty state for banned IPs? We have just the empty search state

[AmaLuci]

Empty state added and documented in NDS

[AmaLuci]

Edit: Added "Ban start" column