mirror of https://github.com/grafana/grafana.git
				
				
				
			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:
		
							parent
							
								
									1966eba796
								
							
						
					
					
						commit
						e2de1c1ec4
					
				| 
						 | 
				
			
			@ -45,7 +45,7 @@ export class ServiceAccountsListPage extends PureComponent<Props, State> {
 | 
			
		|||
        <ServiceAccountsTable
 | 
			
		||||
          serviceAccounts={paginatedServiceAccounts}
 | 
			
		||||
          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">
 | 
			
		||||
          <Pagination
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,19 +9,20 @@ import { fetchBuiltinRoles, fetchRoleOptions, UserRolePicker } from 'app/core/co
 | 
			
		|||
export interface Props {
 | 
			
		||||
  serviceAccounts: OrgServiceAccount[];
 | 
			
		||||
  orgId?: number;
 | 
			
		||||
  onRoleChange: (role: OrgRole, serviceaccount: OrgServiceAccount) => void;
 | 
			
		||||
  onRemoveServiceaccount: (serviceaccount: OrgServiceAccount) => void;
 | 
			
		||||
  onRoleChange: (role: OrgRole, serviceAccount: OrgServiceAccount) => void;
 | 
			
		||||
  onRemoveServiceAccount: (serviceAccount: OrgServiceAccount) => void;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const ServiceaccountsTable: FC<Props> = (props) => {
 | 
			
		||||
  const { serviceAccounts, orgId, onRoleChange, onRemoveServiceaccount: onRemoveserviceaccount } = props;
 | 
			
		||||
const ServiceAccountsTable: FC<Props> = (props) => {
 | 
			
		||||
  const { serviceAccounts, orgId, onRoleChange, onRemoveServiceAccount } = props;
 | 
			
		||||
  const canUpdateRole = contextSrv.hasPermission(AccessControlAction.OrgUsersRoleUpdate);
 | 
			
		||||
  const canRemoveFromOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersRemove);
 | 
			
		||||
  const rolePickerDisabled = !canUpdateRole;
 | 
			
		||||
 | 
			
		||||
  const [showRemoveModal, setShowRemoveModal] = useState(false);
 | 
			
		||||
  const [roleOptions, setRoleOptions] = useState<Role[]>([]);
 | 
			
		||||
  const [toRemove, setToRemove] = useState<OrgServiceAccount | null>(null);
 | 
			
		||||
  const [builtinRoles, setBuiltinRoles] = useState<Record<string, Role[]>>({});
 | 
			
		||||
  const [showRemoveModal, setShowRemoveModal] = useState<boolean | string>(false);
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    async function fetchOptions() {
 | 
			
		||||
| 
						 | 
				
			
			@ -43,6 +44,7 @@ const ServiceaccountsTable: FC<Props> = (props) => {
 | 
			
		|||
  const getBuiltinRoles = async () => builtinRoles;
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <table className="filter-table form-inline">
 | 
			
		||||
        <thead>
 | 
			
		||||
          <tr>
 | 
			
		||||
| 
						 | 
				
			
			@ -100,26 +102,15 @@ const ServiceaccountsTable: FC<Props> = (props) => {
 | 
			
		|||
                    />
 | 
			
		||||
                  )}
 | 
			
		||||
                </td>
 | 
			
		||||
 | 
			
		||||
                {canRemoveFromOrg && (
 | 
			
		||||
                  <td>
 | 
			
		||||
                    <Button
 | 
			
		||||
                      size="sm"
 | 
			
		||||
                      variant="destructive"
 | 
			
		||||
                    onClick={() => setShowRemoveModal(Boolean(serviceAccount.login))}
 | 
			
		||||
                      onClick={() => setShowRemoveModal(serviceAccount.login)}
 | 
			
		||||
                      icon="times"
 | 
			
		||||
                      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>
 | 
			
		||||
                )}
 | 
			
		||||
              </tr>
 | 
			
		||||
| 
						 | 
				
			
			@ -127,7 +118,18 @@ const ServiceaccountsTable: FC<Props> = (props) => {
 | 
			
		|||
          })}
 | 
			
		||||
        </tbody>
 | 
			
		||||
      </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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue