Integrate translation module @superset-ui/translation (apache#6222)

* add translation modules

* Update package.json

* Update instructions in CONTRIBUTING

* Remove old files

* Add new entry point "translation"

* Change imports

* move setupTranslation code

* remove translation from entry

* Update python template

* Refactor utils into smaller, independent files

* Define preamble

* working state

* combine toggleCheckbox with setupApp

* move code block out of document.ready

* move setupClient to preamble

* fix unit tests

* update package version

* delete deletion code

CONTRIBUTING.md

@@ -394,10 +394,10 @@ from flask_babel import lazy_gettext as _
 then wrap our translatable strings with it, e.g. `_('Translate me')`. During extraction, string literals passed to `_` will be added to the generated `.po` file for each language for later translation.
 At runtime, the `_` function will return the translation of the given string for the current language, or the given string itself if no translation is available.
 
-In JavaScript, the technique is similar: we import `t` (simple translation), `tn` (translation containing a number), and `TCT` (translating entire React Components).
+In JavaScript, the technique is similar: we import `t` (simple translation), `tn` (translation containing a number).
 
 ```javascript
-import {t, tn, TCT} from locales;
+import {t, tn } from '@superset-ui/translation';
 ```
 
 ### Enabling language selection

superset/assets/package.json

@@ -52,6 +52,7 @@
     "@data-ui/theme": "^0.0.62",
     "@data-ui/xy-chart": "^0.0.61",
     "@superset-ui/core": "^0.0.7",
+    "@superset-ui/translation": "^0.2.1",
     "@vx/legend": "^0.0.170",
     "@vx/responsive": "0.0.172",
     "@vx/scale": "^0.0.165",
@@ -78,7 +79,6 @@
     "geojson-extent": "^0.3.2",
     "geolib": "^2.0.24",
     "immutable": "^3.8.2",
-    "jed": "^1.1.1",
     "jquery": "3.1.1",
     "json-bigint": "^0.3.0",
     "lodash": "^4.17.11",
@@ -97,7 +97,6 @@
     "react-bootstrap": "^0.31.5",
     "react-bootstrap-dialog": "^0.10.0",
     "react-bootstrap-slider": "2.1.5",
-    "react-bootstrap-table": "^4.3.1",
     "react-color": "^2.13.8",
     "react-datetime": "^2.14.0",
     "react-dnd": "^2.5.4",
@@ -126,7 +125,6 @@
     "redux-undo": "^1.0.0-beta9-9-7",
     "reselect": "^4.0.0",
     "shortid": "^2.2.6",
-    "sprintf-js": "^1.1.1",
     "srcdoc-polyfill": "^1.0.0",
     "supercluster": "^4.1.1",
     "underscore": "^1.8.3",

superset/assets/spec/helpers/shim.js

@@ -4,6 +4,7 @@ import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import jsdom from 'jsdom';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import { configure as configureTranslation } from '@superset-ui/translation';
 
 import setupSupersetClient from './setupSupersetClient';
 
@@ -48,4 +49,5 @@ global.window.location = { href: 'about:blank' };
 global.window.performance = { now: () => new Date().getTime() };
 global.$ = require('jquery')(global.window);
 
+configureTranslation();
 setupSupersetClient();

superset/assets/spec/javascripts/modules/utils_spec.jsx

@@ -5,7 +5,6 @@ import {
   d3TimeFormatPreset,
   defaultNumberFormatter,
   mainMetric,
-  getClientErrorObject,
 } from '../../../src/modules/utils';
 
 describe('utils', () => {
@@ -98,44 +97,4 @@ describe('utils', () => {
       expect(mainMetric(metrics)).toBe('foo');
     });
   });
-
-  describe('getClientErrorObject', () => {
-    it('Returns a Promise', () => {
-      const response = getClientErrorObject('error');
-      expect(response.constructor === Promise).toBe(true);
-    });
-
-    it('Returns a Promise that resolves to an object with an error key', () => {
-      const error = 'error';
-
-      return getClientErrorObject(error).then((errorObj) => {
-        expect(errorObj).toMatchObject({ error });
-      });
-    });
-
-    it('Handles Response that can be parsed as json', () => {
-      const jsonError = { something: 'something', error: 'Error message' };
-      const jsonErrorString = JSON.stringify(jsonError);
-
-      return getClientErrorObject(new Response(jsonErrorString)).then((errorObj) => {
-        expect(errorObj).toMatchObject(jsonError);
-      });
-    });
-
-    it('Handles Response that can be parsed as text', () => {
-      const textError = 'Hello I am a text error';
-
-      return getClientErrorObject(new Response(textError)).then((errorObj) => {
-        expect(errorObj).toMatchObject({ error: textError });
-      });
-    });
-
-    it('Handles plain text as input', () => {
-      const error = 'error';
-
-      return getClientErrorObject(error).then((errorObj) => {
-        expect(errorObj).toMatchObject({ error });
-      });
-    });
-  });
 });

