admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix API key not displayed (#9766)

Browse Source 
Fixes #9761

Instead of cleaning RecoilState we should keep the api key visible as
long as the user didn't refresh/leave the app, it's better from a UX
perspective and the code is also more elegant, removing a useEffect


Note: the root cause of the bug was a missing "/settings" path in
isMatchingLocation in useCleaningRecoilState (due to the recent
refactoring) ; but I think this fix is better
This commit is contained in:
Félix Malfait
2025-01-21 14:18:22 +01:00
committed by GitHub
parent 8e0467e2e4
commit 86b0a7952b
25 changed files with 363 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,14 +7,14 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { EXPIRATION_DATES } from '@/settings/developers/constants/ExpirationDates';
import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
import { apiKeyTokenFamilyState } from '@/settings/developers/states/apiKeyTokenFamilyState';
import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
import { SettingsPath } from '@/types/SettingsPath';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { useLingui } from '@lingui/react/macro';
import { useSetRecoilState } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { Key } from 'ts-key-enum';
import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@ -25,7 +25,6 @@ export const SettingsDevelopersApiKeysNew = () => {
const { t } = useLingui();
const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
const navigateSettings = useNavigateSettings();
const setApiKeyToken = useSetRecoilState(apiKeyTokenState);
const [formValues, setFormValues] = useState<{
name: string;
expirationDate: number | null;
@ -38,6 +37,14 @@ export const SettingsDevelopersApiKeysNew = () => {
objectNameSingular: CoreObjectNameSingular.ApiKey,
});
const setApiKeyTokenCallback = useRecoilCallback(
({ set }) =>
(apiKeyId: string, token: string) => {
set(apiKeyTokenFamilyState(apiKeyId), token);
},
[],
);
const handleSave = async () => {
const expiresAt = DateTime.now()
.plus({ days: formValues.expirationDate ?? 30 })
@ -58,8 +65,12 @@ export const SettingsDevelopersApiKeysNew = () => {
expiresAt: expiresAt,
},
});
if (isDefined(tokenData.data?.generateApiKeyToken)) {
setApiKeyToken(tokenData.data.generateApiKeyToken.token);
setApiKeyTokenCallback(
newApiKey.id,
tokenData.data.generateApiKeyToken.token,
);
navigateSettings(SettingsPath.DevelopersApiKeyDetail, {
apiKeyId: newApiKey.id,
});