From 0fe41433e5b15194390f5dbb8455743f9fd11ca0 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Thu, 14 Nov 2024 12:54:57 -0800
Subject: [PATCH] feat(issues): Remove child props from attachments page

The goal is to remove cloneElement and passing untyped props from groupDetails down to child routes. We could also start loading sub requests earlier for some of these pages.

https://github.com/getsentry/sentry/blob/f4a29f737fe9e46716468934b68dadb3605f03b9/static/app/views/issueDetails/groupDetails.tsx#L651-L661
---
 .../groupEventAttachments/index.tsx           | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/static/app/views/issueDetails/groupEventAttachments/index.tsx b/static/app/views/issueDetails/groupEventAttachments/index.tsx
index 713545169f3b73..49a6dc946a26f3 100644
--- a/static/app/views/issueDetails/groupEventAttachments/index.tsx
+++ b/static/app/views/issueDetails/groupEventAttachments/index.tsx
@@ -4,22 +4,36 @@ import styled from '@emotion/styled';
 import Feature from 'sentry/components/acl/feature';
 import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import * as Layout from 'sentry/components/layouts/thirds';
+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 type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
+import {useGroup} from 'sentry/views/issueDetails/useGroup';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
 import GroupEventAttachments from './groupEventAttachments';
 
-type Props = RouteComponentProps<{groupId: string}, {}> & {
-  group: Group;
-};
-
-function GroupEventAttachmentsContainer({group}: Props) {
+function GroupEventAttachmentsContainer() {
   const organization = useOrganization();
   const hasStreamlinedUI = useHasStreamlinedUI();
+  const params = useParams();
+
+  const {
+    data: group,
+    isPending: isGroupPending,
+    isError: isGroupError,
+    refetch: refetchGroup,
+  } = useGroup({groupId: params.groupId});
+
+  if (isGroupPending) {
+    return <LoadingIndicator />;
+  }
+
+  if (isGroupError) {
+    return <LoadingError onRetry={refetchGroup} />;
+  }
 
   return (
     <Feature