Merge pull request #4041 from node-red/310-tour

Add welcome tour for 3.1.0 beta.1

CHANGELOG.md

@@ -1,5 +1,6 @@
 #### 3.1.0-beta.1: Beta Release
 
+
 Editor
 
  - NEW: Locking Flows (#3938) @knolleary
@@ -7,6 +8,7 @@ Editor
  - NEW: Add support for inline image in markdown editor by drag and drop of an image file (#4006) @HiroyasuNishiyama
  - NEW: Add support for mermaid diagram to markdown editor (#4007) @HiroyasuNishiyama
  - NEW: Support uri fragments for nodes and groups including edit support (#3870) @knolleary
+ - NEW: Add global environment variable feature (#3941) @HiroyasuNishiyama
 
  - Remember compact/pretty flow export user choice (#3974) @Steve-Mcl
  - fix .red-ui-notification class (#4035) @xiaobinqt
@@ -38,7 +40,6 @@ Editor
 
 Runtime
 
- - NEW: Add global environment variable feature (#3941) @HiroyasuNishiyama
  - Force IPv4 name resolution to have priority (#4019) @dceejay
  - Fix async loading of modules containing both nodes and plugins (#3999) @knolleary
  - Use main branch as default in project feature (#4036) @kazuhitoyokoi

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

@@ -435,10 +435,15 @@ RED.tourGuide = (function() {
 
     function listTour() {
         return [
+            {
+                id: "3_1",
+                label: "3.1",
+                path: "./tours/welcome.js"
+            },
             {
                 id: "3_0",
                 label: "3.0",
-                path: "./tours/welcome.js"
+                path: "./tours/3.0/welcome.js"
             },
             {
                 id: "2_2",

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

@@ -299,7 +299,6 @@ RED.workspaces = (function() {
                 null,
                 {
                     label: RED._("common.label.delete"),
-                    disabled: isCurrentLocked,
                     onselect: function() {
                         if (tab.type === 'tab') {
                             RED.workspaces.delete(tab)
@@ -307,7 +306,7 @@ RED.workspaces = (function() {
                             RED.subflow.delete(tab.id)
                         }
                     },
-                    disabled: (workspaceTabCount === 1)
+                    disabled: isCurrentLocked || (workspaceTabCount === 1)
                 },
                 {
                     label: RED._("menu.label.export"),

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

@@ -0,0 +1,155 @@
+export default {
+    version: "3.0.0",
+    steps: [
+        {
+            titleIcon: "fa fa-map-o",
+            title: {
+                "en-US": "Welcome to Node-RED 3.0!",
+                "ja": "Node-RED 3.0へようこそ!"
+            },
+            description: {
+                "en-US": "<p>Let's take a moment to discover the new features in this release.</p>",
+                "ja": "<p>本リリースの新機能を見つけてみましょう。</p>"
+            }
+        },
+        {
+            title: {
+                "en-US": "Context Menu",
+                "ja": "コンテキストメニュー"
+            },
+            image: 'images/context-menu.png',
+            description: {
+                "en-US": `<p>The editor now has its own context menu when you
+                          right-click in the workspace.</p>
+                          <p>This makes many of the built-in actions much easier
+                          to access.</p>`,
+                "ja": `<p>ワークスペースで右クリックすると、エディタに独自のコンテキストメニューが表示されるようになりました。</p>
+                       <p>これによって多くの組み込み動作を、より簡単に利用できます。</p>`
+            }
+        },
+        {
+            title: {
+                "en-US": "Wire Junctions",
+                "ja": "分岐点をワイヤーに追加"
+            },
+            image: 'images/junction-slice.gif',
+            description: {
+                "en-US": `<p>To make it easier to route wires around your flows,
+                             it is now possible to add junction nodes that give
+                             you more control.</p>
+                          <p>Junctions can be added to wires by holding both the Alt key and the Shift key
+                          then click and drag the mouse across the wires.</p>`,
+                "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
+                       <p>Altキーとシフトキーを押しながらマウスをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
+            },
+        },
+        {
+            title: {
+                "en-US": "Wire Junctions",
+                "ja": "分岐点をワイヤーに追加"
+            },
+            image: 'images/junction-quick-add.png',
+            description: {
+                "en-US": `<p>Junctions can also be added using the quick-add dialog.</p>
+                          <p>The dialog is opened by holding the Ctrl (or Cmd) key when
+                             clicking in the workspace.</p>`,
+                "ja": `<p>クイック追加ダイアログを用いて、分岐点を追加することもできます。</p>
+                       <p>本ダイアログを開くには、Ctrl(またはCmd)キーを押しながら、ワークスペース上でクリックします。</p>`
+            },
+        },
+        {
+            title: {
+                "en-US": "Debug Path Tooltip",
+                "ja": "デバッグパスのツールチップ"
+            },
+            image: 'images/debug-path-tooltip.png',
+            description: {
+                "en-US": `<p>When hovering over a node name in the Debug sidebar, a
+                             new tooltip shows the full location of the node.</p>
+                          <p>This is useful when working with subflows, making it
+                             much easier to identify exactly which node generated
+                             the message.</p>
+                          <p>Clicking on any item in the list will reveal it in
+                             the workspace.</p>`,
+                "ja": `<p>デバックサイドバー内のノード名の上にマウスカーソルを乗せると、新たにツールチップが表示され、ノードの場所が分かるようになっています。</p>
+                       <p>これは、サブフローを用いる時に役立つ機能であり、メッセージがどのノードから出力されたかを正確に特定することが遥かに簡単になります。</p>
+                       <p>本リスト内の要素をクリックすると、ワークスペース内にその要素が表示されます。</p>`
+            },
+        },
+        {
+            title: {
+                "en-US": "Continuous Search",
+                "ja": "連続した検索"
+            },
+            image: 'images/continuous-search.png',
+            description: {
+                "en-US": `<p>When searching for things in the editor, a new toolbar in
+                             the workspace provides options to quickly jump between
+                             the search results.</p>`,
+                "ja": `<p>ワークスペース内の新しいツールバーにあるオプションによって、エディタ内を検索する際に、検索結果の間を素早く移動できます。</p>`
+            },
+        },
+        {
+            title: {
+                "en-US": "New wiring actions",
+                "ja": "新しいワイヤー操作"
+            },
+            image: "images/split-wire-with-links.gif",
+            description: {
+                "en-US": `<p>A new action has been added that will replace a wire with a pair of connected Link nodes:</p>
+                          <ul>
+                          <li><b><code>Split Wire With Link Nodes</code></b></li>
+                          </ul>
+                          <p>Actions can be accessed from the Action List in the main menu.</p>`,
+                "ja": `<p>ワイヤーを、接続されたLinkノードのペアに置き換える動作が新たに追加されました:</p>
+                       <ul>
+                       <li><b><code>ワイヤーをlinkノードで分割</code></b></li>
+                       </ul>
+                       <p>本アクションは、メインメニュー内の動作一覧から呼び出せます。</p>`,
+            },
+        },
+        {
+            title: {
+                "en-US": "Default node names",
+                "ja": "標準ノードの名前"
+            },
+            // image: "images/",
+            description: {
+                "en-US": `<p>Some nodes have been updated to generate a unique name when
+                             new instances are added to the workspace. This applies to
+                             <code>Debug</code>, <code>Function</code> and <code>Link</code> nodes.</p>
+                          <p>A new action has also been added to generate default names for the selected
+                             nodes:</p>
+                             <ul>
+                             <li><b><code>Generate Node Names</code></b></li>
+                             </ul><p>Actions can be accessed from the Action List in the main menu.</p>
+                            `,
+                "ja": `<p>一部のノードは、ワークスペース上に新インスタンスとして追加した際に、一意の名前を付けるよう変更されました。この変更は、<code>Debug</code>、<code>Function</code>、<code>Link</code>ノードに適用されています。</p>
+                       <p>選択したノードに対して、標準の名前を生成する動作も新たに追加されました:</p>
+                          <ul>
+                          <li><b><code>ノード名を生成</code></b></li>
+                          </ul><p>本アクションは、メインメニュー内の動作一覧から呼び出せます。</p>
+                         `
+            }
+        },
+        {
+            title: {
+                "en-US": "Node Updates",
+                "ja": "ノードの更新"
+            },
+            // image: "images/",
+            description: {
+                "en-US": `<ul>
+                            <li>The Debug node can be configured to count messages it receives</li>
+                            <li>The Link Call node can use a message property to dynamically target the link it should call</li>
+                            <li>The HTTP Request node can be preconfigured with HTTP headers</li>
+                          </ul>`,
+                "ja": `<ul>
+                         <li>Debugノードは、受信したメッセージの数をカウントするよう設定できるようになりました。</li>
+                         <li>Link Callノードは、メッセージのプロパティによって、呼び出し対象のlinkを動的に指定できるようになりました。</li>
+                         <li>HTTP Requestノードは、HTTPヘッダを事前設定できるようになりました。</li>
+                       </ul>`
+            }
+        }
+    ]
+}

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

@@ -1,137 +1,97 @@
 export default {
-    version: "3.0.0",
+    version: "3.1.0-beta.1",
     steps: [
         {
             titleIcon: "fa fa-map-o",
             title: {
-                "en-US": "Welcome to Node-RED 3.0!",
-                "ja": "Node-RED 3.0へようこそ!"
+                "en-US": "Welcome to Node-RED 3.1 Beta 1!",
+                // "ja": "Node-RED 3.1へようこそ!"
             },
             description: {
-                "en-US": "<p>Let's take a moment to discover the new features in this release.</p>",
-                "ja": "<p>本リリースの新機能を見つけてみましょう。</p>"
+                "en-US": "<p>This is the first beta release for 3.1.0 and we have a few new features to tell you about.</p>",
+                // "ja": ""
             }
         },
         {
             title: {
-                "en-US": "Context Menu",
-                "ja": "コンテキストメニュー"
+                "en-US": "Improved Context Menu",
+                // "ja": ""
             },
             image: 'images/context-menu.png',
             description: {
-                "en-US": `<p>The editor now has its own context menu when you
-                          right-click in the workspace.</p>
-                          <p>This makes many of the built-in actions much easier
-                          to access.</p>`,
-                "ja": `<p>ワークスペースで右クリックすると、エディタに独自のコンテキストメニューが表示されるようになりました。</p>
-                       <p>これによって多くの組み込み動作を、より簡単に利用できます。</p>`
+                "en-US": `<p>The editor's context menu has been expanded to make lots more of
+                        the built-in actions available.</p>
+                        <p>Adding nodes, working with groups and plenty
+                        of other useful tools are now just a click away.</p>
+                        <p>The flow tab bar also has its own context menu to make working
+                        with your flows much easier.</p>`,
+                // "ja": ``
             }
         },
         {
             title: {
-                "en-US": "Wire Junctions",
-                "ja": "分岐点をワイヤーに追加"
+                "en-US": "Hiding Flows",
+                // "ja": ""
             },
-            image: 'images/junction-slice.gif',
+            image: 'images/hiding-flows.png',
             description: {
-                "en-US": `<p>To make it easier to route wires around your flows,
-                             it is now possible to add junction nodes that give
-                             you more control.</p>
-                          <p>Junctions can be added to wires by holding both the Alt key and the Shift key
-                          then click and drag the mouse across the wires.</p>`,
-                "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
-                       <p>Altキーとシフトキーを押しながらマウスをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
+                "en-US": `<p>Hiding flows is now done through the flow context menu.</p>
+                          <p>The 'hide' button in previous releases has been removed from the tabs
+                             as they were being clicked accidentally too often.</p>`,
+                // "ja": ``
             },
         },
         {
             title: {
-                "en-US": "Wire Junctions",
-                "ja": "分岐点をワイヤーに追加"
+                "en-US": "Locking Flows",
+                // "ja": ""
             },
-            image: 'images/junction-quick-add.png',
+            image: 'images/locking-flows.png',
             description: {
-                "en-US": `<p>Junctions can also be added using the quick-add dialog.</p>
-                          <p>The dialog is opened by holding the Ctrl (or Cmd) key when
-                             clicking in the workspace.</p>`,
-                "ja": `<p>クイック追加ダイアログを用いて、分岐点を追加することもできます。</p>
-                       <p>本ダイアログを開くには、Ctrl(またはCmd)キーを押しながら、ワークスペース上でクリックします。</p>`
+                "en-US": `<p>Flows can now be locked to prevent accidental changes being made.</p>
+                          <p>When locked you cannot modify the nodes in any way.</p>
+                          <p>The flow context menu provides the options to lock and unlock flows,
+                             as well as in the Info sidebar explorer.</p>`,
+                // "ja": ``
             },
         },
         {
             title: {
-                "en-US": "Debug Path Tooltip",
-                "ja": "デバッグパスのツールチップ"
+                "en-US": "Adding Images to node/flow descriptions",
+                // "ja": ""
             },
-            image: 'images/debug-path-tooltip.png',
+            // image: 'images/debug-path-tooltip.png',
             description: {
-                "en-US": `<p>When hovering over a node name in the Debug sidebar, a
-                             new tooltip shows the full location of the node.</p>
-                          <p>This is useful when working with subflows, making it
-                             much easier to identify exactly which node generated
-                             the message.</p>
-                          <p>Clicking on any item in the list will reveal it in
-                             the workspace.</p>`,
-                "ja": `<p>デバックサイドバー内のノード名の上にマウスカーソルを乗せると、新たにツールチップが表示され、ノードの場所が分かるようになっています。</p>
-                       <p>これは、サブフローを用いる時に役立つ機能であり、メッセージがどのノードから出力されたかを正確に特定することが遥かに簡単になります。</p>
-                       <p>本リスト内の要素をクリックすると、ワークスペース内にその要素が表示されます。</p>`
+                "en-US": `<p>You can now add images to a node's or flows's description.</p>
+                          <p>Simply drag the image into the text editor and it will get added inline.</p>
+                          <p>When the description is shown in the Info sidebar, the image will be displayed.`,
+                // "ja": ``
             },
         },
         {
             title: {
-                "en-US": "Continuous Search",
-                "ja": "連続した検索"
+                "en-US": "Adding Mermaid Diagrams",
+                // "ja": ""
             },
-            image: 'images/continuous-search.png',
+            image: 'images/mermaid.png',
             description: {
-                "en-US": `<p>When searching for things in the editor, a new toolbar in
-                             the workspace provides options to quickly jump between
-                             the search results.</p>`,
-                "ja": `<p>ワークスペース内の新しいツールバーにあるオプションによって、エディタ内を検索する際に、検索結果の間を素早く移動できます。</p>`
+                "en-US": `<p>You can also add <a href="https://github.com/mermaid-js/mermaid">Mermaid</a> diagrams directly into your node or flow descriptions.</p>
+                          <p>This gives you much richer options for documenting your flows.</p>`,
+                // "ja": ``
             },
         },
         {
             title: {
-                "en-US": "New wiring actions",
-                "ja": "新しいワイヤー操作"
+                "en-US": "Managing Global Environment Variables",
+                // "ja": ""
             },
-            image: "images/split-wire-with-links.gif",
+            image: 'images/global-env-vars.png',
             description: {
-                "en-US": `<p>A new action has been added that will replace a wire with a pair of connected Link nodes:</p>
-                          <ul>
-                          <li><b><code>Split Wire With Link Nodes</code></b></li>
-                          </ul>
-                          <p>Actions can be accessed from the Action List in the main menu.</p>`,
-                "ja": `<p>ワイヤーを、接続されたLinkノードのペアに置き換える動作が新たに追加されました:</p>
-                       <ul>
-                       <li><b><code>ワイヤーをlinkノードで分割</code></b></li>
-                       </ul>
-                       <p>本アクションは、メインメニュー内の動作一覧から呼び出せます。</p>`,
+                "en-US": `<p>You can set environment variables that apply to all nodes and flows in the new
+                          'Global Environment Variables' section of User Settings.</p>`,
+                // "ja": ``
             },
         },
-        {
-            title: {
-                "en-US": "Default node names",
-                "ja": "標準ノードの名前"
-            },
-            // image: "images/",
-            description: {
-                "en-US": `<p>Some nodes have been updated to generate a unique name when
-                             new instances are added to the workspace. This applies to
-                             <code>Debug</code>, <code>Function</code> and <code>Link</code> nodes.</p>
-                          <p>A new action has also been added to generate default names for the selected
-                             nodes:</p>
-                             <ul>
-                             <li><b><code>Generate Node Names</code></b></li>
-                             </ul><p>Actions can be accessed from the Action List in the main menu.</p>
-                            `,
-                "ja": `<p>一部のノードは、ワークスペース上に新インスタンスとして追加した際に、一意の名前を付けるよう変更されました。この変更は、<code>Debug</code>、<code>Function</code>、<code>Link</code>ノードに適用されています。</p>
-                       <p>選択したノードに対して、標準の名前を生成する動作も新たに追加されました:</p>
-                          <ul>
-                          <li><b><code>ノード名を生成</code></b></li>
-                          </ul><p>本アクションは、メインメニュー内の動作一覧から呼び出せます。</p>
-                         `
-            }
-        },
         {
             title: {
                 "en-US": "Node Updates",
@@ -139,16 +99,9 @@ export default {
             },
             // image: "images/",
             description: {
-                "en-US": `<ul>
-                            <li>The Debug node can be configured to count messages it receives</li>
-                            <li>The Link Call node can use a message property to dynamically target the link it should call</li>
-                            <li>The HTTP Request node can be preconfigured with HTTP headers</li>
-                          </ul>`,
-                "ja": `<ul>
-                         <li>Debugノードは、受信したメッセージの数をカウントするよう設定できるようになりました。</li>
-                         <li>Link Callノードは、メッセージのプロパティによって、呼び出し対象のlinkを動的に指定できるようになりました。</li>
-                         <li>HTTP Requestノードは、HTTPヘッダを事前設定できるようになりました。</li>
-                       </ul>`
+                "en-US": `<p>The core nodes have received lots of minor fixes, documentation updates and
+                          small enhancements. Check the full changelog in the Help sidebar for a full list.</p>`,
+                // "ja": ``
             }
         }
     ]