Update protected environments settings UI

What does this MR do and why?

Updates protected environments UI

Screenshots or screen recordings

Before	After

How to set up and validate locally

• Group > settings > CI/CD > Protected environments
• Create one or two direct subgroups of the parent group you're testing to populate the form

UX Paper Cuts 16.3 → Settings UI, part 2 (#417912 - closed)

[META] Migrate settings pages with an add form ... (#419105 - closed)