feat(issues): Add tag drawer

getsentry · Sep 19, 2024 · 56ba1bf · 56ba1bf
1 parent 74c3f57
commit 56ba1bf
Show file tree

Hide file tree

Showing 5 changed files with 627 additions and 9 deletions.
diff --git a/static/app/components/events/highlights/highlightsDataSection.tsx b/static/app/components/events/highlights/highlightsDataSection.tsx
@@ -35,12 +35,14 @@ import theme from 'sentry/utils/theme';
 import {useDetailedProject} from 'sentry/utils/useDetailedProject';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useGroupTagsDrawer} from 'sentry/views/issueDetails/groupTags/groupTagsDrawer';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
 interface HighlightsDataSectionProps {
   event: Event;
+  groupId: string;
   project: Project;
   viewAllRef?: React.RefObject<HTMLElement>;
 }
@@ -253,12 +255,20 @@ function HighlightsData({
 export default function HighlightsDataSection({
   viewAllRef,
   event,
+  groupId,
   project,
 }: HighlightsDataSectionProps) {
   const organization = useOrganization();
   const hasStreamlinedUI = useHasStreamlinedUI();
+  const openButtonRef = useRef<HTMLButtonElement>(null);
+  const {openTagsDrawer} = useGroupTagsDrawer({groupId, openButtonRef, project});
 
-  const viewAllButton = viewAllRef ? (
+  const viewAllButton = hasStreamlinedUI ? (
+    // Streamline details ui has "Jump to" feature, instead we'll show the drawer button
+    <Button ref={openButtonRef} size="xs" onClick={openTagsDrawer}>
+      {t('View All Issue Tags')}
+    </Button>
+  ) : viewAllRef ? (
     <Button
       onClick={() => {
         trackAnalytics('highlights.issue_details.view_all_clicked', {organization});

diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -229,7 +229,12 @@ export function EventDetailsContent({
           project={project}
         />
       )}
-      <HighlightsDataSection event={event} project={project} viewAllRef={tagsRef} />
+      <HighlightsDataSection
+        groupId={group.id}
+        event={event}
+        project={project}
+        viewAllRef={tagsRef}
+      />
       {showPossibleSolutionsHigher && (
         <ResourcesAndPossibleSolutionsIssueDetailsContent
           event={event}

diff --git a/static/app/views/issueDetails/groupTagValues.tsx b/static/app/views/issueDetails/groupTagValues.tsx
@@ -48,14 +48,14 @@ type Props = {
 
 const DEFAULT_SORT = 'count';
 
-function useTagQueries({
-  group,
+export function useTagQueries({
+  groupId,
   tagKey,
   environments,
   sort,
   cursor,
 }: {
-  group: Group;
+  groupId: string;
   sort: string | string[];
   tagKey: string;
   cursor?: string;
@@ -70,15 +70,15 @@ function useTagQueries({
     getResponseHeader,
   } = useFetchIssueTagValues({
     orgSlug: organization.slug,
-    groupId: group.id,
+    groupId,
     tagKey,
     environment: environments,
     sort,
     cursor,
   });
   const {data: tag, isError: tagIsError} = useFetchIssueTag({
     orgSlug: organization.slug,
-    groupId: group.id,
+    groupId,
     tagKey,
   });
 
@@ -108,7 +108,7 @@ function GroupTagValues({baseUrl, project, group, environments}: Props) {
   const sortArrow = <IconArrow color="gray300" size="xs" direction="down" />;
 
   const {tagValueList, tag, isLoading, isError, pageLinks} = useTagQueries({
-    group,
+    groupId: group.id,
     sort,
     tagKey,
     environments,