fix(events-v2) Add additional user attributes to the user column

src/sentry/static/sentry/app/components/idBadge/userBadge.jsx

@@ -6,6 +6,7 @@ import Link from 'app/components/links/link';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import SentryTypes from 'app/sentryTypes';
+import {omit} from 'lodash';
 
 const UserBadge = ({
   displayName,
@@ -31,6 +32,7 @@ const UserBadge = ({
           {displayName ||
             userFromPropsOrMember.name ||
             userFromPropsOrMember.email ||
+            userFromPropsOrMember.username ||
             userFromPropsOrMember.ipAddress ||
             /**
              * Because this can be used to render EventUser models, or User *interface*
@@ -87,9 +89,10 @@ const StyledEmail = styled('div')`
   ${overflowEllipsis};
 `;
 
-const StyledName = styled(({useLink, hideEmail, to, ...props}) =>
-  useLink ? <Link to={to} {...props} /> : <span {...props} />
-)`
+const StyledName = styled(({useLink, to, ...props}) => {
+  const forwardProps = omit(props, 'hideEmail');
+  return useLink ? <Link to={to} {...forwardProps} /> : <span {...forwardProps} />;
+})`
   font-weight: ${p => (p.hideEmail ? 'inherit' : 'bold')};
   line-height: 1.15em;
   ${overflowEllipsis};

src/sentry/static/sentry/app/views/organizationEventsV2/data.jsx

@@ -122,16 +122,20 @@ export const SPECIAL_FIELDS = {
     },
   },
   user: {
-    fields: ['user', 'user.name', 'user.email', 'user.ip'],
+    fields: ['user', 'user.name', 'user.username', 'user.email', 'user.ip', 'user.id'],
     sortField: 'user',
     renderFunc: (data, {organization, location}) => {
       const userObj = {
+        id: data['user.id'],
         name: data['user.name'],
         email: data['user.email'],
-        ip: data['user.ip'],
+        username: data['user.username'],
+        ip_address: data['user.ip'],
       };
 
-      const badge = <UserBadge user={userObj} hideEmail={true} avatarSize={16} />;
+      const badge = (
+        <UserBadge useLink={false} user={userObj} hideEmail={true} avatarSize={16} />
+      );
 
       if (!data.user) {
         return <Container>{badge}</Container>;

tests/js/spec/components/idBadge/userBadge.spec.jsx

@@ -38,6 +38,31 @@ describe('UserBadge', function() {
     expect(wrapper.find('StyledEmail').prop('children')).toBe('Other Display Email');
   });
 
+  it('can coalesce using username', function() {
+    const username = TestStubs.User({
+      name: null,
+      email: null,
+      username: 'the-batman',
+    });
+    const wrapper = shallow(<UserBadge user={username} />);
+
+    expect(wrapper.find('StyledName').prop('children')).toBe(username.username);
+    expect(wrapper.find('StyledEmail').prop('children')).toBe(null);
+  });
+
+  it('can coalesce using ipaddress', function() {
+    const ipUser = TestStubs.User({
+      name: null,
+      email: null,
+      username: null,
+      ipAddress: '127.0.0.1',
+    });
+    const wrapper = shallow(<UserBadge user={ipUser} />);
+
+    expect(wrapper.find('StyledName').prop('children')).toBe(ipUser.ipAddress);
+    expect(wrapper.find('StyledEmail').prop('children')).toBe(null);
+  });
+
   it('does not use a link for member name', function() {
     const wrapper = mount(<UserBadge user={user} useLink={false} />);
 

tests/js/spec/views/organizationEventsV2/utils.spec.jsx

@@ -35,8 +35,10 @@ describe('getQuery()', function() {
       'project.name',
       'user',
       'user.name',
+      'user.username',
       'user.email',
       'user.ip',
+      'user.id',
       'issue.id',
     ]);
   });