Service accounts: UI polish improvements (#47461)

* ui polishes

* change icon

pkg/api/index.go

@@ -307,7 +307,7 @@ func (hs *HTTPServer) getNavTree(c *models.ReqContext, hasEditPerm bool) ([]*dto
 			Id:          "serviceaccounts",
 			Description: "Manage service accounts",
 			// TODO: change icon to "key-skeleton-alt" when it's available
-			Icon: "key-skeleton-alt",
+			Icon: "keyhole-circle",
 			Url:  hs.Cfg.AppSubURL + "/org/serviceaccounts",
 		})
 	}

public/app/features/serviceaccounts/CreateServiceAccountTokenModal.tsx

@@ -64,8 +64,11 @@ export const CreateTokenModal = ({ isOpen, token, onCreateToken, onClose }: Crea
           <FieldSet>
             <Field
               label="Display name"
-              description="Optional name to easily identify the token"
+              description="name to easily identify the token"
               className={styles.modalRow}
+              // for now this is required
+              // need to make this optional in backend as well
+              required={true}
             >
               <Input
                 name="tokenName"

public/app/features/serviceaccounts/ServiceAccountPage.tsx

@@ -17,7 +17,7 @@ import {
 import { ServiceAccountTokensTable } from './ServiceAccountTokensTable';
 import { getTimeZone, NavModel } from '@grafana/data';
 import { Button } from '@grafana/ui';
-import { CreateTokenModal } from './CreateTokenModal';
+import { CreateTokenModal } from './CreateServiceAccountTokenModal';
 import { contextSrv } from 'app/core/core';
 
 interface OwnProps extends GrafanaRouteComponentProps<{ id: string }> {

public/app/features/serviceaccounts/ServiceAccountProfile.tsx

@@ -66,10 +66,18 @@ export function ServiceAccountProfile({
 
   return (
     <>
-      <h3 className="page-heading">Information</h3>
+      <div style={{ marginBottom: '10px' }}>
-      <a href="org/serviceaccounts">
+        <a href="org/serviceaccounts" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-        <Button variant="link" icon="backward" />
+          <Button variant="link" icon="backward" />
-      </a>
+        </a>
+        <h1
+          className="page-heading"
+          style={{ display: 'inline-block', verticalAlign: 'middle', margin: '0!important', marginBottom: '0px' }}
+        >
+          {serviceAccount.name}
+        </h1>
+      </div>
+      <span style={{ marginBottom: '10px' }}>Information</span>
       <div className="gf-form-group">
         <div className="gf-form">
           <table className="filter-table form-inline">

public/app/features/serviceaccounts/ServiceAccountsListPage.tsx

@@ -78,6 +78,7 @@ const ServiceAccountsListPage = ({
   return (
     <Page navModel={navModel}>
       <Page.Contents>
+        <h2>Service accounts</h2>
         <div className="page-action-bar" style={{ justifyContent: 'flex-end' }}>
           <FilterInput
             placeholder="Search service account by name."
@@ -123,7 +124,7 @@ const ServiceAccountsListPage = ({
                 <thead>
                   <tr>
                     <th></th>
-                    <th>Display name</th>
+                    <th>Account</th>
                     <th>ID</th>
                     <th>Roles</th>
                     <th>Status</th>