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

Make api name editable and add expiry (#6473)

Browse Source 
Fixes #6302

---------

Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
Prateek Jain
2024-08-02 17:01:06 +05:30
committed by GitHub
parent 68120d529c
commit 281bf689fa
13 changed files with 155 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/effect-components/PageChangeEffect.tsx
View File

@ -19,6 +19,7 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
import { isDefined } from '~/utils/isDefined';
import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
// TODO: break down into smaller functions and / or hooks
// - moved usePageChangeEffectNavigateLocation into dedicated hook
@ -35,6 +36,8 @@ export const PageChangeEffect = () => {
const pageChangeEffectNavigateLocation =
usePageChangeEffectNavigateLocation();
const { cleanRecoilState } = useCleanRecoilState();
const eventTracker = useEventTracker();
const { addToCommandMenu, setToInitialCommandMenu } = useCommandMenu();
@ -43,6 +46,10 @@ export const PageChangeEffect = () => {
activityObjectNameSingular: CoreObjectNameSingular.Task,
});
useEffect(() => {
cleanRecoilState();
}, [cleanRecoilState]);
useEffect(() => {
if (!previousLocation || previousLocation !== location.pathname) {
setPreviousLocation(location.pathname);

3
packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts
View File

@ -6,6 +6,7 @@ import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
import { useDefaultHomePagePath } from '~/hooks/useDefaultHomePagePath';
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
import { UNTESTED_APP_PATHS } from '~/testing/constants/UntestedAppPaths';
jest.mock('@/onboarding/hooks/useOnboardingStatus');
const setupMockOnboardingStatus = (
@ -296,7 +297,7 @@ describe('usePageChangeEffectNavigateLocation', () => {
SubscriptionStatus.Trialing,
];
expect(testCases.length).toEqual(
Object.keys(AppPath).length *
(Object.keys(AppPath).length - UNTESTED_APP_PATHS.length) *
(Object.keys(OnboardingStatus).length +
(Object.keys(SubscriptionStatus).length -
untestedSubscriptionStatus.length)),

26
packages/twenty-front/src/hooks/useCleanRecoilState.ts Normal file
View File

@ -0,0 +1,26 @@
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { SettingsPath } from '@/types/SettingsPath';
import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
import { useRecoilValue, useResetRecoilState } from 'recoil';
import { AppPath } from '@/types/AppPath';
import { isDefined } from '~/utils/isDefined';
export const useCleanRecoilState = () => {
const isMatchingLocation = useIsMatchingLocation();
const resetApiKeyToken = useResetRecoilState(apiKeyTokenState);
const apiKeyToken = useRecoilValue(apiKeyTokenState);
const cleanRecoilState = () => {
if (
!isMatchingLocation(
`${AppPath.Settings}/${AppPath.Developers}/${SettingsPath.DevelopersApiKeyDetail}`,
) &&
isDefined(apiKeyToken)
) {
resetApiKeyToken();
}
};
return {
cleanRecoilState,
};
};

70
packages/twenty-front/src/modules/settings/developers/components/ApiKeyNameInput.tsx Normal file
View File

@ -0,0 +1,70 @@
import { useCallback, useEffect } from 'react';
import styled from '@emotion/styled';
import { useDebouncedCallback } from 'use-debounce';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
import { TextInput } from '@/ui/input/components/TextInput';
import { isDefined } from '~/utils/isDefined';
const StyledComboInputContainer = styled.div`
display: flex;
flex-direction: row;
> * + * {
margin-left: ${({ theme }) => theme.spacing(4)};
}
`;
type ApiKeyNameInputProps = {
apiKeyName: string;
apiKeyId: string;
disabled: boolean;
onNameUpdate?: (name: string) => void;
};
export const ApiKeyNameInput = ({
apiKeyName,
apiKeyId,
disabled,
onNameUpdate,
}: ApiKeyNameInputProps) => {
const { updateOneRecord: updateApiKey } = useUpdateOneRecord<ApiKey>({
objectNameSingular: CoreObjectNameSingular.ApiKey,
});
// TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
// eslint-disable-next-line react-hooks/exhaustive-deps
const debouncedUpdate = useCallback(
useDebouncedCallback(async (name: string) => {
if (isDefined(onNameUpdate)) {
onNameUpdate(apiKeyName);
}
if (!apiKeyName) {
return;
}
await updateApiKey({
idToUpdate: apiKeyId,
updateOneRecordInput: { name },
});
}, 500),
[updateApiKey, onNameUpdate],
);
useEffect(() => {
debouncedUpdate(apiKeyName);
return debouncedUpdate.cancel;
}, [debouncedUpdate, apiKeyName]);
return (
<StyledComboInputContainer>
<TextInput
placeholder="E.g. backoffice integration"
onChange={onNameUpdate}
fullWidth
value={apiKeyName}
disabled={disabled}
/>
</StyledComboInputContainer>
);
};

27
packages/twenty-front/src/modules/settings/developers/hooks/__tests__/useGeneratedApiKeys.test.ts
View File

@ -1,27 +0,0 @@
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, RecoilState } from 'recoil';
import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
import { useGeneratedApiKeys } from '../useGeneratedApiKeys';
describe('useGeneratedApiKeys', () => {
test('should set generatedApiKeyFamilyState correctly', () => {
const { result } = renderHook(() => useGeneratedApiKeys(), {
wrapper: RecoilRoot,
});
const apiKeyId = 'someId';
const apiKey = 'someKey';
act(() => {
result.current(apiKeyId, apiKey);
});
const recoilState: RecoilState<string | null | undefined> =
generatedApiKeyFamilyState(apiKeyId);
const stateValue = recoilState.key;
expect(stateValue).toContain(apiKeyId);
});
});

13
packages/twenty-front/src/modules/settings/developers/hooks/useGeneratedApiKeys.ts
View File

@ -1,13 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
export const useGeneratedApiKeys = () => {
return useRecoilCallback(
({ set }) =>
(apiKeyId: string, apiKey: string | null) => {
set(generatedApiKeyFamilyState(apiKeyId), apiKey);
},
[],
);
};

9
packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyFamilyState.ts
View File

@ -1,9 +0,0 @@
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
export const generatedApiKeyFamilyState = createFamilyState<
string | null | undefined,
string
>({
key: 'generatedApiKeyFamilyState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyTokenState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from 'twenty-ui';
export const apiKeyTokenState = createState<string | null>({
key: 'apiKeyTokenState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/types/AppPath.ts
View File

@ -21,8 +21,10 @@ export enum AppPath {
RecordIndexPage = '/objects/:objectNamePlural',
RecordShowPage = '/object/:objectNameSingular/:objectRecordId',
SettingsCatchAll = `/settings/*`,
DevelopersCatchAll = `/developers/*`,
Settings = `settings`,
SettingsCatchAll = `/${Settings}/*`,
Developers = `developers`,
DevelopersCatchAll = `/${Developers}/*`,
// Impersonate
Impersonate = '/impersonate/:userId',

3
packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx
View File

@ -9,6 +9,7 @@ import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefau
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { UNTESTED_APP_PATHS } from '~/testing/constants/UntestedAppPaths';
jest.mock('@/onboarding/hooks/useOnboardingStatus');
const setupMockOnboardingStatus = (
@ -331,7 +332,7 @@ describe('useShowAuthModal', () => {
SubscriptionStatus.Trialing,
];
expect(testCases.length).toEqual(
Object.keys(AppPath).length *
(Object.keys(AppPath).length - UNTESTED_APP_PATHS.length) *
(Object.keys(OnboardingStatus).length +
(Object.keys(SubscriptionStatus).length -
untestedSubscriptionStatus.length)),

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

@ -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
/>

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

@ -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}`);
}
};

3
packages/twenty-front/src/testing/constants/UntestedAppPaths.ts Normal file
View File

@ -0,0 +1,3 @@
import { AppPath } from '@/types/AppPath';
export const UNTESTED_APP_PATHS = [AppPath.Settings, AppPath.Developers];