From 4d8817698afffe03223360c30280f1f1017297a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 30 Nov 2022 06:07:13 +0000
Subject: [PATCH] feat: add last seen column to token table (#2520)

https://linear.app/unleash/issue/2-449/add-table-column-to-api-tokens-table-ui
---
 .../admin/apiToken/ApiTokenTable/ApiTokenTable.tsx | 14 ++++++++++++++
 src/lib/db/api-token-store.ts                      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
index 811b3316c8..cfaabc6533 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
@@ -26,9 +26,11 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { Search } from 'component/common/Search/Search';
 import useHiddenColumns from 'hooks/useHiddenColumns';
+import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
 
 const hiddenColumnsSmall = ['Icon', 'createdAt'];
 const hiddenColumnsFlagE = ['projects', 'environment'];
+const hiddenColumnsFlagTokensLastSeen = ['seenAt'];
 
 export const ApiTokenTable = () => {
     const { tokens, loading } = useApiTokens();
@@ -59,6 +61,11 @@ export const ApiTokenTable = () => {
 
     useHiddenColumns(setHiddenColumns, hiddenColumnsSmall, isSmallScreen);
     useHiddenColumns(setHiddenColumns, hiddenColumnsFlagE, !uiConfig.flags.E);
+    useHiddenColumns(
+        setHiddenColumns,
+        hiddenColumnsFlagTokensLastSeen,
+        !uiConfig.flags.tokensLastSeen
+    );
 
     return (
         <PageContent
@@ -206,6 +213,13 @@ const COLUMNS = [
         minWidth: 150,
         disableGlobalFilter: true,
     },
+    {
+        Header: 'Last seen',
+        accessor: 'seenAt',
+        Cell: TimeAgoCell,
+        minWidth: 150,
+        disableGlobalFilter: true,
+    },
     {
         Header: 'Actions',
         id: 'Actions',
diff --git a/src/lib/db/api-token-store.ts b/src/lib/db/api-token-store.ts
index 30ff042604..e3c925f3c6 100644
--- a/src/lib/db/api-token-store.ts
+++ b/src/lib/db/api-token-store.ts
@@ -46,6 +46,7 @@ const tokenRowReducer = (acc, tokenRow) => {
             expiresAt: token.expires_at,
             createdAt: token.created_at,
             alias: token.alias,
+            seenAt: token.seen_at,
         };
     }
     const currentToken = acc[tokenRow.secret];