hide app access when selected dashboard role is admin

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>