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

Fixes: #675

Co-authored-by: Rajesh Malviya <[email protected]>

Author: sm-sayedi

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."

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,7 +886,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: blockingErrorBanner ?? Column(children: [
             Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
               Expanded(
                 child: Theme(
@@ -973,6 +976,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 +1024,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 ?? false));
+      if (hasDeactivatedUser) {
+        return _ErrorBanner(label: ZulipLocalizations.of(context)
+          .errorBannerDeactivatedDmLabel);
+      }
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     return _ComposeBoxLayout(
@@ -1013,7 +1052,8 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
         topicController: null,
         contentController: _contentController,
         getDestination: () => widget.narrow.destination,
-      ));
+      ),
+      blockingErrorBanner: _errorBanner(context));
   }
 }
 

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),
+            ]))));
   }
 }
 

lib/widgets/theme.dart

@@ -125,6 +125,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() :
@@ -139,6 +142,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._({
@@ -150,6 +156,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.
@@ -174,6 +183,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({
@@ -185,6 +197,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     StreamColorSwatches? streamColorSwatches,
     Color? star,
     Color? editedMovedMarkerCollapsed,
+    Color? errorBannerLabel,
+    Color? errorBannerBackground,
+    Color? errorBannerBorder,
   }) {
     return DesignVariables._(
       bgTopBar: bgTopBar ?? this.bgTopBar,
@@ -195,6 +210,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,
     );
   }
 
@@ -212,6 +230,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)!,
     );
   }
 }

test/widgets/compose_box_test.dart

@@ -7,13 +7,15 @@ 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';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/compose_box.dart';
 import 'package:zulip/widgets/store.dart';
+import 'package:zulip/widgets/theme.dart';
 
 import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
@@ -40,14 +42,15 @@ void main() {
     connection = store.connection as FakeApiConnection;
 
     final controllerKey = GlobalKey<ComposeBoxController>();
-    await tester.pumpWidget(
+    await tester.pumpWidget(Builder(builder: (context) =>
       MaterialApp(
+        theme: zulipThemeData(context),
         localizationsDelegates: ZulipLocalizations.localizationsDelegates,
         supportedLocales: ZulipLocalizations.supportedLocales,
         home: GlobalStoreWidget(
           child: PerAccountStoreWidget(
             accountId: eg.selfAccount.id,
-            child: ComposeBox(controllerKey: controllerKey, narrow: narrow)))));
+            child: ComposeBox(controllerKey: controllerKey, narrow: narrow))))));
     await tester.pumpAndSettle();
 
     return controllerKey;
@@ -373,4 +376,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);
+      });
+    });
+  });
 }