feat(issue-details): Add message about search filters to replays and …

…attachments (#83187)

this pr adds a message about search filters not working to the replays +
attachments sections of the issue details page.

<img width="1170" alt="Screenshot 2025-01-09 at 11 11 28 AM"
src="https://github.com/user-attachments/assets/82e683e8-8194-4172-8184-ac9691cf332b"
/>

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -54,6 +54,19 @@ const VISIBLE_COLUMNS_MOBILE = [
 const visibleColumns = (allMobileProj: boolean) =>
   allMobileProj ? VISIBLE_COLUMNS_MOBILE : VISIBLE_COLUMNS;
 
+function ReplayFilterMessage() {
+  const hasStreamlinedUI = useHasStreamlinedUI();
+  if (!hasStreamlinedUI) {
+    return null;
+  }
+  return (
+    <ReplayFilterText>
+      {t('The replays shown below are not subject to search filters.')}
+      <StyledBreak />
+    </ReplayFilterText>
+  );
+}
+
 function GroupReplays({group}: Props) {
   const organization = useOrganization();
   const location = useLocation<ReplayListLocationQuery>();
@@ -80,14 +93,17 @@ function GroupReplays({group}: Props) {
     // Shown on load and no replay data available
     return (
       <StyledLayoutPage withPadding hasStreamlinedUI={hasStreamlinedUI}>
-        <ReplayCountHeader>
-          <IconUser size="sm" />
-          {isFetching ? (
-            <Placeholder height="18px" width="400px" />
-          ) : (
-            t('No replay data available.')
-          )}
-        </ReplayCountHeader>
+        <ReplayHeader>
+          <ReplayFilterMessage />
+          <ReplayCountHeader>
+            <IconUser size="sm" />
+            {isFetching ? (
+              <Placeholder height="18px" width="400px" />
+            ) : (
+              t('No replay data available.')
+            )}
+          </ReplayCountHeader>
+        </ReplayHeader>
         <ReplayTable
           fetchError={fetchError}
           isFetching={isFetching}
@@ -269,35 +285,38 @@ function GroupReplaysTable({
 
   return (
     <StyledLayoutPage withPadding hasStreamlinedUI={hasStreamlinedUI}>
-      <ReplayCountHeader>
-        <IconUser size="sm" />
-        {(replayCount ?? 0) > 50
-          ? tn(
-              'There are 50+ replays for this issue across %s event',
-              'There are 50+ replays for this issue across %s events',
-              group.count
-            )
-          : t(
-              'There %s for this issue across %s.',
-              tn('is %s replay', 'are %s replays', replayCount ?? 0),
-              tn('%s event', '%s events', group.count)
-            )}
-      </ReplayCountHeader>
+      <ReplayHeader>
+        <ReplayFilterMessage />
+        <ReplayCountHeader>
+          <IconUser size="sm" />
+          {(replayCount ?? 0) > 50
+            ? tn(
+                'There are 50+ replays for this issue across %s event',
+                'There are 50+ replays for this issue across %s events',
+                group.count
+              )
+            : t(
+                'There %s for this issue across %s.',
+                tn('is %s replay', 'are %s replays', replayCount ?? 0),
+                tn('%s event', '%s events', group.count)
+              )}
+        </ReplayCountHeader>
+      </ReplayHeader>
       {inner}
     </StyledLayoutPage>
   );
 }
 
 const StyledLayoutPage = styled(Layout.Page)<{hasStreamlinedUI?: boolean}>`
   background-color: ${p => p.theme.background};
-  gap: ${space(2)};
+  gap: ${space(1.5)};
 
   ${p =>
     p.hasStreamlinedUI &&
     css`
       border: 1px solid ${p.theme.border};
       border-radius: ${p.theme.borderRadius};
-      padding: ${space(3)} ${space(2)};
+      padding: ${space(1.5)};
     `}
 `;
 
@@ -307,6 +326,21 @@ const ReplayCountHeader = styled('div')`
   gap: ${space(1)};
 `;
 
+const ReplayHeader = styled('div')`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledBreak = styled('hr')`
+  margin-top: ${space(1)};
+  margin-bottom: ${space(1.5)};
+  border-color: ${p => p.theme.border};
+`;
+
+const ReplayFilterText = styled('div')`
+  color: ${p => p.theme.subText};
+`;
+
 const OverlayText = styled('div')`
   font-size: ${p => p.theme.fontSizeExtraLarge};
 `;

static/app/views/issueDetails/groupUserFeedback.tsx

@@ -7,6 +7,7 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Pagination from 'sentry/components/pagination';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -66,10 +67,17 @@ function GroupUserFeedback() {
   }
 
   const pageLinks = getResponseHeader?.('Link');
+  const hasUserFeedback = group.project.hasUserReports;
 
   return (
     <StyledLayoutBody hasStreamlinedUI={hasStreamlinedUI}>
       <Layout.Main fullWidth>
+        {hasStreamlinedUI && hasUserFeedback && (
+          <FilterMessage>
+            {t('The feedback shown below is not subject to search filters.')}
+            <StyledBreak />
+          </FilterMessage>
+        )}
         {reportList.length === 0 ? (
           <UserFeedbackEmpty projectIds={[group.project.id]} issueTab />
         ) : (
@@ -100,12 +108,22 @@ const StyledLayoutBody = styled(Layout.Body)<{hasStreamlinedUI?: boolean}>`
     css`
       border: 1px solid ${p.theme.border};
       border-radius: ${p.theme.borderRadius};
-      padding: ${space(2)} 0;
+      padding: ${space(1.5)} 0;
 
       @media (min-width: ${p.theme.breakpoints.medium}) {
-        padding: ${space(2)} ${space(2)};
+        padding: ${space(1.5)};
       }
     `}
 `;
 
+const FilterMessage = styled('div')`
+  color: ${p => p.theme.subText};
+`;
+
+const StyledBreak = styled('hr')`
+  margin-top: ${space(1)};
+  margin-bottom: ${space(1)};
+  border-color: ${p => p.theme.border};
+`;
+
 export default GroupUserFeedback;