Merge branch 'mz/add-flags-audit-log-drawer' of github.com:getsentry/sentry into aliu/ff-dist-cta

Author: aliu39

static/app/views/issueDetails/groupFeatureFlags/flagDetailsLink.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+import Link from 'sentry/components/links/link';
+import {useLocation} from 'sentry/utils/useLocation';
+import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags';
+
+export default function FlagDetailsLink({
+  tag,
+  children,
+}: {
+  children: React.ReactNode;
+  tag: GroupTag;
+}) {
+  const location = useLocation();
+
+  return (
+    <StyledLink
+      to={{
+        pathname: `${location.pathname}${tag.key}/`,
+        query: location.query,
+      }}
+    >
+      {children}
+    </StyledLink>
+  );
+}
+
+const StyledLink = styled(Link)`
+  border-radius: ${p => p.theme.borderRadius};
+  display: block;
+
+  &:hover h5 {
+    text-decoration: underline;
+  }
+`;

static/app/views/issueDetails/groupFeatureFlags/groupFeatureFlagsDrawerContent.tsx

@@ -7,13 +7,13 @@ import {t} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
+import FlagDetailsLink from 'sentry/views/issueDetails/groupFeatureFlags/flagDetailsLink';
 import FlagDrawerCTA from 'sentry/views/issueDetails/groupFeatureFlags/flagDrawerCTA';
 import useGroupFeatureFlags from 'sentry/views/issueDetails/groupFeatureFlags/useGroupFeatureFlags';
 import {
   Container,
   StyledEmptyStateWarning,
 } from 'sentry/views/issueDetails/groupTags/groupTagsDrawer';
-import TagDetailsLink from 'sentry/views/issueDetails/groupTags/tagDetailsLink';
 import {TagDistribution} from 'sentry/views/issueDetails/groupTags/tagDistribution';
 import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags';
 
@@ -87,10 +87,12 @@ export default function GroupFeatureFlagsDrawerContent({
     </StyledEmptyStateWarning>
   ) : (
     <Container>
-      {displayTags.map((tag, tagIdx) => (
-        <TagDetailsLink tag={tag} groupId={group.id} key={tagIdx}>
-          <TagDistribution tag={tag} key={tagIdx} />
-        </TagDetailsLink>
+      {displayTags.map(tag => (
+        <div key={tag.name}>
+          <FlagDetailsLink tag={tag} key={tag.name}>
+            <TagDistribution tag={tag} key={tag.name} />
+          </FlagDetailsLink>
+        </div>
       ))}
     </Container>
   );

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

@@ -35,6 +35,7 @@ export function useGroupTagsDrawer({
                 ...location.query,
                 tagDrawerSort: undefined,
                 tab: undefined,
+                flagDrawerCursor: undefined,
               },
             },
             {replace: true}