Add i18n support to tours

packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js

@@ -164,6 +164,15 @@ RED.tourGuide = (function() {
         }
         finish();
 
+    }
+    function getLocaleText(property) {
+        if (typeof property === 'string') {
+            return property;
+        }
+        var currentLang = RED.i18n.lang() || 'en-US';
+        var availableLangs = Object.keys(property);
+        return property[currentLang]||property['en-US']||property[availableLangs[0]]
+
     }
     function runTourStep(step, state, done) {
         shade.fadeIn();
@@ -214,9 +223,9 @@ RED.tourGuide = (function() {
                 $('<h2><i class="'+step.titleIcon+'"></i></h2>').appendTo(stepDescription);
             }
             if (step.title) {
-                $('<h2>').text(step.title).appendTo(stepDescription);
+                $('<h2>').text(getLocaleText(step.title)).appendTo(stepDescription);
             }
-            $('<div>').css("text-align","left").html(step.description).appendTo(stepDescription);
+            $('<div>').css("text-align","left").html(getLocaleText(step.description)).appendTo(stepDescription);
 
             var stepToolbar = $('<div>',{class:"red-ui-tourGuide-toolbar"}).appendTo(stepContent);
 

packages/node_modules/@node-red/editor-client/src/tours/welcome.js

@@ -3,13 +3,13 @@ export default {
     steps: [
         {
             titleIcon: "fa fa-map-o",
-            title: "Welcome to Node-RED 2.1!",
+            title: { "en-US": "Welcome to Node-RED 2.1!" },
-            description: "Let's take a moment to discover the new features in this release."
+            description: { "en-US": "Let's take a moment to discover the new features in this release." }
         },
         {
-            title: "A new Tour Guide",
+            title: { "en-US": "A new Tour Guide" },
-            description: "<p>First, as you've already found, we now have this tour of new features. We'll only show the tour the first time you open the editor for each new version of Node-RED.</p>"+
+            description: { "en-US": "<p>First, as you've already found, we now have this tour of new features. We'll only show the tour the first time you open the editor for each new version of Node-RED.</p>"+
-                         "<p>You can choose not to see this tour in the future by disabling it under the View tab of User Settings.</p>",
+                         "<p>You can choose not to see this tour in the future by disabling it under the View tab of User Settings.</p>" }
         },
         {
             prepare() {
@@ -22,9 +22,9 @@ export default {
             element: "#menu-item-edit-menu-submenu",
             interactive: false,
             direction: "left",
-            title: "New Edit menu",
+            title: { "en-US": "New Edit menu" },
-            description: "<p>The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.</p>"+
+            description: { "en-US": "<p>The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.</p>"+
-                         "<p>The menu now displays keyboard shortcuts for the options.</p>"
+                         "<p>The menu now displays keyboard shortcuts for the options.</p>" }
 
         },
         {
@@ -38,13 +38,13 @@ export default {
             element: "#menu-item-arrange-menu-submenu",
             interactive: false,
             direction: "left",
-            title: "Arranging nodes",
+            title: { "en-US": "Arranging nodes" },
-            description: "<p>The new 'Arrange' section of the menu provides new options to help arrange your nodes. You can align them to a common edge, spread them out evenly or change their order.</p>",
+            description: { "en-US": "<p>The new 'Arrange' section of the menu provides new options to help arrange your nodes. You can align them to a common edge, spread them out evenly or change their order.</p>" },
         },
         {
             element: "#red-ui-workspace-tabs > li:first-child",
-            title: "Flow and Group level environment variables",
+            title: { "en-US": "Flow and Group level environment variables" },
-            description: "<p>Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.</p>",
+            description: { "en-US": "<p>Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.</p>" },
         },
         {
             prepare(done) {
@@ -52,19 +52,19 @@ export default {
                 setTimeout(done,800);
             },
             element: "#red-ui-tab-editor-tab-envProperties-link-button",
-            description: "<p>Flows and Groups now have an Environment Variables section in their edit dialog.</p>"
+            description: { "en-US": "<p>Flows and Groups now have an Environment Variables section in their edit dialog.</p>" },
         },
         {
             element: ".node-input-env-container-row .red-ui-editableList-addButton",
             direction: "top",
-            description: '<p>The environment variables are listed in this table and new ones can be added by clicking the <i class="fa fa-plus"></i> button.</p>',
+            description: { "en-US": '<p>The environment variables are listed in this table and new ones can be added by clicking the <i class="fa fa-plus"></i> button.</p>' },
             complete() {
                 $("#node-dialog-cancel").trigger("click");
             }
         },
         {
-            title: "And that's not all...",
+            title: { "en-US": "And that's not all..." },
-            description: "<p>There's more still to come before 2.1.0 is released. Watch this space!</p>"
+            description: { "en-US": "<p>There's more still to come before 2.1.0 is released. Watch this space!</p>" }
         },
     ]
 }