diff --git a/public/app/core/internationalization/index.tsx b/public/app/core/internationalization/index.tsx index bf1c889f91a..67c2beef69d 100644 --- a/public/app/core/internationalization/index.tsx +++ b/public/app/core/internationalization/index.tsx @@ -78,3 +78,15 @@ export function I18nProvider({ children }: I18nProviderProps) { ); } + +// This is only really used for ModalManager, as that creates a new react root we need to make sure is localisable. +export function provideI18n

(WrappedWithI18N: React.ComponentType

) { + const I18nProviderWrapper = (props: P) => { + return ( + + + + ); + }; + return I18nProviderWrapper; +} diff --git a/public/app/core/services/ModalManager.ts b/public/app/core/services/ModalManager.ts index a84880998d9..d30f76e4054 100644 --- a/public/app/core/services/ModalManager.ts +++ b/public/app/core/services/ModalManager.ts @@ -9,6 +9,7 @@ import { copyPanel } from 'app/features/dashboard/utils/panel'; import { ShowConfirmModalEvent, ShowConfirmModalPayload, ShowModalReactEvent } from '../../types/events'; import { AngularModalProxy } from '../components/modals/AngularModalProxy'; +import { provideI18n } from '../internationalization'; import { provideTheme } from '../utils/ConfigProvider'; export class ModalManager { @@ -32,7 +33,7 @@ export class ModalManager { }, }; - const elem = React.createElement(provideTheme(AngularModalProxy, config.theme2), modalProps); + const elem = React.createElement(provideI18n(provideTheme(AngularModalProxy, config.theme2)), modalProps); this.reactModalRoot.appendChild(this.reactModalNode); ReactDOM.render(elem, this.reactModalNode); }