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 ( ); }