Add control to enable pre-moderation in groups

Author: acelaya

Diff for: h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -6,6 +6,8 @@ import {
   LockFilledIcon,
   GlobeIcon,
   GlobeLockIcon,
+  CheckboxCheckedFilledIcon,
+  CheckboxIcon,
 } from '@hypothesis/frontend-shared';
 import { Config } from '../config';
 import type { Group } from '../config';
@@ -26,6 +28,7 @@ import TextField from './forms/TextField';
 import GroupFormHeader from './GroupFormHeader';
 import SaveStateIcon from './SaveStateIcon';
 import WarningDialog from './WarningDialog';
+import classnames from 'classnames';
 
 /**
  * Dialog that warns users about existing annotations in a group being exposed
@@ -108,6 +111,9 @@ export default function CreateEditGroupForm({
   const [groupType, setGroupType] = useState<GroupType>(
     group?.type ?? 'private',
   );
+  const [moderationEnabled, setModerationEnabled] = useState(
+    group?.moderation_enabled ?? false,
+  );
 
   // Set when the user selects a new group type if confirmation is required.
   // Cleared after confirmation.
@@ -158,6 +164,7 @@ export default function CreateEditGroupForm({
         name,
         description,
         type: groupType,
+        moderation_enabled: moderationEnabled,
       };
 
       response = (await callAPI(config.api.createGroup.url, {
@@ -185,6 +192,7 @@ export default function CreateEditGroupForm({
         name,
         description,
         type: groupType,
+        moderation_enabled: moderationEnabled,
       };
 
       (await callAPI(config.api.updateGroup!.url, {
@@ -241,7 +249,11 @@ export default function CreateEditGroupForm({
         title={heading}
         enableMembers={config.features.group_members}
       />
-      <form onSubmit={onSubmit} data-testid="form">
+      <form
+        onSubmit={onSubmit}
+        data-testid="form"
+        className="flex flex-col gap-y-4"
+      >
         <TextField
           type="input"
           value={name}
@@ -262,7 +274,7 @@ export default function CreateEditGroupForm({
         />
 
         {config.features.group_type && (
-          <>
+          <div>
             <Label id={groupTypeLabel} text="Group type" />
             <RadioGroup
               aria-labelledby={groupTypeLabel}
@@ -290,10 +302,44 @@ export default function CreateEditGroupForm({
                 <GlobeIcon /> Open
               </RadioGroup.Radio>
             </RadioGroup>
-          </>
+          </div>
+        )}
+
+        {config.features.group_moderation && (
+          <div>
+            <Label text="Pre-moderation" />
+            <div
+              className={classnames(
+                'focus-visible-ring flex gap-x-1.5 items-start',
+                'px-3 py-2 rounded-lg cursor-pointer',
+                'aria-checked:bg-grey-3/50',
+              )}
+              role="checkbox"
+              aria-checked={moderationEnabled}
+              onClick={() => setModerationEnabled(prev => !prev)}
+              onKeyDown={e =>
+                ['Enter', ' '].includes(e.key) &&
+                setModerationEnabled(prev => !prev)
+              }
+              tabIndex={0}
+              data-testid="pre-moderation"
+            >
+              {!moderationEnabled && <CheckboxIcon className="mt-1" />}
+              {moderationEnabled && (
+                <CheckboxCheckedFilledIcon className="mt-1" />
+              )}
+              <div>
+                <p>Enable pre-moderation for this group</p>
+                <p>
+                  Moderators must approve new annotations before they are shown
+                  to group members.
+                </p>
+              </div>
+            </div>
+          </div>
         )}
 
-        <div className="mt-2 pt-2 border-t border-t-text-grey-6 flex items-center gap-x-4">
+        <div className="pt-2 border-t border-t-text-grey-6 flex items-center gap-x-4">
           <span>
             {/* These are in a child span to avoid a gap between them. */}
             <Star />

Diff for: h/static/scripts/group-forms/components/forms/TextField.tsx

