refactor: to useCopyToClipboard to catch errors - when user has disable copy clipboard permission in browser (#13330)

as discussed here
https://github.com/twentyhq/twenty/issues/13292#issuecomment-3092215050
with @prastoin

- [x] introduce optional message param to `copyToClipboard` method in
`useCopyToClipboard` and refactor it across app, as in case if user has
disallowed clipboard permission in BROWSER unprotected clipboard access
breaks without catch.

- [x] Email copied to clipboard

- [x] run lingui extract

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx

@@ -1,8 +1,6 @@
 /* @license Enterprise */
 
-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';
@@ -10,6 +8,7 @@ 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';
+import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 
 const StyledInputsContainer = styled.div`
   display: flex;
@@ -36,8 +35,7 @@ const StyledButtonCopy = styled.div`
 
 export const SettingsSSOOIDCForm = () => {
   const { control } = useFormContext();
-  const { enqueueSuccessSnackBar } = useSnackBar();
-  const theme = useTheme();
+  const { copyToClipboard } = useCopyToClipboard();
   const { t } = useLingui();
 
   const authorizedUrl = window.location.origin;
@@ -66,14 +64,10 @@ export const SettingsSSOOIDCForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSuccessSnackBar({
-                    message: t`Authorized URL copied to clipboard`,
-                    options: {
-                      icon: <IconCopy size={theme.icon.size.md} />,
-                      duration: 2000,
-                    },
-                  });
-                  navigator.clipboard.writeText(authorizedUrl);
+                  copyToClipboard(
+                    authorizedUrl,
+                    t`Authorized URL copied to clipboard`,
+                  );
                 }}
                 type="button"
               />
@@ -94,14 +88,10 @@ export const SettingsSSOOIDCForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSuccessSnackBar({
-                    message: t`Redirect Url copied to clipboard`,
-                    options: {
-                      icon: <IconCopy size={theme.icon.size.md} />,
-                      duration: 2000,
-                    },
-                  });
-                  navigator.clipboard.writeText(redirectionUrl);
+                  copyToClipboard(
+                    redirectionUrl,
+                    t`Redirect Url copied to clipboard`,
+                  );
                 }}
                 type="button"
               />

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx

@@ -20,6 +20,7 @@ import {
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 
 const StyledUploadFileContainer = styled.div`
   align-items: center;
@@ -55,10 +56,11 @@ const StyledButtonCopy = styled.div`
 `;
 
 export const SettingsSSOSAMLForm = () => {
-  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const theme = useTheme();
   const { setValue, getValues, watch, trigger } = useFormContext();
   const { t } = useLingui();
+  const { copyToClipboard } = useCopyToClipboard();
 
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (isDefined(e.target.files)) {
@@ -179,16 +181,9 @@ export const SettingsSSOSAMLForm = () => {
             <StyledButtonCopy>
               <Button
                 Icon={IconCopy}
-                title="Copy"
+                title={t`Copy`}
                 onClick={() => {
-                  enqueueSuccessSnackBar({
-                    message: t`ACS Url copied to clipboard`,
-                    options: {
-                      icon: <IconCopy size={theme.icon.size.md} />,
-                      duration: 2000,
-                    },
-                  });
-                  navigator.clipboard.writeText(acsUrl);
+                  copyToClipboard(acsUrl, t`ACS Url copied to clipboard`);
                 }}
                 type="button"
               />
@@ -209,14 +204,7 @@ export const SettingsSSOSAMLForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSuccessSnackBar({
-                    message: t`Entity ID copied to clipboard`,
-                    options: {
-                      icon: <IconCopy size={theme.icon.size.md} />,
-                      duration: 2000,
-                    },
-                  });
-                  navigator.clipboard.writeText(entityID);
+                  copyToClipboard(entityID, t`Entity ID copied to clipboard`);
                 }}
                 type="button"
               />