I18n: Wrap event-based modals with I18nProvider (#52720)

public/app/core/internationalization/index.tsx

@@ -78,3 +78,15 @@ export function I18nProvider({ children }: I18nProviderProps) {
     </LinguiI18nProvider>
   );
 }
+
+// This is only really used for ModalManager, as that creates a new react root we need to make sure is localisable.
+export function provideI18n<P>(WrappedWithI18N: React.ComponentType<P>) {
+  const I18nProviderWrapper = (props: P) => {
+    return (
+      <I18nProvider>
+        <WrappedWithI18N {...props} />
+      </I18nProvider>
+    );
+  };
+  return I18nProviderWrapper;
+}

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