set all app roles to admin when admin dashboard role is selected

src/components/Header/Header.tsx

@@ -173,7 +173,9 @@ const Header: React.FC<HeaderProps> = () => {
         )}
       </Disclosure>
 
-      <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      {currentUserModal && (
+        <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      )}
     </>
   );
 };

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) {

src/modules/users/Users.tsx

@@ -163,7 +163,9 @@ export const Users: React.FC = () => {
           </div>
         </div>
 
-        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
+        {configureModal && (
+          <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
+        )}
       </div>
     </div>
   );