feat(issue-details): Add tags from highlights to preview + drawer (#84278)

this pr updates the tag preview and drawer to show any tags that are
highlighted for a project first. for the preview, it filters out any
default highlights (because we already have a list of tags to show in
the preview).

Author: roggenkemper

static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx

@@ -24,6 +24,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useDetailedProject} from 'sentry/utils/useDetailedProject';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
@@ -67,6 +68,15 @@ export function GroupTagsDrawer({group}: {group: Group}) {
     environment: environments,
   });
 
+  const {data: detailedProject, isPending: isHighlightsPending} = useDetailedProject({
+    orgSlug: organization.slug,
+    projectSlug: project.slug,
+  });
+
+  const highlightTagKeys = useMemo(() => {
+    return detailedProject?.highlightTags ?? project?.highlightTags ?? [];
+  }, [detailedProject, project]);
+
   const tagValues = useMemo(
     () =>
       data.reduce((valueMap, tag) => {
@@ -78,18 +88,24 @@ export function GroupTagsDrawer({group}: {group: Group}) {
   );
 
   const displayTags = useMemo(() => {
-    const sortedTags = data.sort((a, b) => a.key.localeCompare(b.key));
-    const searchedTags = sortedTags.filter(
+    const highlightTags = data.filter(tag => highlightTagKeys.includes(tag.key));
+    const orderedHighlightTags = highlightTags.sort(
+      (a, b) => highlightTagKeys.indexOf(a.key) - highlightTagKeys.indexOf(b.key)
+    );
+    const remainingTags = data.filter(tag => !highlightTagKeys.includes(tag.key));
+    const sortedTags = remainingTags.sort((a, b) => a.key.localeCompare(b.key));
+    const orderedTags = [...orderedHighlightTags, ...sortedTags];
+    const searchedTags = orderedTags.filter(
       tag =>
         tag.key.includes(search) ||
         tag.name.includes(search) ||
         // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
         tagValues[tag.key].includes(search)
     );
     return searchedTags;
-  }, [data, search, tagValues]);
+  }, [data, search, tagValues, highlightTagKeys]);
 
-  if (isPending) {
+  if (isPending || isHighlightsPending) {
     return <LoadingIndicator />;
   }
 

static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx

@@ -57,6 +57,10 @@ describe('EventDetailsHeader', () => {
       new Set(['environments'])
     );
     ProjectsStore.loadInitialData([project]);
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/',
+      body: [project],
+    });
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/events-stats/`,
       body: {'count()': EventsStatsFixture(), 'count_unique(user)': EventsStatsFixture()},

static/app/views/issueDetails/streamline/eventGraph.spec.tsx

@@ -42,6 +42,10 @@ describe('EventGraph', () => {
       url: `/organizations/${organization.slug}/releases/stats/`,
       body: [],
     });
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/',
+      body: [project],
+    });
     PageFiltersStore.init();
     PageFiltersStore.onInitializeUrlState(
       {

static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx

@@ -88,6 +88,10 @@ describe('GroupDetailsLayout', () => {
         githubWriteIntegration: {ok: true},
       },
     });
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/',
+      body: [project],
+    });
   });
 
   it('renders children, can collapse sidebar', async () => {

static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx

@@ -1,11 +1,18 @@
 import {GroupFixture} from 'sentry-fixture/group';
+import {ProjectFixture} from 'sentry-fixture/project';
 import {TagsFixture} from 'sentry-fixture/tags';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import IssueTagsPreview from './issueTagsPreview';
 
 describe('IssueTagsPreview', () => {
+  beforeEach(() => {
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/',
+      body: [ProjectFixture()],
+    });
+  });
   it('renders preview tags', async () => {
     const group = GroupFixture();
     MockApiClient.addMockResponse({

static/app/views/issueDetails/streamline/issueTagsPreview.tsx

@@ -17,7 +17,9 @@ import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
 import {percent} from 'sentry/utils';
 import {isMobilePlatform} from 'sentry/utils/platform';
+import {useDetailedProject} from 'sentry/utils/useDetailedProject';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags';
 import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroupTags';
@@ -199,6 +201,19 @@ export default function IssueTagsPreview({
   project: Project;
 }) {
   const searchQuery = useEventQuery({groupId});
+  const organization = useOrganization();
+
+  const {data: detailedProject, isPending: isHighlightPending} = useDetailedProject({
+    orgSlug: organization.slug,
+    projectSlug: project.slug,
+  });
+
+  const highlightTagKeys = useMemo(() => {
+    const tagKeys = detailedProject?.highlightTags ?? project?.highlightTags ?? [];
+    const highlightDefaults =
+      detailedProject?.highlightPreset?.tags ?? project?.highlightPreset?.tags ?? [];
+    return tagKeys.filter(tag => !highlightDefaults.includes(tag));
+  }, [detailedProject, project]);
 
   const {
     isError,
@@ -213,6 +228,10 @@ export default function IssueTagsPreview({
       return [];
     }
 
+    const highlightTags = tags
+      .filter(tag => highlightTagKeys.includes(tag.key))
+      .sort((a, b) => highlightTagKeys.indexOf(a.key) - highlightTagKeys.indexOf(b.key));
+
     const priorityTags = isMobilePlatform(project?.platform)
       ? MOBILE_TAGS
       : frontend.some(val => val === project?.platform)
@@ -226,11 +245,12 @@ export default function IssueTagsPreview({
       .sort((a, b) => priorityTags.indexOf(a.key) - priorityTags.indexOf(b.key));
 
     const remainingTagKeys = tags.filter(tag => !priorityTags.includes(tag.key)).sort();
-    const orderedTags = [...sortedTags, ...remainingTagKeys];
-    return orderedTags.slice(0, 4);
-  }, [tags, project?.platform]);
+    const orderedTags = [...highlightTags, ...sortedTags, ...remainingTagKeys];
+    const uniqueTags = [...new Set(orderedTags)];
+    return uniqueTags.slice(0, 4);
+  }, [tags, project?.platform, highlightTagKeys]);
 
-  if (isPending) {
+  if (isPending || isHighlightPending) {
     return (
       <IssueTagPreviewSection>
         <Placeholder width="240px" height="100px" />