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. - Refactored i18n utils into own file to avoid overwriting them by atlas Refs: [FC-0012 project](https://openedx.atlassian.net/l/cp/XGS0iCcQ) implementing Translation Infrastructure OEP-58.
openedx · May 5, 2023 · 3dc9212 · 3dc9212
1 parent 6778948
commit 3dc9212
Show file tree

Hide file tree

Showing 12 changed files with 572 additions and 822 deletions.
diff --git a/Makefile b/Makefile
@@ -4,6 +4,7 @@ npm-install-%: ## install specified % npm package
 export TRANSIFEX_RESOURCE = frontend-app-gradebook
 transifex_langs = "ar,de,es_419,fa_IR,fr,fr_CA,hi,it,pt,ru,uk,zh_CN"
 
+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
@@ -54,9 +55,23 @@ 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/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
+
+	$(intl_imports) frontend-component-header frontend-component-footer frontend-app-gradebook
+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
@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "2.5.0",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-component-header": "^4.0.0",
+    "@edx/frontend-platform": "^4.2.0",
     "@edx/paragon": "^19.25.4",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
@@ -47,12 +47,11 @@
     "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "query-string": "6.13.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-helmet": "^6.1.0",
-    "react-intl": "^2.9.0",
     "react-redux": "^7.1.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",

diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
@@ -7,7 +7,7 @@ import { Form } from '@edx/paragon';
 
 import selectors from 'data/selectors';
 import actions from 'data/actions';
-import { getLocalizedSlash } from 'i18n';
+import { getLocalizedSlash } from 'i18n/utils';
 
 /**
  * <AdjustedGradeInput />

diff --git a/src/components/GradesView/GradebookTable/index.jsx b/src/components/GradesView/GradebookTable/index.jsx
@@ -8,7 +8,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
-import { getLocalizedPercentSign } from 'i18n';
+import { getLocalizedPercentSign } from 'i18n/utils';
 
 import messages from './messages';
 import Fields from './Fields';

diff --git a/src/data/selectors/grades.js b/src/data/selectors/grades.js
@@ -3,7 +3,7 @@ import { StrictDict } from 'utils';
 
 import { Headings, GradeFormats } from 'data/constants/grades';
 import { formatDateForDisplay } from 'data/actions/utils';
-import { getLocalizedSlash } from 'i18n';
+import { getLocalizedSlash } from 'i18n/utils';
 import simpleSelectorFactory from '../utils';
 import * as module from './grades';
 

diff --git a/src/i18n/index.jsx → src/i18n/index.js b/src/i18n/index.jsx → src/i18n/index.js
@@ -1,4 +1,6 @@
-import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+
 import arMessages from './messages/ar.json';
 import deMessages from './messages/de.json';
 import es419Messages from './messages/es_419.json';
@@ -13,7 +15,7 @@ import ukMessages from './messages/uk.json';
 import zhcnMessages from './messages/zh_CN.json';
 // no need to import en messages-- they are in the defaultMessage field
 
-const messages = {
+const appMessages = {
   ar: arMessages,
   'es-419': es419Messages,
   'fa-ir': faIRMessages,
@@ -28,25 +30,8 @@ const messages = {
   uk: ukMessages,
 };
 
-export const getLocalizedSlash = () => {
-  // For fractional grades
-  // if we are in a LTR language, we want to use a forward slash.
-  // If we are in a RTL language, we want to use a backslash instead
-  if (isRtl(getLocale())) {
-    return '\\';
-  }
-  return '/';
-};
-
-export const getLocalizedPercentSign = () => {
-  // LTR languages put the percent to the right of a number.
-  // RTL languages put the percent sign to the left of the number.
-  // We can place a non-printing unicode right-to-left marker next to the percent
-  // sign to make it print to the left of the number if we are currently in a LTR language
-  if (isRtl(getLocale())) {
-    return '\u200f%';
-  }
-  return '%';
-};
-
-export default messages;
+export default [
+  footerMessages,
+  headerMessages,
+  appMessages,
+];
diff --git a/src/i18n/utils.js b/src/i18n/utils.js
@@ -0,0 +1,22 @@
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
+
+export const getLocalizedSlash = () => {
+  // For fractional grades
+  // if we are in a LTR language, we want to use a forward slash.
+  // If we are in a RTL language, we want to use a backslash instead
+  if (isRtl(getLocale())) {
+    return '\\';
+  }
+  return '/';
+};
+
+export const getLocalizedPercentSign = () => {
+  // LTR languages put the percent to the right of a number.
+  // RTL languages put the percent sign to the left of the number.
+  // We can place a non-printing unicode right-to-left marker next to the percent
+  // sign to make it print to the left of the number if we are currently in a LTR language
+  if (isRtl(getLocale())) {
+    return '\u200f%';
+  }
+  return '%';
+};
diff --git a/src/i18n/index.test.jsx → src/i18n/utils.test.jsx b/src/i18n/index.test.jsx → src/i18n/utils.test.jsx
@@ -1,5 +1,5 @@
 import { isRtl } from '@edx/frontend-platform/i18n';
-import { getLocalizedSlash, getLocalizedPercentSign } from './index';
+import { getLocalizedSlash, getLocalizedPercentSign } from './utils';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   isRtl: jest.fn(),

diff --git a/src/index.jsx b/src/index.jsx
@@ -10,10 +10,8 @@ import {
   mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import messages from './i18n';
 import App from './App';
 
 subscribe(APP_READY, () => {
@@ -37,10 +35,6 @@ initialize({
       });
     },
   },
-  messages: [
-    appMessages,
-    headerMessages,
-    footerMessages,
-  ],
+  messages,
   requireAuthenticatedUser: true,
 });
diff --git a/src/index.test.jsx b/src/index.test.jsx
@@ -7,10 +7,8 @@ import {
   mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import messages from './i18n';
 import App from './App';
 import '.';
 
@@ -23,12 +21,6 @@ jest.mock('@edx/frontend-platform', () => ({
   mergeConfig: jest.fn(),
   subscribe: jest.fn(),
 }));
-jest.mock('@edx/frontend-component-header', () => ({
-  messages: ['some', 'messages'],
-}));
-jest.mock('@edx/frontend-component-footer', () => ({
-  messages: ['some', 'messages'],
-}));
 jest.mock('./App', () => 'App');
 
 describe('app registry', () => {
@@ -50,7 +42,7 @@ describe('app registry', () => {
   });
   test('initialize is called with requireAuthenticatedUser, messages, and a config handler', () => {
     expect(initialize).toHaveBeenCalledWith({
-      messages: [appMessages, headerMessages, footerMessages],
+      messages,
       requireAuthenticatedUser: true,
       handlers: {
         config: expect.any(Function),

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -32,6 +32,13 @@ jest.mock('@edx/frontend-platform/i18n', () => {
   };
 });
 
+jest.mock('@edx/frontend-component-header', () => ({
+  messages: ['some', 'messages'],
+}));
+jest.mock('@edx/frontend-component-footer', () => ({
+  messages: ['some', 'messages'],
+}));
+
 jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
   Alert: 'Alert',
   ActionRow: 'ActionRow',