Resolve bugs tied to record creations on table (#4011)

* Resolve bugs tied to record creations on table

* Fix according to PR

* Fix tests

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -16,6 +15,7 @@ import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/s
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
+import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 import { ViewBar } from '@/views/components/ViewBar';
@@ -46,10 +46,9 @@ export const RecordIndexContainer = ({
   recordIndexId,
   objectNamePlural,
 }: RecordIndexContainerProps) => {
-  const [recordIndexViewType, setRecordIndexViewType] = useState<
+  const [recordIndexViewType, setRecordIndexViewType] = useRecoilState(
-    ViewType | undefined
+    recordIndexViewTypeState,
-  >(undefined);
+  );
-
   const { objectNameSingular } = useObjectNameSingularFromPlural({
     objectNamePlural,
   });

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { ViewType } from '@/views/types/ViewType';
+
+export const recordIndexViewTypeState = atom<ViewType | undefined>({
+  key: 'recordIndexViewTypeState',
+  default: undefined,
+});

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx

@@ -3,7 +3,6 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@@ -23,7 +22,6 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
 }));
 
 const onColumnsChange = jest.fn();
-const deleteEntity = jest.fn();
 const scopeId = 'scopeId';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -44,9 +42,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
           <RecordTableCellContext.Provider
             value={{ ...recordTableCell, columnIndex: 0 }}
           >
-            <EntityDeleteContext.Provider value={deleteEntity}>
+            {children}
-              {children}
-            </EntityDeleteContext.Provider>
           </RecordTableCellContext.Provider>
         </RecordTableRowContext.Provider>
       </FieldContext.Provider>
@@ -86,6 +82,5 @@ describe('useCloseRecordTableCell', () => {
     expect(result.current.isDragSelectionStartEnabled()).toBe(true);
     expect(result.current.isTableCellInEditMode).toBe(false);
     expect(setHotkeyScope).toHaveBeenCalledWith('table-soft-focus');
-    expect(deleteEntity).toHaveBeenCalled();
   });
 });

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell.ts

