Service Accounts: Fix issue in UserTable and ServiceAccountsTable (#43865)

* fix issue where ServiceAccountsTable rendere delete modal
for every item in list

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Karl Persson 2022-01-11 18:51:24 +01:00 committed by GitHub
parent 1966eba796
commit e2de1c1ec4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 90 deletions

View File

@ -45,7 +45,7 @@ export class ServiceAccountsListPage extends PureComponent<Props, State> {
<ServiceAccountsTable <ServiceAccountsTable
serviceAccounts={paginatedServiceAccounts} serviceAccounts={paginatedServiceAccounts}
onRoleChange={(role, serviceAccount) => this.onRoleChange(role, serviceAccount)} onRoleChange={(role, serviceAccount) => this.onRoleChange(role, serviceAccount)}
onRemoveServiceaccount={(serviceAccount) => this.props.removeServiceAccount(serviceAccount.serviceAccountId)} onRemoveServiceAccount={(serviceAccount) => this.props.removeServiceAccount(serviceAccount.serviceAccountId)}
/> />
<HorizontalGroup justify="flex-end"> <HorizontalGroup justify="flex-end">
<Pagination <Pagination

View File

@ -9,19 +9,20 @@ import { fetchBuiltinRoles, fetchRoleOptions, UserRolePicker } from 'app/core/co
export interface Props { export interface Props {
serviceAccounts: OrgServiceAccount[]; serviceAccounts: OrgServiceAccount[];
orgId?: number; orgId?: number;
onRoleChange: (role: OrgRole, serviceaccount: OrgServiceAccount) => void; onRoleChange: (role: OrgRole, serviceAccount: OrgServiceAccount) => void;
onRemoveServiceaccount: (serviceaccount: OrgServiceAccount) => void; onRemoveServiceAccount: (serviceAccount: OrgServiceAccount) => void;
} }
const ServiceaccountsTable: FC<Props> = (props) => { const ServiceAccountsTable: FC<Props> = (props) => {
const { serviceAccounts, orgId, onRoleChange, onRemoveServiceaccount: onRemoveserviceaccount } = props; const { serviceAccounts, orgId, onRoleChange, onRemoveServiceAccount } = props;
const canUpdateRole = contextSrv.hasPermission(AccessControlAction.OrgUsersRoleUpdate); const canUpdateRole = contextSrv.hasPermission(AccessControlAction.OrgUsersRoleUpdate);
const canRemoveFromOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersRemove); const canRemoveFromOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersRemove);
const rolePickerDisabled = !canUpdateRole; const rolePickerDisabled = !canUpdateRole;
const [showRemoveModal, setShowRemoveModal] = useState(false);
const [roleOptions, setRoleOptions] = useState<Role[]>([]); const [roleOptions, setRoleOptions] = useState<Role[]>([]);
const [toRemove, setToRemove] = useState<OrgServiceAccount | null>(null);
const [builtinRoles, setBuiltinRoles] = useState<Record<string, Role[]>>({}); const [builtinRoles, setBuiltinRoles] = useState<Record<string, Role[]>>({});
const [showRemoveModal, setShowRemoveModal] = useState<boolean | string>(false);
useEffect(() => { useEffect(() => {
async function fetchOptions() { async function fetchOptions() {
@ -43,6 +44,7 @@ const ServiceaccountsTable: FC<Props> = (props) => {
const getBuiltinRoles = async () => builtinRoles; const getBuiltinRoles = async () => builtinRoles;
return ( return (
<>
<table className="filter-table form-inline"> <table className="filter-table form-inline">
<thead> <thead>
<tr> <tr>
@ -100,26 +102,15 @@ const ServiceaccountsTable: FC<Props> = (props) => {
/> />
)} )}
</td> </td>
{canRemoveFromOrg && ( {canRemoveFromOrg && (
<td> <td>
<Button <Button
size="sm" size="sm"
variant="destructive" variant="destructive"
onClick={() => setShowRemoveModal(Boolean(serviceAccount.login))} onClick={() => setShowRemoveModal(serviceAccount.login)}
icon="times" icon="times"
aria-label="Delete serviceaccount" aria-label="Delete serviceaccount"
/> />
<ConfirmModal
body={`Are you sure you want to delete serviceaccount ${serviceAccount.login}?`}
confirmText="Delete"
title="Delete"
onDismiss={() => setShowRemoveModal(false)}
isOpen={Boolean(serviceAccount.login) === showRemoveModal}
onConfirm={() => {
onRemoveserviceaccount(serviceAccount);
}}
/>
</td> </td>
)} )}
</tr> </tr>
@ -127,7 +118,18 @@ const ServiceaccountsTable: FC<Props> = (props) => {
})} })}
</tbody> </tbody>
</table> </table>
{toRemove !== null && (
<ConfirmModal
body={`Are you sure you want to delete ${toRemove.login} service account?`}
confirmText="Delete"
title="Delete"
onDismiss={() => setToRemove(null)}
isOpen={toRemove.login === showRemoveModal}
onConfirm={() => onRemoveServiceAccount(toRemove)}
/>
)}
</>
); );
}; };
export default ServiceaccountsTable; export default ServiceAccountsTable;