more work

app/assets/locales/en.json

@@ -351,7 +351,8 @@
         "manage_roles": "Allow users with this role to edit other roles",
         "shared_list": "Include users with this role in the dropdown for sharing rooms",
         "room_limit": "Room Limit",
-        "email_on_signup": "Receive an email when a new user signs up"
+        "email_on_signup": "Receive an email when a new user signs up",
+        "allowed_recording_visibility": "Allowed recording visibilities"
       }
     }
   },

app/javascript/components/admin/roles/forms/EditRoleForm.jsx

@@ -31,6 +31,7 @@ import { useAuth } from '../../../../contexts/auth/AuthProvider';
 import RolePermissionRowPlaceHolder from '../RolePermissionRowPlaceHolder';
 import useEditRoleNameForm from '../../../../hooks/forms/admin/roles/useEditRoleNameForm';
 import useEditRoleLimitForm from '../../../../hooks/forms/admin/roles/useEditRoleLimitForm';
+import Select from "react-select";
 
 export default function EditRoleForm({ role }) {
   const { t } = useTranslation();
@@ -137,6 +138,28 @@ export default function EditRoleForm({ role }) {
                 defaultValue={rolePermissions?.EmailOnSignup === 'true'}
               />
 
+              <Form className="pb-3">
+                <Stack direction="horizontal">
+                  <div className="text-muted me-auto">
+                    {t('admin.roles.edit.allowed_recording_visibility')}
+                  </div>
+                  <div>
+                    <Select
+                      className="float-end"
+                      isMulti
+                      filterOption={false}
+                      options={[
+                        { value: 'Published', label: 'Published' },
+                        { value: 'Unpublished', label: 'Unpublished' },
+                        { value: 'Protected', label: 'Protected' },
+                        { value: 'Public', label: 'Public' },
+                        { value: 'Public/Protected', label: 'Public/Protected' }
+                      ]}
+                    />
+                  </div>
+                </Stack>
+              </Form>
+
               <Form methods={methodsLimit} onBlur={methodsLimit.handleSubmit(updatePermissionAPI.mutate)}>
                 <Stack direction="horizontal">
                   <div className="text-muted me-auto">

app/javascript/components/shared_components/utilities/SimpleSelect.jsx

@@ -21,8 +21,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
 export default function SimpleSelect({ defaultValue, dropUp, children }) {
   // Get the currently selected option and set the dropdown toggle to that value
-  console.log(children)
-  const defaultString = children?.filter((item) => item.props.value === defaultValue)[0];
+  const defaultString = children?.filter(Boolean)?.filter((item) => item.props.value === defaultValue)[0];
 
   return (
     <Dropdown className="simple-select" drop={dropUp ? 'up' : undefined}>