LegalScreen: Turn into a global, all-accounts screen

src/nav/AppNavigator.js

@@ -184,7 +184,6 @@ export default function AppNavigator(props: Props): Node {
         name="notif-troubleshooting"
         component={useHaveServerDataGate(NotifTroubleshootingScreen)}
       />
-      <Stack.Screen name="legal" component={useHaveServerDataGate(LegalScreen)} />
       <Stack.Screen name="user-status" component={useHaveServerDataGate(UserStatusScreen)} />
       <Stack.Screen name="settings" component={useHaveServerDataGate(SettingsScreen)} />
       <Stack.Screen name="read-receipts" component={useHaveServerDataGate(ReadReceiptsScreen)} />
@@ -205,6 +204,7 @@ export default function AppNavigator(props: Props): Node {
         }
       />
       <Stack.Screen name="sharing" component={SharingScreen} />
+      <Stack.Screen name="legal" component={LegalScreen} />
       <Stack.Screen name="selectable-options" component={SelectableOptionsScreen} />
     </Stack.Navigator>
   );

src/settings/LegalScreen.js

@@ -3,56 +3,133 @@
 import React, { useCallback } from 'react';
 import type { Node } from 'react';
 
+import { createSelector } from 'reselect';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import { useGlobalSelector, useSelector } from '../react-redux';
+import { useGlobalSelector } from '../react-redux';
 import Screen from '../common/Screen';
 import NavRow from '../common/NavRow';
 import ZulipText from '../common/ZulipText';
 import { openLinkWithUserPreference } from '../utils/openLink';
-import { getRealmUrl, getRealmName, getGlobalSettings } from '../selectors';
+import { getRealmName, getGlobalSettings } from '../selectors';
+import { getAccounts } from '../directSelectors';
+import type { GlobalSelector } from '../reduxTypes';
+import { getAccount, tryGetActiveAccountState } from '../account/accountsSelectors';
+import { identityOfAccount, keyOfIdentity } from '../account/accountMisc';
+import { getHaveServerData } from '../haveServerDataSelectors';
+
+/**
+ * Data for all realms represented in `state.accounts`, logged-in or not,
+ *   unique by URL.
+ *
+ * The realm name will be missing when we don't have server data for any
+ * account on the realm.
+ */
+type ViewModel = $ReadOnlyArray<{|
+  +realm: URL,
+  +name: string | null,
+  +policiesUrl: URL,
+|}>;
+
+const getViewModel: GlobalSelector<ViewModel> = createSelector(
+  getAccounts,
+  tryGetActiveAccountState,
+  (accounts, activeAccountState) => {
+    const result = new Map(accounts.map(a => [a.realm.toString(), null]));
+
+    accounts.forEach(account => {
+      const realmStr = account.realm.toString();
+
+      if (result.get(realmStr) != null) {
+        return;
+      }
+
+      // TODO(#5006): Add realm name for any account we have server data for,
+      //   not just the active account.
+      if (
+        activeAccountState
+        && keyOfIdentity(identityOfAccount(getAccount(activeAccountState)))
+          === keyOfIdentity(identityOfAccount(account))
+        && getHaveServerData(activeAccountState)
+      ) {
+        result.set(realmStr, getRealmName(activeAccountState));
+      }
+    });
+
+    return [...result.entries()].map(([realmStr, name]) => {
+      const realm = new URL(realmStr);
+      return {
+        realm,
+        name,
+        policiesUrl: new URL('/policies/?nav=no', realm),
+      };
+    });
+  },
+);
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'legal'>,
   route: RouteProp<'legal', void>,
 |}>;
 
-/** (NB this is a per-account screen: it leads to this realm's policies.) */
+const zulipPoliciesUrl = new URL('https://zulip.com/policies/?nav=no');
+
+/**
+ * A global, all-accounts screen linking to terms for all realms we know about.
+ */
 export default function LegalScreen(props: Props): Node {
-  const realm = useSelector(getRealmUrl);
-  const realmName = useSelector(getRealmName);
+  const viewModel = useGlobalSelector(getViewModel);
 
   const globalSettings = useGlobalSelector(getGlobalSettings);
 
   const openZulipPolicies = useCallback(() => {
-    openLinkWithUserPreference(new URL('https://zulip.com/policies/?nav=no'), globalSettings);
+    openLinkWithUserPreference(zulipPoliciesUrl, globalSettings);
   }, [globalSettings]);
 
-  const openRealmPolicies = useCallback(() => {
-    openLinkWithUserPreference(new URL('/policies/?nav=no', realm), globalSettings);
-  }, [realm, globalSettings]);
-
   return (
     <Screen title="Legal">
-      <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.,
-        // on Zulip Cloud they don't.) But:
-        // - We don't want to complicate the wording. Not everyone knows
-        //   what a server is.
-        // - These terms will often differ from Zulip's own terms (the ones
-        //   at the other link).
-        // - These terms will apply to all users in the org, in all cases.
-        //   We should link to them.
-        title={{
-          text: 'Terms for {realmName}',
-          values: { realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} /> },
-        }}
-        onPress={openRealmPolicies}
+        title="Zulip terms"
+        subtitle={{ text: '{_}', values: { _: zulipPoliciesUrl.toString() } }}
+        onPress={openZulipPolicies}
         type="external"
       />
+      {viewModel.map(({ realm, name, policiesUrl }) => (
+        <NavRow
+          key={realm.toString()}
+          // 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.,
+          // on Zulip Cloud they don't.) But:
+          // - We don't want to complicate the wording. Not everyone knows
+          //   what a server is.
+          // - These terms will often differ from Zulip's own terms (the ones
+          //   at the "Zulip terms" link).
+          // - These terms will apply to all users in the org, in all cases.
+          //   We should link to them.
+          title={{
+            text: 'Terms for {realmName}',
+            values: {
+              realmName: (
+                // The realm name comes from server data. If we don't
+                // have server data, fall back on the realm URL.
+                <ZulipText style={{ fontWeight: 'bold' }} text={name ?? realm.toString()} />
+              ),
+            },
+          }}
+          subtitle={
+            // It's nice to be explicit about where the policies live,
+            // though the "?nav=no" is a bit annoying. But also, this line
+            // disambiguates multiple realms with the same name; the name is
+            // shown (when we have it) in `title`.
+            { text: '{_}', values: { _: policiesUrl.toString() } }
+          }
+          onPress={() => {
+            openLinkWithUserPreference(policiesUrl, globalSettings);
+          }}
+          type="external"
+        />
+      ))}
     </Screen>
   );
 }