action_sheet: Add channel action sheet with mark as read option

Fixes: zulip#1226

Author: chimnayajith

assets/l10n/app_en.arb

@@ -76,6 +76,10 @@
   "@permissionsDeniedReadExternalStorage": {
     "description": "Message for dialog asking the user to grant permissions for external storage read access."
   },
+  "actionSheetOptionMarkChannelAsRead": "Mark channel as read",
+  "@actionSheetOptionMarkChannelAsRead": {
+    "description": "Label for marking a channel as read."
+  },
   "actionSheetOptionMuteTopic": "Mute topic",
   "@actionSheetOptionMuteTopic":  {
     "description": "Label for muting a topic on action sheet."

lib/generated/l10n/zulip_localizations.dart

@@ -219,6 +219,12 @@ abstract class ZulipLocalizations {
   /// **'To upload files, please grant Zulip additional permissions in Settings.'**
   String get permissionsDeniedReadExternalStorage;
 
+  /// Label for marking a channel as read.
+  ///
+  /// In en, this message translates to:
+  /// **'Mark channel as read'**
+  String get actionSheetOptionMarkChannelAsRead;
+
   /// Label for muting a topic on action sheet.
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_en.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_ja.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_nb.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_pl.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'Aby odebrać pliki Zulip musi uzyskać dodatkowe uprawnienia w Ustawieniach.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Wycisz wątek';
 

lib/generated/l10n/zulip_localizations_ru.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'Для загрузки файлов, пожалуйста, предоставьте Zulip дополнительные разрешения в настройках.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Отключить тему';
 

lib/generated/l10n/zulip_localizations_sk.dart

@@ -67,6 +67,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Stlmiť tému';
 

lib/widgets/action_sheet.dart

@@ -163,6 +163,58 @@ class ActionSheetCancelButton extends StatelessWidget {
   }
 }
 
+/// Show a sheet of actions you can take on a channel.
+void showChannelActionSheet(BuildContext context, {
+  required int streamId,
+}) {
+  final store = PerAccountStoreWidget.of(context);
+
+  final optionButtons = <ActionSheetMenuItemButton>[];
+  final unreadCount = store.unreads.countInChannelNarrow(streamId);
+  if (unreadCount > 0) {
+    optionButtons.add(
+      MarkChannelAsReadButton(
+        streamId: streamId,
+        pageContext: context,
+      ),
+    );
+  }
+  if (optionButtons.isEmpty) {
+    // TODO(a11y): This case makes a no-op gesture handler; as a consequence,
+    //   we're presenting some UI (to people who use screen-reader software) as
+    //   though it offers a gesture interaction that it doesn't meaningfully
+    //   offer, which is confusing. The solution here is probably to remove this
+    //   is-empty case by having at least one button that's always present,
+    //   such as "copy link to channel".
+    return;
+  }
+  _showActionSheet(context, optionButtons: optionButtons);
+}
+
+class MarkChannelAsReadButton extends ActionSheetMenuItemButton {
+  const MarkChannelAsReadButton({
+    super.key,
+    required this.streamId,
+    required super.pageContext
+  });
+
+  final int streamId;
+
+  @override
+  IconData get icon => ZulipIcons.message_checked;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionMarkChannelAsRead;
+  }
+
+  @override
+  void onPressed() async {
+    final narrow = ChannelNarrow(streamId);
+    await ZulipAction.markNarrowAsRead(pageContext, narrow);
+  }
+}
+
 /// Show a sheet of actions you can take on a topic.
 ///
 /// Needs a [PageRoot] ancestor.

lib/widgets/inbox.dart

@@ -272,6 +272,9 @@ abstract class _HeaderItem extends StatelessWidget {
         //   But that's in tension with the Figma, which gives these header rows
         //   40px min height.
         onTap: onCollapseButtonTap,
+        onLongPress: this is _LongPressable
+          ? (this as _LongPressable).onLongPress
+          : null,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           Padding(padding: const EdgeInsets.all(10),
             child: Icon(size: 20, color: designVariables.sectionCollapseIcon,
@@ -431,7 +434,13 @@ class _DmItem extends StatelessWidget {
   }
 }
 
-class _StreamHeaderItem extends _HeaderItem {
+mixin _LongPressable on _HeaderItem {
+  // TODO(#1272) move to _HeaderItem base class
+  //   when DM headers become long-pressable; remove mixin
+  Future<void> onLongPress();
+}
+
+class _StreamHeaderItem extends _HeaderItem with _LongPressable {
   final Subscription subscription;
 
   const _StreamHeaderItem({
@@ -464,6 +473,11 @@ class _StreamHeaderItem extends _HeaderItem {
     }
   }
   @override Future<void> onRowTap() => onCollapseButtonTap(); // TODO open channel narrow
+
+  @override
+  Future<void> onLongPress() async {
+    showChannelActionSheet(sectionContext, streamId: subscription.streamId);
+  }
 }
 
 class _StreamSection extends StatelessWidget {

lib/widgets/subscription_list.dart

@@ -4,6 +4,7 @@ import '../api/model/model.dart';
 import '../generated/l10n/zulip_localizations.dart';
 import '../model/narrow.dart';
 import '../model/unreads.dart';
+import 'action_sheet.dart';
 import 'icons.dart';
 import 'message_list.dart';
 import 'store.dart';
@@ -230,6 +231,7 @@ class SubscriptionItem extends StatelessWidget {
             MessageListPage.buildRoute(context: context,
               narrow: ChannelNarrow(subscription.streamId)));
         },
+        onLongPress: () => showChannelActionSheet(context, streamId: subscription.streamId),
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           const SizedBox(width: 16),
           Padding(

test/widgets/action_sheet_test.dart

@@ -30,6 +30,7 @@ import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/inbox.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:share_plus_platform_interface/method_channel/method_channel_share.dart';
+import 'package:zulip/widgets/subscription_list.dart';
 import '../api/fake_api.dart';
 
 import '../example_data.dart' as eg;
@@ -1203,6 +1204,136 @@ void main() {
       });
     });
   });
