Add more translations (#9707)

As per title

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -1,3 +1,4 @@
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Button, H2Title, IconTrash } from 'twenty-ui';
@@ -6,6 +7,7 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
+
 export const DeleteWorkspace = () => {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);
@@ -13,6 +15,7 @@ export const DeleteWorkspace = () => {
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
   const currentUser = useRecoilValue(currentUserState);
   const userEmail = currentUser?.email;
+  const { t } = useLingui();
 
   const { signOut } = useAuth();
 
@@ -23,11 +26,14 @@ export const DeleteWorkspace = () => {
 
   return (
     <>
-      <H2Title title="Danger zone" description="Delete your whole workspace" />
+      <H2Title
+        title={t`Danger zone`}
+        description={t`Delete your whole workspace`}
+      />
       <Button
         accent="danger"
         variant="secondary"
-        title="Delete workspace"
+        title={t`Delete workspace`}
         Icon={IconTrash}
         onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
       />
@@ -37,15 +43,15 @@ export const DeleteWorkspace = () => {
         confirmationValue={userEmail}
         isOpen={isDeleteWorkSpaceModalOpen}
         setIsOpen={setIsDeleteWorkSpaceModalOpen}
-        title="Workspace Deletion"
+        title={t`Workspace Deletion`}
         subtitle={
-          <>
+          <Trans>
             This action cannot be undone. This will permanently delete your
             entire workspace. <br /> Please type in your email to confirm.
-          </>
+          </Trans>
         }
         onConfirmClick={deleteWorkspace}
-        deleteButtonText="Delete workspace"
+        deleteButtonText={t`Delete workspace`}
       />
     </>
   );

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -1,5 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+
 import { isNonEmptyString } from '@sniptt/guards';
 import React from 'react';
 import { getImageAbsoluteURI } from 'twenty-shared';
@@ -105,6 +107,7 @@ export const ImageInput = ({
   disabled = false,
   className,
 }: ImageInputProps) => {
+  const { t } = useLingui();
   const theme = useTheme();
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
   const onUploadButtonClick = () => {
@@ -151,7 +154,7 @@ export const ImageInput = ({
               Icon={IconX}
               onClick={onAbort}
               variant="secondary"
-              title="Abort"
+              title={t`Abort`}
               disabled={!pictureURI || disabled}
             />
           ) : (
@@ -159,7 +162,7 @@ export const ImageInput = ({
               Icon={IconUpload}
               onClick={onUploadButtonClick}
               variant="secondary"
-              title="Upload"
+              title={t`Upload`}
               disabled={disabled}
             />
           )}
@@ -167,7 +170,7 @@ export const ImageInput = ({
             Icon={IconTrash}
             onClick={onRemove}
             variant="secondary"
-            title="Remove"
+            title={t`Remove`}
             disabled={!pictureURI || disabled}
           />
         </StyledButtonContainer>

packages/twenty-front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
+import { i18nDecoratorFront } from '~/testing/decorators/i18nDecoratorFront';
 import { workspaceLogoUrl } from '~/testing/mock-data/users';
 
 import { ImageInput } from '../ImageInput';
@@ -8,7 +9,7 @@ import { ImageInput } from '../ImageInput';
 const meta: Meta<typeof ImageInput> = {
   title: 'UI/Input/ImageInput/ImageInput',
   component: ImageInput,
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, i18nDecoratorFront],
 };
 
 export default meta;