fix(ui): added context device model and model_id (#18224)

Author: priscilawebdev

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

@@ -12,7 +12,6 @@ type Props = {
 const deviceKnownDataValues = [
   DeviceKnownDataType.NAME,
   DeviceKnownDataType.FAMILY,
-  DeviceKnownDataType.RENDERED_MODEL,
   DeviceKnownDataType.CPU_DESCRIPTION,
   DeviceKnownDataType.ARCH,
   DeviceKnownDataType.BATTERY_LEVEL,
@@ -38,6 +37,7 @@ const deviceKnownDataValues = [
   DeviceKnownDataType.SCREEN_HEIGHT_PIXELS,
   DeviceKnownDataType.SCREEN_RESOLUTION,
   DeviceKnownDataType.SCREEN_WIDTH_PIXELS,
+  DeviceKnownDataType.MODEL,
 ];
 
 const Device = ({data}: Props) => (

src/sentry/static/sentry/app/components/events/contexts/device/getDeviceKnownDataDetails.tsx

@@ -25,13 +25,13 @@ function getDeviceKnownDataDetails(data: DeviceData, type: DeviceKnownDataType):
         subject: t('Family'),
         value: data.family,
       };
-    case DeviceKnownDataType.RENDERED_MODEL:
+    case DeviceKnownDataType.MODEL:
       return {
         subject: t('Model'),
         value:
           typeof data.model === 'string' ? (
             <DeviceName
-              value={`${data.model} ${data.model_id ? `(${data.model_id})` : ''}`}
+              value={`${data.model} ${data?.model_id ? `(${data.model_id})` : ''}`}
             />
           ) : (
             undefined

src/sentry/static/sentry/app/components/events/contexts/device/types.tsx

@@ -2,6 +2,8 @@ export enum DeviceKnownDataType {
   NAME = 'name',
   FAMILY = 'family',
   RENDERED_MODEL = 'renderedModel',
+  MODEL = 'model',
+  MODEL_ID = 'model_id',
   CPU_DESCRIPTION = 'cpu_description',
   ARCH = 'arch',
   BATTERY_LEVEL = 'battery_level',

src/sentry/static/sentry/app/components/events/interfaces/keyValueList/keyValueListV2.tsx

@@ -43,7 +43,9 @@ const KeyValueList = ({
         {getData().map(
           ({key, subject, value = null, meta, subjectIcon, subjectDataTestId}) => {
             const dataValue =
-              typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
+              typeof value === 'object' && !React.isValidElement(value)
+                ? JSON.stringify(value, null, 2)
+                : value;
             return (
               <tr key={key}>
                 <TableSubject className="key" wide={longKeys}>

src/sentry/static/sentry/app/components/events/meta/annotatedText.jsx

@@ -114,7 +114,7 @@ const AnnotatedText = ({value, chunks, errors, remarks, ...props}) => (
 );
 
 AnnotatedText.propTypes = {
-  value: PropTypes.string,
+  value: PropTypes.node,
   chunks: PropTypes.array,
   errors: PropTypes.array,
   remarks: PropTypes.array,