ref(issue-details): Minor improvements (#75990)

- Messages now always display with white-space preserved, even if
annotated

<img width="1056" alt="Screenshot 2024-08-12 at 12 36 06 PM"
src="https://github.com/user-attachments/assets/7bc5b795-4056-444e-9dae-99812c36d939">

- Breadcrumbs with no type/category still say `generic`, before they
were rendering empty. Animation speed lowered (higher spring stiffness)

<img width="1133" alt="Screenshot 2024-08-12 at 12 35 55 PM"
src="https://github.com/user-attachments/assets/e314904d-42e9-4279-ab15-eb67db8360f8">
<img width="1089" alt="Screenshot 2024-08-12 at 12 35 25 PM"
src="https://github.com/user-attachments/assets/b0351023-16d0-4340-86cc-e5508c9594a5">

- Context section no longer renders title if empty

<img width="1143" alt="image"
src="https://github.com/user-attachments/assets/58d840ee-4d1f-482b-bcea-a079b8715d17">

- Suspect Root Cause and LLM sections fold
<img width="1208" alt="image"
src="https://github.com/user-attachments/assets/c897f71e-3410-469d-8dcb-cc90ff3f8be2">

Author: leeandher

static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx

@@ -105,6 +105,7 @@ export default function BreadcrumbsDataSection({
             }
             return true;
           },
+          transitionProps: {stiffness: 1000},
         }
       );
     },

static/app/components/events/breadcrumbs/utils.tsx

