feat(usage overview): Release new Usage Overview #104165

isabellaenriquez · 2025-12-01T16:57:33Z

Split out from #103983

Closes https://linear.app/getsentry/issue/BIL-1817/update-usage-overview-table-with-new-designs

"GA"s the new Usage Overview + kills dead code :))

linear · 2025-12-01T16:57:37Z

BIL-1817 Update Usage Overview table with new designs

codecov · 2025-12-01T17:05:13Z

❌ 4 Tests Failed:

Tests completed	Failed	Passed	Skipped
12758	4	12754	10

View the top 3 failed test(s) by shortest run time

UsageOverview can switch panel by clicking table rows

Stack Traces | 1.18s run time

Error: Found multiple elements with the role "heading" and name "Errors"

Here are the matching elements:

Ignored nodes: comments, script, style
...

Ignored nodes: comments, script, style
...

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
...
    at waitForWrapper (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/wait-for.js:163:27)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:86:33
    at Object.findByRole (.../subscriptionPage/usageOverview/index.spec.tsx:136:18)
    at Promise.finally.completed (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1559:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1499:10)
    at _callCircusTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1009:40)
    at _runTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:949:3)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:839:13)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:829:11)
    at run (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:757:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1920:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/runner.js:101:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:272:16)
    at runTest (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:340:7)
    at Object.worker (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:494:12)

UsageOverview defaults to last selected when query param is invalid

Stack Traces | 1.34s run time

Error: Found multiple elements with the role "heading" and name "Errors"

Here are the matching elements:

Ignored nodes: comments, script, style
...

Ignored nodes: comments, script, style
...

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
...
    at waitForWrapper (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/wait-for.js:163:27)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:86:33
    at Object.findByRole (.../subscriptionPage/usageOverview/index.spec.tsx:122:18)
    at Promise.finally.completed (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1559:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1499:10)
    at _callCircusTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1009:40)
    at _runTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:949:3)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:839:13)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:829:11)
    at run (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:757:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1920:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/runner.js:101:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:272:16)
    at runTest (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:340:7)
    at Object.worker (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:494:12)

UsageOverview opens panel based with no query params

Stack Traces | 1.37s run time

Error: Found multiple elements with the role "heading" and name "Errors"

Here are the matching elements:

Ignored nodes: comments, script, style
...

Ignored nodes: comments, script, style
...

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
...
    at waitForWrapper (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/wait-for.js:163:27)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:86:33
    at Object.findByRole (.../subscriptionPage/usageOverview/index.spec.tsx:79:18)
    at Promise.finally.completed (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1559:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1499:10)
    at _callCircusTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1009:40)
    at _runTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:949:3)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:839:13)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:829:11)
    at run (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:757:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1920:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/runner.js:101:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:272:16)
    at runTest (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:340:7)
    at Object.worker (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:494:12)

UsageOverview opens panel based on query params

Stack Traces | 1.54s run time

Error: Found multiple elements with the role "heading" and name "Replays"

Here are the matching elements:

Ignored nodes: comments, script, style
...

Ignored nodes: comments, script, style
...

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
...
    at waitForWrapper (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/wait-for.js:163:27)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:86:33
    at Object.findByRole (.../subscriptionPage/usageOverview/index.spec.tsx:100:18)
    at Promise.finally.completed (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1559:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1499:10)
    at _callCircusTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1009:40)
    at _runTest (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:949:3)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:839:13)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:829:11)
    at run (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:757:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/jestAdapterInit.js:1920:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/jest-circus@30.0.4_babel-plugin-macros@3.1..../jest-circus/build/runner.js:101:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:272:16)
    at runTest (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:340:7)
    at Object.worker (.../sentry/node_modules/.pnpm/jest-runner@30.0..../jest-runner/build/testWorker.js:494:12)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

brendanhsentry

very clean

static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx

static/gsApp/views/subscriptionPage/usageOverview/components/breakdownInfo.tsx

isabellaenriquez added 16 commits November 28, 2025 12:32

feat(usage overview): Introduce util functions and hook

ecf4694

fix test + knip

a9fdc2d

add this too

28f2d3e

feat(usage overview): Update buttons

6b0f5aa

update tests + tweak style

a6efc5d

also add this

f7623fe

feat(usage overview): Extract drawer charts into component

485be78

rm unused exported type

145d051

update tests

ab127d3

feat(usage overview): Introduce new panel

87a9f70

split out breakdownInfo

eec3fb6

feat(usage overview): Add breakdown into panel

bd9804f

fix types

eb07afa

add padding

6d701b6

feat(usage overview): Introduce new table

f8b12e6

feat(usage overview): Release new Usage Overview

800b057

vercel bot deployed to Preview December 1, 2025 16:57 View deployment

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

isabellaenriquez added 2 commits December 1, 2025 12:08

fix tests

eb1e712

Merge branch 'isabella/uo-v2-pt-6' into isabella/uo-v2-pt-7

39e1d46

vercel bot deployed to Preview December 1, 2025 17:12 View deployment

fix mocks

99543b4

isabellaenriquez marked this pull request as ready for review December 1, 2025 17:20

isabellaenriquez requested a review from a team as a code owner December 1, 2025 17:20

vercel bot deployed to Preview December 1, 2025 17:21 View deployment

vbro approved these changes Dec 1, 2025

View reviewed changes

brendanhsentry approved these changes Dec 1, 2025

View reviewed changes

Base automatically changed from isabella/uo-v2-pt-6 to master December 2, 2025 21:15

Merge branch 'master' into isabella/uo-v2-pt-7

ad8f5ac

vercel bot deployed to Preview December 2, 2025 21:24 View deployment

small cosmetic tweaks + hide irrelevant breakdown info

1794e53

vercel bot deployed to Preview December 3, 2025 22:37 View deployment

isabellaenriquez added 2 commits December 3, 2025 14:41

add lock to header

8839526

alter cta

b9ea509

vercel bot deployed to Preview December 4, 2025 00:29 View deployment

cursor bot reviewed Dec 4, 2025

View reviewed changes

static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx Show resolved Hide resolved

static/gsApp/views/subscriptionPage/usageOverview/components/breakdownInfo.tsx Outdated Show resolved Hide resolved

dashed approved these changes Dec 4, 2025

View reviewed changes

fix translation + inner table bug

8361ee1

vercel bot deployed to Preview December 4, 2025 02:13 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(usage overview): Release new Usage Overview #104165

feat(usage overview): Release new Usage Overview #104165

isabellaenriquez commented Dec 1, 2025

Uh oh!

linear bot commented Dec 1, 2025

Uh oh!

codecov bot commented Dec 1, 2025 •

edited

Loading

Uh oh!

brendanhsentry left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

feat(usage overview): Release new Usage Overview #104165

Are you sure you want to change the base?

feat(usage overview): Release new Usage Overview #104165

Conversation

isabellaenriquez commented Dec 1, 2025

Uh oh!

linear bot commented Dec 1, 2025

Uh oh!

codecov bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 4 Tests Failed:

Uh oh!

brendanhsentry left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov bot commented Dec 1, 2025 •

edited

Loading