@@ -98,7 +98,7 @@ export default function TextField({
   const InputComponent = type === 'input' ? Input : Textarea;
 
   return (
-    <div className="mb-4">
+    <div>
       <Label htmlFor={id} text={label} required={required} />
       <InputComponent
         id={id}

Diff for: h/static/scripts/group-forms/components/test/CreateEditGroupForm-test.js

@@ -196,6 +196,7 @@ describe('CreateEditGroupForm', () => {
           name,
           description,
           type,
+          moderation_enabled: false,
         },
       });
       assert.calledOnceWithExactly(fakeSetLocation, groupURL);
@@ -219,6 +220,45 @@ describe('CreateEditGroupForm', () => {
     assert.isFalse(savedConfirmationShowing(wrapper));
   });
 
+  describe('pre-moderation', () => {
+    const isModerationEnabled = wrapper =>
+      wrapper.find('[data-testid="pre-moderation"]').prop('aria-checked');
+
+    [true, false].forEach(moderationEnabled => {
+      it('shows pre-moderation checkbox when group moderation is enabled', () => {
+        config.features.group_moderation = moderationEnabled;
+        const { wrapper } = createWrapper();
+
+        assert.equal(
+          wrapper.exists('[data-testid="pre-moderation"]'),
+          moderationEnabled,
+        );
+      });
+    });
+
+    it('toggles pre-moderation by clicking on it', () => {
+      config.features.group_moderation = true;
+      const { wrapper } = createWrapper();
+
+      assert.isFalse(isModerationEnabled(wrapper));
+      wrapper.find('[data-testid="pre-moderation"]').simulate('click');
+      assert.isTrue(isModerationEnabled(wrapper));
+    });
+
+    ['Enter', ' '].forEach(key => {
+      it('toggles pre-moderation by pressing Enter or Space', () => {
+        config.features.group_moderation = true;
+        const { wrapper } = createWrapper();
+
+        assert.isFalse(isModerationEnabled(wrapper));
+        wrapper
+          .find('[data-testid="pre-moderation"]')
+          .simulate('keydown', { key });
+        assert.isTrue(isModerationEnabled(wrapper));
+      });
+    });
+  });
+
   context('when editing an existing group', () => {
     beforeEach(() => {
       config.context.group = {
@@ -329,6 +369,7 @@ describe('CreateEditGroupForm', () => {
             name,
             description,
             type: newGroupType,
+            moderation_enabled: false,
           },
         }),
       );

Diff for: h/static/scripts/group-forms/config.ts

@@ -14,6 +14,7 @@ export type Group = {
   link: string;
   type: GroupType;
   num_annotations: number;
+  moderation_enabled?: boolean;
 };
 
 export type ConfigObject = {
@@ -35,6 +36,7 @@ export type ConfigObject = {
   features: {
     group_members: boolean;
     group_type: boolean;
+    group_moderation: boolean;
   };
 };
 

Diff for: h/static/scripts/group-forms/utils/api.ts

@@ -19,6 +19,7 @@ export type CreateUpdateGroupAPIRequest = {
   name: string;
   description?: string;
   type?: GroupType;
+  moderation_enabled?: boolean;
 };
 
 /**

Diff for: h/views/groups.py

@@ -70,6 +70,7 @@ def api_config(route_name: str, method: str, **kw):
             "features": {
                 "group_members": self.request.feature("group_members"),
                 "group_type": self.request.feature("group_type"),
+                "group_moderation": self.request.feature("group_moderation"),
             },
         }
 

Diff for: tests/unit/h/views/groups_test.py

@@ -10,9 +10,10 @@
 
 @pytest.mark.usefixtures("annotation_stats_service")
 class TestGroupCreateEditController:
-    @pytest.mark.parametrize("group_type_flag", [True, False])
-    def test_create(self, pyramid_request, assets_env, mocker, group_type_flag):
-        pyramid_request.feature.flags["group_type"] = group_type_flag
+    @pytest.mark.parametrize("flag", [True, False])
+    def test_create(self, pyramid_request, assets_env, mocker, flag):
+        pyramid_request.feature.flags["group_type"] = flag
+        pyramid_request.feature.flags["group_moderation"] = flag
 
         mocker.spy(views, "get_csrf_token")
 
@@ -24,9 +25,7 @@ def test_create(self, pyramid_request, assets_env, mocker, group_type_flag):
         views.get_csrf_token.assert_called_once_with(pyramid_request)
         assert result == {
             "page_title": (
-                "Create a new group"
-                if group_type_flag
-                else "Create a new private group"
+                "Create a new group" if flag else "Create a new private group"
             ),
             "js_config": {
                 "styles": assets_env.urls.return_value,
@@ -42,8 +41,9 @@ def test_create(self, pyramid_request, assets_env, mocker, group_type_flag):
                     "user": {"userid": sentinel.authenticated_userid},
                 },
                 "features": {
-                    "group_type": group_type_flag,
+                    "group_type": flag,
                     "group_members": pyramid_request.feature.flags["group_members"],
+                    "group_moderation": flag,
                 },
             },
         }
@@ -117,6 +117,9 @@ def test_edit(
                 "features": {
                     "group_type": pyramid_request.feature.flags["group_type"],
                     "group_members": pyramid_request.feature.flags["group_members"],
+                    "group_moderation": pyramid_request.feature.flags[
+                        "group_moderation"
+                    ],
                 },
             },
         }
@@ -135,6 +138,7 @@ def pyramid_config(self, pyramid_config, assets_env):
     def pyramid_request(self, pyramid_request):
         pyramid_request.feature.flags["group_type"] = True
         pyramid_request.feature.flags["group_members"] = True
+        pyramid_request.feature.flags["group_moderation"] = True
         return pyramid_request