[ZEPPELIN-1796] Add 'copy to clipboard' next to the paragraph id

zeppelin-distribution/src/bin_license/LICENSE

@@ -266,6 +266,7 @@ The text of each license is also included at licenses/LICENSE-[project]-[version
     (The MIT License) Java String Similarity 0.12 (info.debatty:java-string-similarity:0.12 - https://github.com/tdebatty/java-string-similarity)
     (The MIT License) Java LSH 0.10 (info.debatty:java-lsh:0.10 - https://github.com/tdebatty/java-LSH)
     (The MIT License) JSoup 1.6.1 (org.jsoup:jsoup:1.6.1 - https://github.com/jhy/jsoup/)
+    (The MIT License) ngclipboard v1.1.1 (https://github.com/sachinchoolur/ngclipboard) - https://github.com/sachinchoolur/ngclipboard/blob/1.1.1/LICENSE)
 
 ========================================================================
 BSD-style licenses

zeppelin-web/Gruntfile.js

@@ -493,6 +493,11 @@ module.exports = function(grunt) {
           cwd: 'bower_components/jquery-ui/themes/base/images',
           src: '{,*/}*.{png,jpg,jpeg,gif}',
           dest: '.tmp/styles/images'
+        }, {
+          expand: true,
+          cwd: 'bower_components/ngclipboard',
+          src: 'dist/**',
+          dest: '.tmp'
         }, {
           expand: true,
           cwd: 'bower_components/MathJax',
@@ -546,6 +551,11 @@ module.exports = function(grunt) {
           cwd: 'bower_components/jquery-ui/themes/base/images',
           src: '{,*/}*.{png,jpg,jpeg,gif}',
           dest: '<%= yeoman.dist %>/styles/images'
+        }, {
+          expand: true,
+          cwd: 'bower_components/ngclipboard',
+          src: 'dist/**',
+          dest: '<%= yeoman.dist %>'
         }, {
           expand: true,
           cwd: 'bower_components/MathJax',

zeppelin-web/bower.json

@@ -34,7 +34,8 @@
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
     "github-markdown-css": "^2.4.0",
-    "MathJax": "2.7.0"
+    "MathJax": "2.7.0",
+    "ngclipboard": "^1.1.1"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

zeppelin-web/src/app/app.js

@@ -33,7 +33,8 @@
           'xeditable',
           'ngToast',
           'focus-if',
-          'ngResource'
+          'ngResource',
+          'ngclipboard'
       ])
         .filter('breakFilter', function() {
           return function(text) {

zeppelin-web/src/app/notebook/paragraph/paragraph-control.html

@@ -39,8 +39,15 @@
           type="button">
     </span>
     <ul class="dropdown-menu" role="menu" style="width:200px;z-index:1002">
-      <li ng-click="$event.stopPropagation()" style="text-align:center;margin-top:4px;">
-        {{paragraph.id}}
+      <li ng-controller="clipboardCtrl" ng-click="$event.stopPropagation()" style="text-align:center;margin-top:4px;">
+        <a  ngclipboard
+            ngclipboard-success="complete($event)"
+            ngclipboard-error="clipError($event)"
+            data-clipboard-text="{{paragraph.id}}"
+            tooltip-placement="top"
+            tooltip="{{tooltip}}">
+          <span>{{paragraph.id}}</span>
+        </a>
       </li>
       <li role="separator" class="divider"></li>
       <li>

zeppelin-web/src/app/notebook/paragraph/paragraph.css

@@ -165,7 +165,8 @@ table.dataTable.table-condensed .sorting_desc:after {
 }
 
 .paragraph .control span {
-    margin-left: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 .paragraph .control {

zeppelin-web/src/components/clipboard/clipboard.controller.js

@@ -0,0 +1,36 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+(function() {
+  angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl);
+  clipboardCtrl.$inject = ['$scope'];
+
+  function clipboardCtrl($scope) {
+    $scope.complete = function(e) {
+      $scope.copied = true;
+      $scope.tooltip = 'Copied!';
+      setTimeout(function() {
+        $scope.tooltip = 'Copy to clipboard';
+      }, 400);
+    };
+    $scope.$watch('input', function() {
+      $scope.copied = false;
+      $scope.tooltip = 'Copy to clipboard';
+    });
+    $scope.clipError = function(e) {
+      console.log('Error: ' + e.name + ' - ' + e.message);
+      $scope.tooltip = 'Not supported browser';
+    };
+  }
+})();

zeppelin-web/src/index.html

@@ -165,6 +165,8 @@
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
     <script src="bower_components/MathJax/MathJax.js"></script>
+    <script src="bower_components/clipboard/dist/clipboard.js"></script>
+    <script src="bower_components/ngclipboard/dist/ngclipboard.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->
@@ -198,6 +200,7 @@
     <script src="app/search/result-list.controller.js"></script>
     <script src="app/notebookRepos/notebookRepos.controller.js"></script>
     <script src="components/arrayOrderingSrv/arrayOrdering.service.js"></script>
+    <script src="components/clipboard/clipboard.controller.js"></script>
     <script src="components/navbar/navbar.controller.js"></script>
     <script src="components/ngescape/ngescape.directive.js"></script>
     <script src="components/interpreter/interpreter.directive.js"></script>

zeppelin-web/test/karma.conf.js

@@ -66,6 +66,8 @@ module.exports = function(config) {
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
       'bower_components/MathJax/MathJax.js',
+      'bower_components/clipboard/dist/clipboard.js',
+      'bower_components/ngclipboard/dist/ngclipboard.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       '.tmp/app/app.js',