Refactor role permissions (#4692)

app/assets/locales/en.json

@@ -317,7 +317,18 @@
       "create_role": "Create Role",
       "create_new_role": "Create a new role",
       "no_role_found": "No role found.",
-      "search_not_found": "No Roles found"
+      "search_not_found": "No Roles found",
+      "edit": {
+        "create_room": "Allow users with this role to create rooms",
+        "record": "Allow users with this role to record their meetings",
+        "manage_users": "Allow users with this role to manage users",
+        "manage_rooms": "Allow users with this role to manage server rooms",
+        "manage_recordings": "Allow users with this role to manage server recordings",
+        "manage_site_settings": "Allow users with this role to manage site settings",
+        "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"
+      }
     }
   },
   "toast": {
@@ -444,6 +455,13 @@
       "role_name": {
         "required": "Please enter the role name"
       },
+      "role": {
+        "limit": {
+          "required": "Please enter the room count limit",
+          "min": "Allowed minimum is 0",
+          "max": "Allowed maximum is 100"
+        }
+      },
       "room": {
         "name": {
           "required": "Please enter the room name.",

app/javascript/components/admin/roles/RolePermissionRow.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import useUpdateRolePermission from '../../../hooks/mutations/admin/role_permissions/useUpdateRolePermissions';
 
 export default function RolePermissionRow({
-  permissionName, description, roleId, defaultValue, updateMutation: useUpdateAPI,
+  permissionName, description, roleId, defaultValue,
 }) {
-  const updateAPI = useUpdateAPI();
+  const updateAPI = useUpdateRolePermission();
+
   return (
     <div className="text-muted py-3 d-flex">
-      <label className="form-check-label me-auto" htmlFor="checkBox">
+      <label className="form-check-label me-auto" htmlFor={permissionName}>
         {description}
       </label>
       <div className="form-switch">
         <input
-          id="checkBox"
+          id={permissionName}
           className="form-check-input fs-5"
           type="checkbox"
           defaultChecked={defaultValue}
@@ -29,6 +31,5 @@ RolePermissionRow.propTypes = {
   permissionName: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   defaultValue: PropTypes.bool.isRequired,
-  updateMutation: PropTypes.func.isRequired,
   roleId: PropTypes.string.isRequired,
 };

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

-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Stack } from 'react-bootstrap';
-import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { yupResolver } from '@hookform/resolvers/yup';
-import {
-  editRoleFormConfigRoleName, validationSchemaRoomLimit, editRoleFormFieldsRoomLimit, editRoleFormFieldsRoleName,
-} from '../../../../helpers/forms/EditRoleFormHelpers';
 import Form from '../../../shared_components/forms/Form';
 import FormControl from '../../../shared_components/forms/FormControl';
 import useUpdateRole from '../../../../hooks/mutations/admin/roles/useUpdateRole';
@@ -18,31 +13,25 @@ import useRolePermissions from '../../../../hooks/queries/admin/role_permissions
 import RolePermissionRow from '../RolePermissionRow';
 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';
 
 export default function EditRoleForm({ role }) {
   const { t } = useTranslation();
-  const methodsRoleName = useForm(editRoleFormConfigRoleName);
-  const updateRoleAPI = useUpdateRole(role?.id);
-  const updateRolePermission = () => useUpdateRolePermission();
-  const updateAPI = updateRolePermission();
-  const fieldsRoleName = editRoleFormFieldsRoleName;
-  const fieldsRoomLimit = editRoleFormFieldsRoomLimit;
-  const roomConfigs = useRoomConfigs();
-  const { isLoading, data: rolePermissions } = useRolePermissions(role?.id);
   const currentUser = useAuth();
-  const editRoleFormConfigRoomLimit = {
-    mode: 'onBlur',
-    defaultValues: { role_id: role?.id, name: 'RoomLimit' },
-    resolver: yupResolver(validationSchemaRoomLimit),
-  };
-  const methodsRoomLimit = useForm(editRoleFormConfigRoomLimit);
 
-  useEffect(
-    () => {
-      methodsRoleName.setValue('name', role?.name);
-    },
-    [role?.name],
-  );
+  const { isLoading: isLoadingRoomConfigs, data: roomConfigs } = useRoomConfigs();
+  const { isLoading, data: rolePermissions } = useRolePermissions(role?.id);
+
+  const updateRoleAPI = useUpdateRole(role?.id);
+  const updatePermissionAPI = useUpdateRolePermission();
+
+  const { methods: methodsName, fields: fieldsName } = useEditRoleNameForm({ defaultValues: { name: role?.name } });
+
+  const {
+    methods: methodsLimit,
+    fields: fieldsLimit,
+  } = useEditRoleLimitForm({ defaultValues: { role_id: role?.id, name: 'RoomLimit' } });
 
   function deleteRoleButton() {
     if (role?.name === 'User' || role?.name === 'Administrator' || role?.name === 'Guest') {
@@ -59,90 +48,86 @@ export default function EditRoleForm({ role }) {
     );
   }
 
-  fieldsRoomLimit.value.placeHolder = rolePermissions?.RoomLimit;
-
   return (
     <div id="edit-role-form">
       {
-      roomConfigs.isLoading || isLoading
+        isLoadingRoomConfigs || isLoading
           ? (
           // eslint-disable-next-line react/no-array-index-key
             [...Array(9)].map((val, idx) => <RolePermissionRowPlaceHolder key={idx} />)
           )
           : (
             <div>
-            <Form methods={methodsRoleName} onBlur={(e) => updateRoleAPI.mutate({ name: e.target.value })}>
-              <FormControl field={fieldsRoleName.name} type="text" />
+              <Form methods={methodsName} onBlur={(e) => updateRoleAPI.mutate({ name: e.target.value })}>
+                <FormControl field={fieldsName.name} type="text" />
               </Form>
               <RolePermissionRow
                 permissionName="CreateRoom"
-              description="Can create rooms"
+                description={t('admin.roles.edit.create_room')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.CreateRoom === 'true'}
-              updateMutation={updateRolePermission}
               />
-            <RolePermissionRow
-              permissionName="ManageUsers"
-              description="Allow users with this role to manage users"
-              roleId={role?.id}
-              defaultValue={rolePermissions?.ManageUsers === 'true'}
-              updateMutation={updateRolePermission}
-            />
-            {['optional', 'default_enabled'].includes(roomConfigs?.data?.record) && (
+              {['optional', 'default_enabled'].includes(roomConfigs?.record) && (
               <RolePermissionRow
                 permissionName="CanRecord"
-              description="Allow users with this role to record their meetings"
+                description={t('admin.roles.edit.record')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.CanRecord === 'true'}
-              updateMutation={updateRolePermission}
               />
               )}
+              <RolePermissionRow
+                permissionName="ManageUsers"
+                description={t('admin.roles.edit.manage_users')}
+                roleId={role?.id}
+                defaultValue={rolePermissions?.ManageUsers === 'true'}
+              />
               <RolePermissionRow
                 permissionName="ManageRooms"
-              description="Allow users with this role to manage server rooms"
+                description={t('admin.roles.edit.manage_rooms')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.ManageRooms === 'true'}
-              updateMutation={updateRolePermission}
               />
               <RolePermissionRow
                 permissionName="ManageRecordings"
-              description="Allow users with this role to manage server recordings"
+                description={t('admin.roles.edit.manage_recordings')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.ManageRecordings === 'true'}
-              updateMutation={updateRolePermission}
               />
               <RolePermissionRow
                 permissionName="ManageSiteSettings"
-              description="Allow users with this role to manage site settings"
+                description={t('admin.roles.edit.manage_site_settings')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.ManageSiteSettings === 'true'}
-              updateMutation={updateRolePermission}
               />
               {/* Don't show ManageRoles if current_user is editing their own role */}
               {(currentUser.role.id !== role?.id) && (
               <RolePermissionRow
                 permissionName="ManageRoles"
-              description="Allow users with this role to edit other roles"
+                description={t('admin.roles.edit.manage_roles')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.ManageRoles === 'true'}
-              updateMutation={updateRolePermission}
               />
               )}
               <RolePermissionRow
                 permissionName="SharedList"
-              description="Include users with this role in the dropdown for sharing rooms"
+                description={t('admin.roles.edit.shared_list')}
                 roleId={role?.id}
                 defaultValue={rolePermissions?.SharedList === 'true'}
-              updateMutation={updateRolePermission}
               />
 
-            <Form methods={methodsRoomLimit} onBlur={methodsRoomLimit.handleSubmit(updateAPI.mutate)}>
+              <Form methods={methodsLimit} onBlur={methodsLimit.handleSubmit(updatePermissionAPI.mutate)}>
                 <Stack direction="horizontal">
                   <div className="text-muted me-auto">
-                  Room Limit
+                    {t('admin.roles.edit.room_limit')}
                   </div>
                   <div>
-                  <FormControl field={fieldsRoomLimit.value} noLabel className="room-limit float-end" type="number" />
+                    <FormControl
+                      field={fieldsLimit.value}
+                      defaultValue={rolePermissions?.RoomLimit}
+                      noLabel
+                      className="room-limit float-end"
+                      type="number"
+                    />
                   </div>
                 </Stack>
               </Form>

app/javascript/helpers/forms/EditRoleFormHelpers.jsx

-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-const validationSchemaRoleName = yup.object({
-  // TODO: amir - Revisit validations.
-  name: yup.string().required('Please enter the role name.'),
-});
-
-export const validationSchemaRoomLimit = yup.object({
-  value: yup.number().required('Please enter the room count limit.').min(0, 'Minimum atleast 0').max(100, 'Allowed maximum is 100'),
-});
-
-export const editRoleFormConfigRoleName = {
-  mode: 'onBlur',
-  defaultValues: {},
-  resolver: yupResolver(validationSchemaRoleName),
-};
-
-export const editRoleFormFieldsRoleName = {
-  name: {
-    label: 'Role Name',
-    placeHolder: 'Enter role name',
-    controlId: 'editRoleFormName',
-    hookForm: {
-      id: 'name',
-    },
-  },
-};
-
-export const editRoleFormFieldsRoomLimit = {
-  value: {
-    label: 'Room Limit',
-    placeHolder: 'Enter room limit',
-    controlId: 'editRoleRoomLimit',
-    hookForm: {
-      id: 'value',
-    },
-  },
-};

app/javascript/hooks/forms/admin/roles/useEditRoleLimitForm.js

+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { useCallback, useMemo } from 'react';
+
+export function useEditRoleLimitFormValidation() {
+  return useMemo(() => (yup.object({
+    value: yup.number().required('forms.validations.role.limit.required')
+      .min(0, 'forms.validations.role.limit.min')
+      .max(100, 'forms.validations.role.limit.max'),
+  })), []);
+}
+
+export default function useEditRoleLimitForm({ defaultValues: _defaultValues, ..._config } = {}) {
+  const { t, i18n } = useTranslation();
+
+  const fields = useMemo(() => ({
+    value: {
+      label: t('forms.admin.roles.fields.value.label'),
+      placeHolder: t('forms.admin.roles.fields.value.placeholder'),
+      controlId: 'editRoleRoomLimit',
+      hookForm: {
+        id: 'value',
+      },
+    },
+  }), [i18n.resolvedLanguage]);
+
+  const validationSchema = useEditRoleLimitFormValidation();
+
+  const config = useMemo(() => ({
+    ...{
+      mode: 'onChange',
+      defaultValues: {
+        ..._defaultValues,
+      },
+      resolver: yupResolver(validationSchema),
+    },
+    ..._config,
+  }), [validationSchema, _defaultValues]);
+
+  const methods = useForm(config);
+
+  const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
+
+  return { methods, fields, reset };
+}

app/javascript/hooks/forms/admin/roles/useEditRoleNameForm.js

+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { useCallback, useMemo } from 'react';
+
+export function useEditRoleNameFormValidation() {
+  return useMemo(() => (yup.object({
+    name: yup.string().required('forms.validations.role_name.required'),
+  })), []);
+}
+
+export default function useEditRoleNameForm({ defaultValues: _defaultValues, ..._config } = {}) {
+  const { t, i18n } = useTranslation();
+
+  const fields = useMemo(() => ({
+    name: {
+      label: t('forms.admin.roles.fields.name.label'),
+      placeHolder: t('forms.admin.roles.fields.name.placeholder'),
+      controlId: 'createRoleFormName',
+      hookForm: {
+        id: 'name',
+      },
+    },
+  }), [i18n.resolvedLanguage]);
+
+  const validationSchema = useEditRoleNameFormValidation();
+
+  const config = useMemo(() => ({
+    ...{
+      mode: 'onChange',
+      defaultValues: {
+        ..._defaultValues,
+      },
+      resolver: yupResolver(validationSchema),
+    },
+    ..._config,
+  }), [validationSchema, _defaultValues]);
+
+  const methods = useForm(config);
+
+  const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
+
+  return { methods, fields, reset };
+}