From ed0102ec58c1b0c5a8e96866e93b4aa409e5d4fe Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:51:27 +0530
Subject: [PATCH] Allow renaming names from uploaded files  (#6358)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hello @Bonapara,

Done with issue #6317. I had to create a new component, EditableField
([Component](https://github.com/ehconitin/twenty/commit/56bf16b82b7c84cdd8cc1682cbdf584e127425e8#diff-3a2362dbe6e21e46c55a673c80460bc201c62b36790b5df28b4c1f9f27377f59)),
because the existing InputText component has a fixed height
([link](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx#L55)),
which causes the attachment row to increase in size everytime clicked on
rename.

I’ve also updated the colors for the box border and box shadow as
specified in Figma.

Please let me know your thoughts.
Thanks



https://github.com/user-attachments/assets/d667269d-070e-4968-b63c-2ba9605de055

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../files/components/AttachmentDropdown.tsx   | 19 +++++-
 .../files/components/AttachmentRow.tsx        | 60 +++++++++++++++----
 2 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
index 884c43c81..7dc80b171 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
@@ -1,4 +1,9 @@
-import { IconDotsVertical, IconDownload, IconTrash } from 'twenty-ui';
+import {
+  IconDotsVertical,
+  IconDownload,
+  IconPencil,
+  IconTrash,
+} from 'twenty-ui';
 
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -10,12 +15,14 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 type AttachmentDropdownProps = {
   onDownload: () => void;
   onDelete: () => void;
+  onRename: () => void;
   scopeKey: string;
 };
 
 export const AttachmentDropdown = ({
   onDownload,
   onDelete,
+  onRename,
   scopeKey,
 }: AttachmentDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
@@ -32,6 +39,11 @@ export const AttachmentDropdown = ({
     closeDropdown();
   };
 
+  const handleRename = () => {
+    onRename();
+    closeDropdown();
+  };
+
   return (
     <Dropdown
       dropdownId={dropdownId}
@@ -46,6 +58,11 @@ export const AttachmentDropdown = ({
               LeftIcon={IconDownload}
               onClick={handleDownload}
             />
+            <MenuItem
+              text="Rename"
+              LeftIcon={IconPencil}
+              onClick={handleRename}
+            />
             <MenuItem
               text="Delete"
               accent="danger"
diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
index 691ebb746..478cacc72 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
@@ -1,18 +1,20 @@
-import { useMemo } from 'react';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconCalendar } from 'twenty-ui';
-
 import { AttachmentDropdown } from '@/activities/files/components/AttachmentDropdown';
 import { AttachmentIcon } from '@/activities/files/components/AttachmentIcon';
 import { Attachment } from '@/activities/files/types/Attachment';
 import { downloadFile } from '@/activities/files/utils/downloadFile';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import {
   FieldContext,
   GenericFieldContextType,
 } from '@/object-record/record-field/contexts/FieldContext';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useMemo, useState } from 'react';
+import { IconCalendar } from 'twenty-ui';
+
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { getFileAbsoluteURI } from '~/utils/file/getFileAbsoluteURI';
 
@@ -23,8 +25,8 @@ const StyledRow = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   justify-content: space-between;
-
   padding: ${({ theme }) => theme.spacing(2)};
+  height: 32px;
 `;
 
 const StyledLeftContent = styled.div`
@@ -57,6 +59,9 @@ const StyledLink = styled.a`
 
 export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
   const theme = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const [attachmentName, setAttachmentName] = useState(attachment.name);
+
   const fieldContext = useMemo(
     () => ({ recoilScopeId: attachment?.id ?? '' }),
     [attachment?.id],
@@ -70,17 +75,47 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
     deleteOneAttachment(attachment.id);
   };
 
+  const { updateOneRecord: updateOneAttachment } = useUpdateOneRecord({
+    objectNameSingular: CoreObjectNameSingular.Attachment,
+  });
+
+  const handleRename = () => {
+    setIsEditing(true);
+  };
+
+  const handleOnBlur = () => {
+    setIsEditing(false);
+    updateOneAttachment({
+      idToUpdate: attachment.id,
+      updateOneRecordInput: { name: attachmentName },
+    });
+  };
+
+  const handleOnChange = (newName: string) => {
+    setAttachmentName(newName);
+  };
+
   return (
     <FieldContext.Provider value={fieldContext as GenericFieldContextType}>
       <StyledRow>
         <StyledLeftContent>
           <AttachmentIcon attachmentType={attachment.type} />
-          <StyledLink
-            href={getFileAbsoluteURI(attachment.fullPath)}
-            target="__blank"
-          >
-            {attachment.name}
-          </StyledLink>
+          {isEditing ? (
+            <TextInput
+              value={attachmentName}
+              onChange={handleOnChange}
+              onBlur={handleOnBlur}
+              autoFocus
+              fullWidth
+            />
+          ) : (
+            <StyledLink
+              href={getFileAbsoluteURI(attachment.fullPath)}
+              target="__blank"
+            >
+              {attachment.name}
+            </StyledLink>
+          )}
         </StyledLeftContent>
         <StyledRightContent>
           <StyledCalendarIconContainer>
@@ -93,6 +128,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
             onDownload={() => {
               downloadFile(attachment.fullPath, attachment.name);
             }}
+            onRename={handleRename}
           />
         </StyledRightContent>
       </StyledRow>