feat(flags): add setup integration modal #80437

michellewzhang · 2024-11-08T06:35:56Z

this PR adds a "set up integration" button on the feature flag table header actions. this button is visible only if we detect that event.contexts.flags is not undefined -- i.e. when an feature flag integration has already been set up.

scenario A: `event.contexts.flags` exists and is populated => we show "set up integration" button

view all, search, sort, setup, & feedback buttons visible. (feedback button not visible in the screenshot because i was on sentry dev but it'll be visible in prod.)

scenario B: `event.contexts.flags` exists but is empty => we show empty state & "set up integration" button

setup & give feedback buttons visible. (feedback button not visible in the screenshot because i was on sentry dev but it'll be visible in prod.)

scenario C: LD user has not set up integration yet

TODO in the future: add CTA.
right now: we hide the FF section.

scenario D: non LD-user has not set up integration yet

we hide the FF section.

modal

when the "set up integration" button is clicked, we show a modal allowing the user to generate a webhook URL, which they can then paste into their provider website.

the copy field is disabled until the user creates the URL.

when the URL is generated, the "create webhook URL" button is disabled.

notes:

we default to LaunchDarkly since they're our only provider right now.
when the modal is closed, old URLs still work, but they’re hidden and not shown again. (they can still be referenced in the org auth token page in org settings -- maybe we should make a note about this somewhere in the modal?)
the token is named "{provider_name} Token {timestamp}" to keep them unique and user readable

demo flow

Screen.Recording.2024-11-08.at.10.11.31.AM.mov

TODO

add CTA & feature flag for LD users

resources

relates to https://github.com/getsentry/team-replay/issues/500
figma design

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

michellewzhang · 2024-11-08T16:56:56Z

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

+              setState(prevState => {
+                return {
+                  ...prevState,
+                  url: `https://sentry.io/api/0/organizations/${organization?.slug}/flags/hooks/provider/${provider}/token/${encodedToken}/`,


need to verify that this link is correct/works cc @cmanallen @aliu39

The URL looks correct to me 👍

cmanallen

Let's add a metric tracking the modal opening. Optionally, it would be nice to have metrics for when the FF table renders or when the (to be created) CTA displays or is closed.

cmanallen · 2024-11-08T17:50:34Z

@michellewzhang Re: metrics. Anywhere you think it would be useful to know if someone is using feature flags let's add a metric.

michellewzhang · 2024-11-08T17:54:27Z

Optionally, it would be nice to have metrics for when the FF table renders or when the (to be created) CTA displays or is closed.

can definitely add analytics for the modal & table rendering now, but will do the CTA-related analytics when that gets created!

Jesse-Box · 2024-11-08T17:59:25Z

@michellewzhang can you add a border to the empty state container?

Figma for reference

Other than that, it looks good to me! Great work!

michellewzhang · 2024-11-08T18:08:10Z

@michellewzhang can you add a border to the empty state container?

Figma for reference

Other than that, it looks good to me! Great work!

updated!

cmanallen · 2024-11-08T20:37:37Z

@michellewzhang Can the "Read Docs" button be set up to open a new tab when clicked? I'm thinking people will accidentally lose their generated URL when they realize they don't know what to do with it.

michellewzhang · 2024-11-08T20:42:24Z

@michellewzhang Can the "Read Docs" button be set up to open a new tab when clicked? I'm thinking people will accidentally lose their generated URL when they realize they don't know what to do with it.

yep it already opens in a new tab!

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

aliu39 · 2024-11-09T00:04:40Z

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

-        setSortBy={setSortBy}
-        setOrderBy={setOrderBy}
-      />
+      {hasFlagContext && (


Do we still need this after the early return check above?

Suggested change

{hasFlagContext && (

{(

keeping this for now since it'll be useful when we add in the LD feature flag

aliu39 · 2024-11-09T00:09:17Z

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

+  const ModalHeader = useCallback(
+    ({children: headerChildren}: {children: React.ReactNode}) => {
+      return (
+        <Header closeButton>


what is closeButton here?

It closes the modal right, where is it coming from in code though

it's a prop that's passed into the Header component

sentry/static/app/components/globalModal/components.tsx

Line 84 in b73a353

const makeClosableHeader = (closeModal: () => void) => {

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

static/app/utils/analytics/featureFlagAnalyticsEvents.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

✨ add modal

d2ff0fa

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

vercel bot deployed to Preview November 8, 2024 06:39 View deployment

♻️ tweaks

3ef2ca2

vercel bot deployed to Preview November 8, 2024 06:46 View deployment

🐛 only call endpoint once

4cba2e6

vercel bot deployed to Preview November 8, 2024 07:04 View deployment

✅ tests

fd1edb3

vercel bot deployed to Preview November 8, 2024 07:42 View deployment

michellewzhang marked this pull request as ready for review November 8, 2024 16:52

michellewzhang commented Nov 8, 2024

View reviewed changes

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

michellewzhang commented Nov 8, 2024

View reviewed changes

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

michellewzhang commented Nov 8, 2024

View reviewed changes

michellewzhang requested review from a team, cmanallen, Jesse-Box and aliu39 November 8, 2024 16:57

getsentry deleted a comment from codecov bot Nov 8, 2024

♻️ add docs link

60e0c97

vercel bot deployed to Preview November 8, 2024 17:40 View deployment

♻️ use diff token endpoint

83e0603

cmanallen requested changes Nov 8, 2024

View reviewed changes

vercel bot deployed to Preview November 8, 2024 17:52 View deployment

📈 analytics

5a56503

michellewzhang requested a review from cmanallen November 8, 2024 18:04

vercel bot deployed to Preview November 8, 2024 18:05 View deployment

cmanallen approved these changes Nov 8, 2024

View reviewed changes

💄 border for empty state:

b73a353

getsentry deleted a comment from codecov bot Nov 8, 2024

vercel bot deployed to Preview November 8, 2024 18:12 View deployment

aliu39 approved these changes Nov 9, 2024

View reviewed changes

🎨 pr comments

8e95dfd

vercel bot deployed to Preview November 12, 2024 21:25 View deployment

michellewzhang merged commit 973b354 into master Nov 12, 2024
43 of 44 checks passed

michellewzhang deleted the mz/ff-modal branch November 12, 2024 23:19

michellewzhang mentioned this pull request Nov 15, 2024

feat(flags): add python onboarding sidebar #80871

Merged

2 tasks

github-actions bot locked and limited conversation to collaborators Nov 28, 2024

Uh oh!

feat(flags): add setup integration modal #80437

feat(flags): add setup integration modal #80437

Uh oh!

Conversation

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

Uh oh!

scenario A: event.contexts.flags exists and is populated => we show "set up integration" button

scenario B: event.contexts.flags exists but is empty => we show empty state & "set up integration" button

scenario C: LD user has not set up integration yet

scenario D: non LD-user has not set up integration yet

modal

demo flow

TODO

resources

Uh oh!

Uh oh!

Uh oh!

michellewzhang Nov 8, 2024

Choose a reason for hiding this comment

Uh oh!

cmanallen Nov 8, 2024

Choose a reason for hiding this comment

Uh oh!

cmanallen left a comment

Choose a reason for hiding this comment

Uh oh!

cmanallen commented Nov 8, 2024

Uh oh!

michellewzhang commented Nov 8, 2024

Uh oh!

Jesse-Box commented Nov 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

michellewzhang commented Nov 8, 2024

Uh oh!

cmanallen commented Nov 8, 2024

Uh oh!

michellewzhang commented Nov 8, 2024

Uh oh!

Uh oh!

aliu39 Nov 9, 2024

Choose a reason for hiding this comment

Uh oh!

michellewzhang Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

aliu39 Nov 9, 2024

Choose a reason for hiding this comment

Uh oh!

aliu39 Nov 9, 2024

Choose a reason for hiding this comment

Uh oh!

michellewzhang Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michellewzhang commented Nov 8, 2024 •

edited

Loading

scenario A: `event.contexts.flags` exists and is populated => we show "set up integration" button

scenario B: `event.contexts.flags` exists but is empty => we show empty state & "set up integration" button

Jesse-Box commented Nov 8, 2024 •

edited

Loading