feat(insights): Use `GlobalDrawer` instead of detail panels #82534

gggritso · 2024-12-23T16:50:35Z

Replaces all Insights side panels with new GlobalDrawer implementations that match the drawers in Issues. The visual changes are minimal

Slightly different animations
A "Close" button on the top left of the drawer
Scroll bars on the left of the drawer
Tighter padding
Panel doesn't re-animate as often on clicking another transaction

There are small feature changes!

no more docking bottom or right. Docking is to the right only
panels now have closing animations

Before:

After:

Code Changes

GlobalDrawer is invoked with a hook, rather than rendered inline. So, I had to make some changes.

Before:

rendering panels mostly unconditionally like <CacheSamplesPanel />
each sample panel checks the URL to see if it's supposed to be open
if open, renders itself, otherwise stays invisible
on close, updates the URL, which re-renders and hides

This is problematic for a bunch of reasons:

When components can decide to not render themselves, the code flow is confusing. Parents should generally decide when to render children
When a component is rendered but hidden, it runs its side effects. This means that in our case, network requests were sometimes going out, even though the panel isn't visible

After:

the panel is rendered using a useEffect, the effect detects a necessary URL parameter or state, and open the panel if necessary. All conditions that the panel used to check for itself are pulled up into the parent
the panel is rendered straight, it doesn't have any conditionals to check if it's supposed to be open
on close, the panel hides itself, and tells the parent to update the URL or state as necessary

This is tidier, avoids component side-effects, and preserves closing animations! Plus, this means I can re-use a header component, make the analytics tracking consistent, etc.

This only leaves a small handful of users of DetailPanel, mostly in the trace view.

Unfortunately the re-use is not as consistent as I hoped.

This reverts commit 3e54ef6.

This is what the tests expect, and it makes sense

It's optional now

codecov · 2024-12-23T17:09:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff            @@
##             master   #82534   +/-   ##
=========================================
  Coverage          ?   80.45%           
=========================================
  Files             ?     7314           
  Lines             ?   321482           
  Branches          ?    20978           
=========================================
  Hits              ?   258657           
  Misses            ?    62418           
  Partials          ?      407

edwardgou-sentry · 2025-01-02T17:22:54Z

static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx

+        subregions={filters[SpanMetricsField.USER_GEO_SUBREGION]}
+        groupId={groupId}
+        moduleName={ModuleName.RESOURCE}
+        transactionName={transaction as string}


nit: Maybe we could use decodeScalar so we don't need this type assertion? might have to handle undefined though or add a fallback

Probably yes! I didn't bother changing this since it's not part of the panel change (I'm just moving the code around) but I agree that using decodeScalar (probably in useLocationQuery) would be better here

getsentry-bot · 2025-01-06T19:10:03Z

PR reverted: ef507f3

…82534)" This reverts commit 81e0918. Co-authored-by: gggritso <[email protected]>

gggritso · 2025-01-06T19:10:08Z

Reverted because the panel wasn't closing correctly on URL changes. Will be re-added in a future PR

