feat(flags): add python onboarding sidebar #80871

michellewzhang · 2024-11-15T23:09:39Z

what does this pr do?

this pr implements part of the feature flag onboarding sidebar specified in these designs.
relates to https://github.com/getsentry/team-replay/issues/502.
currently, only the python onboarding is done, as i want to get feedback on how i've structured it before doing javascript. (javascript & python are the only two SDKs we'll do for now.)
deletes the setup integration modal introduced in feat(flags): add setup integration modal #80437, which is no longer needed.

flow walkthrough

The sidebar is triggered by the "set up integration" button on the feature flags table on issue details.

It opens a flyout sidebar, which explains onboarding instructions for how to set up feature flag integrations. Depending on whether OpenFeature is selected (which allows for an additional dropdown to pick another provider) or another SDK, the instructions will vary.

LD:

OpenFeature with LD:

signing secret

At the bottom of the sidebar is a spot to post a signing secret, which is what we use to verify the integration. This posts to the /signing-secret/ endpoint:

sentry/src/sentry/api/urls.py

Lines 2072 to 2076 in 9dfbc5a

    
           re_path( 
        
               r"^(?P<organization_id_or_slug>[^\/]+)/flags/hooks/provider/(?P<provider>[\w-]+)/signing-secret/$", 
        
               OrganizationFlagsWebHookSigningSecretEndpoint.as_view(), 
        
               name="sentry-api-0-organization-flag-hooks-signing-secret", 
        
           ),

Screen.Recording.2024-11-15.at.3.10.45.PM.mov

when the token is saved, a success banner appears:

video demos

triggering from issue details:

of.mov

example of what it would look like if OpenFeature had multiple options:

Screen.Recording.2024-11-15.at.2.47.54.PM.mov

todo (this PR):

fix/test the secret endpoint
fill in links for docs

todo (followups)

javascript onboarding
figure out CTA details (another way the sidebar can be triggered)
if we detect that event.contexts.flags is not undefined, we should hide the first half of the onboarding as specified in the designs
analytics charts

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx

static/app/components/events/featureFlags/featureFlagOnboardingLayout.tsx

ryan953 · 2024-11-19T16:33:25Z

static/app/components/events/featureFlags/utils.tsx

+type Labels = {
+  pythonIntegration: string; // what's in the integrations array
+  pythonModule: string; // what's imported from sentry_sdk.integrations
+};


is this too specific to python? what will things look like when we have the JS sdk included?

oh, we might have javascriptIntegration et al when different langs come online? hrm

yeah, this is the best way i could think of doing it. the python onboarding for every integration is essentially the same so far, barring these two properties, so i thought of just putting in variables for the things that change, rather than making an onboarding for every single integration for every platform (like a python LD onboarding, and a python OF onboarding, then python statsig.... etc. etc and JS version for each of those too. that would be awful to manage). adding javascript to the platforms will add more properties to this type if the JS onboarding works the same, where every integration has basically the same steps except for a few variables that change. when we add more platforms/languages, this type will probably get larger and we'll probably want to refactor this to be more manageable, but i think it's ok for now?

sounds good. start with something simple and before it grows gnarly we can change it up.

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx

static/app/components/events/featureFlags/onboardingIntegrationSection.tsx

ArthurKnaus

Focused mostly on the generic onboarding code part 🙂

static/app/components/onboarding/gettingStartedDoc/types.ts

static/app/components/events/featureFlags/featureFlagOnboardingLayout.tsx

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx

static/app/components/events/featureFlags/utils.tsx

ryan953

overall looking good to me. happy to see it merged when others tagged are happy too.

ArthurKnaus

great work!

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx

## what does this pr do? - this pr implements part of the feature flag onboarding sidebar specified in these [designs](https://www.figma.com/design/6w2ju2MlyuGRLKm2PKpotD/Specs%3A-Feature-Flag-Onboarding?node-id=0-1&node-type=canvas&t=UPuG14gRVUNLLQvo-0). - relates to getsentry/team-replay#502. - currently, only the python onboarding is done, as i want to get feedback on how i've structured it before doing javascript. (javascript & python are the only two SDKs we'll do for now.) - deletes the setup integration modal introduced in #80437, which is no longer needed. ## flow walkthrough The sidebar is triggered by the "set up integration" button on the feature flags table on issue details. <img width="686" alt="SCR-20241115-nhtq" src="https://github.com/user-attachments/assets/a4fecf37-a2b1-4795-aa11-f612035792c3"> It opens a flyout sidebar, which explains onboarding instructions for how to set up feature flag integrations. Depending on whether OpenFeature is selected (which allows for an additional dropdown to pick another provider) or another SDK, the instructions will vary. ### LD: <img width="474" alt="SCR-20241115-njpv" src="https://github.com/user-attachments/assets/6a638bd4-a9ac-4fb1-8646-3a55362fb6b3"> ### OpenFeature with LD: <img width="464" alt="SCR-20241115-nkwd" src="https://github.com/user-attachments/assets/622fe30d-5a66-4638-9314-de621c9f1578"> ### signing secret At the bottom of the sidebar is a spot to post a signing secret, which is what we use to verify the integration. This posts to the `/signing-secret/` endpoint: https://github.com/getsentry/sentry/blob/9dfbc5a6629127614e04b8e95b9b280ccd8e1ea1/src/sentry/api/urls.py#L2072-L2076 https://github.com/user-attachments/assets/a94c92a6-0b46-465e-b805-b1bef2f43460 when the token is saved, a success banner appears: <img width="459" alt="SCR-20241115-nmxv" src="https://github.com/user-attachments/assets/73c5841f-52d8-494d-a905-81dfe1b8cbec"> ## video demos triggering from issue details: https://github.com/user-attachments/assets/06505803-ab2f-477d-a053-2269b9af1be7 example of what it would look like if OpenFeature had multiple options: https://github.com/user-attachments/assets/5893ac06-b1f3-4925-b124-b609440c6e33 ## todo (this PR): - [x] fix/test the secret endpoint - [x] fill in links for docs ## todo (followups) - javascript onboarding - figure out CTA details (another way the sidebar can be triggered) - if we detect that `event.contexts.flags` is not undefined, we should hide the first half of the onboarding as specified in the designs - analytics charts

