jenkinsci · scherler · Nov 17, 2016 · Oct 5, 2016 · Oct 5, 2016 · Oct 6, 2016
@@ -8,12 +8,11 @@ https://jenkins.io/blog/2016/05/26/introducing-blue-ocean/
 
 
 
-![Pirate logo, because it's ocean and stuff](logo-yarrr.png)
+![Pirate logo, because it's ocean and stuff](docu/pix/logo-yarrr.png)
 Yarr...
 
 # Modules of note
 ## blueocean-dashboard
-
 Blue Ocean Dashboard plugin. Currently contains the bulk of the Blue Ocean user interface. This is mostly client side JavaScript built with ES6 and React. 
 
 ## blueocean
@@ -79,8 +78,6 @@ List of browsers where we know Blue Ocean is not yet runnable:
 
 * Internet Explorer (all versions) on Windows
 
-
-
 # Developing 
 
 Follow the steps above for getting it running first. 
@@ -128,6 +125,18 @@ npm i
 npm shrinkwrap --dev
 ```
 
+
+# Contributing - help wanted
+
+## i18n - Sprechen Sie Deutsch?
+
+We have full i18n support in our plugins. Please read the [i18n documentation](./docu/I18N.md) on how you can provide new translations and how to work with i18n.
+
+## contributing guidelines
+
+Want to get involve with blueocean? See our [contributing guidelines](./CONTRIBUTING.md) for more informations.
+
+
 # Debug and live reload with IntelliJ
 Automatically deploys changes to an instance of blueocean that is run with hpi:run.
 

@@ -50,7 +50,7 @@ gulp.task("watch", ["clean-build"], () => {
 // Default to all
 
 gulp.task("default", () =>
-    runSequence("clean", "lint", "test", "build", "validate"));
+    runSequence("clean", "lint", "build", "validate"));
 
 // Clean and build only, for watching
 

@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.22-unpublished",
+  "version": "0.0.22-unreleased8",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {
@@ -29,6 +29,9 @@
     "es6-promise": "4.0.5",
     "eslint": "2.13.1",
     "eslint-plugin-react": "4.3.0",
+    "i18next": "^3.4.3",
+    "i18next-browser-languagedetector": "^1.0.0",
+    "i18next-xhr-backend": "^1.2.0",
     "isomorphic-fetch": "2.2.1",
     "jsonwebtoken": "7.1.9",
     "mobx": "2.6.0",

@@ -2,22 +2,21 @@
  * Created by cmeyers on 9/21/16.
  */
 
-import { ToastService as toastService } from './index';
+import { ToastService as toastService, I18n } from './index';
 import { buildRunDetailsUrlFromQueue } from './UrlBuilder';
 
 const CAPABILITY_MULTIBRANCH_PIPELINE = 'io.jenkins.blueocean.rest.model.BlueMultiBranchPipeline';
 const CAPABILITY_MULTIBRANCH_BRANCH = 'io.jenkins.blueocean.rest.model.BlueBranch';
 
-
 export default {
-
     /**
      *
      * @param runnable
      * @param runInfo
      * @param toastAction
      */
     createRunStartedToast: (runnable, runInfo, toastAction) => {
+        const translate = I18n.getFixedT(I18n.language, 'jenkins.plugins.blueocean.web.Messages');
         const isMultiBranch = runnable._capabilities.some(capability => (
             [CAPABILITY_MULTIBRANCH_PIPELINE, CAPABILITY_MULTIBRANCH_BRANCH].indexOf(capability) !== -1
         ));
@@ -31,10 +30,18 @@ export default {
         );
 
         const name = decodeURIComponent(runnable.name);
+        const text = translate('toast.run.started', {
+            0: name,
+            1: runId,
+            defaultValue: 'Started "{0}" #{1}',
+        });
 
+        const caption = translate('toast.run.open', {
+            defaultValue: 'Open',
+        });
         toastService.newToast({
-            text: `Started "${name}" #${runId}`,
-            action: 'Open',
+            text,
+            action: caption,
             onActionClick: () => {
                 if (toastAction) {
                     toastAction(runDetailsUrl);

@@ -1,14 +1,16 @@
 /**
  * Created by cmeyers on 8/26/16.
  */
-
 import React, { Component, PropTypes } from 'react';
 import { Icon } from 'react-material-icons-blue';
-
-import { RunApi as runApi } from '../';
-import { ToastService as toastService } from '../';
-import { ToastUtils } from '../';
+import {
+    RunApi as runApi,
+    ToastService as toastService,
+    ToastUtils,
+    I18n,
+} from '../';
 import Security from '../security';
+const translate = I18n ? I18n.getFixedT(I18n.language, 'jenkins.plugins.blueocean.web.Messages') : function() {};
 
 const { permit } = Security;
 
@@ -68,10 +70,13 @@ export class RunButton extends Component {
 
         const name = decodeURIComponent(this.props.runnable.name);
         const runId = this.props.latestRun.id;
-
-        toastService.newToast({
-            text: `Stopping "${name}" #${runId}...`,
+        const text = translate('toast.run.stopping', {
+            0: name,
+            1: runId,
+            defaultValue: 'Stoppping "{0}" #{1}',
         });
+
+        toastService.newToast({ text });
     }
 
     render() {
@@ -89,8 +94,14 @@ export class RunButton extends Component {
         showRunButton = showRunButton && permit(this.props.runnable).start();
         showStopButton = showStopButton && permit(this.props.runnable).stop();
 
-        const runLabel = this.props.runText || 'Run';
-        const stopLabel = this.state.stopping ? 'Stopping...' : 'Stop';
+        const runLabel = this.props.runText || translate('toast.run', {
+              defaultValue: 'Run',
+          });
+        const stopLabel = this.state.stopping ? translate('toast.stopping', {
+            defaultValue: 'Stopping ...',
+        }) : translate('toast.stop', {
+            defaultValue: 'Stop',
+        });
 
         if (!showRunButton && !showStopButton) {
             return null;

@@ -0,0 +1,64 @@
+import i18next from 'i18next';
+import LngDetector from 'i18next-browser-languagedetector';
+import XHR from 'i18next-xhr-backend';
+
+import urlConfig from '../urlconfig';
+
+/**
+ * Init language detector, we are going to use first queryString and then the navigator prefered language
+ */
+export const defaultLngDetector = new LngDetector(null, {
+    // order and from where user language should be detected
+    order: ['querystring', 'navigator'],
+    // keys or params to lookup language from
+    lookupQuerystring: 'language',
+});
+const prefix = urlConfig.getJenkinsRootURL() || '/';
+
+const loadPath = `${prefix}/i18n/resourceBundle?language={lng}&baseName={ns}`;
+/**
+ * configure the backend for our locale
+ */
+export const defaultXhr = new XHR(null, {
+    loadPath,
+    allowMultiLoading: false,
+    parse: (data) => {
+        // we need to parse the response and then extract the data since the rest is garbage for us
+        const response = JSON.parse(data);
+        return response.data;
+    },
+});
+
+/**
+ * Our default properties for i18next
+ * @type {{fallbackLng: string, ns: string[], defaultNS: string, preload: string[], keySeparator: boolean, debug: boolean, load: string, interpolation: {prefix: string, suffix: string, escapeValue: boolean}}}
+ */
+export const initOptions = {
+    fallbackLng: 'en',
+    // have a common namespace used around the full app
+    ns: ['jenkins.plugins.blueocean.web.Messages', 'jenkins.plugins.blueocean.dashboard.Messages'],
+    defaultNS: 'jenkins.plugins.blueocean.web.Messages',
+    preload: ['en'],
+    keySeparator: false, // we do not have any nested keys in properties files
+    debug: true, // for dev reasons ATM
+    load: 'all', // --> ['en-US', 'en', 'dev']
+    interpolation: {
+        prefix: '{',
+        suffix: '}',
+        escapeValue: false, // not needed for react!!
+    },
+};
+
+/**
+ * Create a instance of i18next and init it
+ * @param backend  {object} - the backend we want to use
+ * @param lngDetector {object} - the component that detects which language we want to display
+ * @param options {object} - general options for i18next
+ * @see defaultOptions
+ */
+export const i18n = (backend = defaultXhr, lngDetector = defaultLngDetector, options = initOptions) => i18next
+  .use(backend)
+  .use(lngDetector)
+  .init(options);
+
+export default i18n(defaultXhr, defaultLngDetector, initOptions);
@@ -40,3 +40,6 @@ export { toastService as ToastService };
 
 const runApi = new RunApi();
 export { runApi as RunApi };
+
+// export i18n provider
+export I18n, { defaultLngDetector, defaultXhr, initOptions, i18n } from './i18n/i18n';
diff --git a/blueocean-core-js/test/js/ToastService-spec.js b/blueocean-core-js/test/js/ToastService-spec.js
@@ -1,7 +1,7 @@
 /**
  * Created by cmeyers on 8/22/16.
  */
-import 'babel-polyfill';
+import 'babel-polyfill'
 import { assert } from 'chai';
 
 import { ToastService } from '../../src/js/ToastService';

@@ -10,7 +10,6 @@ import { RunButton } from '../../../src/js/components/RunButton';
 
 describe('RunButton', () => {
     let pipeline;
-
     beforeEach(() => {
         pipeline = utils.clone(require('../data/pipeline-1.json'));
     });