Integrate translation module @superset-ui/translation (#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,9 +1,10 @@
 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';
@@ -11,7 +12,6 @@ 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 = {

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { ButtonGroup, Collapse, Well } from 'react-bootstrap';
 import shortid from 'shortid';
+import { t } from '@superset-ui/translation';
 
 import CopyToClipboard from '../../components/CopyToClipboard';
 import Link from './Link';
 import ColumnElement from './ColumnElement';
 import ModalTrigger from '../../components/ModalTrigger';
 import Loading from '../../components/Loading';
-import { t } from '../../locales';
 
 const propTypes = {
   table: PropTypes.object,

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from 'react-bootstrap';
-
 import AceEditor from 'react-ace';
 import 'brace/mode/sql';
 import 'brace/mode/json';
@@ -9,10 +8,11 @@ import 'brace/mode/html';
 import 'brace/mode/markdown';
 import 'brace/theme/textmate';
 
+import { t } from '@superset-ui/translation';
+
 import ModalTrigger from '../../components/ModalTrigger';
 import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
 import Button from '../../components/Button';
-import { t } from '../../locales';
 
 const propTypes = {
   onChange: PropTypes.func,

superset/assets/src/SqlLab/getInitialState.js

@@ -1,5 +1,5 @@
 import shortid from 'shortid';
-import { t } from '../locales';
+import { t } from '@superset-ui/translation';
 import getToastsFromPyFlashMessages from '../messageToasts/utils/getToastsFromPyFlashMessages';
 
 export default function getInitialState({ defaultDbId, ...restBootstrapData }) {

superset/assets/src/SqlLab/reducers.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux';
 import shortid from 'shortid';
-import messageToasts from '../messageToasts/reducers';
+import { t } from '@superset-ui/translation';
 
+import messageToasts from '../messageToasts/reducers';
 import getInitialState from './getInitialState';
 import * as actions from './actions';
 import { now } from '../modules/dates';
@@ -13,7 +14,6 @@ import {
   getFromArr,
   addToArr,
 } from '../reduxUtils';
-import { t } from '../locales';
 
 export const sqlLabReducer = function (state = {}, action) {
   const actionHandlers = {

superset/assets/src/addSlice/AddSliceContainer.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Panel } from 'react-bootstrap';
 import Select from 'react-virtualized-select';
+import { t } from '@superset-ui/translation';
 import visTypes from '../explore/visTypes';
-import { t } from '../locales';
 
 const propTypes = {
   datasources: PropTypes.arrayOf(PropTypes.shape({

superset/assets/src/addSlice/App.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import { appSetup } from '../common';
+import setupApp from '../setup/setupApp';
 import AddSliceContainer from './AddSliceContainer';
 
-appSetup();
+setupApp();
 
 const addSliceContainer = document.getElementById('js-add-slice-container');
 const bootstrapData = JSON.parse(addSliceContainer.getAttribute('data-bootstrap'));

superset/assets/src/chart/chartAction.js

@@ -1,13 +1,13 @@
 /* global window, AbortController */
 /* eslint no-undef: 'error' */
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 import { getExploreUrlAndPayload, getAnnotationJsonUrl } from '../explore/exploreUtils';
 import { requiresQuery, ANNOTATION_SOURCE_TYPES } from '../modules/AnnotationTypes';
 import { addDangerToast } from '../messageToasts/actions';
 import { Logger, LOG_ACTIONS_LOAD_CHART } from '../logger';
-import { getClientErrorObject } from '../modules/utils';
 import { TIME_RANGE_SEPARATOR } from '../utils/common';
-import { t } from '../locales';
+import getClientErrorObject from '../utils/getClientErrorObject';
 
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';
 export function chartUpdateStarted(queryController, latestQueryFormData, key) {

superset/assets/src/chart/chartReducer.js

@@ -1,7 +1,7 @@
 /* eslint camelcase: 0 */
+import { t } from '@superset-ui/translation';
 import { now } from '../modules/dates';
 import * as actions from './chartAction';
-import { t } from '../locales';
 
 export const chart = {
   id: 0,

superset/assets/src/common.js

@@ -1,42 +0,0 @@
-/* eslint global-require: 0 */
-import $ from 'jquery';
-import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
-import { SupersetClient } from '@superset-ui/core';
-import { toggleCheckbox } from './modules/utils';
-import setupClient from './setup/setupClient';
-import setupColors from './setup/setupColors';
-import setupPlugins from './setup/setupPlugins';
-
-setupColors();
-setupPlugins();
-
-$(document).ready(function () {
-  $(':checkbox[data-checkbox-api-prefix]').change(function () {
-    const $this = $(this);
-    const prefix = $this.data('checkbox-api-prefix');
-    const id = $this.attr('id');
-    toggleCheckbox(prefix, '#' + id);
-  });
-
-  // for language picker dropdown
-  $('#language-picker a').click(function (ev) {
-    ev.preventDefault();
-    SupersetClient.get({
-      endpoint: ev.currentTarget.getAttribute('href'),
-      parseMethod: null,
-    })
-      .then(() => {
-        location.reload();
-      });
-  });
-});
-
-export function appSetup() {
-  setupClient();
-
-  // A set of hacks to allow apps to run within a FAB template
-  // this allows for the server side generated menus to function
-  window.$ = $;
-  window.jQuery = $;
-  require('bootstrap');
-}

superset/assets/src/components/AlteredSliceTag.jsx

@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Table, Tr, Td, Thead, Th } from 'reactable';
 import { isEqual, isEmpty } from 'lodash';
-
+import { t } from '@superset-ui/translation';
 import TooltipWrapper from './TooltipWrapper';
 import { controls } from '../explore/controls';
 import ModalTrigger from './ModalTrigger';
-import { t } from '../locales';
 
 const propTypes = {
   origFormData: PropTypes.object.isRequired,

superset/assets/src/components/AsyncSelect.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
-import { t } from '../locales';
 
 const propTypes = {
   dataEndpoint: PropTypes.string.isRequired,

superset/assets/src/components/CachedLabel.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Label } from 'react-bootstrap';
 import moment from 'moment';
+import { t } from '@superset-ui/translation';
 import TooltipWrapper from './TooltipWrapper';
-import { t } from '../locales';
 
 const propTypes = {
   onClick: PropTypes.func,

superset/assets/src/components/CopyToClipboard.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip, OverlayTrigger, MenuItem } from 'react-bootstrap';
-import { t } from '../locales';
+import { t } from '@superset-ui/translation';
 
 const propTypes = {
   copyNode: PropTypes.node,

superset/assets/src/components/EditableTitle.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { t } from '@superset-ui/translation';
 import TooltipWrapper from './TooltipWrapper';
-import { t } from '../locales';
 
 const propTypes = {
   title: PropTypes.string,

superset/assets/src/components/FaveStar.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { t } from '@superset-ui/translation';
 import TooltipWrapper from './TooltipWrapper';
-import { t } from '../locales';
 
 const propTypes = {
   itemId: PropTypes.number.isRequired,

superset/assets/src/components/RefreshChartOverlay.jsx

@@ -1,7 +1,7 @@
 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 = {
   height: PropTypes.number.isRequired,

superset/assets/src/components/TableLoader.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Table, Tr, Td } from 'reactable';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import withToasts from '../messageToasts/enhancers/withToasts';
-import { t } from '../locales';
 import Loading from '../components/Loading';
 import '../../stylesheets/reactable-pagination.css';
 

superset/assets/src/components/URLShortLinkButton.jsx

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

superset/assets/src/components/URLShortLinkModal.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
 import CopyToClipboard from './CopyToClipboard';
 import { getShortUrl } from '../utils/common';
-import { t } from '../locales';
 import withToasts from '../messageToasts/enhancers/withToasts';
 import ModalTrigger from './ModalTrigger';
 

superset/assets/src/dashboard/App.jsx

@@ -6,12 +6,14 @@ import { hot } from 'react-hot-loader';
 
 import { initFeatureFlags } from 'src/featureFlags';
 import { initEnhancer } from '../reduxUtils';
-import { appSetup } from '../common';
+import setupApp from '../setup/setupApp';
+import setupPlugins from '../setup/setupPlugins';
 import DashboardContainer from './containers/Dashboard';
 import getInitialState from './reducers/getInitialState';
 import rootReducer from './reducers/index';
 
-appSetup();
+setupApp();
+setupPlugins();
 
 const appContainer = document.getElementById('app');
 const bootstrapData = JSON.parse(appContainer.getAttribute('data-bootstrap'));

superset/assets/src/dashboard/actions/dashboardState.js

@@ -1,19 +1,19 @@
 /* eslint camelcase: 0 */
 import { ActionCreators as UndoActionCreators } from 'redux-undo';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import { addChart, removeChart, refreshChart } from '../../chart/chartAction';
 import { chart as initChart } from '../../chart/chartReducer';
 import { fetchDatasourceMetadata } from '../../dashboard/actions/datasources';
 import { applyDefaultFormData } from '../../explore/store';
-import { getClientErrorObject } from '../../modules/utils';
+import getClientErrorObject from '../../utils/getClientErrorObject';
 import {
   Logger,
   LOG_ACTIONS_CHANGE_DASHBOARD_FILTER,
   LOG_ACTIONS_REFRESH_DASHBOARD,
 } from '../../logger';
 import { SAVE_TYPE_OVERWRITE } from '../util/constants';
-import { t } from '../../locales';
 import {
   addSuccessToast,
   addWarningToast,

superset/assets/src/dashboard/actions/datasources.js

@@ -1,5 +1,5 @@
 import { SupersetClient } from '@superset-ui/core';
-import { getClientErrorObject } from '../../modules/utils';
+import getClientErrorObject from '../../utils/getClientErrorObject';
 
 export const SET_DATASOURCE = 'SET_DATASOURCE';
 export function setDatasource(datasource, key) {

superset/assets/src/dashboard/actions/sliceEntities.js

@@ -1,12 +1,10 @@
 /* eslint camelcase: 0 */
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import { addDangerToast } from '../../messageToasts/actions';
-import { t } from '../../locales';
-import {
-  getDatasourceParameter,
-  getClientErrorObject,
-} from '../../modules/utils';
+import { getDatasourceParameter } from '../../modules/utils';
+import getClientErrorObject from '../../utils/getClientErrorObject';
 
 export const SET_ALL_SLICES = 'SET_ALL_SLICES';
 export function setAllSlices(slices) {

superset/assets/src/dashboard/components/AddSliceCard.jsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t } from '../../locales';
+import { t } from '@superset-ui/translation';
 
 const propTypes = {
   datasourceLink: PropTypes.string,

superset/assets/src/dashboard/components/BuilderComponentPane.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import cx from 'classnames';
 import { StickyContainer, Sticky } from 'react-sticky';
 import { ParentSize } from '@vx/responsive';
+import { t } from '@superset-ui/translation';
 
 import NewColumn from './gridComponents/new/NewColumn';
 import NewDivider from './gridComponents/new/NewDivider';
@@ -12,7 +13,6 @@ import NewRow from './gridComponents/new/NewRow';
 import NewTabs from './gridComponents/new/NewTabs';
 import NewMarkdown from './gridComponents/new/NewMarkdown';
 import SliceAdder from '../containers/SliceAdder';
-import { t } from '../../locales';
 
 const SUPERSET_HEADER_HEIGHT = 59;
 

superset/assets/src/dashboard/components/CodeModal.jsx

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

superset/assets/src/dashboard/components/CssEditor.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
-
 import AceEditor from 'react-ace';
 import 'brace/mode/css';
 import 'brace/theme/github';
+import { t } from '@superset-ui/translation';
 
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 
 const propTypes = {
   initialCss: PropTypes.string,

superset/assets/src/dashboard/components/Dashboard.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
 
 import getChartIdsFromLayout from '../util/getChartIdsFromLayout';
 import DashboardBuilder from '../containers/DashboardBuilder';
@@ -21,8 +22,6 @@ import {
   LOG_ACTIONS_FIRST_DASHBOARD_LOAD,
 } from '../../logger';
 
-import { t } from '../../locales';
-
 import '../stylesheets/index.less';
 
 const propTypes = {

superset/assets/src/dashboard/components/DeleteComponentModal.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 
 const propTypes = {
   triggerNode: PropTypes.node.isRequired,

superset/assets/src/dashboard/components/Header.jsx

@@ -1,6 +1,7 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
 
 import HeaderActionsDropdown from './HeaderActionsDropdown';
 import EditableTitle from '../../components/EditableTitle';
@@ -9,7 +10,6 @@ import FaveStar from '../../components/FaveStar';
 import UndoRedoKeylisteners from './UndoRedoKeylisteners';
 
 import { chartPropShape } from '../util/propShapes';
-import { t } from '../../locales';
 import {
   UNDO_LIMIT,
   SAVE_TYPE_OVERWRITE,

superset/assets/src/dashboard/components/HeaderActionsDropdown.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { SupersetClient } from '@superset-ui/core';
 import { DropdownButton, MenuItem } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import CssEditor from './CssEditor';
 import RefreshIntervalModal from './RefreshIntervalModal';
 import SaveModal from './SaveModal';
 import injectCustomCss from '../util/injectCustomCss';
 import { SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
-import { t } from '../../locales';
 import URLShortLinkModal from '../../components/URLShortLinkModal';
 import getDashboardUrl from '../util/getDashboardUrl';
 

superset/assets/src/dashboard/components/MissingChart.jsx

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

superset/assets/src/dashboard/components/RefreshIntervalModal.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
+import { t } from '@superset-ui/translation';
+
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 
 const propTypes = {
   triggerNode: PropTypes.node.isRequired,

superset/assets/src/dashboard/components/SaveModal.jsx

@@ -1,10 +1,10 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { Button, FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import ModalTrigger from '../../components/ModalTrigger';
-import { t } from '../../locales';
 import Checkbox from '../../components/Checkbox';
 import { SAVE_TYPE_OVERWRITE, SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
 

superset/assets/src/dashboard/components/SliceAdder.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { DropdownButton, MenuItem } from 'react-bootstrap';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import SearchInput, { createFilter } from 'react-search-input';
+import { t } from '@superset-ui/translation';
 
 import AddSliceCard from './AddSliceCard';
 import AddSliceDragPreview from './dnd/AddSliceDragPreview';
@@ -12,7 +13,6 @@ import Loading from '../../components/Loading';
 import { CHART_TYPE, NEW_COMPONENT_SOURCE_TYPE } from '../util/componentTypes';
 import { NEW_CHART_ID, NEW_COMPONENTS_SOURCE_ID } from '../util/constants';
 import { slicePropShape } from '../util/propShapes';
-import { t } from '../../locales';
 
 const propTypes = {
   fetchAllSlices: PropTypes.func.isRequired,

superset/assets/src/dashboard/components/SliceHeader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { t } from '../../locales';
+import { t } from '@superset-ui/translation';
 import EditableTitle from '../../components/EditableTitle';
 import TooltipWrapper from '../../components/TooltipWrapper';
 import SliceHeaderControls from './SliceHeaderControls';

superset/assets/src/dashboard/components/SliceHeaderControls.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Dropdown, MenuItem } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import {
   Logger,
   LOG_ACTIONS_EXPLORE_DASHBOARD_CHART,
@@ -9,8 +11,6 @@ import {
   LOG_ACTIONS_REFRESH_CHART,
 } from '../../logger';
 
-import { t } from '../../locales';
-
 const propTypes = {
   slice: PropTypes.object.isRequired,
   isCached: PropTypes.bool,

superset/assets/src/dashboard/components/gridComponents/new/NewColumn.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { t } from '@superset-ui/translation';
 
 import { COLUMN_TYPE } from '../../../util/componentTypes';
 import { NEW_COLUMN_ID } from '../../../util/constants';
 import DraggableNewComponent from './DraggableNewComponent';
-import { t } from '../../../../locales';
 
 export default function DraggableNewColumn() {
   return (

superset/assets/src/dashboard/components/gridComponents/new/NewDivider.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { t } from '@superset-ui/translation';
 
 import { DIVIDER_TYPE } from '../../../util/componentTypes';
 import { NEW_DIVIDER_ID } from '../../../util/constants';
 import DraggableNewComponent from './DraggableNewComponent';
-import { t } from '../../../../locales';
 
 export default function DraggableNewDivider() {
   return (

superset/assets/src/dashboard/components/gridComponents/new/NewHeader.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { t } from '@superset-ui/translation';
 
 import { HEADER_TYPE } from '../../../util/componentTypes';
 import { NEW_HEADER_ID } from '../../../util/constants';
 import DraggableNewComponent from './DraggableNewComponent';
-import { t } from '../../../../locales';
 
 export default function DraggableNewHeader() {
   return (

superset/assets/src/dashboard/components/gridComponents/new/NewRow.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { t } from '@superset-ui/translation';
 
 import { ROW_TYPE } from '../../../util/componentTypes';
 import { NEW_ROW_ID } from '../../../util/constants';
 import DraggableNewComponent from './DraggableNewComponent';
-import { t } from '../../../../locales';
 
 export default function DraggableNewRow() {
   return (

superset/assets/src/dashboard/components/gridComponents/new/NewTabs.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { t } from '@superset-ui/translation';
 
 import { TABS_TYPE } from '../../../util/componentTypes';
 import { NEW_TABS_ID } from '../../../util/constants';
 import DraggableNewComponent from './DraggableNewComponent';
-import { t } from '../../../../locales';
 
 export default function DraggableNewTabs() {
   return (

superset/assets/src/dashboard/components/menu/MarkdownModeDropdown.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t } from '../../../locales';
+import { t } from '@superset-ui/translation';
 
 import PopoverDropdown from './PopoverDropdown';
 

superset/assets/src/dashboard/reducers/sliceEntities.js

@@ -1,11 +1,11 @@
+import { t } from '@superset-ui/translation';
+
 import {
   FETCH_ALL_SLICES_FAILED,
   FETCH_ALL_SLICES_STARTED,
   SET_ALL_SLICES,
 } from '../actions/sliceEntities';
 
-import { t } from '../../locales';
-
 export const initSliceEntities = {
   slices: {},
   isLoading: true,

superset/assets/src/dashboard/util/backgroundStyleOptions.js

@@ -1,4 +1,4 @@
-import { t } from '../../locales';
+import { t } from '@superset-ui/translation';
 import { BACKGROUND_TRANSPARENT, BACKGROUND_WHITE } from './constants';
 
 export default [

superset/assets/src/dashboard/util/headerStyleOptions.js

@@ -1,4 +1,4 @@
-import { t } from '../../locales';
+import { t } from '@superset-ui/translation';
 import { SMALL_HEADER, MEDIUM_HEADER, LARGE_HEADER } from './constants';
 
 export default [

superset/assets/src/datasource/DatasourceEditor.jsx

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Badge, Col, Label, Tabs, Tab, Well } from 'react-bootstrap';
 import shortid from 'shortid';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
-import { t } from '../locales';
-
 import Button from '../components/Button';
 import Loading from '../components/Loading';
 import CheckboxControl from '../explore/components/controls/CheckboxControl';

superset/assets/src/datasource/DatasourceModal.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Button, Modal } from 'react-bootstrap';
 import Dialog from 'react-bootstrap-dialog';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
-import { t } from '../locales';
 import DatasourceEditor from '../datasource/DatasourceEditor';
 import withToasts from '../messageToasts/enhancers/withToasts';
 

superset/assets/src/explore/App.jsx

@@ -11,11 +11,13 @@ import ExploreViewContainer from './components/ExploreViewContainer';
 import getInitialState from './reducers/getInitialState';
 import rootReducer from './reducers/index';
 
-import { appSetup } from '../common';
+import setupApp from '../setup/setupApp';
+import setupPlugins from '../setup/setupPlugins';
 import './main.css';
 import '../../stylesheets/reactable-pagination.css';
 
-appSetup();
+setupApp();
+setupPlugins();
 
 const exploreViewContainer = document.getElementById('app');
 const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstrap'));

superset/assets/src/explore/actions/exploreActions.js

@@ -1,7 +1,7 @@
 /* eslint camelcase: 0 */
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 import { addDangerToast } from '../../messageToasts/actions';
-import { t } from '../../locales';
 
 const FAVESTAR_BASE_URL = '/superset/favstar/slice';
 

superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup } from 'react-bootstrap';
 import VirtualizedSelect from 'react-virtualized-select';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../AdhocFilter';
 import adhocMetricType from '../propTypes/adhocMetricType';
 import columnType from '../propTypes/columnType';
-import { t } from '../../locales';
 import {
   OPERATORS,
   TABLE_ONLY_OPERATORS,

superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx

@@ -7,6 +7,7 @@ import 'brace/theme/github';
 import 'brace/ext/language_tools';
 import { FormGroup } from 'react-bootstrap';
 import VirtualizedSelect from 'react-virtualized-select';
+import { t } from '@superset-ui/translation';
 
 import { sqlWords } from '../../SqlLab/components/AceEditorWrapper';
 import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../AdhocFilter';
@@ -14,7 +15,6 @@ import adhocMetricType from '../propTypes/adhocMetricType';
 import columnType from '../propTypes/columnType';
 import OnPasteSelect from '../../components/OnPasteSelect';
 import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap';
-import { t } from '../../locales';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,

superset/assets/src/explore/components/AdhocMetricEditPopover.jsx

@@ -7,9 +7,9 @@ import AceEditor from 'react-ace';
 import 'brace/mode/sql';
 import 'brace/theme/github';
 import 'brace/ext/language_tools';
+import { t } from '@superset-ui/translation';
 
 import { AGGREGATES } from '../constants';
-import { t } from '../../locales';
 import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap';
 import OnPasteSelect from '../../components/OnPasteSelect';
 import AdhocMetricEditPopoverTitle from './AdhocMetricEditPopoverTitle';

superset/assets/src/explore/components/ControlHeader.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
 import { ControlLabel, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
-import { t } from '../../locales';
 
 const propTypes = {
   name: PropTypes.string,

superset/assets/src/explore/components/ControlPanelsContainer.jsx

@@ -4,13 +4,14 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Alert, Tab, Tabs } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import visTypes, { sectionsToRender } from '../visTypes';
 import ControlPanelSection from './ControlPanelSection';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import controls from '../controls';
 import * as actions from '../actions/exploreActions';
-import { t } from '../../locales';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,

superset/assets/src/explore/components/DisplayQueryButton.jsx

@@ -8,6 +8,7 @@ import jsonSyntax from 'react-syntax-highlighter/languages/hljs/json';
 import github from 'react-syntax-highlighter/styles/hljs/github';
 import { DropdownButton, MenuItem, Row, Col, FormControl } from 'react-bootstrap';
 import { Table } from 'reactable';
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
 
 import CopyToClipboard from './../../components/CopyToClipboard';
@@ -16,7 +17,6 @@ import { getExploreUrlAndPayload } from '../exploreUtils';
 import Loading from '../../components/Loading';
 import ModalTrigger from './../../components/ModalTrigger';
 import Button from '../../components/Button';
-import { t } from '../../locales';
 import RowCountLabel from './RowCountLabel';
 
 registerLanguage('markdown', markdownSyntax);

superset/assets/src/explore/components/EmbedCodeButton.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import CopyToClipboard from './../../components/CopyToClipboard';
 import { getExploreLongUrl } from '../exploreUtils';
-import { t } from '../../locales';
 
 const propTypes = {
   latestQueryFormData: PropTypes.object.isRequired,

superset/assets/src/explore/components/ExploreActionButtons.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { t } from '@superset-ui/translation';
+
 import URLShortLinkButton from '../../components/URLShortLinkButton';
 import EmbedCodeButton from './EmbedCodeButton';
 import DisplayQueryButton from './DisplayQueryButton';
-import { t } from '../../locales';
 import { exportChart, getExploreLongUrl } from '../exploreUtils';
 
 const propTypes = {

superset/assets/src/explore/components/ExploreChartHeader.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
 
 import { chartPropShape } from '../../dashboard/util/propShapes';
 import ExploreActionButtons from './ExploreActionButtons';
@@ -10,7 +11,6 @@ import FaveStar from '../../components/FaveStar';
 import TooltipWrapper from '../../components/TooltipWrapper';
 import Timer from '../../components/Timer';
 import CachedLabel from '../../components/CachedLabel';
-import { t } from '../../locales';
 
 const CHART_STATUS_MAP = {
   failed: 'danger',

superset/assets/src/explore/components/RowCountLabel.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Label } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
-import { t } from '../../locales';
 import { defaultNumberFormatter } from '../../modules/utils';
 import TooltipWrapper from '../../components/TooltipWrapper';
 

superset/assets/src/explore/components/SaveModal.jsx

@@ -2,10 +2,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-
 import { Modal, Alert, Button, Radio } from 'react-bootstrap';
 import Select from 'react-select';
-import { t } from '../../locales';
+import { t } from '@superset-ui/translation';
+
 import { supersetURL } from '../../utils/common';
 import { EXPLORE_ONLY_VIZ_TYPE } from '../constants';
 

superset/assets/src/explore/components/controls/AdhocFilterControl.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VirtualizedSelect from 'react-virtualized-select';
 
-import { t } from '../../../locales';
+import { t } from '@superset-ui/translation';
 import ControlHeader from '../ControlHeader';
 import adhocFilterType from '../../propTypes/adhocFilterType';
 import adhocMetricType from '../../propTypes/adhocMetricType';

superset/assets/src/explore/components/controls/AnnotationLayer.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { CompactPicker } from 'react-color';
 import { Button } from 'react-bootstrap';
 import mathjs from 'mathjs';
-
+import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/core';
+
 import SelectControl from './SelectControl';
 import TextControl from './TextControl';
 import CheckboxControl from './CheckboxControl';
@@ -21,8 +22,6 @@ import PopoverSection from '../../../components/PopoverSection';
 import ControlHeader from '../ControlHeader';
 import { nonEmpty } from '../../validators';
 import getChartMetadataRegistry from '../../../visualizations/core/registries/ChartMetadataRegistrySingleton';
-
-import { t } from '../../../locales';
 import getCategoricalSchemeRegistry from '../../../modules/colors/CategoricalSchemeRegistrySingleton';
 
 const AUTOMATIC_COLOR = '';

superset/assets/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Popover, ListGroup, ListGroupItem } from 'react-bootstrap';
 import { connect } from 'react-redux';
+import { t } from '@superset-ui/translation';
 import { getChartKey } from '../../exploreUtils';
 import { runAnnotationQuery } from '../../../chart/chartAction';
 import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
 
-
 import AnnotationLayer from './AnnotationLayer';
-import { t } from '../../../locales';
-
 
 const propTypes = {
   colorScheme: PropTypes.string.isRequired,

superset/assets/src/explore/components/controls/BoundsControl.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col, Row, FormGroup, FormControl } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 
 const propTypes = {
   onChange: PropTypes.func,

superset/assets/src/explore/components/controls/DatasourceControl.jsx

@@ -9,9 +9,9 @@ import {
   Tooltip,
   Well,
 } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 import DatasourceModal from '../../../datasource/DatasourceModal';
 import ColumnOption from '../../../components/ColumnOption';
 import MetricOption from '../../../components/MetricOption';

superset/assets/src/explore/components/controls/DateFilterControl.jsx

@@ -18,10 +18,10 @@ import {
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
+import { t } from '@superset-ui/translation';
 
 import './DateFilterControl.css';
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 import PopoverSection from '../../../components/PopoverSection';
 
 const TYPES = Object.freeze({

superset/assets/src/explore/components/controls/MetricsControl.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import VirtualizedSelect from 'react-virtualized-select';
+import { t } from '@superset-ui/translation';
+
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 import VirtualizedRendererWrap from '../../../components/VirtualizedRendererWrap';
 import OnPasteSelect from '../../../components/OnPasteSelect';
 import MetricDefinitionOption from '../MetricDefinitionOption';

superset/assets/src/explore/components/controls/SelectAsyncControl.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
+
 import Select from '../../../components/AsyncSelect';
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
-
 import withToasts from '../../../messageToasts/enhancers/withToasts';
 
 const propTypes = {

superset/assets/src/explore/components/controls/SelectControl.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VirtualizedSelect from 'react-virtualized-select';
 import Select, { Creatable } from 'react-select';
+import { t } from '@superset-ui/translation';
+
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 import VirtualizedRendererWrap from '../../../components/VirtualizedRendererWrap';
 import OnPasteSelect from '../../../components/OnPasteSelect';
 

superset/assets/src/explore/components/controls/SpatialControl.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import {
   Row, Col, Button, Label, OverlayTrigger, Popover,
 } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
 
 import ControlHeader from '../ControlHeader';
 import SelectControl from './SelectControl';
 import PopoverSection from '../../../components/PopoverSection';
 import Checkbox from '../../../components/Checkbox';
-import { t } from '../../../locales';
 
 const spatialTypes = {
   latlong: 'latlong',

superset/assets/src/explore/components/controls/TextAreaControl.jsx

@@ -8,12 +8,12 @@ import 'brace/mode/json';
 import 'brace/mode/html';
 import 'brace/mode/markdown';
 import 'brace/mode/javascript';
-
 import 'brace/theme/textmate';
 
+import { t } from '@superset-ui/translation';
+
 import ControlHeader from '../ControlHeader';
 import ModalTrigger from '../../../components/ModalTrigger';
-import { t } from '../../../locales';
 
 const propTypes = {
   name: PropTypes.string,

superset/assets/src/explore/components/controls/VizTypeControl.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import {
   Label, Row, Col, FormControl, Modal, OverlayTrigger,
   Tooltip } from 'react-bootstrap';
+import { t } from '@superset-ui/translation';
+
 import visTypes from '../../visTypes';
 import ControlHeader from '../ControlHeader';
-import { t } from '../../../locales';
 
 const propTypes = {
   description: PropTypes.string,

superset/assets/src/explore/controls.jsx

@@ -39,6 +39,7 @@
  * each and every visualization type.
  */
 import React from 'react';
+import { t } from '@superset-ui/translation';
 import {
   formatSelectOptionsForRange,
   formatSelectOptions,
@@ -49,7 +50,6 @@ import { PRIMARY_COLOR } from '../modules/colors';
 import { defaultViewport } from '../modules/geo';
 import ColumnOption from '../components/ColumnOption';
 import OptionDescription from '../components/OptionDescription';
-import { t } from '../locales';
 import getCategoricalSchemeRegistry from '../modules/colors/CategoricalSchemeRegistrySingleton';
 import getSequentialSchemeRegistry from '../modules/colors/SequentialSchemeRegistrySingleton';
 

superset/assets/src/explore/validators.js

@@ -4,7 +4,7 @@
  * as arguments and return something that evals to false if v is valid,
  * and an error message if not valid.
  * */
-import { t } from '../locales';
+import { t } from '@superset-ui/translation';
 
 export function numeric(v) {
   if (v && isNaN(v)) {

superset/assets/src/explore/visTypes.jsx

@@ -3,10 +3,11 @@
  * and associated with each and every visualization type.
  */
 import React from 'react';
+import { t } from '@superset-ui/translation';
+
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { D3_TIME_FORMAT_OPTIONS } from './controls';
 import * as v from './validators';
-import { t } from '../locales';
 
 export const sections = {
   druidTimeSeries: {

superset/assets/src/i18n.jsx

@@ -1,32 +0,0 @@
-import Jed from 'jed';
-
-const DEFAULT_LANGUAGE_PACK = {
-  domain: 'superset',
-  locale_data: {
-    superset: {
-      '': {
-        domain: 'superset',
-        lang: 'en',
-        plural_forms: 'nplurals=1; plural=0',
-      },
-    },
-  },
-};
-
-const i18n = (function () {
-  let languagePack = DEFAULT_LANGUAGE_PACK;
-
-  if (typeof window !== 'undefined') {
-    const root = document.getElementById('app');
-    const bootstrapData = root ? JSON.parse(root.getAttribute('data-bootstrap')) : {};
-    if (bootstrapData.common && bootstrapData.common.language_pack) {
-      languagePack = bootstrapData.common.language_pack;
-      delete bootstrapData.common.locale;
-      delete bootstrapData.common.language_pack;
-    }
-  }
-
-  return new Jed(languagePack);
-}());
-
-export default i18n;

superset/assets/src/locales.jsx

@@ -1,148 +0,0 @@
-/* eslint-disable global-require, import/no-dynamic-require */
-import React from 'react';
-import { sprintf } from 'sprintf-js';
-import i18n from './i18n';
-
-function formatForReact(formatString, args) {
-  const rv = [];
-  let cursor = 0;
-  sprintf.parse(formatString).forEach((match, idx) => {
-    const cpoyMatch = match;
-    let copyIdx = idx;
-    if (typeof match === 'string') {
-      rv.push(match);
-    } else {
-      let arg = null;
-      if (match[2]) {
-        arg = args[0][match[2][0]];
-      } else if (match[1]) {
-        arg = args[parseInt(match[1], 10) - 1];
-      } else {
-        arg = args[cursor++];
-      }
-      if (React.isValidElement(arg)) {
-        rv.push(React.cloneElement(arg, { key: idx }));
-      } else {
-        cpoyMatch[2] = null;
-        cpoyMatch[1] = 1;
-        rv.push(<span key={copyIdx++}>
-          {sprintf.format([cpoyMatch], [null, arg])}
-        </span>);
-      }
-    }
-  });
-  return rv;
-}
-
-function argsInvolveReact(args) {
-  if (args.some(React.isValidElement)) {
-    return true;
-  }
-  if (args.length === 1 && typeof args[0] === 'object') {
-    return Object.keys(args[0]).some(function (key) {
-      return React.isValidElement(args[0][key]);
-    });
-  }
-  return false;
-}
-
-export function parseComponentTemplate(string) {
-  const rv = {};
-  function process(startPos, group, inGroup) {
-    const regex = /\[(.*?)(:|\])|\]/g;
-    let match;
-    const buf = [];
-    let satisfied = false;
-    let pos = regex.lastIndex = startPos;
-    match = regex.exec(string);
-    while (match !== null) {
-      const substr = string.substr(pos, match.index - pos);
-      if (substr !== '') {
-        buf.push(substr);
-      }
-      if (match[0] === ']') {
-        if (inGroup) {
-          satisfied = true;
-          break;
-        } else {
-          pos = regex.lastIndex;
-          continue;
-        }
-      }
-      if (match[2] === ']') {
-        pos = regex.lastIndex;
-      } else {
-        pos = regex.lastIndex = process(regex.lastIndex, match[1], true);
-      }
-      buf.push({ group: match[1] });
-      match = regex.exec(string);
-    }
-    let endPos = regex.lastIndex;
-    if (!satisfied) {
-      const rest = string.substr(pos);
-      if (rest) {
-        buf.push(rest);
-      }
-      endPos = string.length;
-    }
-    rv[group] = buf;
-    return endPos;
-  }
-  process(0, 'root', false);
-  return rv;
-}
-
-export function renderComponentTemplate(template, components) {
-  let idx = 0;
-  function renderGroup(group) {
-    const children = [];
-    (template[group] || []).forEach((item) => {
-      if (typeof item === 'string') {
-        children.push(<span key={idx++}>{item}</span>);
-      } else {
-        children.push(renderGroup(item.group));
-      }
-    });
-    let reference = components[group] || <span key={idx++} />;
-    if (!React.isValidElement(reference)) {
-      reference = <span key={idx++}>{reference}</span>;
-    }
-    if (children.length > 0) {
-      return React.cloneElement(reference, { key: idx++ }, children);
-    }
-    return React.cloneElement(reference, { key: idx++ });
-  }
-  return renderGroup('root');
-}
-
-export function format(formatString, args) {
-  if (argsInvolveReact(args)) {
-    return formatForReact(formatString, args);
-  }
-  return sprintf(formatString, ...args);
-}
-
-export function gettext(string, ...args) {
-  if (!string || !i18n) {
-    return string;
-  }
-
-  let rv = i18n.gettext(string);
-  if (args.length > 0) {
-    rv = format(rv, args);
-  }
-  return rv;
-}
-
-export function ngettext(singular, plural, ...args) {
-  return format(i18n.ngettext(singular, plural, args[0] || 0), args);
-}
-
-export function gettextComponentTemplate(template, components) {
-  const tmpl = parseComponentTemplate(i18n.gettext(template));
-  return renderComponentTemplate(tmpl, components);
-}
-
-export const t = gettext;
-export const tn = ngettext;
-export const tct = gettextComponentTemplate;

superset/assets/src/modules/utils.js

@@ -1,10 +1,7 @@
 /* eslint camelcase: 0 */
-import d3 from 'd3';
 import $ from 'jquery';
-import { SupersetClient } from '@superset-ui/core';
+import d3 from 'd3';
 import { formatDate, UTC } from './dates';
-import { COMMON_ERR_MESSAGES } from '../utils/common';
-import { t } from '../locales';
 
 const siFormatter = d3.format('.3s');
 
@@ -109,70 +106,6 @@ export function showModal(options) {
   $(options.modalSelector).modal('show');
 }
 
-
-function showApiMessage(resp) {
-  const template =
-    '<div class="alert"> ' +
-    '<button type="button" class="close" ' +
-    'data-dismiss="alert">\xD7</button> </div>';
-  const severity = resp.severity || 'info';
-  $(template).addClass('alert-' + severity)
-             .append(resp.message)
-             .appendTo($('#alert-container'));
-}
-
-export function getClientErrorObject(response) {
-  // takes a Response object as input, attempts to read response as Json if possible,
-  // and returns a Promise that resolves to a plain object with error key and text value.
-  return new Promise((resolve) => {
-    if (typeof response === 'string') {
-      resolve({ error: response });
-    } else if (response && response.constructor === Response && !response.bodyUsed) {
-      // attempt to read the body as json, and fallback to text. we must clone the
-      // response in order to fallback to .text() because Response is single-read
-      response.clone().json().then((errorJson) => {
-        let error = { ...response, ...errorJson };
-        if (error.stack) {
-          error = {
-            ...error,
-            error: t('Unexpected error: ') +
-              (error.description || t('(no description, click to see stack trace)')),
-            stacktrace: error.stack,
-          };
-        } else if (error.responseText && error.responseText.indexOf('CSRF') >= 0) {
-          error = {
-            ...error,
-            error: COMMON_ERR_MESSAGES.SESSION_TIMED_OUT,
-          };
-        }
-        resolve(error);
-      }).catch(() => {
-        // fall back to reading as text
-        response.text().then((errorText) => {
-          resolve({ ...response, error: errorText });
-        });
-      });
-    } else {
-      // fall back to Response.statusText or generic error of we cannot read the response
-      resolve({ ...response, error: response.statusText || t('An error occurred') });
-    }
-  });
-
-}
-
-export function toggleCheckbox(apiUrlPrefix, selector) {
-  SupersetClient.get({ endpoint: apiUrlPrefix + $(selector)[0].checked })
-    .then(() => {})
-    .catch(response =>
-      getClientErrorObject(response)
-        .then((parsedResp) => {
-          if (parsedResp && parsedResp.message) {
-            showApiMessage(parsedResp);
-          }
-        }),
-      );
-}
-
 /**
  * Fix the height of the table body of a DataTable with scrollY set
  */