feat(issues): Preserve group when switching environment (#82907)

Author: scttcper

static/app/views/issueDetails/groupDetails.tsx

@@ -1,6 +1,7 @@
 import {Fragment, useCallback, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
+import isEqual from 'lodash/isEqual';
 import * as qs from 'query-string';
 
 import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
@@ -263,7 +264,43 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
     [event]
   );
 
-  const group = groupData ?? null;
+  // If the environment changes, we need to refetch the group, but we can
+  // still display the previous group while the new group is loading.
+  const previousGroupData = useMemoWithPrevious<{
+    cachedGroup: typeof groupData | null;
+    previousEnvironments: typeof environments | null;
+    previousGroupData: typeof groupData | null;
+  }>(
+    previousInstance => {
+      // Preserve the previous group if:
+      // - New group is not yet available
+      // - Previously we had group data
+      // - The previous group id is the same as the current group id
+      // - The previous environments are not the same as the current environments
+      if (
+        !groupData &&
+        previousInstance?.cachedGroup &&
+        previousInstance.cachedGroup.id === groupId &&
+        !isEqual(previousInstance.previousEnvironments, environments)
+      ) {
+        return {
+          previousGroupData: previousInstance.previousGroupData,
+          previousEnvironments: previousInstance.previousEnvironments,
+          cachedGroup: previousInstance.cachedGroup,
+        };
+      }
+
+      // If group data is available, store in memo for comparison later
+      return {
+        cachedGroup: groupData,
+        previousEnvironments: environments,
+        previousGroupData: null,
+      };
+    },
+    [groupData, environments, groupId]
+  );
+
+  const group = groupData ?? previousGroupData.cachedGroup ?? null;
 
   useEffect(() => {
     if (defined(group)) {
@@ -750,13 +787,7 @@ function GroupDetails(props: GroupDetailsProps) {
           shouldForceProject
         >
           {config?.showFeedbackWidget && <FloatingFeedbackWidget />}
-          <GroupDetailsPageContent
-            {...props}
-            {...{
-              group,
-              ...fetchGroupDetailsProps,
-            }}
-          />
+          <GroupDetailsPageContent {...props} {...fetchGroupDetailsProps} group={group} />
         </PageFiltersContainer>
       </SentryDocumentTitle>
     </Fragment>