Activity as standard object (#6219)

In this PR I layout the first steps to migrate Activity to a traditional Standard objects Since this is a big transition, I'd rather split it into several deployments / PRs <img width="1512" alt="image" src="https://github.com/user-attachments/assets/012e2bbf-9d1b-4723-aaf6-269ef588b050"> --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: bosiraphael <71827178+bosiraphael@users.noreply.github.com> Co-authored-by: Weiko <corentin@twenty.com> Co-authored-by: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com> Co-authored-by: Prateek Jain <prateekj1171998@gmail.com>
2024-07-31 15:36:11 +02:00
parent defcee2a02
commit 80c0fc7ff1
239 changed files with 18418 additions and 8671 deletions
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@ -2,7 +2,12 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRef } from 'react';
-import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
+import {
+  useRecoilCallback,
+  useRecoilState,
+  useRecoilValue,
+  useSetRecoilState,
+} from 'recoil';
 import { Key } from 'ts-key-enum';

 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
@ -16,7 +21,6 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';

 import { useRightDrawer } from '../hooks/useRightDrawer';
-import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
@ -49,8 +53,7 @@ export const RightDrawer = () => {

  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);

-  const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
-  const [, setIsRightDrawerAnimationCompleted] = useRecoilState(
+  const setIsRightDrawerAnimationCompleted = useSetRecoilState(
    isRightDrawerAnimationCompletedState,
  );

@ -101,7 +104,7 @@ export const RightDrawer = () => {
  const isMobile = useIsMobile();

  const rightDrawerWidth = isRightDrawerOpen
-    ? isMobile || isRightDrawerExpanded
+    ? isMobile
      ? '100%'
      : theme.rightDrawerWidth
    : '0';
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
@ -4,8 +4,6 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { RightDrawerCalendarEvent } from '@/activities/calendar/right-drawer/components/RightDrawerCalendarEvent';
 import { RightDrawerAIChat } from '@/activities/copilot/right-drawer/components/RightDrawerAIChat';
 import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread';
-import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
-import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
@ -31,14 +29,6 @@ const StyledRightDrawerBody = styled.div`
 `;

 const RIGHT_DRAWER_PAGES_CONFIG = {
-  [RightDrawerPages.CreateActivity]: {
-    page: <RightDrawerCreateActivity />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.CreateActivity} />,
-  },
-  [RightDrawerPages.EditActivity]: {
-    page: <RightDrawerEditActivity />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.EditActivity} />,
-  },
  [RightDrawerPages.ViewEmailThread]: {
    page: <RightDrawerEmailThread />,
    topBar: <RightDrawerTopBar page={RightDrawerPages.ViewEmailThread} />,
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
@ -3,8 +3,9 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Chip, ChipAccent, ChipSize, useIcons } from 'twenty-ui';

-import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { RightDrawerTopBarCloseButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton';
 import { RightDrawerTopBarExpandButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton';
@ -62,6 +63,8 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
    viewableRecordNameSingularState,
  );

+  const viewableRecordId = useRecoilValue(viewableRecordIdState);
+
  const { objectMetadataItem } = useObjectMetadataItem({
    objectNameSingular: viewableRecordNameSingular ?? 'company',
  });
@ -80,20 +83,15 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
      onClick={handleOnclick}
      isRightDrawerMinimized={isRightDrawerMinimized}
    >
-      {!isRightDrawerMinimized &&
-        (page === RightDrawerPages.EditActivity ||
-          page === RightDrawerPages.CreateActivity) && <ActivityActionBar />}
-      {!isRightDrawerMinimized &&
-        page !== RightDrawerPages.EditActivity &&
-        page !== RightDrawerPages.CreateActivity && (
-          <Chip
-            label={label}
-            leftComponent={<Icon size={theme.icon.size.md} />}
-            size={ChipSize.Large}
-            accent={ChipAccent.TextSecondary}
-            clickable={false}
-          />
-        )}
+      {!isRightDrawerMinimized && (
+        <Chip
+          label={label}
+          leftComponent={<Icon size={theme.icon.size.md} />}
+          size={ChipSize.Large}
+          accent={ChipAccent.TextSecondary}
+          clickable={false}
+        />
+      )}
      {isRightDrawerMinimized && (
        <StyledMinimizeTopBarTitleContainer>
          <StyledMinimizeTopBarIcon>
@ -106,8 +104,15 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
        {!isMobile && !isRightDrawerMinimized && (
          <RightDrawerTopBarMinimizeButton />
        )}
+
        {!isMobile && !isRightDrawerMinimized && (
-          <RightDrawerTopBarExpandButton />
+          <RightDrawerTopBarExpandButton
+            to={
+              getBasePathToShowPage({
+                objectNameSingular: viewableRecordNameSingular ?? '',
+              }) + viewableRecordId
+            }
+          />
        )}
        <RightDrawerTopBarCloseButton />
      </StyledTopBarWrapper>
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
@ -1,33 +1,19 @@
-import {
-  IconLayoutSidebarRightCollapse,
-  IconLayoutSidebarRightExpand,
-} from 'twenty-ui';
-
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { IconExternalLink } from 'twenty-ui';

-export const RightDrawerTopBarExpandButton = () => {
-  const { isRightDrawerExpanded, downsizeRightDrawer, expandRightDrawer } =
-    useRightDrawer();
-
-  const handleButtonClick = () => {
-    if (isRightDrawerExpanded === true) {
-      downsizeRightDrawer();
-      return;
-    }
-    expandRightDrawer();
-  };
+export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => {
+  const { closeRightDrawer } = useRightDrawer();

  return (
-    <LightIconButton
-      size="medium"
-      accent="tertiary"
-      Icon={
-        isRightDrawerExpanded
-          ? IconLayoutSidebarRightCollapse
-          : IconLayoutSidebarRightExpand
-      }
-      onClick={handleButtonClick}
-    />
+    <UndecoratedLink to={to}>
+      <LightIconButton
+        size="medium"
+        accent="tertiary"
+        Icon={IconExternalLink}
+        onClick={closeRightDrawer}
+      />
+    </UndecoratedLink>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageIcons.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageIcons.ts
@ -1,8 +1,6 @@
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';

 export const RIGHT_DRAWER_PAGE_ICONS = {
-  [RightDrawerPages.CreateActivity]: 'IconNote',
-  [RightDrawerPages.EditActivity]: 'IconNote',
  [RightDrawerPages.ViewEmailThread]: 'IconMail',
  [RightDrawerPages.ViewCalendarEvent]: 'IconCalendarEvent',
  [RightDrawerPages.ViewRecord]: 'Icon123',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageTitles.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageTitles.ts
@ -1,8 +1,6 @@
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';

 export const RIGHT_DRAWER_PAGE_TITLES = {
-  [RightDrawerPages.CreateActivity]: 'Create Activity',
-  [RightDrawerPages.EditActivity]: 'Edit Activity',
  [RightDrawerPages.ViewEmailThread]: 'Email Thread',
  [RightDrawerPages.ViewCalendarEvent]: 'Calendar Event',
  [RightDrawerPages.ViewRecord]: 'Record Editor',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/tests/useRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/tests/useRightDrawer.test.tsx
@ -1,8 +1,7 @@
-import { act } from 'react-dom/test-utils';
 import { renderHook } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
 import { RecoilRoot, useRecoilValue } from 'recoil';

-import { isRightDrawerExpandedState } from '../../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../../states/rightDrawerPageState';
 import { RightDrawerPages } from '../../types/RightDrawerPages';
@ -13,7 +12,6 @@ describe('useRightDrawer', () => {
    const useCombinedHooks = () => {
      const { openRightDrawer, closeRightDrawer } = useRightDrawer();
      const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
-      const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);

      const rightDrawerPage = useRecoilValue(rightDrawerPageState);

@ -21,7 +19,6 @@ describe('useRightDrawer', () => {
        openRightDrawer,
        closeRightDrawer,
        isRightDrawerOpen,
-        isRightDrawerExpanded,
        rightDrawerPage,
      };
    };
@ -31,26 +28,21 @@ describe('useRightDrawer', () => {
    });

    expect(result.current.rightDrawerPage).toBeNull();
-    expect(result.current.isRightDrawerExpanded).toBeFalsy();
    expect(result.current.isRightDrawerOpen).toBeFalsy();
    expect(result.current.openRightDrawer).toBeInstanceOf(Function);
    expect(result.current.closeRightDrawer).toBeInstanceOf(Function);

    await act(async () => {
-      result.current.openRightDrawer(RightDrawerPages.CreateActivity);
+      result.current.openRightDrawer(RightDrawerPages.ViewRecord);
    });

-    expect(result.current.rightDrawerPage).toEqual(
-      RightDrawerPages.CreateActivity,
-    );
-    expect(result.current.isRightDrawerExpanded).toBeFalsy();
+    expect(result.current.rightDrawerPage).toEqual(RightDrawerPages.ViewRecord);
    expect(result.current.isRightDrawerOpen).toBeTruthy();

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

-    expect(result.current.isRightDrawerExpanded).toBeFalsy();
    expect(result.current.isRightDrawerOpen).toBeFalsy();
  });
 });
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
@ -1,25 +1,22 @@
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilValue } from 'recoil';

 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
 import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';

-import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';

 export const useRightDrawer = () => {
-  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
-  const [isRightDrawerExpanded] = useRecoilState(isRightDrawerExpandedState);
-  const [isRightDrawerMinimized] = useRecoilState(isRightDrawerMinimizedState);
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);

-  const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
+  const rightDrawerPage = useRecoilValue(rightDrawerPageState);

  const openRightDrawer = useRecoilCallback(
    ({ set }) =>
      (rightDrawerPage: RightDrawerPages) => {
        set(rightDrawerPageState, rightDrawerPage);
-        set(isRightDrawerExpandedState, false);
        set(isRightDrawerOpenState, true);
        set(isRightDrawerMinimizedState, false);
      },
@ -29,7 +26,6 @@ export const useRightDrawer = () => {
  const closeRightDrawer = useRecoilCallback(
    ({ set }) =>
      () => {
-        set(isRightDrawerExpandedState, false);
        set(isRightDrawerOpenState, false);
        set(isRightDrawerMinimizedState, false);
      },
@ -39,7 +35,6 @@ export const useRightDrawer = () => {
  const minimizeRightDrawer = useRecoilCallback(
    ({ set }) =>
      () => {
-        set(isRightDrawerExpandedState, false);
        set(isRightDrawerOpenState, true);
        set(isRightDrawerMinimizedState, true);
      },
@ -50,32 +45,11 @@ export const useRightDrawer = () => {
    ({ set }) =>
      () => {
        set(isRightDrawerMinimizedState, false);
-        set(isRightDrawerExpandedState, false);
        set(isRightDrawerOpenState, true);
      },
    [],
  );

-  const expandRightDrawer = useRecoilCallback(
-    ({ set }) =>
-      () => {
-        set(isRightDrawerExpandedState, true);
-        set(isRightDrawerOpenState, true);
-        set(isRightDrawerMinimizedState, false);
-      },
-    [],
-  );
-
-  const downsizeRightDrawer = useRecoilCallback(
-    ({ set }) =>
-      () => {
-        set(isRightDrawerExpandedState, false);
-        set(isRightDrawerOpenState, true);
-        set(isRightDrawerMinimizedState, false);
-      },
-    [],
-  );
-
  const isSameEventThanRightDrawerClose = useRecoilCallback(
    ({ snapshot }) =>
      (event: MouseEvent | TouchEvent) => {
@ -95,14 +69,11 @@ export const useRightDrawer = () => {
  return {
    rightDrawerPage,
    isRightDrawerOpen,
-    isRightDrawerExpanded,
    isRightDrawerMinimized,
    openRightDrawer,
    closeRightDrawer,
    minimizeRightDrawer,
    maximizeRightDrawer,
-    expandRightDrawer,
-    downsizeRightDrawer,
    isSameEventThanRightDrawerClose,
  };
 };
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts
@ -1,6 +0,0 @@
-import { createState } from 'twenty-ui';
-
-export const isRightDrawerExpandedState = createState<boolean>({
-  key: 'isRightDrawerExpandedState',
-  defaultValue: false,
-});
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts
@ -1,6 +1,4 @@
 export enum RightDrawerPages {
-  CreateActivity = 'create-activity',
-  EditActivity = 'edit-activity',
  ViewEmailThread = 'view-email-thread',
  ViewCalendarEvent = 'view-calendar-event',
  ViewRecord = 'view-record',