Add group by functionality to new UI #6469
Conversation
Dependency Review✅ No vulnerabilities or OpenSSF Scorecard issues found.Scanned FilesNone |
| @keydown.left="onArrowLeft" | ||
| @keydown.right="onArrowRight" | ||
| @keydown.up="onArrowUp" | ||
| @keydown.down="onArrowDown" |
There was a problem hiding this comment.
For reviewers: we consolidated down the "v2" controls for this refactor
| return set; | ||
| }); | ||
|
|
||
| const groupedComponents = computed(() => { |
There was a problem hiding this comment.
The ordering of groups and their icons (or lackthereof) are intentional
| ) { | ||
| if (!focusedComponent.value) return; | ||
|
|
||
| if (upgradeableComponents.value.has(focusedComponent.value.id)) { |
There was a problem hiding this comment.
The functionality here changed slightly to use the list for performance reasons. We should consider moving this to ComponentInList or making a new type in the future.
| const GROUP_HEADER_HEIGHT = 50; | ||
| const GROUP_FOOTER_HEIGHT = 10; |
There was a problem hiding this comment.
nit: feels like anything having to do with heights, padding, widths, etc. for Explore should be centralized to a .ts file.
There was a problem hiding this comment.
At the very least it would be good to move these to the top of the script area within this component.
| export type ExploreGridRowData = | ||
| | { | ||
| type: "contentRow"; | ||
| components: ComponentInList[]; | ||
| chunkInitialId: number; | ||
| insideSection: boolean; | ||
| } | ||
| | { | ||
| type: "header"; | ||
| title: string; | ||
| count: number; | ||
| } | ||
| | { | ||
| type: "footer"; | ||
| }; |
There was a problem hiding this comment.
This is the core of how the PR works: there are three row kinds now when there was previously one.
817d9dd to
7c059cb
Compare
Signed-off-by: Victor Bustamante <victor@systeminit.com> Co-authored-by: Nick Gerace <nick@systeminit.com> Co-authored-by: Wendy Bujalski <wendy@systeminit.com>
7c059cb to
7ac2c40
Compare
| @@ -100,86 +70,80 @@ | |||
| slotProps.focus(); | |||
| mapRef?.deselect(); | |||
| unfocus(); | |||
| unhover(); | |||
There was a problem hiding this comment.
Why did y'all remove the unhover here?
There was a problem hiding this comment.
Without v1 unfocus does what unhover used to do, so we don't need it right now
| const hoveredId = ref<ComponentId | undefined>(undefined); | ||
| const hover = (componentId: ComponentId, hovered: boolean) => { | ||
| if (hovered) { | ||
| hoveredId.value = componentId; | ||
| emit("childUnhover", componentId); | ||
| } else { | ||
| hoveredId.value = undefined; | ||
| emit("childHover", componentId); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Ah I see how you changed hovering to work with the nested vue components.
There was a problem hiding this comment.
Restructuring the grid virtualizer into these nested vue components is very well done!
| const componentGridTileRefs = computed(() => { | ||
| if (!exploreGridRowRefs.value) return []; | ||
|
|
||
| const tiles: InstanceType<typeof ExploreGridTile>[] = []; | ||
|
|
||
| for (const row of exploreGridRowRefs.value) { | ||
| if (!row.exploreGridTileRefs) continue; | ||
|
|
||
| tiles.push(...row.exploreGridTileRefs); | ||
| } | ||
|
|
||
| return tiles; | ||
| }); |
How does this PR change the system?
Screenshots:
Out of scope:
We didn't tackle collapsing the sections
How was it tested?
In short: 🔗