Geo Lists: UI Cleanup

What does this MR do and why?

Closes #553399 (closed)

This change comes from collaboration with @annabeldunstone and the UX Paper Cuts team in an attempt to deliver a UI more aligned with our Pajamas design principals. This change includes the following:

1. Moving the page header into Vue and moving the Bulk Actions into the header
2. Adding a retry icon to the Resync action
3. GlIcon => GlBadge for status icons
4. Using · instead of | for metadata
5. Removing red background and text from error component
6. Adding chevron icon to the GlCollapse
7. Various spacing cleanup

Screenshots or screen recordings

	Before	After
Full Success
Replication Pending
Replication Started
Replication Failed
Verification Pending
Verification Started
Verification Failed

How to set up and validate locally

Setup Geo (optional)

Important: To properly test Geo you will need a separate GDK setup. Setup is straightforward but takes some time. Another option is to validate the code functionally and if needed schedule a call to sync and I can screen share my instance.

1. Ensure no other GDKs are running. gdk stop/gdk kill
2. Open an empty directory and install and run Geo with the one-line command found on the Easy installation instructions
3. Access your primary and secondary Geo instances via 127.0.0.1:3000 and 127.0.0.1:3001.

Testing

Basic UI

1. Access your primary GDK Geo Page (127.0.0.1:3000/admin/geo)
2. Scroll down to the very bottom Replication details section
3. Click one of the blue links (ex: Project Repositories)
4. Ensure UI looks as expected based on screenshots

Trigger Sync Errors

1. Access rails console on your Secondary (rails c)
2. Execute registry = Geo::ProjectRepositoryRegistry.first
   • This assigned the first ProjectRepositoryRegistry to a variable registry
3. Execute registry.failed!(message: "The sync has failed", error: ArgumentError.new("arg error"))
   • This simulates a Sync Failure

Trigger Verification Errors

1. Access rails console on your Secondary (rails c)
2. Execute registry = Geo::ProjectRepositoryRegistry.first
   • This assigned the first ProjectRepositoryRegistry to a variable registry
3. Execute registry.verification_pending! and then registry.verification_failed_with_message!('Error during verification', ArgumentError.new("asdf"))
   • This simulates a Verification Failure

Various Other States

1. Access rails console on your Secondary (rails c)
2. Execute registry = Geo::ProjectRepositoryRegistry.first
   • This assigned the first ProjectRepositoryRegistry to a variable registry
3. To manually set the Sync State registry.update(state: 0) (or 1, 2, 3)
4. To manually set the Verification State registry.update(verification_state: 0) (or 1, 2, 3)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #553399 (closed)