ServerCompatNotice: Add, to nag users connected to servers <2.1.0.

That threshold comes from
  https://zulip.readthedocs.io/en/4.2/overview/release-lifecycle.html.

As the jsdoc says, at some point we'll settle on a non-hard-coded
threshold; see
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/compatibility.20documentation/near/1174966.

Author: chrisbobbe

src/common/ServerCompatNotice.js

@@ -0,0 +1,103 @@
+/* @flow strict-local */
+
+import React, { useContext } from 'react';
+import { View, Pressable } from 'react-native';
+import Color from 'color';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { createStyleSheet, HALF_COLOR, ThemeContext } from '../styles';
+import { useSelector, useDispatch } from '../react-redux';
+import Label from './Label';
+import RawLabel from './RawLabel';
+import { Icon } from './Icons';
+import { getActiveAccount } from '../account/accountsSelectors';
+import WebLink from './WebLink';
+import { getIsAdmin, getSession } from '../directSelectors';
+import { dismissCompatNotice } from '../session/sessionActions';
+
+const styles = createStyleSheet({
+  wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: HALF_COLOR,
+  },
+});
+
+type Props = $ReadOnly<{||}>;
+
+/**
+ * A "nag banner" saying that the server version is unsupported.
+ *
+ * Currently just checks if it's less than 2.1.0, since that's the
+ * marker that was put down in zulip/zulip@d7d79b57b. In the future,
+ * this won't have to be so hard-coded; we may use a timer or
+ * something.
+ */
+export default function ServerCompatNotice(props: Props) {
+  const dispatch = useDispatch();
+  const hasDismissedServerCompatNotice = useSelector(
+    state => getSession(state).hasDismissedServerCompatNotice,
+  );
+  const zulipVersion = useSelector(state => getActiveAccount(state).zulipVersion);
+  const realm = useSelector(state => getActiveAccount(state).realm);
+  const isAdmin = useSelector(getIsAdmin);
+
+  const { color } = useContext(ThemeContext);
+
+  if (zulipVersion && !zulipVersion.isAtLeast('2.1.0') && !hasDismissedServerCompatNotice) {
+    return (
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.wrapper}>
+        <Pressable
+          onPress={() => {
+            dispatch(dismissCompatNotice());
+          }}
+          hitSlop={12}
+          style={{ margin: 12 }}
+        >
+          {({ pressed }) => (
+            <Icon
+              size={24}
+              color={Color(color)
+                .fade(pressed ? 0.75 : 0)
+                .toString()}
+              name="x"
+            />
+          )}
+        </Pressable>
+        <View style={{ flex: 1, paddingVertical: 4, paddingRight: 4 }}>
+          <RawLabel>
+            {isAdmin ? (
+              <Label
+                text={{
+                  text:
+                    '{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. We work hard to make the upgrade process as easy as possible.',
+                  values: { realm: realm.toString(), serverVersionRaw: zulipVersion.raw() },
+                }}
+              />
+            ) : (
+              <Label
+                text={{
+                  text:
+                    '{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. Please contact your administrator about upgrading.',
+                  values: { realm: realm.toString(), serverVersionRaw: zulipVersion.raw() },
+                }}
+              />
+            )}
+            {' '}
+            <WebLink
+              label="Learn more"
+              url={
+                new URL(
+                  'https://zulip.readthedocs.io/en/stable/overview/release-lifecycle.html#compatibility-and-upgrading',
+                )
+              }
+            />
+          </RawLabel>
+        </View>
+      </SafeAreaView>
+    );
+  } else {
+    return null;
+  }
+}

src/main/HomeScreen.js

@@ -16,6 +16,7 @@ import { doNarrow, navigateToSearch } from '../actions';
 import IconUnreadMentions from '../nav/IconUnreadMentions';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 import { LoadingBanner } from '../common';
+import ServerCompatNotice from '../common/ServerCompatNotice';
 
 const styles = createStyleSheet({
   wrapper: {
@@ -68,6 +69,7 @@ class HomeScreen extends PureComponent<Props> {
             }}
           />
         </View>
+        <ServerCompatNotice />
         <LoadingBanner />
         <UnreadCards />
       </View>

src/session/sessionReducer.js

@@ -59,8 +59,7 @@ export type SessionState = {|
   debug: Debug,
 
   /**
-   * Whether `ServerCompatNotice` (which we'll add soon) has been
-   *   dismissed this session.
+   * Whether `ServerCompatNotice` has been dismissed this session.
    *
    * We put this in `SessionState` deliberately, so that users see the
    * notice on every startup until the server is upgraded. That's a

static/translations/messages_en.json

@@ -59,6 +59,9 @@
   "Mute stream": "Mute stream",
   "Unmute stream": "Unmute stream",
   "No Internet connection": "No Internet connection",
+  "{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. We work hard to make the upgrade process as easy as possible.": "{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. We work hard to make the upgrade process as easy as possible.",
+  "{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. Please contact your administrator about upgrading.": "{realm} is running Zulip Server {serverVersionRaw}, which is unsupported. Please contact your administrator about upgrading.",
+  "Learn more": "Learn more",
   "Settings": "Settings",
   "Night mode": "Night mode",
   "Open links with in-app browser": "Open links with in-app browser",