admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Right drawer to edit records (#5551)

Browse Source 
This PR introduces a new side panel to edit records and the ability to
minimize the side panel.

The goal is leverage this sidepanel to be able to create records while
being in another show page.

I'm opening the PR for feedback since it involved refactoring and
therefore already touches a lot of files, even though it was quick to
implement.

<img width="1503" alt="Screenshot 2024-05-23 at 17 41 37"
src="https://github.com/twentyhq/twenty/assets/6399865/6f17e7a8-f4e9-4eb4-b392-c756db7198ac">
This commit is contained in:
Félix Malfait
2024-06-03 17:15:05 +02:00
committed by GitHub
parent 8e8078d596
commit 09bfb617b2
61 changed files with 957 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
View File

@ -5,7 +5,7 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
const Wrapper = ({ children }: { children: ReactNode }) => (
<RecoilRoot>
@ -18,12 +18,12 @@ describe('useOpenActivityRightDrawer', () => {
const { result } = renderHook(
() => {
const openActivityRightDrawer = useOpenActivityRightDrawer();
const viewableActivityId = useRecoilValue(viewableActivityIdState);
const viewableRecordId = useRecoilValue(viewableRecordIdState);
const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
return {
openActivityRightDrawer,
activityIdInDrawer,
viewableActivityId,
viewableRecordId,
};
},
{
@ -32,11 +32,11 @@ describe('useOpenActivityRightDrawer', () => {
);
expect(result.current.activityIdInDrawer).toBeNull();
expect(result.current.viewableActivityId).toBeNull();
expect(result.current.viewableRecordId).toBeNull();
act(() => {
result.current.openActivityRightDrawer('123');
});
expect(result.current.activityIdInDrawer).toBe('123');
expect(result.current.viewableActivityId).toBe('123');
expect(result.current.viewableRecordId).toBe('123');
});
});

10
packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
View File

@ -5,9 +5,9 @@ import { RecoilRoot, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
const mockUUID = '37873e04-2f83-4468-9ab7-3f87da6cafad';
@ -28,7 +28,7 @@ describe('useOpenCreateActivityDrawer', () => {
const { result } = renderHook(
() => {
const openActivityRightDrawer = useOpenCreateActivityDrawer();
const viewableActivityId = useRecoilValue(viewableActivityIdState);
const viewableRecordId = useRecoilValue(viewableRecordIdState);
const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
const setObjectMetadataItems = useSetRecoilState(
objectMetadataItemsState,
@ -36,7 +36,7 @@ describe('useOpenCreateActivityDrawer', () => {
return {
openActivityRightDrawer,
activityIdInDrawer,
viewableActivityId,
viewableRecordId,
setObjectMetadataItems,
};
},
@ -50,7 +50,7 @@ describe('useOpenCreateActivityDrawer', () => {
});
expect(result.current.activityIdInDrawer).toBeNull();
expect(result.current.viewableActivityId).toBeNull();
expect(result.current.viewableRecordId).toBeNull();
await act(async () => {
result.current.openActivityRightDrawer({
type: 'Note',
@ -58,6 +58,6 @@ describe('useOpenCreateActivityDrawer', () => {
});
});
expect(result.current.activityIdInDrawer).toBe(mockUUID);
expect(result.current.viewableActivityId).toBe(mockUUID);
expect(result.current.viewableRecordId).toBe(mockUUID);
});
});

11
packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
View File

@ -1,18 +1,17 @@
import { useRecoilState, useSetRecoilState } from 'recoil';
import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { viewableActivityIdState } from '../states/viewableActivityIdState';
export const useOpenActivityRightDrawer = () => {
const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
useRightDrawer();
const [viewableActivityId, setViewableActivityId] = useRecoilState(
viewableActivityIdState,
const [viewableRecordId, setViewableRecordId] = useRecoilState(
viewableRecordIdState,
);
const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
const setHotkeyScope = useSetHotkeyScope();
@ -21,13 +20,13 @@ export const useOpenActivityRightDrawer = () => {
if (
isRightDrawerOpen &&
rightDrawerPage === RightDrawerPages.EditActivity &&
viewableActivityId === activityId
viewableRecordId === activityId
) {
return;
}
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(activityId);
setViewableRecordId(activityId);
setActivityIdInDrawer(activityId);
openRightDrawer(RightDrawerPages.EditActivity);
};

6
packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
View File

@ -6,8 +6,8 @@ import { activityTargetableEntityArrayState } from '@/activities/states/activity
import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
import { temporaryActivityForEditorState } from '@/activities/states/temporaryActivityForEditorState';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { ActivityType } from '@/activities/types/Activity';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
@ -26,7 +26,7 @@ export const useOpenCreateActivityDrawer = () => {
const setActivityTargetableEntityArray = useSetRecoilState(
activityTargetableEntityArrayState,
);
const setViewableActivityId = useSetRecoilState(viewableActivityIdState);
const setViewableRecordId = useSetRecoilState(viewableRecordIdState);
const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState);
@ -59,7 +59,7 @@ export const useOpenCreateActivityDrawer = () => {
setTemporaryActivityForEditor(createdActivityInCache);
setIsCreatingActivity(true);
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(createdActivityInCache.id);
setViewableRecordId(createdActivityInCache.id);
setActivityTargetableEntityArray(targetableObjects ?? []);
openRightDrawer(RightDrawerPages.CreateActivity);
setIsUpsertingActivityInDB(false);