automatic groups should not allow you to muck with the listed users in the group

app/assets/javascripts/admin/templates/groups.js.handlebars

@@ -1,4 +1,3 @@
-<!-- work in progress, please ignore -->
 <div class='row groups'>
   <div class='content-list span6'>
     <h3>{{i18n admin.groups.edit}}</h3>
@@ -25,7 +24,7 @@
             {{textField value=name placeholderKey="admin.groups.name_placeholder"}}
           {{/if}}
 
-          {{userSelector usernames=usernames id="group-users" placeholderKey="admin.groups.selector_placeholder" tabindex="1"}}
+          {{userSelector usernames=usernames id="group-users" placeholderKey="admin.groups.selector_placeholder" tabindex="1" disabledBinding="automatic"}}
           <div class='controls'>
             <button {{action save this}} {{bindAttr disabled="disableSave"}} class='btn'>{{i18n admin.customize.save}}</button>
             {{#unless automatic}}

app/assets/javascripts/discourse/components/autocomplete.js

@@ -18,6 +18,7 @@ $.fn.autocomplete = function(options) {
     alert("only supporting one matcher at the moment");
   }
 
+  var disabled = options && options.disabled;
   var wrap = null;
   var autocompleteOptions = null;
   var selectedOption = null;
@@ -87,7 +88,7 @@ $.fn.autocomplete = function(options) {
   if (isInput) {
     var width = this.width();
     var height = this.height();
-    wrap = this.wrap("<div class='ac-wrap clearfix'/>").parent();
+    wrap = this.wrap("<div class='ac-wrap clearfix" + (disabled ? " disabled": "") +  "'/>").parent();
     wrap.width(width);
     this.width(150);
     this.attr('name', this.attr('name') + "-renamed");

app/assets/javascripts/discourse/views/user_selector_view.js

@@ -8,6 +8,8 @@ Discourse.UserSelector = Discourse.TextField.extend({
     $(this.get('element')).val(this.get('usernames')).autocomplete({
       template: Discourse.UserSelector.templateFunction(),
 
+      disabled: this.get('disabled'),
+
       dataSource: function(term) {
         var exclude = selected;
         if (userSelectorView.get('excludeCurrentUser')){

app/assets/stylesheets/application/compose.css.scss

@@ -342,15 +342,24 @@
   margin-bottom: 10px;
 }
 
+div.ac-wrap.disabled {
+  input {
+    display:none;
+  }
+  .item a {
+    display:none;
+  }
+}
 
 div.ac-wrap {
   background-color: $white;
   border: 1px solid #cccccc;
-  padding: 4px 10px;
+  padding: 5px 10px 0;
   @include border-radius-all(3px);
   div.item {
     float: left;
     margin-right: 10px;
+    margin-bottom: 5px;
     span {
       padding-left: 5px;
       height: 22px;
@@ -519,4 +528,4 @@ div.ac-wrap {
       margin: 0;
     }
   }
-}
+}