Use defaultVariables to define variables for all translations (#3815)

GitOrigin-RevId: d7b30f523edba7c384d5207a44643acdbbedc74c

services/web/.storybook/preview.js

@@ -25,7 +25,10 @@ i18n.use(initReactI18next).init({
     prefix: '__',
     suffix: '__',
     unescapeSuffix: 'HTML',
-    skipOnVariables: true
+    skipOnVariables: true,
+    defaultVariables: {
+      appName: 'Overleaf'
+    }
   }
 })
 
@@ -84,7 +87,6 @@ const withTheme = (Story, context) => {
 export const decorators = [withTheme]
 
 window.ExposedSettings = {
-  appName: 'Overleaf',
   maxEntitiesPerProject: 10,
   maxUploadSize: 5 * 1024 * 1024
 }

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js

@@ -67,12 +67,7 @@ ShareProjectModalContent.propTypes = {
 function ErrorMessage({ error }) {
   switch (error) {
     case 'cannot_invite_non_user':
-      return (
-        <Trans
-          i18nKey="cannot_invite_non_user"
-          values={{ appName: window.ExposedSettings.appName }}
-        />
-      )
+      return <Trans i18nKey="cannot_invite_non_user" />
 
     case 'cannot_verify_user_not_robot':
       return <Trans i18nKey="cannot_verify_user_not_robot" />

services/web/frontend/js/i18n.js

@@ -31,7 +31,11 @@ i18n.use(initReactI18next).init({
 
     // Disable nesting in interpolated values, preventing user input
     // injection via another nested value
-    skipOnVariables: true
+    skipOnVariables: true,
+
+    defaultVariables: {
+      appName: window.ExposedSettings.appName
+    }
   }
 })
 

services/web/test/frontend/bootstrap.js

@@ -17,6 +17,13 @@ const chai = require('chai')
 chai.use(require('sinon-chai'))
 chai.use(require('chai-as-promised'))
 
+// Mock global settings
+window.ExposedSettings = {
+  appName: 'Overleaf',
+  maxEntitiesPerProject: 10,
+  maxUploadSize: 5 * 1024 * 1024
+}
+
 window.i18n = { currentLangCode: 'en' }
 require('../../frontend/js/i18n')
 
@@ -51,13 +58,6 @@ Object.defineProperty(global, 'localStorage', {
 const fetch = require('node-fetch')
 global.fetch = (url, ...options) => fetch('http://localhost' + url, ...options)
 
-// Mock global settings
-window.ExposedSettings = {
-  appName: 'Overleaf',
-  maxEntitiesPerProject: 10,
-  maxUploadSize: 5 * 1024 * 1024
-}
-
 // ignore CSS files
 const { addHook } = require('pirates')
 addHook(() => '', { exts: ['.css'], ignoreNodeModules: false })