diff --git a/static/app/components/events/contexts/contextCard.tsx b/static/app/components/events/contexts/contextCard.tsx
index 674b26bf9fd562..48890834a6f9d3 100644
--- a/static/app/components/events/contexts/contextCard.tsx
+++ b/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}
/>
);
diff --git a/static/app/components/events/highlights/editHighlightsModal.tsx b/static/app/components/events/highlights/editHighlightsModal.tsx
index c4451ced41cff1..03a53bd2565743 100644
--- a/static/app/components/events/highlights/editHighlightsModal.tsx
+++ b/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"
/>
diff --git a/static/app/components/keyValueData/card.stories.tsx b/static/app/components/keyValueData/card.stories.tsx
index 63347ee5894644..262d0bc8da6054 100644
--- a/static/app/components/keyValueData/card.stories.tsx
+++ b/static/app/components/keyValueData/card.stories.tsx
@@ -33,9 +33,13 @@ export default storyBook('KeyValueData', story => {
item.action.link
.
- displayRichValue
- Disable automatic links from{' '}
+ disableLink
- Disable automatic links from{' '}
item.action.link
+
+ disableFormattedData
- Disable structured data and forces
+ string/component
+
errors
- Errors to display at the end of the row
@@ -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: {
diff --git a/static/app/components/keyValueData/card.tsx b/static/app/components/keyValueData/card.tsx
index 54392987bfbb8c..34dc7d3e99e81d 100644
--- a/static/app/components/keyValueData/card.tsx
+++ b/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
+ ) : (
+
+ )
+ ) : (
{subject}}
- {!disableRichValue && defined(action?.link) ? (
+ {!disableLink && defined(action?.link) ? (
{dataComponent}
) : (
dataComponent
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
index d1ceec1f7db292..fc97bde056b391 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
+++ b/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;
sortAlphabetically?: boolean;
}) {
- const contentItems = items.map(item => ({item}));
+ const contentItems = items.map(item => ({item, ...itemProps}));
return (
);
}