|
| 1 | +import {useMemo} from 'react'; |
| 2 | +import styled from '@emotion/styled'; |
| 3 | + |
| 4 | +import OnboardingIntegrationSection from 'sentry/components/events/featureFlags/onboardingIntegrationSection'; |
| 5 | +import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator'; |
| 6 | +import type {OnboardingLayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/onboardingLayout'; |
| 7 | +import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step'; |
| 8 | +import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types'; |
| 9 | +import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries'; |
| 10 | +import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl'; |
| 11 | +import ConfigStore from 'sentry/stores/configStore'; |
| 12 | +import {useLegacyStore} from 'sentry/stores/useLegacyStore'; |
| 13 | +import useApi from 'sentry/utils/useApi'; |
| 14 | +import useOrganization from 'sentry/utils/useOrganization'; |
| 15 | + |
| 16 | +interface FeatureFlagOnboardingLayoutProps extends OnboardingLayoutProps { |
| 17 | + integration?: string; |
| 18 | + provider?: string; |
| 19 | +} |
| 20 | + |
| 21 | +export function FeatureFlagOnboardingLayout({ |
| 22 | + docsConfig, |
| 23 | + dsn, |
| 24 | + platformKey, |
| 25 | + projectId, |
| 26 | + projectSlug, |
| 27 | + projectKeyId, |
| 28 | + configType = 'onboarding', |
| 29 | + integration = '', |
| 30 | + provider = '', |
| 31 | +}: FeatureFlagOnboardingLayoutProps) { |
| 32 | + const api = useApi(); |
| 33 | + const organization = useOrganization(); |
| 34 | + const {isPending: isLoadingRegistry, data: registryData} = |
| 35 | + useSourcePackageRegistries(organization); |
| 36 | + const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions); |
| 37 | + const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore); |
| 38 | + |
| 39 | + const {steps} = useMemo(() => { |
| 40 | + const doc = docsConfig[configType] ?? docsConfig.onboarding; |
| 41 | + |
| 42 | + const docParams: DocsParams<any> = { |
| 43 | + api, |
| 44 | + projectKeyId, |
| 45 | + dsn, |
| 46 | + organization, |
| 47 | + platformKey, |
| 48 | + projectId, |
| 49 | + projectSlug, |
| 50 | + isFeedbackSelected: false, |
| 51 | + isPerformanceSelected: false, |
| 52 | + isProfilingSelected: false, |
| 53 | + isReplaySelected: false, |
| 54 | + sourcePackageRegistries: { |
| 55 | + isLoading: isLoadingRegistry, |
| 56 | + data: registryData, |
| 57 | + }, |
| 58 | + platformOptions: selectedOptions, |
| 59 | + isSelfHosted, |
| 60 | + urlPrefix, |
| 61 | + featureFlagOptions: { |
| 62 | + integration, |
| 63 | + }, |
| 64 | + }; |
| 65 | + |
| 66 | + return { |
| 67 | + steps: [...doc.install(docParams), ...doc.configure(docParams)], |
| 68 | + }; |
| 69 | + }, [ |
| 70 | + docsConfig, |
| 71 | + dsn, |
| 72 | + isLoadingRegistry, |
| 73 | + organization, |
| 74 | + platformKey, |
| 75 | + projectId, |
| 76 | + projectSlug, |
| 77 | + registryData, |
| 78 | + selectedOptions, |
| 79 | + configType, |
| 80 | + urlPrefix, |
| 81 | + isSelfHosted, |
| 82 | + api, |
| 83 | + projectKeyId, |
| 84 | + integration, |
| 85 | + ]); |
| 86 | + |
| 87 | + return ( |
| 88 | + <AuthTokenGeneratorProvider projectSlug={projectSlug}> |
| 89 | + <Wrapper> |
| 90 | + <Steps> |
| 91 | + {steps.map(step => ( |
| 92 | + <Step key={step.title ?? step.type} {...step} /> |
| 93 | + ))} |
| 94 | + </Steps> |
| 95 | + <OnboardingIntegrationSection provider={provider} integration={integration} /> |
| 96 | + </Wrapper> |
| 97 | + </AuthTokenGeneratorProvider> |
| 98 | + ); |
| 99 | +} |
| 100 | + |
| 101 | +const Steps = styled('div')` |
| 102 | + display: flex; |
| 103 | + flex-direction: column; |
| 104 | + gap: 1.5rem; |
| 105 | +`; |
| 106 | + |
| 107 | +const Wrapper = styled('div')` |
| 108 | + h4 { |
| 109 | + margin-bottom: 0.5em; |
| 110 | + } |
| 111 | + && { |
| 112 | + p { |
| 113 | + margin-bottom: 0; |
| 114 | + } |
| 115 | + h5 { |
| 116 | + margin-bottom: 0; |
| 117 | + } |
| 118 | + } |
| 119 | +`; |
0 commit comments