Service accounts: Fix service account role picker on reload of profile page (#65911)

* working but unsure if best strategy

* removal of roleoptions to pass into the profile component

* remove the dispatch of ac

* added comment

* added one more comment tro trigger pipeline

public/app/features/serviceaccounts/ServiceAccountPage.test.tsx

@@ -30,7 +30,6 @@ const setup = (propOverrides: Partial<Props>) => {
     serviceAccount: {} as ServiceAccountDTO,
     tokens: [],
     isLoading: false,
-    roleOptions: [],
     match: {
       params: { id: '1' },
       isExact: true,

public/app/features/serviceaccounts/ServiceAccountPage.tsx

@@ -6,7 +6,7 @@ import { Button, ConfirmModal, HorizontalGroup } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { AccessControlAction, ApiKey, Role, ServiceAccountDTO, StoreState } from 'app/types';
+import { AccessControlAction, ApiKey, ServiceAccountDTO, StoreState } from 'app/types';
 
 import { ServiceAccountPermissions } from './ServiceAccountPermissions';
 import { CreateTokenModal, ServiceAccountToken } from './components/CreateTokenModal';
@@ -26,7 +26,6 @@ interface OwnProps extends GrafanaRouteComponentProps<{ id: string }> {
   serviceAccount?: ServiceAccountDTO;
   tokens: ApiKey[];
   isLoading: boolean;
-  roleOptions: Role[];
 }
 
 function mapStateToProps(state: StoreState) {
@@ -34,7 +33,6 @@ function mapStateToProps(state: StoreState) {
     serviceAccount: state.serviceAccountProfile.serviceAccount,
     tokens: state.serviceAccountProfile.tokens,
     isLoading: state.serviceAccountProfile.isLoading,
-    roleOptions: state.serviceAccounts.roleOptions,
     timezone: getTimeZone(state.user),
   };
 }
@@ -58,7 +56,6 @@ export const ServiceAccountPageUnconnected = ({
   tokens,
   timezone,
   isLoading,
-  roleOptions,
   createServiceAccountToken,
   deleteServiceAccount,
   deleteServiceAccountToken,
@@ -171,12 +168,7 @@ export const ServiceAccountPageUnconnected = ({
             </HorizontalGroup>
           )}
           {serviceAccount && (
-            <ServiceAccountProfile
-              serviceAccount={serviceAccount}
-              timeZone={timezone}
-              roleOptions={roleOptions}
-              onChange={onProfileChange}
-            />
+            <ServiceAccountProfile serviceAccount={serviceAccount} timeZone={timezone} onChange={onProfileChange} />
           )}
           <HorizontalGroup justify="space-between" height="auto">
             <h3>Tokens</h3>

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

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2, OrgRole, TimeZone } from '@grafana/data';
 import { 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';
 
@@ -12,13 +13,13 @@ import { ServiceAccountRoleRow } from './ServiceAccountRoleRow';
 interface Props {
   serviceAccount: ServiceAccountDTO;
   timeZone: TimeZone;
-  roleOptions: Role[];
   onChange: (serviceAccount: ServiceAccountDTO) => void;
 }
 
-export function ServiceAccountProfile({ serviceAccount, timeZone, roleOptions, onChange }: Props): JSX.Element {
+export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Props): JSX.Element {
   const styles = useStyles2(getStyles);
   const ableToWrite = contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite);
+  const [roles, setRoles] = React.useState<Role[]>([]);
 
   const onRoleChange = (role: OrgRole) => {
     onChange({ ...serviceAccount, role: role });
@@ -27,6 +28,22 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, roleOptions, o
   const onNameChange = (newValue: string) => {
     onChange({ ...serviceAccount, name: newValue });
   };
+  // TODO: this is a temporary solution to fetch roles for service accounts
+  // until we make use of the state from the serviceaccountspage
+  // and pass it down to the serviceaccountprofile
+  React.useEffect(() => {
+    if (contextSrv.licensedAccessControlEnabled()) {
+      if (contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
+        fetchRoleOptions(serviceAccount.orgId)
+          .then((roles) => {
+            setRoles(roles);
+          })
+          .catch((err) => {
+            console.log('fetchRoleOptions error: ', err);
+          });
+      }
+    }
+  }, [serviceAccount.orgId]);
 
   return (
     <div className={styles.section}>
@@ -44,7 +61,7 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, roleOptions, o
             label="Roles"
             serviceAccount={serviceAccount}
             onRoleChange={onRoleChange}
-            roleOptions={roleOptions}
+            roleOptions={roles}
           />
           <ServiceAccountProfileRow
             label="Creation date"