autocomplete: Warn on @-mention when user is not subscribed.

Show a warning when @-mentioning a user who is not subscribed to
the stream the user was mentioned in, with an option to subscribe
them to the stream. Use the created pipeline in the previous
commits to enable the same.

Fixes: zulip#3373.

src/compose/ComposeBox.js

@@ -13,6 +13,8 @@ import type {
   UserOrBot,
   Dispatch,
   Dimensions,
+  Subscription,
+  Stream,
 } from '../types';
 import { connect } from '../react-redux';
 import {
@@ -31,13 +33,15 @@ import ComposeMenu from './ComposeMenu';
 import getComposeInputPlaceholder from './getComposeInputPlaceholder';
 import NotSubscribed from '../message/NotSubscribed';
 import AnnouncementOnly from '../message/AnnouncementOnly';
+import MentionWarnings from './MentionWarnings';
 
 import {
   getAuth,
   getIsAdmin,
   getSession,
   getLastMessageTopic,
   getActiveUsersByEmail,
+  getStreamInNarrow,
 } from '../selectors';
 import {
   getIsActiveStreamSubscribed,
@@ -58,6 +62,7 @@ type SelectorProps = {|
   isSubscribed: boolean,
   draft: string,
   lastMessageTopic: string,
+  stream: Subscription | {| ...Stream, in_home_view: boolean |},
 |};
 
 type Props = $ReadOnly<{|
@@ -106,6 +111,7 @@ class ComposeBox extends PureComponent<Props, State> {
 
   messageInput: ?TextInput = null;
   topicInput: ?TextInput = null;
+  mentionWarnings: ?MentionWarnings = null;
 
   inputBlurTimeoutId: ?TimeoutID = null;
 
@@ -184,8 +190,14 @@ class ComposeBox extends PureComponent<Props, State> {
     dispatch(draftUpdate(narrow, message));
   };
 
-  handleMessageAutocomplete = (message: string) => {
+  handleMessageAutocomplete = (message: string, completion: string, completionType: string) => {
     this.setMessageInputValue(message);
+
+    if (completionType === '@') {
+      if (this.mentionWarnings) {
+        this.mentionWarnings.getWrappedInstance().handleMentionSubscribedCheck(completion);
+      }
+    }
   };
 
   handleMessageSelectionChange = (event: { +nativeEvent: { +selection: InputSelection } }) => {
@@ -250,6 +262,11 @@ class ComposeBox extends PureComponent<Props, State> {
     dispatch(addToOutbox(this.getDestinationNarrow(), message));
 
     this.setMessageInputValue('');
+
+    if (this.mentionWarnings) {
+      this.mentionWarnings.getWrappedInstance().clearMentionWarnings();
+    }
+
     dispatch(sendTypingStop(narrow));
   };
 
@@ -345,6 +362,7 @@ class ComposeBox extends PureComponent<Props, State> {
       isAdmin,
       isAnnouncementOnly,
       isSubscribed,
+      stream,
     } = this.props;
 
     if (!isSubscribed) {
@@ -361,6 +379,13 @@ class ComposeBox extends PureComponent<Props, State> {
 
     return (
       <View style={this.styles.wrapper}>
+        <MentionWarnings
+          narrow={narrow}
+          stream={stream}
+          ref={component => {
+            this.mentionWarnings = component;
+          }}
+        />
         <View style={[this.styles.autocompleteWrapper, { marginBottom: height }]}>
           <TopicAutocomplete
             isFocused={isTopicFocused}
@@ -437,4 +462,5 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   isSubscribed: getIsActiveStreamSubscribed(state, props.narrow),
   draft: getDraftForNarrow(state, props.narrow),
   lastMessageTopic: getLastMessageTopic(state, props.narrow),
+  stream: getStreamInNarrow(state, props.narrow),
 }))(ComposeBox);