fix(traceview): Allow raw text on additional data when set (#72038)

Cards would previously force structured data which prevented this toggle
from doing anything. This fixes that issue in the trace drawer.


https://github.com/getsentry/sentry/assets/35509934/2d648c15-a690-418c-be4d-444cd419e334

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

@@ -25,8 +25,8 @@ interface ContextCardProps {
 interface ContextCardContentConfig {
   // Omit error styling from being displayed, even if context is invalid
   disableErrors?: boolean;
-  // Displays tag value as plain text, rather than a hyperlink if applicable
-  disableRichValue?: boolean;
+  // Displays value as plain text, rather than a hyperlink if applicable
+  disableLink?: boolean;
   // Includes the Context Type as a prefix to the key. Useful if displaying a single Context key
   // apart from the rest of that Context. E.g. 'Email' -> 'User: Email'
   includeAliasInSubject?: boolean;
@@ -60,7 +60,7 @@ export function ContextCardContent({
       item={{...item, subject: contextSubject}}
       meta={contextMeta}
       errors={config?.disableErrors ? [] : contextErrors}
-      disableRichValue={config?.disableRichValue ?? false}
+      disableLink={config?.disableLink ?? false}
       {...props}
     />
   );

static/app/components/events/highlights/editHighlightsModal.tsx

@@ -81,7 +81,7 @@ function EditPreviewHighlightSection({
             config={{
               includeAliasInSubject: true,
               disableErrors: true,
-              disableRichValue: true,
+              disableLink: true,
             }}
             data-test-id="highlights-preview-ctx"
           />

static/app/components/keyValueData/card.stories.tsx

@@ -33,9 +33,13 @@ export default storyBook('KeyValueData', story => {
           <code>item.action.link</code>.
         </li>
         <li>
-          <code>displayRichValue</code> - Disable automatic links from{' '}
+          <code>disableLink</code> - Disable automatic links from{' '}
           <code>item.action.link</code>
         </li>
+        <li>
+          <code>disableFormattedData</code> - Disable structured data and forces
+          string/component
+        </li>
         <li>
           <code>errors</code> - Errors to display at the end of the row
         </li>
@@ -146,7 +150,6 @@ const contentItems: KeyValueData.ContentProps[] = [
       value: 20481027,
     },
   },
-
   {
     item: {
       key: 'array',
@@ -154,6 +157,21 @@ const contentItems: KeyValueData.ContentProps[] = [
       value: ['entry 0', 1, null, ['3'], {value: 4}] as any,
     },
   },
+  {
+    item: {
+      key: 'dict',
+      subject: 'dict',
+      value: {primary: 'alpha', secondary: 2} as any,
+    },
+  },
+  {
+    item: {
+      key: 'disabled-formatted-dict',
+      subject: 'raw dict',
+      value: {primary: 'alpha', secondary: 2} as any,
+    },
+    disableFormattedData: true,
+  },
   {
     item: {
       key: 'null',
@@ -194,7 +212,7 @@ const contentItems: KeyValueData.ContentProps[] = [
         link: 'https://sentry.io',
       },
     },
-    disableRichValue: true,
+    disableLink: true,
   },
   {
     item: {

static/app/components/keyValueData/card.tsx

@@ -1,7 +1,9 @@
 import {Children, isValidElement, type ReactNode, useRef, useState} from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 
 import {useIssueDetailsColumnCount} from 'sentry/components/events/eventTags/util';
+import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
 import {AnnotatedTextErrors} from 'sentry/components/events/meta/annotatedText/annotatedTextErrors';
 import Link from 'sentry/components/links/link';
 import Panel from 'sentry/components/panels/panel';
@@ -20,9 +22,13 @@ export interface ContentProps {
    */
   item: KeyValueListDataItem;
   /**
-   * Displays tag value as plain text, rather than a hyperlink if applicable.
+   * If enabled, renders raw value instead of formatted structured data
    */
-  disableRichValue?: boolean;
+  disableFormattedData?: boolean;
+  /**
+   * If enabled, avoids rendering links, even if provided via `item.action.link`.
+   */
+  disableLink?: boolean;
   /**
    * Errors pertaining to content item
    */
@@ -37,14 +43,21 @@ export function Content({
   item,
   meta,
   errors = [],
-  disableRichValue = false,
+  disableLink = false,
+  disableFormattedData = false,
   ...props
 }: ContentProps) {
   const {subject, subjectNode, value: contextValue, action = {}} = item;
 
   const hasErrors = errors.length > 0;
 
-  const dataComponent = (
+  const dataComponent = disableFormattedData ? (
+    React.isValidElement(contextValue) ? (
+      contextValue
+    ) : (
+      <AnnotatedText value={contextValue as string} meta={meta} />
+    )
+  ) : (
     <StructuredData
       value={contextValue}
       depth={0}
@@ -60,7 +73,7 @@ export function Content({
       {subjectNode !== undefined ? subjectNode : <Subject>{subject}</Subject>}
       <ValueSection hasErrors={hasErrors} hasEmptySubject={subjectNode === null}>
         <ValueWrapper hasErrors={hasErrors}>
-          {!disableRichValue && defined(action?.link) ? (
+          {!disableLink && defined(action?.link) ? (
             <ValueLink to={action.link}>{dataComponent}</ValueLink>
           ) : (
             dataComponent

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -523,13 +523,15 @@ function SectionCard({
   title,
   disableTruncate,
   sortAlphabetically = false,
+  itemProps = {},
 }: {
   items: SectionCardKeyValueList;
   title: React.ReactNode;
   disableTruncate?: boolean;
+  itemProps?: Partial<KeyValueData.ContentProps>;
   sortAlphabetically?: boolean;
 }) {
-  const contentItems = items.map(item => ({item}));
+  const contentItems = items.map(item => ({item, ...itemProps}));
 
   return (
     <KeyValueData.Card

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/additionalData.tsx

@@ -96,6 +96,7 @@ export function AdditionalData({event}: {event: EventTransaction}) {
       items={formattedDataItems}
       title={title}
       sortAlphabetically
+      itemProps={{disableFormattedData: raw}}
     />
   );
 }