LegalScreen: Turn into a global, all-accounts screen

The user should be equally aware of the terms for all realms the app
is interacting with, and that includes realms other than the active
account's realm. (There would be even more interaction in a future
with better multi-account support.)

Rather than make the user traverse all realms with the "active
account" pointer to find all the relevant terms, it seems nicer to
show them together on this one page.

Author: chrisbobbe

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,126 @@
 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.) */
+/**
+ * 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);
   }, [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}
-        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>
   );
 }