feat: Show org token selector #7385

mydea · 2023-07-10T13:46:05Z

This adds a new org token generator for the source maps setup. For now, we only add it in one place (the webpack plugin configuration), if it works well we can roll it out to all places that use SENTRY_AUTH_TOKEN.

If not signed in, we use this instead:

Note that this is blocked by the org tokens being rolled out to all orgs.

Closes #7226

vercel · 2023-07-10T13:46:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 18, 2023 8:33am

src/components/orgAuthTokenNote.tsx

evanpurkhiser · 2023-07-10T18:52:31Z

src/components/codeBlock.tsx


 const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)___\b/g;

+const ORG_AUTH_TOKEN_REGEX = /__ORG_AUTH_TOKEN__/g;


This is inconsistently two underscores instead of three like the rest of these keywords

I actually did this on purpose to avoid this being captured by the other regex. If we use triple underscore here, we need to make sure checking order is right (IMHO making this a bit more brittle for future refactorings), and it may also not be too clear that this does not go through the same code 🤔 maybe a completely different identifier would be even better, to make it more clear this is something else? For example +++ORG_AUTH_TOKEN+++?

In that case we should write tests.

If we're going to start having custom behavior for different tokens, we should implement it in a way that it's clear that this component supports handling that.

Right now using a different number of underscores is just going to be confusing, since it's really hard to notice (I already fixed a number of places where we were using 2 instead of 3).

I think the way to go here is to implement something a little bit more robust

evanpurkhiser · 2023-07-10T18:55:16Z

src/components/codeContext.tsx

