compose_box: Replace compose box with a banner in DMs with deactivated users

sm-sayedi · rajveermalviya · sm-sayedi · commit 2fca6a5c6943 · 2024-07-26T04:18:57.000+04:30
Fixes: zulip#675 Co-authored-by: Rajesh Malviya <rajveer0malviya@gmail.com>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -180,6 +180,10 @@
   "@successMessageLinkCopied": {
     "description": "Message when link of a message was copied to the user's system clipboard."
   },
+  "errorBannerDeactivatedDmLabel": "You cannot send messages to deactivated users.",
+  "@errorBannerDeactivatedDmLabel": {
+    "description": "Label text for error banner when sending a message to one or multiple deactivated users."
+  },
   "composeBoxAttachFilesTooltip": "Attach files",
   "@composeBoxAttachFilesTooltip": {
     "description": "Tooltip for compose box icon to attach a file to the message."
diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
@@ -284,7 +284,6 @@ class _ContentInput extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     ColorScheme colorScheme = Theme.of(context).colorScheme;
-
     return InputDecorator(
       decoration: const InputDecoration(),
       child: ConstrainedBox(
@@ -505,7 +504,10 @@ Future<void> _uploadFiles({
 }
 
 abstract class _AttachUploadsButton extends StatelessWidget {
-  const _AttachUploadsButton({required this.contentController, required this.contentFocusNode});
+  const _AttachUploadsButton({
+    required this.contentController,
+    required this.contentFocusNode,
+  });
 
   final ComposeContentController contentController;
   final FocusNode contentFocusNode;
@@ -606,7 +608,10 @@ Future<Iterable<_File>> _getFilePickerFiles(BuildContext context, FileType type)
 }
 
 class _AttachFileButton extends _AttachUploadsButton {
-  const _AttachFileButton({required super.contentController, required super.contentFocusNode});
+  const _AttachFileButton({
+    required super.contentController,
+    required super.contentFocusNode,
+  });
 
   @override
   IconData get icon => Icons.attach_file;
@@ -622,7 +627,10 @@ class _AttachFileButton extends _AttachUploadsButton {
 }
 
 class _AttachMediaButton extends _AttachUploadsButton {
-  const _AttachMediaButton({required super.contentController, required super.contentFocusNode});
+  const _AttachMediaButton({
+    required super.contentController,
+    required super.contentFocusNode,
+  });
 
   @override
   IconData get icon => Icons.image;
@@ -639,7 +647,10 @@ class _AttachMediaButton extends _AttachUploadsButton {
 }
 
 class _AttachFromCameraButton extends _AttachUploadsButton {
-  const _AttachFromCameraButton({required super.contentController, required super.contentFocusNode});
+  const _AttachFromCameraButton({
+    required super.contentController,
+    required super.contentFocusNode,
+  });
 
   @override
   IconData get icon => Icons.camera_alt;
@@ -850,11 +861,13 @@ class _ComposeBoxLayout extends StatelessWidget {
     required this.sendButton,
     required this.contentController,
     required this.contentFocusNode,
+    this.placeholder,
   });
 
   final Widget? topicInput;
   final Widget contentInput;
   final Widget sendButton;
+  final Widget? placeholder;
   final ComposeContentController contentController;
   final FocusNode contentFocusNode;
 
@@ -883,7 +896,7 @@ class _ComposeBoxLayout extends StatelessWidget {
         minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
         child: Padding(
           padding: const EdgeInsets.only(top: 8.0),
-          child: Column(children: [
+          child: placeholder ?? Column(children: [
             Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
               Expanded(
                 child: Theme(
@@ -900,9 +913,18 @@ class _ComposeBoxLayout extends StatelessWidget {
               data: themeData.copyWith(
                 iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
               child: Row(children: [
-                _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
-                _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
-                _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
+                _AttachFileButton(
+                  contentController: contentController,
+                  contentFocusNode: contentFocusNode,
+                ),
+                _AttachMediaButton(
+                  contentController: contentController,
+                  contentFocusNode: contentFocusNode,
+                ),
+                _AttachFromCameraButton(
+                  contentController: contentController,
+                  contentFocusNode: contentFocusNode,
+                ),
               ])),
           ]))));  }
 }
@@ -982,6 +1004,29 @@ class _FixedDestinationComposeBox extends StatefulWidget {
   State<_FixedDestinationComposeBox> createState() => _FixedDestinationComposeBoxState();
 }
 
+class _ErrorBanner extends StatelessWidget {
+  const _ErrorBanner({required this.label});
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: const Color.fromRGBO(238, 222, 221, 1),
+        border: Border.all(color: const Color.fromRGBO(132, 41, 36, 0.4)),
+        borderRadius: BorderRadius.circular(5)),
+      child: Text(label,
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+        style: const TextStyle(fontSize: 18,
+          color: Color.fromRGBO(133, 42, 35, 1)),
+      ),
+    );
+  }
+}
+
 class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox> implements ComposeBoxController<_FixedDestinationComposeBox>  {
   @override ComposeTopicController? get topicController => null;
 
@@ -998,6 +1043,19 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
     super.dispose();
   }
 
+  Widget? _placeholder(BuildContext context) {
+    if (widget.narrow case DmNarrow(:final otherRecipientIds)) {
+      final store = PerAccountStoreWidget.of(context);
+      final showPlaceholder = otherRecipientIds.any((id) =>
+        !(store.users[id]?.isActive ?? true));
+      if (showPlaceholder) {
+        return _ErrorBanner(label: ZulipLocalizations.of(context)
+          .errorBannerDeactivatedDmLabel);
+      }
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     return _ComposeBoxLayout(
@@ -1013,7 +1071,8 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
         topicController: null,
         contentController: _contentController,
         getDestination: () => widget.narrow.destination,
-      ));
+      ),
+      placeholder: _placeholder(context));
   }
 }
 
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -117,24 +117,25 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
       //     https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=147%3A9088&mode=dev
       body: Builder(
         builder: (BuildContext context) => Center(
-          child: Column(children: [
-            MediaQuery.removePadding(
-              // Scaffold knows about the app bar, and so has run this
-              // BuildContext, which is under `body`, through
-              // MediaQuery.removePadding with `removeTop: true`.
-              context: context,
-
-              // The compose box, when present, pads the bottom inset.
-              // TODO this copies the details of when the compose box is shown;
-              //   if those details get complicated, refactor to avoid copying.
-              // TODO(#311) If we have a bottom nav, it will pad the bottom
-              //   inset, and this should always be true.
-              removeBottom: widget.narrow is! CombinedFeedNarrow,
-
-              child: Expanded(
-                child: MessageList(narrow: widget.narrow))),
-            ComposeBox(controllerKey: _composeBoxKey, narrow: widget.narrow),
-          ]))));
+          child: Column(crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              MediaQuery.removePadding(
+                // Scaffold knows about the app bar, and so has run this
+                // BuildContext, which is under `body`, through
+                // MediaQuery.removePadding with `removeTop: true`.
+                context: context,
+
+                // The compose box, when present, pads the bottom inset.
+                // TODO this copies the details of when the compose box is shown;
+                //   if those details get complicated, refactor to avoid copying.
+                // TODO(#311) If we have a bottom nav, it will pad the bottom
+                //   inset, and this should always be true.
+                removeBottom: widget.narrow is! CombinedFeedNarrow,
+
+                child: Expanded(
+                  child: MessageList(narrow: widget.narrow))),
+              ComposeBox(controllerKey: _composeBoxKey, narrow: widget.narrow),
+            ]))));
   }
 }
 
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:zulip/api/model/events.dart';
 import 'package:zulip/api/model/model.dart';
 import 'package:zulip/api/route/messages.dart';
 import 'package:zulip/model/localizations.dart';