Attempt #2. The [previous PR](#82534) had to be reverted because I didn't account for URL behaviour. This PR is very similar, but now opening and closing the span samples drawer is done in a special hook that watches for the required URL parameters. --- Closes #81273 Replaces all Insights side panels with new `GlobalDrawer` implementations that match the drawers in Issues. The visual changes are minimal 1. Slightly different animations 2. A "Close" button on the top left of the drawer 3. Scroll bars on the left of the drawer 4. Tighter padding 5. Panel doesn't re-animate as often on clicking another transaction There are small feature changes! - no more docking bottom or right. Docking is to the right only - panels now have closing animations **Before:** <img width="829" alt="Screenshot 2024-12-23 at 11 42 33 AM" src="https://github.com/user-attachments/assets/78e3631b-7694-42eb-b3f0-149f92307748" /> <img width="817" alt="Screenshot 2024-12-23 at 11 42 44 AM" src="https://github.com/user-attachments/assets/f24b2a0e-3adb-414d-b965-eeb5715f7a9e" /> <img width="838" alt="Screenshot 2024-12-23 at 11 43 07 AM" src="https://github.com/user-attachments/assets/9753b6da-a6fb-464b-bc3e-25f5126fa4e5" /> **After:** <img width="767" alt="Screenshot 2024-12-23 at 11 43 19 AM" src="https://github.com/user-attachments/assets/b500af97-7493-4f2f-9330-6190e31eaac1" /> <img width="774" alt="Screenshot 2024-12-23 at 11 43 55 AM" src="https://github.com/user-attachments/assets/332569ad-b715-4365-b000-188b64747944" /> <img width="563" alt="Screenshot 2024-12-23 at 11 44 44 AM" src="https://github.com/user-attachments/assets/338ec721-471e-4760-b028-6df850df0e8e" /> <img width="483" alt="Screenshot 2024-12-23 at 12 04 50 PM" src="https://github.com/user-attachments/assets/db20d3a8-9958-4993-8ea0-6781e1467a80" /> ## Code Changes `GlobalDrawer` is invoked with a hook, rather than rendered inline. So, I had to make some changes. **Before:** - rendering panels mostly unconditionally like `<CacheSamplesPanel />` - each sample panel checks the URL to see if it's supposed to be open - if open, renders itself, otherwise stays invisible - on close, updates the URL, which re-renders and hides This is problematic for a bunch of reasons: 1. When components can decide to not render themselves, the code flow is confusing. Parents should generally decide when to render children 2. When a component is rendered but hidden, it runs its side effects. This means that in our case, network requests were sometimes going out, even though the panel isn't visible **After:** - the panel is rendered using a `useEffect`, the effect detects a necessary URL parameter or state, and open the panel if necessary. All conditions that the panel used to check for itself are passed as parameters to the hooks - the panel is rendered straight, it doesn't have any conditionals to check if it's supposed to be open - on close, the panel hides itself, and tells the parent to update the URL or state as necessary This is tidier, avoids component side-effects, and preserves closing animations! Plus, this means I can re-use a header component, make the analytics tracking consistent, etc. --- This only leaves a small handful of users of `DetailPanel`, mostly in the trace view.

Closes #81273 Replaces all Insights side panels with new `GlobalDrawer` implementations that match the drawers in Issues. The visual changes are minimal 1. Slightly different animations 2. A "Close" button on the top left of the drawer 3. Scroll bars on the left of the drawer 4. Tighter padding 5. Panel doesn't re-animate as often on clicking another transaction There are small feature changes! - no more docking bottom or right. Docking is to the right only - panels now have closing animations ## Code Changes `GlobalDrawer` is invoked with a hook, rather than rendered inline. So, I had to make some changes. **Before:** - rendering panels mostly unconditionally like `<CacheSamplesPanel />` - each sample panel checks the URL to see if it's supposed to be open - if open, renders itself, otherwise stays invisible - on close, updates the URL, which re-renders and hides This is problematic for a bunch of reasons: 1. When components can decide to not render themselves, the code flow is confusing. Parents should generally decide when to render children 2. When a component is rendered but hidden, it runs its side effects. This means that in our case, network requests were sometimes going out, even though the panel isn't visible **After:** - the panel is rendered using a `useEffect`, the effect detects a necessary URL parameter or state, and open the panel if necessary. All conditions that the panel used to check for itself are pulled up into the parent - the panel is rendered straight, it doesn't have any conditionals to check if it's supposed to be open - on close, the panel hides itself, and tells the parent to update the URL or state as necessary This is tidier, avoids component side-effects, and preserves closing animations! Plus, this means I can re-use a header component, make the analytics tracking consistent, etc. --- This only leaves a small handful of users of `DetailPanel`, mostly in the trace view.

…82534)" This reverts commit 81e0918. Co-authored-by: gggritso <[email protected]>

