feat(flags): add python onboarding sidebar (#80871)

## 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

Author: michellewzhang

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

@@ -1,7 +1,6 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {openModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
@@ -11,10 +10,7 @@ import {
   FeatureFlagDrawer,
 } from 'sentry/components/events/featureFlags/featureFlagDrawer';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
-import {
-  modalCss,
-  SetupIntegrationModal,
-} from 'sentry/components/events/featureFlags/setupIntegrationModal';
+import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
 import {
   FlagControlOptions,
   OrderBy,
@@ -80,6 +76,7 @@ export function EventFeatureFlagList({
       statsPeriod: eventView.statsPeriod,
     },
   });
+  const {activateSidebar} = useFeatureFlagOnboarding();
 
   const {
     suspectFlags,
@@ -95,13 +92,6 @@ export function EventFeatureFlagList({
   const hasFlagContext = !!event.contexts.flags;
   const hasFlags = Boolean(hasFlagContext && event?.contexts?.flags?.values.length);
 
-  function handleSetupButtonClick() {
-    trackAnalytics('flags.setup_modal_opened', {organization});
-    openModal(modalProps => <SetupIntegrationModal {...modalProps} />, {
-      modalCss,
-    });
-  }
-
   const suspectFlagNames: Set<string> = useMemo(() => {
     return isSuspectError || isSuspectPending
       ? new Set()
@@ -195,7 +185,7 @@ export function EventFeatureFlagList({
           <Button
             aria-label={t('Set Up Integration')}
             size="xs"
-            onClick={handleSetupButtonClick}
+            onClick={activateSidebar}
           >
             {t('Set Up Integration')}
           </Button>

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

@@ -0,0 +1,119 @@
+import {useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import OnboardingIntegrationSection from 'sentry/components/events/featureFlags/onboardingIntegrationSection';
+import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator';
+import type {OnboardingLayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/onboardingLayout';
+import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
+import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+
+interface FeatureFlagOnboardingLayoutProps extends OnboardingLayoutProps {
+  integration?: string;
+  provider?: string;
+}
+
+export function FeatureFlagOnboardingLayout({
+  docsConfig,
+  dsn,
+  platformKey,
+  projectId,
+  projectSlug,
+  projectKeyId,
+  configType = 'onboarding',
+  integration = '',
+  provider = '',
+}: FeatureFlagOnboardingLayoutProps) {
+  const api = useApi();
+  const organization = useOrganization();
+  const {isPending: isLoadingRegistry, data: registryData} =
+    useSourcePackageRegistries(organization);
+  const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions);
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
+
+  const {steps} = useMemo(() => {
+    const doc = docsConfig[configType] ?? docsConfig.onboarding;
+
+    const docParams: DocsParams<any> = {
+      api,
+      projectKeyId,
+      dsn,
+      organization,
+      platformKey,
+      projectId,
+      projectSlug,
+      isFeedbackSelected: false,
+      isPerformanceSelected: false,
+      isProfilingSelected: false,
+      isReplaySelected: false,
+      sourcePackageRegistries: {
+        isLoading: isLoadingRegistry,
+        data: registryData,
+      },
+      platformOptions: selectedOptions,
+      isSelfHosted,
+      urlPrefix,
+      featureFlagOptions: {
+        integration,
+      },
+    };
+
+    return {
+      steps: [...doc.install(docParams), ...doc.configure(docParams)],
+    };
+  }, [
+    docsConfig,
+    dsn,
+    isLoadingRegistry,
+    organization,
+    platformKey,
+    projectId,
+    projectSlug,
+    registryData,
+    selectedOptions,
+    configType,
+    urlPrefix,
+    isSelfHosted,
+    api,
+    projectKeyId,
+    integration,
+  ]);
+
+  return (
+    <AuthTokenGeneratorProvider projectSlug={projectSlug}>
+      <Wrapper>
+        <Steps>
+          {steps.map(step => (
+            <Step key={step.title ?? step.type} {...step} />
+          ))}
+        </Steps>
+        <OnboardingIntegrationSection provider={provider} integration={integration} />
+      </Wrapper>
+    </AuthTokenGeneratorProvider>
+  );
+}
+
+const Steps = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+const Wrapper = styled('div')`
+  h4 {
+    margin-bottom: 0.5em;
+  }
+  && {
+    p {
+      margin-bottom: 0;
+    }
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+`;