From 348bbfeda34c29dcf46a31ed558609a4a52f1bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 29 Nov 2022 20:15:34 +0000
Subject: [PATCH] feat: add last seen column to PAT table (#2519)

https://linear.app/unleash/issue/2-452/add-table-column-to-pats-table-ui
---
 .../PersonalAPITokensTab.tsx                  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
index 83591d76b81..bd774c79009 100644
--- a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
+++ b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
@@ -35,6 +35,8 @@ import { sortTypes } from 'utils/sortTypes';
 import { CreatePersonalAPIToken } from './CreatePersonalAPIToken/CreatePersonalAPIToken';
 import { DeletePersonalAPIToken } from './DeletePersonalAPIToken/DeletePersonalAPIToken';
 import { PersonalAPITokenDialog } from './PersonalAPITokenDialog/PersonalAPITokenDialog';
+import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),
@@ -80,6 +82,7 @@ interface IPersonalAPITokensTabProps {
 }
 
 export const PersonalAPITokensTab = ({ user }: IPersonalAPITokensTabProps) => {
+    const { uiConfig } = useUiConfig();
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -135,6 +138,13 @@ export const PersonalAPITokensTab = ({ user }: IPersonalAPITokensTabProps) => {
                 sortType: 'date',
                 maxWidth: 150,
             },
+            {
+                Header: 'Last seen',
+                accessor: 'seenAt',
+                Cell: TimeAgoCell,
+                sortType: 'date',
+                maxWidth: 150,
+            },
             {
                 Header: 'Actions',
                 id: 'Actions',
@@ -198,6 +208,9 @@ export const PersonalAPITokensTab = ({ user }: IPersonalAPITokensTabProps) => {
 
     useEffect(() => {
         const hiddenColumns = [];
+        if (!uiConfig.flags.tokensLastSeen) {
+            hiddenColumns.push('seenAt');
+        }
         if (isSmallScreen) {
             hiddenColumns.push('createdAt');
         }
@@ -205,7 +218,12 @@ export const PersonalAPITokensTab = ({ user }: IPersonalAPITokensTabProps) => {
             hiddenColumns.push('expiresAt');
         }
         setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isExtraSmallScreen]);
+    }, [
+        setHiddenColumns,
+        isSmallScreen,
+        isExtraSmallScreen,
+        uiConfig.flags.tokensLastSeen,
+    ]);
 
     useEffect(() => {
         const tableState: PageQueryType = {};