@@ -1,59 +1,19 @@
-import { useContext } from 'react';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
-
-import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
-import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
-import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 export const useCloseRecordTableCell = () => {
-  const { getTableRowIdsState } = useRecordTableStates();
-  const { columnIndex } = useContext(RecordTableCellContext);
-  const { entityId, fieldDefinition } = useContext(FieldContext);
-  const deleteOneRecord = useContext(EntityDeleteContext);
-
   const setHotkeyScope = useSetHotkeyScope();
   const { setDragSelectionStartEnabled } = useDragSelect();
 
   const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
 
-  const {
-    getDraftValueSelector: getFieldInputDraftValueSelector,
-    isDraftValueEmpty: isCurrentFieldInputValueEmpty,
-  } = useRecordFieldInput(
-    `${entityId}-${fieldDefinition?.metadata?.fieldName}`,
-  );
-
-  const currentFieldInputDraftValue = useRecoilValue(
-    getFieldInputDraftValueSelector(),
-  );
-
-  const isFirstColumnCell = columnIndex === 0;
-
-  const deleteRow = useRecoilCallback(({ snapshot }) => async () => {
-    const tableRowIds = getSnapshotValue(snapshot, getTableRowIdsState());
-
-    await deleteOneRecord(tableRowIds[0]);
-  });
-
   const closeTableCell = async () => {
     setDragSelectionStartEnabled(true);
     closeCurrentTableCellInEditMode();
     setHotkeyScope(TableHotkeyScope.TableSoftFocus);
-
-    if (
-      isFirstColumnCell &&
-      isCurrentFieldInputValueEmpty(currentFieldInputDraftValue)
-    ) {
-      await deleteRow();
-    }
   };
 
   return {

packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx

@@ -1,19 +1,15 @@
 import { useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
 import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { PageAddButton } from '@/ui/layout/page/PageAddButton';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
-import { PageHeader } from '@/ui/layout/page/PageHeader';
-import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { RecordIndexPageHeader } from '~/pages/object-record/RecordIndexPageHeader';
 
 const StyledIndexContainer = styled.div`
   display: flex;
@@ -28,20 +24,11 @@ export const RecordIndexPage = () => {
     objectNamePlural,
   });
 
-  const { findObjectMetadataItemByNamePlural } =
-    useObjectMetadataItemForSettings();
-
-  const { getIcon } = useIcons();
-  const Icon = getIcon(
-    findObjectMetadataItemByNamePlural(objectNamePlural)?.icon,
-  );
-
   const { createOneRecord: createOneObject } = useCreateOneRecord({
     objectNameSingular,
   });
 
   const recordIndexId = objectNamePlural ?? '';
-
   const setHotkeyScope = useSetHotkeyScope();
 
   const { setSelectedTableCellEditMode } = useSelectedTableCellEditMode({
@@ -49,7 +36,9 @@ export const RecordIndexPage = () => {
   });
 
   const handleAddButtonClick = async () => {
-    await createOneObject?.({});
+    await createOneObject?.({
+      position: 0,
+    });
 
     setSelectedTableCellEditMode(0, 0);
     setHotkeyScope(DEFAULT_CELL_SCOPE.scope, DEFAULT_CELL_SCOPE.customScopes);
@@ -57,15 +46,7 @@ export const RecordIndexPage = () => {
 
   return (
     <PageContainer>
-      <PageHeader
+      <RecordIndexPageHeader createRecord={handleAddButtonClick} />
-        title={
-          objectNamePlural.charAt(0).toUpperCase() + objectNamePlural.slice(1)
-        }
-        Icon={Icon}
-      >
-        <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
-        <PageAddButton onClick={handleAddButtonClick} />
-      </PageHeader>
       <PageBody>
         <StyledIndexContainer>
           <RecordIndexContainer

packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx

@@ -0,0 +1,40 @@
+import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
+import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import { PageAddButton } from '@/ui/layout/page/PageAddButton';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
+import { ViewType } from '@/views/types/ViewType';
+import { capitalize } from '~/utils/string/capitalize';
+
+type RecordIndexPageHeaderProps = {
+  createRecord: () => void;
+};
+
+export const RecordIndexPageHeader = ({
+  createRecord,
+}: RecordIndexPageHeaderProps) => {
+  const objectNamePlural = useParams().objectNamePlural ?? '';
+
+  const { findObjectMetadataItemByNamePlural } =
+    useObjectMetadataItemForSettings();
+
+  const { getIcon } = useIcons();
+  const Icon = getIcon(
+    findObjectMetadataItemByNamePlural(objectNamePlural)?.icon,
+  );
+
+  const recordIndexViewType = useRecoilValue(recordIndexViewTypeState);
+
+  return (
+    <PageHeader title={capitalize(objectNamePlural)} Icon={Icon}>
+      <PageHotkeysEffect onAddButtonClick={createRecord} />
+      {recordIndexViewType === ViewType.Table && (
+        <PageAddButton onClick={createRecord} />
+      )}
+    </PageHeader>
+  );
+};

packages/twenty-server/src/workspace/workspace-manager/standard-objects-prefill-data/company.ts

@@ -12,6 +12,7 @@ export const companyPrefillData = async (
       'domainName',
       'address',
       'employees',
+      'position',
     ])
     .orIgnore()
     .values([
@@ -20,30 +21,35 @@ export const companyPrefillData = async (
         domainName: 'airbnb.com',
         address: 'San Francisco',
         employees: 5000,
+        position: 1,
       },
       {
         name: 'Qonto',
         domainName: 'qonto.com',
         address: 'San Francisco',
         employees: 800,
+        position: 2,
       },
       {
         name: 'Stripe',
         domainName: 'stripe.com',
         address: 'San Francisco',
         employees: 8000,
+        position: 3,
       },
       {
         name: 'Figma',
         domainName: 'figma.com',
         address: 'San Francisco',
         employees: 800,
+        position: 4,
       },
       {
         name: 'Notion',
         domainName: 'notion.com',
         address: 'San Francisco',
         employees: 400,
+        position: 5,
       },
     ])
     .returning('*')