feat: use atlas in make pull_translations

Changes ------- - Bump frontend-platform to bring `intl-imports.js` script - Move all i18n imports into `src/i18n/index.js` so `intl-imports.js` can override it with latest translations - Add `atlas` into `make pull_translations` when `OPENEDX_ATLAS_PULL` environment variable is set. - package.json and package-lock.json are copied from #176 - updated snapshots and updated tests in sync with `frontend-platform` - require package-lock.json version 3: same as #176 Refs: [FC-0012 project](https://openedx.atlassian.net/l/cp/XGS0iCcQ) implementing Translation Infrastructure OEP-58.
openedx · Apr 25, 2023 · 7de0c21 · 7de0c21
1 parent 2fa46ab
commit 7de0c21
Show file tree

Hide file tree

Showing 8 changed files with 1,113 additions and 23,444 deletions.
diff --git a/.github/workflows/lockfileversion-check.yml b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
diff --git a/Makefile b/Makefile
@@ -5,6 +5,7 @@ npm-install-%: ## install specified % npm package
 transifex_resource = frontend-app-ora-grading
 transifex_langs = "ar,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -53,9 +54,24 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull --filter=$(transifex_langs) \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-ora-grading/src/i18n/messages:frontend-app-ora-grading
+
+	$(intl_imports) frontend-component-footer frontend-component-header paragon frontend-app-ora-grading
+endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.5.1",
-    "@edx/paragon": "^19.9.0",
+    "@edx/frontend-component-footer": "^11.7.0",
+    "@edx/frontend-component-header": "^3.7.0",
+    "@edx/frontend-platform": "^4.1.0",
+    "@edx/paragon": "^20.30.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -73,7 +73,8 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "12.4",
+    "@edx/browserslist-config": "^1.2.0",
+    "@edx/frontend-build": "^12.7.0",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

diff --git a/src/__snapshots__/index.test.jsx.snap b/src/__snapshots__/index.test.jsx.snap
@@ -7,29 +7,17 @@ exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPag
 `;
 
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
-  <AppProvider
-    store={
-      Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
+<AppProvider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
     }
-  >
-    <App />
-  </AppProvider>
-</IntlProvider>
+  }
+>
+  <App />
+</AppProvider>
 `;
diff --git a/src/i18n/index.jsx → src/i18n/index.js b/src/i18n/index.jsx → src/i18n/index.js
@@ -1,3 +1,7 @@
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as headerMesssages } from '@edx/frontend-component-header';
+import { messages as paragonMessages } from '@edx/paragon';
+
 import arMessages from './messages/ar.json';
 // no need to import en messages-- they are in the defaultMessage field
 import es419Messages from './messages/es_419.json';
@@ -11,7 +15,7 @@ import ptptMessages from './messages/pt_PT.json';
 import ruMessages from './messages/ru.json';
 import ukMessages from './messages/uk.json';
 
-const messages = {
+const appMessages = {
   ar: arMessages,
   'es-419': es419Messages,
   fr: frMessages,
@@ -25,4 +29,9 @@ const messages = {
   uk: ukMessages,
 };
 
-export default messages;
+export default [
+  headerMesssages,
+  footerMessages,
+  paragonMessages,
+  appMessages,
+];
diff --git a/src/index.jsx b/src/index.jsx
@@ -15,22 +15,15 @@ import {
   mergeConfig,
 } from '@edx/frontend-platform';
 
-import { messages as footerMessages } from '@edx/frontend-component-footer';
-import { messages as headerMesssages } from '@edx/frontend-component-header';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
 import messages from './i18n';
 
 import App from './App';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <App />
-      </AppProvider>
-    </IntlProvider>,
+    <AppProvider store={store}>
+      <App />
+    </AppProvider>,
     document.getElementById('root'),
   );
 });
@@ -52,10 +45,6 @@ initialize({
       }, appName);
     },
   },
-  messages: [
-    messages,
-    headerMesssages,
-    footerMessages,
-  ],
+  messages,
   requireAuthenticatedUser: true,
 });
diff --git a/src/index.test.jsx b/src/index.test.jsx
@@ -8,10 +8,7 @@ import {
   subscribe,
 } from '@edx/frontend-platform';
 
-import { messages as footerMessages } from '@edx/frontend-component-footer';
-import { messages as headerMesssages } from '@edx/frontend-component-header';
-
-import appMessages from './i18n';
+import messages from './i18n';
 import * as app from '.';
 
 jest.mock('react-dom', () => ({
@@ -70,7 +67,7 @@ describe('app registry', () => {
   test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);
     const initializeArg = initialize.mock.calls[0][0];
-    expect(initializeArg.messages).toEqual([appMessages, headerMesssages, footerMessages]);
+    expect(initializeArg.messages).toEqual(messages);
     expect(initializeArg.requireAuthenticatedUser).toEqual(true);
   });
   test('initialize config loads support url if available', () => {