+ return csrfCookie ? csrfCookie.split('=')[1] : null;
+}
+
+export async function createOrgAuthToken({


Is there a better place we can put this export? Doesn't feel right to have this inside codeContext.

I know this code is a bit of a mess right now, so it's probably unclear where this should go

There isn't really a utils kind of place as far as I've seen so far? Just the components, and this doesn't really have a dedicated component backing it 😬 it's only used in the codeBlock as of now. Happy to move it to any place you think makes sense!

Leave it here for now, we can move it around later once this repo is a little better organized.

evanpurkhiser · 2023-07-10T20:02:48Z

src/components/codeBlock.tsx

+ }
+
+ const currentSelectionIdx = sharedSelection.PROJECT ?? 0;
+ const currentSelection = choices[currentSelectionIdx];


Does it prompt you for which organization to create the token for?

I've been thinking about how we can generally make this experience better, so maybe the context would be a lot more obvious

this just takes the org that is selected - in the UI we moved the __ORG___ above this selector to accommodate this - it would take example-org in this case:

evanpurkhiser · 2023-07-10T20:03:25Z

src/components/codeContext.tsx

+function getCsrfToken(cookies = document.cookie): string | null {
+ // is sentry-sc in production, but may also be sc in other envs
+ // So we just try both variants
+ const cookieNames = ['sentry-sc', 'sc'];
+
+ return cookieNames
+ .map(cookieName => getCookie(cookies, cookieName))
+ .find(token => token !== null);
+}


Did this not already live somewhere else? Why does this have to be in here now?

AFAIK this only exists in sentry frontend (where I kind of stole this from), not in docs yet! We have not been doing any POST stuff yet, only GET which does not need this.

src/components/codeContext.tsx

src/components/orgAuthTokenNote.tsx

evanpurkhiser · 2023-07-10T20:36:13Z

Am I missing something, where does it actually show your tokens that you've already generated?

We should add them to this endpoint https://github.com/getsentry/getsentry/blob/933c060c7efe4b90ab12cca434322f2443a4eadc/getsentry/web/docsupport.py

mydea · 2023-07-11T09:12:10Z

src/components/signedInCheck.tsx

 export function SignedInCheck({
 children,
 isUserAuthenticated,
 }: {
 children: React.ReactNode;
 isUserAuthenticated: boolean;
 }) {
- const {codeKeywords, status} = useContext(CodeContext);
+ const {codeKeywords, isLoading} = useContext(CodeContext);


@evanpurkhiser refactored this based on your feedback from the other PR!

mydea · 2023-07-11T09:13:25Z

Am I missing something, where does it actually show your tokens that you've already generated?

We should add them to this endpoint https://github.com/getsentry/getsentry/blob/933c060c7efe4b90ab12cca434322f2443a4eadc/getsentry/web/docsupport.py

Tokens can only be viewed once after they are created, so we always have to create a new token (which is also why we have a button that has to be manually pressed in order to create/show the token). Every time you press the button it will generate a new token!

evanpurkhiser · 2023-07-11T20:29:58Z

Every time you press the button it will generate a new token!

Should we make this clear to the user? Seems a bit annoying that just clicking a button is going to pollute my token list. I'm not able to name it or give it a description here right?

src/components/codeBlock.tsx

priscilawebdev · 2023-07-12T07:06:38Z

src/components/codeContext.tsx

+ } catch {
+ return null;
+ }


will Sentry catch a bug here, in case it happens?

No, we just ignore it in this case - not sure if it is worth it to capture this? May lead to some noise, not sure.

priscilawebdev · 2023-07-12T07:07:49Z

src/components/orgAuthTokenNote.tsx

+ <ExternalLink href="https://sentry.io/settings/auth-tokens/" target="_blank">
+ manually create an Auth Token
+ </ExternalLink>{' '}


doesn't the ExternalLink component already open the link in a new tab? asking because I am not familiar with the docs UI/components

as far as I can tell, in docs it does not open in a new tab by default..?

priscilawebdev · 2023-07-12T07:09:02Z

Is this PR still a draft?

mydea · 2023-07-13T09:07:07Z

OK, so I added some tests for this for different scenarios! Thanks @priscilawebdev for helping me figure out the react test stuff 😅 But should be good now!

mydea · 2023-07-14T07:21:27Z

Should we make this clear to the user? Seems a bit annoying that just clicking a button is going to pollute my token list. I'm not able to name it or give it a description here right?

We generate a (hopefully explanatory) name for the generated token, so it shouldn't be too confusing, hopefully. Also, since we track which token has been used when & where, it should be easy to clean up unusued tokens from the sentry UI. We can always add a further explanation here later when needed, IMHO. We could also eventually solve this in-product (by providing some auto-cleanup functionality or whatnot).

mdtro · 2023-07-14T15:00:33Z

Should we make this clear to the user? Seems a bit annoying that just clicking a button is going to pollute my token list. I'm not able to name it or give it a description here right?

We generate a (hopefully explanatory) name for the generated token, so it shouldn't be too confusing, hopefully. Also, since we track which token has been used when & where, it should be easy to clean up unusued tokens from the sentry UI. We can always add a further explanation here later when needed, IMHO. We could also eventually solve this in-product (by providing some auto-cleanup functionality or whatnot).

+1 to making this clear in the doc here. The comment line above it now makes it sound like I can go retrieve the token later at the link provided.

mydea · 2023-07-18T08:25:08Z

OK, so I updated it to show this when signed in:

vs. this when not signed in:

mydea requested review from evanpurkhiser, stephanie-anderson, priscilawebdev and a team July 10, 2023 13:46

mydea self-assigned this Jul 10, 2023

evanpurkhiser reviewed Jul 10, 2023

View reviewed changes

src/components/orgAuthTokenNote.tsx Outdated Show resolved Hide resolved

evanpurkhiser reviewed Jul 10, 2023

View reviewed changes

src/components/codeContext.tsx Outdated Show resolved Hide resolved

evanpurkhiser reviewed Jul 10, 2023

View reviewed changes

src/components/orgAuthTokenNote.tsx Outdated Show resolved Hide resolved

mydea force-pushed the fn/org-tokens branch from 2206edd to 275dead Compare July 11, 2023 09:11

mydea commented Jul 11, 2023

View reviewed changes

vercel bot deployed to Preview July 11, 2023 09:25 View deployment

priscilawebdev reviewed Jul 12, 2023

View reviewed changes

mydea marked this pull request as ready for review July 12, 2023 09:04

vercel bot deployed to Preview July 12, 2023 09:13 View deployment

mydea force-pushed the fn/org-tokens branch from def89b4 to 930042f Compare July 13, 2023 07:56

vercel bot had a problem deploying to Preview July 13, 2023 07:59 Failure

vercel bot deployed to Preview July 13, 2023 08:49 View deployment

mydea force-pushed the fn/org-tokens branch from a3974e2 to 172ab44 Compare July 13, 2023 09:06

mydea requested review from evanpurkhiser and priscilawebdev July 13, 2023 09:10

vercel bot deployed to Preview July 13, 2023 09:20 View deployment

mydea added 2 commits July 18, 2023 10:17

feat: Show org token selector

b45768e

show note about token creation when signed in

8209a85

mydea force-pushed the fn/org-tokens branch from 172ab44 to 8209a85 Compare July 18, 2023 08:25

vercel bot deployed to Preview July 18, 2023 08:33 View deployment

mydea merged commit 59158be into master Jul 18, 2023
6 checks passed

mydea deleted the fn/org-tokens branch July 18, 2023 08:45

shanamatthews pushed a commit that referenced this pull request Jul 31, 2023

feat: Show org token selector (#7385)

73350f2

github-actions bot locked and limited conversation to collaborators Aug 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Show org token selector #7385

feat: Show org token selector #7385

mydea commented Jul 10, 2023 •

edited

Loading

vercel bot commented Jul 10, 2023 •

edited

Loading

evanpurkhiser Jul 10, 2023

mydea Jul 11, 2023

evanpurkhiser Jul 11, 2023

evanpurkhiser Jul 10, 2023

mydea Jul 11, 2023

evanpurkhiser Jul 11, 2023

evanpurkhiser Jul 10, 2023

mydea Jul 11, 2023

evanpurkhiser Jul 10, 2023

mydea Jul 11, 2023

evanpurkhiser commented Jul 10, 2023

mydea Jul 11, 2023

mydea commented Jul 11, 2023

evanpurkhiser commented Jul 11, 2023

priscilawebdev Jul 12, 2023

mydea Jul 13, 2023

priscilawebdev Jul 12, 2023

mydea Jul 13, 2023

priscilawebdev commented Jul 12, 2023

mydea commented Jul 13, 2023

mydea commented Jul 14, 2023

mdtro commented Jul 14, 2023

mydea commented Jul 18, 2023


		const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_])\.)?([A-Z_][A-Z0-9_])___\b/g;

		const ORG_AUTH_TOKEN_REGEX = /__ORG_AUTH_TOKEN__/g;

feat: Show org token selector #7385

feat: Show org token selector #7385

Conversation

mydea commented Jul 10, 2023 • edited Loading

vercel bot commented Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

evanpurkhiser commented Jul 10, 2023

Choose a reason for hiding this comment

mydea commented Jul 11, 2023

evanpurkhiser commented Jul 11, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

priscilawebdev commented Jul 12, 2023

mydea commented Jul 13, 2023

mydea commented Jul 14, 2023

mdtro commented Jul 14, 2023

mydea commented Jul 18, 2023

mydea commented Jul 10, 2023 •

edited

Loading

vercel bot commented Jul 10, 2023 •

edited

Loading