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);
}