@@ -373,4 +374,112 @@ void main() {
       // TODO test what happens when capturing/uploading fails
     });
   });
+
+  group('compose box in DMs with deactivated users', () {
+    Finder contentFieldFinder() => find.descendant(
+      of: find.byType(ComposeBox),
+      matching: find.byType(TextField));
+
+    Finder attachButtonFinder(IconData icon) => find.descendant(
+      of: find.byType(ComposeBox),
+      matching: find.widgetWithIcon(IconButton, icon));
+
+    void checkComposeBoxParts({required bool areShown}) {
+      check(contentFieldFinder().evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(Icons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(Icons.image).evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(Icons.camera_alt).evaluate().length).equals(areShown ? 1 : 0);
+    }
+
+    void checkBanner({required bool isShown}) {
+      final bannerTextFinder = find.text(GlobalLocalizations.zulipLocalizations
+        .errorBannerDeactivatedDmLabel);
+      check(bannerTextFinder.evaluate().length).equals(isShown ? 1 : 0);
+    }
+
+    void checkComposeBox({required bool isShown}) {
+      checkComposeBoxParts(areShown: isShown);
+      checkBanner(isShown: !isShown);
+    }
+
+    Future<void> changeUserStatus(WidgetTester tester,
+        {required User user, required bool isActive}) async {
+      await store.handleEvent(RealmUserUpdateEvent(id: 1,
+        userId: user.userId, isActive: isActive));
+      await tester.pump();
+    }
+
+    final selfUser = eg.selfUser;
+
+    DmNarrow dmNarrowWith(User otherUser) => DmNarrow.withUser(otherUser.userId,
+      selfUserId: selfUser.userId);
+
+    DmNarrow groupDmNarrowWith(List<User> otherUsers) => DmNarrow.withOtherUsers(
+      otherUsers.map((u) => u.userId), selfUserId: selfUser.userId);
+
+    group('1:1 DMs', () {
+      testWidgets('compose box replaced with a banner', (tester) async {
+        final deactivatedUser = eg.user(isActive: false);
+        await prepareComposeBox(tester, narrow: dmNarrowWith(deactivatedUser),
+          users: [deactivatedUser]);
+        checkComposeBox(isShown: false);
+      });
+
+      testWidgets('active user becomes deactivated -> '
+          'compose box is replaced with a banner', (tester) async {
+        final activeUser = eg.user(isActive: true);
+        await prepareComposeBox(tester, narrow: dmNarrowWith(activeUser),
+          users: [activeUser]);
+        checkComposeBox(isShown: true);
+
+        await changeUserStatus(tester, user: activeUser, isActive: false);
+        checkComposeBox(isShown: false);
+      });
+
+      testWidgets('deactivated user becomes active -> '
+          'banner is replaced with the compose box', (tester) async {
+        final deactivatedUser = eg.user(isActive: false);
+        await prepareComposeBox(tester, narrow: dmNarrowWith(deactivatedUser),
+          users: [deactivatedUser]);
+        checkComposeBox(isShown: false);
+
+        await changeUserStatus(tester, user: deactivatedUser, isActive: true);
+        checkComposeBox(isShown: true);
+      });
+    });
+
+    group('group DMs', () {
+      testWidgets('compose box replaced with a banner', (tester) async {
+        final deactivatedUsers = [eg.user(isActive: false), eg.user(isActive: false)];
+        await prepareComposeBox(tester, narrow: groupDmNarrowWith(deactivatedUsers),
+          users: deactivatedUsers);
+        checkComposeBox(isShown: false);
+      });
+
+      testWidgets('at least one user becomes deactivated -> '
+          'compose box is replaced with a banner', (tester) async {
+        final activeUsers = [eg.user(isActive: true), eg.user(isActive: true)];
+        await prepareComposeBox(tester, narrow: groupDmNarrowWith(activeUsers),
+          users: activeUsers);
+        checkComposeBox(isShown: true);
+
+        await changeUserStatus(tester, user: activeUsers[0], isActive: false);
+        checkComposeBox(isShown: false);
+      });
+
+      testWidgets('all deactivated users become active -> '
+          'banner is replaced with the compose box', (tester) async {
+        final deactivatedUsers = [eg.user(isActive: false), eg.user(isActive: false)];
+        await prepareComposeBox(tester, narrow: groupDmNarrowWith(deactivatedUsers),
+          users: deactivatedUsers);
+        checkComposeBox(isShown: false);
+
+        await changeUserStatus(tester, user: deactivatedUsers[0], isActive: true);
+        checkComposeBox(isShown: false);
+
+        await changeUserStatus(tester, user: deactivatedUsers[1], isActive: true);
+        checkComposeBox(isShown: true);
+      });
+    });
+  });
 }
