ref(onboarding): Improve 'getPlatformPath' func (#72764)

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

@@ -0,0 +1,109 @@
+import {ProjectKeysFixture} from 'sentry-fixture/projectKeys';
+
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
+
+const PROJECT_KEY = ProjectKeysFixture()[0];
+import type {Organization, Project} from 'sentry/types';
+
+import {SdkDocumentation} from './sdkDocumentation';
+
+function renderMockRequests({
+  project,
+  orgSlug,
+}: {
+  orgSlug: Organization['slug'];
+  project: Project;
+}) {
+  MockApiClient.addMockResponse({
+    url: `/projects/${orgSlug}/${project.slug}/`,
+    body: project,
+  });
+
+  MockApiClient.addMockResponse({
+    url: `/projects/${orgSlug}/${project.slug}/keys/`,
+    body: [PROJECT_KEY],
+  });
+
+  MockApiClient.addMockResponse({
+    url: `/organizations/${orgSlug}/sdks/`,
+  });
+}
+
+describe('Renders SDK Documentation corretly based on platform id and language', function () {
+  it('Native QT', async function () {
+    const {organization, project} = initializeOrg({
+      projects: [
+        {
+          ...initializeOrg().project,
+          slug: 'native-qt',
+          platform: 'native-qt',
+        },
+      ],
+    });
+
+    renderMockRequests({project, orgSlug: organization.slug});
+
+    render(
+      <OnboardingContextProvider>
+        <SdkDocumentation
+          platform={{
+            id: 'native-qt',
+            name: 'Qt',
+            type: 'framework',
+            language: 'native',
+            link: 'https://docs.sentry.io/platforms/native/guides/qt/',
+          }}
+          projectSlug={project.slug}
+          projectId={project.id}
+          organization={organization}
+          activeProductSelection={[]}
+        />
+      </OnboardingContextProvider>
+    );
+
+    // Renders main headings
+    expect(await screen.findByRole('heading', {name: 'Install'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();
+  });
+
+  it('JavaScript', async function () {
+    const {organization, project} = initializeOrg({
+      projects: [
+        {
+          ...initializeOrg().project,
+          slug: 'javascript',
+          platform: 'javascript',
+        },
+      ],
+    });
+
+    renderMockRequests({project, orgSlug: organization.slug});
+
+    render(
+      <OnboardingContextProvider>
+        <SdkDocumentation
+          platform={{
+            id: 'javascript',
+            name: 'Browser JavaScript',
+            type: 'language',
+            language: 'javascript',
+            link: 'https://docs.sentry.io/platforms/javascript/',
+          }}
+          projectSlug={project.slug}
+          projectId={project.id}
+          organization={organization}
+          activeProductSelection={[]}
+        />
+      </OnboardingContextProvider>
+    );
+
+    // Renders main headings
+    expect(await screen.findByRole('heading', {name: 'Install'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();
+  });
+});

static/app/gettingStartedDocs/apple/apple.tsx

@@ -1,4 +1,4 @@
-import docs from './apple-macos';
+import docs from './macos';
 
 // apple is the legacy platform key for apple-macos
 // So we simply re-export the docs from apple-macos

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

@@ -4,7 +4,7 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import docs, {InstallationMode} from './apple-ios';
+import docs, {InstallationMode} from './ios';
 
 describe('apple-ios onboarding docs', function () {
   it('renders docs correctly', function () {

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

@@ -10,7 +10,7 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
-import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/apple-macos';
+import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/macos';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 

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

@@ -4,7 +4,7 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import docs from './apple-macos';
+import docs from './macos';
 
 describe('apple-macos onboarding docs', function () {
   it('renders docs correctly', async function () {

static/app/gettingStartedDocs/native/native-qt.spec.tsx → static/app/gettingStartedDocs/native/qt.spec.tsx

@@ -1,7 +1,7 @@
 import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
 import {screen} from 'sentry-test/reactTestingLibrary';
 
-import docs from './native-qt';
+import docs from './qt';
 
 describe('getting started with native-qt', function () {
   it('renders gradle docs correctly', function () {

static/app/utils/gettingStartedDocs/getPlatformPath.spec.ts

@@ -29,9 +29,9 @@ describe('getPlatformPath', () => {
   it('handles special cases', () => {
     function getFrameworkPlatformWithId(id: PlatformKey): PlatformIntegration {
       return {
-        type: 'framework',
         id,
         language: 'language',
+        type: 'framework',
         link: 'link',
         name: 'name',
       };
@@ -49,34 +49,41 @@ describe('getPlatformPath', () => {
 
     // Frameworks
     expect(getPlatformPath(getFrameworkPlatformWithId('capacitor'))).toEqual(
-      'capacitor/capacitor'
+      'language/language'
+    );
+
+    expect(getPlatformPath(getFrameworkPlatformWithId('ionic'))).toEqual(
+      'language/language'
+    );
+    expect(getPlatformPath(getFrameworkPlatformWithId('dart'))).toEqual(
+      'language/language'
     );
-    expect(getPlatformPath(getFrameworkPlatformWithId('ionic'))).toEqual('ionic/ionic');
-    expect(getPlatformPath(getFrameworkPlatformWithId('dart'))).toEqual('dart/dart');
     expect(getPlatformPath(getFrameworkPlatformWithId('android'))).toEqual(
-      'android/android'
+      'language/language'
     );
     expect(getPlatformPath(getFrameworkPlatformWithId('flutter'))).toEqual(
-      'flutter/flutter'
+      'language/language'
     );
     expect(getPlatformPath(getFrameworkPlatformWithId('unreal'))).toEqual(
-      'unreal/unreal'
+      'language/language'
+    );
+    expect(getPlatformPath(getFrameworkPlatformWithId('unity'))).toEqual(
+      'language/language'
     );
-    expect(getPlatformPath(getFrameworkPlatformWithId('unity'))).toEqual('unity/unity');
     expect(getPlatformPath(getFrameworkPlatformWithId('minidump'))).toEqual(
-      'minidump/minidump'
+      'language/language'
     );
     expect(getPlatformPath(getFrameworkPlatformWithId('native-qt'))).toEqual(
-      'native/native-qt'
+      'language/qt'
     );
 
     // Library
     expect(getPlatformPath(getLibraryPlatformWithId('python-celery'))).toEqual(
-      'python/celery'
+      'language/celery'
     );
-    expect(getPlatformPath(getLibraryPlatformWithId('python-rq'))).toEqual('python/rq');
+    expect(getPlatformPath(getLibraryPlatformWithId('python-rq'))).toEqual('language/rq');
     expect(getPlatformPath(getLibraryPlatformWithId('python-pymongo'))).toEqual(
-      'python/mongo'
+      'language/pymongo'
     );
   });
 });

static/app/utils/gettingStartedDocs/getPlatformPath.ts

@@ -1,40 +1,16 @@
 import type {PlatformIntegration} from 'sentry/types/project';
 
 export function getPlatformPath(platform: PlatformIntegration) {
-  // TODO: This will be removed once we no longer rely on sentry-docs to load platform icons
-  if (platform.type === 'framework') {
-    switch (platform.id) {
-      case 'capacitor':
-        return `capacitor/capacitor`;
-      case 'ionic':
-        return `ionic/ionic`;
-      case 'dart':
-        return `dart/dart`;
-      case 'android':
-        return `android/android`;
-      case 'flutter':
-        return `flutter/flutter`;
-      case 'unreal':
-        return `unreal/unreal`;
-      case 'unity':
-        return `unity/unity`;
-      case 'minidump':
-        return `minidump/minidump`;
-      case 'native-qt':
-        return `native/native-qt`;
-      default:
-        return platform.id.replace(`${platform.language}-`, `${platform.language}/`);
-    }
+  // some platforms use a naming convention that combines 'language' and 'id' with a hyphen in between. For example, 'react-native'.
+  if (platform.id === platform.language) {
+    return `${platform.language}/${platform.language}`;
   }
 
-  switch (platform.id) {
-    case 'python-celery':
-      return `python/celery`;
-    case 'python-rq':
-      return `python/rq`;
-    case 'python-pymongo':
-      return `python/mongo`;
-    default:
-      return `${platform.language}/${platform.id}`;
+  const framework = platform.id.split('-')[1];
+
+  if (framework) {
+    return `${platform.language}/${framework}`;
   }
+
+  return `${platform.language}/${platform.language}`;
 }