NotificationsScreen: Show server-setup alert like other per-account alerts

I.e., as a NavRow with a warning icon in
PerAccountNotificationSettingsGroup.

And leave ServerPushSetupBanner as a "nag banner" on the home
screen.

Author: chrisbobbe

src/settings/NotificationsScreen.js

@@ -9,14 +9,12 @@ import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { useGlobalSelector, useSelector } from '../react-redux';
 import Screen from '../common/Screen';
-import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
 import NavRow from '../common/NavRow';
 import { IconAlertTriangle } from '../common/Icons';
 import type { LocalizableText } from '../types';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { kWarningColor } from '../styles/constants';
 import { getIdentities, getIdentity, getIsActiveAccount } from '../account/accountsSelectors';
-import { getRealm } from '../directSelectors';
 import { openSystemNotificationSettings } from '../utils/openLink';
 import {
   useNotificationReportsByIdentityKey,
@@ -62,8 +60,6 @@ export default function NotificationsScreen(props: Props): Node {
   const otherAccounts = useGlobalSelector(state =>
     getIdentities(state).filter(identity_ => !getIsActiveAccount(state, identity_)),
   );
-  const pushNotificationsEnabled = useSelector(state => getRealm(state).pushNotificationsEnabled);
-
   const systemSettingsWarnings = notificationReport.problems
     .map(systemSettingsWarning)
     .filter(Boolean);
@@ -98,7 +94,6 @@ export default function NotificationsScreen(props: Props): Node {
 
   return (
     <Screen title="Notifications">
-      <ServerPushSetupBanner isDismissable={false} />
       <NavRow
         leftElement={
           systemSettingsWarnings.length > 0
@@ -125,9 +120,7 @@ export default function NotificationsScreen(props: Props): Node {
       />
       {!notificationReport.problems.includes(NotificationProblem.SystemSettingsDisabled) && (
         <>
-          {pushNotificationsEnabled && (
-            <PerAccountNotificationSettingsGroup navigation={navigation} />
-          )}
+          <PerAccountNotificationSettingsGroup navigation={navigation} />
           {otherAccounts.length > 0 && (
             <NavRow
               {...(() => {

src/settings/PerAccountNotificationSettingsGroup.js

@@ -5,19 +5,22 @@ import type { Node } from 'react';
 import invariant from 'invariant';
 
 import type { AppNavigationMethods } from '../nav/AppNavigator';
-import { useSelector } from '../react-redux';
+import { useGlobalSelector, useSelector } from '../react-redux';
 import { getAuth, getSettings } from '../selectors';
 import SwitchRow from '../common/SwitchRow';
 import * as api from '../api';
 import NavRow from '../common/NavRow';
 import { IconAlertTriangle } from '../common/Icons';
 import { kWarningColor } from '../styles/constants';
 import { getIdentity } from '../account/accountsSelectors';
-import { getRealmName } from '../directSelectors';
+import { getGlobalSettings, getRealm, getRealmName } from '../directSelectors';
 import ZulipText from '../common/ZulipText';
 import SettingsGroup from './SettingsGroup';
+import { openLinkWithUserPreference } from '../utils/openLink';
 import { useNotificationReportsByIdentityKey } from './NotifTroubleshootingScreen';
 import { keyOfIdentity } from '../account/accountMisc';
+import { getOwnUserRole, roleIsAtLeast } from '../permissionSelectors';
+import { Role } from '../api/permissionsTypes';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationMethods,
@@ -38,10 +41,14 @@ export default function PerAccountNotificationSettingsGroup(props: Props): Node
     'NotificationsScreen: expected notificationReport for current account',
   );
   const realmName = useSelector(getRealmName);
+  const pushNotificationsEnabled = useSelector(state => getRealm(state).pushNotificationsEnabled);
+  const isAtLeastAdmin = useSelector(state => roleIsAtLeast(getOwnUserRole(state), Role.Admin));
   const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
   const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
   const streamNotification = useSelector(state => getSettings(state).streamNotification);
 
+  const globalSettings = useGlobalSelector(getGlobalSettings);
+
   const handleTroubleshootingPress = useCallback(() => {
     navigation.push('notif-troubleshooting');
   }, [navigation]);
@@ -73,44 +80,76 @@ export default function PerAccountNotificationSettingsGroup(props: Props): Node
     });
   }, [streamNotification, auth]);
 
-  return (
-    <SettingsGroup
-      title={{
-        text: 'Notification settings for this account ({email} in {realmName}):',
-        values: {
-          email: <ZulipText style={{ fontWeight: 'bold' }} text={identity.email} />,
-          realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
-        },
-      }}
-    >
+  const children = pushNotificationsEnabled
+    ? [
       <SwitchRow
+        key="offlineNotification"
         label="Notifications when offline"
         value={offlineNotification}
         onValueChange={handleOfflineNotificationChange}
-      />
+      />,
       <SwitchRow
+        key="onlineNotification"
         label="Notifications when online"
         value={onlineNotification}
         onValueChange={handleOnlineNotificationChange}
-      />
+      />,
       <SwitchRow
+        key="streamNotification"
         label="Stream notifications"
         value={streamNotification}
         onValueChange={handleStreamNotificationChange}
-      />
+      />,
       <NavRow
+        key="troubleshooting"
         {...(() =>
-          notificationReport.problems.length > 0 && {
-            leftElement: {
-              type: 'icon',
-              Component: IconAlertTriangle,
-              color: kWarningColor,
-            },
-            subtitle: 'Notifications for this account may not arrive.',
-          })()}
+            notificationReport.problems.length > 0 && {
+              leftElement: {
+                type: 'icon',
+                Component: IconAlertTriangle,
+                color: kWarningColor,
+              },
+              subtitle: 'Notifications for this account may not arrive.',
+            })()}
         title="Troubleshooting"
         onPress={handleTroubleshootingPress}
-      />
+      />,
+      ]
+    : [
+      <NavRow
+        key="not-enabled"
+        type="external"
+        leftElement={{ type: 'icon', Component: IconAlertTriangle, color: kWarningColor }}
+        title={{
+            text: isAtLeastAdmin
+              ? '{realmName} is not set up to deliver push notifications.'
+              : '{realmName} is not set up to deliver push notifications. Please contact your administrator.',
+            values: {
+              realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
+            },
+          }}
+        onPress={() => {
+            openLinkWithUserPreference(
+              new URL(
+                'https://zulip.readthedocs.io/en/stable/production/mobile-push-notifications.html',
+              ),
+              globalSettings,
+            );
+          }}
+      />,
+      ];
+
+  return (
+    <SettingsGroup
+      title={{
+        text: 'Notification settings for this account ({email} in {realmName}):',
+        values: {
+          email: <ZulipText style={{ fontWeight: 'bold' }} text={identity.email} />,
+          realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
+        },
+      }}
+    >
+      {children}
     </SettingsGroup>
   );
 }

static/translations/messages_en.json

@@ -253,6 +253,8 @@
   "Notifications are disabled.": "Notifications are disabled.",
   "Multiple issues. Tap to learn more.": "Multiple issues. Tap to learn more.",
   "Notification settings for this account ({email} in {realmName}):": "Notification settings for this account ({email} in {realmName}):",
+  "{realmName} is not set up to deliver push notifications. Please contact your administrator.": "{realmName} is not set up to deliver push notifications. Please contact your administrator.",
+  "{realmName} is not set up to deliver push notifications.": "{realmName} is not set up to deliver push notifications.",
   "Other accounts": "Other accounts",
   "Notifications when online": "Notifications when online",
   "Notifications when offline": "Notifications when offline",