Add link on snack bar (#9873)

Add link to workflow execution 

<img width="639" alt="Capture d’écran 2025-01-27 à 18 15 34"
src="https://github.com/user-attachments/assets/f2a1b3b5-7bf6-4b33-bba7-bf8907f6bcc6"
/>

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { isUndefined } from '@sniptt/guards';
 import { ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import {
   IconAlertTriangle,
   IconInfoCircle,
@@ -31,6 +32,10 @@ export type SnackBarProps = Pick<ComponentPropsWithoutRef<'div'>, 'id'> & {
   duration?: number;
   icon?: ReactNode;
   message: string;
+  link?: {
+    href: string;
+    text: string;
+  };
   detailedMessage?: string;
   onCancel?: () => void;
   onClose?: () => void;
@@ -101,6 +106,20 @@ const StyledDescription = styled.div`
   width: 200px;
 `;
 
+const StyledLink = styled(Link)`
+  display: block;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  padding-left: ${({ theme }) => theme.spacing(6)};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  &:hover {
+    color: ${({ theme }) => theme.font.color.secondary};
+  }
+`;
+
 const defaultAriaLabelByVariant: Record<SnackBarVariant, string> = {
   [SnackBarVariant.Default]: 'Alert',
   [SnackBarVariant.Error]: 'Error',
@@ -117,6 +136,7 @@ export const SnackBar = ({
   id,
   message,
   detailedMessage,
+  link,
   onCancel,
   onClose,
   role = 'status',
@@ -205,6 +225,7 @@ export const SnackBar = ({
       {detailedMessage && (
         <StyledDescription>{detailedMessage}</StyledDescription>
       )}
+      {link && <StyledLink to={link.href}>{link.text}</StyledLink>}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx

@@ -46,7 +46,15 @@ export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
       <StyledSnackBarContainer>
         <AnimatePresence>
           {snackBarInternal.queue.map(
-            ({ duration, icon, id, message, detailedMessage, variant }) => (
+            ({
+              duration,
+              icon,
+              id,
+              message,
+              detailedMessage,
+              variant,
+              link,
+            }) => (
               <motion.div
                 key={id}
                 variants={variants}
@@ -57,7 +65,14 @@ export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
                 layout
               >
                 <SnackBar
-                  {...{ duration, icon, message, detailedMessage, variant }}
+                  {...{
+                    duration,
+                    icon,
+                    message,
+                    detailedMessage,
+                    variant,
+                    link,
+                  }}
                   onClose={() => handleSnackBarClose(id)}
                 />
               </motion.div>