Isabella/overview rehaul

[isabellaenriquez]

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

[codecov]

❌ 5 Tests Failed:

Tests completed	Failed	Passed	Skipped
12748	5	12743	10

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

UsageOverview does not render spend columns for non-self-serve without PAYG support

Stack Traces | 0.134s run time

Error: expect(received).toHaveLength(expected)

Expected length: 2
Received length: 5
Received array:  [<th><span class="css-1kc4ptp-Text e1cz2wip0">Feature</span></th>, <th><span class="css-1kc4ptp-Text e1cz2wip0">Usage</span></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Errors</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Quantity</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">% of Errors</div></th>]
    at Object.toHaveLength (.../usageOverview/components/table.spec.tsx:117:49)

UsageOverview renders columns for non-billing users

Stack Traces | 0.137s run time

Error: expect(received).toHaveLength(expected)

Expected length: 3
Received length: 6
Received array:  [<th><span class="css-1kc4ptp-Text e1cz2wip0">Feature</span></th>, <th><span class="css-1kc4ptp-Text e1cz2wip0">Usage</span></th>, <th><span class="css-1orknf9-Text-rc e1cz2wip0">Additional spend</span></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Errors</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Quantity</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">% of Errors</div></th>]
    at Object.toHaveLength (.../usageOverview/components/table.spec.tsx:62:49)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at processTimers (node:internal/timers:520:9)

UsageOverview renders columns for non-self-serve with PAYG support

Stack Traces | 0.141s run time

Error: expect(received).toHaveLength(expected)

Expected length: 3
Received length: 6
Received array:  [<th><span class="css-1kc4ptp-Text e1cz2wip0">Feature</span></th>, <th><span class="css-1kc4ptp-Text e1cz2wip0">Usage</span></th>, <th><span class="css-1orknf9-Text-rc e1cz2wip0">Additional spend</span></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Errors</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Quantity</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">% of Errors</div></th>]
    at Object.toHaveLength (.../usageOverview/components/table.spec.tsx:91:49)

UsageOverview renders columns and buttons for billing users

Stack Traces | 0.167s run time

Error: expect(received).toHaveLength(expected)

Expected length: 3
Received length: 6
Received array:  [<th><span class="css-1kc4ptp-Text e1cz2wip0">Feature</span></th>, <th><span class="css-1kc4ptp-Text e1cz2wip0">Usage</span></th>, <th><span class="css-1orknf9-Text-rc e1cz2wip0">Additional spend</span></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Errors</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">Quantity</div></th>, <th><div class="css-1r3o8wo-TextOverflow-overflowEllipsis e1lyrgnz0">% of Errors</div></th>]
    at Object.toHaveLength (.../usageOverview/components/table.spec.tsx:39:49)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at processTimers (node:internal/timers:520:9)

Subscription > Overview renders for new billing UI

Stack Traces | 0.474s run time

TestingLibraryElementError: Found multiple elements with the text: Business plan

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 Object.getElementError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/config.js:37:19)
    at getElementError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:20:35)
    at getMultipleElementsFoundError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:23:10)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:55:13
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByText (.../views/subscriptionPage/overview.spec.tsx:179:19)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at processTimers (node:internal/timers:520:9)

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