superset/assets/spec/javascripts/utils/getClientErrorObject_spec.js

@@ -0,0 +1,41 @@
+import getClientErrorObject from '../../../src/utils/getClientErrorObject';
+
+describe('getClientErrorObject()', () => {
+  it('Returns a Promise', () => {
+    const response = getClientErrorObject('error');
+    expect(response.constructor === Promise).toBe(true);
+  });
+
+  it('Returns a Promise that resolves to an object with an error key', () => {
+    const error = 'error';
+
+    return getClientErrorObject(error).then((errorObj) => {
+      expect(errorObj).toMatchObject({ error });
+    });
+  });
+
+  it('Handles Response that can be parsed as json', () => {
+    const jsonError = { something: 'something', error: 'Error message' };
+    const jsonErrorString = JSON.stringify(jsonError);
+
+    return getClientErrorObject(new Response(jsonErrorString)).then((errorObj) => {
+      expect(errorObj).toMatchObject(jsonError);
+    });
+  });
+
+  it('Handles Response that can be parsed as text', () => {
+    const textError = 'Hello I am a text error';
+
+    return getClientErrorObject(new Response(textError)).then((errorObj) => {
+      expect(errorObj).toMatchObject({ error: textError });
+    });
+  });
+
+  it('Handles plain text as input', () => {
+    const error = 'error';
+
+    return getClientErrorObject(error).then((errorObj) => {
+      expect(errorObj).toMatchObject({ error });
+    });
+  });
+});

superset/assets/src/CRUD/CollectionTable.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import shortid from 'shortid';
-
+import { t } from '@superset-ui/translation';
 import Button from '../components/Button';
 import Fieldset from './Fieldset';
 import { recurseReactClone } from './utils';
 import './styles.css';
 
