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

sm-sayedi · rajveermalviya · sm-sayedi · commit e5d95527161e · 2024-07-28T10:19:53.000+04:30
Fixes: #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
@@ -16,6 +16,7 @@ import '../model/store.dart';
 import 'autocomplete.dart';
 import 'dialog.dart';
 import 'store.dart';
+import 'theme.dart';
 
 const double _inputVerticalPadding = 8;
 const double _sendButtonSize = 36;
@@ -850,11 +851,13 @@ class _ComposeBoxLayout extends StatelessWidget {
     required this.sendButton,
     required this.contentController,
     required this.contentFocusNode,
+    this.blockingErrorBanner,
   });
 
   final Widget? topicInput;
   final Widget contentInput;
   final Widget sendButton;
+  final Widget? blockingErrorBanner;
   final ComposeContentController contentController;
   final FocusNode contentFocusNode;
 
@@ -883,28 +886,30 @@ class _ComposeBoxLayout extends StatelessWidget {
         minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
         child: Padding(
           padding: const EdgeInsets.only(top: 8.0),
-          child: Column(children: [
-            Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
-              Expanded(
-                child: Theme(
-                  data: inputThemeData,
-                  child: Column(children: [
-                    if (topicInput != null) topicInput!,
-                    if (topicInput != null) const SizedBox(height: 8),
-                    contentInput,
-                  ]))),
-              const SizedBox(width: 8),
-              sendButton,
-            ]),
-            Theme(
-              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),
-              ])),
-          ]))));  }
+          child: blockingErrorBanner != null
+            ? SizedBox(width: double.infinity, child: blockingErrorBanner)
+            : Column(children: [
+                Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
+                  Expanded(
+                    child: Theme(
+                      data: inputThemeData,
+                      child: Column(children: [
+                        if (topicInput != null) topicInput!,
+                        if (topicInput != null) const SizedBox(height: 8),
+                        contentInput,
+                      ]))),
+                  const SizedBox(width: 8),
+                  sendButton,
+                ]),
+                Theme(
+                  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),
+                  ])),
+            ]))));  }
 }
 
 abstract class ComposeBoxController<T extends StatefulWidget> extends State<T> {
@@ -973,6 +978,29 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> implements Compose
   }
 }
 
+class _ErrorBanner extends StatelessWidget {
+  const _ErrorBanner({required this.label});
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: designVariables.errorBannerBackground,
+        border: Border.all(color: designVariables.errorBannerBorder),
+        borderRadius: BorderRadius.circular(5)),
+      child: Text(label,
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+        style: TextStyle(fontSize: 18, color: designVariables.errorBannerLabel),
+      ),
+    );
+  }
+}
+
 class _FixedDestinationComposeBox extends StatefulWidget {
   const _FixedDestinationComposeBox({super.key, required this.narrow});
 
@@ -998,6 +1026,19 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
     super.dispose();
   }
 
+  Widget? _errorBanner(BuildContext context) {
+    if (widget.narrow case DmNarrow(:final otherRecipientIds)) {
+      final store = PerAccountStoreWidget.of(context);
+      final hasDeactivatedUser = otherRecipientIds.any((id) =>
+        !(store.users[id]?.isActive ?? true));
+      if (hasDeactivatedUser) {
+        return _ErrorBanner(label: ZulipLocalizations.of(context)
+          .errorBannerDeactivatedDmLabel);
+      }
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     return _ComposeBoxLayout(
@@ -1013,7 +1054,8 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
         topicController: null,
         contentController: _contentController,
         getDestination: () => widget.narrow.destination,
-      ));
+      ),
+      blockingErrorBanner: _errorBanner(context));
   }
 }
 
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
@@ -128,6 +128,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       streamColorSwatches: StreamColorSwatches.light,
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
       editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
+      errorBannerLabel: const Color.fromRGBO(133, 42, 35, 1),
+      errorBannerBackground: const Color.fromRGBO(238, 222, 221, 1),
+      errorBannerBorder: const Color.fromRGBO(132, 41, 36, 0.4),
     );
 
   DesignVariables.dark() :
@@ -142,6 +145,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
       // TODO(#95) need dark-theme color
       editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
+      errorBannerLabel: const Color.fromRGBO(241, 170, 167, 1),
+      errorBannerBackground: const Color.fromRGBO(78, 19, 19, 1),
+      errorBannerBorder: const Color.fromRGBO(237, 145, 140, 0.4),
     );
 
   DesignVariables._({
@@ -153,6 +159,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.streamColorSwatches,
     required this.star,
     required this.editedMovedMarkerCollapsed,
+    required this.errorBannerLabel,
+    required this.errorBannerBackground,
+    required this.errorBannerBorder,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -177,6 +186,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color star;
   final Color editedMovedMarkerCollapsed;
+  final Color errorBannerLabel;
+  final Color errorBannerBackground;
+  final Color errorBannerBorder;
 
   @override
   DesignVariables copyWith({
@@ -188,6 +200,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     StreamColorSwatches? streamColorSwatches,
     Color? star,
     Color? editedMovedMarkerCollapsed,
+    Color? errorBannerLabel,
+    Color? errorBannerBackground,
+    Color? errorBannerBorder,
   }) {
     return DesignVariables._(
       bgTopBar: bgTopBar ?? this.bgTopBar,
@@ -198,6 +213,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       streamColorSwatches: streamColorSwatches ?? this.streamColorSwatches,
       star: star ?? this.star,
       editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
+      errorBannerLabel: errorBannerLabel ?? this.errorBannerLabel,
+      errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
+      errorBannerBorder: errorBannerBorder ?? this.errorBannerBorder,
     );
   }
 
@@ -215,6 +233,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       streamColorSwatches: StreamColorSwatches.lerp(streamColorSwatches, other.streamColorSwatches, t),
       star: Color.lerp(star, other.star, t)!,
       editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
+      errorBannerLabel: Color.lerp(errorBannerLabel, other.errorBannerLabel, t)!,
+      errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,
+      errorBannerBorder: Color.lerp(errorBannerBorder, other.errorBannerBorder, t)!,
     );
   }
 }
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
@@ -6,6 +6,7 @@ import 'package:http/http.dart' as http;
 import 'package:flutter/material.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';
@@ -366,4 +367,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);
+      });
+    });
+  });
 }
