From ca19b731efe857eb27fc71b1622d012a9ba5181a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Wed, 6 Aug 2025 13:49:03 +0200
Subject: [PATCH] Add ADD NEW cta as the last row (#13594)

<img width="961" height="478" alt="Screenshot 2025-08-04 at 14 34 07"
src="https://github.com/user-attachments/assets/42e266d2-7329-4eb7-9d22-78402800f646"
/>

---------

Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com>
---
 .../components/RecordTableAddNew.tsx          | 49 +++++++++++++++++++
 .../RecordTableNoRecordGroupRows.tsx          |  2 +
 .../components/RecordTableActionRow.tsx       | 18 ++++---
 3 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/components/RecordTableAddNew.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableAddNew.tsx
new file mode 100644
index 0000000000..0062509863
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableAddNew.tsx
@@ -0,0 +1,49 @@
+import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
+import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
+import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow';
+import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { t } from '@lingui/core/macro';
+import { IconPlus } from 'twenty-ui/display';
+
+export const RecordTableAddNew = () => {
+  const { objectMetadataItem } = useRecordTableContextOrThrow();
+
+  const recordIds = useRecoilComponentValueV2(
+    recordIndexAllRecordIdsComponentSelector,
+  );
+
+  const hasRecordTableFetchedAllRecords = useRecoilComponentValueV2(
+    hasRecordTableFetchedAllRecordsComponentStateV2,
+  );
+
+  const { createNewIndexRecord } = useCreateNewIndexRecord({
+    objectMetadataItem,
+  });
+
+  const objectPermissions = useObjectPermissionsForObject(
+    objectMetadataItem.id,
+  );
+
+  const hasObjectUpdatePermissions = objectPermissions.canUpdateObjectRecords;
+
+  if (!hasObjectUpdatePermissions || !hasRecordTableFetchedAllRecords) {
+    return null;
+  }
+
+  return (
+    <RecordTableActionRow
+      draggableId="add-new-record"
+      draggableIndex={recordIds.length + 1}
+      LeftIcon={IconPlus}
+      text={t`Add new`}
+      onClick={() => {
+        createNewIndexRecord({
+          position: 'last',
+        });
+      }}
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx
index 338b12dc2d..47d06e6293 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx
@@ -1,4 +1,5 @@
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
+import { RecordTableAddNew } from '@/object-record/record-table/components/RecordTableAddNew';
 import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
 import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter';
@@ -27,6 +28,7 @@ export const RecordTableNoRecordGroupRows = () => {
           />
         );
       })}
+      <RecordTableAddNew />
       <RecordTableBodyFetchMoreLoader />
       <RecordTableBodyDroppablePlaceholder />
       {!isRecordTableInitialLoading && allRecordIds.length > 0 && (
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
index d5bafb2a3b..a914dc3da6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
@@ -14,6 +14,14 @@ const StyledRecordTableDraggableTr = styled(RecordTableDraggableTr)`
   &:hover {
     background-color: ${({ theme }) => theme.background.transparent.light};
   }
+
+  td {
+    border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+
+    &:first-of-type {
+      border-bottom: 1px solid ${({ theme }) => theme.background.primary};
+    }
+  }
 `;
 
 const StyledIconContainer = styled(RecordTableTd)`
@@ -40,10 +48,6 @@ const StyledText = styled.span`
   vertical-align: middle;
 `;
 
-const StyledEmptyTd = styled.td`
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-`;
-
 type RecordTableActionRowProps = {
   draggableId: string;
   draggableIndex: number;
@@ -82,9 +86,9 @@ export const RecordTableActionRow = ({
       <StyledRecordTableTdTextContainer className="disable-shadow">
         <StyledText>{text}</StyledText>
       </StyledRecordTableTdTextContainer>
-      <StyledEmptyTd colSpan={visibleTableColumns.length - 1} />
-      <StyledEmptyTd />
-      <StyledEmptyTd />
+      <td colSpan={visibleTableColumns.length - 1} aria-hidden />
+      <td aria-hidden />
+      <td aria-hidden />
     </StyledRecordTableDraggableTr>
   );
 };