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>

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';

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} />,

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>

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>
   );
 };