ref(getting-started-docs): Source sdks version from sentry release re…

…gistry (#54675)

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

@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {PlatformKey} from 'sentry/data/platformCategories';
 import type {Organization, PlatformIntegration, Project, ProjectKey} from 'sentry/types';
@@ -22,6 +23,7 @@ export type ModuleProps = {
  organization?: Organization;
  platformKey?: PlatformKey;
  projectId?: Project['id'];
+ sourcePackageRegistries?: ReturnType<typeof useSourcePackageRegistries>;
 };
 
 // Loads the component containing the documentation for the specified platform
@@ -33,6 +35,8 @@ export function SdkDocumentation({
  organization,
  projectId,
 }: SdkDocumentationProps) {
+ const sourcePackageRegistries = useSourcePackageRegistries();
+
  const [module, setModule] = useState<null | {
  default: React.ComponentType<ModuleProps>;
  }>(null);
@@ -95,6 +99,7 @@ export function SdkDocumentation({
  }
 
  const {default: GettingStartedDoc} = module;
+
  return (
  <GettingStartedDoc
  dsn={projectKeys[0].dsn.public}
@@ -103,6 +108,7 @@ export function SdkDocumentation({
  platformKey={platform?.id}
  organization={organization}
  projectId={projectId}
+ sourcePackageRegistries={sourcePackageRegistries}
  />
  );
 }

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

@@ -47,6 +47,10 @@ type ConfigurationType = {
  * A callback to be invoked when the configuration is selected and copied to the clipboard
  */
  onSelectAndCopy?: () => void;
+ /**
+ * Whether or not the configuration or parts of it are currently being loaded
+ */
+ partialLoading?: boolean;
 };
 
 interface BaseStepProps {
@@ -79,6 +83,7 @@ function getConfiguration({
  additionalInfo,
  onCopy,
  onSelectAndCopy,
+ partialLoading,
 }: ConfigurationType) {
  return (
  <Configuration>
@@ -89,6 +94,8 @@ function getConfiguration({
  language={language}
  onCopy={onCopy}
  onSelectAndCopy={onSelectAndCopy}
+ hideCopyButton={partialLoading}
+ disableUserSelection={partialLoading}
  >
  {language === 'javascript'
  ? beautify.js(code, {indent_size: 2, e4x: true})

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

@@ -0,0 +1,45 @@
+import {useEffect} from 'react';
+
+import {Client} from 'sentry/api';
+import {handleXhrErrorResponse} from 'sentry/utils/handleXhrErrorResponse';
+import {useApiQuery} from 'sentry/utils/queryClient';
+
+type ReleaseRegistrySdk = Record<
+ string,
+ {
+ canonical: string;
+ main_docs_url: string;
+ name: string;
+ package_url: string;
+ repo_url: string;
+ version: string;
+ }
+>;
+
+// This exists because /extensions/type/search API is not prefixed with
+// /api/0/, but the default API client on the abstract issue form is...
+const API_CLIENT = new Client({baseUrl: '', headers: {}, credentials: 'omit'});
+
+/**
+ * Fetches the release registry list for SDKs
+ */
+export function useSourcePackageRegistries() {
+ const releaseRegistrySdk = useApiQuery<ReleaseRegistrySdk>(
+ ['https://release-registry.services.sentry.io/sdks'],
+ {
+ staleTime: Infinity,
+ },
+ API_CLIENT
+ );
+
+ useEffect(() => {
+ if (releaseRegistrySdk.error) {
+ handleXhrErrorResponse(
+ 'Failed to fetch sentry release registry',
+ releaseRegistrySdk.error
+ );
+ }
+ }, [releaseRegistrySdk.error]);
+
+ return releaseRegistrySdk;
+}

static/app/gettingStartedDocs/android/android.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+ sourcePackageRegistries,
+}: Partial<
+ Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: (
@@ -28,10 +29,16 @@ export const steps = ({
  configurations: [
  {
  language: 'groovy',
+ partialLoading: sourcePackageRegistries?.isLoading,
  code: `
 plugins {
  id "com.android.application" // should be in the same module
- id "io.sentry.android.gradle" version "3.12.0"
+ id "io.sentry.android.gradle" version "${
+ sourcePackageRegistries?.isLoading
+ ? t('\u2026loading')
+ : sourcePackageRegistries?.data?.['sentry.java.android.gradle-plugin']?.version ??
+ '3.12.0'
+ }"
 }
  `,
  },
@@ -139,8 +146,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithAndroid({dsn, ...props}: ModuleProps) {
- return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithAndroid({
+ dsn,
+ sourcePackageRegistries,
+ ...props
+}: ModuleProps) {
+ return (
+ <Layout
+ steps={steps({dsn, sourcePackageRegistries})}
+ nextSteps={nextSteps}
+ {...props}
+ />
+ );
 }
 
 export default GettingStartedWithAndroid;

static/app/gettingStartedDocs/apple/apple-ios.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+ sourcePackageRegistries,
+}: Partial<
+ Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
  </p>
  ),
  language: 'swift',
+ partialLoading: sourcePackageRegistries?.isLoading,
  code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+ sourcePackageRegistries?.isLoading
+ ? t('\u2026loading')
+ : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+ }"),
  `,
  },
  ],
@@ -231,8 +237,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithIos({dsn, ...props}: ModuleProps) {
- return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithIos({
+ dsn,
+ sourcePackageRegistries,
+ ...props
+}: ModuleProps) {
+ return (
+ <Layout
+ steps={steps({dsn, sourcePackageRegistries})}
+ nextSteps={nextSteps}
+ {...props}
+ />
+ );
 }
 
 export default GettingStartedWithIos;

static/app/gettingStartedDocs/apple/apple-macos.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+ sourcePackageRegistries,
+}: Partial<
+ Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
  </p>
  ),
  language: 'swift',
+ partialLoading: sourcePackageRegistries?.isLoading,
  code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+ sourcePackageRegistries?.isLoading
+ ? t('\u2026loading')
+ : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+ }"),
  `,
  },
  ],
@@ -183,8 +189,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithMacos({dsn, ...props}: ModuleProps) {
- return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithMacos({
+ dsn,
+ sourcePackageRegistries,
+ ...props
+}: ModuleProps) {
+ return (
+ <Layout
+ steps={steps({dsn, sourcePackageRegistries})}
+ nextSteps={nextSteps}
+ {...props}
+ />
+ );
 }
 
 export default GettingStartedWithMacos;

static/app/gettingStartedDocs/apple/apple.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+ sourcePackageRegistries,
+}: Partial<
+ Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
  </p>
  ),
  language: 'swift',
+ partialLoading: sourcePackageRegistries?.isLoading,
  code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+ sourcePackageRegistries?.isLoading
+ ? t('\u2026loading')
+ : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+ }"),
  `,
  },
  ],
@@ -183,8 +189,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithApple({dsn, ...props}: ModuleProps) {
- return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithApple({
+ dsn,
+ sourcePackageRegistries,
+ ...props
+}: ModuleProps) {
+ return (
+ <Layout
+ steps={steps({dsn, sourcePackageRegistries})}
+ nextSteps={nextSteps}
+ {...props}
+ />
+ );
 }
 
 export default GettingStartedWithApple;

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -8,9 +8,7 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: t(

static/app/gettingStartedDocs/cordova/cordova.tsx

@@ -9,9 +9,7 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: t('Install our SDK using the cordova command:'),

static/app/gettingStartedDocs/dart/dart.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
  dsn,
-}: {
- dsn?: string;
-} = {}): LayoutProps['steps'] => [
+ sourcePackageRegistries,
+}: Partial<
+ Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
  {
  type: StepType.INSTALL,
  description: (
@@ -25,9 +26,14 @@ export const steps = ({
  configurations: [
  {
  language: 'yml',
+ partialLoading: sourcePackageRegistries?.isLoading,
  code: `
 dependencies:
- sentry: ^7.8.0
+ sentry: ^${
+ sourcePackageRegistries?.isLoading
+ ? t('\u2026loading')
+ : sourcePackageRegistries?.data?.['sentry.dart']?.version ?? '7.8.0'
+ }
  `,
  },
  ],
@@ -162,8 +168,12 @@ Future<void> processOrderBatch(ISentrySpan span) async {
 ];
 // Configuration End
 
-export function GettingStartedWithDart({dsn, ...props}: ModuleProps) {
- return <Layout steps={steps({dsn})} {...props} />;
+export function GettingStartedWithDart({
+ dsn,
+ sourcePackageRegistries,
+ ...props
+}: ModuleProps) {
+ return <Layout steps={steps({dsn, sourcePackageRegistries})} {...props} />;
 }
 
 export default GettingStartedWithDart;