Settings: Add "Open links with in-app browser" setting.

This will let people choose whether they want to use the in-app browser,
or their external browser app.

This defaults to enabled on Android, and disabled on iOS.

The setting for this could probably be improved - See the discussion [1]
on CZO for what this looks like in other apps. I've opted to use a
simple switch, since that's what we're already using in this UI, and I
don't want to redesign it right now. I expect we will want to redesign
it in the future, but given that we have so few settings right now, I'm
not too worried about the settings screen being confusing/overwhelming.

Another thing that I'd like to improve is the icon - I'm using the
Feather icon for Google Chrome, since the only other browser-related
icons I could find were the globe icon we're using for the language
setting in this same screen, and the compass icon, which is less
recognizable than the Chrome one. I'm unhappy with using a branded icon
here, but Feather doesn't give us very many options, sadly.

[1]: https://chat.zulip.org/#narrow/stream/48-mobile/topic/in-app.20browser/near/1168259

Author: WesleyAC

src/boot/store.js

@@ -283,6 +283,14 @@ const migrations: {| [string]: (GlobalState) => GlobalState |} = {
     accounts: state.accounts.filter(a => a.email !== ''),
   }),
 
+  '28': state => ({
+    ...state,
+    settings: {
+      ...state.settings,
+      browser: 'default',
+    },
+  }),
+
   // TIP: When adding a migration, consider just using `dropCache`.
 };
 

src/common/Icons.js

@@ -51,6 +51,7 @@ const makeIcon = <Glyphs: string>(
   return <FixedIcon name={name} {...props} />;
 };
 
+export const IconBrowser = makeIcon(Feather, 'chrome');
 export const IconInbox = makeIcon(Feather, 'inbox');
 export const IconMention = makeIcon(Feather, 'at-sign');
 export const IconSearch = makeIcon(Feather, 'search');

src/message/messagesActions.js

@@ -3,7 +3,7 @@ import * as NavigationService from '../nav/NavigationService';
 import type { Narrow, Dispatch, GetState } from '../types';
 import { getAuth } from '../selectors';
 import { getMessageIdFromLink, getNarrowFromLink } from '../utils/internalLinks';
-import { openLinkExternal } from '../utils/openLink';
+import { openLinkWithUserPreference } from '../utils/openLink';
 import { navigateToChat } from '../nav/navActions';
 import { FIRST_UNREAD_ANCHOR } from '../anchor';
 import { getStreamsById } from '../subscriptions/subscriptionSelectors';
@@ -35,10 +35,10 @@ export const messageLinkPress = (href: string) => async (
     const anchor = getMessageIdFromLink(href, auth.realm);
     dispatch(doNarrow(narrow, anchor));
   } else if (!isUrlOnRealm(href, auth.realm)) {
-    openLinkExternal(href);
+    openLinkWithUserPreference(href, getState);
   } else {
     const url =
       (await api.tryGetFileTemporaryUrl(href, auth)) ?? new URL(href, auth.realm).toString();
-    openLinkExternal(url);
+    openLinkWithUserPreference(url, getState);
   }
 };

src/reduxTypes.js

