feat(onboarding): Display slugs in onboarding doc snippets (#55633)

Use the actual organization and project slugs instead of placeholders.

Closes https://github.com/getsentry/sentry/issues/55440

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

@@ -23,6 +23,7 @@ export type ModuleProps = {
   organization?: Organization;
   platformKey?: PlatformKey;
   projectId?: Project['id'];
+  projectSlug?: Project['slug'];
   sourcePackageRegistries?: ReturnType<typeof useSourcePackageRegistries>;
 };
 
@@ -108,6 +109,7 @@ export function SdkDocumentation({
       platformKey={platform?.id}
       organization={organization}
       projectId={projectId}
+      projectSlug={projectSlug}
       sourcePackageRegistries={sourcePackageRegistries}
     />
   );

static/app/gettingStartedDocs/java/java.spec.tsx

@@ -9,7 +9,9 @@ describe('GettingStartedWithJava', function () {
     const {container} = render(<GettingStartedWithJava dsn="test-dsn" />);
 
     // Steps
-    for (const step of steps()) {
+    for (const step of steps({
+      dsn: 'test-dsn',
+    })) {
       expect(
         screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();

static/app/gettingStartedDocs/java/java.tsx

@@ -6,6 +6,13 @@ import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDoc
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import {t, tct} from 'sentry/locale';
 
+interface StepProps {
+  dsn: string;
+  organizationSlug?: string;
+  projectSlug?: string;
+  sourcePackageRegistries?: ModuleProps['sourcePackageRegistries'];
+}
+
 // Configuration Start
 const introduction = (
   <p>
@@ -22,9 +29,9 @@ const introduction = (
 export const steps = ({
   dsn,
   sourcePackageRegistries,
-}: Partial<
-  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
-> = {}): LayoutProps['steps'] => [
+  projectSlug,
+  organizationSlug,
+}: StepProps): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t('Install the SDK via Gradle, Maven, or SBT:'),
@@ -86,8 +93,8 @@ sentry {
   // code as part of your stack traces in Sentry.
   includeSourceContext = true
 
-  org = "___ORG_SLUG___"
-  projectName = "___PROJECT_SLUG___"
+  org = "${organizationSlug}"
+  projectName = "${projectSlug}"
   authToken = "your-sentry-auth-token"
 }
         `,
@@ -143,9 +150,9 @@ sentry {
       <!-- minimum required version is 2.17.3 -->
       <sentryCliExecutablePath>/path/to/sentry-cli</sentryCliExecutablePath>
 
-      <org>___ORG_SLUG___</org>
+      <org>${organizationSlug}</org>
 
-      <project>___PROJECT_SLUG___</project>
+      <project>${projectSlug}</project>
 
       <!-- in case you're self hosting, provide the URL here -->
       <!--<url>http://localhost:8000/</url>-->
@@ -306,11 +313,18 @@ transaction.finish();
 export function GettingStartedWithJava({
   dsn,
   sourcePackageRegistries,
+  projectSlug,
+  organization,
   ...props
 }: ModuleProps) {
   return (
     <Layout
-      steps={steps({dsn, sourcePackageRegistries})}
+      steps={steps({
+        dsn,
+        sourcePackageRegistries,
+        projectSlug: projectSlug ?? '___PROJECT_SLUG___',
+        organizationSlug: organization?.slug ?? '___ORG_SLUG___',
+      })}
       introduction={introduction}
       {...props}
     />

static/app/gettingStartedDocs/java/log4j2.spec.tsx

@@ -9,7 +9,9 @@ describe('GettingStartedWithLog4j2', function () {
     const {container} = render(<GettingStartedWithLog4j2 dsn="test-dsn" />);
 
     // Steps
-    for (const step of steps()) {
+    for (const step of steps({
+      dsn: 'test-dsn',
+    })) {
       expect(
         screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();

static/app/gettingStartedDocs/java/log4j2.tsx

@@ -6,6 +6,13 @@ import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDoc
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import {t, tct} from 'sentry/locale';
 
+interface StepProps {
+  dsn: string;
+  organizationSlug?: string;
+  projectSlug?: string;
+  sourcePackageRegistries?: ModuleProps['sourcePackageRegistries'];
+}
+
 // Configuration Start
 const introduction = (
   <p>
@@ -25,9 +32,9 @@ const introduction = (
 export const steps = ({
   dsn,
   sourcePackageRegistries,
-}: Partial<
-  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
-> = {}): LayoutProps['steps'] => [
+  projectSlug,
+  organizationSlug,
+}: StepProps): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t(
@@ -78,9 +85,9 @@ export const steps = ({
       <!-- minimum required version is 2.17.3 -->
       <sentryCliExecutablePath>/path/to/sentry-cli</sentryCliExecutablePath>
 
-      <org>___ORG_SLUG___</org>
+      <org>${organizationSlug}</org>
 
-      <project>___PROJECT_SLUG___</project>
+      <project>${projectSlug}</project>
 
       <!-- in case you're self hosting, provide the URL here -->
       <!--<url>http://localhost:8000/</url>-->
@@ -145,8 +152,8 @@ sentry {
   // code as part of your stack traces in Sentry.
   includeSourceContext = true
 
-  org = "___ORG_SLUG___"
-  projectName = "___PROJECT_SLUG___"
+  org = "${organizationSlug}"
+  projectName = "${projectSlug}"
   authToken = "your-sentry-auth-token"
 }
             `,
@@ -293,11 +300,18 @@ try {
 export function GettingStartedWithLog4j2({
   dsn,
   sourcePackageRegistries,
+  projectSlug,
+  organization,
   ...props
 }: ModuleProps) {
   return (
     <Layout
-      steps={steps({dsn, sourcePackageRegistries})}
+      steps={steps({
+        dsn,
+        sourcePackageRegistries,
+        projectSlug: projectSlug ?? '___PROJECT_SLUG___',
+        organizationSlug: organization?.slug ?? '___ORG_SLUG___',
+      })}
       introduction={introduction}
       {...props}
     />

static/app/gettingStartedDocs/java/logback.spec.tsx

@@ -9,7 +9,9 @@ describe('GettingStartedWithLogBack', function () {
     const {container} = render(<GettingStartedWithLogBack dsn="test-dsn" />);
 
     // Steps
-    for (const step of steps()) {
+    for (const step of steps({
+      dsn: 'test-dsn',
+    })) {
       expect(
         screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();

static/app/gettingStartedDocs/java/logback.tsx

@@ -6,6 +6,13 @@ import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDoc
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import {t, tct} from 'sentry/locale';
 
+interface StepProps {
+  dsn: string;
+  organizationSlug?: string;
+  projectSlug?: string;
+  sourcePackageRegistries?: ModuleProps['sourcePackageRegistries'];
+}
+
 // Configuration Start
 const introduction = (
   <p>
@@ -23,9 +30,9 @@ const introduction = (
 export const steps = ({
   dsn,
   sourcePackageRegistries,
-}: Partial<
-  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
-> = {}): LayoutProps['steps'] => [
+  projectSlug,
+  organizationSlug,
+}: StepProps): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t(
@@ -76,9 +83,9 @@ export const steps = ({
       <!-- minimum required version is 2.17.3 -->
       <sentryCliExecutablePath>/path/to/sentry-cli</sentryCliExecutablePath>
 
-      <org>___ORG_SLUG___</org>
+      <org>${organizationSlug}</org>
 
-      <project>___PROJECT_SLUG___</project>
+      <project>${projectSlug}</project>
 
       <!-- in case you're self hosting, provide the URL here -->
       <!--<url>http://localhost:8000/</url>-->
@@ -144,8 +151,8 @@ sentry {
   // code as part of your stack traces in Sentry.
   includeSourceContext = true
 
-  org = "___ORG_SLUG___"
-  projectName = "___PROJECT_SLUG___"
+  org = "${organizationSlug}"
+  projectName = "${projectSlug}"
   authToken = "your-sentry-auth-token"
 }
             `,
@@ -300,11 +307,18 @@ try {
 export function GettingStartedWithLogBack({
   dsn,
   sourcePackageRegistries,
+  projectSlug,
+  organization,
   ...props
 }: ModuleProps) {
   return (
     <Layout
-      steps={steps({dsn, sourcePackageRegistries})}
+      steps={steps({
+        dsn,
+        sourcePackageRegistries,
+        projectSlug: projectSlug ?? '___PROJECT_SLUG___',
+        organizationSlug: organization?.slug ?? '___ORG_SLUG___',
+      })}
       introduction={introduction}
       {...props}
     />

static/app/gettingStartedDocs/java/spring-boot.spec.tsx

@@ -9,7 +9,9 @@ describe('GettingStartedWithSpringBoot', function () {
     const {container} = render(<GettingStartedWithSpringBoot dsn="test-dsn" />);
 
     // Steps
-    for (const step of steps()) {
+    for (const step of steps({
+      dsn: 'test-dsn',
+    })) {
       expect(
         screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
       ).toBeInTheDocument();

static/app/gettingStartedDocs/java/spring-boot.tsx

@@ -6,6 +6,13 @@ import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDoc
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import {t, tct} from 'sentry/locale';
 
+interface StepProps {
+  dsn: string;
+  organizationSlug?: string;
+  projectSlug?: string;
+  sourcePackageRegistries?: ModuleProps['sourcePackageRegistries'];
+}
+
 // Configuration Start
 const introduction = (
   <p>
@@ -30,9 +37,9 @@ const introduction = (
 export const steps = ({
   dsn,
   sourcePackageRegistries,
-}: Partial<
-  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
-> = {}): LayoutProps['steps'] => [
+  projectSlug,
+  organizationSlug,
+}: StepProps): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t('Install using either Maven or Gradle:'),
@@ -193,9 +200,9 @@ sentry:
         <!-- minimum required version is 2.17.3 -->
         <sentryCliExecutablePath>/path/to/sentry-cli</sentryCliExecutablePath>
 
-        <org>___ORG_SLUG___</org>
+        <org>${organizationSlug}</org>
 
-        <project>___PROJECT_SLUG___</project>
+        <project>${projectSlug}</project>
 
         <!-- in case you're self hosting, provide the URL here -->
         <!--<url>http://localhost:8000/</url>-->
@@ -260,8 +267,8 @@ sentry {
   // code as part of your stack traces in Sentry.
   includeSourceContext = true
 
-  org = "___ORG_SLUG___"
-  projectName = "___PROJECT_SLUG___"
+  org = "${organizationSlug}"
+  projectName = "${projectSlug}"
   authToken = "your-sentry-auth-token"
 }
         `,
@@ -429,11 +436,18 @@ class PersonService {
 export function GettingStartedWithSpringBoot({
   dsn,
   sourcePackageRegistries,
+  projectSlug,
+  organization,
   ...props
 }: ModuleProps) {
   return (
     <Layout
-      steps={steps({dsn, sourcePackageRegistries})}
+      steps={steps({
+        dsn,
+        sourcePackageRegistries,
+        projectSlug: projectSlug ?? '___PROJECT_SLUG___',
+        organizationSlug: organization?.slug ?? '___ORG_SLUG___',
+      })}
       introduction={introduction}
       {...props}
     />

static/app/gettingStartedDocs/java/spring.spec.tsx

@@ -9,7 +9,9 @@ describe('GettingStartedWithSpring', function () {
     const {container} = render(<GettingStartedWithSpring dsn="test-dsn" />);
 
     // Steps
-    for (const step of steps()) {
+    for (const step of steps({
+      dsn: 'test-dsn',
+    })) {
       expect(
         screen.getByRole('heading', {name: step.title ?? StepTitle[step.type], level: 4})
       ).toBeInTheDocument();