IAM: Protect managed service account frontend details page (#77839)

* Add `isManaged` property to frontend model

* Remove enabled and token buttons for managed SA

* Replace trash icon for lock icon for managed SA

* Block the role picker for managed SA

* Filter SA list usiong the managed filter

* Rename external for managed

* Add only managed filter

* Toggle the enable buttons for managed sa

* Disable add token and delete token buttons

* Remove the edit name button

* Disable the Role picker for managed sa

* Hide the permissions section

* Add managed by row

---------

Co-authored-by: Gabriel MABILLE <gamab@users.noreply.github.com>
Co-authored-by: Sofia Papagiannaki <1632407+papagian@users.noreply.github.com>

pkg/services/serviceaccounts/models.go

@@ -158,6 +158,8 @@ type ServiceAccountProfileDTO struct {
 	Teams []string `json:"teams" xorm:"-"`
 	// example: false
 	IsExternal bool `json:"isExternal,omitempty" xorm:"-"`
+	// example: grafana-app
+	RequiredBy string `json:"requiredBy,omitempty" xorm:"-"`
 
 	Tokens        int64           `json:"tokens,omitempty"`
 	AccessControl map[string]bool `json:"accessControl,omitempty" xorm:"-"`

pkg/services/serviceaccounts/proxy/service.go

@@ -139,6 +139,7 @@ func (s *ServiceAccountsProxy) RetrieveServiceAccount(ctx context.Context, orgID
 
 	if s.isProxyEnabled {
 		sa.IsExternal = isExternalServiceAccount(sa.Login)
+		sa.RequiredBy = strings.ReplaceAll(sa.Name, serviceaccounts.ExtSvcPrefix, "")
 	}
 
 	return sa, nil

public/api-enterprise-spec.json

@@ -6771,6 +6771,10 @@
           "type": "boolean",
           "example": false
         },
+        "requiredBy": {
+          "type": "string",
+          "example": "grafana-app"
+        },
         "login": {
           "type": "string",
           "example": "sa-grafana"
@@ -6826,6 +6830,10 @@
           "type": "boolean",
           "example": false
         },
+        "requiredBy": {
+          "type": "string",
+          "example": "grafana-app"
+        },
         "login": {
           "type": "string",
           "example": "sa-grafana"

public/api-merged.json

@@ -18724,6 +18724,10 @@
           "format": "int64",
           "example": 1
         },
+        "requiredBy": {
+          "type": "string",
+          "example": "grafana-app"
+        },
         "role": {
           "type": "string",
           "example": "Editor"

public/app/features/serviceaccounts/ServiceAccountPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { getTimeZone, NavModelItem } from '@grafana/data';
-import { Button, ConfirmModal, HorizontalGroup } from '@grafana/ui';
+import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -70,7 +70,9 @@ export const ServiceAccountPageUnconnected = ({
 
   const serviceAccountId = parseInt(match.params.id, 10);
   const tokenActionsDisabled =
-    !contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite) || serviceAccount.isDisabled;
+    serviceAccount.isDisabled ||
+    serviceAccount.isExternal ||
+    !contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite);
 
   const ableToWrite = contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite);
   const canReadPermissions = contextSrv.hasPermissionInMetadata(
@@ -134,7 +136,7 @@ export const ServiceAccountPageUnconnected = ({
     <Page navId="serviceaccounts" pageNav={pageNav}>
       <Page.Contents isLoading={isLoading}>
         <div>
-          {serviceAccount && (
+          {serviceAccount && !serviceAccount.isExternal && (
             <HorizontalGroup spacing="md" height="auto" justify="flex-end">
               <Button
                 type={'button'}
@@ -165,14 +167,26 @@ export const ServiceAccountPageUnconnected = ({
               )}
             </HorizontalGroup>
           )}
+          {serviceAccount && serviceAccount.isExternal && (
+            <HorizontalGroup spacing="md" height="auto" justify="flex-end">
+              <IconButton
+                disabled={true}
+                name="lock"
+                size="md"
+                tooltip={`This is a managed service account and cannot be modified.`}
+              />
+            </HorizontalGroup>
+          )}
           {serviceAccount && (
             <ServiceAccountProfile serviceAccount={serviceAccount} timeZone={timezone} onChange={onProfileChange} />
           )}
           <HorizontalGroup justify="space-between" height="auto">
             <h3>Tokens</h3>
+            {!serviceAccount.isExternal && (
               <Button onClick={() => setIsTokenModalOpen(true)} disabled={tokenActionsDisabled}>
                 Add service account token
               </Button>
+            )}
           </HorizontalGroup>
           {tokens && (
             <ServiceAccountTokensTable
@@ -182,7 +196,9 @@ export const ServiceAccountPageUnconnected = ({
               tokenActionsDisabled={tokenActionsDisabled}
             />
           )}
-          {canReadPermissions && <ServiceAccountPermissions serviceAccount={serviceAccount} />}
+          {!serviceAccount.isExternal && canReadPermissions && (
+            <ServiceAccountPermissions serviceAccount={serviceAccount} />
+          )}
         </div>
 
         <ConfirmModal

public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2, OrgRole, TimeZone } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Label, TextLink, useStyles2 } from '@grafana/ui';
 import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, Role, ServiceAccountDTO } from 'app/types';
@@ -53,7 +53,7 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Pr
           <ServiceAccountProfileRow
             label="Name"
             value={serviceAccount.name}
-            onChange={onNameChange}
+            onChange={!serviceAccount.isExternal ? onNameChange : undefined}
             disabled={!ableToWrite || serviceAccount.isDisabled}
           />
           <ServiceAccountProfileRow label="ID" value={serviceAccount.login} disabled={serviceAccount.isDisabled} />
@@ -68,6 +68,16 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Pr
             value={dateTimeFormat(serviceAccount.createdAt, { timeZone })}
             disabled={serviceAccount.isDisabled}
           />
+          {serviceAccount.isExternal && serviceAccount.requiredBy && (
+            <tr>
+              <td>
+                <Label>Used by</Label>
+              </td>
+              <td>
+                <TextLink href={`/plugins/${serviceAccount.requiredBy}`}>{serviceAccount.requiredBy}</TextLink>
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
     </div>

public/app/features/serviceaccounts/components/ServiceAccountRoleRow.tsx

@@ -42,7 +42,7 @@ export const ServiceAccountRoleRow = ({ label, serviceAccount, roleOptions, onRo
               inputId={inputId}
               aria-label="Role"
               value={serviceAccount.role}
-              disabled={serviceAccount.isDisabled}
+              disabled={serviceAccount.isExternal || serviceAccount.isDisabled}
               onChange={onRoleChange}
             />
           </td>

public/app/types/serviceaccount.ts

@@ -35,6 +35,7 @@ export interface ServiceAccountDTO extends WithAccessControlMetadata {
   createdAt: string;
   isDisabled: boolean;
   isExternal?: boolean;
+  requiredBy?: string;
   teams: string[];
   role: OrgRole;
   roles?: Role[];

public/openapi3.json

@@ -9626,6 +9626,10 @@
             "format": "int64",
             "type": "integer"
           },
+          "requiredBy": {
+            "example": "grafana-app",
+            "type": "string"
+          },
           "role": {
             "example": "Editor",
             "type": "string"