settings UI: Add copy zuliprc button to bot information box.

Fixes: #9510

frontend_tests/node_tests/settings_bots.js

@@ -23,6 +23,10 @@ zrequire('Handlebars', 'handlebars');
 zrequire('people');
 zrequire('templates');
 
+set_global('ClipboardJS', function (sel) {
+    assert.equal(sel, '#copy_zuliprc');
+});
+
 bot_data.initialize();
 
 run_test('generate_zuliprc_uri', () => {

static/js/settings_bots.js

@@ -487,6 +487,16 @@ exports.set_up = function () {
         $(this).attr("href", exports.generate_zuliprc_uri(bot_id));
     });
 
+    new ClipboardJS('#copy_zuliprc', {
+        text: function (trigger) {
+            var bot_info = trigger.closest(".bot-information-box");
+            var email = $(bot_info).find(".email .value").text();
+            var api_key = $(bot_info).find(".api_key .api-key-value-and-button .value").text();
+            var data = exports.generate_zuliprc_content(email.trim(), api_key.trim());
+            return data;
+        },
+    });
+
     $("#bots_lists_navbar .add-a-new-bot-tab").click(function (e) {
         e.preventDefault();
         e.stopPropagation();

static/styles/settings.scss

@@ -783,6 +783,10 @@ input[type=checkbox].inline-block {
     color: hsl(0, 56%, 73%);
 }
 
+.bots_list .edit-bot-buttons .copy-gold {
+    color: hsl(51, 90%, 50%);
+}
+
 .bots_list .bot-information-box {
     position: relative;
     display: inline-block;

static/templates/bot_avatar_row.handlebars

@@ -11,6 +11,9 @@
                 <a type="submit" download="{{zuliprc}}" class="btn download_bot_zuliprc" title="{{t 'Download zuliprc' }}" data-email="{{email}}">
                     <i class="icon-vector-download-alt sea-green"></i>
                 </a>
+                <button type="submit" id="copy_zuliprc" class="btn copy_zuliprc" title="{{t 'Copy zuliprc' }}">
+                    <i class="fa fa-clipboard copy-gold"></i>
+                </button>
                 <button type="submit" class="btn delete_bot" title="{{t 'Delete bot' }}" data-user-id="{{user_id}}">
                     <i class="icon-vector-trash danger-red"></i>
                 </button>