Attempt #2. The [previous PR](#82534) had to be reverted because I didn't account for URL behaviour. This PR is very similar, but now opening and closing the span samples drawer is done in a special hook that watches for the required URL parameters. --- Closes #81273 Replaces all Insights side panels with new `GlobalDrawer` implementations that match the drawers in Issues. The visual changes are minimal 1. Slightly different animations 2. A "Close" button on the top left of the drawer 3. Scroll bars on the left of the drawer 4. Tighter padding 5. Panel doesn't re-animate as often on clicking another transaction There are small feature changes! - no more docking bottom or right. Docking is to the right only - panels now have closing animations **Before:** <img width="829" alt="Screenshot 2024-12-23 at 11 42 33 AM" src="https://github.com/user-attachments/assets/78e3631b-7694-42eb-b3f0-149f92307748" /> <img width="817" alt="Screenshot 2024-12-23 at 11 42 44 AM" src="https://github.com/user-attachments/assets/f24b2a0e-3adb-414d-b965-eeb5715f7a9e" /> <img width="838" alt="Screenshot 2024-12-23 at 11 43 07 AM" src="https://github.com/user-attachments/assets/9753b6da-a6fb-464b-bc3e-25f5126fa4e5" /> **After:** <img width="767" alt="Screenshot 2024-12-23 at 11 43 19 AM" src="https://github.com/user-attachments/assets/b500af97-7493-4f2f-9330-6190e31eaac1" /> <img width="774" alt="Screenshot 2024-12-23 at 11 43 55 AM" src="https://github.com/user-attachments/assets/332569ad-b715-4365-b000-188b64747944" /> <img width="563" alt="Screenshot 2024-12-23 at 11 44 44 AM" src="https://github.com/user-attachments/assets/338ec721-471e-4760-b028-6df850df0e8e" /> <img width="483" alt="Screenshot 2024-12-23 at 12 04 50 PM" src="https://github.com/user-attachments/assets/db20d3a8-9958-4993-8ea0-6781e1467a80" /> ## Code Changes `GlobalDrawer` is invoked with a hook, rather than rendered inline. So, I had to make some changes. **Before:** - rendering panels mostly unconditionally like `<CacheSamplesPanel />` - each sample panel checks the URL to see if it's supposed to be open - if open, renders itself, otherwise stays invisible - on close, updates the URL, which re-renders and hides This is problematic for a bunch of reasons: 1. When components can decide to not render themselves, the code flow is confusing. Parents should generally decide when to render children 2. When a component is rendered but hidden, it runs its side effects. This means that in our case, network requests were sometimes going out, even though the panel isn't visible **After:** - the panel is rendered using a `useEffect`, the effect detects a necessary URL parameter or state, and open the panel if necessary. All conditions that the panel used to check for itself are passed as parameters to the hooks - the panel is rendered straight, it doesn't have any conditionals to check if it's supposed to be open - on close, the panel hides itself, and tells the parent to update the URL or state as necessary This is tidier, avoids component side-effects, and preserves closing animations! Plus, this means I can re-use a header component, make the analytics tracking consistent, etc. --- This only leaves a small handful of users of `DetailPanel`, mostly in the trace view.

gggritso added 27 commits December 23, 2024 08:44

Add panel header component

c1663c3

Add body component

432408b

Truncate the link

fc60207

Use new drawer in HTTP samples panel

b39998d

Extract drawer hook

4c72a84

Use new drawer in Caches

d0aee68

Use new Drawer in Queues

2c30adb

Pass through a React node instead

080527b

Omit query when closing the drawer

51b42a3

Use new Drawer in Queries and Resources

b7a892c

Custon onClose

3e54ef6

Unfortunately the re-use is not as consistent as I hoped.

Revert "Custon onClose"

102b9ae

This reverts commit 3e54ef6.

Use drawer in Web Vitals

80cffdd

Give vitals drawer a more specific name

76dc8c6

Omit more span properties from URL on close

cf66ff3

Use drawer in Mobile

8a92f4f

Fold me into rename

