ref(flags/tagsDrawer): Add empty state to issue flags and tags drawer (#87150)

<img width="1293" alt="SCR-20250314-rsdo"
src="https://github.com/user-attachments/assets/f766b111-d47b-4610-9be9-49c81dbf8a40"
/>
<img width="1294" alt="SCR-20250314-rstz"
src="https://github.com/user-attachments/assets/42897526-cda4-4966-81c8-bb2bd64932d3"
/>

See
#86359 (comment)
for error and loading states

**3/17 update**
![Screenshot 2025-03-17 at 11 14
52 AM](https://github.com/user-attachments/assets/45532a21-e00a-4f08-bc22-3c0612a45699)
Updated font size (16px) and text for no search results

Author: aliu39

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

@@ -1,12 +1,15 @@
 import {useMemo} from 'react';
-import styled from '@emotion/styled';
 
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import useGroupFeatureFlags from 'sentry/views/issueDetails/groupFeatureFlags/useGroupFeatureFlags';
+import {
+  Container,
+  StyledEmptyStateWarning,
+  Wrapper,
+} from 'sentry/views/issueDetails/groupTags/groupTagsDrawer';
 import {TagDistribution} from 'sentry/views/issueDetails/groupTags/tagDistribution';
 import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags';
 
@@ -65,6 +68,12 @@ export default function GroupFeatureFlagsDrawerContent({
       message={t('There was an error loading feature flags.')}
       onRetry={refetch}
     />
+  ) : displayTags.length === 0 ? (
+    <StyledEmptyStateWarning withIcon>
+      {data.length === 0
+        ? t('No feature flags were found for this issue')
+        : t('No feature flags were found for this search')}
+    </StyledEmptyStateWarning>
   ) : (
     <Wrapper>
       <Container>
@@ -75,16 +84,3 @@ export default function GroupFeatureFlagsDrawerContent({
     </Wrapper>
   );
 }
-
-const Wrapper = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: ${space(2)};
-`;
-
-const Container = styled('div')`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: ${space(2)};
-  margin-bottom: ${space(2)};
-`;

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

@@ -7,6 +7,7 @@ import {Button} from 'sentry/components/core/button';
 import {InputGroup} from 'sentry/components/core/input/inputGroup';
 import {ExportQueryType, useDataExport} from 'sentry/components/dataExport';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {
   CrumbContainer,
   EventDrawerBody,
@@ -260,21 +261,27 @@ export function GroupTagsDrawer({
         {headerActions}
       </EventNavigator>
       <EventDrawerBody>
-        {tagKey ? (
-          <TagDetailsDrawerContent group={group} />
-        ) : tab === FEATURE_FLAGS_TAB ? (
+        {tab === FEATURE_FLAGS_TAB ? (
           <GroupFeatureFlagsDrawerContent
             group={group}
             environments={environments}
             search={search}
           />
+        ) : tagKey ? (
+          <TagDetailsDrawerContent group={group} />
         ) : isPending || isHighlightsPending ? (
           <LoadingIndicator />
         ) : isError ? (
           <LoadingError
             message={t('There was an error loading issue tags.')}
             onRetry={refetch}
           />
+        ) : displayTags.length === 0 ? (
+          <StyledEmptyStateWarning withIcon>
+            {data.length === 0
+              ? t('No tags were found for this issue')
+              : t('No tags were found for this search')}
+          </StyledEmptyStateWarning>
         ) : (
           <Wrapper>
             <Container>
@@ -293,13 +300,13 @@ export function GroupTagsDrawer({
   );
 }
 
-const Wrapper = styled('div')`
+export const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(2)};
 `;
 
-const Container = styled('div')`
+export const Container = styled('div')`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: ${space(2)};
@@ -312,3 +319,12 @@ const Header = styled('h3')`
   font-weight: ${p => p.theme.fontWeightBold};
   margin: 0;
 `;
+
+export const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+  border: ${p => p.theme.border} solid 1px;
+  border-radius: ${p => p.theme.borderRadius};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: ${p => p.theme.fontSizeLarge};
+`;