add floatingbellindicator configuration

client/src/core/client/admin/routes/Configure/sections/General/InPageNotificationsConfig.css

@@ -0,0 +1,3 @@
+.disabledLabel {
+  color: var(--palette-grey-400);
+}

client/src/core/client/admin/routes/Configure/sections/General/InPageNotificationsConfig.tsx

@@ -1,5 +1,6 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
+import { FormSpy } from "react-final-form";
 import { graphql } from "react-relay";
 
 import {
@@ -13,11 +14,14 @@ import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
 
+import styles from "./InPageNotificationsConfig.css";
+
 // eslint-disable-next-line no-unused-expressions
 graphql`
   fragment InPageNotificationsConfig_formValues on Settings {
     inPageNotifications {
       enabled
+      floatingBellIndicator
     }
   }
 `;
@@ -49,6 +53,29 @@ const InPageNotificationsConfig: FunctionComponent<Props> = ({ disabled }) => (
       </Localized>
       <OnOffField name="inPageNotifications.enabled" disabled={disabled} />
     </FormField>
+    <FormSpy subscription={{ values: true }}>
+      {(props) => {
+        const inPageDisabled = !props.values.inPageNotifications?.enabled;
+        return (
+          <FormField container={<FieldSet />}>
+            <Localized id="configure-general-inPageNotifications-floatingBellIndicator">
+              <Label
+                className={
+                  disabled || inPageDisabled ? styles.disabledLabel : ""
+                }
+                component="legend"
+              >
+                Floating bell indicator
+              </Label>
+            </Localized>
+            <OnOffField
+              name="inPageNotifications.floatingBellIndicator"
+              disabled={disabled || inPageDisabled}
+            />
+          </FormField>
+        );
+      }}
+    </FormSpy>
   </ConfigBox>
 );
 

client/src/core/client/stream/App/TabBar.tsx

@@ -40,6 +40,10 @@ export interface Props {
   showNotificationsTab: boolean;
   hasNewNotifications: boolean;
   userNotificationsEnabled: boolean;
+  inPageNotifications?: {
+    enabled: boolean | null;
+    floatingBellIndicator: boolean | null;
+  } | null;
   mode:
     | "COMMENTS"
     | "QA"
@@ -199,7 +203,11 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
               )}
               tabID="NOTIFICATIONS"
               variant="notifications"
-              float="right"
+              float={
+                props.inPageNotifications?.floatingBellIndicator
+                  ? "right"
+                  : "none"
+              }
               title={notificationsText}
             >
               <div className={cn(styles.notificationsIcon)}>

client/src/core/client/stream/App/TabBarContainer.tsx

@@ -94,12 +94,14 @@ export const TabBarContainer: FunctionComponent<Props> = ({
 
   return (
     <>
-      {!!viewer && !!settings?.inPageNotifications?.enabled && (
-        <FloatingNotificationButton
-          viewerID={viewer?.id}
-          enabled={!!viewer?.inPageNotifications?.enabled}
-        />
-      )}
+      {!!viewer &&
+        !!settings?.inPageNotifications?.enabled &&
+        !!settings?.inPageNotifications?.floatingBellIndicator && (
+          <FloatingNotificationButton
+            viewerID={viewer?.id}
+            enabled={!!viewer?.inPageNotifications?.enabled}
+          />
+        )}
       <IntersectionProvider threshold={[0, 1]}>
         <TabBar
           mode={story ? story.settings.mode : GQLSTORY_MODE.COMMENTS}
@@ -112,6 +114,7 @@ export const TabBarContainer: FunctionComponent<Props> = ({
           }
           hasNewNotifications={!!hasNewNotifications}
           userNotificationsEnabled={!!viewer?.inPageNotifications?.enabled}
+          inPageNotifications={settings?.inPageNotifications}
           onTabClick={handleSetActiveTab}
         />
       </IntersectionProvider>
@@ -143,6 +146,7 @@ const enhanced = withSetActiveTabMutation(
         featureFlags
         inPageNotifications {
           enabled
+          floatingBellIndicator
         }
       }
     `,

client/src/core/client/stream/test/fixtures.ts

@@ -144,7 +144,8 @@ export const settings = createFixture<GQLSettings>({
     },
   },
   inPageNotifications: {
-    enabled: false,
+    enabled: true,
+    floatingBellIndicator: true,
   },
 });
 

client/src/core/client/stream/test/profile/preferences.spec.tsx

@@ -69,6 +69,17 @@ it("render email notifications form", async () => {
   await act(async () => {
     await createTestRenderer({
       resolvers: createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => {
+            return {
+              ...settings,
+              inPageNotifications: {
+                enabled: false,
+                floatingBellIndicator: true,
+              },
+            };
+          },
+        },
         Mutation: {
           updateEmailNotificationSettings,
         },

client/src/core/client/test/helpers/fixture.ts

@@ -90,7 +90,7 @@ export function createUser() {
     },
     ignoreable: true,
     inPageNotifications: {
-      enabled: false,
+      enabled: true,
     },
   });
 }

locales/en-US/admin.ftl

@@ -543,6 +543,7 @@ configure-general-inPageNotifications-explanation = Add notifications to Coral.
   of your team, when a Pending comment is published. Commenters can
   disable visual notification indicators in their Profile preferences. This will remove e-mail notifications.
 configure-general-inPageNotifications-enabled = In-page notifications enabled
+configure-general-inPageNotifications-floatingBellIndicator = Floating bell indicator
 
 #### Closed Stream Message
 configure-general-closedStreamMessage-title = Closed comment stream message

server/src/core/server/graph/resolvers/Settings.ts

@@ -79,6 +79,7 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
     return flairBadges;
   },
   dsa: ({ dsa = defaultDSAConfiguration }) => dsa,
-  inPageNotifications: ({ inPageNotifications = { enabled: false } }) =>
-    inPageNotifications,
+  inPageNotifications: ({
+    inPageNotifications = { enabled: true, floatingBellIndicator: true },
+  }) => inPageNotifications,
 };

server/src/core/server/graph/schema/schema.graphql

@@ -1983,6 +1983,8 @@ type PremoderateEmailAddressConfiguration {
 
 type InPageNotificationsConfiguration {
   enabled: Boolean
+
+  floatingBellIndicator: Boolean
 }
 
 input TooManyPeriodsConfigInput {
@@ -6439,6 +6441,12 @@ input InPageNotificationsConfigurationInput {
   enabled when true turns on in-page notifications as an option for commenters.
   """
   enabled: Boolean
+
+  """
+  floatingBellIndicator when true shows a floating bell for notifications; when false,
+  there is no floating bell and the Notifications tab is aligned left.
+  """
+  floatingBellIndicator: Boolean
 }
 
 """

server/src/core/server/models/settings/settings.ts

@@ -316,6 +316,7 @@ export interface TopCommenterConfig {
 
 export interface InPageNotificationsConfig {
   enabled?: boolean;
+  floatingBellIndicator?: boolean;
 }
 
 export interface PremoderateEmailAddressConfig {

server/src/core/server/models/tenant/tenant.ts

@@ -304,7 +304,8 @@ export const combineTenantDefaultsAndInput = (
       enabled: false,
     },
     inPageNotifications: {
-      enabled: false,
+      enabled: true,
+      floatingBellIndicator: true,
     },
   };
 

server/src/core/server/test/fixtures.ts

@@ -197,7 +197,8 @@ export const createTenantFixture = (
       oEmbedAllowedOrigins: [],
     },
     inPageNotifications: {
-      enabled: false,
+      enabled: true,
+      floatingBellIndicator: true,
     },
   };