local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

disable editing of app access dropdowns when dashboard role is admin

Browse source
This commit is contained in:
Davor 2022-06-28 12:20:55 +02:00
parent ca3a5454d1
commit edc318a25b
2 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Form/Select/Select.tsx
View file

@ -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) => (
<option key={option.value} value={option.value}>
@ -43,4 +44,5 @@ type SelectProps = {
name: string;
label?: string;
options?: any[];
disabled?: boolean;
};

24
src/components/UserModal/UserModal.tsx
View file

@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { TrashIcon } from '@heroicons/react/outline';
import { useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
import { Modal, ConfirmationModal } from 'src/components';
import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { Banner, Modal, ConfirmationModal } from 'src/components';
import { Input, Select } from 'src/components/Form';
import { User, UserRole, useUsers } from 'src/services/users';
import { useAuth } from 'src/services/auth';
@ -11,7 +11,6 @@ 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();
@ -20,10 +19,6 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
defaultValues: initialUserForm,
});
const { isDirty } = useFormState({
control,
});
const { fields, update } = useFieldArray({
control,
name: 'app_roles',
@ -52,12 +47,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
});
useEffect(() => {
if (dashboardRole === UserRole.Admin && (isDirty || dashboardRoleEdited)) {
if (dashboardRole === UserRole.Admin) {
fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
}
if (isDirty) {
setDashboardRoleEdited(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dashboardRole]);
@ -192,6 +184,15 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
{dashboardRole === UserRole.Admin && (
<div className="sm:col-span-6">
<Banner
title="Admin users automatically have admin-level access to all apps."
titleSm="Admin user"
/>
</div>
)}
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
@ -218,6 +219,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
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' },