Improve markdown factory to handle target blank links. Fix rulenode script test dialog style. Update rule nodes UI.

rule-engine/rule-engine-components/src/main/resources/public/assets/help/en_US/rulenode/transformation_node_script_fn.md

@@ -0,0 +1,65 @@
+#### Transform message function
+
+<div class="divider"></div>
+<br/>
+
+*function (msg, metadata msgType): {msg: object, metadata: object, msgType: string}*
+
+JavaScript function transforming input Message payload, Metadata or Message type.  
+
+**Parameters:**
+
+<ul>
+  <li><b>msg:</b> <code>{[key: string]: any}</code> - is a Message payload key/value object.
+  </li>
+  <li><b>metadata:</b> <code>{[key: string]: string}</code> - is a Message metadata key/value object.
+  </li>
+  <li><b>msgType:</b> <code>string</code> - is a string Message type. See <a href="https://github.com/thingsboard/thingsboard/blob/ea039008b148453dfa166cf92bc40b26e487e660/ui-ngx/src/app/shared/models/rule-node.models.ts#L338" target="_blank">MessageType</a> enum for common used values.
+  </li>
+</ul>
+
+**Returns:**
+
+Should return the object with the following structure:
+
+```javascript
+{ 
+   msg?: {[key: string]: any},
+   metadata?: {[key: string]: string},
+   msgType?: string
+}
+```
+
+All fields in resulting object are optional and will be taken from original message if not specified.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Change message type to `CUSTOM_REQUEST`:
+
+```javascript
+return { msgType: 'CUSTOM_REQUEST' };
+{:copy-code}
+```
+
+<ul>
+  <li>Change message type to <code>CUSTOM_UPDATE</code>,<br/>add additional attribute <strong><em>version</em></strong> into payload with value <strong><em>v1.1</em></strong>,<br/>change <strong><em>sensorType</em></strong> attribute value in Metadata to <strong><em>roomTemp</em></strong>:</li>
+</ul>
+
+The following transform function will perform all necessary modifications:
+
+```javascript
+var newType = "CUSTOM_UPDATE";
+msg.version = "v1.1";
+metadata.sensorType = "roomTemp"
+return {msg: msg, metadata: metadata, msgType: newType};
+{:copy-code}
+```
+
+You can see real life example, how to use this node in those tutorials:
+
+- [Transform incoming telemetry{:target="_blank"}](https://thingsboard.io/docs/user-guide/rule-engine-2-0/tutorials/transform-incoming-telemetry/)
+- [Reply to RPC Calls{:target="_blank"}](https://thingsboard.io/docs/user-guide/rule-engine-2-0/tutorials/rpc-reply-tutorial#add-transform-script-node)
+
+

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html

@@ -69,7 +69,7 @@
       <div #bottomPanel class="tb-split tb-split-vertical">
         <div #bottomLeftPanel class="tb-split tb-content">
           <div class="tb-resize-container">
-            <div class="tb-editor-area-title-panel tb-js-function">
+            <div class="tb-editor-area-title-panel tb-js-function" [ngClass]="{'tb-js-function-help': data.helpId}">
               <label>{{ functionTitle }}</label>
             </div>
             <tb-js-func

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss

@@ -72,6 +72,9 @@
 
     &.tb-js-function {
       right: 80px;
+      &.tb-js-function-help {
+        right: 116px;
+      }
     }
 
     label {

ui-ngx/src/app/shared/components/marked-options.service.ts

@@ -21,6 +21,7 @@ import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
 
 const copyCodeBlock = '{:copy-code}';
+const targetBlankBlock = '{:target="_blank"}';
 
 // @dynamic
 @Injectable()
@@ -49,7 +50,7 @@ export class MarkedOptionsService extends MarkedOptions {
         this.id++;
         return this.wrapCopyCode(this.id, content, code);
       } else {
-        return checkLineNumbers(this.renderer2.code(code, language, isEscaped), code);
+        return this.wrapDiv(checkLineNumbers(this.renderer2.code(code, language, isEscaped), code));
       }
     };
     this.renderer.tablecell = (content: string, flags: {
@@ -63,10 +64,23 @@ export class MarkedOptionsService extends MarkedOptions {
       }
       return this.renderer2.tablecell(content, flags);
     };
+    this.renderer.link = (href: string | null, title: string | null, text: string) => {
+      if (text.endsWith(targetBlankBlock)) {
+        text = text.substring(0, text.length - targetBlankBlock.length);
+        const content = this.renderer2.link(href, title, text);
+        return content.replace('<a href=', '<a target="_blank" href=');
+      } else {
+        return this.renderer2.link(href, title, text);
+      }
+    };
     this.document.addEventListener('selectionchange', this.onSelectionChange.bind(this));
     (this.window as any).markdownCopyCode = this.markdownCopyCode.bind(this);
   }
 
+  private wrapDiv(content: string): string {
+    return `<div>${content}</div>`;
+  }
+
   private wrapCopyCode(id: number, content: string, code: string): string {
     return `<div class="code-wrapper noChars" id="codeWrapper${id}" onClick="markdownCopyCode(${id})">${content}` +
       `<span id="copyCodeId${id}" style="display: none;">${code}</span>` +