refactor: add transifex support to user-facing messages (#203)

* clean up and test segment integration

* add transifex config

* move user-facing messages into messages files and translate in usage

* lint cleanup

* fix introduced typos

* remove dead code

* remove should-be-ignored temp translation files

* make HistoryHeader use node-type to support translations

* fix apostrophe

* fix snapshot

* v1.4.42

.gitignore

@@ -17,3 +17,7 @@ dist/
 ### Development environments ###
 .idea
 .vscode
+
+### transifex ###
+src/i18n/transifex_input.json
+temp

.tx/config

@@ -0,0 +1,8 @@
+[main]
+host = https://www.transifex.com
+
+[edx-platform.frontend-app-gradebook]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type = KEYVALUEJSON

Makefile

@@ -2,8 +2,64 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
 
+transifex_resource = frontend-app-gradebook
+transifex_langs = "ar,fr,es_419,zh_CN"
+
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
+
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+NPM_TESTS=build i18n_extract lint test is-es5
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
+
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)
+
+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
-
-test:
-	npm run test 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-gradebook",
-  "version": "1.4.41",
+  "version": "1.4.42",
   "description": "edx editable gradebook-ui to manipulate grade overrides on subsections",
   "repository": {
     "type": "git",
@@ -10,6 +10,7 @@
     "build": "fedx-scripts webpack",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "is-es5": "es-check es5 ./dist/*.js",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
@@ -75,6 +76,7 @@
     "jest": "24.9.0",
     "react-dev-utils": "^5.0.3",
     "react-test-renderer": "^16.10.1",
+    "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
     "semantic-release": "^17.2.3",
     "travis-deploy-once": "^5.0.11"

src/components/BulkManagementTab/BulkManagementAlerts.jsx

@@ -1,20 +1,22 @@
 /* eslint-disable react/sort-comp, react/button-has-type */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
 import { Alert } from '@edx/paragon';
 
-import * as appConstants from 'data/constants/app';
 import selectors from 'data/selectors';
-
-const { messages: { BulkManagementTab: messages } } = appConstants;
+import messages from './messages';
 
 /**
  * <BulkManagementAlerts />
  * Alerts to display at the top of the BulkManagement tab
  */
-export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
+export const BulkManagementAlerts = ({
+  bulkImportError,
+  uploadSuccess,
+}) => (
   <>
     <Alert
       variant="danger"
@@ -28,7 +30,7 @@ export const BulkManagementAlerts = ({ bulkImportError, uploadSuccess }) => (
       show={uploadSuccess}
       dismissible={false}
     >
-      {messages.successDialog}
+      <FormattedMessage {...messages.successDialog} />
     </Alert>
   </>
 );

src/components/BulkManagementTab/BulkManagementAlerts.test.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
-import * as appConstants from 'data/constants/app';
+import messages from './messages';
 
 import { BulkManagementAlerts, mapStateToProps } from './BulkManagementAlerts';
 
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+  FormattedMessage: () => 'FormattedMessage',
+}));
 jest.mock('@edx/paragon', () => ({
   Alert: () => 'Alert',
 }));
@@ -61,8 +66,8 @@ describe('BulkManagementAlerts', () => {
       });
       test('open success alert with messages.successDialog content', () => {
         expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().text()).toEqual(
-          appConstants.messages.BulkManagementTab.successDialog,
+        expect(el.childAt(1).children().getElement()).toEqual(
+          <FormattedMessage {...messages.successDialog} />,
         );
         expect(el.childAt(1).props().show).toEqual(true);
       });

src/components/BulkManagementTab/FileUploadForm.jsx

@@ -3,18 +3,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
 import {
   Button,
   Form,
   FormControl,
   FormGroup,
 } from '@edx/paragon';
 
-import { messages } from 'data/constants/app';
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
-
-const { csvUploadLabel, importBtnText } = messages.BulkManagementTab;
+import messages from './messages';
 
 /**
  * <FileUploadForm />
@@ -56,22 +56,23 @@ export class FileUploadForm extends React.Component {
   }
 
   render() {
+    const { gradeExportUrl } = this.props;
     return (
       <>
-        <Form action={this.props.gradeExportUrl} method="post">
+        <Form action={gradeExportUrl} method="post">
           <FormGroup controlId="csv">
             <FormControl
               className="d-none"
               type="file"
-              label={csvUploadLabel}
+              label={<FormattedMessage {...messages.csvUploadLabel} />}
               onChange={this.handleFileInputChange}
               ref={this.fileInputRef}
             />
           </FormGroup>
         </Form>
 
         <Button variant="primary" onClick={this.handleClickImportGrades}>
-          {importBtnText}
+          <FormattedMessage {...messages.importBtnText} />
         </Button>
       </>
     );