clarify group member editing UI (disallow deletes for S only)

src/widgets/chip-input.jsx

@@ -24,14 +24,14 @@ export default class ChipInput extends React.Component {
   static deriveStateFromProps(props) {
     return {
       placeholder: props.chips ? '' : props.prompt,
-      sortedChips: ChipInput.sortChips(props.chips, props.required),
+      sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),
       chipIndex: ChipInput.indexChips(props.chips)
     };
   }
 
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.chips != this.props.chips ||
-      prevProps.required != this.props.required ||
+      prevProps.staticMembers != this.props.staticMembers ||
       prevProps.prompt != this.props.prompt) {
       this.setState(ChipInput.deriveStateFromProps(this.props));
     }
@@ -56,7 +56,7 @@ export default class ChipInput extends React.Component {
     const required = [];
     const normal = [];
     chips.map(function(item) {
-      if (item.user === keep) {
+      if (keep.includes(item.user)) {
         required.push(item);
       } else {
         normal.push(item);
@@ -95,8 +95,8 @@ export default class ChipInput extends React.Component {
   handleKeyDown(e) {
     if (e.key === 'Backspace') {
       if (this.state.input.length == 0 && this.state.sortedChips.length > 0) {
-        var at = this.state.sortedChips.length - 1;
+        const at = this.state.sortedChips.length - 1;
-        if (this.state.sortedChips[at].user !== this.props.required) {
+        if (this.state.sortedChips[at].user !== this.props.staticMembers) {
           this.removeChipAt(at);
         }
       }
@@ -122,7 +122,7 @@ export default class ChipInput extends React.Component {
           title={item.public ? item.public.fn : undefined}
           noAvatar={this.props.avatarDisabled}
           topic={item.user}
-          required={item.user === this.props.required}
+          required={this.props.staticMembers.includes(item.user)}
           invalid={item.invalid}
           index={count}
           key={item.user} />

src/widgets/group-manager.jsx

@@ -23,8 +23,10 @@ class GroupManager extends React.Component {
     super(props);
 
     this.state = {
+      // Array of topic members
       members: props.members,
       index: GroupManager.indexMembers(props.members),
+      staticMembers: GroupManager.staticMembers(props.members, props.keepInitialMembers, props.requiredMember),
       contactFilter: '',
       noContactsMessage: props.intl.formatMessage(messages.no_contacts),
       selectedContacts: GroupManager.selectedContacts(props.members)
@@ -39,15 +41,25 @@ class GroupManager extends React.Component {
 
   static indexMembers(members) {
     let index = {};
-    members.map(function(m) {
+    members.map((m) => {
       index[m.user] = {delta: 0, present: true}; // Delta: 0 unchanged, +1 added, -1 removed
     });
     return index;
   }
 
+  static staticMembers(members, keepInitial, requiredMember) {
+    let stat = [];
+    members.map((m) => {
+      if (keepInitial || m.user == requiredMember) {
+        stat.push(m.user);
+      }
+    });
+    return stat;
+  }
+
   static selectedContacts(members) {
     let sel = [];
-    members.map(function(m) {
+    members.map((m) => {
       sel.push(m.user);
     });
     return sel;
@@ -66,31 +78,31 @@ class GroupManager extends React.Component {
       status = {delta: 1, present: true};
     }
 
-    var m = this.state.members.slice();
+    let m = this.state.members.slice();
     m.push(this.props.contacts[index]);
 
-    var sel = GroupManager.selectedContacts(m);
+    const sel = GroupManager.selectedContacts(m);
 
-    var i = this.state.index;
+    const i = this.state.index;
     i[userId] = status;
 
     this.setState({members: m, index: i, selectedContacts: sel});
   }
 
   handleMemberRemoved(userId, index) {
-    var status = this.state.index[userId];
+    const status = this.state.index[userId];
     if (!status || !status.present) {
       return;
     }
     status.present = false;
     status.delta -= 1;
 
-    var m = this.state.members.slice();
+    let m = this.state.members.slice();
     m.splice(index, 1);
 
-    var sel = GroupManager.selectedContacts(m);
+    const sel = GroupManager.selectedContacts(m);
 
-    var i = this.state.index;
+    const i = this.state.index;
     i[userId] = status;
 
     this.setState({members: m, index: i, selectedContacts: sel});
@@ -107,7 +119,7 @@ class GroupManager extends React.Component {
 
   static doContactFiltering(filter, values) {
     if (filter) {
-      for (var i=0; i<values.length; i++) {
+      for (let i=0; i<values.length; i++) {
         if (values[i].indexOf(filter) >= 0) {
           return true;
         }
@@ -154,7 +166,7 @@ class GroupManager extends React.Component {
         <div className="panel-form-row">
           <ChipInput
             chips={this.state.members}
-            required={this.props.requiredMember}
+            staticMembers={this.state.staticMembers}
             prompt="add members"
             filterFunc={this.handleContactFilter}
             onChipRemoved={this.handleMemberRemoved} />