Merge pull request #4603 from coralproject/feat/CORL-3161-option-hide…

…-unmoderated-count

[CORL-3161]: Add config for whether to show unmoderated counts in moderation queue

client/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigContainer.tsx

@@ -20,6 +20,7 @@ import PerspectiveConfig from "./PerspectiveConfig";
 import PremoderateEmailAddressConfig from "./PremoderateEmailAddressConfig";
 import PreModerationConfigContainer from "./PreModerationConfigContainer";
 import RecentCommentHistoryConfig from "./RecentCommentHistoryConfig";
+import UnmoderatedCountsConfig from "./UnmoderatedCountsConfig";
 
 interface Props {
   submitting: boolean;
@@ -46,6 +47,7 @@ export const ModerationConfigContainer: React.FunctionComponent<Props> = ({
     <HorizontalGutter size="double" data-testid="configure-moderationContainer">
       <PreModerationConfigContainer disabled={submitting} settings={settings} />
       <PerspectiveConfig disabled={submitting} />
+      <UnmoderatedCountsConfig disabled={submitting} />
       <AkismetConfig disabled={submitting} />
       <NewCommentersConfigContainer disabled={submitting} settings={settings} />
       <RecentCommentHistoryConfig disabled={submitting} />
@@ -61,6 +63,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment ModerationConfigContainer_settings on Settings {
       ...AkismetConfig_formValues @relay(mask: false)
       ...PerspectiveConfig_formValues @relay(mask: false)
+      ...UnmoderatedCountsConfig_formValues @relay(mask: false)
       ...PreModerationConfigContainer_formValues @relay(mask: false)
       ...PreModerationConfigContainer_settings
       ...RecentCommentHistoryConfig_formValues @relay(mask: false)

client/src/core/client/admin/routes/Configure/sections/Moderation/UnmoderatedCountsConfig.tsx

@@ -0,0 +1,51 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import {
+  FieldSet,
+  FormField,
+  FormFieldHeader,
+  Label,
+} from "coral-ui/components/v2";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+
+// eslint-disable-next-line no-unused-expressions
+graphql`
+  fragment UnmoderatedCountsConfig_formValues on Settings {
+    showUnmoderatedCounts
+  }
+`;
+
+interface Props {
+  disabled: boolean;
+}
+
+const UnmoderatedCountsConfig: FunctionComponent<Props> = ({ disabled }) => {
+  return (
+    <ConfigBox
+      title={
+        <Localized id="configure-moderation-unmoderatedCounts-title">
+          <Header container={<legend />}>Unmoderated counts</Header>
+        </Localized>
+      }
+      container={<FieldSet />}
+    >
+      <FormField container={<FieldSet />}>
+        <FormFieldHeader>
+          <Localized id="configure-moderation-unmoderatedCounts-enabled">
+            <Label component="legend">
+              Show the number of unmoderated comments in the queue
+            </Label>
+          </Localized>
+        </FormFieldHeader>
+        <OnOffField name="showUnmoderatedCounts" disabled={disabled} />
+      </FormField>
+    </ConfigBox>
+  );
+};
+
+export default UnmoderatedCountsConfig;

client/src/core/client/admin/routes/Moderate/ModerateNavigation/ModerateNavigationContainer.tsx

@@ -75,6 +75,7 @@ const ModerateNavigationContainer: React.FunctionComponent<Props> = (props) => {
       section={props.section}
       mode={props.settings?.moderation}
       enableForReview={props.settings?.forReviewQueue}
+      showUnmoderatedCounts={props.settings?.showUnmoderatedCounts}
     />
   );
 };
@@ -91,6 +92,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment ModerateNavigationContainer_settings on Settings {
       moderation
       forReviewQueue
+      showUnmoderatedCounts
     }
   `,
   moderationQueues: graphql`

client/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx

@@ -31,6 +31,7 @@ interface Props {
   section?: SectionFilter | null;
   mode?: "PRE" | "POST" | "SPECIFIC_SITES_PRE" | "%future added value" | null;
   enableForReview?: boolean;
+  showUnmoderatedCounts?: boolean | null;
 }
 
 const Navigation: FunctionComponent<Props> = ({
@@ -42,6 +43,7 @@ const Navigation: FunctionComponent<Props> = ({
   section,
   mode,
   enableForReview,
+  showUnmoderatedCounts,
 }) => {
   const { match, router } = useRouter();
   const moderationLinks = useMemo(() => {
@@ -121,7 +123,7 @@ const Navigation: FunctionComponent<Props> = ({
         <Localized id="moderate-navigation-unmoderated">
           <span>Unmoderated</span>
         </Localized>
-        {isNumber(unmoderatedCount) && (
+        {showUnmoderatedCounts && isNumber(unmoderatedCount) && (
           <Counter data-testid="moderate-navigation-unmoderated-count">
             <Localized
               id="moderate-navigation-comment-count"

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

@@ -242,6 +242,7 @@ export const settings = createFixture<GQLSettings>({
     },
   },
   protectedEmailDomains: Array.from(PROTECTED_EMAIL_DOMAINS),
+  showUnmoderatedCounts: true,
 });
 
 export const settingsWithMultisite = createFixture<GQLSettings>(

locales/en-US/admin.ftl

@@ -870,6 +870,10 @@ configure-moderation-newCommenters-approvedCommentsThreshold-description =
   not have to be premoderated
 configure-moderation-newCommenters-comments = comments
 
+#### Unmoderated counts
+configure-moderation-unmoderatedCounts-title = Unmoderated counts
+configure-moderation-unmoderatedCounts-enabled = Show the number of unmoderated comments in the queue
+
 #### Email domain
 configure-moderation-emailDomains-header = Email domain
 configure-moderation-emailDomains-description = Create rules to take action on accounts or comments based on the account holder's email address domain.

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

@@ -87,4 +87,6 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
   inPageNotifications: ({
     inPageNotifications = { enabled: true, floatingBellIndicator: true },
   }) => inPageNotifications,
+  showUnmoderatedCounts: ({ showUnmoderatedCounts = true }) =>
+    showUnmoderatedCounts,
 };

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

@@ -2374,6 +2374,12 @@ type Settings @cacheControl(maxAge: 30) {
   whether it's enabled as an option for commenters.
   """
   inPageNotifications: InPageNotificationsConfiguration
+
+  """
+  showUnmoderatedCounts is whether to show the unmoderated comment count in the
+  moderation queues.
+  """
+  showUnmoderatedCounts: Boolean
 }
 
 ################################################################################
@@ -6783,6 +6789,12 @@ input SettingsInput {
   inPageNotifications specifies the configuration for in-page notifications
   """
   inPageNotifications: InPageNotificationsConfigurationInput
+
+  """
+  showUnmoderatedCounts is whether or not to show the unmoderated counts in the
+  moderation queue.
+  """
+  showUnmoderatedCounts: Boolean
 }
 
 """

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

@@ -458,6 +458,12 @@ export type Settings = GlobalModerationSettings &
      * as an option for commenters
      */
     inPageNotifications?: InPageNotificationsConfig;
+
+    /**
+     * showUnmoderatedCounts specifies whether or not the unmoderated comment count
+     * is shown in the moderation queue
+     */
+    showUnmoderatedCounts?: boolean;
   };
 
 export const defaultRTEConfiguration: RTEConfiguration = {

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

@@ -314,6 +314,7 @@ export const combineTenantDefaultsAndInput = (
       enabled: true,
       floatingBellIndicator: true,
     },
+    showUnmoderatedCounts: true,
   };
 
   // Create the new Tenant by merging it together with the defaults.