diff --git a/src/components/UserModal/UserModal.tsx b/src/components/UserModal/UserModal.tsx index aa25589af4c379a0ef1ed42b4d7af640e2f889fa..2828a2976d3407f9f33ed48b47de0f49c590c9a3 100644 --- a/src/components/UserModal/UserModal.tsx +++ b/src/components/UserModal/UserModal.tsx @@ -11,6 +11,7 @@ import { UserModalProps } from './types'; export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => { const [deleteModal, setDeleteModal] = useState(false); + const [isAdminRoleSelected, setAdminRoleSelected] = useState(true); const [isPersonalModal, setPersonalModal] = useState(false); const { user, @@ -63,7 +64,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) }); useEffect(() => { - if (dashboardRole === UserRole.Admin) { + const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin; + setAdminRoleSelected(isAdminDashboardRoleSelected); + if (isAdminDashboardRoleSelected) { fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin })); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -197,13 +200,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) </div> </div> - {isAdmin && ( + {isAdmin && !userModalLoading && ( <div> <div className="mt-8"> <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3> </div> - {dashboardRole === UserRole.Admin && ( + {isAdminRoleSelected && ( <div className="sm:col-span-6"> <Banner title="Admin users automatically have admin-level access to all apps." @@ -212,47 +215,49 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) </div> )} - <div> - <div className={`flow-root mt-6 ${dashboardRole === UserRole.Admin ? 'opacity-70' : ''}`}> - <ul className="-my-5 divide-y divide-gray-200"> - {fields.map((item, index) => { - if (item.name === 'dashboard') { - return null; - } + {!isAdminRoleSelected && ( + <div> + <div className="flow-root mt-6"> + <ul className="-my-5 divide-y divide-gray-200"> + {fields.map((item, index) => { + if (item.name === 'dashboard') { + return null; + } - return ( - <li className="py-4" key={item.name}> - <div className="flex items-center space-x-4"> - <div className="flex-shrink-0 flex-1 flex items-center"> - <img - className="h-10 w-10 rounded-md overflow-hidden" - src={_.find(appAccessList, ['name', item.name!])?.image} - alt={item.name ?? 'Image'} - /> - <h3 className="ml-4 text-md leading-6 font-medium text-gray-900"> - {_.find(appAccessList, ['name', item.name!])?.label} - </h3> + return ( + <li className="py-4" key={item.name}> + <div className="flex items-center space-x-4"> + <div className="flex-shrink-0 flex-1 flex items-center"> + <img + className="h-10 w-10 rounded-md overflow-hidden" + src={_.find(appAccessList, ['name', item.name!])?.image} + alt={item.name ?? 'Image'} + /> + <h3 className="ml-4 text-md leading-6 font-medium text-gray-900"> + {_.find(appAccessList, ['name', item.name!])?.label} + </h3> + </div> + <div> + <Select + key={item.id} + control={control} + name={`app_roles.${index}.role`} + disabled={isAdminRoleSelected} + options={[ + { value: UserRole.NoAccess, name: 'No Access' }, + { value: UserRole.User, name: 'User' }, + { value: UserRole.Admin, name: 'Admin' }, + ]} + /> + </div> </div> - <div> - <Select - key={item.id} - control={control} - name={`app_roles.${index}.role`} - disabled={dashboardRole === UserRole.Admin} - options={[ - { value: UserRole.NoAccess, name: 'No Access' }, - { value: UserRole.User, name: 'User' }, - { value: UserRole.Admin, name: 'Admin' }, - ]} - /> - </div> - </div> - </li> - ); - })} - </ul> + </li> + ); + })} + </ul> + </div> </div> - </div> + )} </div> )} </div>