From e23b8ecca1956b566cdb09d533e203181508d1a5 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Tue, 12 Sep 2023 12:26:47 -0700
Subject: [PATCH] Fix bug with FilterDropdown on Tasks page

---
 .../activities/tasks/components/TaskList.tsx  |  2 +-
 .../components/FilterDropdownButton.tsx       |  4 ++
 front/src/pages/tasks/Tasks.tsx               | 52 +++++++++++--------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/front/src/modules/activities/tasks/components/TaskList.tsx b/front/src/modules/activities/tasks/components/TaskList.tsx
index f6624027b..473c09201 100644
--- a/front/src/modules/activities/tasks/components/TaskList.tsx
+++ b/front/src/modules/activities/tasks/components/TaskList.tsx
@@ -20,7 +20,7 @@ const StyledContainer = styled.div`
   padding: 8px 24px;
 `;
 
-const StyledTitleBar = styled.h3`
+const StyledTitleBar = styled.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: ${({ theme }) => theme.spacing(4)};
diff --git a/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx b/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx
index f1c8d415a..36d9cd3cc 100644
--- a/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx
@@ -33,6 +33,10 @@ export function FilterDropdownButton({
   const hasOnlyOneEntityFilter =
     availableFilters.length === 1 && availableFilters[0].type === 'entity';
 
+  if (!availableFilters.length) {
+    return <></>;
+  }
+
   return hasOnlyOneEntityFilter ? (
     <SingleEntityFilterDropdownButton
       context={context}
diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx
index 6e15db36c..78ae9c6c0 100644
--- a/front/src/pages/tasks/Tasks.tsx
+++ b/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 { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { PageBody } from '@/ui/layout/components/PageBody';
@@ -44,29 +45,34 @@ export function Tasks() {
 
   return (
     <PageContainer>
-      <RecoilScope SpecificContext={TasksRecoilScopeContext}>
-        <PageHeader title="Tasks" Icon={IconCheckbox}>
-          <PageAddTaskButton />
-        </PageHeader>
-        <PageBody>
-          <StyledTasksContainer>
-            <TopBar
-              leftComponent={
-                <StyledTabListContainer>
-                  <TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
-                </StyledTabListContainer>
-              }
-              rightComponent={
-                <FilterDropdownButton
-                  key="tasks-filter-dropdown-button"
-                  context={TasksRecoilScopeContext}
-                  hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
-                />
-              }
-            />
-            <TaskGroups />
-          </StyledTasksContainer>
-        </PageBody>
+      <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+        <RecoilScope SpecificContext={TasksRecoilScopeContext}>
+          <PageHeader title="Tasks" Icon={IconCheckbox}>
+            <PageAddTaskButton />
+          </PageHeader>
+          <PageBody>
+            <StyledTasksContainer>
+              <TopBar
+                leftComponent={
+                  <StyledTabListContainer>
+                    <TabList
+                      context={TasksRecoilScopeContext}
+                      tabs={TASK_TABS}
+                    />
+                  </StyledTabListContainer>
+                }
+                rightComponent={
+                  <FilterDropdownButton
+                    key="tasks-filter-dropdown-button"
+                    context={TasksRecoilScopeContext}
+                    hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
+                  />
+                }
+              />
+              <TaskGroups />
+            </StyledTasksContainer>
+          </PageBody>
+        </RecoilScope>
       </RecoilScope>
     </PageContainer>
   );