ref(extra-data): Replace getMeta (proxy) with _meta object - (#37349)

static/app/components/events/eventEntries.tsx

@@ -15,7 +15,7 @@ import EventAttachments from 'sentry/components/events/eventAttachments';
 import EventCause from 'sentry/components/events/eventCause';
 import EventCauseEmpty from 'sentry/components/events/eventCauseEmpty';
 import EventDataSection from 'sentry/components/events/eventDataSection';
-import EventExtraData from 'sentry/components/events/eventExtraData/eventExtraData';
+import EventExtraData from 'sentry/components/events/eventExtraData';
 import EventSdk from 'sentry/components/events/eventSdk';
 import {EventTags} from 'sentry/components/events/eventTags';
 import EventGroupingInfo from 'sentry/components/events/groupingInfo';

static/app/components/events/eventExtraData/eventDataContent.tsx

@@ -1,19 +0,0 @@
-import ContextBlock from 'sentry/components/events/contexts/contextBlock';
-import {defined} from 'sentry/utils';
-
-import getEventExtraDataKnownData from './getEventExtraDataKnownData';
-
-type Props = {
-  raw: boolean;
-  data?: Record<string, any>;
-};
-
-const EventDataContent = ({data, raw}: Props) => {
-  if (!defined(data)) {
-    return null;
-  }
-
-  return <ContextBlock data={getEventExtraDataKnownData(data)} raw={raw} />;
-};
-
-export default EventDataContent;

static/app/components/events/eventExtraData/getEventExtraDataKnownData.tsx

@@ -1,26 +1,64 @@
-import {getMeta} from 'sentry/components/events/meta/metaProxy';
+import isObject from 'lodash/isObject';
+
 import {KeyValueListData} from 'sentry/types';
 
+import AnnotatedText from '../meta/annotatedText';
+
 import getEventExtraDataKnownDataDetails from './getEventExtraDataKnownDataDetails';
 import {EventExtraData, EventExtraDataType} from './types';
 
-function getEventExtraDataKnownData(data: EventExtraData): KeyValueListData {
+export function getEventExtraDataKnownData(
+  data: EventExtraData,
+  meta: Record<any, any> | undefined
+): KeyValueListData {
   const knownData: KeyValueListData = [];
 
-  const dataKeys = Object.keys(data);
-  for (const key of dataKeys) {
-    const knownDataDetails = getEventExtraDataKnownDataDetails(
+  for (const key of Object.keys(data)) {
+    const {subject, value} = getEventExtraDataKnownDataDetails(
       data,
       key as EventExtraDataType
     );
 
+    if (Array.isArray(value)) {
+      knownData.push({
+        key,
+        subject,
+        value: value.map((v, index) =>
+          meta?.[key]?.[index]?.[''] ? (
+            <AnnotatedText key={index} value={v} meta={meta?.[key]?.[index]?.['']} />
+          ) : (
+            v
+          )
+        ),
+      });
+      continue;
+    }
+
+    if (isObject(value)) {
+      knownData.push({
+        key,
+        subject,
+        value: Object.keys(value).map((v, index) =>
+          meta?.[key]?.[index]?.[''] ? (
+            <AnnotatedText
+              key={index}
+              value={value[v]}
+              meta={meta?.[key]?.[index]?.['']}
+            />
+          ) : (
+            value[v]
+          )
+        ),
+      });
+    }
+
     knownData.push({
       key,
-      ...knownDataDetails,
-      meta: getMeta(data, key),
+      subject,
+      value,
+      meta: meta?.[key]?.[''],
     });
   }
+
   return knownData;
 }
-
-export default getEventExtraDataKnownData;

static/app/components/events/eventExtraData/eventExtraData.tsx → static/app/components/events/eventExtraData/index.tsx

@@ -1,10 +1,12 @@
 import {memo, useState} from 'react';
 
+import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 import EventDataSection from 'sentry/components/events/eventDataSection';
 import {t} from 'sentry/locale';
 import {Event} from 'sentry/types/event';
+import {defined} from 'sentry/utils';
 
-import EventDataContent from './eventDataContent';
+import {getEventExtraDataKnownData} from './getEventExtraDataKnownData';
 
 type Props = {
   event: Event;
@@ -20,7 +22,12 @@ const EventExtraData = memo(
         toggleRaw={() => setRaw(!raw)}
         raw={raw}
       >
-        <EventDataContent raw={raw} data={event.context} />
+        {!defined(event.context) ? null : (
+          <ContextBlock
+            data={getEventExtraDataKnownData(event.context, event._meta?.context)}
+            raw={raw}
+          />
+        )}
       </EventDataSection>
     );
   },

tests/js/spec/components/events/eventExtraData.spec.tsx

@@ -0,0 +1,172 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import EventExtraData from 'sentry/components/events/eventExtraData';
+
+describe('EventExtraData', function () {
+  it('display redacted data', async function () {
+    const event = {
+      ...TestStubs.Event(),
+      context: {
+        'sys.argv': ['', '', '', '', '', '', '', '', '', ''],
+      },
+      _meta: {
+        context: {
+          'sys.argv': {
+            '0': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 49,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '1': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 17,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '2': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 12,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '3': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 8,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '4': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 30,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '5': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 8,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '6': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 18,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '7': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 8,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '8': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 26,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '9': {
+              '': {
+                rem: [['project:3', 's', 0, 0]],
+                len: 8,
+                chunks: [
+                  {
+                    type: 'redaction',
+                    text: '',
+                    rule_id: 'project:3',
+                    remark: 's',
+                  },
+                ],
+              },
+            },
+            '': {
+              len: 14,
+            },
+          },
+        },
+      },
+    };
+    render(<EventExtraData event={event} />);
+
+    expect(screen.getAllByText(/redacted/)).toHaveLength(10);
+
+    userEvent.hover(screen.getAllByText(/redacted/)[0]);
+
+    expect(
+      await screen.findByText('Replaced because of PII rule "project:3"')
+    ).toBeInTheDocument(); // tooltip description
+  });
+});