feat(onboarding): sentry wizard url param (#76918)

static/app/components/feedback/feedbackOnboarding/feedbackOnboardingLayout.tsx

@@ -8,6 +8,8 @@ import {Step, StepType} from 'sentry/components/onboarding/gettingStartedDoc/ste
 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 {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -29,6 +31,7 @@ export function FeedbackOnboardingLayout({
   const {isPending: isLoadingRegistry, data: registryData} =
     useSourcePackageRegistries(organization);
   const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions);
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
   const {introduction, steps} = useMemo(() => {
     const doc = docsConfig[configType] ?? docsConfig.onboarding;
 
@@ -53,6 +56,8 @@ export function FeedbackOnboardingLayout({
         name,
         screenshot,
       },
+      isSelfHosted,
+      urlPrefix,
     };
 
     return {
@@ -74,6 +79,8 @@ export function FeedbackOnboardingLayout({
     email,
     name,
     screenshot,
+    isSelfHosted,
+    urlPrefix,
   ]);
 
   return (

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

@@ -22,6 +22,8 @@ import {
   ProductSolution,
 } from 'sentry/components/onboarding/productSelection';
 import {t} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import type {PlatformKey, Project, ProjectKey} from 'sentry/types/project';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -59,6 +61,7 @@ export function OnboardingLayout({
     useSourcePackageRegistries(organization);
   const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions);
   const {platformOptions} = docsConfig;
+  const {urlPrefix, isSelfHosted} = useLegacyStore(ConfigStore);
 
   const {introduction, steps, nextSteps} = useMemo(() => {
     const doc = docsConfig[configType] ?? docsConfig.onboarding;
@@ -79,6 +82,8 @@ export function OnboardingLayout({
         isLoading: isLoadingRegistry,
         data: registryData,
       },
+      urlPrefix,
+      isSelfHosted,
       platformOptions: selectedOptions,
       newOrg,
       replayOptions: {block: true, mask: true},
@@ -106,6 +111,8 @@ export function OnboardingLayout({
     registryData,
     selectedOptions,
     configType,
+    urlPrefix,
+    isSelfHosted,
   ]);
 
   return (

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

@@ -46,12 +46,14 @@ export interface DocsParams<
   isPerformanceSelected: boolean;
   isProfilingSelected: boolean;
   isReplaySelected: boolean;
+  isSelfHosted: boolean;
   organization: Organization;
   platformKey: PlatformKey;
   platformOptions: SelectedPlatformOptions<PlatformOptions>;
   projectId: Project['id'];
   projectSlug: Project['slug'];
   sourcePackageRegistries: {isLoading: boolean; data?: ReleaseRegistrySdk};
+  urlPrefix: string;
   /**
    * The page where the docs are being displayed
    */

static/app/components/profiling/profilingOnboardingSidebar.tsx

@@ -19,6 +19,8 @@ import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import platforms from 'sentry/data/platforms';
 import {t} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import type {SelectValue} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
@@ -225,6 +227,7 @@ function ProfilingOnboardingContent(props: ProfilingOnboardingContentProps) {
     projSlug: props.projectSlug,
     platform: props.platform,
   });
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
 
   if (isLoading) {
     return <LoadingIndicator />;
@@ -282,6 +285,8 @@ function ProfilingOnboardingContent(props: ProfilingOnboardingContentProps) {
      * Page where the docs will be rendered
      */
     docsLocation: DocsPageLocation.PROFILING_PAGE,
+    urlPrefix,
+    isSelfHosted,
   };
 
   const steps = [

static/app/components/replaysOnboarding/replayOnboardingLayout.tsx

@@ -8,6 +8,8 @@ import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/ty
 import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
 import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl';
 import ReplayConfigToggle from 'sentry/components/replaysOnboarding/replayConfigToggle';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -27,6 +29,8 @@ export function ReplayOnboardingLayout({
   const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions);
   const [mask, setMask] = useState(true);
   const [block, setBlock] = useState(true);
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
+
   const {introduction, steps} = useMemo(() => {
     const doc = docsConfig[configType] ?? docsConfig.onboarding;
 
@@ -50,6 +54,8 @@ export function ReplayOnboardingLayout({
         mask,
         block,
       },
+      isSelfHosted,
+      urlPrefix,
     };
 
     return {
@@ -75,6 +81,8 @@ export function ReplayOnboardingLayout({
     configType,
     mask,
     block,
+    urlPrefix,
+    isSelfHosted,
   ]);
 
   return (

static/app/components/updatedEmptyState.tsx

@@ -13,6 +13,8 @@ import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingSt
 import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted';
 import platforms from 'sentry/data/platforms';
 import {t} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import type {PlatformIntegration, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -25,6 +27,8 @@ export default function UpdatedEmptyState({project}: {project?: Project}) {
   const {isPending: isLoadingRegistry, data: registryData} =
     useSourcePackageRegistries(organization);
 
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
+
   const currentPlatformKey = project?.platform ?? 'other';
   const currentPlatform = platforms.find(
     p => p.id === currentPlatformKey
@@ -71,6 +75,8 @@ export default function UpdatedEmptyState({project}: {project?: Project}) {
     platformOptions: {installationMode: 'auto'},
     newOrg: false,
     replayOptions: {block: true, mask: true},
+    isSelfHosted,
+    urlPrefix,
   };
 
   if (currentPlatformKey === 'java' || currentPlatformKey === 'java-spring-boot') {

static/app/gettingStartedDocs/javascript/nextjs.tsx

@@ -32,20 +32,24 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 
 type Params = DocsParams;
 
-const getInstallConfig = () => [
-  {
-    description: tct(
-      'Configure your app automatically with the [wizardLink:Sentry wizard].',
-      {
-        wizardLink: (
-          <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
-        ),
-      }
-    ),
-    language: 'bash',
-    code: `npx @sentry/wizard@latest -i nextjs`,
-  },
-];
+const getInstallConfig = ({isSelfHosted, urlPrefix}: Params) => {
+  const urlParam = !isSelfHosted && urlPrefix ? `--url ${urlPrefix}` : '';
+
+  return [
+    {
+      description: tct(
+        'Configure your app automatically with the [wizardLink:Sentry wizard].',
+        {
+          wizardLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
+          ),
+        }
+      ),
+      language: 'bash',
+      code: `npx @sentry/wizard@latest -i nextjs ${urlParam}`,
+    },
+  ];
+};
 
 const getManualInstallConfig = () => [
   {
@@ -71,7 +75,7 @@ const onboarding: OnboardingConfig = {
   install: (params: Params) => [
     {
       type: StepType.INSTALL,
-      configurations: getInstallConfig(),
+      configurations: getInstallConfig(params),
       additionalInfo: (
         <Fragment>
           {t(
@@ -157,7 +161,9 @@ const onboarding: OnboardingConfig = {
 };
 
 const replayOnboarding: OnboardingConfig = {
-  install: () => [{type: StepType.INSTALL, configurations: getInstallConfig()}],
+  install: (params: Params) => [
+    {type: StepType.INSTALL, configurations: getInstallConfig(params)},
+  ],
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
@@ -199,7 +205,7 @@ const replayOnboarding: OnboardingConfig = {
 };
 
 const feedbackOnboarding: OnboardingConfig = {
-  install: () => [
+  install: (params: Params) => [
     {
       type: StepType.INSTALL,
       description: tct(
@@ -208,7 +214,7 @@ const feedbackOnboarding: OnboardingConfig = {
           code: <code />,
         }
       ),
-      configurations: getInstallConfig(),
+      configurations: getInstallConfig(params),
     },
   ],
   configure: (params: Params) => [

static/app/gettingStartedDocs/javascript/remix.tsx

@@ -28,25 +28,29 @@ import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
 
-const getConfigStep = () => [
-  {
-    description: tct(
-      'Configure your app automatically with the [wizardLink:Sentry wizard].',
-      {
-        wizardLink: (
-          <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/remix/#install" />
-        ),
-      }
-    ),
-    language: 'bash',
-    code: `npx @sentry/wizard@latest -i remix`,
-  },
-];
+const getConfigStep = ({isSelfHosted, urlPrefix}: Params) => {
+  const urlParam = !isSelfHosted && urlPrefix ? `--url ${urlPrefix}` : '';
+
+  return [
+    {
+      description: tct(
+        'Configure your app automatically with the [wizardLink:Sentry wizard].',
+        {
+          wizardLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/remix/#install" />
+          ),
+        }
+      ),
+      language: 'bash',
+      code: `npx @sentry/wizard@latest -i remix ${urlParam}`,
+    },
+  ];
+};
 
-const getInstallConfig = () => [
+const getInstallConfig = (params: Params) => [
   {
     type: StepType.INSTALL,
-    configurations: getConfigStep(),
+    configurations: getConfigStep(params),
   },
 ];
 
@@ -55,7 +59,7 @@ const onboarding: OnboardingConfig = {
     tct("Sentry's integration with [remixLink:Remix] supports Remix 1.0.0 and above.", {
       remixLink: <ExternalLink href="https://remix.run/" />,
     }),
-  install: () => getInstallConfig(),
+  install: (params: Params) => getInstallConfig(params),
   configure: () => [
     {
       type: StepType.CONFIGURE,
@@ -125,7 +129,7 @@ const onboarding: OnboardingConfig = {
 };
 
 const replayOnboarding: OnboardingConfig = {
-  install: () => getInstallConfig(),
+  install: (params: Params) => getInstallConfig(params),
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
@@ -165,7 +169,7 @@ const replayOnboarding: OnboardingConfig = {
 };
 
 const feedbackOnboarding: OnboardingConfig = {
-  install: () => [
+  install: (params: Params) => [
     {
       type: StepType.INSTALL,
       description: tct(
@@ -174,7 +178,7 @@ const feedbackOnboarding: OnboardingConfig = {
           code: <code />,
         }
       ),
-      configurations: getConfigStep(),
+      configurations: getConfigStep(params),
     },
   ],
   configure: (params: Params) => [

static/app/gettingStartedDocs/javascript/sveltekit.tsx

@@ -28,28 +28,32 @@ import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
 
-const getInstallConfig = () => [
-  {
-    type: StepType.INSTALL,
-    description: tct(
-      'Configure your app automatically with the [wizardLink:Sentry wizard].',
-      {
-        wizardLink: (
-          <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/sveltekit/#install" />
-        ),
-      }
-    ),
-    configurations: [
-      {
-        language: 'bash',
-        code: `npx @sentry/wizard@latest -i sveltekit`,
-      },
-    ],
-  },
-];
+const getInstallConfig = ({isSelfHosted, urlPrefix}: Params) => {
+  const urlParam = !isSelfHosted && urlPrefix ? `--url ${urlPrefix}` : '';
+
+  return [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'Configure your app automatically with the [wizardLink:Sentry wizard].',
+        {
+          wizardLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/sveltekit/#install" />
+          ),
+        }
+      ),
+      configurations: [
+        {
+          language: 'bash',
+          code: `npx @sentry/wizard@latest -i sveltekit ${urlParam}`,
+        },
+      ],
+    },
+  ];
+};
 
 const onboarding: OnboardingConfig = {
-  install: () => getInstallConfig(),
+  install: (params: Params) => getInstallConfig(params),
   configure: () => [
     {
       type: StepType.CONFIGURE,
@@ -109,7 +113,7 @@ const onboarding: OnboardingConfig = {
 };
 
 const replayOnboarding: OnboardingConfig = {
-  install: () => getInstallConfig(),
+  install: (params: Params) => getInstallConfig(params),
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
@@ -141,7 +145,7 @@ const replayOnboarding: OnboardingConfig = {
 };
 
 const feedbackOnboarding: OnboardingConfig = {
-  install: () => [
+  install: (params: Params) => [
     {
       type: StepType.INSTALL,
       description: tct(
@@ -150,7 +154,7 @@ const feedbackOnboarding: OnboardingConfig = {
           code: <code />,
         }
       ),
-      configurations: getInstallConfig(),
+      configurations: getInstallConfig(params),
     },
   ],
   configure: (params: Params) => [