new-dm: Support unselecting a user by tapping chip in input

Author: chrisbobbe

lib/widgets/new_dm_sheet.dart

@@ -132,7 +132,8 @@ class _NewDmPickerState extends State<NewDmPicker> with PerAccountStoreAwareStat
       _NewDmHeader(selectedUserIds: selectedUserIds),
       _NewDmSearchBar(
         controller: searchController,
-        selectedUserIds: selectedUserIds),
+        selectedUserIds: selectedUserIds,
+        unselectUser: _unselectUser),
       Expanded(
         child: _NewDmUserList(
           filteredUsers: filteredUsers,
@@ -214,10 +215,12 @@ class _NewDmSearchBar extends StatelessWidget {
   const _NewDmSearchBar({
     required this.controller,
     required this.selectedUserIds,
+    required this.unselectUser,
   });
 
   final TextEditingController controller;
   final Set<int> selectedUserIds;
+  final void Function(int) unselectUser;
 
   // void _removeUser
 
@@ -265,7 +268,7 @@ class _NewDmSearchBar extends StatelessWidget {
             crossAxisAlignment: WrapCrossAlignment.center,
             children: [
               for (final userId in selectedUserIds)
-                _SelectedUserChip(userId: userId),
+                _SelectedUserChip(userId: userId, unselectUser: unselectUser),
               // The IntrinsicWidth lets the text field participate in the Wrap
               // when its content fits on the same line with a user chip,
               // by preventing it from expanding to fill the available width.  See:
@@ -276,9 +279,13 @@ class _NewDmSearchBar extends StatelessWidget {
 }
 
 class _SelectedUserChip extends StatelessWidget {
-  const _SelectedUserChip({required this.userId});
+  const _SelectedUserChip({
+    required this.userId,
+    required this.unselectUser,
+  });
 
   final int userId;
+  final void Function(int) unselectUser;
 
   @override
   Widget build(BuildContext context) {
@@ -287,24 +294,26 @@ class _SelectedUserChip extends StatelessWidget {
     final clampedTextScaler = MediaQuery.textScalerOf(context)
       .clamp(maxScaleFactor: 1.5);
 
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: designVariables.bgMenuButtonSelected,
-        borderRadius: BorderRadius.circular(3)),
-      child: Row(mainAxisSize: MainAxisSize.min, children: [
-        Avatar(userId: userId, size: clampedTextScaler.scale(22), borderRadius: 3),
-        Flexible(
-          child: Padding(
-            padding: const EdgeInsetsDirectional.fromSTEB(5, 3, 4, 3),
-            child: Text(store.userDisplayName(userId),
-              textScaler: clampedTextScaler,
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: TextStyle(
-                fontSize: 16,
-                height: 16 / 16,
-                color: designVariables.labelMenuButton)))),
-      ]));
+    return GestureDetector(
+      onTap: () => unselectUser(userId),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: designVariables.bgMenuButtonSelected,
+          borderRadius: BorderRadius.circular(3)),
+        child: Row(mainAxisSize: MainAxisSize.min, children: [
+          Avatar(userId: userId, size: clampedTextScaler.scale(22), borderRadius: 3),
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsetsDirectional.fromSTEB(5, 3, 4, 3),
+              child: Text(store.userDisplayName(userId),
+                textScaler: clampedTextScaler,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 16,
+                  height: 16 / 16,
+                  color: designVariables.labelMenuButton)))),
+        ])));
   }
 }
 

test/widgets/new_dm_sheet_test.dart

@@ -63,12 +63,15 @@ void main() {
   Finder findUserTile(User user) =>
     find.widgetWithText(InkWell, user.fullName).first;
 
-  Finder findUserChip(User user) =>
-    find.byWidgetPredicate((widget) =>
+  Finder findUserChip(User user) {
+    final findAvatar = find.byWidgetPredicate((widget) =>
       widget is Avatar
       && widget.userId == user.userId
       && widget.size == 22);
 
+    return find.ancestor(of: findAvatar, matching: find.byType(GestureDetector));
+  }
+
   testWidgets('shows header with correct buttons', (tester) async {
     await setupSheet(tester, users: []);
 
@@ -201,6 +204,18 @@ void main() {
       }
     }
 
+
+    testWidgets('tapping user chip deselects the user', (tester) async {
+      await setupSheet(tester, users: [eg.selfUser, eg.otherUser, eg.thirdUser]);
+
+      await tester.tap(findUserTile(eg.otherUser));
+      await tester.pump();
+      checkUserSelected(tester, eg.otherUser, true);
+      await tester.tap(findUserChip(eg.otherUser));
+      await tester.pump();
+      checkUserSelected(tester, eg.otherUser, false);
+    });
+
     testWidgets('selecting and deselecting a user', (tester) async {
       final user = eg.user(fullName: 'Test User');
       await setupSheet(tester, users: [eg.selfUser, user]);