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

Define server error messages to display in FE from the server (#12973)

Browse Source 
Currently, when a server query or mutation from the front-end fails, the
error message defined server-side is displayed in a snackbar in the
front-end.
These error messages usually contain technical details that don't belong
to the user interface, such as "ObjectMetadataCollection not found" or
"invalid ENUM value for ...".

**BE**
In addition to the original error message that is still needed (for the
request response, debugging, sentry monitoring etc.), we add a
`displayedErrorMessage` that will be used in the snackbars. It's only
relevant to add it for the messages that will reach the FE (ie. not in
jobs or in rest api for instance) and if it can help the user sort out /
fix things (ie. we do add displayedErrorMessage for "Cannot create
multiple draft versions for the same workflow" or "Cannot delete
[field], please update the label identifier field first", but not
"Object metadata does not exist"), even if in practice in the FE users
should not be able to perform an action that will not work (ie should
not be able to save creation of multiple draft versions of the same
workflows).

**FE**
To ease the usage we replaced enqueueSnackBar with enqueueErrorSnackBar
and enqueueSuccessSnackBar with an api that only requires to pass on the
error.
If no displayedErrorMessage is specified then the default error message
is `An error occured.`
This commit is contained in:
Marie
2025-07-03 14:42:10 +02:00
committed by GitHub
parent 1f1318febf
commit 288f0919db
133 changed files with 1501 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx
+5 -5
View File
@@ -8,8 +8,8 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { SettingsSSOIdentitiesProvidersListCardWrapper } from '@/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCardWrapper';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import isPropValid from '@emotion/is-prop-valid';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
@@ -26,7 +26,7 @@ const StyledLink = styled(Link, {
`;
export const SettingsSSOIdentitiesProvidersListCard = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@@ -42,9 +42,9 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {
onCompleted: (data) => {
setSSOIdentitiesProviders(data?.getSSOIdentityProviders ?? []);
},
onError: (error: Error) => {
enqueueSnackBar(error.message, {
variant: SnackBarVariant.Error,
onError: (error: ApolloError) => {
enqueueErrorSnackBar({
apolloError: error,
});
},
});
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx
+15 -12
View File
@@ -1,16 +1,15 @@
/* @license Enterprise */
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { Controller, useFormContext } from 'react-hook-form';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { Button } from 'twenty-ui/input';
import { H2Title, IconCopy } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
const StyledInputsContainer = styled.div`
display: flex;
@@ -37,7 +36,7 @@ const StyledButtonCopy = styled.div`
export const SettingsSSOOIDCForm = () => {
const { control } = useFormContext();
const { enqueueSnackBar } = useSnackBar();
const { enqueueSuccessSnackBar } = useSnackBar();
const theme = useTheme();
const { t } = useLingui();
@@ -66,10 +65,12 @@ export const SettingsSSOOIDCForm = () => {
Icon={IconCopy}
title={t`Copy`}
onClick={() => {
enqueueSnackBar(t`Authorized URL copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
enqueueSuccessSnackBar({
message: t`Authorized URL copied to clipboard`,
options: {
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
},
});
navigator.clipboard.writeText(authorizedUrl);
}}
@@ -91,10 +92,12 @@ export const SettingsSSOOIDCForm = () => {
Icon={IconCopy}
title={t`Copy`}
onClick={() => {
enqueueSnackBar(t`Redirect Url copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
enqueueSuccessSnackBar({
message: t`Redirect Url copied to clipboard`,
options: {
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
},
});
navigator.clipboard.writeText(redirectionUrl);
}}
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx
+25 -18
View File
@@ -1,7 +1,6 @@
/* @license Enterprise */
import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
@@ -9,9 +8,7 @@ import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { ChangeEvent, useRef } from 'react';
import { useFormContext } from 'react-hook-form';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { isDefined } from 'twenty-shared/utils';
import { Button } from 'twenty-ui/input';
import {
H2Title,
HorizontalSeparator,
@@ -20,7 +17,9 @@ import {
IconDownload,
IconUpload,
} from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
const StyledUploadFileContainer = styled.div`
align-items: center;
@@ -56,7 +55,7 @@ const StyledButtonCopy = styled.div`
`;
export const SettingsSSOSAMLForm = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
const theme = useTheme();
const { setValue, getValues, watch, trigger } = useFormContext();
const { t } = useLingui();
@@ -67,9 +66,11 @@ export const SettingsSSOSAMLForm = () => {
const samlMetadataParsed = parseSAMLMetadataFromXMLFile(text);
e.target.value = '';
if (!samlMetadataParsed.success) {
return enqueueSnackBar(t`Invalid File`, {
variant: SnackBarVariant.Error,
duration: 2000,
return enqueueErrorSnackBar({
message: t`Invalid File`,
options: {
duration: 2000,
},
});
}
setValue('ssoURL', samlMetadataParsed.data.ssoUrl);
@@ -103,9 +104,11 @@ export const SettingsSSOSAMLForm = () => {
`${REACT_APP_SERVER_BASE_URL}/auth/saml/metadata/${getValues('id')}`,
);
if (!response.ok) {
return enqueueSnackBar(t`Metadata file generation failed`, {
variant: SnackBarVariant.Error,
duration: 2000,
return enqueueErrorSnackBar({
message: t`Metadata file generation failed`,
options: {
duration: 2000,
},
});
}
const text = await response.text();
@@ -177,10 +180,12 @@ export const SettingsSSOSAMLForm = () => {
Icon={IconCopy}
title="Copy"
onClick={() => {
enqueueSnackBar('ACS Url copied to clipboard', {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
enqueueSuccessSnackBar({
message: t`ACS Url copied to clipboard`,
options: {
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
},
});
navigator.clipboard.writeText(acsUrl);
}}
@@ -202,10 +207,12 @@ export const SettingsSSOSAMLForm = () => {
Icon={IconCopy}
title={t`Copy`}
onClick={() => {
enqueueSnackBar(t`Entity ID copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
enqueueSuccessSnackBar({
message: t`Entity ID copied to clipboard`,
options: {
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
},
});
navigator.clipboard.writeText(entityID);
}}
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
+11 -8
View File
@@ -1,7 +1,6 @@
import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider';
import { useUpdateSSOIdentityProvider } from '@/settings/security/hooks/useUpdateSSOIdentityProvider';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -24,7 +23,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
}: SettingsSecuritySSORowDropdownMenuProps) => {
const dropdownId = `settings-account-row-${SSOIdp.id}`;
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const { closeDropdown } = useCloseDropdown();
@@ -40,9 +39,11 @@ export const SettingsSecuritySSORowDropdownMenu = ({
identityProviderId,
});
if (isDefined(result.errors)) {
enqueueSnackBar(t`Error deleting SSO Identity Provider`, {
variant: SnackBarVariant.Error,
duration: 2000,
enqueueErrorSnackBar({
message: t`Error deleting SSO Identity Provider`,
options: {
duration: 2000,
},
});
}
};
@@ -58,9 +59,11 @@ export const SettingsSecuritySSORowDropdownMenu = ({
: SsoIdentityProviderStatus.Active,
});
if (isDefined(result.errors)) {
enqueueSnackBar(t`Error editing SSO Identity Provider`, {
variant: SnackBarVariant.Error,
duration: 2000,
enqueueErrorSnackBar({
message: t`Error editing SSO Identity Provider`,
options: {
duration: 2000,
},
});
}
};
packages/twenty-front/src/modules/settings/security/components/SettingsSecurityAuthProvidersOptionsList.tsx
+9 -12
View File
@@ -2,8 +2,8 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { authProvidersState } from '@/client-config/states/authProvidersState';
import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilState, useRecoilValue } from 'recoil';
@@ -30,7 +30,7 @@ const StyledSettingsSecurityOptionsList = styled.div`
export const SettingsSecurityAuthProvidersOptionsList = () => {
const { t } = useLingui();
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const SSOIdentitiesProviders = useRecoilValue(SSOIdentitiesProvidersState);
const authProviders = useRecoilValue(authProvidersState);
@@ -72,12 +72,9 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
allAuthProvidersEnabled.filter((isAuthEnabled) => isAuthEnabled).length <=
1
) {
return enqueueSnackBar(
t`At least one authentication method must be enabled`,
{
variant: SnackBarVariant.Error,
},
);
return enqueueErrorSnackBar({
message: t`At least one authentication method must be enabled`,
});
}
setCurrentWorkspace({
@@ -97,8 +94,8 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
...currentWorkspace,
[key]: !currentWorkspace[key],
});
enqueueSnackBar(err?.message, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
apolloError: err instanceof ApolloError ? err : undefined,
});
});
};
@@ -120,8 +117,8 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
isPublicInviteLinkEnabled: value,
});
} catch (err: any) {
enqueueSnackBar(err?.message, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
apolloError: err instanceof ApolloError ? err : undefined,
});
}
};
packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx
+4 -4
View File
@@ -7,8 +7,8 @@ import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { SettingsSecurityApprovedAccessDomainRowDropdownMenu } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu';
import { SettingsSecurityApprovedAccessDomainValidationEffect } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect';
import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilState } from 'recoil';
@@ -22,7 +22,7 @@ const StyledLink = styled(Link)`
`;
export const SettingsApprovedAccessDomainsListCard = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const navigate = useNavigate();
const { t } = useLingui();
@@ -36,8 +36,8 @@ export const SettingsApprovedAccessDomainsListCard = () => {
setApprovedAccessDomains(data?.getApprovedAccessDomains ?? []);
},
onError: (error: Error) => {
enqueueSnackBar(error.message, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
apolloError: error instanceof ApolloError ? error : undefined,
});
},
});
packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu.tsx
+7 -5
View File
@@ -1,10 +1,10 @@
import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { t } from '@lingui/core/macro';
import { UnwrapRecoilValue, useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@@ -25,7 +25,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
approvedAccessDomainsState,
);
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const { closeDropdown } = useCloseDropdown();
@@ -47,9 +47,11 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
},
});
if (isDefined(result.errors)) {
enqueueSnackBar('Error deleting approved access domain', {
variant: SnackBarVariant.Error,
duration: 2000,
enqueueErrorSnackBar({
message: t`Could not delete approved access domain`,
options: {
duration: 2000,
},
});
}
};
packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect.tsx
+12 -8
View File
@@ -1,5 +1,5 @@
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { t } from '@lingui/core/macro';
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
@@ -8,7 +8,7 @@ import { useValidateApprovedAccessDomainMutation } from '~/generated-metadata/gr
export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
const [validateApprovedAccessDomainMutation] =
useValidateApprovedAccessDomainMutation();
const { enqueueSnackBar } = useSnackBar();
const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
const [searchParams] = useSearchParams();
const approvedAccessDomainId = searchParams.get('wtdId');
const validationToken = searchParams.get('validationToken');
@@ -23,15 +23,19 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
},
},
onCompleted: () => {
enqueueSnackBar('Approved access domain validated', {
dedupeKey: 'approved-access-domain-validation-dedupe-key',
variant: SnackBarVariant.Success,
enqueueSuccessSnackBar({
message: t`Approved access domain validated`,
options: {
dedupeKey: 'approved-access-domain-validation-dedupe-key',
},
});
},
onError: () => {
enqueueSnackBar('Error validating approved access domain', {
dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Error validating approved access domain`,
options: {
dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
},
});
},
});