Merge pull request #4576 from coralproject/develop

v8.8.0

INDEXES.md

@@ -6,6 +6,24 @@ The goal of this document is to date-mark the indexes you add to support the cha
 
 If you are releasing, you can use this readme to check all the indexes prior to the release you are deploying and have a good idea of what indexes you might need to deploy to Mongo along with your release of a new Coral Docker image to kubernetes.
 
+## 2024-03-07
+
+```
+db.notifications.createIndex({ tenantID: 1, replyID: 1 });
+```
+
+- This index speeds up the retrieval of notifications by replyID, which is used to determine whether to decrement/increment notification counts if a comment is rejected/approved in moderation.
+
+## 2024-02-02
+
+```
+db.notifications.createIndex({ createdAt: 1 }, { partialFilterExpression: { isDSA: { $eq: null } }, expireAfterSeconds: 30 * 24 * 60 * 60 });
+```
+
+- This creates a TTL on non-DSA marked notifications that will delete them after 30 days
+  - The `partialFilterExpression` finds any notifications that aren't marked as `isDSA` so we don't delete important DSA notifications
+  - You can modify the expiry time by changing `expireAfterSeconds`
+
 ## 2023-11-24
 
 ```

client/CLIENT_EVENTS.md

@@ -141,14 +141,16 @@ createComment.error
 - <a href="#signedIn">signedIn</a>
 - <a href="#unfeatureComment">unfeatureComment</a>
 - <a href="#unmarkAll">unmarkAll</a>
-- <a href="#updateNotificationSettings">updateNotificationSettings</a>
+- <a href="#updateEmailNotificationSettings">updateEmailNotificationSettings</a>
+- <a href="#updateInPageNotificationSettings">updateInPageNotificationSettings</a>
 - <a href="#updateStorySettings">updateStorySettings</a>
 - <a href="#updateUserMediaSettings">updateUserMediaSettings</a>
 - <a href="#viewConversation">viewConversation</a>
 - <a href="#viewFullDiscussion">viewFullDiscussion</a>
 - <a href="#viewNewComments">viewNewComments</a>
 - <a href="#viewNewCommentsNetwork">viewNewCommentsNetwork</a>
 - <a href="#viewNewRepliesNetwork">viewNewRepliesNetwork</a>
+- <a href="#viewNotificationsFeed">viewNotificationsFeed</a>
 
 ### Events
 - <a id="addACommentButton">**addACommentButton**</a>: This event is emitted when the viewer clicks the add a comment button in alternate oldest view.
@@ -614,7 +616,7 @@ createComment.error
       source: "keyboard" | "mobileToolbar";
   }
   ```
-- <a id="updateNotificationSettings">**updateNotificationSettings.success**, **updateNotificationSettings.error**</a>: This event is emitted when the viewer updates its notification settings.
+- <a id="updateEmailNotificationSettings">**updateEmailNotificationSettings.success**, **updateEmailNotificationSettings.error**</a>: This event is emitted when the viewer updates their email notification settings.
   ```ts
   {
       onReply?: boolean | null | undefined;
@@ -629,6 +631,21 @@ createComment.error
       };
   }
   ```
+- <a id="updateInPageNotificationSettings">**updateInPageNotificationSettings.success**, **updateInPageNotificationSettings.error**</a>: This event is emitted when the viewer updates their in-page notification settings.
+  ```ts
+  {
+      onReply?: boolean | null | undefined;
+      onFeatured?: boolean | null | undefined;
+      onStaffReplies?: boolean | null | undefined;
+      onModeration?: boolean | null | undefined;
+      enabled?: boolean | null | undefined;
+      success: {};
+      error: {
+          message: string;
+          code?: string | undefined;
+      };
+  }
+  ```
 - <a id="updateStorySettings">**updateStorySettings.success**, **updateStorySettings.error**</a>: This event is emitted when the viewer updates the story settings.
   ```ts
   {
@@ -713,4 +730,10 @@ createComment.error
       };
   }
   ```
+- <a id="viewNotificationsFeed">**viewNotificationsFeed**</a>: This event is emitted when the viewer clicks to view their notifications feed.
+  ```ts
+  {
+      userID?: string | undefined;
+  }
+  ```
 <!-- END docs:events -->

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

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

@@ -21,6 +21,7 @@ import FeaturedByConfig from "./FeaturedByConfig";
 import FlairBadgeConfigContainer from "./FlairBadgeConfigContainer";
 import FlattenRepliesConfig from "./FlattenRepliesConfig";
 import GuidelinesConfig from "./GuidelinesConfig";
+import InPageNotificationsConfig from "./InPageNotificationsConfig";
 import LocaleConfig from "./LocaleConfig";
 import MediaLinksConfig from "./MediaLinksConfig";
 import MemberBioConfig from "./MemberBioConfig";
