Add ability to toggle group member visibility

src/api/updateGroup.ts

@@ -3,7 +3,7 @@ import { PlayerGroup, playerGroupSchema } from '../entities/playerGroup'
 import api from './api'
 import makeValidatedRequest from './makeValidatedRequest'
 
-type Data = Pick<PlayerGroup, 'name' | 'description' | 'rules' | 'ruleMode'>
+type Data = Pick<PlayerGroup, 'name' | 'description' | 'rules' | 'ruleMode' | 'membersVisible'>
 
 const updateGroup = makeValidatedRequest(
   (gameId: number, groupId: string, data: Data) => api.put(`/games/${gameId}/player-groups/${groupId}`, data),

src/entities/playerGroup.ts

@@ -51,6 +51,7 @@ export const playerGroupSchema = z.object({
   rules: z.array(playerGroupRuleSchema),
   ruleMode: z.nativeEnum(PlayerGroupRuleMode),
   count: z.number(),
+  membersVisible: z.boolean(),
   updatedAt: z.string().datetime()
 })
 

src/modals/IntegrationDetails.tsx

@@ -233,7 +233,7 @@ export default function IntegrationDetails({
 
           <div className='flex justify-between items-start'>
             <div>
-              <p className='font-medium'>Sync leaderboards</p>
+              <label htmlFor='sync-leaderboards' className='font-semibold'>Sync leaderboards</label>
               <p className='text-sm text-gray-500'>Push leaderboard entries to Steam</p>
             </div>
             <div className='flex items-center space-x-4'>
@@ -258,7 +258,7 @@ export default function IntegrationDetails({
 
           <div className='flex justify-between items-start'>
             <div>
-              <p className='font-medium'>Sync stats</p>
+              <label htmlFor='sync-stats' className='font-semibold'>Sync stats</label>
               <p className='text-sm text-gray-500'>Push individual and global values to Steam</p>
             </div>
             <div className='flex items-center space-x-4'>

src/modals/groups/GroupDetails.tsx

@@ -4,7 +4,7 @@ import TextInput from '../../components/TextInput'
 import Button from '../../components/Button'
 import buildError from '../../utils/buildError'
 import ErrorMessage, { TaloError } from '../../components/ErrorMessage'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import createGroup from '../../api/createGroup'
 import activeGameState, { SelectedActiveGame } from '../../state/activeGameState'
@@ -24,10 +24,13 @@ import { metaGroupFields } from '../../constants/metaProps'
 import { PlayerGroup, PlayerGroupRule, PlayerGroupRuleCastType, PlayerGroupRuleName, PlayerGroupRuleMode } from '../../entities/playerGroup'
 import { KeyedMutator } from 'swr'
 import { z } from 'zod'
+import Toggle from '../../components/toggles/Toggle'
+import Link from '../../components/Link'
 
 const validationSchema = z.object({
   name: z.string(),
-  description: z.string()
+  description: z.string(),
+  membersVisible: z.boolean()
 })
 
 type FormValues = z.infer<typeof validationSchema>
@@ -101,11 +104,12 @@ export default function GroupDetails({
     return rules.every(isGroupRuleValid)
   }, [rules])
 
-  const { register, handleSubmit, formState: { isValid, errors } } = useForm<FormValues>({
+  const { register, handleSubmit, formState: { isValid, errors }, control } = useForm<FormValues>({
     resolver: zodResolver(validationSchema),
     defaultValues: {
       name: editingGroup?.name ?? '',
-      description: editingGroup?.description ?? ''
+      description: editingGroup?.description ?? '',
+      membersVisible: editingGroup?.membersVisible ?? false
     },
     mode: 'onChange'
   })
@@ -213,6 +217,29 @@ export default function GroupDetails({
             errors={[errors.description?.message]}
           />
 
+          <Controller
+            control={control}
+            name='membersVisible'
+            render={({
+              field: { onChange, value, ref }
+            }) => (
+              <div className='flex justify-between items-start'>
+                <div>
+                  <label htmlFor='members-visible' className='font-semibold'>Members visible</label>
+                  <p className='text-sm text-gray-500'>If enabled, player data will be returned in the <Link to='https://docs.trytalo.com/docs/http/player-group-api'>player group API</Link></p>
+                </div>
+                <div className='flex items-center space-x-4'>
+                  <Toggle
+                    id='members-visible'
+                    inputRef={ref}
+                    enabled={value}
+                    onToggle={onChange}
+                  />
+                </div>
+              </div>
+            )}
+          />
+
           <div>
             <p className='font-semibold mb-2'>Membership</p>
             <GroupRules

src/modals/groups/__tests__/GroupDetails.test.tsx

@@ -61,6 +61,7 @@ describe('<GroupDetails />', () => {
         rules: [],
         ruleMode: PlayerGroupRuleMode.AND,
         count: 0,
+        membersVisible: false,
         updatedAt: new Date().toISOString()
       }
     ]
@@ -132,6 +133,7 @@ describe('<GroupDetails />', () => {
             ],
             ruleMode: PlayerGroupRuleMode.AND,
             count: 0,
+            membersVisible: true,
             updatedAt: new Date().toISOString()
           }}
         />
@@ -140,6 +142,7 @@ describe('<GroupDetails />', () => {
 
     expect(screen.getByLabelText('Name')).toHaveValue('Winners')
     expect(screen.getByLabelText('Description')).toHaveValue('Players who have won the game')
+    expect(screen.getByLabelText('Members visible')).toBeEnabled()
 
     expect(screen.getByText('Update')).toBeInTheDocument()
   })
@@ -158,6 +161,7 @@ describe('<GroupDetails />', () => {
       ],
       ruleMode: PlayerGroupRuleMode.AND,
       count: 0,
+      membersVisible: false,
       updatedAt: new Date().toISOString()
     }
 
@@ -215,6 +219,7 @@ describe('<GroupDetails />', () => {
             rules: [],
             ruleMode: PlayerGroupRuleMode.AND,
             count: 0,
+            membersVisible: false,
             updatedAt: new Date().toISOString()
           }}
         />
@@ -240,6 +245,7 @@ describe('<GroupDetails />', () => {
       rules: [],
       ruleMode: PlayerGroupRuleMode.AND,
       count: 0,
+      membersVisible: false,
       updatedAt: new Date().toISOString()
     }
 
@@ -281,6 +287,7 @@ describe('<GroupDetails />', () => {
       rules: [],
       ruleMode: PlayerGroupRuleMode.AND,
       count: 0,
+      membersVisible: false,
       updatedAt: new Date().toISOString()
     }
 
@@ -320,6 +327,7 @@ describe('<GroupDetails />', () => {
             rules: [],
             ruleMode: PlayerGroupRuleMode.AND,
             count: 0,
+            membersVisible: false,
             updatedAt: new Date().toISOString()
           }}
         />