add an option for url types so that it can be opened in current tab (…

…master branch) (#13209)
elastic · Sep 14, 2017 · 7f40ab7 · 7f40ab7
1 parent 9ca9e93
commit 7f40ab7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/src/core_plugins/kibana/common/field_formats/types/__tests__/url.js b/src/core_plugins/kibana/common/field_formats/types/__tests__/url.js
@@ -7,7 +7,7 @@ describe('UrlFormat', function () {
     const url = new UrlFormat();
 
     expect(url.convert('http://elastic.co', 'html'))
-      .to.be('<span ng-non-bindable><a href="http://elastic.co" target="_blank">http://elastic.co</a></span>');
+      .to.be('<span ng-non-bindable><a href="http://elastic.co" target="_blank" rel="noopener">http://elastic.co</a></span>');
   });
 
   it('outputs an <image> if type === "img"', function () {
@@ -21,7 +21,7 @@ describe('UrlFormat', function () {
     it('accepts a template', function () {
       const url = new UrlFormat({ urlTemplate: 'url: {{ value }}' });
       expect(url.convert('url', 'html'))
-        .to.be('<span ng-non-bindable><a href="url: url" target="_blank">url: url</a></span>');
+        .to.be('<span ng-non-bindable><a href="url: url" target="_blank" rel="noopener">url: url</a></span>');
     });
 
     it('only outputs the url if the contentType === "text"', function () {
@@ -34,7 +34,7 @@ describe('UrlFormat', function () {
     it('accepts a template', function () {
       const url = new UrlFormat({ labelTemplate: 'extension: {{ value }}' });
       expect(url.convert('php', 'html'))
-        .to.be('<span ng-non-bindable><a href="php" target="_blank">extension: php</a></span>');
+        .to.be('<span ng-non-bindable><a href="php" target="_blank" rel="noopener">extension: php</a></span>');
     });
 
     it('uses the label template for text formating', function () {

diff --git a/src/core_plugins/kibana/common/field_formats/types/url.js b/src/core_plugins/kibana/common/field_formats/types/url.js
@@ -106,7 +106,9 @@ UrlFormat.prototype._convert = {
           linkLabel = label;
         }
 
-        return `<a href="${url}" target="_blank">${linkLabel}</a>`;
+        const linkTarget = this.param('openLinkInCurrentTab') ? '_self' : '_blank';
+
+        return `<a href="${url}" target="${linkTarget}" rel="noopener">${linkLabel}</a>`;
     }
   }
 };
diff --git a/src/core_plugins/kibana/public/field_formats/__tests__/_url.js b/src/core_plugins/kibana/public/field_formats/__tests__/_url.js
@@ -23,7 +23,7 @@ describe('Url Format', function () {
       Url = fieldFormats.getType('url');
     });
 
-    it('ouputs a simple <a> tab by default', function () {
+    it('outputs a simple <a> tab by default', function () {
       const url = new Url();
 
       const $a = unwrap($(url.convert('http://elastic.co', 'html')));
@@ -34,6 +34,14 @@ describe('Url Format', function () {
       expect($a.children().size()).to.be(0);
     });
 
+    it('outputs a <a> link with target=_self if "open link in current tab" is checked', function () {
+      const url = new Url({ openLinkInCurrentTab: true });
+
+      const $a = unwrap($(url.convert('http://elastic.co', 'html')));
+      expect($a.is('a')).to.be(true);
+      expect($a.attr('target')).to.be('_self');
+    });
+
     it('outputs an <image> if type === "img"', function () {
       const url = new Url({ type: 'img' });
 

diff --git a/src/ui/public/field_format_editor/editors/url/url.html b/src/ui/public/field_format_editor/editors/url/url.html
@@ -8,6 +8,20 @@
   </select>
 </div>
 
+<div ng-if="editor.formatParams.type == 'a'">
+  <label class="kuiCheckBoxLabel">
+    <input
+      class="kuiCheckBox"
+      type="checkbox"
+      ng-model="editor.formatParams.openLinkInCurrentTab"
+    ></input>
+
+    <span class="kuiCheckBoxLabel__text">
+      Open link in current tab
+    </span>
+  </label>
+</div>
+
 <div class="form-group">
   <span class="pull-right text-info hintbox-label" ng-click="editor.showUrlTmplHelp = !editor.showUrlTmplHelp">
     <i class="fa fa-info"></i> Url Template Help