Make api name editable and add expiry (#6473)

Fixes #6302

---------

Co-authored-by: martmull <martmull@hotmail.fr>

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { DateTime } from 'luxon';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { H2Title, IconRepeat, IconSettings, IconTrash } from 'twenty-ui';
@@ -13,8 +13,7 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
-import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
-import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
+import { ApiKeyNameInput } from '@/settings/developers/components/ApiKeyNameInput';
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { computeNewExpirationDate } from '@/settings/developers/utils/compute-new-expiration-date';
 import { formatExpiration } from '@/settings/developers/utils/format-expiration';
@@ -25,7 +24,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
-import { isDefined } from '~/utils/isDefined';
+import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
 
 const StyledInfo = styled.span`
   color: ${({ theme }) => theme.font.color.light};
@@ -49,10 +48,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
   const navigate = useNavigate();
   const { apiKeyId = '' } = useParams();
 
-  const setGeneratedApi = useGeneratedApiKeys();
-  const [generatedApiKey] = useRecoilState(
-    generatedApiKeyFamilyState(apiKeyId),
-  );
+  const [apiKeyToken, setApiKeyToken] = useRecoilState(apiKeyTokenState);
   const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
   const { createOneRecord: createOneApiKey } = useCreateOneRecord<ApiKey>({
     objectNameSingular: CoreObjectNameSingular.ApiKey,
@@ -61,9 +57,14 @@ export const SettingsDevelopersApiKeyDetail = () => {
     objectNameSingular: CoreObjectNameSingular.ApiKey,
   });
 
-  const { record: apiKeyData } = useFindOneRecord({
+  const [apiKeyName, setApiKeyName] = useState('');
+
+  const { record: apiKeyData, loading } = useFindOneRecord({
     objectNameSingular: CoreObjectNameSingular.ApiKey,
     objectRecordId: apiKeyId,
+    onCompleted: (record) => {
+      setApiKeyName(record.name);
+    },
   });
 
   const deleteIntegration = async (redirect = true) => {
@@ -111,20 +112,12 @@ export const SettingsDevelopersApiKeyDetail = () => {
       await deleteIntegration(false);
 
       if (isNonEmptyString(apiKey?.token)) {
-        setGeneratedApi(apiKey.id, apiKey.token);
+        setApiKeyToken(apiKey.token);
         navigate(`/settings/developers/api-keys/${apiKey.id}`);
       }
     }
   };
 
-  useEffect(() => {
-    if (isDefined(apiKeyData)) {
-      return () => {
-        setGeneratedApi(apiKeyId, null);
-      };
-    }
-  });
-
   return (
     <>
       {apiKeyData?.name && (
@@ -134,18 +127,18 @@ export const SettingsDevelopersApiKeyDetail = () => {
               <Breadcrumb
                 links={[
                   { children: 'Developers', href: '/settings/developers' },
-                  { children: `${apiKeyData.name} API Key` },
+                  { children: `${apiKeyName} API Key` },
                 ]}
               />
             </SettingsHeaderContainer>
             <Section>
-              {generatedApiKey ? (
+              {apiKeyToken ? (
                 <>
                   <H2Title
                     title="Api Key"
                     description="Copy this key as it will only be visible this one time"
                   />
-                  <ApiKeyInput apiKey={generatedApiKey} />
+                  <ApiKeyInput apiKey={apiKeyToken} />
                   <StyledInfo>
                     {formatExpiration(apiKeyData?.expiresAt || '', true, false)}
                   </StyledInfo>
@@ -175,9 +168,25 @@ export const SettingsDevelopersApiKeyDetail = () => {
             </Section>
             <Section>
               <H2Title title="Name" description="Name of your API key" />
+              <ApiKeyNameInput
+                apiKeyName={apiKeyName}
+                apiKeyId={apiKeyData?.id}
+                disabled={loading}
+                onNameUpdate={setApiKeyName}
+              />
+            </Section>
+            <Section>
+              <H2Title
+                title="Expiration"
+                description="When the key will be diasbled"
+              />
               <TextInput
                 placeholder="E.g. backoffice integration"
-                value={apiKeyData.name}
+                value={formatExpiration(
+                  apiKeyData?.expiresAt || '',
+                  true,
+                  false,
+                )}
                 disabled
                 fullWidth
               />

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx

@@ -9,7 +9,6 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { EXPIRATION_DATES } from '@/settings/developers/constants/ExpirationDates';
-import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -19,11 +18,13 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { Key } from 'ts-key-enum';
+import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
+import { useSetRecoilState } from 'recoil';
 
 export const SettingsDevelopersApiKeysNew = () => {
   const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
   const navigate = useNavigate();
-  const setGeneratedApi = useGeneratedApiKeys();
+  const setApiKeyToken = useSetRecoilState(apiKeyTokenState);
   const [formValues, setFormValues] = useState<{
     name: string;
     expirationDate: number | null;
@@ -57,7 +58,7 @@ export const SettingsDevelopersApiKeysNew = () => {
       },
     });
     if (isDefined(tokenData.data?.generateApiKeyToken)) {
-      setGeneratedApi(newApiKey.id, tokenData.data.generateApiKeyToken.token);
+      setApiKeyToken(tokenData.data.generateApiKeyToken.token);
       navigate(`/settings/developers/api-keys/${newApiKey.id}`);
     }
   };