fix(context): Address a few small context bugs (#72013)

Depends on #72008 to avoid merge
conflicts.

Fixes:
- Empty metadata no longer annotates text. E.g. context with key
`constructor` would return a meta of `{}` because `Object.constructor`
always exists. Now it checks if that meta object is empty, rather than
if it exists.
- Custom context is no longer Title-Cased or Start Cased (to retain
exactly what users send)
- Unknown browsers from showing a (?) icon in context cards
- Adds title to icons for legibility of smaller icons



![image](https://github.com/getsentry/sentry/assets/35509934/b0c35acc-168b-421e-97b9-c773e7528035)


![image](https://github.com/getsentry/sentry/assets/35509934/2b1b24f9-91cd-4479-9eb3-4e31746afe21)

**todo**
- [x] Fix any failing tests
- [x] Add a fix for icon sizing (e.g. samsung, ios devices)

Author: leeandher

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

@@ -1,11 +1,11 @@
-import startCase from 'lodash/startCase';
 import {EventFixture} from 'sentry-fixture/event';
 import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import ContextCard from 'sentry/components/events/contexts/contextCard';
+import * as utils from 'sentry/components/events/contexts/utils';
 
 describe('ContextCard', function () {
   const group = GroupFixture();
@@ -42,7 +42,7 @@ describe('ContextCard', function () {
       />
     );
 
-    expect(screen.getByText(startCase(alias))).toBeInTheDocument();
+    expect(screen.getByText(alias)).toBeInTheDocument();
     Object.entries(simpleContext).forEach(([key, value]) => {
       expect(screen.getByText(key)).toBeInTheDocument();
       expect(screen.getByText(value)).toBeInTheDocument();
@@ -57,10 +57,11 @@ describe('ContextCard', function () {
 
   it('renders with icons if able', function () {
     const event = EventFixture();
+    const iconSpy = jest.spyOn(utils, 'getContextIcon');
 
     const browserContext = {
       type: 'browser',
-      name: 'Firefox',
+      name: 'firefox',
       version: 'Infinity',
     };
     const browserCard = render(
@@ -73,7 +74,8 @@ describe('ContextCard', function () {
         project={project}
       />
     );
-    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(iconSpy.mock.results[0].value.props.name).toBe('firefox');
+    iconSpy.mockReset();
     browserCard.unmount();
 
     const unknownContext = {
@@ -91,7 +93,7 @@ describe('ContextCard', function () {
         project={project}
       />
     );
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    expect(iconSpy.mock.results[0].value).toBeUndefined();
   });
 
   it('renders the annotated text and errors', function () {

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

@@ -138,18 +138,24 @@ function getLogoImage(name: string) {
 
 type Props = {
   name: string;
+  hideUnknown?: boolean;
   size?: IconSize;
 };
 
-function ContextIcon({name, size: providedSize = 'xl'}: Props) {
+function ContextIcon({name, size: providedSize = 'xl', hideUnknown = false}: Props) {
   const theme = useTheme();
   const size = theme.iconSizes[providedSize];
 
   // Apply darkmode CSS to icon when in darkmode
   const isDarkmode = useLegacyStore(ConfigStore).theme === 'dark';
   const extraCass = isDarkmode && INVERT_IN_DARKMODE.includes(name) ? darkCss : null;
 
-  return <img height={size} width={size} css={extraCass} src={getLogoImage(name)} />;
+  const imageName = getLogoImage(name);
+  if (hideUnknown && imageName === logoUnknown) {
+    return null;
+  }
+
+  return <img height={size} width={size} css={extraCass} src={imageName} />;
 }
 
 export default ContextIcon;

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

@@ -47,7 +47,7 @@ describe('operating system event context', function () {
       },
     });
 
-    expect(screen.getByText('Raw Description')).toBeInTheDocument(); // subject
+    expect(screen.getByText('raw_description')).toBeInTheDocument(); // subject
     await userEvent.hover(screen.getByText(/redacted/));
     expect(
       await screen.findByText(

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

@@ -24,8 +24,8 @@ describe('contexts utils', function () {
       const unknownData = getUnknownData({allData, knownKeys});
 
       expect(unknownData).toEqual([
-        {key: 'username', value: 'a', subject: 'Username', meta: undefined},
-        {key: 'count', value: 1000, subject: 'Count', meta: undefined},
+        {key: 'username', value: 'a', subject: 'username', meta: undefined},
+        {key: 'count', value: 1000, subject: 'count', meta: undefined},
       ]);
     });
   });

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

@@ -1,6 +1,5 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
-import startCase from 'lodash/startCase';
 import moment from 'moment-timezone';
 
 import UserAvatar from 'sentry/components/avatar/userAvatar';
@@ -19,7 +18,6 @@ import type {
   Project,
 } from 'sentry/types';
 import {defined} from 'sentry/utils';
-import {toTitleCase} from 'sentry/utils/string/toTitleCase';
 
 import {AppEventContext, getKnownAppContextData, getUnknownAppContextData} from './app';
 import {
@@ -292,7 +290,7 @@ export function getUnknownData({
     .map(([key, value]) => ({
       key,
       value,
-      subject: startCase(key),
+      subject: key,
       meta: meta?.[key]?.[''],
     }));
 }
@@ -311,7 +309,7 @@ export function getContextTitle({
   }
 
   if (!defined(type)) {
-    return toTitleCase(alias);
+    return alias;
   }
 
   switch (type) {
@@ -346,10 +344,10 @@ export function getContextTitle({
         case 'laravel':
           return t('Laravel Context');
         default:
-          return toTitleCase(alias);
+          return alias;
       }
     default:
-      return toTitleCase(type);
+      return type;
   }
 }
 
@@ -406,7 +404,7 @@ export function getContextIcon({
   if (iconName.length === 0) {
     return null;
   }
-  return <ContextIcon name={iconName} size="sm" />;
+  return <ContextIcon name={iconName} size="sm" hideUnknown />;
 }
 
 export function getFormattedContextData({

static/app/components/events/meta/annotatedText/valueElement.tsx

@@ -1,6 +1,7 @@
 import {Fragment, isValidElement} from 'react';
 
 import {t} from 'sentry/locale';
+import {isEmptyObject} from 'sentry/utils/object/isEmptyObject';
 
 import {Redaction} from './redaction';
 
@@ -14,7 +15,7 @@ type Props = {
 // first place. It's much more likely that `withMeta` is buggy or improperly
 // used than that this component has a bug.
 export function ValueElement({value, meta}: Props) {
-  if (!!value && meta) {
+  if (!!value && !isEmptyObject(meta)) {
     return <Redaction>{value}</Redaction>;
   }