user_groups: Add users to members preview list without add button.

This makes the behaviour of this screen similar to the create channel
screen where the user does not need to click `Add` button to add users
to members preview. This follows most of the logic from that flow for
soft removal, syncing between members preview list and the input pills,
etc. The current user will have a pill in this case unlike channel
creation since a user can create a group without them in it.

web/src/user_group_create_members.ts

@@ -33,8 +33,13 @@ function add_all_users(): void {
     add_user_ids(user_ids);
 }
 
-function remove_user_ids(user_ids: number[]): void {
-    user_group_create_members_data.remove_user_ids(user_ids);
+function soft_remove_user_id(user_id: number): void {
+    user_group_create_members_data.soft_remove_user_id(user_id);
+    redraw_member_list();
+}
+
+function undo_soft_remove_user_id(user_id: number): void {
+    user_group_create_members_data.undo_soft_remove_user_id(user_id);
     redraw_member_list();
 }
 
@@ -43,13 +48,25 @@ export function clear_member_list(): void {
     redraw_member_list();
 }
 
+function sync_user_ids(user_ids: number[]): void {
+    user_group_create_members_data.sync_user_ids(user_ids);
+    redraw_member_list();
+}
+
 function build_pill_widget({$parent_container}: {$parent_container: JQuery}): void {
     const $pill_container = $parent_container.find(".pill-container");
     const get_potential_members = user_group_create_members_data.get_potential_members;
 
-    pill_widget = add_subscribers_pill.create({
+    pill_widget = add_subscribers_pill.create_without_add_button({
         $pill_container,
         get_potential_subscribers: get_potential_members,
+        onPillCreateAction: add_user_ids,
+        // It is better to sync the current set of user ids in the input
+        // instead of removing user_ids from the user_ids_set, otherwise
+        // we'll have to have more complex logic of when to remove
+        // a user and when not to depending upon their group, channel
+        // and individual pills.
+        onPillRemoveAction: sync_user_ids,
     });
 }
 
@@ -64,7 +81,14 @@ export function create_handlers($container: JQuery): void {
         e.preventDefault();
         const $elem = $(e.target);
         const user_id = Number.parseInt($elem.attr("data-user-id")!, 10);
-        remove_user_ids([user_id]);
+        soft_remove_user_id(user_id);
+    });
+
+    $container.on("click", ".undo_soft_removed_potential_subscriber", (e) => {
+        e.preventDefault();
+        const $elem = $(e.target);
+        const user_id = Number.parseInt($elem.attr("data-user-id")!, 10);
+        undo_soft_remove_user_id(user_id);
     });
 
     function add_users({pill_user_ids}: {pill_user_ids: number[]}): void {
@@ -108,6 +132,9 @@ export function build_widgets(): void {
                 full_name: user.full_name,
                 is_current_user: user.user_id === current_user_id,
                 img_src: people.small_avatar_url_for_person(user),
+                soft_removed: user_group_create_members_data.user_id_in_soft_remove_list(
+                    user.user_id,
+                ),
             };
             return render_new_user_group_user(item);
         },
@@ -122,4 +149,5 @@ export function build_widgets(): void {
             return $(`#${CSS.escape("user_checkbox_" + user.user_id)}`);
         },
     });
+    pill_widget.appendValue(current_user.email);
 }

web/src/user_group_create_members_data.ts

@@ -1,11 +1,15 @@
+import _ from "lodash";
+
 import * as people from "./people";
 import type {User} from "./people";
 import {current_user} from "./state_data";
 
 let user_id_set: Set<number>;
+let soft_remove_user_id_set: Set<number>;
 
 export function initialize_with_current_user(): void {
     user_id_set = new Set([current_user.user_id]);
+    soft_remove_user_id_set = new Set();
 }
 
 export function sorted_user_ids(): number[] {
@@ -24,7 +28,7 @@ export function get_all_user_ids(): number[] {
 
 export function get_principals(): number[] {
     // Return list of user ids which were selected by user.
-    return [...user_id_set];
+    return _.difference([...user_id_set], [...soft_remove_user_id_set]);
 }
 
 export function get_potential_members(): User[] {
@@ -38,6 +42,9 @@ export function add_user_ids(user_ids: number[]): void {
             const user = people.maybe_get_user_by_id(user_id);
             if (user) {
                 user_id_set.add(user_id);
+                // Re-adding a user explicitly will not undo the soft remove on their row.
+                // e.g If `Iago` was added as part of a group and crossed out.
+                // Now, adding another group with Iago as part of it should not undo the soft remove.
             }
         }
     }
@@ -46,5 +53,22 @@ export function add_user_ids(user_ids: number[]): void {
 export function remove_user_ids(user_ids: number[]): void {
     for (const user_id of user_ids) {
         user_id_set.delete(user_id);
+        undo_soft_remove_user_id(user_id);
     }
 }
+
+export function sync_user_ids(user_ids: number[]): void {
+    user_id_set = new Set(user_ids);
+}
+
+export function soft_remove_user_id(user_id: number): void {
+    soft_remove_user_id_set.add(user_id);
+}
+
+export function undo_soft_remove_user_id(user_id: number): void {
+    soft_remove_user_id_set.delete(user_id);
+}
+
+export function user_id_in_soft_remove_list(user_id: number): boolean {
+    return soft_remove_user_id_set.has(user_id);
+}

web/templates/user_group_settings/add_members_form.hbs

@@ -5,9 +5,11 @@
             {{~! Squash whitespace so that placeholder is displayed when empty. ~}}
         </div>
     </div>
-    <div class="add_member_btn_wrapper inline-block">
-        <button type="submit" name="add_member" class="button add-member-button add-users-button small rounded sea-green" tabindex="0">
-            {{t 'Add' }}
-        </button>
-    </div>
+    {{#if (not hide_add_button)}}
+        <div class="add_member_btn_wrapper inline-block">
+            <button type="submit" name="add_member" class="button add-member-button add-users-button small rounded sea-green" tabindex="0">
+                {{t 'Add' }}
+            </button>
+        </div>
+    {{/if}}
 </div>

web/templates/user_group_settings/new_user_group_users.hbs

@@ -1,5 +1,5 @@
 <div class="member_list_add float-left">
-    {{> add_members_form}}
+    {{> add_members_form hide_add_button=true}}
 </div>
 <br />
 
@@ -7,7 +7,7 @@
 <button class="add_all_users_to_user_group small button rounded sea-green">{{t 'Add all users'}}</button>
 
 <div class="create_member_list_header">
-    <h4 class="user_group_setting_subsection_title">{{t 'Members' }}</h4>
+    <h4 class="user_group_setting_subsection_title">{{t 'Members preview' }}</h4>
     <input class="add-user-list-filter filter_text_input" name="user_list_filter" type="text"
       autocomplete="off" placeholder="{{t 'Filter members' }}" />
 </div>