fix(approved-access-domain): Improve ux (#13367)

Fix #13324

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

packages/twenty-emails/src/constants/DefaultWorkspaceLogo.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_WORKSPACE_LOGO =
+  'https://twentyhq.github.io/placeholder-images/workspaces/twenty-logo.png';

packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx

@@ -13,6 +13,7 @@ import { Title } from 'src/components/Title';
 import { capitalize } from 'src/utils/capitalize';
 import { APP_LOCALES } from 'twenty-shared/translations';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
+import { DEFAULT_WORKSPACE_LOGO } from 'src/constants/DefaultWorkspaceLogo';
 
 type SendApprovedAccessDomainValidationProps = {
   link: string;
@@ -63,16 +64,19 @@ export const SendApprovedAccessDomainValidation = ({
         <br />
       </MainText>
       <HighlightedContainer>
-        {workspaceLogo ? (
+        <object
+          data={workspaceLogo ?? DEFAULT_WORKSPACE_LOGO}
+          width={40}
+          height={40}
+          aria-label="Workspace logo"
+        >
           <Img
-            src={workspaceLogo}
+            src={DEFAULT_WORKSPACE_LOGO}
             width={40}
             height={40}
             alt="Workspace logo"
           />
-        ) : (
+        </object>
-          <></>
-        )}
         {workspace.name ? <HighlightedText value={workspace.name} /> : <></>}
         <CallToAction href={link} value={i18n._('Validate domain')} />
       </HighlightedContainer>

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect.tsx

@@ -3,7 +3,9 @@ import { t } from '@lingui/core/macro';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
+import { useSetRecoilState } from 'recoil';
 import { useValidateApprovedAccessDomainMutation } from '~/generated-metadata/graphql';
+import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
 
 export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
   const [validateApprovedAccessDomainMutation] =
@@ -12,6 +14,9 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
   const [searchParams] = useSearchParams();
   const approvedAccessDomainId = searchParams.get('wtdId');
   const validationToken = searchParams.get('validationToken');
+  const setApprovedAccessDomains = useSetRecoilState(
+    approvedAccessDomainsState,
+  );
 
   useEffect(() => {
     if (isDefined(validationToken) && isDefined(approvedAccessDomainId)) {
@@ -23,6 +28,15 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
           },
         },
         onCompleted: () => {
+          setApprovedAccessDomains((approvedAccessDomains) =>
+            approvedAccessDomains.map((approvedAccessDomain) => ({
+              ...approvedAccessDomain,
+              isValidated:
+                approvedAccessDomain.id === approvedAccessDomainId
+                  ? true
+                  : approvedAccessDomain.isValidated,
+            })),
+          );
           enqueueSuccessSnackBar({
             message: t`Approved access domain validated`,
             options: {
@@ -30,9 +44,12 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
             },
           });
         },
-        onError: () => {
+        onError: (error) => {
+          const message = error?.message
+            ? error.message
+            : 'Error validating approved access domain';
           enqueueErrorSnackBar({
-            message: t`Error validating approved access domain`,
+            message: t`${message}`,
             options: {
               dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
             },