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.

Refs: [FC-0012 project](https://openedx.atlassian.net/l/cp/XGS0iCcQ) implementing Translation Infrastructure OEP-58.

Makefile

@@ -1,6 +1,7 @@
 export TRANSIFEX_RESOURCE = frontend-app-payment
 transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
+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
@@ -42,9 +43,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 -f -t --mode reviewed --languages=$(transifex_langs)
+	tx pull -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-header/src/i18n/messages:frontend-component-header  \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+               translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-app-payment/src/i18n/messages:frontend-app-payment
+
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-payment
+endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -33,7 +33,7 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer": "^12.0.0",
     "@edx/frontend-component-header": "^4.0.0",
-    "@edx/frontend-platform": "^4.0.1",
+    "@edx/frontend-platform": "^4.2.0",
     "@edx/paragon": "^20.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",

src/i18n/index.jsx → src/i18n/index.js

@@ -1,3 +1,7 @@
+import { messages as paragonMessages } from '@edx/paragon';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+
 import arMessages from './messages/ar.json';
 import frMessages from './messages/fr.json';
 import es419Messages from './messages/es_419.json';
@@ -15,7 +19,7 @@ import itITMessages from './messages/it_IT.json';
 import ptPTMessages from './messages/pt_PT.json';
 // no need to import en messages-- they are in the defaultMessage field
 
-const messages = {
+const appMessages = {
   ar: arMessages,
   // override the protected translations
   'es-419': { ...es419Messages, ...es419MessagesProtected },
@@ -33,4 +37,9 @@ const messages = {
   'pt-pt': ptPTMessages,
 };
 
-export default messages;
+export default [
+  headerMessages,
+  footerMessages,
+  paragonMessages,
+  appMessages,
+];

src/index.jsx

@@ -14,17 +14,16 @@ import {
 } from '@edx/frontend-platform';
 import { ErrorPage, AppProvider } from '@edx/frontend-platform/react';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { messages as paragonMessages } from '@edx/paragon';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Switch } from 'react-router-dom';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { logError } from '@edx/frontend-platform/logging';
-import Header, { messages as headerMessages } from '@edx/frontend-component-header';
-import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+import Footer from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import messages from './i18n';
 import {
   PaymentPage,
   EcommerceRedirect,
@@ -140,12 +139,7 @@ subscribe(APP_AUTH_INITIALIZED, () => {
 });
 
 initialize({
-  messages: [
-    appMessages,
-    headerMessages,
-    footerMessages,
-    paragonMessages,
-  ],
+  messages,
   requireAuthenticatedUser: true,
   hydrateAuthenticatedUser: true,
 });