fix(starfish): Fix how setup content snippets appear (#60018)

One snippet instead of two separate snippets, removes the copy button.

static/app/views/starfish/views/screens/index.tsx

@@ -35,10 +35,7 @@ import {
   ScreensTable,
   useTableQuery,
 } from 'sentry/views/starfish/views/screens/screensTable';
-import {
-  REPORT_FULLY_DRAWN_CONTENT,
-  SETUP_CONTENT,
-} from 'sentry/views/starfish/views/screens/setupContent';
+import {SETUP_CONTENT} from 'sentry/views/starfish/views/screens/setupContent';
 import {TabbedCodeSnippet} from 'sentry/views/starfish/views/screens/tabbedCodeSnippets';
 
 export enum YAxis {
@@ -299,7 +296,6 @@ export function ScreensView({yAxes, additionalFilters, chartHeight}: Props) {
             {defined(hasTTFD) && !hasTTFD && yAxes[1] === YAxis.TTFD ? (
               <ChartPanel title={CHART_TITLES[yAxes[1]]}>
                 <TabbedCodeSnippet tabs={SETUP_CONTENT} />
-                <TabbedCodeSnippet tabs={REPORT_FULLY_DRAWN_CONTENT} />
               </ChartPanel>
             ) : (
               <ScreensBarChart

static/app/views/starfish/views/screens/setupContent.ts

@@ -1,90 +1,39 @@
 import {CodeSnippetTab} from 'sentry/views/starfish/views/screens/tabbedCodeSnippets';
 
-const swiftSetupSnippet = `// Enable Time to Full Display
+const swiftSetupSnippet = `// Step 1 - Enable Time to Full Display
 import Sentry
 
 SentrySDK.start { options in
   options.dsn = "<my-dsn-key>"
   options.enableTimeToFullDisplayTracing = true
-}`;
-const objCSetupSnippet = `// Enable Time to Full Display
-@import Sentry;
+}
 
-[SentrySDK startWithConfigureOptions:^(SentryOptions *options) {
-  options.dsn = @"<my-dsn-key>";
-  options.enableTimeToFullDisplayTracing = YES;
-}];`;
+// Step 2 - Call API when screen is fully drawn
+SentrySDK.reportFullyDisplayed()
+`;
 
-const xmlSetupSnippet = `<!--Enable Time to Full Display-->
+const kotlinSnippet = `<!--Step 1: Enable Time to Full Display in AndroidManifest.xml-->
 <application>
     <meta-data android:name="io.sentry.traces.time-to-full-display.enable" android:value="true" />
-</application>`;
+</application>
 
-export const SETUP_CONTENT: CodeSnippetTab[] = [
-  {
-    code: swiftSetupSnippet,
-    label: 'Swift',
-    language: 'swift',
-    value: 'swift',
-  },
-  {
-    code: objCSetupSnippet,
-    label: 'Objective-C',
-    language: 'objectivec',
-    value: 'objective-c',
-  },
-  {
-    code: xmlSetupSnippet,
-    label: 'Xml',
-    language: 'xml',
-    value: 'xml',
-    filename: 'AndroidManifest.xml',
-  },
-];
-
-const swiftSnippet = `// Call API when screen is fully drawn
-import Sentry
-
-SentrySDK.reportFullyDisplayed()`;
-
-const objCSnippet = `// Call API when screen is fully drawn
-@import Sentry;
-
-[SentrySDK reportFullyDisplayed];`;
-
-const javaSnippet = `// Call API when screen is fully drawn
-import io.sentry.Sentry;
-
-Sentry.reportFullyDisplayed();`;
-
-const kotlinSnippet = `// Call API when screen is fully drawn
+// Step 2 - Call API when screen is fully drawn
 import io.sentry.Sentry
 
-Sentry.reportFullyDisplayed()`;
+Sentry.reportFullyDisplayed()
+`;
 
-export const REPORT_FULLY_DRAWN_CONTENT: CodeSnippetTab[] = [
+export const SETUP_CONTENT: CodeSnippetTab[] = [
   {
-    code: swiftSnippet,
+    code: swiftSetupSnippet,
     label: 'Swift',
     language: 'swift',
     value: 'swift',
   },
-  {
-    code: objCSnippet,
-    label: 'Objective-C',
-    language: 'objectivec',
-    value: 'objective-c',
-  },
-  {
-    code: javaSnippet,
-    label: 'Java',
-    language: 'java',
-    value: 'java',
-  },
   {
     code: kotlinSnippet,
     label: 'Kotlin',
-    language: 'kotlin',
+    language: 'unknown',
     value: 'kotlin',
   },
 ];

static/app/views/starfish/views/screens/tabbedCodeSnippets.tsx

@@ -26,10 +26,9 @@ export function TabbedCodeSnippet({tabs}: TabbedCodeSnippetProps) {
 
   return (
     <StyledCodeSnippet
-      dark
       tabs={tabs}
       language={language}
-      hideCopyButton={false}
+      hideCopyButton
       selectedTab={selectedTabValue}
       onTabClick={value => setSelectedTabValue(value)}
       filename={filename}
@@ -41,7 +40,7 @@ export function TabbedCodeSnippet({tabs}: TabbedCodeSnippetProps) {
 
 const StyledCodeSnippet = styled(CodeSnippet)`
   pre {
-    max-height: 80px;
+    height: 213px;
   }
   margin-top: ${space(1)};
 `;