-import { t } from '../locales';
-
 const propTypes = {
   collection: PropTypes.arrayOf(PropTypes.object).isRequired,
   itemGenerator: PropTypes.func,

superset/assets/src/SqlLab/App.jsx

@@ -9,13 +9,13 @@ import getInitialState from './getInitialState';
 import rootReducer from './reducers';
 import { initEnhancer } from '../reduxUtils';
 import App from './components/App';
-import { appSetup } from '../common';
+import setupApp from '../setup/setupApp';
 
 import './main.less';
 import '../../stylesheets/reactable-pagination.css';
 import '../components/FilterableTable/FilterableTableStyles.css';
 
-appSetup();
+setupApp();
 
 const appContainer = document.getElementById('app');
 const bootstrapData = JSON.parse(appContainer.getAttribute('data-bootstrap'));

superset/assets/src/SqlLab/actions.js

@@ -1,15 +1,15 @@
 import shortid from 'shortid';
 import JSONbig from 'json-bigint';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import { now } from '../modules/dates';
-import { t } from '../locales';
 import {
   addSuccessToast as addSuccessToastAction,
   addDangerToast as addDangerToastAction,
   addInfoToast as addInfoToastAction,
 } from '../messageToasts/actions';
-import { COMMON_ERR_MESSAGES } from '../utils/common';
+import COMMON_ERR_MESSAGES from '../utils/errorMessages';
 
 export const RESET_STATE = 'RESET_STATE';
 export const ADD_QUERY_EDITOR = 'ADD_QUERY_EDITOR';
@@ -153,7 +153,7 @@ export function runQuery(query) {
       .catch((error) => {
         let message = error.error || error.statusText || t('Unknown error');
         if (message.includes('CSRF token')) {
-          message = COMMON_ERR_MESSAGES.SESSION_TIMED_OUT;
+          message = t(COMMON_ERR_MESSAGES.SESSION_TIMED_OUT);
         }
         // @TODO how to verify link?
         dispatch(queryFailed(query, message, error.link));

superset/assets/src/SqlLab/components/ExploreResultsButton.jsx

@@ -5,12 +5,12 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Alert } from 'react-bootstrap';
 import Dialog from 'react-bootstrap-dialog';
+import { t } from '@superset-ui/translation';
 
 import shortid from 'shortid';
 import { exportChart } from '../../explore/exploreUtils';
 import * as actions from '../actions';
 import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
-import { t } from '../../locales';
 import Button from '../../components/Button';
 
 const propTypes = {

superset/assets/src/SqlLab/components/HighlightedSql.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/dist/light';
 import sql from 'react-syntax-highlighter/dist/languages/hljs/sql';
 import github from 'react-syntax-highlighter/dist/styles/hljs/github';
+import { t } from '@superset-ui/translation';
 
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 
 registerLanguage('sql', sql);
 

superset/assets/src/SqlLab/components/QueryHistory.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import QueryTable from './QueryTable';
-import { t } from '../../locales';
 
 const propTypes = {
   queries: PropTypes.array.isRequired,

superset/assets/src/SqlLab/components/QuerySearch.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 import Select from 'react-select';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import Loading from '../../components/Loading';
@@ -14,7 +15,6 @@ import {
 } from '../../modules/dates';
 import { STATUS_OPTIONS, TIME_OPTIONS } from '../constants';
 import AsyncSelect from '../../components/AsyncSelect';
-import { t } from '../../locales';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,

superset/assets/src/SqlLab/components/QueryTable.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import moment from 'moment';
 import { Table } from 'reactable';
 import { Label, ProgressBar, Well } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import Link from './Link';
 import ResultSet from './ResultSet';
 import ModalTrigger from '../../components/ModalTrigger';
 import HighlightedSql from './HighlightedSql';
 import { fDuration } from '../../modules/dates';
 import { storeQuery } from '../../utils/common';
 import QueryStateLabel from './QueryStateLabel';
-import { t } from '../../locales';
 
 const propTypes = {
   columns: PropTypes.array,

superset/assets/src/SqlLab/components/ResultSet.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap';
 import shortid from 'shortid';
+import { t } from '@superset-ui/translation';
 
 import Loading from '../../components/Loading';
 import ExploreResultsButton from './ExploreResultsButton';
 import HighlightedSql from './HighlightedSql';
 import FilterableTable from '../../components/FilterableTable/FilterableTable';
 import QueryStateLabel from './QueryStateLabel';
-import { t } from '../../locales';
 
 const propTypes = {
   actions: PropTypes.object,

superset/assets/src/SqlLab/components/RunQueryActionButton.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
+
 import Button from '../../components/Button';
-import { t } from '../../locales';
 
 const propTypes = {
   allowAsync: PropTypes.bool.isRequired,

superset/assets/src/SqlLab/components/SaveQuery.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import Button from '../../components/Button';
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 
 const propTypes = {
   defaultLabel: PropTypes.string,

superset/assets/src/SqlLab/components/ShareSqlLabQuery.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import Button from '../../components/Button';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { storeQuery } from '../../utils/common';
-import { getClientErrorObject } from '../../modules/utils';
-import { t } from '../../locales';
+import getClientErrorObject from '../../utils/getClientErrorObject';
 import withToasts from '../../messageToasts/enhancers/withToasts';
 
 const propTypes = {

superset/assets/src/SqlLab/components/SouthPane.jsx

@@ -4,12 +4,12 @@ import shortid from 'shortid';
 import { Alert, Label, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { t } from '@superset-ui/translation';
 
 import * as Actions from '../actions';
 import QueryHistory from './QueryHistory';
 import ResultSet from './ResultSet';
 import { STATUS_OPTIONS, STATE_BSSTYLE_MAP } from '../constants';
-import { t } from '../../locales';
 
 /*
     editorQueries are queries executed by users passed from SqlEditor component

superset/assets/src/SqlLab/components/SqlEditor.jsx

@@ -14,6 +14,7 @@ import {
   Collapse,
 } from 'react-bootstrap';
 import SplitPane from 'react-split-pane';
+import { t } from '@superset-ui/translation';
 
 import Button from '../../components/Button';
 import TemplateParamsEditor from './TemplateParamsEditor';
@@ -26,8 +27,6 @@ import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import { STATE_BSSTYLE_MAP } from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';
-import { t } from '../../locales';
-
 
 const propTypes = {
   actions: PropTypes.object.isRequired,

superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx

@@ -4,12 +4,12 @@ import { ControlLabel, Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import Select from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import TableElement from './TableElement';
 import AsyncSelect from '../../components/AsyncSelect';
 import RefreshLabel from '../../components/RefreshLabel';
-import { t } from '../../locales';
 
 const propTypes = {
   queryEditor: PropTypes.object.isRequired,

superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -4,11 +4,11 @@ import { DropdownButton, MenuItem, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import URI from 'urijs';
+import { t } from '@superset-ui/translation';
 
 import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import { areArraysShallowEqual } from '../../reduxUtils';
-import { t } from '../../locales';
 import TabStatusIcon from './TabStatusIcon';
 
 const propTypes = {