feat(perf): Use @sentry/status-page-list for domain status link (#6…

…8899)

Use
[`@sentry/domain-status-list`](https://github.com/getsentry/status-page-list),
which is where we're going to keep a domain --> status page lookup. Load
the library async when the component is rendered so we don't increase
everyone's bundle. Right now it's about 14KB.

- Add package
- Use `status-page-list` library

package.json

@@ -62,6 +62,7 @@
     "@sentry/node": "^7.109.0",
     "@sentry/react": "^7.109.0",
     "@sentry/release-parser": "^1.3.1",
+    "@sentry/status-page-list": "^0.0.1",
     "@sentry/types": "^7.109.0",
     "@sentry/utils": "^7.109.0",
     "@spotlightjs/spotlight": "^1.2.13",

static/app/views/performance/http/domainStatusLink.tsx

@@ -4,19 +4,27 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {DOMAIN_STATUS_PAGE_URLS} from 'sentry/views/performance/http/domainStatusPageURLs';
+import {useStatusPageList} from 'sentry/views/performance/http/useStatusPageList';
 
 interface Props {
   domain?: string;
 }
 
 export function DomainStatusLink({domain}: Props) {
+  const statusPageList = useStatusPageList();
+
   if (!domain) {
     return null;
   }
 
+  const statusPageURL = statusPageList?.domainToStatusPageUrls?.[domain];
+
+  if (!statusPageURL) {
+    return null;
+  }
+
   return (
-    <ExternalDomainLink href={DOMAIN_STATUS_PAGE_URLS[domain]}>
+    <ExternalDomainLink href={statusPageURL}>
       {t('Status')}
       <IconOpen />
     </ExternalDomainLink>

static/app/views/performance/http/useStatusPageList.tsx

@@ -0,0 +1,22 @@
+import {useCallback, useEffect, useState} from 'react';
+
+import {useIsMountedRef} from 'sentry/utils/useIsMountedRef';
+
+export function useStatusPageList() {
+  const isMountedRef = useIsMountedRef();
+  const [mod, setMod] = useState<any>({});
+
+  const loader = useCallback(async () => {
+    const loaded = await import('@sentry/status-page-list');
+
+    if (isMountedRef.current) {
+      setMod(loaded);
+    }
+  }, [isMountedRef]);
+
+  useEffect(() => {
+    loader();
+  }, [loader]);
+
+  return mod;
+}

yarn.lock

@@ -3079,6 +3079,11 @@
     "@sentry/types" "7.109.0"
     "@sentry/utils" "7.109.0"
 
+"@sentry/status-page-list@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@sentry/status-page-list/-/status-page-list-0.0.1.tgz#fb65dc67496067798dcd9b3285589ded63f0ecd1"
+  integrity sha512-LQSBWck49vqHdnt9gGKshlwtzhHLqTCAc7H1AIOF66BMmEkpsOzXjhloE7tJ8ufbuIHnPGvBseydA2CcSzwQTQ==
+
 "@sentry/[email protected]", "@sentry/types@^7.109.0":
   version "7.109.0"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.109.0.tgz#d8778358114ed05be734661cc9e1e261f4494947"