Fix setup sidebar analytics event

Author: aliu39

static/app/components/events/featureFlags/featureFlagInlineCTA.tsx

@@ -20,7 +20,10 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
   const {activateSidebar} = useFeatureFlagOnboarding();
 
   function handleSetupButtonClick(e: any) {
-    trackAnalytics('flags.setup_modal_opened', {organization});
+    trackAnalytics('flags.setup_sidebar_opened', {
+      organization,
+      surface: 'issue_details.flags_section',
+    });
     trackAnalytics('flags.cta_setup_button_clicked', {organization});
     activateSidebar(e);
   }

static/app/utils/analytics/featureFlagAnalyticsEvents.tsx

@@ -10,6 +10,9 @@ export type FeatureFlagEventParameters = {
     direction: 'next' | 'prev';
     surface: 'settings';
   };
+  'flags.setup_sidebar_opened': {
+    surface: 'issue_details.flags_section' | 'issue_details.flags_drawer';
+  };
   'flags.sort_flags': {sortMethod: string};
   'flags.table_rendered': {
     numFlags: number;
@@ -31,4 +34,5 @@ export const featureFlagEventMap: Record<FeatureFlagEventKey, string | null> = {
   'flags.cta_dismissed': 'Flag CTA Dismissed',
   'flags.logs-paginated': 'Feature Flag Logs Paginated',
   'flags.view-setup-sidebar': 'Viewed Feature Flag Onboarding Sidebar',
+  'flags.setup_sidebar_opened': 'Feature Flag Setup Sidebar Opened',
 };

static/app/views/issueDetails/groupFeatureFlags/flagDrawerCTA.tsx

@@ -14,7 +14,10 @@ export default function FlagDrawerCTA() {
   const {onClose: closeDrawer} = useDrawerContentContext();
 
   function handleSetupButtonClick(e: any) {
-    trackAnalytics('flags.setup_modal_opened', {organization});
+    trackAnalytics('flags.setup_sidebar_opened', {
+      organization,
+      surface: 'issue_details.flags_drawer',
+    });
     trackAnalytics('flags.cta_setup_button_clicked', {organization});
     closeDrawer?.();
     setTimeout(() => {
@@ -55,7 +58,6 @@ const BannerTitle = styled('div')`
 
 const BannerDescription = styled('div')`
   margin-bottom: ${space(1.5)};
-  max-width: 340px;
 `;
 
 const ActionButton = styled('div')`
@@ -65,6 +67,7 @@ const ActionButton = styled('div')`
 
 const BannerWrapper = styled('div')`
   position: relative;
+  max-width: 600px;
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
   padding: ${space(2)};