Add collapse, empty states and deep linking to group by #6498
Conversation
Dependency Review✅ No vulnerabilities or OpenSSF Scorecard issues found.Scanned FilesNone |
app/web/src/newhotness/Explore.vue
Outdated
| watch([groupBySelection], () => { | ||
| const query: SelectionsInQueryString = { | ||
| ...router.currentRoute.value?.query, | ||
| }; | ||
| delete query.map; | ||
| delete query.groupBy; | ||
|
|
||
| query.grid = "1"; | ||
| router.push({ query }); | ||
|
|
||
| if (groupBySelection.value === GroupByCriteria.Diff) { | ||
| query.groupBy = "diff"; | ||
| } else if (groupBySelection.value === GroupByCriteria.Qualification) { | ||
| query.groupBy = "qual"; | ||
| } else if (groupBySelection.value === GroupByCriteria.Upgrade) { | ||
| query.groupBy = "upgr"; | ||
| } | ||
|
|
||
| router.push({ | ||
| query, | ||
| }); | ||
| }); | ||
|
|
There was a problem hiding this comment.
Such a clean and elegant watcher!
f44afc6 to
86ee105
Compare
| "Failed qualifications": [], | ||
| Warnings: [], | ||
| "Passed qualifications": [], |
| delete query.map; | ||
| delete query.groupBy; | ||
|
|
||
| query.grid = "1"; |
There was a problem hiding this comment.
Note: when you share the link you also need to be sent to the grid rather than the map. This handles that.
| case "running": | ||
| return "Running"; | ||
| return "Running qualifications"; |
There was a problem hiding this comment.
"Running" is not real and will die in a follow up PR. This is from before qualifications were on the prop tree... might be like... since late 2022 😅. For now, we'll keep it since we discovered this right as we were wrapping it. It is harmless.
| const getQualificationStatusTitle = (component: ComponentInList) => { | ||
| const status = getQualificationStatus(component); | ||
| switch (status) { | ||
| case "success": | ||
| return "Passed"; | ||
| return "Passed qualifications"; |
There was a problem hiding this comment.
Note: the section titles and icons are intentional and match what we have discussed.
| @@ -265,6 +265,7 @@ export type SelectionsInQueryString = Partial<{ | |||
| map: string; | |||
| grid: string; | |||
| c: string; | |||
| groupBy: "diff" | "qual" | "upgr"; | |||
There was a problem hiding this comment.
These are the first four characters of each type. We may go down to one character or change this in the future, but we wanted something that could be backwards compatible to start.
| // Handle the very first time everything is loaded. We want empty sections to begin collapsed | ||
| // and non-empty sections to be expanded by default. | ||
| if (collapsed === undefined) { | ||
| collapsed = count === 0; | ||
| } |
There was a problem hiding this comment.
Here's the deal: this was originally a "toggle", but we needed to handle a ternary state. By default, empty sections needed to be collapsed and non-empty sections needed to be expanded. So, this is how we handle that.
| <div v-else> | ||
| <!-- footer area --> | ||
| </div> |
There was a problem hiding this comment.
Subtle, but important to have a div here.
86ee105 to
0cb9741
Compare
Co-authored-by: Victor Bustamante <victor@systeminit.com> Signed-off-by: Nick Gerace <nick@systeminit.com>
54ec15f to
67e2416
Compare
How does this PR change the system?
Screenshots: