From 3f83130fb00e09878228483131187df9d61e117f Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Wed, 28 Feb 2024 18:07:38 +0100
Subject: [PATCH] feat: Add has expired column in the api keys table (#3433)

---
 frontend/web/components/AdminAPIKeys.js | 27 ++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/web/components/AdminAPIKeys.js b/frontend/web/components/AdminAPIKeys.js
index 4116c0defe2b..88b6c7a69ec6 100644
--- a/frontend/web/components/AdminAPIKeys.js
+++ b/frontend/web/components/AdminAPIKeys.js
@@ -89,14 +89,16 @@ export class CreateAPIKey extends PureComponent {
       org_id: AccountStore.getOrganisation().id,
       prefix: prefix,
     }).then((res) => {
+      this.setState({
+        expiry_date: res.data.expiry_date,
+        is_admin: res.data.is_admin,
+        name: res.data.name,
+      })
       getRolesMasterAPIKeyWithMasterAPIKeyRoles(getStore(), {
         org_id: AccountStore.getOrganisation().id,
         prefix: prefix,
       }).then((rolesData) => {
         this.setState({
-          expiry_date: res.data.expiry_date,
-          is_admin: res.data.is_admin,
-          name: res.data.name,
           roles: rolesData.data.results,
         })
       })
@@ -401,6 +403,7 @@ export default class AdminAPIKeys extends PureComponent {
 
   render() {
     const apiKeys = this.state.apiKeys && this.state.apiKeys.results
+    console.log('DEBUG: apiKeys:', apiKeys)
     const showRoleManagementEnabled = Utils.getFlagsmithHasFeature(
       'show_role_management',
     )
@@ -451,6 +454,7 @@ export default class AdminAPIKeys extends PureComponent {
                 <Flex className='table-column px-3'>API Keys</Flex>
                 <Flex className='table-column'>Created</Flex>
                 <Flex className='table-column'>Is Admin</Flex>
+                <Flex className='table-column'>Active</Flex>
                 <div
                   className='table-column text-center'
                   style={{ width: '80px' }}
@@ -481,6 +485,23 @@ export default class AdminAPIKeys extends PureComponent {
                   <Flex className='table-column fs-small lh-sm'>
                     <Switch checked={v.is_admin} disabled={true} />
                   </Flex>
+                  <Flex className='table-column fs-small lh-sm'>
+                    {v.has_expired ? (
+                      <div className='ml-1'>
+                        <Tooltip title={<Icon name='close-circle' />}>
+                          {'This API key has expired'}
+                        </Tooltip>
+                      </div>
+                    ) : (
+                      <span className='ml-1'>
+                        <Icon
+                          name='checkmark-circle'
+                          fill='#27AB95'
+                          width={28}
+                        />
+                      </span>
+                    )}
+                  </Flex>
                   <div
                     className='table-column  text-center'
                     style={{ width: '80px' }}