Prevent setTimeout from firing if we can't match devtools user agent (#13349)

Fixes #13344

The `connectToDevtools` method inside `ApolloClient` runs a `setTimeout`
then checks the `window.navigator.userAgent` to see if it matches a
supported platform before logging the message. As #13344 points out,
this can be problematic in test environments since that `setTimeout` can
linger. Even worse is when that `setTimeout` outlives the virtual DOM
construction so `window` doesn't exist anymore which could cause
crashes.

This fix checks `window.navigator.userAgent` outside the `setTimeout`
and prevents it from scheduling if we're in a non Chrome/Firefox
environment.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved Apollo DevTools extension prompts by displaying them only in
supported browser contexts.
* Prevented unnecessary extension suggestions in embedded frames and
unsupported protocols.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jerelmiller

.changeset/lemon-fireants-build.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Prevent the `setTimeout` in `connectToDevtools` that shows the devtools suggestion from firing when the user agent does not match Chrome or Firefox. This check was previously done inside the `setTimeout` which meant the timer was scheduled for environments where we'd never show the message anyways. For test environments, this could cause flaky tests when that `setTimeout` outlived the tests and ran after any virtual DOM was torn down and removed.

src/core/ApolloClient.ts

@@ -1169,33 +1169,35 @@ export class ApolloClient {
      */
     if (!hasSuggestedDevtools && __DEV__) {
       hasSuggestedDevtools = true;
+      const win = window;
+
+      const ua = win.navigator.userAgent;
+      let url: string | undefined;
+
+      if (typeof ua === "string") {
+        if (ua.indexOf("Chrome/") > -1) {
+          url =
+            "https://chrome.google.com/webstore/detail/" +
+            "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm";
+        } else if (ua.indexOf("Firefox/") > -1) {
+          url =
+            "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
+        }
+      }
+
       if (
-        window.document &&
-        window.top === window.self &&
-        /^(https?|file):$/.test(window.location.protocol)
+        win.document &&
+        win.top === win.self &&
+        /^(https?|file):$/.test(win.location.protocol) &&
+        url
       ) {
         setTimeout(() => {
-          if (!(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__) {
-            const nav = window.navigator;
-            const ua = nav && nav.userAgent;
-            let url: string | undefined;
-            if (typeof ua === "string") {
-              if (ua.indexOf("Chrome/") > -1) {
-                url =
-                  "https://chrome.google.com/webstore/detail/" +
-                  "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm";
-              } else if (ua.indexOf("Firefox/") > -1) {
-                url =
-                  "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
-              }
-            }
-            if (url) {
-              invariant.log(
-                "Download the Apollo DevTools for a better development " +
-                  "experience: %s",
-                url
-              );
-            }
+          if (!(win as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__) {
+            invariant.log(
+              "Download the Apollo DevTools for a better development " +
+                "experience: %s",
+              url
+            );
           }
         }, 10000);
       }