feat(flags): add python onboarding sidebar

dcfd3ab

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

♻️ disable button if no secret

9dfbc5a

vercel bot deployed to Preview November 15, 2024 23:14 View deployment

This comment was marked as off-topic.

Sign in to view

michellewzhang commented Nov 15, 2024

View reviewed changes

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx Outdated Show resolved Hide resolved

michellewzhang commented Nov 15, 2024

View reviewed changes

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx Outdated Show resolved Hide resolved

michellewzhang commented Nov 15, 2024

View reviewed changes

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx Outdated Show resolved Hide resolved

michellewzhang marked this pull request as ready for review November 15, 2024 23:25

michellewzhang requested review from a team as code owners November 15, 2024 23:25

michellewzhang requested review from a team, Jesse-Box and ArthurKnaus November 15, 2024 23:25

This comment was marked as off-topic.

Sign in to view

ryan953 reviewed Nov 19, 2024

View reviewed changes

static/app/components/events/featureFlags/featureFlagOnboardingLayout.tsx Outdated Show resolved Hide resolved

ryan953 reviewed Nov 19, 2024

View reviewed changes

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx Outdated Show resolved Hide resolved

ryan953 reviewed Nov 19, 2024

View reviewed changes

static/app/components/events/featureFlags/onboardingIntegrationSection.tsx Show resolved Hide resolved

ryan953 reviewed Nov 19, 2024

View reviewed changes

static/app/components/events/featureFlags/onboardingIntegrationSection.tsx Outdated Show resolved Hide resolved

ArthurKnaus reviewed Nov 19, 2024

View reviewed changes

♻️ rm of link

d8b3df0

vercel bot deployed to Preview November 19, 2024 17:46 View deployment

🎨 some pr comments

6b02c18

vercel bot deployed to Preview November 19, 2024 22:51 View deployment

🎨 rm extra {}

d10811e

michellewzhang requested review from ArthurKnaus and ryan953 November 19, 2024 22:59

vercel bot deployed to Preview November 19, 2024 23:02 View deployment

ryan953 approved these changes Nov 20, 2024

View reviewed changes

ArthurKnaus approved these changes Nov 20, 2024

View reviewed changes

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx Outdated Show resolved Hide resolved

michellewzhang added 2 commits November 20, 2024 12:05

Merge remote-tracking branch 'origin/master' into mz/flag-sidebar

8f06bcc

♻️ last comments

71b70f3

vercel bot deployed to Preview November 20, 2024 20:14 View deployment

michellewzhang merged commit 97b027f into master Nov 20, 2024
45 of 46 checks passed

michellewzhang deleted the mz/flag-sidebar branch November 20, 2024 20:24

github-actions bot locked and limited conversation to collaborators Dec 6, 2024

	re_path(
	r"^(?P<organization_id_or_slug>[^\/]+)/flags/hooks/provider/(?P<provider>[\w-]+)/signing-secret/$",
	OrganizationFlagsWebHookSigningSecretEndpoint.as_view(),
	name="sentry-api-0-organization-flag-hooks-signing-secret",
	),

Uh oh!

feat(flags): add python onboarding sidebar #80871

feat(flags): add python onboarding sidebar #80871

Uh oh!

Conversation

michellewzhang commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

what does this pr do?

flow walkthrough

LD:

OpenFeature with LD:

signing secret

video demos

todo (this PR):

todo (followups)

Uh oh!

This comment was marked as off-topic.

This comment was marked as off-topic.

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

ryan953 Nov 19, 2024

Choose a reason for hiding this comment

Uh oh!

ryan953 Nov 19, 2024

Choose a reason for hiding this comment

Uh oh!

michellewzhang Nov 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryan953 Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ArthurKnaus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryan953 left a comment

Choose a reason for hiding this comment

Uh oh!

ArthurKnaus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michellewzhang commented Nov 15, 2024 •

edited

Loading

michellewzhang Nov 19, 2024 •

edited

Loading