Merge pull request #1876 from w33ble/clipboard

Clipboard disabled when Flash isn't available

src/kibana/components/clipboard/clipboard.html

@@ -1,5 +1,7 @@
 <span>
-  <a tooltip="{{shownText}}"
+  <a
+    ng-if="!disabled"
+    tooltip="{{shownText}}"
     tooltip-placement="{{tipPlacement}}"
     tooltip-animation="false"
     tooltip-popup-delay="0"

src/kibana/components/clipboard/clipboard.js

@@ -1,41 +1,49 @@
 define(function (require) {
+  // ng-clip expects ZeroClipboard to be global, but it's AMD, so it never is
+  var ZeroClipboard = window.ZeroClipboard = require('zeroclipboard');
+  require('ng-clip');
+
   var $ = require('jquery');
   var html = require('text!components/clipboard/clipboard.html');
+  var module = require('modules').get('kibana');
 
-  require('modules')
-    .get('kibana')
-    .directive('kbnClipboard', function ($compile, $timeout) {
-      return {
-        restrict: 'E',
-        template: html,
-        replace: true,
-        scope: {
-          copyText: '=copy'
-        },
-        transclude: true,
-        link: function ($scope, $el, attr) {
-          $scope.tipPlacement = attr.tipPlacement || 'top';
-          $scope.tipText = attr.tipText || 'Copy to clipboard';
-          $scope.tipConfirm = attr.tipConfirm = 'Copied!';
-          $scope.icon = attr.icon || 'fa-clipboard';
-
-          $scope.shownText = $scope.tipText;
-
-          $el.on('click', function () {
-            $scope.shownText = $scope.tipConfirm;
-            // Reposition tooltip to account for text length change
-            $('a', $el).mouseenter();
-          });
-
-          $el.on('mouseleave', function () {
-            $scope.shownText = $scope.tipText;
-          });
-
-          $scope.$on('$destroy', function () {
-            $el.off('click');
-            $el.off('mouseleave');
-          });
+  module.directive('kbnClipboard', function ($compile, $timeout) {
+    return {
+      restrict: 'E',
+      template: html,
+      replace: true,
+      scope: {
+        copyText: '=copy'
+      },
+      transclude: true,
+      link: function ($scope, $el, attr) {
+        if (ZeroClipboard.isFlashUnusable()) {
+          $scope.disabled = true;
+          return;
         }
-      };
-    });
+
+        $scope.tipPlacement = attr.tipPlacement || 'top';
+        $scope.tipText = attr.tipText || 'Copy to clipboard';
+        $scope.tipConfirm = attr.tipConfirm = 'Copied!';
+        $scope.icon = attr.icon || 'fa-clipboard';
+
+        $scope.shownText = $scope.tipText;
+
+        $el.on('click', function () {
+          $scope.shownText = $scope.tipConfirm;
+          // Reposition tooltip to account for text length change
+          $('a', $el).mouseenter();
+        });
+
+        $el.on('mouseleave', function () {
+          $scope.shownText = $scope.tipText;
+        });
+
+        $scope.$on('$destroy', function () {
+          $el.off('click');
+          $el.off('mouseleave');
+        });
+      }
+    };
+  });
 });

src/kibana/index.js

@@ -12,10 +12,6 @@ define(function (require) {
   require('angular-route');
   require('angular-bindonce');
 
-  // Seems bad?
-  window.ZeroClipboard = require('zeroclipboard');
-  require('ng-clip');
-
   var configFile = JSON.parse(require('text!config'));
 
   var kibana = modules.get('kibana', [

src/kibana/plugins/dashboard/partials/share.html

@@ -2,15 +2,22 @@
 
   <p>
     <div class="input-group">
-      <label>Embed this dashboard. <kbn-clipboard copy="opts.shareData().embed"></kbn-clipboard> <small>Add to your html source. Note all clients must still be able to access kibana</small></label>
+      <label>
+        Embed this dashboard.
+        <kbn-clipboard copy="opts.shareData().embed"></kbn-clipboard>
+        <small>Add to your html source. Note all clients must still be able to access kibana</small>
+      </label>
       <div class="form-control" disabled>{{opts.shareData().embed}}</div>
     </div>
   </p>
 
   <p>
     <div class="input-group">
-      <label>Share a link <kbn-clipboard copy="opts.shareData().link"></kbn-clipboard></i></a></label>
-    	<div class="form-control" disabled>{{opts.shareData().link}}</div>
+      <label>
+        Share a link
+        <kbn-clipboard copy="opts.shareData().link"></kbn-clipboard>
+      </label>
+      <div class="form-control" disabled>{{opts.shareData().link}}</div>
     </div>
   </p>
 </form>

src/kibana/plugins/visualize/editor/panels/share.html

@@ -2,9 +2,9 @@
 
   <p>
     <div class="form-group">
-      <label>Embed this visualization.
+      <label>
+        Embed this visualization.
         <kbn-clipboard copy="conf.shareData().embed"></kbn-clipboard>
-
         <small>Add to your html source. Note all clients must still be able to access kibana</small>
       </label>
       <div class="form-control" disabled>{{conf.shareData().embed}}</div>
@@ -13,7 +13,10 @@
 
   <p>
     <div class="form-group">
-      <label>Share a link <kbn-clipboard copy="conf.shareData().link"></kbn-clipboard></label>
+      <label>
+        Share a link
+        <kbn-clipboard copy="conf.shareData().link"></kbn-clipboard>
+      </label>
       <div class="form-control" disabled>{{conf.shareData().link}}</div>
     </div>
   </p>

src/kibana/require.config.js

@@ -61,7 +61,6 @@ require.config({
     leaflet: {
       deps: ['css!bower_components/leaflet/dist/leaflet.css']
     }
-    
   },
   waitSeconds: 60
 });

test/unit/specs/components/clipboard.js

@@ -1,16 +1,20 @@
 define(function (require) {
   var angular = require('angular');
   var _ = require('lodash');
-  var sinon = require('sinon/sinon');
+  var sinon = require('test_utils/auto_release_sinon');
   var $ = require('jquery');
 
   require('components/clipboard/clipboard');
 
   describe('Clipboard directive', function () {
+    var $scope;
+    var $rootScope;
+    var $compile;
+    var $interpolate;
+    var el;
+    var tips;
 
-    var $scope, $rootScope, $compile, $interpolate, el, tips;
-
-    beforeEach(function (done) {
+    function init() {
       // load the application
       module('kibana');
 
@@ -24,48 +28,72 @@ define(function (require) {
 
         $scope = el.scope();
         $scope.$digest();
+      });
+    }
 
-        done();
+    describe('With flash disabled', function () {
+      beforeEach(function () {
+        sinon.stub(window.ZeroClipboard, 'isFlashUnusable', _.constant(true));
+        init();
       });
 
+      it('should be an empty element', function () {
+        expect(el.children()).to.have.length(0);
+      });
+
+      it('should not show the tooltip', function () {
+        var clip = el.find('[tooltip]');
+        expect(clip).to.have.length(0);
+      });
+
+      it('should not show the clipboard button', function () {
+        var clip = el.find('[clip-copy]');
+        expect(clip).to.have.length(0);
+      });
     });
 
-    it('should contain an element with clip-copy', function () {
-      var clip = el.find('[clip-copy]');
-      expect(clip).to.have.length(1);
+    describe('With flash enabled', function () {
+      beforeEach(function () {
+        sinon.stub(window.ZeroClipboard, 'isFlashUnusable', _.constant(false));
+        init();
+      });
+
+      it('should contain an element with clip-copy', function () {
+        var clip = el.find('[clip-copy]');
+        expect(clip).to.have.length(1);
+      });
+
+      it('should have a tooltip', function () {
+        var clip = el.find('[tooltip]');
+        expect(clip).to.have.length(1);
+
+        var clipText = $interpolate($(clip).attr('tooltip'))();
+        expect(clipText).to.be('Copy to clipboard');
+
+      });
+
+      it('should change the tooltip text when clicked, back when mouse leaves', function () {
+        el.mouseenter();
+        el.click();
+        $scope.$digest();
+
+        var clipText = $interpolate($('[tooltip]', el).attr('tooltip'))();
+        expect(clipText).to.be('Copied!');
+
+        el.mouseleave();
+        $scope.$digest();
+
+        clipText = $interpolate($('[tooltip]', el).attr('tooltip'))();
+        expect(clipText).to.be('Copy to clipboard');
+      });
+
+      it('should unbind all handlers on destroy', function () {
+        var handlers = $._data(el.get(0), 'events');
+        expect(Object.keys(handlers)).to.have.length(2);
+
+        $scope.$destroy();
+        expect(Object.keys(handlers)).to.have.length(0);
+      });
     });
-
-    it('should have a tooltip', function () {
-      var clip = el.find('[tooltip]');
-      expect(clip).to.have.length(1);
-
-      var clipText = $interpolate($(clip).attr('tooltip'))();
-      expect(clipText).to.be('Copy to clipboard');
-
-    });
-
-    it('should change the tooltip text when clicked, back when mouse leaves', function () {
-      el.mouseenter();
-      el.click();
-      $scope.$digest();
-
-      var clipText = $interpolate($('[tooltip]', el).attr('tooltip'))();
-      expect(clipText).to.be('Copied!');
-
-      el.mouseleave();
-      $scope.$digest();
-
-      clipText = $interpolate($('[tooltip]', el).attr('tooltip'))();
-      expect(clipText).to.be('Copy to clipboard');
-    });
-
-    it('should unbind all handlers on destroy', function () {
-      var handlers = $._data(el.get(0), 'events');
-      expect(Object.keys(handlers)).to.have.length(2);
-
-      $scope.$destroy();
-      expect(Object.keys(handlers)).to.have.length(0);
-    });
-
   });
 });