feat(flags): add unleash to provider dropdowns and onboarding (#82836)

branched off of #82387 closes getsentry/team-replay#515 closes getsentry/team-replay#530 ### settings page <img width="995" alt="SCR-20250102-mncr" src="https://github.com/user-attachments/assets/6404d15c-94da-41e1-8c13-5215bf2c5b66" /> <img width="997" alt="SCR-20250102-mnew" src="https://github.com/user-attachments/assets/e15f10df-ba01-48ed-9f29-75db4fc745ef" /> ### onboarding dropdowns <img width="450" alt="SCR-20250102-mnbf" src="https://github.com/user-attachments/assets/b9a733e4-dc98-4217-baca-9d1ed95d8980" /> <img width="435" alt="SCR-20250102-mnag" src="https://github.com/user-attachments/assets/f05a781f-752a-4f4c-a4d3-af217773c6a3" /> ### python onboarding <img width="467" alt="SCR-20250107-jlgk" src="https://github.com/user-attachments/assets/978a31ff-3929-480f-ae24-2d2cc48c17f8" /> ### js onboarding <img width="472" alt="SCR-20250114-jlyw" src="https://github.com/user-attachments/assets/0c43d47d-15fe-4d3e-ae8d-85cf8afe3f12" /> ### also updated generic python onboarding: <img width="477" alt="SCR-20250114-kyvf" src="https://github.com/user-attachments/assets/99aa6824-9e27-4b9f-96cc-3e548c5c8852" /> --------- Co-authored-by: Andrew Liu <[email protected]>
getsentry · Jan 15, 2025 · 383c5d7 · 383c5d7
1 parent 63f275e
commit 383c5d7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 16 deletions.
diff --git a/static/app/components/events/featureFlags/onboardingIntegrationSection.tsx b/static/app/components/events/featureFlags/onboardingIntegrationSection.tsx
@@ -9,7 +9,10 @@ import {
 import {hasEveryAccess} from 'sentry/components/acl/access';
 import Alert from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
-import {PROVIDER_OPTION_TO_URLS} from 'sentry/components/events/featureFlags/utils';
+import {
+  PROVIDER_OPTION_TO_URLS,
+  ProviderOptions,
+} from 'sentry/components/events/featureFlags/utils';
 import Input from 'sentry/components/input';
 import ExternalLink from 'sentry/components/links/externalLink';
 import TextCopyInput from 'sentry/components/textCopyInput';
@@ -114,9 +117,13 @@ export default function OnboardingIntegrationSection({
         </SubSection>
         <SubSection>
           <div>
-            {t(
-              "During the process of creating a webhook integration, you'll be given the option to sign the webhook. This is an auto-generated secret code that Sentry requires to verify requests from your feature flag service. Paste the secret below."
-            )}
+            {provider === ProviderOptions.UNLEASH
+              ? t(
+                  `During the process of creating a webhook integration, you'll be given the option to add an authorization header. This is a string (or "secret") that you choose so that Sentry can verify requests from your feature flag service. Paste your authorization string below.`
+                )
+              : t(
+                  "During the process of creating a webhook integration, you'll be given the option to sign the webhook. This is an auto-generated secret code that Sentry requires to verify requests from your feature flag service. Paste the secret below."
+                )}
           </div>
           <InputTitle>{t('Secret')}</InputTitle>
           <InputArea>

diff --git a/static/app/components/events/featureFlags/utils.tsx b/static/app/components/events/featureFlags/utils.tsx
@@ -116,17 +116,21 @@ export const sortedFlags = ({
 export enum ProviderOptions {
   LAUNCHDARKLY = 'LaunchDarkly',
   GENERIC = 'Generic',
+  UNLEASH = 'Unleash',
 }
 
 export enum IntegrationOptions {
   LAUNCHDARKLY = 'LaunchDarkly',
   OPENFEATURE = 'OpenFeature',
   GENERIC = 'Generic',
+  UNLEASH = 'Unleash',
 }
 
 export const PROVIDER_OPTION_TO_URLS: Record<ProviderOptions, string | undefined> = {
   [ProviderOptions.LAUNCHDARKLY]:
     'https://app.launchdarkly.com/settings/integrations/webhooks/new?q=Webhooks',
+  [ProviderOptions.UNLEASH]:
+    'https://docs.sentry.io/organization/integrations/feature-flag/unleash/#set-up-change-tracking',
   [ProviderOptions.GENERIC]:
     'https://docs.sentry.io/organization/integrations/feature-flag/generic/#set-up-change-tracking',
 };
diff --git a/static/app/gettingStartedDocs/javascript/javascript.tsx b/static/app/gettingStartedDocs/javascript/javascript.tsx
@@ -92,6 +92,22 @@ client.addHooks(new Sentry.OpenFeatureIntegrationHook());
 
 // Evaluating flags will record the result on the Sentry client.
 const result = client.getBooleanValue('my-flag', false);`,
+  },
+  [IntegrationOptions.UNLEASH]: {
+    importStatement: `import { UnleashClient } from 'unleash-proxy-client';`,
+    integration: 'unleashIntegration(UnleashClient)',
+    sdkInit: `const unleash = new UnleashClient({
+  url: "https://<your-unleash-instance>/api/frontend",
+  clientKey: "<your-client-side-token>",
+  appName: "my-webapp",
+});
+
+unleash.start();
+
+// Evaluate a flag with a default value. You may have to wait for your client to synchronize first.
+unleash.isEnabled("test-flag");
+
+Sentry.captureException(new Error("Something went wrong!"));`,
   },
   [IntegrationOptions.GENERIC]: {
     importStatement: ``,

diff --git a/static/app/gettingStartedDocs/python/python.tsx b/static/app/gettingStartedDocs/python/python.tsx
@@ -24,16 +24,20 @@ type FlagImports = {
 
 const FLAG_OPTION_TO_IMPORT: Record<IntegrationOptions, FlagImports> = {
   [IntegrationOptions.LAUNCHDARKLY]: {
-    module: 'launchdarkly',
+    module: 'integrations.launchdarkly',
     integration: 'LaunchDarklyIntegration',
   },
   [IntegrationOptions.OPENFEATURE]: {
-    module: 'openfeature',
+    module: 'integrations.openfeature',
     integration: 'OpenFeatureIntegration',
   },
+  [IntegrationOptions.UNLEASH]: {
+    module: 'integrations.unleash',
+    integration: 'UnleashIntegration',
+  },
   [IntegrationOptions.GENERIC]: {
     module: 'feature_flags',
-    integration: 'FeatureFlagsIntegration',
+    integration: '',
   },
 };
 
@@ -184,7 +188,7 @@ export const performanceOnboarding: OnboardingConfig = {
           ),
           language: 'python',
           code: `
-import sentry-sdk
+import sentry_sdk
 
 sentry_sdk.init(
   dsn="${params.dsn.public}",
@@ -252,17 +256,30 @@ export const featureFlagOnboarding: OnboardingConfig = {
   configure: ({featureFlagOptions = {integration: ''}, dsn}) => [
     {
       type: StepType.CONFIGURE,
-      description: tct('Add [name] to your integrations list.', {
-        name: (
-          <code>{`${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].integration}()`}</code>
-        ),
-      }),
+      description:
+        featureFlagOptions.integration === IntegrationOptions.GENERIC
+          ? `This provider doesn't use an integration. Simply initialize Sentry and import the API.`
+          : tct('Add [name] to your integrations list.', {
+              name: (
+                <code>{`${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].integration}()`}</code>
+              ),
+            }),
       configurations: [
         {
           language: 'python',
-          code: `
-import sentry-sdk
-from sentry_sdk.integrations.${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].module} import ${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].integration}
+          code:
+            featureFlagOptions.integration === IntegrationOptions.GENERIC
+              ? `import sentry_sdk
+from sentry_sdk.${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].module} import add_feature_flag
+
+sentry_sdk.init(
+  dsn="${dsn.public}",
+  integrations=[
+    # your other integrations here
+  ]
+)`
+              : `import sentry_sdk
+from sentry_sdk.${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].module} import ${FLAG_OPTION_TO_IMPORT[featureFlagOptions.integration].integration}
 
 sentry_sdk.init(
   dsn="${dsn.public}",

diff --git a/static/app/views/settings/featureFlags/newProviderForm.tsx b/static/app/views/settings/featureFlags/newProviderForm.tsx
@@ -119,6 +119,7 @@ export default function NewProviderForm({
         options={[
           {value: 'LaunchDarkly', label: 'LaunchDarkly'},
           {value: 'Generic', label: 'Generic'},
+          {value: 'Unleash', label: 'Unleash'},
         ]}
         help={t(
           'If you have already linked this provider, pasting a new secret will override the existing secret.'