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

Fix Client Config async loading (#12308)

Browse Source 
Fix ClientConfig async loading

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Charles Bochet
2025-05-28 10:40:20 +02:00
committed by GitHub
parent 196d8c97a4
commit d133055609
23 changed files with 745 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/activities/files/utils/__tests__/downloadFile.test.ts
View File

@ -1,6 +1,5 @@
import { downloadFile } from '../downloadFile';
// Mock fetch
global.fetch = jest.fn(() =>
Promise.resolve({
status: 200,
@ -16,13 +15,10 @@ window.URL.revokeObjectURL = jest.fn();
// `global.fetch` and `window.fetch` are also undefined
describe.skip('downloadFile', () => {
it('should download a file', () => {
// Call downloadFile
downloadFile('url/to/file.pdf', 'file.pdf');
// Assert on fetch
expect(fetch).toHaveBeenCalledWith('url/to/file.pdf');
// Assert on element creation
const link = document.querySelector(
'a[href="mock-url"][download="file.pdf"]',
);
@ -32,10 +28,8 @@ describe.skip('downloadFile', () => {
// @ts-ignore
expect(link?.style?.display).toBe('none');
// Assert on element click
expect(link).toHaveBeenCalledTimes(1);
// Clean up mocks
jest.clearAllMocks();
});
});

17
packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx
View File

@ -2,26 +2,11 @@ import { useRecoilValue } from 'recoil';
import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
import { AppFullScreenErrorFallback } from '@/error-handler/components/AppFullScreenErrorFallback';
import { AppPath } from '@/types/AppPath';
import { useLocation } from 'react-router-dom';
import { isMatchingLocation } from '~/utils/isMatchingLocation';
export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
children,
}) => {
const { isLoaded, isErrored, error } = useRecoilValue(
clientConfigApiStatusState,
);
const location = useLocation();
// TODO: Implement a better loading strategy
if (
!isLoaded &&
!isMatchingLocation(location, AppPath.Verify) &&
!isMatchingLocation(location, AppPath.VerifyEmail)
)
return null;
const { isErrored, error } = useRecoilValue(clientConfigApiStatusState);
return isErrored && error instanceof Error ? (
<AppFullScreenErrorFallback

20
packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx
View File

@ -1,3 +1,4 @@
import { useClientConfig } from '@/client-config/hooks/useClientConfig';
import { apiConfigState } from '@/client-config/states/apiConfigState';
import { authProvidersState } from '@/client-config/states/authProvidersState';
import { billingState } from '@/client-config/states/billingState';
@ -23,7 +24,6 @@ import { domainConfigurationState } from '@/domain-manager/states/domainConfigur
import { useEffect } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { useGetClientConfigQuery } from '~/generated/graphql';
export const ClientConfigProviderEffect = () => {
const setIsDebugMode = useSetRecoilState(isDebugModeState);
@ -87,16 +87,16 @@ export const ClientConfigProviderEffect = () => {
isConfigVariablesInDbEnabledState,
);
const { data, loading, error } = useGetClientConfigQuery({
skip: clientConfigApiStatus.isLoaded,
});
const { data, loading, error, fetchClientConfig } = useClientConfig();
useEffect(() => {
if (!clientConfigApiStatus.isLoaded) {
fetchClientConfig();
}
}, [clientConfigApiStatus.isLoaded, fetchClientConfig]);
useEffect(() => {
if (loading) return;
setClientConfigApiStatus((currentStatus) => ({
...currentStatus,
isLoaded: true,
}));
if (error instanceof Error) {
setClientConfigApiStatus((currentStatus) => ({
@ -165,6 +165,10 @@ export const ClientConfigProviderEffect = () => {
setIsConfigVariablesInDbEnabled(
data?.clientConfig?.isConfigVariablesInDbEnabled,
);
setClientConfigApiStatus((currentStatus) => ({
...currentStatus,
isLoaded: true,
}));
}, [
data,
setIsDebugMode,

58
packages/twenty-front/src/modules/client-config/hooks/useClientConfig.ts Normal file
View File

@ -0,0 +1,58 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { ClientConfig } from '~/generated/graphql';
import { clientConfigApiStatusState } from '../states/clientConfigApiStatusState';
import { getClientConfig } from '../utils/getClientConfig';
type UseClientConfigResult = {
data: { clientConfig: ClientConfig } | undefined;
loading: boolean;
error: Error | undefined;
fetchClientConfig: () => Promise<void>;
refetch: () => Promise<void>;
};
export const useClientConfig = (): UseClientConfigResult => {
const clientConfigApiStatus = useRecoilValue(clientConfigApiStatusState);
const fetchClientConfig = useRecoilCallback(
({ set }) =>
async () => {
set(clientConfigApiStatusState, (prev) => ({
...prev,
isLoading: true,
isErrored: false,
error: undefined,
}));
try {
const clientConfig = await getClientConfig();
set(clientConfigApiStatusState, (prev) => ({
...prev,
isLoading: false,
isLoaded: true,
data: { clientConfig },
}));
} catch (err) {
const error =
err instanceof Error
? err
: new Error('Failed to fetch client config');
set(clientConfigApiStatusState, (prev) => ({
...prev,
isLoading: false,
isErrored: true,
error,
}));
}
},
[],
);
return {
data: clientConfigApiStatus.data,
loading: clientConfigApiStatus.isLoading || false,
error: clientConfigApiStatus.error,
fetchClientConfig,
refetch: fetchClientConfig,
};
};

12
packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
View File

@ -1,11 +1,21 @@
import { createState } from 'twenty-ui/utilities';
import { ClientConfig } from '~/generated/graphql';
type ClientConfigApiStatus = {
isLoaded: boolean;
isLoading: boolean;
isErrored: boolean;
error?: Error;
data?: { clientConfig: ClientConfig };
};
export const clientConfigApiStatusState = createState<ClientConfigApiStatus>({
key: 'clientConfigApiStatus',
defaultValue: { isLoaded: false, isErrored: false, error: undefined },
defaultValue: {
isLoaded: false,
isLoading: false,
isErrored: false,
error: undefined,
data: undefined,
},
});

95
packages/twenty-front/src/modules/client-config/utils/__tests__/clientConfigUtils.test.ts Normal file
View File

@ -0,0 +1,95 @@
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { getClientConfig } from '../getClientConfig';
global.fetch = jest.fn();
const mockClientConfig = {
billing: {
isBillingEnabled: true,
billingUrl: 'https://billing.example.com',
trialPeriods: [],
},
authProviders: {
google: true,
magicLink: false,
password: true,
microsoft: false,
sso: [],
},
signInPrefilled: false,
isMultiWorkspaceEnabled: true,
isEmailVerificationRequired: false,
defaultSubdomain: 'app',
frontDomain: 'localhost',
debugMode: true,
support: {
supportDriver: 'none',
supportFrontChatId: undefined,
},
sentry: {
environment: 'development',
release: '1.0.0',
dsn: undefined,
},
captcha: {
provider: undefined,
siteKey: undefined,
},
chromeExtensionId: undefined,
api: {
mutationMaximumAffectedRecords: 100,
},
isAttachmentPreviewEnabled: true,
analyticsEnabled: false,
canManageFeatureFlags: true,
publicFeatureFlags: [],
isMicrosoftMessagingEnabled: false,
isMicrosoftCalendarEnabled: false,
isGoogleMessagingEnabled: false,
isGoogleCalendarEnabled: false,
isConfigVariablesInDbEnabled: false,
};
describe('getClientConfig', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('should fetch client config from API', async () => {
(fetch as jest.Mock).mockResolvedValueOnce({
ok: true,
json: async () => mockClientConfig,
});
const result = await getClientConfig();
expect(fetch).toHaveBeenCalledWith(
`${REACT_APP_SERVER_BASE_URL}/client-config`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
expect(result).toEqual(mockClientConfig);
});
it('should handle fetch errors', async () => {
(fetch as jest.Mock).mockResolvedValueOnce({
ok: false,
status: 500,
statusText: 'Internal Server Error',
});
await expect(getClientConfig()).rejects.toThrow(
'Failed to fetch client config: 500 Internal Server Error',
);
});
it('should handle network errors', async () => {
(fetch as jest.Mock).mockRejectedValueOnce(new Error('Network error'));
await expect(getClientConfig()).rejects.toThrow('Network error');
});
});

21
packages/twenty-front/src/modules/client-config/utils/getClientConfig.ts Normal file
View File

@ -0,0 +1,21 @@
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { ClientConfig } from '~/generated/graphql';
export const getClientConfig = async (): Promise<ClientConfig> => {
const response = await fetch(`${REACT_APP_SERVER_BASE_URL}/client-config`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(
`Failed to fetch client config: ${response.status} ${response.statusText}`,
);
}
const clientConfig: ClientConfig = await response.json();
return clientConfig;
};

5
packages/twenty-front/src/modules/domain-manager/hooks/useGetPublicWorkspaceDataByDomain.ts
View File

@ -1,12 +1,13 @@
import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
import { useIsCurrentLocationOnDefaultDomain } from '@/domain-manager/hooks/useIsCurrentLocationOnDefaultDomain';
import { useOrigin } from '@/domain-manager/hooks/useOrigin';
import { useRedirectToDefaultDomain } from '@/domain-manager/hooks/useRedirectToDefaultDomain';
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useGetPublicWorkspaceDataByDomainQuery } from '~/generated/graphql';
import { isDefined } from 'twenty-shared/utils';
import { useGetPublicWorkspaceDataByDomainQuery } from '~/generated/graphql';
export const useGetPublicWorkspaceDataByDomain = () => {
const { isDefaultDomain } = useIsCurrentLocationOnDefaultDomain();
@ -20,12 +21,14 @@ export const useGetPublicWorkspaceDataByDomain = () => {
const setWorkspacePublicDataState = useSetRecoilState(
workspacePublicDataState,
);
const clientConfigApiStatus = useRecoilValue(clientConfigApiStatusState);
const { loading, data, error } = useGetPublicWorkspaceDataByDomainQuery({
variables: {
origin,
},
skip:
!clientConfigApiStatus.isLoaded ||
(isMultiWorkspaceEnabled && isDefaultDomain) ||
isDefined(workspacePublicData),
onCompleted: (data) => {

2
packages/twenty-front/src/modules/domain-manager/hooks/useReadDefaultDomainFromConfiguration.ts
View File

@ -1,5 +1,5 @@
import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
import { useRecoilValue } from 'recoil';
export const useReadDefaultDomainFromConfiguration = () => {

2
packages/twenty-front/src/modules/domain-manager/hooks/useRedirectToDefaultDomain.ts
View File

@ -1,6 +1,6 @@
import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
import { useReadDefaultDomainFromConfiguration } from '@/domain-manager/hooks/useReadDefaultDomainFromConfiguration';
import { useRedirect } from '@/domain-manager/hooks/useRedirect';
import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
export const useRedirectToDefaultDomain = () => {
const { defaultDomain } = useReadDefaultDomainFromConfiguration();

24
packages/twenty-front/src/modules/settings/admin-panel/config-variables/hooks/useConfigVariableActions.ts
View File

@ -1,6 +1,6 @@
import { useLingui } from '@lingui/react/macro';
import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
import { useClientConfig } from '@/client-config/hooks/useClientConfig';
import { GET_DATABASE_CONFIG_VARIABLE } from '@/settings/admin-panel/config-variables/graphql/queries/getDatabaseConfigVariable';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -15,6 +15,7 @@ import {
export const useConfigVariableActions = (variableName: string) => {
const { t } = useLingui();
const { enqueueSnackBar } = useSnackBar();
const { refetch: refetchClientConfig } = useClientConfig();
const [updateDatabaseConfigVariable] =
useUpdateDatabaseConfigVariableMutation();
@ -48,9 +49,6 @@ export const useConfigVariableActions = (variableName: string) => {
query: GET_DATABASE_CONFIG_VARIABLE,
variables: { key: variableName },
},
{
query: GET_CLIENT_CONFIG,
},
],
});
} else {
@ -64,14 +62,13 @@ export const useConfigVariableActions = (variableName: string) => {
query: GET_DATABASE_CONFIG_VARIABLE,
variables: { key: variableName },
},
{
query: GET_CLIENT_CONFIG,
},
],
});
}
enqueueSnackBar(t`Variable updated successfully`, {
await refetchClientConfig();
enqueueSnackBar(t`Variable updated successfully.`, {
variant: SnackBarVariant.Success,
});
} catch (error) {
@ -96,13 +93,16 @@ export const useConfigVariableActions = (variableName: string) => {
query: GET_DATABASE_CONFIG_VARIABLE,
variables: { key: variableName },
},
{
query: GET_CLIENT_CONFIG,
},
],
});
await refetchClientConfig();
enqueueSnackBar(t`Variable deleted successfully.`, {
variant: SnackBarVariant.Success,
});
} catch (error) {
enqueueSnackBar(t`Failed to remove override`, {
enqueueSnackBar(t`Failed to remove override`, {
variant: SnackBarVariant.Error,
});
}