Define moderation statuses in uppercase (#9559)

Author: acelaya

h/static/scripts/group-forms/components/GroupModeration.tsx

@@ -14,7 +14,7 @@ export type GroupModerationProps = {
 export default function GroupModeration({ group }: GroupModerationProps) {
   const [filterStatus, setFilterStatus] = useState<
     ModerationStatus | undefined
-  >('pending');
+  >('PENDING');
 
   return (
     <FormContainer>

h/static/scripts/group-forms/components/ModerationStatusSelect.tsx

@@ -8,7 +8,7 @@ import {
   Select,
 } from '@hypothesis/frontend-shared';
 
-export type ModerationStatus = 'pending' | 'approved' | 'denied' | 'spam';
+export type ModerationStatus = 'PENDING' | 'APPROVED' | 'DENIED' | 'SPAM';
 
 export type ModerationStatusSelectProps = {
   selected?: ModerationStatus;
@@ -21,10 +21,10 @@ type Option = {
 };
 
 const options = new Map<ModerationStatus, Option>([
-  ['pending', { label: 'Pending', icon: DottedCircleIcon }],
-  ['approved', { label: 'Approved', icon: CheckAllIcon }],
-  ['denied', { label: 'Denied', icon: RestrictedIcon }],
-  ['spam', { label: 'Spam', icon: CautionIcon }],
+  ['PENDING', { label: 'Pending', icon: DottedCircleIcon }],
+  ['APPROVED', { label: 'Approved', icon: CheckAllIcon }],
+  ['DENIED', { label: 'Denied', icon: RestrictedIcon }],
+  ['SPAM', { label: 'Spam', icon: CautionIcon }],
 ]);
 
 export default function ModerationStatusSelect({

h/static/scripts/group-forms/components/test/GroupModeration-test.js

@@ -20,11 +20,11 @@ describe('GroupModeration', () => {
       const wrapper = createComponent();
       assert.equal(
         wrapper.find('ModerationStatusSelect').prop('selected'),
-        'pending',
+        'PENDING',
       );
     });
 
-    ['approved', 'denied', 'spam'].forEach(newStatus => {
+    ['APPROVED', 'DENIED', 'SPAM'].forEach(newStatus => {
       it('changes selected status on ModerationStatusSelect change', () => {
         const wrapper = createComponent();
 

h/static/scripts/group-forms/components/test/ModerationStatusSelect-test.js

@@ -22,10 +22,10 @@ describe('ModerationStatusSelect', () => {
 
   [
     { selected: undefined, expectedText: 'All' },
-    { selected: 'pending', expectedText: 'Pending' },
-    { selected: 'approved', expectedText: 'Approved' },
-    { selected: 'denied', expectedText: 'Denied' },
-    { selected: 'spam', expectedText: 'Spam' },
+    { selected: 'PENDING', expectedText: 'Pending' },
+    { selected: 'APPROVED', expectedText: 'Approved' },
+    { selected: 'DENIED', expectedText: 'Denied' },
+    { selected: 'SPAM', expectedText: 'Spam' },
   ].forEach(({ selected, expectedText }) => {
     it('shows selected option as button content', () => {
       const wrapper = createComponent(selected);