fix(flags): Iterate on the Tags & Flags drawer styles (#91399)

This has a bunch of really small fixes in it, mostly related to resizing
the Tags & Flags drawer.

EventDrawerContainer now sizes it's content correctly. It's expected to
have 3 items: `EventDrawerHeader, EventNavigator, EventDrawerBody` and
space is not reserved for the top two items if the 3rd item extends
beyond the height of the window. Before the title would easily be
squished

The empty state for the Feature Flags distribution drawer now hides the
image when the drawer is narrow, and resizing the width doesn't affect
the height of the message. The image is always stuck to the bottom of
the box.

We no longer show the Suspect Flags section if there are no flags at all
on the issue.

The same GradientBox is used as a container for all Suspect Flag states.
Title is consistent too.

Fixes #91288

Author: ryan953

static/app/components/events/eventDrawer.tsx

@@ -39,7 +39,7 @@ export const ShortId = styled('div')`
 export const EventDrawerContainer = styled('div')`
   height: 100%;
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: max-content max-content auto;
 `;
 
 export const EventDrawerHeader = styled(DrawerHeader)`

static/app/components/events/featureFlags/cta/featureFlagInlineCTA.tsx

@@ -63,7 +63,7 @@ export function FeatureFlagCTAContent({
           </LinkButton>
         </ActionButton>
       </BannerContent>
-      <BannerIllustration src={onboardingInstall} alt={t('Install')} />
+      <BannerIllustration src={onboardingInstall} alt="" />
     </Fragment>
   );
 }
@@ -194,19 +194,18 @@ const BannerContent = styled('div')`
 `;
 
 const BannerIllustration = styled('img')`
-  height: 100%;
   object-fit: contain;
   max-width: 30%;
-  margin-right: 10px;
-  margin-bottom: -${space(2)};
-  padding: ${space(2)};
+  min-width: 150px;
+  padding-inline: ${space(2)};
+  padding-top: ${space(2)};
+  align-self: flex-end;
 `;
 
 export const BannerWrapper = styled('div')`
   position: relative;
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
-  margin: ${space(1)} 0;
   background: linear-gradient(
     90deg,
     ${p => p.theme.backgroundSecondary}00 0%,
@@ -218,6 +217,15 @@ export const BannerWrapper = styled('div')`
   align-items: flex-end;
   justify-content: space-between;
   gap: ${space(1)};
+
+  container-name: bannerWrapper;
+  container-type: inline-size;
+
+  @container bannerWrapper (max-width: 400px) {
+    img {
+      display: none;
+    }
+  }
 `;
 
 const CloseDropdownMenu = styled(DropdownMenu)`

static/app/components/globalDrawer/components.tsx

@@ -219,7 +219,6 @@ const DrawerSlidePanel = styled(SlideOverPanel)`
 
     /* Apply to all scrollable children */
     * {
-      overflow: hidden !important;
       scrollbar-width: none;
 
       &::-webkit-scrollbar {

static/app/components/issues/suspect/suspectTable.tsx

@@ -3,19 +3,20 @@ import styled from '@emotion/styled';
 import Color from 'color';
 
 import {Flex} from 'sentry/components/container/flex';
-import {Alert} from 'sentry/components/core/alert';
 import {NumberInput} from 'sentry/components/core/input/numberInput';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {OrderBy, SortBy} from 'sentry/components/events/featureFlags/utils';
 import useSuspectFlagScoreThreshold from 'sentry/components/issues/suspect/useSuspectFlagScoreThreshold';
+import Link from 'sentry/components/links/link';
 import {IconSentry} from 'sentry/icons/iconSentry';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import toRoundedPercent from 'sentry/utils/number/toRoundedPercent';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import FlagDetailsLink from 'sentry/views/issueDetails/groupFeatureFlags/details/flagDetailsLink';
+import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
 import useGroupFlagDrawerData from 'sentry/views/issueDetails/groupFeatureFlags/hooks/useGroupFlagDrawerData';
 
 interface Props {
@@ -26,6 +27,7 @@ interface Props {
 
 export default function SuspectTable({debugSuspectScores, environments, group}: Props) {
   const organization = useOrganization();
+  const location = useLocation();
   const [threshold, setThreshold] = useSuspectFlagScoreThreshold();
 
   const {displayFlags, isPending} = useGroupFlagDrawerData({
@@ -57,27 +59,32 @@ export default function SuspectTable({debugSuspectScores, environments, group}:
     }
   }, [isPending, organization, displayFlags.length, susFlags.length, threshold]);
 
+  if (displayFlags.length === 0) {
+    // If there are no display flags then we don't need this section at all.
+    return null;
+  }
+
   if (isPending) {
     return (
-      <Alert type="muted">
+      <GradientBox>
         <TagHeader>
-          {t('Suspect')}
+          {t('Suspect Flags')}
           {debugThresholdInput}
         </TagHeader>
         {t('Loading...')}
-      </Alert>
+      </GradientBox>
     );
   }
 
   if (!susFlags.length) {
     return (
-      <Alert type="muted">
+      <GradientBox>
         <TagHeader>
-          {t('Suspect')}
+          {t('Suspect Flags')}
           {debugThresholdInput}
         </TagHeader>
         {t('Nothing suspicious')}
-      </Alert>
+      </GradientBox>
     );
   }
 
@@ -95,15 +102,24 @@ export default function SuspectTable({debugSuspectScores, environments, group}:
           return (
             <TagValueRow key={flag.key}>
               {/* TODO: why is flag.name transformed to TitleCase? */}
-              <FlagDetailsLink flag={flag}>
-                <Tooltip
-                  title={flag.key}
-                  showOnlyOnOverflow
-                  data-underline-on-hover="true"
+              <Tooltip
+                skipWrapper
+                title={flag.key}
+                showOnlyOnOverflow
+                data-underline-on-hover="true"
+              >
+                <StyledLink
+                  to={{
+                    pathname: `${location.pathname}${flag.key}/`,
+                    query: {
+                      ...location.query,
+                      tab: DrawerTab.FEATURE_FLAGS,
+                    },
+                  }}
                 >
                   {flag.key}
-                </Tooltip>
-              </FlagDetailsLink>
+                </StyledLink>
+              </Tooltip>
               <RightAligned>
                 {toRoundedPercent((topValue?.count ?? 0) / flag.totalValues)}
               </RightAligned>
@@ -128,6 +144,9 @@ const GradientBox = styled('div')`
   border-radius: ${p => p.theme.borderRadius};
   color: ${p => p.theme.textColor};
   padding: ${space(1)};
+  height: max-content;
+  display: flex;
+  flex-direction: column;
 `;
 
 const TagHeader = styled('h4')`
@@ -140,21 +159,20 @@ const TagHeader = styled('h4')`
   font-weight: ${p => p.theme.fontWeightBold};
 `;
 
-const progressBarWidth = '45px'; // Prevent percentages from overflowing
 const TagValueGrid = styled('ul')`
   display: grid;
-  grid-template-columns: 4fr ${progressBarWidth} auto auto max-content auto;
-
+  grid-template-columns: auto max-content max-content;
+  gap: ${space(0.25)} ${space(0.5)};
   margin: 0;
   padding: 0;
   list-style: none;
 `;
 
 const TagValueRow = styled('li')`
   display: grid;
-  grid-template-columns: subgrid;
   grid-column: 1 / -1;
-  grid-column-gap: ${space(1)};
+  grid-template-columns: subgrid;
+
   align-items: center;
   padding: ${space(0.25)} ${space(0.75)};
   border-radius: ${p => p.theme.borderRadius};
@@ -166,6 +184,15 @@ const TagValueRow = styled('li')`
   }
 `;
 
+const StyledLink = styled(Link)`
+  ${p => p.theme.overflowEllipsis};
+  width: auto;
+
+  &:hover [data-underline-on-hover='true'] {
+    text-decoration: underline;
+  }
+`;
+
 const RightAligned = styled('span')`
   text-align: right;
 `;