From d1d8365a6b994c2ac55f78b99e326d80d8504db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robert=20H=C3=B6nig?= Date: Sun, 7 Jan 2018 19:24:14 +0100 Subject: [PATCH] embedded bots: Add config data UI. This adds UI fields in the bot settings for specifying configuration values like API keys for a bot. The names and placeholder values for each bot's config fields are fetched from the bot's .conf template file in the zulip_bots package. This also adds giphy and followup as embedded bots. --- frontend_tests/node_tests/settings_bots.js | 26 ++++++++++++-- frontend_tests/node_tests/templates.js | 13 +++++++ static/js/settings_bots.js | 35 ++++++++++++++++--- .../embedded_bot_config_item.handlebars | 5 +++ .../settings/bot-settings.handlebars | 2 ++ zerver/lib/events.py | 7 +++- zerver/lib/integrations.py | 2 ++ zerver/tests/test_bots.py | 23 ++++++++++-- zerver/views/users.py | 9 ++++- 9 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 static/templates/embedded_bot_config_item.handlebars diff --git a/frontend_tests/node_tests/settings_bots.js b/frontend_tests/node_tests/settings_bots.js index c807acb0fe..d47265478b 100644 --- a/frontend_tests/node_tests/settings_bots.js +++ b/frontend_tests/node_tests/settings_bots.js @@ -1,6 +1,9 @@ set_global("page_params", { realm_uri: "https://chat.example.com", - realm_embedded_bots: ["converter", "xkcd"], + realm_embedded_bots: [{name: "converter", config: {}}, + {name:"giphy", config: {key: "12345678"}}, + {name:"foobot", config: {bar: "baz", qux: "quux"}}, + ], }); set_global("avatar", {}); @@ -10,6 +13,8 @@ set_global('document', 'document-stub'); zrequire('bot_data'); zrequire('settings_bots'); +zrequire('Handlebars', 'handlebars'); +zrequire('templates'); (function test_generate_zuliprc_uri() { var bot = { @@ -55,6 +60,7 @@ zrequire('settings_bots'); function test_create_bot_type_input_box_toggle(f) { var create_payload_url = $('#create_payload_url'); var payload_url_inputbox = $('#payload_url_inputbox'); + var config_inputbox = $('#config_inputbox'); var EMBEDDED_BOT_TYPE = '4'; var OUTGOING_WEBHOOK_BOT_TYPE = '3'; var GENERIC_BOT_TYPE = '1'; @@ -65,16 +71,19 @@ function test_create_bot_type_input_box_toggle(f) { assert(!payload_url_inputbox.visible()); assert($('#select_service_name').hasClass('required')); assert($('#service_name_list').visible()); + assert(config_inputbox.visible()); $('#create_bot_type :selected').val(OUTGOING_WEBHOOK_BOT_TYPE); f.apply(); assert(create_payload_url.hasClass('required')); assert(payload_url_inputbox.visible()); + assert(!config_inputbox.visible()); $('#create_bot_type :selected').val(GENERIC_BOT_TYPE); f.apply(); assert(!(create_payload_url.hasClass('required'))); assert(!payload_url_inputbox.visible()); + assert(!config_inputbox.visible()); } (function test_set_up() { @@ -93,14 +102,27 @@ function test_create_bot_type_input_box_toggle(f) { }; var embedded_bots_added = 0; + var config_fields_added = 0; $('#select_service_name').append = function () { embedded_bots_added += 1; }; - + $('#config_inputbox').append = function () { + config_fields_added += 1; + }; + $('#config_inputbox').children = function () { + var mock_children = { + hide: function () { + return; + }, + }; + return mock_children; + }; + global.compile_template('embedded_bot_config_item'); avatar.build_bot_create_widget = function () {}; avatar.build_bot_edit_widget = function () {}; settings_bots.set_up(); assert(embedded_bots_added === page_params.realm_embedded_bots.length); + assert(config_fields_added === 3); }()); diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js index 765dab032c..6ccad44571 100644 --- a/frontend_tests/node_tests/templates.js +++ b/frontend_tests/node_tests/templates.js @@ -1427,6 +1427,19 @@ function render(template_name, args) { assert.equal($(html).find("tr").data("topic"), "Verona2"); }()); +(function embedded_bot_config_item() { + var args = { + botname: 'giphy', + key: 'api_key', + value: '12345678', + }; + var html = render('embedded_bot_config_item', args); + assert.equal($(html).attr('name'), args.botname); + assert.equal($(html).attr('id'), args.botname+'_'+args.key); + assert.equal($(html).find('label').text(), args.key); + assert.equal($(html).find('input').attr('placeholder'), args.value); +}()); + // By the end of this test, we should have compiled all our templates. Ideally, // we will also have exercised them to some degree, but that's a little trickier // to enforce. diff --git a/static/js/settings_bots.js b/static/js/settings_bots.js index 7e0d542dad..8909e26d36 100644 --- a/static/js/settings_bots.js +++ b/static/js/settings_bots.js @@ -86,13 +86,22 @@ exports.set_up = function () { $('#payload_url_inputbox').hide(); $('#create_payload_url').val(''); $('#service_name_list').hide(); - page_params.realm_embedded_bots.forEach(function (bot_name) { + $('#config_inputbox').hide(); + page_params.realm_embedded_bots.forEach(function (bot) { $('#select_service_name').append($('