Update ModelApiKeysCard.tsx

Author: TheSonOfThomp

packages/wizard/src/demo/RequiredActionCards/ModelApiKeysCard.tsx

@@ -1,21 +1,72 @@
 import React from 'react';
+import { format } from 'date-fns';
 
-import { useLeafyGreenTable } from '@leafygreen-ui/table';
+import {
+  CellContext,
+  LGColumnDef,
+  LGTableDataType,
+  useLeafyGreenTable,
+} from '@leafygreen-ui/table';
 import { Description } from '@leafygreen-ui/typography';
 
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
 import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
 
-const modelApiKeysColumns = [
-  { accessorKey: 'name', header: 'Key Name' },
-  { accessorKey: 'created', header: 'Created' },
+const DateCell = (
+  cellData: CellContext<
+    LGTableDataType<ModelAPIKeyTableData>,
+    Date | undefined
+  >,
+) => {
+  const val = cellData.getValue() as Date | undefined;
+
+  if (!val) return <>Never</>;
+
+  return <>{format(val, 'yyyy-MM-dd')}</>;
+};
+
+interface ModelAPIKeyTableData {
+  keyName: string;
+  createdDate: Date;
+  lastUsedDate?: Date;
+  createdBy: string;
+}
+
+const modelApiKeysColumns: Array<LGColumnDef<ModelAPIKeyTableData>> = [
+  { accessorKey: 'keyName', header: 'Key Name' },
+  { accessorKey: 'key', header: 'Secret key', cell: () => <>********</> },
+  {
+    accessorKey: 'createdDate',
+    header: 'Created on (UTC)',
+    cell: DateCell,
+  },
+  {
+    accessorKey: 'lastUsedDate',
+    header: 'Last used (UTC)',
+    cell: DateCell,
+  },
+  { accessorKey: 'createdBy', header: 'Created by' },
 ];
 
-const demoModelApiKeysData = [
-  { name: 'api-key-1', created: '01/15/2025' },
-  { name: 'api-key-2', created: '01/20/2025' },
-  { name: 'api-key-3', created: '01/22/2025' },
+const demoModelApiKeysData: Array<LGTableDataType<ModelAPIKeyTableData>> = [
+  {
+    keyName: 'voyage-api-key-1',
+    createdDate: new Date('2019-04-22'),
+    lastUsedDate: new Date(),
+    createdBy: 'Mike Waltzer',
+  },
+  {
+    keyName: 'voyage-api-key-2',
+    createdDate: new Date('2022-08-29'),
+    lastUsedDate: new Date(),
+    createdBy: 'Lauren Fox',
+  },
+  {
+    keyName: 'voyage-api-key-3',
+    createdDate: new Date('2021-06-07'),
+    createdBy: 'Adam Thompson',
+  },
 ];
 
 export const ModelApiKeysCard = () => {
@@ -30,9 +81,11 @@ export const ModelApiKeysCard = () => {
 
   return (
     <RequiredActionCard
+      isLoading={isLoading}
+      loadingTitle="Checking for Model API keys"
       title={
         <>
-          Delete <TitleEm>3</TitleEm> Model API keys
+          Delete <TitleEm>{tableData?.length}</TitleEm> Model API keys
         </>
       }
       description={