Fix admin role page (#4150)

* Fix Role styling

* Put isLoading back in Role

app/assets/stylesheets/admin_panel.scss

@@ -26,7 +26,7 @@
   }
 
   input.search-bar {
-    max-width: 300px;
+    max-width: $input-max-width;
   }
 
   .admin-table {
@@ -176,3 +176,16 @@
   border-radius: 100%;
 }
 
+#role-breadcrumb {
+  height: 8px;
+  a {
+    color: $muted;
+    text-decoration: none !important;
+  }
+}
+
+#edit-role-form {
+  input {
+    max-width: $input-max-width;
+  }
+}

app/assets/stylesheets/variables.scss

@@ -24,3 +24,5 @@ $column-xs-width: 50px;
 $column-sm-width: 100px;
 $column-md-width: 150px;
 $column-lg-width: 325px;
+
+$input-max-width: 300px;

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

 import { ArrowLeftCircleIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 import {
-  Col, Container, Row, Tab, Card, Breadcrumb,
+  Col, Container, Row, Tab, Card, Breadcrumb, Stack,
 } from 'react-bootstrap';
 import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ export default function EditRole() {
   const { t } = useTranslation();
   const { roleId } = useParams();
   const navigate = useNavigate();
-  const { data: role, isError } = useRole(roleId);
+  const { data: role, isError, isLoading } = useRole(roleId);
   const currentUser = useAuth();
 
   if (currentUser.permissions?.ManageRoles !== 'true') {
@@ -25,40 +25,41 @@ export default function EditRole() {
     return <Navigate to="/admin/roles" replace />;
   }
 
+  if (isLoading) return null;
+
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 shadow-sm">
         <Tab.Container activeKey="roles">
           <Row>
-            <Col sm={3}>
+            <Col className="pe-0" sm={3}>
               <div id="admin-sidebar">
                 <AdminNavSideBar />
               </div>
             </Col>
-            <Col sm={9}>
-              <Tab.Content className="p-3 ps-0">
-                <Container>
-                  <Row className="mt-1"><h3>{ t('admin.roles.roles')}</h3></Row>
-                  <Row className="mt-0 mb-1">
-                    <Col order="first">
-                      <Breadcrumb className="float-start">
-                        <Breadcrumb.Item onClick={() => navigate('/admin/roles')}>{ t('admin.roles.roles') }</Breadcrumb.Item>
-                        <Breadcrumb.Item active>{role?.name ?? 'Edit Role'}</Breadcrumb.Item>
+            <Col className="ps-0" sm={9}>
+              <Tab.Content className="ps-0">
+                <Container className="admin-table p-0">
+                  <div className="p-4 border-bottom">
+                    <Stack className="d-inline-block ">
+                      <h3 className="mb-0">{ t('admin.roles.roles') }</h3>
+                      <Breadcrumb id="role-breadcrumb" className="float-start small">
+                        <Breadcrumb.Item className="text-link" onClick={() => navigate('/admin/roles')}>{ t('admin.roles.role') }</Breadcrumb.Item>
+                        <Breadcrumb.Item active><strong>{role?.name}</strong></Breadcrumb.Item>
                       </Breadcrumb>
-                    </Col>
-                    <Col order="last">
-                      <div className="float-end cursor-pointer" aria-hidden="true" onClick={() => navigate('/admin/roles')}>
+                    </Stack>
+                    <Stack
+                      className="d-inline-block float-end cursor-pointer pe-2 pt-2 text-muted"
+                      aria-hidden="true"
+                      onClick={() => navigate('/admin/roles')}
+                    >
                       <ArrowLeftCircleIcon className="hi-s" /> { t('back') }
+                    </Stack>
                   </div>
-                    </Col>
-                  </Row>
-                  <Row><hr className="w-100 mx-0" /></Row>
-                  <Row className="my-2">
-                    <Col>
+                  <div className="p-4">
                     <EditRoleForm role={role} />
-                    </Col>
-                  </Row>
+                  </div>
                 </Container>
               </Tab.Content>
             </Col>

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

@@ -21,30 +21,30 @@ import { useAuth } from '../../../../contexts/auth/AuthProvider';
 export default function EditRoleForm({ role }) {
   const { t } = useTranslation();
   const methodsRoleName = useForm(editRoleFormConfigRoleName);
-  const updateRoleAPI = useUpdateRole(role.id);
+  const updateRoleAPI = useUpdateRole(role?.id);
   const updateRolePermission = () => useUpdateRolePermission();
   const updateAPI = updateRolePermission();
   const fieldsRoleName = editRoleFormFieldsRoleName;
   const fieldsRoomLimit = editRoleFormFieldsRoomLimit;
   const roomConfigs = useRoomConfigs();
-  const { data: rolePermissions } = useRolePermissions(role.id);
+  const { isLoading, data: rolePermissions } = useRolePermissions(role?.id);
   const currentUser = useAuth();
   const editRoleFormConfigRoomLimit = {
     mode: 'onBlur',
-    defaultValues: { role_id: role.id, name: 'RoomLimit' },
+    defaultValues: { role_id: role?.id, name: 'RoomLimit' },
     resolver: yupResolver(validationSchemaRoomLimit),
   };
   const methodsRoomLimit = useForm(editRoleFormConfigRoomLimit);
 
   useEffect(
     () => {
-      methodsRoleName.setValue('name', role.name);
+      methodsRoleName.setValue('name', role?.name);
     },
-    [role.name],
+    [role?.name],
   );
 
   function deleteRoleButton() {
-    if (role.name === 'User' || role.name === 'Administrator' || role.name === 'Guest') {
+    if (role?.name === 'User' || role?.name === 'Administrator' || role?.name === 'Guest') {
       return null;
     }
     return (
@@ -58,35 +58,34 @@ export default function EditRoleForm({ role }) {
     );
   }
 
-  fieldsRoomLimit.value.placeHolder = rolePermissions.RoomLimit;
+  fieldsRoomLimit.value.placeHolder = rolePermissions?.RoomLimit;
+
+  if (roomConfigs.isLoading || isLoading) return null;
 
   return (
-    <div>
-      <Stack>
+    <div id="edit-role-form">
       <Form methods={methodsRoleName} onBlur={(e) => updateRoleAPI.mutate({ name: e.target.value })}>
         <FormControl field={fieldsRoleName.name} type="text" />
       </Form>
-
-        <Stack>
       <RolePermissionRow
         permissionName="CreateRoom"
         description="Can create rooms"
-            roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.CreateRoom === 'true'}
         updateMutation={updateRolePermission}
       />
       <RolePermissionRow
         permissionName="ManageUsers"
         description="Allow users with this role to manage users"
-            roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.ManageUsers === 'true'}
         updateMutation={updateRolePermission}
       />
-          {(roomConfigs.data.record === 'optional') && (
+      {(roomConfigs?.data?.record === 'optional') && (
       <RolePermissionRow
         permissionName="CanRecord"
         description="Allow users with this role to record their meetings"
-              roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.CanRecord === 'true'}
         updateMutation={updateRolePermission}
       />
@@ -94,30 +93,30 @@ export default function EditRoleForm({ role }) {
       <RolePermissionRow
         permissionName="ManageRooms"
         description="Allow users with this role to manage server rooms"
-            roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.ManageRooms === 'true'}
         updateMutation={updateRolePermission}
       />
       <RolePermissionRow
         permissionName="ManageRecordings"
         description="Allow users with this role to manage server recordings"
-            roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.ManageRecordings === 'true'}
         updateMutation={updateRolePermission}
       />
       <RolePermissionRow
         permissionName="ManageSiteSettings"
         description="Allow users with this role to manage site settings"
-            roleId={role.id}
+        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) && (
+      {(currentUser.role.id !== role?.id) && (
         <RolePermissionRow
           permissionName="ManageRoles"
           description="Allow users with this role to edit other roles"
-            roleId={role.id}
+          roleId={role?.id}
           defaultValue={rolePermissions?.ManageRoles === 'true'}
           updateMutation={updateRolePermission}
         />
@@ -125,7 +124,7 @@ export default function EditRoleForm({ role }) {
       <RolePermissionRow
         permissionName="SharedList"
         description="Include users with this role in the dropdown for sharing rooms"
-            roleId={role.id}
+        roleId={role?.id}
         defaultValue={rolePermissions?.SharedList === 'true'}
         updateMutation={updateRolePermission}
       />
@@ -140,11 +139,10 @@ export default function EditRoleForm({ role }) {
           </div>
         </Stack>
       </Form>
-        </Stack>
+
       {
         deleteRoleButton()
       }
-      </Stack>
     </div>
   );
 }

app/javascript/helpers/forms/EditRoleFormHelpers.jsx

@@ -18,7 +18,7 @@ export const editRoleFormConfigRoleName = {
 
 export const editRoleFormFieldsRoleName = {
   name: {
-    label: 'Name',
+    label: 'Role Name',
     placeHolder: 'Enter role name',
     controlId: 'editRoleFormName',
     hookForm: {

app/models/role.rb

@@ -8,7 +8,7 @@ class Role < ApplicationRecord
   validates :name, presence: true, uniqueness: { scope: :provider }
   validates :provider, presence: true
 
-  before_validation :set_random_color, on: :create
+  before_validation :set_role_color, on: :create
 
   after_create :create_role_permissions
 
@@ -40,7 +40,16 @@ class Role < ApplicationRecord
 
   private
 
-  def set_random_color
-    self.color = "##{SecureRandom.hex(3)}"
+  def set_role_color
+    self.color = case name
+                 when 'Administrator'
+                   '#228B22'
+                 when 'User'
+                   '#4169E1'
+                 when 'Guest'
+                   '#FFA500'
+                 else
+                   "##{SecureRandom.hex(3)}"
+                 end
   end
 end