Load translations on the client side

Translations need to be loaded on the client side so that they can be used the
globalization frameworks like 'angular-translate'. This translations are made
available by embedding the translations in the initial HTML payload.

src/ui/index.js

@@ -66,6 +66,7 @@ export default async (kbnServer, server, config) => {
 
   async function getKibanaPayload({ app, request, includeUserProvidedConfig }) {
     const uiSettings = server.uiSettings();
+    const translations = await uiI18n.getTranslationsForRequest(request);
 
     return {
       app: app,
@@ -76,6 +77,7 @@ export default async (kbnServer, server, config) => {
       basePath: config.get('server.basePath'),
       serverName: config.get('server.name'),
       devMode: config.get('env.dev'),
+      translations: translations,
       uiSettings: await props({
         defaults: uiSettings.getDefaults(),
         user: includeUserProvidedConfig && uiSettings.getUserProvided(request)

src/ui/public/chrome/api/translations.js

@@ -0,0 +1,5 @@
+export default function (chrome, internals) {
+  chrome.getTranslations = function () {
+    return internals.translations || [];
+  };
+}

src/ui/public/chrome/chrome.js

@@ -35,6 +35,7 @@ require('./api/angular')(chrome, internals);
 require('./api/controls')(chrome, internals);
 require('./api/template')(chrome, internals);
 require('./api/theme')(chrome, internals);
+require('./api/translations')(chrome, internals);
 
 chrome.bootstrap = function () {
   chrome.setupAngular();