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

…gistry (#54675)
getsentry · Aug 17, 2023 · d5615b9 · d5615b9
1 parent 3db3d99
commit d5615b9
Show file tree

Hide file tree

Showing 75 changed files with 844 additions and 313 deletions.
diff --git a/static/app/components/onboarding/gettingStartedDoc/sdkDocumentation.tsx b/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}
     />
   );
 }
diff --git a/static/app/components/onboarding/gettingStartedDoc/step.tsx b/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})

diff --git a/static/app/components/onboarding/gettingStartedDoc/useSourcePackageRegistries.tsx b/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;
+}
diff --git a/static/app/gettingStartedDocs/android/android.tsx b/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;
diff --git a/static/app/gettingStartedDocs/apple/apple-ios.tsx b/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;
diff --git a/static/app/gettingStartedDocs/apple/apple-macos.tsx b/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;
diff --git a/static/app/gettingStartedDocs/apple/apple.tsx b/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;
diff --git a/static/app/gettingStartedDocs/capacitor/capacitor.tsx b/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(

diff --git a/static/app/gettingStartedDocs/cordova/cordova.tsx b/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:'),

diff --git a/static/app/gettingStartedDocs/dart/dart.tsx b/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;