drag and drop on files tab (#3432)

* #3345 drag and drop on files tab

* #3432 resolved comments on drag and drop feature

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -1,20 +1,14 @@
-import { ChangeEvent, useRef } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
-import { useRecoilValue } from 'recoil';
 
 import { AttachmentList } from '@/activities/files/components/AttachmentList';
+import { DropZone } from '@/activities/files/components/DropZone';
 import { useAttachments } from '@/activities/files/hooks/useAttachments';
-import { Attachment } from '@/activities/files/types/Attachment';
-import { getFileType } from '@/activities/files/utils/getFileType';
+import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
-import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
 const StyledTaskGroupEmptyContainer = styled.div`
   align-items: center;
@@ -24,10 +18,7 @@ const StyledTaskGroupEmptyContainer = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: center;
-  padding-bottom: ${({ theme }) => theme.spacing(16)};
-  padding-left: ${({ theme }) => theme.spacing(4)};
-  padding-right: ${({ theme }) => theme.spacing(4)};
-  padding-top: ${({ theme }) => theme.spacing(3)};
+  height: 100%;
 `;
 
 const StyledEmptyTaskGroupTitle = styled.div`
@@ -57,21 +48,21 @@ const StyledFileInput = styled.input`
   display: none;
 `;
 
+const StyledDropZoneContainer = styled.div`
+  height: 100%;
+  padding: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const Attachments = ({
   targetableObject,
 }: {
   targetableObject: ActivityTargetableObject;
 }) => {
   const inputFileRef = useRef<HTMLInputElement>(null);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { attachments } = useAttachments(targetableObject);
+  const { uploadAttachmentFile } = useUploadAttachmentFile();
 
-  const [uploadFile] = useUploadFileMutation();
-
-  const { createOneRecord: createOneAttachment } =
-    useCreateOneRecord<Attachment>({
-      objectNameSingular: CoreObjectNameSingular.Attachment,
-    });
+  const [isDraggingFile, setIsDraggingFile] = useState(false);
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) onUploadFile?.(e.target.files[0]);
@@ -82,52 +73,37 @@ export const Attachments = ({
   };
 
   const onUploadFile = async (file: File) => {
-    const result = await uploadFile({
-      variables: {
-        file,
-        fileFolder: FileFolder.Attachment,
-      },
-    });
-
-    const attachmentUrl = result?.data?.uploadFile;
-
-    if (!attachmentUrl) {
-      return;
-    }
-
-    const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
-      nameSingular: targetableObject.targetObjectNameSingular,
-    });
-
-    const attachmentToCreate = {
-      authorId: currentWorkspaceMember?.id,
-      name: file.name,
-      fullPath: attachmentUrl,
-      type: getFileType(file.name),
-      [targetableObjectFieldIdName]: targetableObject.id,
-    };
-
-    await createOneAttachment(attachmentToCreate);
+    await uploadAttachmentFile(file, targetableObject);
   };
 
   if (!isNonEmptyArray(attachments)) {
     return (
-      <StyledTaskGroupEmptyContainer>
-        <StyledFileInput
-          ref={inputFileRef}
-          onChange={handleFileChange}
-          type="file"
-        />
-
-        <StyledEmptyTaskGroupTitle>No files yet</StyledEmptyTaskGroupTitle>
-        <StyledEmptyTaskGroupSubTitle>Upload one:</StyledEmptyTaskGroupSubTitle>
-        <Button
-          Icon={IconPlus}
-          title="Add file"
-          variant="secondary"
-          onClick={handleUploadFileClick}
-        />
-      </StyledTaskGroupEmptyContainer>
+      <StyledDropZoneContainer onDragEnter={() => setIsDraggingFile(true)}>
+        {isDraggingFile ? (
+          <DropZone
+            setIsDraggingFile={setIsDraggingFile}
+            onUploadFile={onUploadFile}
+          />
+        ) : (
+          <StyledTaskGroupEmptyContainer>
+            <StyledFileInput
+              ref={inputFileRef}
+              onChange={handleFileChange}
+              type="file"
+            />
+            <StyledEmptyTaskGroupTitle>No files yet</StyledEmptyTaskGroupTitle>
+            <StyledEmptyTaskGroupSubTitle>
+              Upload one:
+            </StyledEmptyTaskGroupSubTitle>
+            <Button
+              Icon={IconPlus}
+              title="Add file"
+              variant="secondary"
+              onClick={handleUploadFileClick}
+            />
+          </StyledTaskGroupEmptyContainer>
+        )}
+      </StyledDropZoneContainer>
     );
   }
 
@@ -139,6 +115,7 @@ export const Attachments = ({
         type="file"
       />
       <AttachmentList
+        targetableObject={targetableObject}
         title="All"
         attachments={attachments ?? []}
         button={