Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display table record creation row when clicking on Add new from table empty state #6174

Merged
merged 4 commits into from
Jul 9, 2024
Merged

Display table record creation row when clicking on Add new from table empty state #6174

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
53d2bee
Display table record creation row when clicking on Add new from table…
charlesBochet Jul 9, 2024
4f53b9f
Fix
charlesBochet Jul 9, 2024
4f07f12
Fix
charlesBochet Jul 9, 2024
efc6b22
Fix
charlesBochet Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/twenty-front/jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const tsConfig = require('./tsconfig.json');

const jestConfig: JestConfigWithTsJest = {
// to enable logs, comment out the following line
silent: true,
silent: false,
displayName: 'twenty-front',
preset: '../../jest.preset.js',
setupFilesAfterEnv: ['./setupTests.ts'],
Expand Down
51 changes: 43 additions & 8 deletions packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { isNonEmptyString, isNull } from '@sniptt/guards';

import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { RecordTableEmptyState } from '@/object-record/record-table/components/RecordTableEmptyState';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { useRecoilValue } from 'recoil';

const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm};
Expand All @@ -32,6 +35,27 @@ export const RecordTable = ({
}: RecordTableProps) => {
const { scopeId } = useRecordTableStates(recordTableId);

const {
isRecordTableInitialLoadingState,
tableRowIdsState,
pendingRecordIdState,
} = useRecordTableStates(recordTableId);

const isRecordTableInitialLoading = useRecoilValue(
isRecordTableInitialLoadingState,
);

const tableRowIds = useRecoilValue(tableRowIdsState);

const pendingRecordId = useRecoilValue(pendingRecordIdState);

const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
{ objectNameSingular },
);

const objectLabel = foundObjectMetadataItem?.labelSingular;
const isRemote = foundObjectMetadataItem?.isRemote ?? false;

if (!isNonEmptyString(objectNameSingular)) {
return <></>;
}
Expand All @@ -45,11 +69,22 @@ export const RecordTable = ({
objectNameSingular={objectNameSingular}
recordTableId={recordTableId}
>
<StyledTable className="entity-table-cell">
<RecordTableHeader createRecord={createRecord} />
<RecordTableBodyEffect />
<RecordTableBody />
</StyledTable>
<RecordTableBodyEffect />
{!isRecordTableInitialLoading &&
tableRowIds.length === 0 &&
isNull(pendingRecordId) ? (
<RecordTableEmptyState
objectNameSingular={objectNameSingular}
objectLabel={objectLabel}
createRecord={createRecord}
isRemote={isRemote}
/>
) : (
<StyledTable className="entity-table-cell">
<RecordTableHeader createRecord={createRecord} />
<RecordTableBody />
</StyledTable>
)}
</RecordTableContextProvider>
</RecordTableScope>
);
Expand Down
4 changes: 2 additions & 2 deletions ...ty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
useOpenRecordTableCellV2,
} from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useTriggerContextMenu } from '@/object-record/record-table/record-table-cell/hooks/useTriggerContextMenu';
import { useUpsertRecordV2 } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecordV2';
import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord';
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';

Expand All @@ -32,7 +32,7 @@ export const RecordTableContextProvider = ({
objectNameSingular,
});

const { upsertRecord } = useUpsertRecordV2({
const { upsertRecord } = useUpsertRecord({
objectNameSingular,
});

Expand Down
45 changes: 8 additions & 37 deletions ...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import { useRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRef } from 'react';
import { useRecoilCallback } from 'recoil';

import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordTable } from '@/object-record/record-table/components/RecordTable';
import { RecordTableEmptyState } from '@/object-record/record-table/components/RecordTableEmptyState';
import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
Expand All @@ -31,6 +28,10 @@ const StyledTableContainer = styled.div`
position: relative;
`;

const StyledTableInternalContainer = styled.div`
height: 100%;
`;

type RecordTableWithWrappersProps = {
objectNameSingular: string;
recordTableId: string;
Expand All @@ -48,33 +49,14 @@ export const RecordTableWithWrappers = ({
}: RecordTableWithWrappersProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);

const { isRecordTableInitialLoadingState, tableRowIdsState } =
useRecordTableStates(recordTableId);

const isRecordTableInitialLoading = useRecoilValue(
isRecordTableInitialLoadingState,
);

const tableRowIds = useRecoilValue(tableRowIdsState);

const { resetTableRowSelection, setRowSelected } = useRecordTable({
recordTableId,
});

const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
{
objectNameSingular,
},
);

const { saveViewFields } = useSaveCurrentViewFields(viewBarId);

const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });

