From 103672ef57ad5d9ae1f3a1185b70d9d1eed36ca4 Mon Sep 17 00:00:00 2001
From: Daniel Lockyer <hi@daniellockyer.com>
Date: Mon, 29 Jul 2024 11:57:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20spurious=20errors=20when?=
 =?UTF-8?q?=20loading=20modal=20before=20provider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix https://linear.app/tryghost/issue/SLO-190/error-no-dispatch-method-detected-did-you-embed-your-app-with

- we've spuriously been seeing `No dispatch method detected, did you
  embed your app with NiceModal.Provider` when browsing to a URL that
  loads a modal in Safari
- it looks like DesignSystemProvider (via DesignSystemApp) contains the
  NiceModal.Provider, but this is loaded within the RoutingProvider that
  could trigger a modal to load
- I tried switching around RoutingProvider and DesignSystemApp but many
  other tests failed, so my fix here is to add a NiceModal.Provider to
  wrap the RoutingProvider
- unfortunately, this bug is flaky to occur and I've only been able to
  reproduce it on Safari, so writing a test for this would be very
  tricky
---
 apps/admin-x-settings/src/App.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-settings/src/App.tsx b/apps/admin-x-settings/src/App.tsx
index c6590c9882..26292ceeb7 100644
--- a/apps/admin-x-settings/src/App.tsx
+++ b/apps/admin-x-settings/src/App.tsx
@@ -1,4 +1,5 @@
 import MainContent from './MainContent';
+import NiceModal from '@ebay/nice-modal-react';
 import SettingsAppProvider, {OfficialTheme, UpgradeStatusType} from './components/providers/SettingsAppProvider';
 import SettingsRouter, {loadModals, modalPaths} from './components/providers/SettingsRouter';
 import {DesignSystemApp, DesignSystemAppProps} from '@tryghost/admin-x-design-system';
@@ -18,12 +19,17 @@ function App({framework, designSystem, officialThemes, zapierTemplates, upgradeS
     return (
         <FrameworkProvider {...framework}>
             <SettingsAppProvider officialThemes={officialThemes} upgradeStatus={upgradeStatus} zapierTemplates={zapierTemplates}>
-                <RoutingProvider basePath='settings' modals={{paths: modalPaths, load: loadModals}}>
-                    <DesignSystemApp className='admin-x-settings' {...designSystem}>
-                        <SettingsRouter />
-                        <MainContent />
-                    </DesignSystemApp>
-                </RoutingProvider>
+                {/* NOTE: we need to have an extra NiceModal.Provider here because the one inside DesignSystemApp
+                    is loaded too late for possible modals in RoutingProvider, and it's quite hard to change it at
+                    this point */}
+                <NiceModal.Provider>
+                    <RoutingProvider basePath='settings' modals={{paths: modalPaths, load: loadModals}}>
+                        <DesignSystemApp className='admin-x-settings' {...designSystem}>
+                            <SettingsRouter />
+                            <MainContent />
+                        </DesignSystemApp>
+                    </RoutingProvider>
+                </NiceModal.Provider>
             </SettingsAppProvider>
         </FrameworkProvider>
     );