Configuration: You can now see your expired API keys if you have no active ones (#42452)

* Configuration: Always display expired API keys

* Use exclamation-triangle instead

* Reintroduce toggle, move logic into store and call both endpoints

* Handle apiKeys without TTL

* Remove backend changes and make checks in frontend instead

public/app/features/api-keys/ApiKeysTable.tsx

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
-import { DeleteButton } from '@grafana/ui';
-import { dateTimeFormat, TimeZone } from '@grafana/data';
+import { DeleteButton, Icon, IconName, Tooltip, useTheme2 } from '@grafana/ui';
+import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
 
 import { ApiKey } from '../../types';
+import { css } from '@emotion/css';
 
 interface Props {
   apiKeys: ApiKey[];
@@ -11,6 +12,9 @@ interface Props {
 }
 
 export const ApiKeysTable: FC<Props> = ({ apiKeys, timeZone, onDelete }) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+
   return (
     <table className="filter-table">
       <thead>
@@ -24,11 +28,21 @@ export const ApiKeysTable: FC<Props> = ({ apiKeys, timeZone, onDelete }) => {
       {apiKeys.length > 0 ? (
         <tbody>
           {apiKeys.map((key) => {
+            const isExpired = Boolean(key.expiration && Date.now() > new Date(key.expiration).getTime());
             return (
-              <tr key={key.id}>
+              <tr key={key.id} className={styles.tableRow(isExpired)}>
                 <td>{key.name}</td>
                 <td>{key.role}</td>
-                <td>{formatDate(key.expiration, timeZone)}</td>
+                <td>
+                  {formatDate(key.expiration, timeZone)}
+                  {isExpired && (
+                    <span className={styles.tooltipContainer}>
+                      <Tooltip content="This API key has expired.">
+                        <Icon name={'exclamation-triangle' as IconName} />
+                      </Tooltip>
+                    </span>
+                  )}
+                </td>
                 <td>
                   <DeleteButton aria-label="Delete API key" size="sm" onConfirm={() => onDelete(key)} />
                 </td>
@@ -47,3 +61,12 @@ function formatDate(expiration: string | undefined, timeZone: TimeZone): string
   }
   return dateTimeFormat(expiration, { timeZone });
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  tableRow: (isExpired: boolean) => css`
+    color: ${isExpired ? theme.colors.text.secondary : theme.colors.text.primary};
+  `,
+  tooltipContainer: css`
+    margin-left: ${theme.spacing(1)};
+  `,
+});