+
+  group('channel action sheet', () {
+    late ZulipStream someChannel;
+
+    Future<void> prepare({UnreadMessagesSnapshot? unreadMsgs}) async {
+      final stream = eg.stream();
+      someChannel = stream;
+      addTearDown(testBinding.reset);
+
+      unreadMsgs ??= eg.unreadMsgs(channels: [
+        eg.unreadChannelMsgs(
+          streamId: stream.streamId,
+          topic: 'topic',
+          unreadMessageIds: [1],
+        ),
+      ]);
+
+      await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot(
+        realmUsers: [eg.selfUser, eg.otherUser],
+        streams: [someChannel],
+        subscriptions: [eg.subscription(someChannel)],
+        unreadMsgs: unreadMsgs));
+      store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+      connection = store.connection as FakeApiConnection;
+    }
+
+    Future<void> showFromInbox(WidgetTester tester) async {
+      await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id,
+        child: const HomePage()));
+      await tester.pump();
+      check(find.byType(InboxPageBody)).findsOne();
+
+      await tester.longPress(find.text(someChannel.name).hitTestable());
+      await tester.pump(const Duration(milliseconds: 250));
+    }
+
+    Future<void> showFromSubscriptionList(WidgetTester tester) async {
+      await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id,
+        child: const HomePage()));
+      await tester.pump();
+      await tester.tap(find.byIcon(ZulipIcons.hash_italic));
+      await tester.pump();
+      check(find.byType(SubscriptionListPageBody)).findsOne();
+
+      await tester.longPress(find.text(someChannel.name).hitTestable());
+      await tester.pump(const Duration(milliseconds: 250));
+    }
+
+    final actionSheetFinder = find.byType(BottomSheet);
+    Finder findButtonForLabel(String label) =>
+      find.descendant(of: actionSheetFinder, matching: find.text(label));
+
+    void checkButton(String label) {
+      check(findButtonForLabel(label)).findsOne();
+    }
+
+    group('showChannelActionSheet', () {
+      void checkButtons() {
+        check(actionSheetFinder).findsOne();
+        checkButton('Mark channel as read');
+      }
+
+      testWidgets('show from inbox', (tester) async {
+        await prepare();
+        await showFromInbox(tester);
+        checkButtons();
+      });
+
+      testWidgets('show from subscription list', (tester) async {
+        await prepare();
+        await showFromSubscriptionList(tester);
+        checkButtons();
+      });
+
+      testWidgets('show with no unread messages', (tester) async {
+        await prepare(unreadMsgs: eg.unreadMsgs());
+        await showFromSubscriptionList(tester);
+        check(actionSheetFinder).findsNothing();
+      });
+    });
+
+    group('MarkChannelAsReadButton', () {
+      void checkRequest(int streamId) {
+        check(connection.takeRequests()).single.isA<http.Request>()
+          ..method.equals('POST')
+          ..url.path.equals('/api/v1/messages/flags/narrow')
+          ..bodyFields.deepEquals({
+            'anchor': 'oldest',
+            'include_anchor': 'false',
+            'num_before': '0',
+            'num_after': '1000',
+            'narrow': jsonEncode([
+              {'operator': 'stream', 'operand': streamId},
+              {'operator': 'is', 'operand': 'unread'}
+            ]),
+            'op': 'add',
+            'flag': 'read',
+          });
+      }
+
+      testWidgets('happy path from inbox', (tester) async {
+        await prepare();
+        await showFromInbox(tester);
+        connection.prepare(json: UpdateMessageFlagsForNarrowResult(
+          processedCount: 1, updatedCount: 1,
+          firstProcessedId: null, lastProcessedId: null,
+          foundOldest: true, foundNewest: true).toJson());
+        await tester.tap(findButtonForLabel('Mark channel as read'));
+        await tester.pumpAndSettle();
+
+        checkNoErrorDialog(tester);
+        checkRequest(someChannel.streamId);
+      });
+
+      testWidgets('request fails', (tester) async {
+        await prepare();
+        await showFromInbox(tester);
+
+        // Prepare error response
+        connection.prepare(exception: http.ClientException('Oops'));
+
+        // Tap and wait for dialog
+        await tester.tap(findButtonForLabel('Mark channel as read'));
+        await tester.pumpAndSettle(); // Wait for dialog animation
+
+        checkErrorDialog(tester,
+          expectedTitle: "Mark as read failed");
+      });
+    });
+  });
 }
 
 extension UnicodeEmojiWidgetChecks on Subject<UnicodeEmojiWidget> {