ServiceAccounts: allow deleting from service account list (#45239)

* ServiceAccounts: allow deleting from service account list

* Make delete confirmation more explicit

public/app/features/serviceaccounts/ServiceAccountsListPage.tsx

@@ -1,11 +1,17 @@
 import React, { memo, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { Icon, LinkButton, useStyles2 } from '@grafana/ui';
+import { Button, ConfirmModal, Icon, LinkButton, useStyles2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 
 import Page from 'app/core/components/Page/Page';
 import { StoreState, ServiceAccountDTO, AccessControlAction, Role } from 'app/types';
-import { fetchACOptions, loadServiceAccounts, removeServiceAccount, updateServiceAccount } from './state/actions';
+import {
+  fetchACOptions,
+  loadServiceAccounts,
+  removeServiceAccount,
+  updateServiceAccount,
+  setServiceAccountToRemove,
+} from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getServiceAccounts, getServiceAccountsSearchPage, getServiceAccountsSearchQuery } from './state/selectors';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
@@ -13,6 +19,7 @@ import { GrafanaTheme2, OrgRole } from '@grafana/data';
 import { contextSrv } from 'app/core/core';
 import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
 import { OrgRolePicker } from '../admin/OrgRolePicker';
+import pluralize from 'pluralize';
 export type Props = ConnectedProps<typeof connector>;
 
 function mapStateToProps(state: StoreState) {
@@ -24,6 +31,7 @@ function mapStateToProps(state: StoreState) {
     isLoading: state.serviceAccounts.isLoading,
     roleOptions: state.serviceAccounts.roleOptions,
     builtInRoles: state.serviceAccounts.builtInRoles,
+    toRemove: state.serviceAccounts.serviceAccountToRemove,
   };
 }
 
@@ -32,21 +40,26 @@ const mapDispatchToProps = {
   fetchACOptions,
   updateServiceAccount,
   removeServiceAccount,
+  setServiceAccountToRemove,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
 const ServiceAccountsListPage = ({
   loadServiceAccounts,
+  removeServiceAccount,
   fetchACOptions,
   updateServiceAccount,
+  setServiceAccountToRemove,
   navModel,
   serviceAccounts,
   isLoading,
   roleOptions,
   builtInRoles,
+  toRemove,
 }: Props) => {
   const styles = useStyles2(getStyles);
+
   useEffect(() => {
     loadServiceAccounts();
     if (contextSrv.accessControlEnabled()) {
@@ -84,6 +97,7 @@ const ServiceAccountsListPage = ({
                     <th>ID</th>
                     <th>Roles</th>
                     <th>Tokens</th>
+                    <th style={{ width: '34px' }} />
                   </tr>
                 </thead>
                 <tbody>
@@ -94,6 +108,7 @@ const ServiceAccountsListPage = ({
                       builtInRoles={builtInRoles}
                       roleOptions={roleOptions}
                       onRoleChange={onRoleChange}
+                      onSetToRemove={setServiceAccountToRemove}
                     />
                   ))}
                 </tbody>
@@ -101,6 +116,28 @@ const ServiceAccountsListPage = ({
             </div>
           </>
         )}
+        {toRemove && (
+          <ConfirmModal
+            body={
+              <div>
+                Are you sure you want to delete &apos;{toRemove.name}&apos;
+                {Boolean(toRemove.tokens) &&
+                  ` and ${toRemove.tokens} accompanying ${pluralize('token', toRemove.tokens)}`}
+                ?
+              </div>
+            }
+            confirmText="Delete"
+            title="Delete service account"
+            onDismiss={() => {
+              setServiceAccountToRemove(null);
+            }}
+            isOpen={true}
+            onConfirm={() => {
+              removeServiceAccount(toRemove.id);
+              setServiceAccountToRemove(null);
+            }}
+          />
+        )}
       </Page.Contents>
     </Page>
   );
@@ -111,6 +148,7 @@ type ServiceAccountListItemProps = {
   onRoleChange: (role: OrgRole, serviceAccount: ServiceAccountDTO) => void;
   roleOptions: Role[];
   builtInRoles: Record<string, Role[]>;
+  onSetToRemove: (serviceAccount: ServiceAccountDTO) => void;
 };
 
 const getServiceAccountsAriaLabel = (name: string) => {
@@ -118,7 +156,7 @@ const getServiceAccountsAriaLabel = (name: string) => {
 };
 
 const ServiceAccountListItem = memo(
-  ({ serviceAccount, onRoleChange, roleOptions, builtInRoles }: ServiceAccountListItemProps) => {
+  ({ serviceAccount, onRoleChange, roleOptions, builtInRoles, onSetToRemove }: ServiceAccountListItemProps) => {
     const editUrl = `org/serviceAccounts/${serviceAccount.id}`;
     const styles = useStyles2(getStyles);
     const canUpdateRole = contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsWrite, serviceAccount);
@@ -188,6 +226,19 @@ const ServiceAccountListItem = memo(
             {serviceAccount.tokens}
           </a>
         </td>
+        {contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsDelete, serviceAccount) && (
+          <td>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={() => {
+                onSetToRemove(serviceAccount);
+              }}
+              icon="times"
+              aria-label="Delete service account"
+            />
+          </td>
+        )}
       </tr>
     );
   }

public/app/features/serviceaccounts/state/actions.ts

@@ -6,6 +6,7 @@ import {
   serviceAccountLoaded,
   serviceAccountsLoaded,
   serviceAccountTokensLoaded,
+  serviceAccountToRemoveLoaded,
 } from './reducers';
 import { accessControlQueryParam } from 'app/core/utils/accessControl';
 import { fetchBuiltinRoles, fetchRoleOptions } from 'app/core/components/RolePicker/api';
@@ -25,6 +26,16 @@ export function fetchACOptions(): ThunkResult<void> {
   };
 }
 
+export function setServiceAccountToRemove(serviceAccount: ServiceAccountDTO | null): ThunkResult<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(serviceAccountToRemoveLoaded(serviceAccount));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}
+
 export function loadServiceAccount(saID: number): ThunkResult<void> {
   return async (dispatch) => {
     try {

public/app/features/serviceaccounts/state/reducers.ts

@@ -9,6 +9,7 @@ export const initialState: ServiceAccountsState = {
   isLoading: true,
   builtInRoles: {},
   roleOptions: [],
+  serviceAccountToRemove: null,
 };
 
 export const initialStateProfile: ServiceAccountProfileState = {
@@ -50,6 +51,9 @@ const serviceAccountsSlice = createSlice({
     builtInRolesLoaded: (state, action: PayloadAction<Record<string, Role[]>>): ServiceAccountsState => {
       return { ...state, builtInRoles: action.payload };
     },
+    serviceAccountToRemoveLoaded: (state, action: PayloadAction<ServiceAccountDTO | null>): ServiceAccountsState => {
+      return { ...state, serviceAccountToRemove: action.payload };
+    },
   },
 });
 
@@ -59,6 +63,7 @@ export const {
   serviceAccountsLoaded,
   acOptionsLoaded,
   builtInRolesLoaded,
+  serviceAccountToRemoveLoaded,
 } = serviceAccountsSlice.actions;
 
 export const { serviceAccountLoaded, serviceAccountTokensLoaded } = serviceAccountProfileSlice.actions;

public/app/types/serviceaccount.ts

@@ -46,5 +46,6 @@ export interface ServiceAccountsState {
   searchPage: number;
   isLoading: boolean;
   roleOptions: Role[];
+  serviceAccountToRemove: ServiceAccountDTO | null;
   builtInRoles: Record<string, Role[]>;
 }