@@ -263,13 +263,29 @@ export type RealmState = {|
 // https://github.com/zulip/zulip-mobile/issues/4009#issuecomment-619280681.
 export type ThemeName = 'default' | 'night';
 
+/**
+ * The values for this mean:
+ *
+/* * embedded: The in-app browser
+/* * external: The user's default browser app
+/* * default: 'external' on iOS, 'embedded' on Android
+/*
+/* Use the `shouldUseInAppBrowser` function from src/utils/openLink.js in order to
+/* parse this.
+/*
+/* See https://chat.zulip.org/#narrow/stream/48-mobile/topic/in-app.20browser
+/* for the reasoning behind these options.
+ */
+export type BrowserPreference = 'embedded' | 'external' | 'default';
+
 export type SettingsState = {|
   locale: string,
   theme: ThemeName,
   offlineNotification: boolean,
   onlineNotification: boolean,
   experimentalFeaturesEnabled: boolean,
   streamNotification: boolean,
+  browser: BrowserPreference,
 |};
 
 export type StreamsState = Stream[];

src/settings/SettingsScreen.js

@@ -6,12 +6,13 @@ import { ScrollView } from 'react-native';
 import type { RouteProp } from '../react-navigation';
 import type { MainTabsNavigationProp } from '../main/MainTabsScreen';
 import * as NavigationService from '../nav/NavigationService';
-import type { Dispatch } from '../types';
+import type { Dispatch, BrowserPreference } from '../types';
 import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import { getSettings } from '../selectors';
 import { OptionButton, OptionRow } from '../common';
 import {
+  IconBrowser,
   IconDiagnostics,
   IconNotifications,
   IconNight,
@@ -25,6 +26,7 @@ import {
   navigateToDiagnostics,
   navigateToLegal,
 } from '../actions';
+import { shouldUseInAppBrowser } from '../utils/openLink';
 
 const styles = createStyleSheet({
   optionWrapper: {
@@ -37,6 +39,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'settings', void>,
 
   theme: string,
+  browser: BrowserPreference,
   dispatch: Dispatch,
 |}>;
 
@@ -47,7 +50,7 @@ class SettingsScreen extends PureComponent<Props> {
   };
 
   render() {
-    const { theme } = this.props;
+    const { dispatch, theme, browser } = this.props;
 
     return (
       <ScrollView style={styles.optionWrapper}>
@@ -57,6 +60,14 @@ class SettingsScreen extends PureComponent<Props> {
           value={theme === 'night'}
           onValueChange={this.handleThemeChange}
         />
+        <OptionRow
+          Icon={IconBrowser}
+          label="Open links with in-app browser"
+          value={shouldUseInAppBrowser(browser)}
+          onValueChange={value => {
+            dispatch(settingsChange({ browser: value ? 'embedded' : 'external' }));
+          }}
+        />
         <OptionButton
           Icon={IconNotifications}
           label="Notifications"
@@ -92,4 +103,5 @@ class SettingsScreen extends PureComponent<Props> {
 
 export default connect(state => ({
   theme: getSettings(state).theme,
+  browser: getSettings(state).browser,
 }))(SettingsScreen);

src/settings/settingsReducer.js

@@ -14,6 +14,7 @@ const initialState: SettingsState = {
   onlineNotification: true,
   experimentalFeaturesEnabled: false,
   streamNotification: false,
+  browser: 'default',
 };
 
 export default (state: SettingsState = initialState, action: Action): SettingsState => {

src/utils/openLink.js

@@ -2,6 +2,9 @@
 import { NativeModules, Platform, Linking } from 'react-native';
 import SafariView from 'react-native-safari-view';
 
+import type { BrowserPreference, GetState } from '../types';
+import { getSettings } from '../selectors';
+
 export function openLinkEmbedded(url: string): void {
   if (Platform.OS === 'ios') {
     SafariView.show({ url: encodeURI(url) });
@@ -13,3 +16,21 @@ export function openLinkEmbedded(url: string): void {
 export function openLinkExternal(url: string): void {
   Linking.openURL(url);
 }
+
+export function shouldUseInAppBrowser(browser: BrowserPreference): boolean {
+  if (browser === 'default') {
+    return Platform.OS === 'android';
+  } else {
+    return browser === 'embedded';
+  }
+}
+
+export function openLinkWithUserPreference(url: string, getState: GetState): void {
+  const state = getState();
+  const browser = getSettings(state).browser;
+  if (shouldUseInAppBrowser(browser)) {
+    openLinkEmbedded(url);
+  } else {
+    openLinkExternal(url);
+  }
+}

static/translations/messages_en.json

@@ -61,6 +61,7 @@
   "No Internet connection": "No Internet connection",
   "Settings": "Settings",
   "Night mode": "Night mode",
+  "Open links with in-app browser": "Open links with in-app browser",
   "Language": "Language",
   "Arabic": "Arabic",
   "Bokmål": "Bokmål",