NavRow: Show external-link icon when the action is to open a URL

And rename it from NestedNavRow, making the "nested" mode the
default, but allowing callers to specify "external".

Author: chrisbobbe

src/account-info/ProfileScreen.js

@@ -24,7 +24,7 @@ import { getUserStatus } from '../user-statuses/userStatusesModel';
 import SwitchRow from '../common/SwitchRow';
 import * as api from '../api';
 import { identityOfAccount } from '../account/accountMisc';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 import { emojiTypeFromReactionType } from '../emoji/data';
 
 const styles = createStyleSheet({
@@ -135,7 +135,7 @@ export default function ProfileScreen(props: Props): Node {
       <OfflineNoticePlaceholder />
       <ScrollView>
         <AccountDetails user={ownUser} showEmail={false} showStatus={false} />
-        <NestedNavRow
+        <NavRow
           leftElement={
             status_emoji != null
               ? {

src/common/InputRowRadioButtons.js

@@ -77,10 +77,10 @@ type Props<TItemKey> = $ReadOnly<{|
  * `.title`. When tapped, opens the selectable-options screen, where the
  * user can change the selection or read more about each selection.
  */
-// This has the navigate-to-nested-screen semantics of NestedNavRow,
-// represented by IconRight. NestedNavRow would probably be the wrong
-// abstraction, though, because it isn't an imput component; it doesn't have
-// a value to display.
+// This has the navigate-to-nested-screen semantics of
+// <NavRow type="nested" … />, represented by IconRight. NavRow would
+// probably be the wrong abstraction, though, because it isn't an input
+// component; it doesn't have a value to display.
 export default function InputRowRadioButtons<TItemKey: string | number>(
   props: Props<TItemKey>,
 ): Node {

src/common/NestedNavRow.js renamed to src/common/NavRow.js

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 import type { EmojiType, LocalizableReactText } from '../types';
 import ZulipTextIntl from './ZulipTextIntl';
 import Touchable from './Touchable';
-import { IconRight } from './Icons';
+import { Icon, IconRight } from './Icons';
 import type { SpecificIconType } from './Icons';
 import globalStyles, { ThemeContext, createStyleSheet } from '../styles';
 import Emoji from '../emoji/Emoji';
@@ -33,18 +33,28 @@ type Props = $ReadOnly<{|
   //   components, with and without this?
   titleBoldUppercase?: true,
 
-  /** Use this to navigate to a "nested" screen. */
+  type?: 'nested' | 'external',
+
+  /**
+   * Press handler for the whole row.
+   *
+   * The behavior should correspond to `type`:
+   * 'nested': navigate to a "nested" screen.
+   * 'external': open a URL with the user's `BrowserPreference`
+   */
   onPress: () => void,
 |}>;
 
 /**
- * A button that navigates to a "nested" screen.
+ * When tapped, this row navigates to a "nested" screen or opens a URL.
+ *
+ * 'nested' type: shows a right-facing arrow.
+ * 'external' type: shows an "external link" icon.
  *
- * Shows a right-facing arrow to indicate its purpose. If you need a
- * selectable option row instead, use `SelectableOptionRow`.
+ * If you need a selectable option row instead, use `SelectableOptionRow`.
  */
-export default function NestedNavRow(props: Props): Node {
-  const { title, subtitle, titleBoldUppercase, onPress, leftElement } = props;
+export default function NavRow(props: Props): Node {
+  const { title, subtitle, titleBoldUppercase, type = 'nested', onPress, leftElement } = props;
 
   const themeContext = useContext(ThemeContext);
 
@@ -77,7 +87,7 @@ export default function NestedNavRow(props: Props): Node {
           fontWeight: '300',
           fontSize: 13,
         },
-        iconRightFacingArrow: {
+        iconRight: {
           textAlign: 'center',
           marginLeft: 8,
           color: themeContext.color,
@@ -117,7 +127,11 @@ export default function NestedNavRow(props: Props): Node {
           {subtitle !== undefined && <ZulipTextIntl style={styles.subtitle} text={subtitle} />}
         </View>
         <View style={globalStyles.rightItem}>
-          <IconRight size={24} style={styles.iconRightFacingArrow} />
+          {type === 'nested' ? (
+            <IconRight size={24} style={styles.iconRight} />
+          ) : (
+            <Icon name="external-link" size={24} style={styles.iconRight} />
+          )}
         </View>
       </View>
     </Touchable>

src/common/SwitchRow.js

@@ -23,7 +23,7 @@ const componentStyles = createStyleSheet({
     paddingHorizontal: 16,
 
     // For uniformity with other rows this might share a screen with, e.g.,
-    // NestedNavRow and InputRowRadioButtons on the settings screen. See
+    // NavRow and InputRowRadioButtons on the settings screen. See
     // height-related attributes on those rows.
     minHeight: 48,
   },

src/common/TextRow.js

@@ -24,7 +24,7 @@ type Props = $ReadOnly<{|
 /**
  * A row with a title, and optional icon, subtitle, and press handler.
  *
- * See also NestedNavRow, SwitchRow, etc.
+ * See also NavRow, SwitchRow, etc.
  */
 export default function TextRow(props: Props): React.Node {
   const { title, subtitle, onPress, icon } = props;

src/settings/LegalScreen.js

@@ -7,7 +7,7 @@ import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useGlobalSelector, useSelector } from '../react-redux';
 import Screen from '../common/Screen';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 import ZulipText from '../common/ZulipText';
 import { openLinkWithUserPreference } from '../utils/openLink';
 import { getRealmUrl, getRealmName, getGlobalSettings } from '../selectors';
@@ -34,8 +34,8 @@ export default function LegalScreen(props: Props): Node {
 
   return (
     <Screen title="Legal">
-      <NestedNavRow title="Zulip terms" onPress={openZulipPolicies} />
-      <NestedNavRow
+      <NavRow title="Zulip terms" onPress={openZulipPolicies} type="external" />
+      <NavRow
         // These are really terms set by the server admin responsible for
         // hosting the org, and that server admin may or may not represent
         // the org itself, as this text might be read to imply. (E.g.,
@@ -51,6 +51,7 @@ export default function LegalScreen(props: Props): Node {
           values: { realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} /> },
         }}
         onPress={openRealmPolicies}
+        type="external"
       />
     </Screen>
   );

src/settings/NotificationsScreen.js

@@ -13,7 +13,7 @@ import SwitchRow from '../common/SwitchRow';
 import Screen from '../common/Screen';
 import * as api from '../api';
 import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 import { IconAlertTriangle } from '../common/Icons';
 import type { LocalizableText } from '../types';
 import { TranslationContext } from '../boot/TranslationProvider';
@@ -139,7 +139,7 @@ export default function NotificationsScreen(props: Props): Node {
   return (
     <Screen title="Notifications">
       <ServerPushSetupBanner isDismissable={false} />
-      <NestedNavRow
+      <NavRow
         leftElement={
           systemSettingsWarnings.length > 0
             ? {
@@ -161,6 +161,7 @@ export default function NotificationsScreen(props: Props): Node {
           }
         })()}
         onPress={handleSystemSettingsPress}
+        type="external"
       />
       {!notificationReport.problems.includes(NotificationProblem.SystemSettingsDisabled) && (
         <>
@@ -189,7 +190,7 @@ export default function NotificationsScreen(props: Props): Node {
                 value={streamNotification}
                 onValueChange={handleStreamNotificationChange}
               />
-              <NestedNavRow
+              <NavRow
                 {...(() =>
                   notificationReport.problems.length > 0 && {
                     leftElement: {
@@ -205,7 +206,7 @@ export default function NotificationsScreen(props: Props): Node {
             </SettingsGroup>
           )}
           {otherAccounts.length > 0 && (
-            <NestedNavRow
+            <NavRow
               {...(() => {
                 const problemAccountsCount = otherAccounts.filter(a => {
                   // eslint-disable-next-line no-underscore-dangle

src/settings/SettingsGroup.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import SwitchRow from '../common/SwitchRow';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 import type { LocalizableReactText } from '../types';
 import { createStyleSheet } from '../styles';
 import { QUARTER_COLOR } from '../styles/constants';
@@ -18,7 +18,7 @@ type Props = $ReadOnly<{|
   // layout in some subtle way.
   title: LocalizableReactText,
 
-  children: $ReadOnlyArray<React$Element<typeof SwitchRow> | React$Element<typeof NestedNavRow>>,
+  children: $ReadOnlyArray<React$Element<typeof SwitchRow> | React$Element<typeof NavRow>>,
 |}>;
 
 export default function SettingsGroup(props: Props): React.Node {

src/settings/SettingsScreen.js

@@ -9,7 +9,7 @@ import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useSelector, useGlobalSelector, useDispatch } from '../react-redux';
 import { getGlobalSettings } from '../selectors';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 import InputRowRadioButtons from '../common/InputRowRadioButtons';
 import SwitchRow from '../common/SwitchRow';
 import Screen from '../common/Screen';
@@ -89,7 +89,7 @@ export default function SettingsScreen(props: Props): Node {
           dispatch(setGlobalSettings({ markMessagesReadOnScroll: value }));
         }}
       />
-      <NestedNavRow
+      <NavRow
         leftElement={{ type: 'icon', Component: IconNotifications }}
         title="Notifications"
         {...(() =>
@@ -116,7 +116,7 @@ export default function SettingsScreen(props: Props): Node {
         }}
         search
       />
-      <NestedNavRow
+      <NavRow
         leftElement={{ type: 'icon', Component: IconMoreHorizontal }}
         title="Legal"
         onPress={() => {

src/streams/SubscriptionsScreen.js

@@ -20,7 +20,7 @@ import { doNarrow } from '../actions';
 import { caseInsensitiveCompareFunc } from '../utils/misc';
 import StreamItem from './StreamItem';
 import ModalNavBar from '../nav/ModalNavBar';
-import NestedNavRow from '../common/NestedNavRow';
+import NavRow from '../common/NavRow';
 
 const styles = createStyleSheet({
   container: {
@@ -46,7 +46,7 @@ function AllStreamsButton(props: FooterProps): Node {
     navigation.push('all-streams');
   }, [navigation]);
 
-  return <NestedNavRow title="All streams" titleBoldUppercase onPress={handlePressAllScreens} />;
+  return <NavRow title="All streams" titleBoldUppercase onPress={handlePressAllScreens} />;
 }
 
 export default function SubscriptionsScreen(props: Props): Node {