diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx
new file mode 100644
index 0000000000..24263e6a72
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/__tests__/RecordCalendarCard.test.tsx
@@ -0,0 +1,126 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { RecordCalendarCard } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard';
+
+const mockOpenRecordFromIndexView = jest.fn();
+const mockUseGetCurrentViewOnly = jest.fn();
+
+jest.mock('@/views/hooks/useGetCurrentViewOnly', () => ({
+ useGetCurrentViewOnly: () => mockUseGetCurrentViewOnly(),
+}));
+jest.mock(
+ '@/object-record/record-index/hooks/useOpenRecordFromIndexView',
+ () => ({
+ useOpenRecordFromIndexView: () => ({
+ openRecordFromIndexView: mockOpenRecordFromIndexView,
+ }),
+ }),
+);
+jest.mock(
+ '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyState',
+ () => ({ useAtomComponentFamilyState: () => [false, jest.fn()] }),
+);
+jest.mock(
+ '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue',
+ () => ({ useAtomComponentStateValue: () => false }),
+);
+jest.mock(
+ '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow',
+ () => ({ useAvailableComponentInstanceIdOrThrow: () => 'calendar-id' }),
+);
+jest.mock('@/ui/utilities/state/jotai/hooks/useSetAtomComponentState', () => ({
+ useSetAtomComponentState: () => jest.fn(),
+}));
+jest.mock('@/ui/layout/dropdown/hooks/useOpenDropdown', () => ({
+ useOpenDropdown: () => ({ openDropdown: jest.fn() }),
+}));
+jest.mock(
+ '@/object-record/record-field-list/contexts/RecordFieldsScopeContext',
+ () => ({
+ RecordFieldsScopeContextProvider: ({
+ children,
+ }: {
+ children: React.ReactNode;
+ }) => children,
+ }),
+);
+jest.mock(
+ '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal',
+ () => ({ RecordCalendarCardCellHoveredPortal: () => null }),
+);
+jest.mock(
+ '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal',
+ () => ({ RecordCalendarCardCellEditModePortal: () => null }),
+);
+jest.mock(
+ '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader',
+ () => ({
+ RecordCalendarCardHeader: () =>
,
+ }),
+);
+jest.mock(
+ '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody',
+ () => ({
+ RecordCalendarCardBody: () => ,
+ }),
+);
+jest.mock('@/object-record/record-card/components/RecordCard', () => ({
+ RecordCard: ({
+ children,
+ onClick,
+ }: {
+ children: React.ReactNode;
+ onClick?: () => void;
+ }) => (
+
+ ),
+}));
+jest.mock('twenty-ui/layout', () => ({
+ AnimatedEaseInOut: ({
+ children,
+ isOpen,
+ }: {
+ children: React.ReactNode;
+ isOpen: boolean;
+ }) => (isOpen ? children : null),
+}));
+
+describe('RecordCalendarCard', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('shows the full card body without making the whole card clickable', () => {
+ mockUseGetCurrentViewOnly.mockReturnValue({
+ currentView: { isCompact: false },
+ });
+
+ render();
+
+ expect(screen.getByTestId('card-header')).toBeInTheDocument();
+ expect(screen.getByTestId('card-body')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByTestId('record-card'));
+
+ expect(mockOpenRecordFromIndexView).not.toHaveBeenCalled();
+ });
+
+ it('hides the body and makes the whole compact card clickable', () => {
+ mockUseGetCurrentViewOnly.mockReturnValue({
+ currentView: { isCompact: true },
+ });
+
+ render();
+
+ expect(screen.getByTestId('card-header')).toBeInTheDocument();
+ expect(screen.queryByTestId('card-body')).not.toBeInTheDocument();
+
+ fireEvent.click(screen.getByTestId('record-card'));
+
+ expect(mockOpenRecordFromIndexView).toHaveBeenCalledWith({
+ recordId: 'record-id',
+ });
+ });
+});
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx
index f1fc0ffb64..b5743a5dc6 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/RecordCalendarTimeGrid.tsx
@@ -111,8 +111,17 @@ const StyledDayNumber = styled.span<{ isToday: boolean }>`
`;
const StyledAllDayLabel = styled(StyledHeaderGutter)`
- border-top: 1px solid ${themeCssVariables.border.color.light};
- height: 28px;
+ align-items: flex-start;
+ height: auto;
+ min-height: 28px;
+ padding-top: ${themeCssVariables.spacing[1]};
+`;
+
+const StyledAllDayGrid = styled.div<{ dayCount: number }>`
+ display: grid;
+ grid-template-columns:
+ ${RECORD_CALENDAR_WEEK_DIMENSIONS.timeGutterWidth}px
+ repeat(${({ dayCount }) => dayCount}, minmax(120px, 1fr));
`;
const StyledGrid = styled.div<{ dayCount: number }>`
@@ -568,22 +577,20 @@ export const RecordCalendarTimeGrid = ({
);
})}
- {isAllDayView && (
- <>
- {t`All day`}
- {days.map(({ date }) => (
-
- ))}
- >
- )}
+ {isAllDayView && (
+
+ {t`All day`}
+ {days.map(({ date }) => (
+
+ ))}
+
+ )}
{isTimedView && (
{
const recordIds = useAtomComponentFamilySelectorValue(
@@ -43,16 +43,9 @@ export const RecordCalendarTimeGridAllDayCell = ({
return (
{allDayRecordIds.map((recordId) => (
-
+
+
+
))}
);
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx
index 82376c2e18..255d3f677d 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/time-grid/components/__tests__/RecordCalendarTimeGridAllDayCell.test.tsx
@@ -14,20 +14,10 @@ jest.mock(
}),
);
jest.mock(
- '@/object-record/record-calendar/week/components/RecordCalendarWeekEvent',
+ '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard',
() => ({
- RecordCalendarWeekEvent: ({
- isAllDay,
- recordId,
- }: {
- isAllDay: boolean;
- recordId: string;
- }) => (
-
+ RecordCalendarCard: ({ recordId }: { recordId: string }) => (
+
),
}),
);
@@ -44,41 +34,31 @@ describe('RecordCalendarTimeGridAllDayCell', () => {
render(
,
);
expect(
- screen.getAllByTestId('all-day-event').map((element) => ({
- isAllDay: element.dataset.isAllDay,
- recordId: element.dataset.recordId,
- })),
- ).toEqual([
- {
- isAllDay: 'true',
- recordId: 'first',
- },
- {
- isAllDay: 'true',
- recordId: 'second',
- },
- {
- isAllDay: 'true',
- recordId: 'third',
- },
- {
- isAllDay: 'true',
- recordId: 'fourth',
- },
- {
- isAllDay: 'true',
- recordId: 'fifth',
- },
- ]);
+ screen
+ .getAllByTestId('all-day-card')
+ .map((element) => element.dataset.recordId),
+ ).toEqual(['first', 'second', 'third', 'fourth', 'fifth']);
expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument();
});
+
+ it('does not render DATE_TIME records in the all-day cell', () => {
+ mockUseAtomComponentFamilySelectorValue.mockReturnValue(['first']);
+
+ render(
+ ,
+ );
+
+ expect(screen.queryByTestId('all-day-card')).not.toBeInTheDocument();
+ });
});