feat(ui): Tweak GlobalDrawer useEffect for closing

`currentDrawerConfig` undefined means the drawer should already be closed, no need to call `closeDrawer` (right?). We still want to maintain the defaut close behavior if `shouldCloseOnLocation` is not defined.

Author: billyvg

static/app/components/globalDrawer/index.tsx

@@ -110,6 +110,7 @@ export function GlobalDrawer({children}: any) {
   const [currentDrawerConfig, overwriteDrawerConfig] = useState<
     DrawerConfig | undefined
   >();
+  const currentDrawerConfigRef = useRef(currentDrawerConfig);
   // If no config is set, the global drawer is closed.
   const isDrawerOpen = !!currentDrawerConfig;
   const openDrawer = useCallback<DrawerContextType['openDrawer']>((renderer, options) => {
@@ -126,28 +127,27 @@ export function GlobalDrawer({children}: any) {
     closeDrawer();
   }, [currentDrawerConfig, closeDrawer]);
 
+  currentDrawerConfigRef.current = currentDrawerConfig;
+
   // Close the drawer when the browser history changes.
   useLayoutEffect(
     () => {
-      // Defaults to closing the drawer when the location changes
       if (
-        // Drawer should be closed already if `currentDrawerConfig` is undefined
-        currentDrawerConfig !== undefined &&
-        (currentDrawerConfig?.options.shouldCloseOnLocationChange?.(location) ?? true)
+        // No need to close drawer if it is not open
+        currentDrawerConfigRef.current !== undefined &&
+        // Otherwise, when the location changes, check callback or default to closing the drawer if it doesn't exist
+        (currentDrawerConfigRef.current.options?.shouldCloseOnLocationChange?.(
+          location
+        ) ??
+          true)
       ) {
         // Call `closeDrawer` without invoking `onClose` callback, since those callbacks often update the URL
         closeDrawer();
       }
     },
-    // Ignoring changes to currentDrawerConfig?.options to prevent closing the drawer when it opens
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      location?.pathname,
-      location?.search,
-      location?.hash,
-      closeDrawer,
-      currentDrawerConfig?.options.shouldCloseOnLocationChange,
-    ]
+    // Ignoring changes to currentDrawerConfig and currentDrawerConfig?.options
+    // to prevent closing the drawer when it opens.
+    [closeDrawer, location]
   );
 
   // Close the drawer when clicking outside the panel and options allow it.

static/app/views/releases/drawer/useReleasesDrawer.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import omit from 'lodash/omit';
 
 import useDrawer from 'sentry/components/globalDrawer';
@@ -51,32 +51,34 @@ export function useReleasesDrawer() {
     }
   }, [closeDrawer, showReleasesDrawer]);
 
+  const openDrawerFn = useMemo(
+    () =>
+      function () {
+        return <ReleasesDrawerDetails release={release} projectId={releaseProjectId} />;
+      },
+    [release, releaseProjectId]
+  );
+
+  const openDrawerOptions = useMemo(
+    () => ({
+      shouldCloseOnLocationChange: () => {
+        return false;
+      },
+      ariaLabel: t('Releases drawer'),
+      transitionProps: {stiffness: 1000},
+      onClose: () => {
+        navigate({
+          query: cleanLocationQuery(location.query),
+        });
+      },
+    }),
+    [location.query, navigate]
+  );
   useEffect(() => {
     if (showReleasesDrawer === '1' && release) {
-      openDrawer(
-        () => <ReleasesDrawerDetails release={release} projectId={releaseProjectId} />,
-        {
-          shouldCloseOnLocationChange: () => {
-            return false;
-          },
-          ariaLabel: t('Releases drawer'),
-          transitionProps: {stiffness: 1000},
-          onClose: () => {
-            navigate({
-              query: cleanLocationQuery(location.query),
-            });
-          },
-        }
-      );
+      openDrawer(openDrawerFn, openDrawerOptions);
     }
-  }, [
-    location.query,
-    navigate,
-    openDrawer,
-    release,
-    releaseProjectId,
-    showReleasesDrawer,
-  ]);
+  }, [openDrawer, openDrawerFn, openDrawerOptions, release, showReleasesDrawer]);
 
   useEffect(() => {
     if (rdChart) {