ref(user-context): Replace getMeta (proxy) with _meta object - (#36961)

static/app/components/contextData/index.tsx

@@ -25,10 +25,6 @@ type Props = React.HTMLAttributes<HTMLPreElement> & {
   withAnnotatedText?: boolean;
 };
 
-function getValueWithAnnotatedText(v: Value, meta?: Meta) {
-  return <AnnotatedText value={v} meta={meta} />;
-}
-
 function walk({
   depth,
   value,
@@ -49,13 +45,20 @@ function walk({
   const children: React.ReactNode[] = [];
 
   if (value === null) {
-    return <span className="val-null">{jsonConsts ? 'null' : 'None'}</span>;
+    return (
+      <span className="val-null">
+        <AnnotatedText value={jsonConsts ? 'null' : 'None'} meta={meta} />
+      </span>
+    );
   }
 
   if (value === true || value === false) {
     return (
       <span className="val-bool">
-        {jsonConsts ? (value ? 'true' : 'false') : value ? 'True' : 'False'}
+        <AnnotatedText
+          value={jsonConsts ? (value ? 'true' : 'false') : value ? 'True' : 'False'}
+          meta={meta}
+        />
       </span>
     );
   }
@@ -63,9 +66,11 @@ function walk({
   if (isString(value)) {
     const valueInfo = analyzeStringForRepr(value);
 
-    const valueToBeReturned = withAnnotatedText
-      ? getValueWithAnnotatedText(valueInfo.repr, meta)
-      : valueInfo.repr;
+    const valueToBeReturned = withAnnotatedText ? (
+      <AnnotatedText value={valueInfo.repr} meta={meta} />
+    ) : (
+      valueInfo.repr
+    );
 
     const out = [
       <span
@@ -93,7 +98,7 @@ function walk({
 
   if (isNumber(value)) {
     const valueToBeReturned =
-      withAnnotatedText && meta ? getValueWithAnnotatedText(value, meta) : value;
+      withAnnotatedText && meta ? <AnnotatedText value={value} meta={meta} /> : value;
     return <span>{valueToBeReturned}</span>;
   }
 

static/app/components/events/contextSummary/contextSummaryUser.tsx

@@ -28,7 +28,7 @@ type UserDetails = {
   value?: string;
 };
 
-const ContextSummaryUser = ({data}: Props) => {
+function ContextSummaryUser({data}: Props) {
   const user = removeFilterMaskedEntries(data);
 
   if (Object.keys(user).length === 0) {
@@ -119,7 +119,7 @@ const ContextSummaryUser = ({data}: Props) => {
           renderUserDetails('username')}
     </Item>
   );
-};
+}
 
 export default ContextSummaryUser;
 

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

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 import {Event} from 'sentry/types/event';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getAppKnownData from './getAppKnownData';
 import {AppData, AppKnownDataType} from './types';
@@ -25,13 +25,18 @@ const appKnownDataValues = [
 
 const appIgnoredDataValues = [];
 
-const App = ({data, event}: Props) => (
-  <Fragment>
-    <ContextBlock data={getAppKnownData(event, data, appKnownDataValues)} />
-    <ContextBlock
-      data={getUnknownData(data, [...appKnownDataValues, ...appIgnoredDataValues])}
-    />
-  </Fragment>
-);
+function App({data, event}: Props) {
+  return (
+    <Fragment>
+      <ContextBlock data={getAppKnownData(event, data, appKnownDataValues)} />
+      <ContextBlock
+        data={getUnknownData({
+          allData: data,
+          knownKeys: [...appKnownDataValues, ...appIgnoredDataValues],
+        })}
+      />
+    </Fragment>
+  );
+}
 
 export default App;

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

@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getBrowserKnownData from './getBrowserKnownData';
 import {BrowserKnownData, BrowserKnownDataType} from './types';
@@ -13,11 +13,15 @@ type Props = {
 
 const browserKnownDataValues = [BrowserKnownDataType.NAME, BrowserKnownDataType.VERSION];
 
-const Browser = ({data}: Props) => (
-  <Fragment>
-    <ContextBlock data={getBrowserKnownData(data, browserKnownDataValues)} />
-    <ContextBlock data={getUnknownData(data, [...browserKnownDataValues])} />
-  </Fragment>
-);
+function Browser({data}: Props) {
+  return (
+    <Fragment>
+      <ContextBlock data={getBrowserKnownData(data, browserKnownDataValues)} />
+      <ContextBlock
+        data={getUnknownData({allData: data, knownKeys: [...browserKnownDataValues]})}
+      />
+    </Fragment>
+  );
+}
 
 export default Browser;

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

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 import {Event} from 'sentry/types/event';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getDeviceKnownData from './getDeviceKnownData';
 import {DeviceData, DeviceKnownDataType} from './types';
@@ -65,10 +65,10 @@ function Device({data, event}: Props) {
         data={getDeviceKnownData(event, inferredData, deviceKnownDataValues)}
       />
       <ContextBlock
-        data={getUnknownData(inferredData, [
-          ...deviceKnownDataValues,
-          ...deviceIgnoredDataValues,
-        ])}
+        data={getUnknownData({
+          allData: inferredData,
+          knownKeys: [...deviceKnownDataValues, ...deviceIgnoredDataValues],
+        })}
       />
     </Fragment>
   );

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

@@ -1,12 +1,14 @@
 import startCase from 'lodash/startCase';
 
-import {getMeta} from 'sentry/components/events/meta/metaProxy';
-import {KeyValueListData} from 'sentry/types';
+import {Event, KeyValueListData} from 'sentry/types';
 
-function getUnknownData(
-  allData: Record<string, any>,
-  knownKeys: string[]
-): KeyValueListData {
+type Props = {
+  allData: Record<string, any>;
+  knownKeys: string[];
+  meta?: NonNullable<Event['_meta']>[keyof Event['_meta']];
+};
+
+export function getUnknownData({allData, knownKeys, meta}: Props): KeyValueListData {
   return Object.entries(allData)
     .filter(([key]) => key !== 'type' && key !== 'title')
     .filter(([key]) => !knownKeys.includes(key))
@@ -14,8 +16,6 @@ function getUnknownData(
       key,
       value,
       subject: startCase(key),
-      meta: getMeta(allData, key),
+      meta: meta?.[key]?.[''],
     }));
 }
-
-export default getUnknownData;

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

@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getOperatingSystemKnownData from './getGPUKnownData';
 import {GPUData, GPUKnownDataType} from './types';
@@ -23,10 +23,11 @@ const gpuKnownDataValues = [
 
 const gpuIgnoredDataValues = [];
 
-const GPU = ({data}: Props) => {
+function GPU({data}: Props) {
   if (data.vendor_id > 0) {
     gpuKnownDataValues.unshift[GPUKnownDataType.VENDOR_ID];
   }
+
   if (data.id > 0) {
     gpuKnownDataValues.unshift[GPUKnownDataType.ID];
   }
@@ -35,10 +36,13 @@ const GPU = ({data}: Props) => {
     <Fragment>
       <ContextBlock data={getOperatingSystemKnownData(data, gpuKnownDataValues)} />
       <ContextBlock
-        data={getUnknownData(data, [...gpuKnownDataValues, ...gpuIgnoredDataValues])}
+        data={getUnknownData({
+          allData: data,
+          knownKeys: [...gpuKnownDataValues, ...gpuIgnoredDataValues],
+        })}
       />
     </Fragment>
   );
-};
+}
 
 export default GPU;

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

@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getOperatingSystemKnownData from './getOperatingSystemKnownData';
 import {
@@ -24,18 +24,23 @@ const operatingSystemKnownDataValues = [
 
 const operatingSystemIgnoredDataValues = [OperatingSystemIgnoredDataType.BUILD];
 
-const OperatingSystem = ({data}: Props) => (
-  <Fragment>
-    <ContextBlock
-      data={getOperatingSystemKnownData(data, operatingSystemKnownDataValues)}
-    />
-    <ContextBlock
-      data={getUnknownData(data, [
-        ...operatingSystemKnownDataValues,
-        ...operatingSystemIgnoredDataValues,
-      ])}
-    />
-  </Fragment>
-);
+function OperatingSystem({data}: Props) {
+  return (
+    <Fragment>
+      <ContextBlock
+        data={getOperatingSystemKnownData(data, operatingSystemKnownDataValues)}
+      />
+      <ContextBlock
+        data={getUnknownData({
+          allData: data,
+          knownKeys: [
+            ...operatingSystemKnownDataValues,
+            ...operatingSystemIgnoredDataValues,
+          ],
+        })}
+      />
+    </Fragment>
+  );
+}
 
 export default OperatingSystem;

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

@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getRuntimeKnownData from './getRuntimeKnownData';
 import {RuntimeData, RuntimeIgnoredDataType, RuntimeKnownDataType} from './types';
@@ -15,18 +15,18 @@ const runtimeKnownDataValues = [RuntimeKnownDataType.NAME, RuntimeKnownDataType.
 
 const runtimeIgnoredDataValues = [RuntimeIgnoredDataType.BUILD];
 
-const Runtime = ({data}: Props) => {
+function Runtime({data}: Props) {
   return (
     <Fragment>
       <ContextBlock data={getRuntimeKnownData(data, runtimeKnownDataValues)} />
       <ContextBlock
-        data={getUnknownData(data, [
-          ...runtimeKnownDataValues,
-          ...runtimeIgnoredDataValues,
-        ])}
+        data={getUnknownData({
+          allData: data,
+          knownKeys: [...runtimeKnownDataValues, ...runtimeIgnoredDataValues],
+        })}
       />
     </Fragment>
   );
-};
+}
 
 export default Runtime;

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

@@ -4,7 +4,7 @@ import {Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import useOrganization from 'sentry/utils/useOrganization';
 
-import getUnknownData from '../getUnknownData';
+import {getUnknownData} from '../getUnknownData';
 
 import getTraceKnownData from './getTraceKnownData';
 import {TraceKnownData, TraceKnownDataType} from './types';
@@ -38,7 +38,10 @@ function Trace({event, data}: Props) {
         isContextData
       />
       <KeyValueList
-        data={getUnknownData(data, [...traceKnownDataValues, ...traceIgnoredDataValues])}
+        data={getUnknownData({
+          allData: data,
+          knownKeys: [...traceKnownDataValues, ...traceIgnoredDataValues],
+        })}
         isSorted={false}
         raw={false}
         isContextData