Skip to content

feat(releases): Add project picker to releases drawer#91129

Merged
billyvg merged 13 commits into
masterfrom
billy/replay-195-add-project-picker-to-releases-details-drawer
May 8, 2025
Merged

feat(releases): Add project picker to releases drawer#91129
billyvg merged 13 commits into
masterfrom
billy/replay-195-add-project-picker-to-releases-details-drawer

Conversation

@billyvg

@billyvg billyvg commented May 7, 2025

Copy link
Copy Markdown
Member

If URL does not contain a project id (rdReleaseProjectId), then show a project picker before showing release details (if the release belongs to multiple projects).

image

With project selected, we show all projects in the header and allow user to switch projects by clicking on a badge:

image

If URL does not contain a project id (`rdReleaseProjectId`), then show a project picker before showing release details.
@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 7, 2025
@billyvg billyvg marked this pull request as ready for review May 7, 2025 18:26
@billyvg billyvg requested a review from a team as a code owner May 7, 2025 18:26

@michellewzhang michellewzhang left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

SCR-20250507-lzqn

not related to this PR i think, but this table looks funky

Comment thread static/app/views/releases/drawer/releasesDrawerDetails.spec.tsx Outdated
Comment on lines +105 to +109
await waitFor(() => {
expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
});

expect(screen.getByText('Details')).toBeInTheDocument();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
await waitFor(() => {
expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
});
expect(screen.getByText('Details')).toBeInTheDocument();
expect(await screen.findByText('Details')).toBeInTheDocument();

does the test work if we await the text instead?

}
}}
isClearable={false}
styles={{container: (base: any) => ({...base, marginTop: space(2)})}}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

inline styles ?!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

😭 i don't think we can style it otherwise (+ cursor did this)

label: (
<Link
to={{
query: locationQueryWithoutRelease,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Screen.Recording.2025-05-07.at.1.26.50.PM.mov

this crumb breaks for me, coming from the table on session health

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

url of broken drawer is https://xxx.sentry.dev/insights/mobile/sessions/?rd=show&statsPeriod=90d

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

the crumb works ok if the entrypoint is the release bubbles though!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Ah good find, it requires start/end dates to show the Releases list

@codecov

codecov Bot commented May 8, 2025

Copy link
Copy Markdown

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
10286 1 10285 9
View the top 1 failed test(s) by shortest run time
ReleasesDrawerDetails renders content when projectId exists
Stack Traces | 0.247s run time
Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

In HTML, <a> cannot be a descendant of <a>.
This will cause a hydration error.

  ...
    <ErrorBoundary>
      <ReleasesDrawerContent release="test-release" projectId="1" project={{id:"1",slug:"t...", ...}} ...>
        <EventNavigator>
          <Insertion>
          <div className="css-1ym3qc...">
            <ErrorBoundary mini={true}>
              <HeaderToolbar>
                <Insertion>
                <h3 className="css-1wgmxt...">
                  <ReleaseWithPlatform>
                    <Insertion>
                    <div className="css-uxnh1-...">
                      <ErrorBoundary mini={true}>
                        <SelectableProjectBadges>
                          <Insertion>
                          <div className="css-1lyici...">
                            <SelectableProjectBadge to={{pathname:"...", ...}}>
                              <Insertion>
                              <BaseLink to={{pathname:"...", ...}} className="css-12xwhw...">
                                <LinkWithRef to={{pathname:"...", ...}} className="css-12xwhw...">
>                                 <a
>                                   className="css-12xwhwy-Link-linkStyles-SelectableProjectBadge eupav4k2"
>                                   href="/releases/?rdReleaseProjectId=2"
>                                   onClick={function handleClick}
>                                   ref={null}
>                                   target={undefined}
>                                 >
                                    <ProjectBadge project={{id:2,slug:"pro...", ...}} hideName={true} avatarSize={16}>
                                      <StyledLink to="/organizat..." className={undefined} aria-label="View Proje..." ...>
                                        <Insertion>
                                        <BaseLink to="/organizat..." className="css-1f45jk..." aria-label="View Proje..." ...>
                                          <LinkWithRef to="/organizat..." className="css-1f45jk..." ...>
>                                           <a
>                                             className="css-1f45jkn-Link-linkStyles-StyledLink evuohrf0"
>                                             aria-label="View Project Details"
>                                             aria-description="project-slug"
>                                             href=".../org-slug/projects/project-slug/?project=2"
>                                             onClick={function handleClick}
>                                             ref={null}
>                                             target={undefined}
>                                           >
                      ...
                  ...
        ...

    at console.captureMessage [as error] (.../node_modules/jest-fail-on-console/index.js:83:25)
    at validateDOMNesting (.../react-dom/cjs/react-dom-client.development.js:2613:19)
    at completeWork (.../react-dom/cjs/react-dom-client.development.js:11299:15)
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at completeUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15268:19)
    at performUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15149:11)
    at workLoopSync (.../react-dom/cjs/react-dom-client.development.js:14956:41)
    at renderRootSync (.../react-dom/cjs/react-dom-client.development.js:14936:11)
    at performWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:14419:13)
    at performSyncWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:16231:7)
    at flushSyncWorkAcrossRoots_impl (.../react-dom/cjs/react-dom-client.development.js:16079:21)
    at processRootScheduleInMicrotask (.../react-dom/cjs/react-dom-client.development.js:16116:7)
    at .../react-dom/cjs/react-dom-client.development.js:16250:13
    at invokeTheCallbackFunction (.../living/generated/Function.js:19:26)
    at .../jsdom/browser/Window.js:554:9
    at node:internal/process/task_queues:151:7
    at AsyncResource.runInAsyncScope (node:async_hooks:211:14)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:148:8)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)

