search: Add search_pill.js with basic operations.

Adds search_pill.js to the static asset pipeline. The items
for search pill contain 2 keys, display_value and search_string.
Adding all the operator information i.e the operator, operand and
negated fields along with the search_string and description was tried out.
It was dropped because it didn't provide any advantage as one had to
always calculate the search_string and the description from the operator.

.eslintrc.json

@@ -191,7 +191,8 @@
         "compose_ui": false,
         "common": false,
         "panels": false,
-        "PerfectScrollbar": false
+        "PerfectScrollbar": false,
+        "search_pill": false
     },
     "plugins": [
         "eslint-plugin-empty-returns"

frontend_tests/node_tests/search_pill.js

@@ -0,0 +1,77 @@
+zrequire('search_pill');
+zrequire('util');
+zrequire('input_pill');
+zrequire('Filter', 'js/filter');
+zrequire('Handlebars', 'handlebars');
+
+var is_starred_item = {
+    display_value: 'starred messages',
+    search_string: 'is:starred',
+};
+
+var is_private_item = {
+    display_value: 'private messages',
+    search_string: 'is:private',
+};
+
+run_test('create_item', () => {
+
+    function test_create_item(search_string, current_items, expected_item) {
+        var item = search_pill.create_item_from_search_string(search_string, current_items);
+        assert.deepEqual(item, expected_item);
+    }
+
+    test_create_item('is:starred', [], is_starred_item);
+});
+
+run_test('get_search_string', () => {
+    assert.equal(search_pill.get_search_string_from_item(is_starred_item), 'is:starred');
+});
+
+run_test('append', () => {
+    var appended;
+    var cleared;
+
+    function fake_append(search_string) {
+        appended = true;
+        assert.equal(search_string, is_starred_item.search_string);
+    }
+
+    function fake_clear() {
+        cleared = true;
+    }
+
+    var pill_widget = {
+        appendValue: fake_append,
+        clear_text: fake_clear,
+    };
+
+    search_pill.append_search_string(is_starred_item.search_string, pill_widget);
+
+    assert(appended);
+    assert(cleared);
+});
+
+run_test('get_items', () => {
+    var items = [is_starred_item, is_private_item];
+
+    var pill_widget = {
+        items: function () { return items; },
+    };
+
+    assert.deepEqual(search_pill.get_search_string_for_current_filter(pill_widget),
+                     is_starred_item.search_string + ' ' + is_private_item.search_string);
+});
+
+run_test('create_pills', () => {
+    var input_pill_create_called = false;
+
+    input_pill.create = function () {
+        input_pill_create_called = true;
+        return {dummy: 'dummy'};
+    };
+
+    var pills = search_pill.create_pills({});
+    assert(input_pill_create_called);
+    assert(pills, {dummy: 'dummy'});
+});

static/js/search_pill.js

@@ -0,0 +1,44 @@
+var search_pill = (function () {
+var exports = {};
+
+exports.create_item_from_search_string = function (search_string) {
+    var operator = Filter.parse(search_string);
+    var description = Filter.describe(operator);
+    return {
+        display_value: description,
+        search_string: search_string,
+    };
+};
+
+exports.get_search_string_from_item = function (item) {
+    return item.search_string;
+};
+
+exports.create_pills = function (pill_container) {
+    var pills = input_pill.create({
+        container: pill_container,
+        create_item_from_text: exports.create_item_from_search_string,
+        get_text_from_item: exports.get_search_string_from_item,
+    });
+    return pills;
+};
+
+exports.append_search_string = function (search_string, pill_widget) {
+    pill_widget.appendValue(search_string);
+    if (pill_widget.clear_text !== undefined) {
+        pill_widget.clear_text();
+    }
+};
+
+exports.get_search_string_for_current_filter = function (pill_widget) {
+    var items = pill_widget.items();
+    var search_strings = _.pluck(items, 'search_string');
+    return search_strings.join(' ');
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = search_pill;
+}

tools/test-js-with-node

@@ -78,6 +78,7 @@ enforce_fully_covered = {
     'static/js/user_pill.js',
     'static/js/user_search.js',
     'static/js/util.js',
+    'static/js/search_pill.js',
 }
 
 parser = argparse.ArgumentParser(USAGE)

zproject/settings.py

@@ -1074,7 +1074,8 @@ JS_SPECS = {
             'js/emoji_picker.js',
             'js/compose_ui.js',
             'js/panels.js',
-            'js/settings_ui.js'
+            'js/settings_ui.js',
+            'js/search_pill.js'
         ],
         'output_filename': 'min/app.js'
     },