ref(landing): Add new field renderer for unique users (#25630)

* ref(landing): Add new field renderer for unique users

This is some cleanup for performance landing to add a rendered for unique users instead of a custom condition in the vital detail table.
Refs VIS-427

static/app/utils/discover/fieldRenderers.tsx

@@ -46,10 +46,12 @@ import KeyTransactionField from './keyTransactionField';
 import {
   BarContainer,
   Container,
+  FlexContainer,
   NumberContainer,
   OverflowLink,
   StyledDateTime,
   StyledShortId,
+  UserIcon,
   VersionContainer,
 } from './styles';
 
@@ -192,6 +194,7 @@ type SpecialFields = {
   project: SpecialField;
   user: SpecialField;
   'user.display': SpecialField;
+  'count_unique(user)': SpecialField;
   'issue.id': SpecialField;
   'error.handled': SpecialField;
   issue: SpecialField;
@@ -331,6 +334,24 @@ const SPECIAL_FIELDS: SpecialFields = {
       return <Container>{emptyValue}</Container>;
     },
   },
+  'count_unique(user)': {
+    sortField: 'count_unique(user)',
+    renderFunc: data => {
+      const count = data.count_unique_user;
+      if (typeof count === 'number') {
+        return (
+          <FlexContainer>
+            <NumberContainer>
+              <Count value={count} />
+            </NumberContainer>
+            <UserIcon size="20" />
+          </FlexContainer>
+        );
+      }
+
+      return <Container>{emptyValue}</Container>;
+    },
+  },
   release: {
     sortField: 'release',
     renderFunc: data =>

static/app/utils/discover/styles.tsx

@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 import DateTime from 'app/components/dateTime';
 import Link from 'app/components/links/link';
 import ShortId from 'app/components/shortId';
+import {IconUser} from 'app/icons/iconUser';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
+import space from 'app/styles/space';
 
 /**
  * Styled components used to render discover result sets.
@@ -38,3 +40,13 @@ export const BarContainer = styled('div')`
   max-width: 80px;
   margin-left: auto;
 `;
+
+export const FlexContainer = styled('div')`
+  display: flex;
+  align-items: center;
+`;
+
+export const UserIcon = styled(IconUser)`
+  margin-left: ${space(1)};
+  color: ${p => p.theme.gray400};
+`;

static/app/views/performance/vitalDetail/table.tsx

@@ -8,9 +8,8 @@ import SortLink from 'app/components/gridEditable/sortLink';
 import Link from 'app/components/links/link';
 import Pagination from 'app/components/pagination';
 import Tag from 'app/components/tag';
-import {IconStar, IconUser} from 'app/icons';
+import {IconStar} from 'app/icons';
 import {t} from 'app/locale';
-import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import DiscoverQuery, {TableData, TableDataRow} from 'app/utils/discover/discoverQuery';
@@ -171,15 +170,6 @@ class Table extends React.Component<Props, State> {
       Actions.SHOW_LESS_THAN,
     ];
 
-    if (field === 'count_unique(user)') {
-      return (
-        <UniqueUserCell>
-          {rendered}
-          <StyledUserIcon size="20" />
-        </UniqueUserCell>
-      );
-    }
-
     if (field === 'transaction') {
       const projectID = getProjectID(dataRow, projects);
       const summaryView = eventView.clone();
@@ -417,11 +407,6 @@ class Table extends React.Component<Props, State> {
   }
 }
 
-const UniqueUserCell = styled('span')`
-  display: flex;
-  align-items: center;
-`;
-
 const UniqueTagCell = styled('div')`
   text-align: right;
 `;
@@ -453,9 +438,4 @@ const PoorTag = styled(Tag)`
   }
 `;
 
-const StyledUserIcon = styled(IconUser)`
-  margin-left: ${space(1)};
-  color: ${p => p.theme.gray400};
-`;
-
 export default Table;