feat: add last seen column to PAT table (#2519)

https://linear.app/unleash/issue/2-452/add-table-column-to-pats-table-ui
Unleash · Nov 29, 2022 · 348bbfe · 348bbfe
1 parent 564c287
commit 348bbfe
Showing 1 changed file with 19 additions and 1 deletion.
diff --git 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,14 +208,22 @@ export const PersonalAPITokensTab = ({ user }: IPersonalAPITokensTabProps) => {
 
     useEffect(() => {
         const hiddenColumns = [];
+        if (!uiConfig.flags.tokensLastSeen) {
+            hiddenColumns.push('seenAt');
+        }
         if (isSmallScreen) {
             hiddenColumns.push('createdAt');
         }
         if (isExtraSmallScreen) {
             hiddenColumns.push('expiresAt');
         }
         setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isExtraSmallScreen]);
+    }, [
+        setHiddenColumns,
+        isSmallScreen,
+        isExtraSmallScreen,
+        uiConfig.flags.tokensLastSeen,
+    ]);
 
     useEffect(() => {
         const tableState: PageQueryType = {};