feat(tags): Use frontend for device name mapping

We have a device name map on the backend and the frontend. The frontend is used in more ways than tags, so I think consolidating this map into just the frontend makes sense.
getsentry · Sep 20, 2024 · 010e091 · 010e091
1 parent a3de4d5
commit 010e091
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/static/app/components/group/tagFacets/index.tsx b/static/app/components/group/tagFacets/index.tsx
@@ -5,6 +5,7 @@ import type {LocationDescriptor} from 'history';
 import keyBy from 'lodash/keyBy';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
+import {deviceNameMapper} from 'sentry/components/deviceName';
 import LoadingError from 'sentry/components/loadingError';
 import Placeholder from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
@@ -19,7 +20,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {
   type GroupTag,
-  useGroupTagsReadable,
+  useGroupFacetTags,
 } from 'sentry/views/issueDetails/groupTags/useGroupTags';
 
 import TagFacetsDistributionMeter from './tagFacetsDistributionMeter';
@@ -65,7 +66,7 @@ export function TAGS_FORMATTER(tagsData: Record<string, GroupTag>) {
         topValues: tagsData[tagKey].topValues.map(topValue => {
           return {
             ...topValue,
-            name: topValue.readable ?? topValue.name,
+            name: deviceNameMapper(topValue.name) ?? topValue.name,
           };
         }),
       };
@@ -94,7 +95,7 @@ export default function TagFacets({
 }: Props) {
   const organization = useOrganization();
 
-  const {isPending, isError, data, refetch} = useGroupTagsReadable({
+  const {isPending, isError, data, refetch} = useGroupFacetTags({
     groupId,
     environment: environments,
   });

diff --git a/static/app/views/issueDetails/groupTags/useGroupTags.tsx b/static/app/views/issueDetails/groupTags/useGroupTags.tsx
@@ -20,11 +20,6 @@ export interface GroupTag {
      * Example: user -> `'user.id:\"1\"'`
      */
     query?: string;
-    /**
-     * Available if `readable` query param is true
-     * @deprecated - Use the frontend to get readable device names
-     */
-    readable?: string;
   }>;
   totalValues: number;
 }
@@ -37,11 +32,6 @@ interface FetchIssueTagsParameters {
   groupId: string | undefined;
   orgSlug: string;
   limit?: number;
-  /**
-   * Readable formats mobile device names
-   * TODO(scott): Can we do this in the frontend instead
-   */
-  readable?: boolean;
 }
 
 type GroupTagUseQueryOptions = Partial<UseApiQueryOptions<GroupTag[]>>;
@@ -50,11 +40,10 @@ const makeGroupTagsQueryKey = ({
   groupId,
   orgSlug,
   environment,
-  readable,
   limit,
 }: FetchIssueTagsParameters): ApiQueryKey => [
   `/organizations/${orgSlug}/issues/${groupId}/tags/`,
-  {query: {environment, readable, limit}},
+  {query: {environment, limit}},
 ];
 
 export function useGroupTags(
@@ -78,13 +67,12 @@ export function useGroupTags(
 /**
  * Primarily used for tag facets
  */
-export function useGroupTagsReadable(
-  parameters: Omit<FetchIssueTagsParameters, 'orgSlug' | 'limit' | 'readable'>,
+export function useGroupFacetTags(
+  parameters: Omit<FetchIssueTagsParameters, 'orgSlug' | 'limit'>,
   options: GroupTagUseQueryOptions = {}
 ) {
   return useGroupTags(
     {
-      readable: true,
       limit: 4,
       ...parameters,
     },

diff --git a/static/app/views/issueDetails/utils.tsx b/static/app/views/issueDetails/utils.tsx
@@ -13,7 +13,7 @@ import {defined} from 'sentry/utils';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useParams} from 'sentry/utils/useParams';
 import {useUser} from 'sentry/utils/useUser';
-import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroupTags';
+import {useGroupFacetTags} from 'sentry/views/issueDetails/groupTags/useGroupTags';
 
 export function markEventSeen(
   api: Client,
@@ -256,7 +256,7 @@ export function useIsSampleEvent(): boolean {
 
   const group = GroupStore.get(groupId);
 
-  const {data} = useGroupTagsReadable(
+  const {data} = useGroupFacetTags(
     {
       groupId: groupId,
       environment: environments,