79ca100

Project is optional for rendering the drawer header

c901671

Use heading for header

4550c7d

This is what the tests expect, and it makes sense

Do not gate header behind project

3b5a93f

It's optional now

Fix data loading in cache panel

54842f2

Add subtitle support to drawer header

8b799a0

Add subtitle to queue panels

7539a2c

Remove unneeded test

99ca171

Rename bad interface

4521aec

Remove unused prop

af53630

Fix bad truncations

29fa975

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 23, 2024

vercel bot deployed to Preview December 23, 2024 16:53 View deployment

Fix analytics

1db9c81

vercel bot deployed to Preview December 23, 2024 17:07 View deployment

gggritso marked this pull request as ready for review December 23, 2024 17:56

gggritso requested a review from a team as a code owner December 23, 2024 17:56

edwardgou-sentry approved these changes Jan 2, 2025

View reviewed changes

Merge branch 'master' into feat/insights/new-slideout-panel-design

62dc39c

vercel bot deployed to Preview January 2, 2025 19:56 View deployment

gggritso added 3 commits January 6, 2025 09:43

Merge branch 'master' into feat/insights/new-slideout-panel-design

59de2b5

Rename over-specified component

db0be36

Add subtitle delimiter

f443bd2

gggritso enabled auto-merge (squash) January 6, 2025 15:08

vercel bot deployed to Preview January 6, 2025 15:09 View deployment

Update specs

d134cc5

vercel bot deployed to Preview January 6, 2025 15:22 View deployment

gggritso merged commit 81e0918 into master Jan 6, 2025
40 checks passed

gggritso deleted the feat/insights/new-slideout-panel-design branch January 6, 2025 15:31

gggritso added the Trigger: Revert Add to a merged PR to revert it (skips CI) label Jan 6, 2025

getsentry-bot added a commit that referenced this pull request Jan 6, 2025

Revert "feat(insights): Use GlobalDrawer instead of detail panels (#…

ef507f3

…82534)" This reverts commit 81e0918. Co-authored-by: gggritso <[email protected]>

gggritso restored the feat/insights/new-slideout-panel-design branch January 7, 2025 18:28

gggritso deleted the feat/insights/new-slideout-panel-design branch January 7, 2025 18:36

gggritso mentioned this pull request Jan 13, 2025

feat(insights): Use GlobalDrawer instead of details panel II #83301

Merged

andrewshie-sentry pushed a commit that referenced this pull request Jan 22, 2025

Revert "feat(insights): Use GlobalDrawer instead of detail panels (#…

705f6bd

…82534)" This reverts commit 81e0918. Co-authored-by: gggritso <[email protected]>

github-actions bot locked and limited conversation to collaborators Jan 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(insights): Use `GlobalDrawer` instead of detail panels #82534

feat(insights): Use `GlobalDrawer` instead of detail panels #82534

gggritso commented Dec 23, 2024 •

edited

Loading

codecov bot commented Dec 23, 2024 •

edited

Loading

edwardgou-sentry Jan 2, 2025

gggritso Jan 2, 2025

getsentry-bot commented Jan 6, 2025

gggritso commented Jan 6, 2025

feat(insights): Use GlobalDrawer instead of detail panels #82534

feat(insights): Use GlobalDrawer instead of detail panels #82534

Conversation

gggritso commented Dec 23, 2024 • edited Loading

Code Changes

codecov bot commented Dec 23, 2024 • edited Loading

Codecov Report

edwardgou-sentry Jan 2, 2025

Choose a reason for hiding this comment

gggritso Jan 2, 2025

Choose a reason for hiding this comment

getsentry-bot commented Jan 6, 2025

gggritso commented Jan 6, 2025

feat(insights): Use `GlobalDrawer` instead of detail panels #82534

feat(insights): Use `GlobalDrawer` instead of detail panels #82534

gggritso commented Dec 23, 2024 •

edited

Loading

codecov bot commented Dec 23, 2024 •

edited

Loading