@@ -227,7 +227,7 @@ export function getEnhancedBreadcrumbs(event: Event): EnhancedCrumb[] {
 
 function getBreadcrumbTitle(crumb: RawCrumb) {
   if (crumb?.type === BreadcrumbType.DEFAULT) {
-    return crumb?.category;
+    return crumb?.category ?? BREADCRUMB_TITLE_PLACEHOLDER.toLocaleLowerCase();
   }
 
   switch (crumb?.category) {

static/app/components/events/contexts/contextDataSection.tsx

@@ -36,6 +36,10 @@ export default function ContextDataSection({
     )
   );
 
+  if (!cards.length) {
+    return null;
+  }
+
   return (
     <InterimSection
       key={'context'}

static/app/components/events/eventEntries.spec.tsx

@@ -54,7 +54,7 @@ describe('EventEntries', function () {
     );
 
     await waitFor(() => {
-      expect(screen.getAllByTestId(/event-section/)).toHaveLength(5); //  event tags + 3 entries + event grouping
+      expect(screen.getAllByTestId(/event-section/)).toHaveLength(4); //  event tags + 2 entries + event grouping
     });
 
     const sections = screen.getAllByTestId(/event-section/);

static/app/components/events/interfaces/llm-monitoring/llmMonitoringSection.tsx

@@ -1,7 +1,6 @@
 import Alert from 'sentry/components/alert';
 import {LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import {IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
@@ -15,6 +14,8 @@ import {
   TotalTokensUsedChart,
 } from 'sentry/views/insights/llmMonitoring/components/charts/llmMonitoringCharts';
 import {SpanIndexedField, type SpanIndexedResponse} from 'sentry/views/insights/types';
+import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
 interface Props {
   event: Event;
@@ -45,9 +46,9 @@ export default function LLMMonitoringSection({event}: Props) {
   );
 
   return (
-    <EventDataSection
+    <InterimSection
       title={t('LLM monitoring')}
-      type="llm-monitoring"
+      type={FoldSectionKey.LLM_MONITORING}
       help={t('Charts showing how many tokens are being used')}
       actions={actions}
     >
@@ -67,6 +68,6 @@ export default function LLMMonitoringSection({event}: Props) {
           </ModuleLayout.Half>
         </ModuleLayout.Layout>
       )}
-    </EventDataSection>
+    </InterimSection>
   );
 }

static/app/components/events/interfaces/message.tsx

@@ -59,11 +59,9 @@ export function Message({data, event}: Props) {
 
   return (
     <InterimSection title={t('Message')} type={FoldSectionKey.MESSAGE}>
-      {meta?.data?.formatted?.[''] ? (
-        <AnnotatedText value={messageData} meta={meta?.data?.formatted?.['']} />
-      ) : (
-        <pre className="plain">{messageData}</pre>
-      )}
+      <pre className="plain">
+        {<AnnotatedText value={messageData} meta={meta?.data?.formatted?.['']} />}
+      </pre>
       {renderParams(data.params, meta)}
     </InterimSection>
   );

static/app/components/events/interfaces/performance/anrRootCause.tsx

@@ -1,7 +1,6 @@
 import {Fragment, useContext, useEffect} from 'react';
 import styled from '@emotion/styled';
 
-import {EventDataSection} from 'sentry/components/events/eventDataSection';
 import {analyzeFramesForRootCause} from 'sentry/components/events/interfaces/analyzeFrames';
 import {StackTraceContent} from 'sentry/components/events/interfaces/crashContent/stackTrace';
 import NoStackTraceMessage from 'sentry/components/events/interfaces/noStackTraceMessage';
@@ -18,6 +17,8 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import useProjects from 'sentry/utils/useProjects';
+import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
 enum AnrRootCauseAllowlist {
   PERFORMANCE_FILE_IO_MAIN_THREAD_GROUP_TYPE = 1008,
@@ -113,9 +114,9 @@ export function AnrRootCause({event, organization}: Props) {
   }
 
   return (
-    <EventDataSection
+    <InterimSection
       title={t('Suspect Root Cause')}
-      type="suspect-root-cause"
+      type={FoldSectionKey.SUSPECT_ROOT_CAUSE}
       help={helpText}
     >
       {potentialAnrRootCause?.map(issue => {
@@ -149,7 +150,7 @@ export function AnrRootCause({event, organization}: Props) {
         );
       })}
       {organization.features.includes('anr-analyze-frames') && renderAnrCulprit()}
-    </EventDataSection>
+    </InterimSection>
   );
 }
 

static/app/components/globalDrawer/components.tsx

@@ -1,5 +1,6 @@
 import {createContext, forwardRef, Fragment, useContext} from 'react';
 import styled from '@emotion/styled';
+import type {AnimationProps} from 'framer-motion';
 
 import {Button} from 'sentry/components/button';
 import type {DrawerOptions} from 'sentry/components/globalDrawer';
@@ -27,10 +28,11 @@ interface DrawerPanelProps {
   children: React.ReactNode;
   headerContent: React.ReactNode;
   onClose: DrawerContentContextType['onClose'];
+  transitionProps?: AnimationProps['transition'];
 }
 
 export const DrawerPanel = forwardRef(function _DrawerPanel(
-  {ariaLabel, children, onClose}: DrawerPanelProps,
+  {ariaLabel, children, transitionProps, onClose}: DrawerPanelProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
@@ -40,6 +42,7 @@ export const DrawerPanel = forwardRef(function _DrawerPanel(
         slidePosition="right"
         collapsed={false}
         ref={ref}
+        transitionProps={transitionProps}
       >
         {/*
           This provider allows data passed to openDrawer to be accessed by drawer components.

static/app/components/globalDrawer/index.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import type {AnimationProps} from 'framer-motion';
 import {AnimatePresence} from 'framer-motion';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -46,6 +47,10 @@ export interface DrawerOptions {
    * other elements.
    */
   shouldCloseOnInteractOutside?: (interactedElement: Element) => boolean;
+  //
+  // Custom framer motion transition for the drawer
+  //
+  transitionProps?: AnimationProps['transition'];
 }
 
 interface DrawerRenderProps {
@@ -144,6 +149,7 @@ export function GlobalDrawer({children}) {
               onClose={handleClose}
               ref={panelRef}
               headerContent={currentDrawerConfig?.options?.headerContent ?? null}
+              transitionProps={currentDrawerConfig?.options?.transitionProps}
             >
               {renderedChild}
             </DrawerComponents.DrawerPanel>

static/app/components/slideOverPanel.tsx

@@ -3,7 +3,7 @@ import {forwardRef, useEffect} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
-import {motion} from 'framer-motion';
+import {type AnimationProps, motion} from 'framer-motion';
 
 import {space} from 'sentry/styles/space';
 
@@ -26,12 +26,20 @@ type SlideOverPanelProps = {
   ariaLabel?: string;
   onOpen?: () => void;
   slidePosition?: 'right' | 'bottom';
+  transitionProps?: AnimationProps['transition'];
 };
 
 export default forwardRef(SlideOverPanel);
 
 function SlideOverPanel(
-  {ariaLabel, collapsed, children, onOpen, slidePosition}: SlideOverPanelProps,
+  {
+    ariaLabel,
+    collapsed,
+    children,
+    onOpen,
+    slidePosition,
+    transitionProps = {},
+  }: SlideOverPanelProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
   useEffect(() => {
@@ -57,6 +65,7 @@ function SlideOverPanel(
         type: 'spring',
         stiffness: 500,
         damping: 50,
+        ...transitionProps,
       }}
       role="complementary"
       aria-hidden={collapsed}

static/app/views/issueDetails/streamline/foldSection.tsx

@@ -29,7 +29,7 @@ export const enum FoldSectionKey {
   EVIDENCE = 'evidence',
   MESSAGE = 'message',
 
-  // QuickTraceQuery?
+  SUSPECT_ROOT_CAUSE = 'suspect-root-cause',
 
   SPAN_EVIDENCE = 'span-evidence',
   HYDRATION_DIFF = 'hydration-diff',