@@ -50,6 +51,7 @@ const GeneralConfigContainer: React.FunctionComponent<Props> = ({
     >
       <LocaleConfig disabled={submitting} />
       <DSAConfigContainer disabled={submitting} settings={settings} />
+      <InPageNotificationsConfig disabled={submitting} />
       <FlattenRepliesConfig disabled={submitting} />
       <SitewideCommentingConfig disabled={submitting} />
       <AnnouncementConfigContainer disabled={submitting} settings={settings} />
@@ -75,6 +77,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment GeneralConfigContainer_settings on Settings {
       ...AnnouncementConfigContainer_settings
       ...FlattenRepliesConfig_formValues @relay(mask: false)
+      ...InPageNotificationsConfig_formValues @relay(mask: false)
       ...LocaleConfig_formValues @relay(mask: false)
       ...DSAConfigContainer_formValues @relay(mask: false)
       ...DSAConfigContainer_settings

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

@@ -0,0 +1,82 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { FormSpy } from "react-final-form";
+import { graphql } from "react-relay";
+
+import {
+  FieldSet,
+  FormField,
+  FormFieldDescription,
+  Label,
+} from "coral-ui/components/v2";
+
+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
+    }
+  }
+`;
+
+interface Props {
+  disabled: boolean;
+}
+
+const InPageNotificationsConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <ConfigBox
+    title={
+      <Localized id="configure-general-inPageNotifications-title">
+        <Header container="h2">In-page notifications</Header>
+      </Localized>
+    }
+  >
+    <Localized id="configure-general-inPageNotifications-explanation">
+      <FormFieldDescription>
+        Add notifications to Coral. When enabled, commenters can receive
+        notifications when they receive all replies, replies only from members
+        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.
+      </FormFieldDescription>
+    </Localized>
+    <FormField container={<FieldSet />}>
+      <Localized id="configure-general-inPageNotifications-enabled">
+        <Label component="legend">In-page notifications enabled</Label>
+      </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>
+);
+
+export default InPageNotificationsConfig;

client/src/core/client/framework/lib/form/helpers.tsx

@@ -61,8 +61,8 @@ export const formatPercentage = (v: any) => {
 };
 
 export const parseBool = (v: any) => Boolean(v);
-export const parseStringBool = (v: string) => v === "true";
-export const formatBool = (v: boolean) => {
+export const parseStringBool = (v: any): any => v === "true";
+export const formatBool = (v: any): any => {
   return v ? "true" : "false";
 };
 

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

@@ -19,7 +19,6 @@ type TabValue = "COMMENTS" | "PROFILE" | "DISCUSSIONS" | "%future added value";
 
 export interface AppProps {
   activeTab: TabValue;
-  dsaFeaturesEnabled: boolean;
 }
 
 const App: FunctionComponent<AppProps> = (props) => {
@@ -71,15 +70,13 @@ const App: FunctionComponent<AppProps> = (props) => {
             >
               <Configure />
             </TabPane>
-            {props.dsaFeaturesEnabled && (
-              <TabPane
-                className={CLASSES.notificationsTabPane.$root}
-                tabID="NOTIFICATIONS"
-                data-testid="current-tab-pane"
-              >
-                <NotificationsQuery />
-              </TabPane>
-            )}
+            <TabPane
+              className={CLASSES.notificationsTabPane.$root}
+              tabID="NOTIFICATIONS"
+              data-testid="current-tab-pane"
+            >
+              <NotificationsQuery />
+            </TabPane>
           </TabContent>
         </div>
       </HorizontalGutter>

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

@@ -30,18 +30,16 @@ interface Props {
 }
 
 const AppContainer: FunctionComponent<Props> = ({ disableListeners }) => {
-  const [{ activeTab, dsaFeaturesEnabled }] =
-    useLocal<AppContainerLocal>(graphql`
-      fragment AppContainerLocal on Local {
-        activeTab
-        dsaFeaturesEnabled
-      }
-    `);
+  const [{ activeTab }] = useLocal<AppContainerLocal>(graphql`
+    fragment AppContainerLocal on Local {
+      activeTab
+    }
+  `);
   return (
     <>
       {disableListeners ? null : listeners}
       <RefreshTokenHandler />
-      <App activeTab={activeTab} dsaFeaturesEnabled={!!dsaFeaturesEnabled} />
+      <App activeTab={activeTab} />
     </>
   );
 };

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

@@ -2,43 +2,34 @@
   padding: var(--spacing-3);
 }
 
-.notificationsTab {
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-2);
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
-}
+.smallText {
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-1);
+  line-height: 1;
 
-.notificationsIcon {
-  height: var(--spacing-5);
-  overflow: hidden;
+  padding-top: var(--spacing-1);
 }
 
-.notificationsIconSmall {
-  /* unlike the configure cog icon, the bell is taller than
-     it is wide, so it pushes up the tab, we constrain it
-     using this, allowing all the other padding styles to
-     remain consistent */
-  height: 22.5px;
-  overflow: hidden;
-}
+.notificationsTab {
+  margin-left: auto;
 
-.notificationsTabSmall {
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
+  padding-top: 10px;
+  padding-bottom: 10px;
   padding-left: var(--spacing-4);
   padding-right: var(--spacing-4);
 }
 
-.configureTab {
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
+.notificationsTabSmall {
+  padding-top: 22.25px;
+  padding-bottom: 22.25px;
+  padding-left: var(--spacing-5);
+  padding-right: var(--spacing-5);
 }
 
-.smallText {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-1);
-  line-height: 1;
+.notificationsIcon {
+  height: var(--spacing-5);
+}
 
-  padding-top: var(--spacing-1);
+.floatingBellDisabled {
+  border-left: none;
 }