compose_box: Send typing notices on content/focus changes

For a compose box with topic input, the field `destination`
contains a mutable state computed from the topic text.

This implementation is similar to hintText's to still keep
everything up-to-date.

When testing typing activities that do not end with a "typing stopped"
notice, we need to wait for the idle timer to expire so that the test
does not end with pending timers.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -272,12 +272,14 @@ class ComposeContentController extends ComposeController<ContentValidationError>
 class _ContentInput extends StatefulWidget {
   const _ContentInput({
     required this.narrow,
+    required this.destination,
     required this.controller,
     required this.focusNode,
     required this.hintText,
   });
 
   final Narrow narrow;
+  final SendableNarrow destination;
   final ComposeContentController controller;
   final FocusNode focusNode;
   final String hintText;
@@ -287,6 +289,50 @@ class _ContentInput extends StatefulWidget {
 }
 
 class _ContentInputState extends State<_ContentInput> {
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_contentChanged);
+    widget.focusNode.addListener(_focusChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant _ContentInput oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.controller != oldWidget.controller) {
+      oldWidget.controller.removeListener(_contentChanged);
+      widget.controller.addListener(_contentChanged);
+    }
+    if (widget.focusNode != oldWidget.focusNode) {
+      oldWidget.focusNode.removeListener(_focusChanged);
+      widget.focusNode.addListener(_focusChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_contentChanged);
+    widget.focusNode.removeListener(_focusChanged);
+    super.dispose();
+  }
+
+  void _contentChanged() {
+    final store = PerAccountStoreWidget.of(context);
+    (widget.controller.text.isEmpty)
+      ? store.typingNotifier.stoppedComposing()
+      : store.typingNotifier.keystroke(widget.destination);
+  }
+
+  void _focusChanged() {
+    if (widget.focusNode.hasFocus) {
+      // Content input getting focus doesn't necessarily mean that
+      // the user started typing, so do nothing.
+      return;
+    }
+    final store = PerAccountStoreWidget.of(context);
+    store.typingNotifier.stoppedComposing();
+  }
+
   @override
   Widget build(BuildContext context) {
     ColorScheme colorScheme = Theme.of(context).colorScheme;
@@ -375,6 +421,7 @@ class _StreamContentInputState extends State<_StreamContentInput> {
       ?? zulipLocalizations.composeBoxUnknownChannelName;
     return _ContentInput(
       narrow: widget.narrow,
+      destination: TopicNarrow(widget.narrow.streamId, _topicTextNormalized),
       controller: widget.controller,
       focusNode: widget.focusNode,
       hintText: zulipLocalizations.composeBoxChannelContentHint(streamName, _topicTextNormalized));
@@ -451,6 +498,7 @@ class _FixedDestinationContentInput extends StatelessWidget {
   Widget build(BuildContext context) {
     return _ContentInput(
       narrow: narrow,
+      destination: narrow,
       controller: controller,
       focusNode: focusNode,
       hintText: _hintText(context));
@@ -823,6 +871,10 @@ class _SendButtonState extends State<_SendButton> {
     final content = widget.contentController.textNormalized;
 
     widget.contentController.clear();
+    // The following `stoppedComposing` call is currently redundant,
+    // because clearing input sends a "typing stopped" notice.
+    // It will be necessary once we resolve #720.
+    store.typingNotifier.stoppedComposing();
 
     try {
       // TODO(#720) clear content input only on success response;

test/model/typing_status_test.dart

@@ -17,6 +17,33 @@ import '../stdlib_checks.dart';
 import 'binding.dart';
 import 'test_store.dart';
 
+void checkSetTypingStatusRequests(
+  List<http.BaseRequest> requests,
+  List<(TypingOp, SendableNarrow)> expected,
+) {
+  Condition<Object?> conditionTypingRequest(Map<String, String> expected) {
+    return (Subject<Object?> it) => it.isA<http.Request>()
+      ..method.equals('POST')
+      ..url.path.equals('/api/v1/typing')
+      ..bodyFields.deepEquals(expected);
+  }
+
+  check(requests).deepEquals([
+    for (final (op, narrow) in expected)
+      switch (narrow) {
+        TopicNarrow() => conditionTypingRequest({
+          'type': 'channel',
+          'op': op.toJson(),
+          'stream_id': narrow.streamId.toString(),
+          'topic': narrow.topic}),
+        DmNarrow() => conditionTypingRequest({
+          'type': 'direct',
+          'op': op.toJson(),
+          'to': jsonEncode(narrow.allRecipientIds)}),
+      }
+  ]);
+}
+
 void main() {
   TestZulipBinding.ensureInitialized();
 
@@ -228,33 +255,6 @@ void main() {
     late FakeApiConnection connection;
     late TopicNarrow narrow;
 
-    void checkSetTypingStatusRequests(
-      List<http.BaseRequest> requests,
-      List<(TypingOp, SendableNarrow)> expected,
-    ) {
-      Condition<Object?> conditionTypingRequest(Map<String, String> expected) {
-        return (Subject<Object?> it) => it.isA<http.Request>()
-          ..method.equals('POST')
-          ..url.path.equals('/api/v1/typing')
-          ..bodyFields.deepEquals(expected);
-      }
-
-      check(requests).deepEquals([
-        for (final (op, narrow) in expected)
-          switch (narrow) {
-            TopicNarrow() => conditionTypingRequest({
-              'type': 'channel',
-              'op': op.toJson(),
-              'stream_id': narrow.streamId.toString(),
-              'topic': narrow.topic}),
-            DmNarrow() => conditionTypingRequest({
-              'type': 'direct',
-              'op': op.toJson(),
-              'to': jsonEncode(narrow.allRecipientIds)}),
-          }
-      ]);
-    }
-
     void checkTypingRequest(TypingOp op, SendableNarrow narrow) =>
       checkSetTypingStatusRequests(connection.takeRequests(), [(op, narrow)]);
 

test/widgets/compose_box_test.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:convert';
 
 import 'package:checks/checks.dart';
@@ -15,13 +16,16 @@ import 'package:zulip/model/localizations.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
+import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/compose_box.dart';
+import 'package:zulip/widgets/page.dart';
 
 import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
 import '../flutter_checks.dart';
 import '../model/binding.dart';
 import '../model/test_store.dart';
+import '../model/typing_status_test.dart';
 import '../stdlib_checks.dart';
 import 'dialog_checks.dart';
 import 'test_app.dart';
@@ -32,6 +36,9 @@ void main() {
   late PerAccountStore store;
   late FakeApiConnection connection;
 
+  final contentInputFinder = find.byWidgetPredicate(
+    (widget) => widget is TextField && widget.controller is ComposeContentController);
+
   Future<GlobalKey<ComposeBoxController>> prepareComposeBox(WidgetTester tester,
       {required Narrow narrow, List<User> users = const []}) async {
     addTearDown(testBinding.reset);
@@ -206,6 +213,139 @@ void main() {
     });
   });
 
+  group('ComposeBox typing notices', () {
+    const narrow = TopicNarrow(123, 'some topic');
+
+    void checkTypingRequest(TypingOp op, SendableNarrow narrow) =>
+      checkSetTypingStatusRequests(connection.takeRequests(), [(op, narrow)]);
+
+    Future<void> checkStartTyping(WidgetTester tester, SendableNarrow narrow) async {
+      connection.prepare(json: {});
+      await tester.enterText(contentInputFinder, 'hello world');
+      checkTypingRequest(TypingOp.start, narrow);
+    }
+
+    testWidgets('smoke TopicNarrow', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('smoke DmNarrow', (tester) async {
+      final narrow = DmNarrow.withUsers(
+        [eg.otherUser.userId], selfUserId: eg.selfUser.userId);
+      await prepareComposeBox(tester, narrow: narrow);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('smoke ChannelNarrow', (tester) async {
+      const narrow = ChannelNarrow(123);
+      final destinationNarrow = TopicNarrow(narrow.streamId, 'test topic');
+      await prepareComposeBox(tester, narrow: narrow);
+      await enterTopic(tester, narrow: narrow, topic: destinationNarrow.topic);
+
+      await checkStartTyping(tester, destinationNarrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, destinationNarrow);
+    });
+
+    testWidgets('clearing text sends a "typing stopped" notice', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.enterText(contentInputFinder, '');
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('hitting send button sends a "typing stopped" notice', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      connection.prepare(json: SendMessageResult(id: 123).toJson());
+      await tester.tap(find.byIcon(Icons.send));
+      await tester.pump(Duration.zero);
+      final requests = connection.takeRequests();
+      checkSetTypingStatusRequests([requests.first], [(TypingOp.stop, narrow)]);
+      check(requests).length.equals(2);
+    });
+
+    Future<void> prepareComposeBoxWithNavigation(WidgetTester tester) async {
+      addTearDown(testBinding.reset);
+      await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
+
+      store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+      connection = store.connection as FakeApiConnection;
+
+      await tester.pumpWidget(const ZulipApp());
+      await tester.pump();
+      final navigator = await ZulipApp.navigator;
+      unawaited(navigator.push(MaterialAccountWidgetRoute(
+        accountId: eg.selfAccount.id, page: const ComposeBox(narrow: narrow))));
+      await tester.pumpAndSettle();
+    }
+
+    testWidgets('navigating away sends a "typing stopped" notice', (tester) async {
+      await prepareComposeBoxWithNavigation(tester);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      (await ZulipApp.navigator).pop();
+      await tester.pump(Duration.zero);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('for content input, unfocusing sends a "typing stopped" notice', (tester) async {
+      const narrow = ChannelNarrow(123);
+      final destinationNarrow = TopicNarrow(narrow.streamId, 'test topic');
+      await prepareComposeBox(tester, narrow: narrow);
+      await enterTopic(tester, narrow: narrow, topic: destinationNarrow.topic);
+
+      await checkStartTyping(tester, destinationNarrow);
+
+      connection.prepare(json: {});
+      FocusManager.instance.primaryFocus!.unfocus();
+      await tester.pump(Duration.zero);
+      checkTypingRequest(TypingOp.stop, destinationNarrow);
+    });
+
+    testWidgets('selection change sends a "typing started" notice', (tester) async {
+      final controllerKey = await prepareComposeBox(tester, narrow: narrow);
+      final composeBoxController = controllerKey.currentState!;
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+
+      connection.prepare(json: {});
+      composeBoxController.contentController.selection =
+        const TextSelection(baseOffset: 0, extentOffset: 2);
+      checkTypingRequest(TypingOp.start, narrow);
+
+      // Ensures that a "typing stopped" notice is sent when the test ends.
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+  });
+
   group('message-send request response', () {
     Future<void> setupAndTapSend(WidgetTester tester, {
       required void Function(int messageId) prepareResponse,
@@ -216,8 +356,6 @@ void main() {
       final zulipLocalizations = GlobalLocalizations.zulipLocalizations;
       await prepareComposeBox(tester, narrow: const TopicNarrow(123, 'some topic'));
 
-      final contentInputFinder = find.byWidgetPredicate(
-        (widget) => widget is TextField && widget.controller is ComposeContentController);
       await tester.enterText(contentInputFinder, 'hello world');
 
       prepareResponse(456);