org settings: Add User groups content and design.

frontend_tests/node_tests/templates.js

@@ -283,6 +283,31 @@ function render(template_name, args) {
     global.write_handlebars_output("admin_tab", html);
 }());
 
+(function admin_user_group_list() {
+    var args = {
+        user_group: {
+            id: "9",
+            name: "uranohoshi",
+            description: "Students at Uranohoshi Academy",
+        },
+    };
+
+    var html = '';
+    html += '<div id="user-groups">';
+    html += render('admin_user_group_list', args);
+    html += '</div>';
+
+    global.write_handlebars_output('admin_user_group_list', html);
+
+    var group_id = $(html).find('.user-group:first').prop('id');
+    var group_name = $(html).find('.user-group:first .pill-container').attr('data-group-pills');
+    var group_description = $(html).find('.user-group:first h4').text();
+
+    assert.equal(group_id, '9');
+    assert.equal(group_name, 'uranohoshi');
+    assert.equal(group_description, 'uranohoshi — Students at Uranohoshi Academy');
+}());
+
 (function admin_user_list() {
     var html = '<table>';
     var users = ['alice', 'bob', 'carl'];

static/styles/settings.css

@@ -477,15 +477,18 @@ input[type=checkbox].inline-block {
     max-width: 100%;
 }
 
-.add-new-emoji-box {
+.add-new-emoji-box,
+.add-new-user-group-box {
     margin-bottom: 20px;
 }
 
-.add-new-emoji-box .new-emoji-form {
+.add-new-emoji-box .new-emoji-form,
+.add-new-user-group-box .new-user-group-form {
     margin: 10px 0px;
 }
 
 .add-new-emoji-box input[type=text],
+.add-new-user-group-box input[type=text],
 .add-new-default-stream-box input[type=text] {
     padding: 6px;
 }
@@ -820,6 +823,10 @@ input[type=checkbox].inline-block {
     margin-right: 5px;
 }
 
+#user-groups .user-group h4 > span {
+    font-weight: initial;
+}
+
 /* -- new settings overlay -- */
 #settings_page {
     height: 95vh;

static/templates/admin_user_group_list.handlebars

@@ -0,0 +1,8 @@
+{{#with user_group}}
+<div class="user-group" id="{{id}}">
+    <h4>{{name}}<span> — {{description}}</span></h4>
+    <div class="pill-container" data-group-pills="{{name}}">
+        <div class="input" contenteditable="true"></div>
+    </div>
+</div>
+{{/with}}

static/templates/user-groups-admin.handlebars

@@ -1,2 +1,25 @@
 <div id="user-groups-admin" class="settings-section" data-name="user-groups-admin">
+    <div class="tip">Anyone in this organization can add user groups.</div>
+    <form class="form-horizontal admin-user-group-form">
+        <div class="add-new-user-group-box grey-box">
+            <div class="new-user-group-form">
+                <div class="settings-section-title new-user-group-section-title no-padding">{{t "Add a new user group" }}</div>
+                <div class="alert" id="admin-user-group-status"></div>
+                <div class="inline-block">
+                    <label for="user_group_name">{{t "Name" }}</label>
+                    <input type="text" name="name" id="user_group_name" placeholder="hamletcharacters" />
+                </div>
+                <div class="inline-block">
+                    <label for="user_group_description">{{t "Description" }}</label>
+                    <input type="text" name="description" id="user_group_description" placeholder="{{t 'Characters of Hamlet' }}" />
+                </div>
+                <button type="submit" class="button rounded sea-green">
+                    {{t 'Submit' }}
+                </button>
+            </div>
+        </div>
+    </form>
+
+    <p>{{#tr this}}Add members of your organization to mentionable user groups.{{/tr}}</p>
+    <div id="user-groups"></div>
 </div>

tools/lib/capitalization.py

@@ -20,6 +20,7 @@ IGNORED_PHRASES = [
     r"Dropbox",
     r"GitHub",
     r"Google",
+    r"Hamlet",
     r"HTTP",
     r"ID",
     r"IDs",

tools/linter_lib/custom_check.py

@@ -503,7 +503,9 @@ def build_custom_checkers(by_lang):
          'exclude_line': [('templates/zerver/register.html', 'placeholder="acme"'),
                           ('templates/zerver/register.html', 'placeholder="Acme or Aκμή"'),
                           ('static/templates/settings/realm-domains-modal.handlebars',
-                           '<td><input type="text" class="new-realm-domain" placeholder="acme.com"></input></td>')],
+                           '<td><input type="text" class="new-realm-domain" placeholder="acme.com"></input></td>'),
+                          ("static/templates/user-groups-admin.handlebars",
+                           '<input type="text" name="name" id="user_group_name" placeholder="hamletcharacters" />')],
          'exclude': set(["static/templates/settings/emoji-settings-admin.handlebars",
                          "static/templates/settings/realm-filter-settings-admin.handlebars",
                          "static/templates/settings/bot-settings.handlebars",