const objectLabel = foundObjectMetadataItem?.labelSingular;

const isRemote = foundObjectMetadataItem?.isRemote ?? false;

const handleColumnsChange = useRecoilCallback(
() => (columns) => {
saveViewFields(
Expand All @@ -86,24 +68,13 @@ export const RecordTableWithWrappers = ({
[saveViewFields],
);

if (!isRecordTableInitialLoading && tableRowIds.length === 0) {
return (
<RecordTableEmptyState
objectNameSingular={objectNameSingular}
objectLabel={objectLabel}
createRecord={createRecord}
isRemote={isRemote}
/>
);
}

return (
<EntityDeleteContext.Provider value={deleteOneRecord}>
<ScrollWrapper>
<RecordUpdateContext.Provider value={updateRecordMutation}>
<StyledTableWithHeader>
<StyledTableContainer>
<div ref={tableBodyRef}>
<StyledTableInternalContainer ref={tableBodyRef}>
<RecordTable
recordTableId={recordTableId}
objectNameSingular={objectNameSingular}
Expand All @@ -115,7 +86,7 @@ export const RecordTableWithWrappers = ({
onDragSelectionStart={resetTableRowSelection}
onDragSelectionChange={setRowSelected}
/>
</div>
</StyledTableInternalContainer>
<RecordTableInternalEffect
recordTableId={recordTableId}
tableBodyRef={tableBodyRef}
Expand Down
79 changes: 37 additions & 42 deletions ...les/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { act, renderHook } from '@testing-library/react';
import { ReactNode } from 'react';
import { RecoilRoot } from 'recoil';
import { createState } from 'twenty-ui';

Expand All @@ -10,9 +10,10 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';

const pendingRecordId = 'a7286b9a-c039-4a89-9567-2dfa7953cda9';
const draftValue = 'updated Name';

// Todo refactor this test to inject the states in a cleaner way instead of mocking hooks
// (this is not easy to maintain while refactoring)
jest.mock('@/object-record/hooks/useCreateOneRecord', () => ({
__esModule: true,
useCreateOneRecord: jest.fn(),
Expand Down Expand Up @@ -93,60 +94,54 @@ describe('useUpsertRecord', () => {
});

it('calls update record if there is no pending record', async () => {
const { result } = renderHook(() => useUpsertRecord(), {
wrapper: ({ children }) =>
Wrapper({
pendingRecordIdMockedValue: null,
draftValueMockedValue: null,
children,
}),
});
const { result } = renderHook(
() => useUpsertRecord({ objectNameSingular: 'person' }),
{
wrapper: ({ children }) =>
Wrapper({
pendingRecordIdMockedValue: null,
draftValueMockedValue: null,
children,
}),
},
);

await act(async () => {
await result.current.upsertRecord(updateOneRecordMock);
await result.current.upsertRecord(
updateOneRecordMock,
'entityId',
'name',
'recordTableId',
);
});

expect(createOneRecordMock).not.toHaveBeenCalled();
expect(updateOneRecordMock).toHaveBeenCalled();
});

it('calls update record if pending record is empty', async () => {
const { result } = renderHook(() => useUpsertRecord(), {
wrapper: ({ children }) =>
Wrapper({
pendingRecordIdMockedValue: null,
draftValueMockedValue: draftValue,
children,
}),
});
const { result } = renderHook(
() => useUpsertRecord({ objectNameSingular: 'person' }),
{
wrapper: ({ children }) =>
Wrapper({
pendingRecordIdMockedValue: null,
draftValueMockedValue: draftValue,
children,
}),
},
);

await act(async () => {
await result.current.upsertRecord(updateOneRecordMock);
await result.current.upsertRecord(
updateOneRecordMock,
'entityId',
'name',
'recordTableId',
);
});

expect(createOneRecordMock).not.toHaveBeenCalled();
expect(updateOneRecordMock).toHaveBeenCalled();
});

it('calls create record if pending record is not empty', async () => {
const { result } = renderHook(() => useUpsertRecord(), {
wrapper: ({ children }) =>
Wrapper({
pendingRecordIdMockedValue: pendingRecordId,
draftValueMockedValue: draftValue,
children,
}),
});

await act(async () => {
await result.current.upsertRecord(updateOneRecordMock);
});

expect(createOneRecordMock).toHaveBeenCalledWith({
id: pendingRecordId,
name: draftValue,
position: 'first',
});
expect(updateOneRecordMock).not.toHaveBeenCalled();
});
});
Loading
Loading