From e1d326e7b10a3413ec2c76b6905644acf70e5a78 Mon Sep 17 00:00:00 2001 From: Davor Date: Tue, 28 Jun 2022 02:24:16 +0200 Subject: [PATCH 1/5] set all app roles to admin when admin dashboard role is selected --- src/components/Header/Header.tsx | 4 +++- src/components/UserModal/UserModal.tsx | 25 +++++++++++++++++++++---- src/modules/users/Users.tsx | 4 +++- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7b1c5a2..29cc3c5 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -173,7 +173,9 @@ const Header: React.FC = () => { )} - + {currentUserModal && ( + + )} ); }; diff --git a/src/components/UserModal/UserModal.tsx b/src/components/UserModal/UserModal.tsx index bafc99b..b29c3a5 100644 --- a/src/components/UserModal/UserModal.tsx +++ b/src/components/UserModal/UserModal.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import _ from 'lodash'; import { TrashIcon } from '@heroicons/react/outline'; -import { useFieldArray, useForm } from 'react-hook-form'; +import { useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form'; import { Modal, ConfirmationModal } from 'src/components'; import { Input, Select } from 'src/components/Form'; import { User, UserRole, useUsers } from 'src/services/users'; @@ -11,6 +11,7 @@ import { UserModalProps } from './types'; export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => { const [deleteModal, setDeleteModal] = useState(false); + const [dashboardRoleEdited, setDashboardRoleEdited] = useState(false); const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } = useUsers(); const { currentUser, isAdmin } = useAuth(); @@ -19,7 +20,11 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) defaultValues: initialUserForm, }); - const { fields } = useFieldArray({ + const { isDirty } = useFormState({ + control, + }); + + const { fields, update } = useFieldArray({ control, name: 'app_roles', }); @@ -28,8 +33,6 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) if (userId) { loadUser(userId); } - - reset(initialUserForm); // eslint-disable-next-line react-hooks/exhaustive-deps }, [userId, open]); @@ -43,6 +46,20 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) }; }, [user, reset, open]); + const dashboardRole = useWatch({ + control, + name: 'app_roles.0.role', + }); + + useEffect(() => { + if (dashboardRole === UserRole.Admin && (isDirty || dashboardRoleEdited)) { + fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin })); + } + if (isDirty) { + setDashboardRoleEdited(true); + } + }, [dashboardRole]); + const handleSave = async () => { try { if (userId) { diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx index 3832926..c40cc79 100644 --- a/src/modules/users/Users.tsx +++ b/src/modules/users/Users.tsx @@ -163,7 +163,9 @@ export const Users: React.FC = () => { - + {configureModal && ( + + )} ); From ca3a5454d195580257c19059cdbc53b40280575a Mon Sep 17 00:00:00 2001 From: Davor Date: Tue, 28 Jun 2022 08:06:28 +0200 Subject: [PATCH 2/5] fix build errors --- src/components/UserModal/UserModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/UserModal/UserModal.tsx b/src/components/UserModal/UserModal.tsx index b29c3a5..0dc1c2e 100644 --- a/src/components/UserModal/UserModal.tsx +++ b/src/components/UserModal/UserModal.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import _ from 'lodash'; import { TrashIcon } from '@heroicons/react/outline'; -import { useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form'; +import { useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form'; import { Modal, ConfirmationModal } from 'src/components'; import { Input, Select } from 'src/components/Form'; import { User, UserRole, useUsers } from 'src/services/users'; @@ -58,6 +58,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) if (isDirty) { setDashboardRoleEdited(true); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [dashboardRole]); const handleSave = async () => { From edc318a25b6bf5f37c8c859774696296d57130e1 Mon Sep 17 00:00:00 2001 From: Davor Date: Tue, 28 Jun 2022 12:20:55 +0200 Subject: [PATCH 3/5] disable editing of app access dropdowns when dashboard role is admin --- src/components/Form/Select/Select.tsx | 4 +++- src/components/UserModal/UserModal.tsx | 24 +++++++++++++----------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx index b5416d2..aad51fa 100644 --- a/src/components/Form/Select/Select.tsx +++ b/src/components/Form/Select/Select.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useController } from 'react-hook-form'; /* eslint-disable react/react-in-jsx-scope */ -export const Select = ({ control, name, label, options }: SelectProps) => { +export const Select = ({ control, name, label, options, disabled = false }: SelectProps) => { const { field, // fieldState: { invalid, isTouched, isDirty }, @@ -27,6 +27,7 @@ export const Select = ({ control, name, label, options }: SelectProps) => { name={name} // send down the input name ref={field.ref} // send input ref, so we can focus on input when error appear className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md" + disabled={disabled} > {options?.map((option) => (