Add ability to copy commands in cli tools page

Author: juanvallejo

app/scripts/directives/util.js

@@ -76,7 +76,9 @@ angular.module('openshiftConsole')
       restrict: 'E',
       scope: {
         clipboardText: "=",
-        isDisabled: "=?"
+        isDisabled: "=?",
+        displayWide: "=?",
+        inputText: "=?"
       },
       templateUrl: 'views/directives/_copy-to-clipboard.html',
       controller: function($scope) {
@@ -88,8 +90,13 @@ angular.module('openshiftConsole')
           return;
         }
 
-        var node = $('a', element);
-        var clipboard = new Clipboard( node.get(0) );
+        var nodeElem = $('a', element);
+        var node = nodeElem.get(0);
+        if ($scope.inputText) {
+          node = nodeElem.get(1);
+        }
+
+        var clipboard = new Clipboard( node );
         clipboard.on('success', function (e) {
           $(e.trigger)
             .attr('title', 'Copied!')

app/styles/_core.less

@@ -1205,7 +1205,7 @@ h1 small.meta, .build-config-summary .meta {
 }
 
 // don't allow copy-to-clipboard .input-groups get bigger than 600px so Github webhook secrets aren't revealed within the input-group
-copy-to-clipboard .input-group {
+copy-to-clipboard .input-group.limit-width {
   max-width: 300px;
 }
 

app/views/command-line.html

@@ -37,30 +37,28 @@ <h1 id="cli">Command Line Tools</h1>
                   </p>
                   <p>
                     After downloading and installing it, you can start by logging in using<span ng-if="sessionToken"> this current session token</span>:
-                    <div class="code prettyprint ng-binding" ng-if="sessionToken">
-                      oc login {{loginBaseURL}} --token=<span ng-show="showSessionToken">{{sessionToken}}</span><a href="#" ng-click="toggleShowSessionToken()" ng-show="!showSessionToken">...click to show token...</a>
-                    </div>
+                    <copy-to-clipboard display-wide="true" clipboard-text="'oc login ' + loginBaseURL + ' --token=' + sessionToken" input-text="'oc login ' + loginBaseURL + ' --token=<hidden>'"></copy-to-clipboard>
                     <pre class="code prettyprint ng-binding" ng-if="!sessionToken">
                       oc login {{loginBaseURL}}
                     </pre>
                   </p>
 
-                  <div ng-show="showSessionToken" class="alert alert-warning">
+                  <div class="alert alert-warning">
                     <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
                     <strong>A token is a form of a password.</strong>
                     Do not share your API token.
                   </div>
 
                   <p>After you login to your account you will get a list of projects that you can switch between:
-                     <pre class="code prettyprint">oc project <i>project-name</i></pre>
+                    <copy-to-clipboard display-wide="true" clipboard-text="'oc project <project-name>'"></copy-to-clipboard>
                   </p>
 
                   <p>If you do not have any existing projects, you can create one:
-                     <pre class="code prettyprint">oc new-project <i>project-name</i></pre>
+                    <copy-to-clipboard display-wide="true" clipboard-text="'oc new-project <project-name>'"></copy-to-clipboard>
                   </p>
 
                   <p>To show a high level overview of the current project:
-                     <pre class="code prettyprint">oc status</pre>
+                    <copy-to-clipboard display-wide="true" clipboard-text="'oc status'"></copy-to-clipboard>
                   </p>
 
                   <p>For other information about the command line tools, check the <a target="_blank" href="{{'cli' | helpLink}}">CLI Reference</a> and <a target="_blank" href="{{'basic_cli_operations' | helpLink}}">Basic CLI Operations</a>.</p>

app/views/directives/_copy-to-clipboard.html

@@ -1,11 +1,17 @@
-<div class="input-group copy-to-clipboard">
-  <input id="{{id}}" type="text" class="form-control" value="{{clipboardText}}" ng-disabled="isDisabled" ng-readonly="!isDisabled" select-on-focus>
+<div class="input-group copy-to-clipboard" ng-class="{'limit-width': !displayWide}">
+  <input id="{{id}}" type="text" class="form-control" value="{{inputText ? inputText : clipboardText}}" ng-disabled="isDisabled" ng-readonly="!isDisabled" select-on-focus>
   <span class="input-group-btn" ng-hide="hidden">
-    <a data-clipboard-target="#{{id}}"
+    <a ng-show="!inputText" data-clipboard-target="#{{id}}"
+            ng-disabled="isDisabled"
+            data-toggle="tooltip"
+            title="Copy to clipboard"
+            role="button"
+            class="btn btn-default"><i class="fa fa-clipboard"/></a>
+    <a ng-show="inputText" data-clipboard-text="{{clipboardText}}"
             ng-disabled="isDisabled"
             data-toggle="tooltip"
             title="Copy to clipboard"
             role="button"
             class="btn btn-default"><i class="fa fa-clipboard"/></a>
   </span>
-</div><!-- /input-group -->
+</div><!-- /input-group -->

dist/scripts/scripts.js

@@ -9756,22 +9756,26 @@ return {
 restrict:"E",
 scope:{
 clipboardText:"=",
-isDisabled:"=?"
+isDisabled:"=?",
+displayWide:"=?",
+inputText:"=?"
 },
 templateUrl:"views/directives/_copy-to-clipboard.html",
 controller:[ "$scope", function(a) {
 a.id = _.uniqueId("clipboardJs");
 } ],
 link:function(b, c) {
 if (a) return void (b.hidden = !0);
-var d = $("a", c), e = new Clipboard(d.get(0));
-e.on("success", function(a) {
+var d = $("a", c), e = d.get(0);
+b.inputText && (e = d.get(1));
+var f = new Clipboard(e);
+f.on("success", function(a) {
 $(a.trigger).attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle"), a.clearSelection();
-}), e.on("error", function(a) {
+}), f.on("error", function(a) {
 var b = /Mac/i.test(navigator.userAgent) ? "Press ⌘C to copy" :"Press Ctrl-C to copy";
 $(a.trigger).attr("title", b).tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle");
 }), c.on("$destroy", function() {
-e.destroy();
+f.destroy();
 });
 }
 };

dist/scripts/templates.js

@@ -3871,26 +3871,24 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</p>\n" +
     "<p>\n" +
     "After downloading and installing it, you can start by logging in using<span ng-if=\"sessionToken\"> this current session token</span>:\n" +
-    "<div class=\"code prettyprint ng-binding\" ng-if=\"sessionToken\">\n" +
-    "oc login {{loginBaseURL}} --token=<span ng-show=\"showSessionToken\">{{sessionToken}}</span><a href=\"#\" ng-click=\"toggleShowSessionToken()\" ng-show=\"!showSessionToken\">...click to show token...</a>\n" +
-    "</div>\n" +
+    "<copy-to-clipboard display-wide=\"true\" clipboard-text=\"'oc login ' + loginBaseURL + ' --token=' + sessionToken\" input-text=\"'oc login ' + loginBaseURL + ' --token=<hidden>'\"></copy-to-clipboard>\n" +
     "<pre class=\"code prettyprint ng-binding\" ng-if=\"!sessionToken\">\n" +
     "                      oc login {{loginBaseURL}}\n" +
     "                    </pre>\n" +
     "</p>\n" +
-    "<div ng-show=\"showSessionToken\" class=\"alert alert-warning\">\n" +
+    "<div class=\"alert alert-warning\">\n" +
     "<span class=\"pficon pficon-warning-triangle-o\" aria-hidden=\"true\"></span>\n" +
     "<strong>A token is a form of a password.</strong>\n" +
     "Do not share your API token.\n" +
     "</div>\n" +
     "<p>After you login to your account you will get a list of projects that you can switch between:\n" +
-    "<pre class=\"code prettyprint\">oc project <i>project-name</i></pre>\n" +
+    "<copy-to-clipboard display-wide=\"true\" clipboard-text=\"'oc project <project-name>'\"></copy-to-clipboard>\n" +
     "</p>\n" +
     "<p>If you do not have any existing projects, you can create one:\n" +
-    "<pre class=\"code prettyprint\">oc new-project <i>project-name</i></pre>\n" +
+    "<copy-to-clipboard display-wide=\"true\" clipboard-text=\"'oc new-project <project-name>'\"></copy-to-clipboard>\n" +
     "</p>\n" +
     "<p>To show a high level overview of the current project:\n" +
-    "<pre class=\"code prettyprint\">oc status</pre>\n" +
+    "<copy-to-clipboard display-wide=\"true\" clipboard-text=\"'oc status'\"></copy-to-clipboard>\n" +
     "</p>\n" +
     "<p>For other information about the command line tools, check the <a target=\"_blank\" href=\"{{'cli' | helpLink}}\">CLI Reference</a> and <a target=\"_blank\" href=\"{{'basic_cli_operations' | helpLink}}\">Basic CLI Operations</a>.</p>\n" +
     "</div>\n" +
@@ -4839,10 +4837,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/_copy-to-clipboard.html',
-    "<div class=\"input-group copy-to-clipboard\">\n" +
-    "<input id=\"{{id}}\" type=\"text\" class=\"form-control\" value=\"{{clipboardText}}\" ng-disabled=\"isDisabled\" ng-readonly=\"!isDisabled\" select-on-focus>\n" +
+    "<div class=\"input-group copy-to-clipboard\" ng-class=\"{'limit-width': !displayWide}\">\n" +
+    "<input id=\"{{id}}\" type=\"text\" class=\"form-control\" value=\"{{inputText ? inputText : clipboardText}}\" ng-disabled=\"isDisabled\" ng-readonly=\"!isDisabled\" select-on-focus>\n" +
     "<span class=\"input-group-btn\" ng-hide=\"hidden\">\n" +
-    "<a data-clipboard-target=\"#{{id}}\" ng-disabled=\"isDisabled\" data-toggle=\"tooltip\" title=\"Copy to clipboard\" role=\"button\" class=\"btn btn-default\"><i class=\"fa fa-clipboard\"/></a>\n" +
+    "<a ng-show=\"!inputText\" data-clipboard-target=\"#{{id}}\" ng-disabled=\"isDisabled\" data-toggle=\"tooltip\" title=\"Copy to clipboard\" role=\"button\" class=\"btn btn-default\"><i class=\"fa fa-clipboard\"/></a>\n" +
+    "<a ng-show=\"inputText\" data-clipboard-text=\"{{clipboardText}}\" ng-disabled=\"isDisabled\" data-toggle=\"tooltip\" title=\"Copy to clipboard\" role=\"button\" class=\"btn btn-default\"><i class=\"fa fa-clipboard\"/></a>\n" +
     "</span>\n" +
     "</div>"
   );

dist/styles/main.css

@@ -3995,7 +3995,7 @@ labels+.resource-details{margin-top:10px}
 .environment-variables.table.table-bordered>tbody>tr>td:last-child .env-var-value a{font-family:"Open Sans",Helvetica,Arial,sans-serif}
 .pretty-json{font-family:Menlo,Monaco,Consolas,monospace;white-space:pre-wrap}
 .info-popover,.warnings-popover{cursor:help;vertical-align:middle;margin-left:2px}
-copy-to-clipboard .input-group{max-width:300px}
+copy-to-clipboard .input-group.limit-width{max-width:300px}
 .strong{font-weight:700}
 .tech-preview-header{justify-content:space-between}
 @media (max-width:479px){.col-xxs-12{width:100%}