Geo Replicables - Unboxing the UI
What does this MR do and why?
Closes #361612 (closed)
Closes #366582 (closed)
This change "unboxes" the Geo Replicables UI and cleans up a bit of the existing styles.
Important Context
There are 3 different views that are responsible for rendering the Geo Replicables. If you are curious, here is a link to the breakdown of technical approaches and reasoning: &8212 (closed)
What you need to know for this MR is we are only updating the views rendered in Vue. That will be every tab except Projects. More so, the Designs tab has additional functionality (buttons, filters, link) that the other updated Vue tabs do not.
soon Projects and Designs will be conformed to "the rest of the tabs"
Screenshots or screen recordings
Tabs Before/After
| Before | After | |
|---|---|---|
| Projects (No Change) |  |
 |
| Designs (has buttons, filters, link) |  |
 |
| Everything else (no buttons, filters, link) |  |
 |
Responsive Breakpoints (filter bar specifically)
| Description | Screenshot | |
|---|---|---|
| Desktop (> xl) | Single row, limited width on dropdown/search |  |
| Tablet (< xl, > md) | Single row, a bit tighter on dropdown/search |  |
| Phablet (< md, > sm) | Two rows, dropdown/search still inline |  |
| Mobile (< sm) | Three rows stacked |  |
How to set up and validate locally
- Fetch and checkout this branch on both GDKs.
- Setup Geo and access your Primary GDK (How to setup Geo).
- Navigate to the Geo Replicables UI (ex.
http://127.0.0.1:3001/admin/geo/replication/projects) - Ensure Projects Tab is unchanged
- Ensure Designs Tab reflects Design mocks (attached on link issue at the top of the description)
- Ensure every other Tab reflects Design mocks (attached on link issue at the top of the description)
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #361612 (closed)