💄 Allow the filtering to apply to attachments

getsentry · Nov 27, 2024 · 367ba9d · 367ba9d
1 parent 71ebb64
commit 367ba9d
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 21 deletions.
diff --git a/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx b/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx
@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 
+import {Flex} from 'sentry/components/container/flex';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Pagination from 'sentry/components/pagination';
+import {IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {IssueAttachment} from 'sentry/types/group';
+import type {Group, IssueAttachment} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
 import GroupEventAttachmentsFilter, {
   EventAttachmentFilter,
@@ -20,19 +23,20 @@ import {useDeleteGroupEventAttachment} from './useDeleteGroupEventAttachment';
 import {useGroupEventAttachments} from './useGroupEventAttachments';
 
 type GroupEventAttachmentsProps = {
-  groupId: string;
+  group: Group;
   project: Project;
 };
 
-function GroupEventAttachments({project, groupId}: GroupEventAttachmentsProps) {
+function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) {
   const location = useLocation();
   const organization = useOrganization();
+  const hasStreamlinedUI = useHasStreamlinedUI();
   const activeAttachmentsTab =
     (location.query.attachmentFilter as EventAttachmentFilter | undefined) ??
     EventAttachmentFilter.ALL;
   const {attachments, isPending, isError, getResponseHeader, refetch} =
     useGroupEventAttachments({
-      groupId,
+      group,
       activeAttachmentsTab,
     });
 
@@ -41,7 +45,7 @@ function GroupEventAttachments({project, groupId}: GroupEventAttachmentsProps) {
   const handleDelete = (attachment: IssueAttachment) => {
     deleteAttachment({
       attachment,
-      groupId,
+      group,
       orgSlug: organization.slug,
       activeAttachmentsTab,
       projectSlug: project.slug,
@@ -60,12 +64,12 @@ function GroupEventAttachments({project, groupId}: GroupEventAttachmentsProps) {
         isLoading={isPending}
         attachments={attachments}
         projectSlug={project.slug}
-        groupId={groupId}
+        groupId={group.id}
         onDelete={handleDelete}
         emptyMessage={
           activeAttachmentsTab === EventAttachmentFilter.CRASH_REPORTS
-            ? t('No crash reports found')
-            : t('No attachments found')
+            ? t('No matching crash reports found')
+            : t('No matching attachments found')
         }
       />
     );
@@ -90,7 +94,7 @@ function GroupEventAttachments({project, groupId}: GroupEventAttachmentsProps) {
                 eventAttachment={screenshot}
                 eventId={screenshot.event_id}
                 projectSlug={project.slug}
-                groupId={groupId}
+                groupId={group.id}
                 onDelete={handleDelete}
                 attachments={attachments}
               />
@@ -109,7 +113,17 @@ function GroupEventAttachments({project, groupId}: GroupEventAttachmentsProps) {
 
   return (
     <Wrapper>
-      <GroupEventAttachmentsFilter project={project} />
+      {hasStreamlinedUI ? (
+        <Flex justify="space-between">
+          <FilterMessage align="center" gap={space(1)}>
+            <IconFilter size="xs" />
+            {t('These results are filtered by the selections above.')}
+          </FilterMessage>
+          <GroupEventAttachmentsFilter project={project} />
+        </Flex>
+      ) : (
+        <GroupEventAttachmentsFilter project={project} />
+      )}
       {activeAttachmentsTab === EventAttachmentFilter.SCREENSHOT
         ? renderScreenshotGallery()
         : renderAttachmentsTable()}
@@ -148,3 +162,5 @@ const Wrapper = styled('div')`
   flex-direction: column;
   gap: ${space(2)};
 `;
+
+const FilterMessage = styled(Flex)``;
diff --git a/static/app/views/issueDetails/groupEventAttachments/index.tsx b/static/app/views/issueDetails/groupEventAttachments/index.tsx
@@ -45,7 +45,7 @@ function GroupEventAttachmentsContainer() {
     >
       <StyledLayoutBody hasStreamlinedUI={hasStreamlinedUI}>
         <Layout.Main fullWidth>
-          <GroupEventAttachments project={group.project} groupId={group.id} />
+          <GroupEventAttachments project={group.project} group={group} />
         </Layout.Main>
       </StyledLayoutBody>
     </Feature>

diff --git a/static/app/views/issueDetails/groupEventAttachments/useGroupEventAttachments.tsx b/static/app/views/issueDetails/groupEventAttachments/useGroupEventAttachments.tsx
@@ -1,15 +1,18 @@
-import type {IssueAttachment} from 'sentry/types/group';
+import type {DateString} from 'sentry/types/core';
+import type {Group, IssueAttachment} from 'sentry/types/group';
 import {
   type ApiQueryKey,
   useApiQuery,
   type UseApiQueryOptions,
 } from 'sentry/utils/queryClient';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useEventQuery} from 'sentry/views/issueDetails/streamline/eventSearch';
+import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
 
 interface UseGroupEventAttachmentsOptions {
   activeAttachmentsTab: 'all' | 'onlyCrash' | 'screenshot';
-  groupId: string;
+  group: Group;
   options?: Pick<UseApiQueryOptions<IssueAttachment[]>, 'placeholderData'>;
 }
 
@@ -18,6 +21,10 @@ interface MakeFetchGroupEventAttachmentsQueryKeyOptions
   cursor: string | undefined;
   environment: string[] | string | undefined;
   orgSlug: string;
+  end?: DateString;
+  eventQuery?: string;
+  start?: DateString;
+  statsPeriod?: string;
 }
 
 type GroupEventAttachmentsTypeFilter =
@@ -27,24 +34,49 @@ type GroupEventAttachmentsTypeFilter =
 
 interface GroupEventAttachmentsQuery {
   cursor?: string;
+  end?: DateString;
   environment?: string[] | string;
   per_page?: string;
+  query?: string;
   screenshot?: '1';
+  start?: DateString;
+  statsPeriod?: string;
   types?: `${GroupEventAttachmentsTypeFilter}` | `${GroupEventAttachmentsTypeFilter}`[];
 }
 
 export const makeFetchGroupEventAttachmentsQueryKey = ({
   activeAttachmentsTab,
-  groupId,
+  group,
   orgSlug,
   cursor,
   environment,
+  eventQuery,
+  start,
+  end,
+  statsPeriod,
 }: MakeFetchGroupEventAttachmentsQueryKeyOptions): ApiQueryKey => {
   const query: GroupEventAttachmentsQuery = {};
+
   if (environment) {
     query.environment = environment;
   }
 
+  if (eventQuery) {
+    query.query = eventQuery;
+  }
+
+  if (start) {
+    query.start = start;
+  }
+
+  if (end) {
+    query.end = end;
+  }
+
+  if (statsPeriod) {
+    query.statsPeriod = statsPeriod;
+  }
+
   if (cursor) {
     query.cursor = cursor;
   }
@@ -55,16 +87,19 @@ export const makeFetchGroupEventAttachmentsQueryKey = ({
     query.types = ['event.minidump', 'event.applecrashreport'];
   }
 
-  return [`/organizations/${orgSlug}/issues/${groupId}/attachments/`, {query}];
+  return [`/organizations/${orgSlug}/issues/${group.id}/attachments/`, {query}];
 };
 
 export function useGroupEventAttachments({
-  groupId,
+  group,
   activeAttachmentsTab,
   options,
 }: UseGroupEventAttachmentsOptions) {
-  const organization = useOrganization();
   const location = useLocation();
+  const organization = useOrganization();
+  const eventQuery = useEventQuery({group});
+  const eventView = useIssueDetailsEventView({group});
+
   const {
     data: attachments = [],
     isPending,
@@ -74,10 +109,14 @@ export function useGroupEventAttachments({
   } = useApiQuery<IssueAttachment[]>(
     makeFetchGroupEventAttachmentsQueryKey({
       activeAttachmentsTab,
-      groupId,
+      group,
       orgSlug: organization.slug,
       cursor: location.query.cursor as string | undefined,
-      environment: location.query.environment as string[] | string | undefined,
+      environment: eventView.environment as string[],
+      start: eventView.start,
+      end: eventView.end,
+      statsPeriod: eventView.statsPeriod,
+      eventQuery,
     }),
     {...options, staleTime: 60_000}
   );

diff --git a/static/app/views/issueDetails/streamline/eventNavigation.tsx b/static/app/views/issueDetails/streamline/eventNavigation.tsx
@@ -143,7 +143,7 @@ export function IssueEventNavigation({event, group, query}: IssueEventNavigation
   const replaysCount = getReplayCountForIssue(group.id, group.issueCategory) ?? 0;
 
   const attachments = useGroupEventAttachments({
-    groupId: group.id,
+    group,
     activeAttachmentsTab: 'all',
     options: {placeholderData: keepPreviousData},
   });

diff --git a/static/app/views/issueDetails/streamline/header/attachmentsBadge.tsx b/static/app/views/issueDetails/streamline/header/attachmentsBadge.tsx
@@ -17,7 +17,7 @@ export function AttachmentsBadge({group}: {group: Group}) {
   const location = useLocation();
   const {baseUrl} = useGroupDetailsRoute();
   const attachments = useGroupEventAttachments({
-    groupId: group.id,
+    group,
     activeAttachmentsTab: 'all',
     options: {placeholderData: keepPreviousData},
   });