Service Accounts: small typo and dto fixes (#45677)

* ServiceAccounts: respect js casing and small fixes to displayed values

* ServiceAccounts: fix typos on service account

* ServiceAccounts: fix missing orgID in service account

* ServiceAccounts: Small fixes to dtos for profile

* ServiceAccounts: use result org id

* ServiceAccounts: return value is always nil

public/app/features/serviceaccounts/ServiceAccountPage.tsx

@@ -89,7 +89,8 @@ const ServiceAccountPageUnconnected = ({
         {serviceAccount && (
           <>
             <ServiceAccountProfile
-              serviceaccount={serviceAccount}
+              serviceAccount={serviceAccount}
+              timeZone={timezone}
               onServiceAccountDelete={() => {
                 console.log(`not implemented`);
               }}

public/app/features/serviceaccounts/ServiceAccountProfile.tsx

@@ -2,20 +2,22 @@ import React, { PureComponent, useRef, useState } from 'react';
 import { ServiceAccountDTO } from 'app/types';
 import { css, cx } from '@emotion/css';
 import { config } from 'app/core/config';
-import { GrafanaTheme } from '@grafana/data';
+import { dateTimeFormat, GrafanaTheme, TimeZone } from '@grafana/data';
 import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus, stylesFactory } from '@grafana/ui';
 
 interface Props {
-  serviceaccount: ServiceAccountDTO;
+  serviceAccount: ServiceAccountDTO;
+  timeZone: TimeZone;
 
-  onServiceAccountUpdate: (serviceaccount: ServiceAccountDTO) => void;
-  onServiceAccountDelete: (serviceaccountId: number) => void;
-  onServiceAccountDisable: (serviceaccountId: number) => void;
-  onServiceAccountEnable: (serviceaccountId: number) => void;
+  onServiceAccountUpdate: (serviceAccount: ServiceAccountDTO) => void;
+  onServiceAccountDelete: (serviceAccountId: number) => void;
+  onServiceAccountDisable: (serviceAccountId: number) => void;
+  onServiceAccountEnable: (serviceAccountId: number) => void;
 }
 
 export function ServiceAccountProfile({
-  serviceaccount,
+  serviceAccount,
+  timeZone,
   onServiceAccountUpdate,
   onServiceAccountDelete,
   onServiceAccountDisable,
@@ -40,15 +42,15 @@ export function ServiceAccountProfile({
     }
   };
 
-  const handleServiceAccountDelete = () => onServiceAccountDelete(serviceaccount.id);
+  const handleServiceAccountDelete = () => onServiceAccountDelete(serviceAccount.id);
 
-  const handleServiceAccountDisable = () => onServiceAccountDisable(serviceaccount.id);
+  const handleServiceAccountDisable = () => onServiceAccountDisable(serviceAccount.id);
 
-  const handleServiceAccountEnable = () => onServiceAccountEnable(serviceaccount.id);
+  const handleServiceAccountEnable = () => onServiceAccountEnable(serviceAccount.id);
 
   const onServiceAccountNameChange = (newValue: string) => {
     onServiceAccountUpdate({
-      ...serviceaccount,
+      ...serviceAccount,
       name: newValue,
     });
   };
@@ -67,14 +69,17 @@ export function ServiceAccountProfile({
             <tbody>
               <ServiceAccountProfileRow
                 label="Display Name"
-                value={serviceaccount.name}
+                value={serviceAccount.name}
                 onChange={onServiceAccountNameChange}
               />
-              <ServiceAccountProfileRow label="ID" value={serviceaccount.login} />
+              <ServiceAccountProfileRow label="ID" value={serviceAccount.login} />
               <ServiceAccountProfileRow label="Roles" value="WIP" />
               <ServiceAccountProfileRow label="Teams" value="WIP" />
               <ServiceAccountProfileRow label="Created by" value="WIP" />
-              <ServiceAccountProfileRow label="Creation date" value="WIP" />
+              <ServiceAccountProfileRow
+                label="Creation date"
+                value={dateTimeFormat(serviceAccount.createdAt, { timeZone })}
+              />
             </tbody>
           </table>
         </div>
@@ -86,28 +91,32 @@ export function ServiceAccountProfile({
             <ConfirmModal
               isOpen={showDeleteModal}
               title="Delete serviceaccount"
-              body="Are you sure you want to delete this serviceaccount?"
-              confirmText="Delete serviceaccount"
+              body="Are you sure you want to delete this service account?"
+              confirmText="Delete service account"
               onConfirm={handleServiceAccountDelete}
               onDismiss={showDeleteServiceAccountModal(false)}
             />
           </>
-          <Button variant="secondary" onClick={handleServiceAccountEnable}>
-            Enable service account
-          </Button>
-          <>
-            <Button variant="secondary" onClick={showDisableServiceAccountModal(true)} ref={disableServiceAccountRef}>
-              Disable service account
+          {serviceAccount.isDisabled && (
+            <Button variant="secondary" onClick={handleServiceAccountEnable}>
+              Enable service account
             </Button>
-            <ConfirmModal
-              isOpen={showDisableModal}
-              title="Disable serviceaccount"
-              body="Are you sure you want to disable this serviceaccount?"
-              confirmText="Disable serviceaccount"
-              onConfirm={handleServiceAccountDisable}
-              onDismiss={showDisableServiceAccountModal(false)}
-            />
-          </>
+          )}
+          {!serviceAccount.isDisabled && (
+            <>
+              <Button variant="secondary" onClick={showDisableServiceAccountModal(true)} ref={disableServiceAccountRef}>
+                Disable service account
+              </Button>
+              <ConfirmModal
+                isOpen={showDisableModal}
+                title="Disable service account"
+                body="Are you sure you want to disable this service account?"
+                confirmText="Disable service account"
+                onConfirm={handleServiceAccountDisable}
+                onDismiss={showDisableServiceAccountModal(false)}
+              />
+            </>
+          )}
         </div>
       </div>
     </>
@@ -225,14 +234,16 @@ export class ServiceAccountProfileRow extends PureComponent<
           )}
         </td>
         <td>
-          <ConfirmButton
-            confirmText="Save"
-            onClick={this.onEditClick}
-            onConfirm={this.onSave}
-            onCancel={this.onCancelClick}
-          >
-            Edit
-          </ConfirmButton>
+          {this.props.onChange && (
+            <ConfirmButton
+              confirmText="Save"
+              onClick={this.onEditClick}
+              onConfirm={this.onSave}
+              onCancel={this.onCancelClick}
+            >
+              Edit
+            </ConfirmButton>
+          )}
         </td>
       </tr>
     );

public/app/types/serviceaccount.ts

@@ -31,6 +31,8 @@ export interface ServiceAccountDTO extends WithAccessControlMetadata {
   name: string;
   login: string;
   avatarUrl?: string;
+  createdAt: string;
+  isDisabled: boolean;
   role: OrgRole;
 }