Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add history navigation to cache tab #1394

Merged
merged 16 commits into from
Jun 6, 2024
Merged

Add history navigation to cache tab #1394

merged 16 commits into from
Jun 6, 2024

Conversation

jerelmiller
Copy link
Member

@jerelmiller jerelmiller commented May 30, 2024

Adds a forward/back button with history to the cache tab. This should make it easier to navigate back and forth when digging into more complex objects that have lots of nested normalized data.

Previously getting back to where you were would require you to start back at either the root query or have to manually search the cache for the entry you came from.

Screenshot 2024-05-29 at 8 51 59 PM Screenshot 2024-05-29 at 8 55 53 PM Screenshot 2024-05-29 at 8 56 54 PM

@jerelmiller jerelmiller requested a review from a team as a code owner May 30, 2024 02:59
Copy link

relativeci bot commented May 30, 2024

#503 Bundle Size — 1.26MiB (+0.29%).

609402a(current) vs 8fac152 main#499(baseline)

Warning

Bundle contains 12 duplicate packages – View duplicate packages

Bundle metrics  Change 4 changes Regression 1 regression
                 Current
#503
     Baseline
#499
Regression  Initial JS 1.23MiB(+0.3%) 1.22MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 91.15% 0%
No change  Chunks 5 5
No change  Assets 12 12
Change  Modules 944(+0.43%) 940
No change  Duplicate Modules 45 45
Change  Duplicate Code 3.87%(-0.26%) 3.88%
No change  Packages 160 160
No change  Duplicate Packages 9 9
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#503
     Baseline
#499
Regression  JS 1.23MiB (+0.3%) 1.22MiB
No change  IMG 35.85KiB 35.85KiB
No change  HTML 810B 810B
No change  Other 778B 778B

Bundle analysis reportBranch jerel/cache-historyProject dashboard

{
variants: {
variant: {
error: [
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now we only need the error variant, so I've only implemented this one. We can add others as we need them.

@@ -39,9 +46,11 @@ function filterCache(cache: Cache, searchTerm: string) {
);
}

const history = new History("ROOT_QUERY");
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instantiating this outside of the component allows us to keep the history when changing tabs, otherwise this resets anytime the Cache component unmounts.

setCacheId={setCacheId}
searchTerm={searchTerm}
/>
<List>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component was fairly small and "EntityList" wasn't a super great name for this anyways, so I went ahead and inlined the implementation here and removed the old component.

Copy link
Member

@alessbell alessbell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great feature that will make navigating the cache much nicer! 🚀

return (
<Root>
<Root delayDuration={delayDuration}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice UX detail 💯

@jerelmiller jerelmiller merged commit 84a9634 into main Jun 6, 2024
9 checks passed
@jerelmiller jerelmiller deleted the jerel/cache-history branch June 6, 2024 16:27
@github-actions github-actions bot mentioned this pull request Jun 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants