Access control: Fix role picker after roles update (#44978)

* Access control: Fix role picker after roles update

* Refactor, use useAsyncFn()

* Review suggestions
This commit is contained in:
Alexander Zobnin
2022-02-09 16:42:46 +03:00
committed by GitHub
parent e806011a77
commit 49790eac32
2 changed files with 30 additions and 18 deletions

View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react';
import { useAsync } from 'react-use';
import React, { FC, useEffect } from 'react';
import { useAsyncFn } from 'react-use';
import { Role } from 'app/types';
import { RolePicker } from './RolePicker';
import { fetchTeamRoles, updateTeamRoles } from './api';
@@ -13,21 +13,28 @@ export interface Props {
}
export const TeamRolePicker: FC<Props> = ({ teamId, orgId, roleOptions, disabled, builtinRolesDisabled }) => {
const [appliedRoles, setAppliedRoles] = useState<Role[]>([]);
const { loading } = useAsync(async () => {
const [{ loading, value: appliedRoles = [] }, getTeamRoles] = useAsyncFn(async () => {
try {
const teamRoles = await fetchTeamRoles(teamId, orgId);
setAppliedRoles(teamRoles);
return await fetchTeamRoles(teamId, orgId);
} catch (e) {
// TODO handle error
console.error('Error loading options');
}
return [];
}, [orgId, teamId]);
useEffect(() => {
getTeamRoles();
}, [orgId, teamId, getTeamRoles]);
const onRolesChange = async (roles: string[]) => {
await updateTeamRoles(roles, teamId, orgId);
await getTeamRoles();
};
return (
<RolePicker
onRolesChange={(roles) => updateTeamRoles(roles, teamId, orgId)}
onRolesChange={onRolesChange}
roleOptions={roleOptions}
appliedRoles={appliedRoles}
isLoading={loading}

View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react';
import { useAsync } from 'react-use';
import React, { FC, useEffect } from 'react';
import { useAsyncFn } from 'react-use';
import { contextSrv } from 'app/core/core';
import { Role, OrgRole, AccessControlAction } from 'app/types';
import { RolePicker } from './RolePicker';
@@ -26,26 +26,31 @@ export const UserRolePicker: FC<Props> = ({
disabled,
builtinRolesDisabled,
}) => {
const [appliedRoles, setAppliedRoles] = useState<Role[]>([]);
const { loading } = useAsync(async () => {
const [{ loading, value: appliedRoles = [] }, getUserRoles] = useAsyncFn(async () => {
try {
if (contextSrv.hasPermission(AccessControlAction.ActionUserRolesList)) {
const userRoles = await fetchUserRoles(userId, orgId);
setAppliedRoles(userRoles);
} else {
setAppliedRoles([]);
return await fetchUserRoles(userId, orgId);
}
} catch (e) {
// TODO handle error
console.error('Error loading options');
}
return [];
}, [orgId, userId]);
useEffect(() => {
getUserRoles();
}, [orgId, userId, getUserRoles]);
const onRolesChange = async (roles: string[]) => {
await updateUserRoles(roles, userId, orgId);
await getUserRoles();
};
return (
<RolePicker
builtInRole={builtInRole}
onRolesChange={(roles) => updateUserRoles(roles, userId, orgId)}
onRolesChange={onRolesChange}
onBuiltinRoleChange={onBuiltinRoleChange}
roleOptions={roleOptions}
appliedRoles={appliedRoles}