From e833890e88a972093969f3367c3bd5ee1fa40035 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Fri, 22 Oct 2021 12:35:22 +0200
Subject: [PATCH 1/2] feat(ui): Reduce the number of re-fetches on release
 details

---
 static/app/views/releases/detail/index.tsx    | 37 +++++++++++++++++--
 .../overview/releaseComparisonChart/index.tsx | 10 ++++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/static/app/views/releases/detail/index.tsx b/static/app/views/releases/detail/index.tsx
index e2ea5e94789d6a..f16881540351d1 100644
--- a/static/app/views/releases/detail/index.tsx
+++ b/static/app/views/releases/detail/index.tsx
@@ -1,6 +1,8 @@
 import {createContext} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
+import {Location} from 'history';
+import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 
 import Alert from 'app/components/alert';
@@ -10,7 +12,7 @@ import NoProjectMessage from 'app/components/noProjectMessage';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
 import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams';
 import PickProjectToContinue from 'app/components/pickProjectToContinue';
-import {URL_PARAM} from 'app/constants/globalSelectionHeader';
+import {PAGE_URL_PARAM, URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {IconInfo, IconWarning} from 'app/icons';
 import {t} from 'app/locale';
 import {PageContent} from 'app/styles/organization';
@@ -90,6 +92,21 @@ class ReleasesDetail extends AsyncView<Props, State> {
     };
   }
 
+  componentDidUpdate(prevProps, prevContext: Record<string, any>) {
+    const {organization, params, location} = this.props;
+
+    if (
+      prevProps.params.release !== params.release ||
+      prevProps.organization.slug !== organization.slug ||
+      !isEqual(
+        this.pickLocationQuery(prevProps.location),
+        this.pickLocationQuery(location)
+      )
+    ) {
+      super.componentDidUpdate(prevProps, prevContext);
+    }
+  }
+
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
     const {organization, location, params, releaseMeta} = this.props;
 
@@ -104,7 +121,7 @@ class ReleasesDetail extends AsyncView<Props, State> {
         {
           query: {
             adoptionStages: 1,
-            ...getParams(pick(location.query, [...Object.values(URL_PARAM)])),
+            ...getParams(this.pickLocationQuery(location)),
           },
         },
       ],
@@ -133,6 +150,13 @@ class ReleasesDetail extends AsyncView<Props, State> {
     return endpoints;
   }
 
+  pickLocationQuery(location: Location) {
+    return pick(location.query, [
+      ...Object.values(URL_PARAM),
+      ...Object.values(PAGE_URL_PARAM),
+    ]);
+  }
+
   renderError(...args) {
     const possiblyWrongProject = Object.values(this.state.errors).find(
       e => e?.status === 404 || e?.status === 403
@@ -227,8 +251,15 @@ class ReleasesDetailContainer extends AsyncComponent<
   }
 
   componentDidUpdate(prevProps, prevContext: Record<string, any>) {
-    super.componentDidUpdate(prevProps, prevContext);
+    const {organization, params} = this.props;
+
     this.removeGlobalDateTimeFromUrl();
+    if (
+      prevProps.params.release !== params.release ||
+      prevProps.organization.slug !== organization.slug
+    ) {
+      super.componentDidUpdate(prevProps, prevContext);
+    }
   }
 
   removeGlobalDateTimeFromUrl() {
diff --git a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
index f188461c69cceb..c1e62ed9d99258 100644
--- a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
+++ b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
@@ -138,7 +138,15 @@ function ReleaseComparisonChart({
       fetchEventsTotals();
       fetchIssuesTotals();
     }
-  }, [period, start, end, organization.slug, location]);
+  }, [
+    period,
+    start,
+    end,
+    organization.slug,
+    location.query.project,
+    location.query.environment,
+    release.version,
+  ]);
 
   useEffect(() => {
     const chartInUrl = decodeScalar(location.query.chart) as ReleaseComparisonChartType;

From 6c5611b8bc73530c31d8b18b6054f0fac40d7496 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Mon, 25 Oct 2021 10:33:21 +0200
Subject: [PATCH 2/2] convert array to string in useEffect dependencies

---
 .../releases/detail/overview/releaseComparisonChart/index.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
index c1e62ed9d99258..08544115c52b78 100644
--- a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
+++ b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
@@ -144,7 +144,7 @@ function ReleaseComparisonChart({
     end,
     organization.slug,
     location.query.project,
-    location.query.environment,
+    location.query.environment?.toString(),
     release.version,
   ]);