fix(feedback): Create a store so we can track feedback integration lo…

…ading and re-render (#73056)

This adds a context that we can use to store the loaded Feedback
integration, and re-render children when that thing is loaded. It's got
to be at the top of the react heirarchy like this because feedback is
also loaded high in the tree and rendered everywhere.

See getsentry/getsentry#14390

Related to getsentry/team-replay#438

static/app/components/feedback/widget/useFeedbackWidget.tsx

@@ -5,6 +5,9 @@ import * as Sentry from '@sentry/react';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import useAsyncSDKIntegrationStore from 'sentry/views/app/asyncSDKIntegrationProvider';
+
+type FeedbackIntegration = NonNullable<ReturnType<typeof Sentry.getFeedback>>;
 
 interface Props {
   buttonRef?: RefObject<HTMLButtonElement> | RefObject<HTMLAnchorElement>;
@@ -18,7 +21,12 @@ export default function useFeedbackWidget({
   messagePlaceholder,
 }: Props) {
   const config = useLegacyStore(ConfigStore);
-  const feedback = Sentry.getFeedback();
+  const {state} = useAsyncSDKIntegrationStore();
+
+  // TODO(ryan953): remove the fallback `?? Sentry.getFeedback()` after
+  // getsentry is calling `store.add(feedback);`
+  const feedback =
+    (state.Feedback as FeedbackIntegration | undefined) ?? Sentry.getFeedback();
 
   useEffect(() => {
     if (!feedback) {

static/app/views/app/asyncSDKIntegrationProvider.tsx

@@ -0,0 +1,28 @@
+import {createContext, useContext, useState} from 'react';
+import type {addIntegration} from '@sentry/react';
+
+type Integration = Parameters<typeof addIntegration>[0];
+
+type State = Record<string, Integration | undefined>;
+
+const context = createContext<{
+  setState: React.Dispatch<React.SetStateAction<State>>;
+  state: State;
+}>({
+  setState: () => {},
+  state: {},
+});
+
+export function AsyncSDKIntegrationContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [state, setState] = useState<State>({});
+
+  return <context.Provider value={{setState, state}}>{children}</context.Provider>;
+}
+
+export default function useAsyncSDKIntegrationStore() {
+  return useContext(context);
+}

static/app/views/app/index.tsx

@@ -27,6 +27,7 @@ import {useColorscheme} from 'sentry/utils/useColorscheme';
 import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useUser} from 'sentry/utils/useUser';
 import type {InstallWizardProps} from 'sentry/views/admin/installWizard';
+import {AsyncSDKIntegrationContextProvider} from 'sentry/views/app/asyncSDKIntegrationProvider';
 import {OrganizationContextProvider} from 'sentry/views/organizationContext';
 
 import SystemAlerts from './systemAlerts';
@@ -232,12 +233,14 @@ function App({children, params}: Props) {
   return (
     <Profiler id="App" onRender={onRenderCallback}>
       <OrganizationContextProvider>
-        <MainContainer tabIndex={-1} ref={mainContainerRef}>
-          <GlobalModal onClose={handleModalClose} />
-          <SystemAlerts className="messages-container" />
-          <Indicators className="indicators-container" />
-          <ErrorBoundary>{renderBody()}</ErrorBoundary>
-        </MainContainer>
+        <AsyncSDKIntegrationContextProvider>
+          <MainContainer tabIndex={-1} ref={mainContainerRef}>
+            <GlobalModal onClose={handleModalClose} />
+            <SystemAlerts className="messages-container" />
+            <Indicators className="indicators-container" />
+            <ErrorBoundary>{renderBody()}</ErrorBoundary>
+          </MainContainer>
+        </AsyncSDKIntegrationContextProvider>
       </OrganizationContextProvider>
     </Profiler>
   );