Fix Bug Tasks Page not switching tab

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -1,15 +1,16 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/tasksTabListComponentId';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
-import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-import { useRecoilValue } from 'recoil';
 
 const StyledTaskGroupEmptyContainer = styled.div`
   align-items: center;
@@ -68,7 +69,7 @@ export const TaskGroups = ({
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const { activeTabIdState } = useTabList('task-groups-tab-list');
+  const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
   const activeTabId = useRecoilValue(activeTabIdState);
 
   if (

packages/twenty-front/src/modules/activities/tasks/constants/tasksTabListComponentId.ts

@@ -0,0 +1 @@
+export const TASKS_TAB_LIST_COMPONENT_ID = 'tasks-tab-list';

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -23,6 +23,8 @@ export const useTasks = ({
     filterDropdownId,
   });
 
+  const isTargettingObjectRecords = isNonEmptyArray(targetableObjects);
+
   const targetableObjectsFilter =
     targetableObjects.reduce<LeafObjectRecordFilter>(
       (aggregateFilter, targetableObject) => {
@@ -44,15 +46,20 @@ export const useTasks = ({
   const { records: activityTargets } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.ActivityTarget,
     filter: targetableObjectsFilter,
+    skip: !isTargettingObjectRecords,
   });
 
   const skipRequest = !isNonEmptyArray(activityTargets) && !selectedFilter;
 
-  const idFilter = {
+  const idFilter = isTargettingObjectRecords
-    id: {
+    ? {
-      in: activityTargets.map((activityTarget) => activityTarget.activityId),
+        id: {
-    },
+          in: activityTargets.map(
-  };
+            (activityTarget) => activityTarget.activityId,
+          ),
+        },
+      }
+    : { id: {} };
 
   const assigneeIdFilter = selectedFilter
     ? {

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { Threads } from '@/activities/emails/components/Threads';
 import { Attachments } from '@/activities/files/components/Attachments';
@@ -15,12 +16,10 @@ import {
   IconTimelineEvent,
 } from '@/ui/display/icon';
 import { TabList } from '@/ui/layout/tab/components/TabList';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
-import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-import { useRecoilValue } from 'recoil';
-
 const StyledShowPageRightContainer = styled.div`
   display: flex;
   flex: 1 0 0;

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-import { Tab } from './Tab';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
-import { useRecoilValue } from 'recoil';
+
+import { Tab } from './Tab';
 
 type SingleTabProps = {
   title: string;

packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts

@@ -1,6 +1,7 @@
-import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
 import { useSetRecoilState } from 'recoil';
 
+import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
+
 export const useTabList = (tabListId?: string) => {
   const { activeTabIdState } = useTabListStates({
     tabListScopeId: `${tabListId}-scope`,

packages/twenty-front/src/pages/tasks/Tasks.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { PageAddTaskButton } from '@/activities/tasks/components/PageAddTaskButton';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/tasksTabListComponentId';
 import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/display/icon/index';
@@ -58,7 +59,10 @@ export const Tasks = () => {
             <TopBar
               leftComponent={
                 <StyledTabListContainer>
-                  <TabList tabListId="tasks-tab-list" tabs={TASK_TABS} />
+                  <TabList
+                    tabListId={TASKS_TAB_LIST_COMPONENT_ID}
+                    tabs={TASK_TABS}
+                  />
                 </StyledTabListContainer>
               }
               rightComponent={