<a> cannot contain a nested <a>.
See this log for the ancestor stack trace.
    at console.captureMessage [as error] (.../node_modules/jest-fail-on-console/index.js:83:25)
    at .../react-dom/cjs/react-dom-client.development.js:2626:21
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at validateDOMNesting (.../react-dom/cjs/react-dom-client.development.js:2625:11)
    at completeWork (.../react-dom/cjs/react-dom-client.development.js:11299:15)
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at completeUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15268:19)
    at performUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15149:11)
    at workLoopSync (.../react-dom/cjs/react-dom-client.development.js:14956:41)
    at renderRootSync (.../react-dom/cjs/react-dom-client.development.js:14936:11)
    at performWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:14419:13)
    at performSyncWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:16231:7)
    at flushSyncWorkAcrossRoots_impl (.../react-dom/cjs/react-dom-client.development.js:16079:21)
    at processRootScheduleInMicrotask (.../react-dom/cjs/react-dom-client.development.js:16116:7)
    at .../react-dom/cjs/react-dom-client.development.js:16250:13
    at invokeTheCallbackFunction (.../living/generated/Function.js:19:26)
    at .../jsdom/browser/Window.js:554:9
    at node:internal/process/task_queues:151:7
    at AsyncResource.runInAsyncScope (node:async_hooks:211:14)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:148:8)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)
    at flushUnexpectedConsoleCalls (.../node_modules/jest-fail-on-console/index.js:48:13)
    at Object.<anonymous> (.../node_modules/jest-fail-on-console/index.js:139:7)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusHook (.../jest-circus/build/run.js:281:40)
    at _runTest (.../jest-circus/build/run.js:254:5)
    at _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at run (.../jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at runTest (.../jest-runner/build/runTest.js:444:34)
    at Object.worker (.../jest-runner/build/testWorker.js:106: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.

@billyvg billyvg enabled auto-merge (squash) May 8, 2025 19:50
@billyvg billyvg merged commit 1c94259 into master May 8, 2025
41 checks passed
@billyvg billyvg deleted the billy/replay-195-add-project-picker-to-releases-details-drawer branch May 8, 2025 19:51
andrewshie-sentry pushed a commit that referenced this pull request May 12, 2025
If URL does not contain a project id (`rdReleaseProjectId`), then show a
project picker before showing release details (if the release belongs to
multiple projects).

<img width="958" alt="image"
src="https://github.com/user-attachments/assets/e2dbcda9-9e9f-425f-8f97-d4f2ab95e7a8"
/>

With project selected, we show all projects in the header and allow user
to switch projects by clicking on a badge:

<img width="958" alt="image"
src="https://github.com/user-attachments/assets/b1456c0e-31e7-412e-a5b3-9898dd00d3a5"
/>
@github-actions github-actions Bot locked and limited conversation to collaborators May 24, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants