Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

🐛 Fixed spurious errors when loading modal before provider

Browse source 
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
This commit is contained in:
Daniel Lockyer 2024-07-29 11:57:53 +02:00 • committed by Daniel Lockyer
parent 184ef6274a
commit 103672ef57
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/admin-x-settings/src/App.tsx
View file

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