Fix:Hide deleted filter component when reset button is clicked (#8880)

Resolve: #8874 

Problem :
When we are on the deleted records page and use the filter, if no
records are found, we see the no deleted recordName message along with a
button to remove the deleted filter. However, if we reset and filter
again, and still don't find any records, this message and button for the
deleted filter continue to display.
Solution: 
I noticed that the component RecordTableEmptyStateSoftDelete has this
button, and its visibility is controlled by the function
toggleSoftDeleteFilterState. If the state is true, the button appears;
if it's false, it doesn't. Therefore, we just need to call this function
when the reset button is clicked and set the state to false.
![All-Peopleand1morepage-Personal-MicrosoftEdge2024-12-0421-04-12-ezgif
com-video-to-gif-converter](https://github.com/user-attachments/assets/68e524ff-2902-4a25-a361-3bb8e1220ff8)

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -82,6 +82,7 @@ export const ViewBar = ({
             filterDropdownId={filterDropdownId}
             hasFilterButton
             viewBarId={viewBarId}
+            objectNamePlural={objectNamePlural}
             rightComponent={
               <UpdateViewButtonGroup
                 hotkeyScope={{

packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx

@@ -1,9 +1,11 @@
 import styled from '@emotion/styled';
 import { ReactNode, useMemo } from 'react';
 
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -28,6 +30,7 @@ export type ViewBarDetailsProps = {
   rightComponent?: ReactNode;
   filterDropdownId?: string;
   viewBarId: string;
+  objectNamePlural: string;
 };
 
 const StyledBar = styled.div`
@@ -101,6 +104,7 @@ export const ViewBarDetails = ({
   rightComponent,
   filterDropdownId,
   viewBarId,
+  objectNamePlural,
 }: ViewBarDetailsProps) => {
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
@@ -125,6 +129,13 @@ export const ViewBarDetails = ({
     availableSortDefinitionsComponentState,
   );
 
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural: objectNamePlural,
+  });
+  const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
+    objectNameSingular: objectNameSingular,
+    viewBarId: viewBarId,
+  });
   const { resetUnsavedViewStates } = useResetUnsavedViewStates();
   const canResetView = canPersistView && !hasFiltersQueryParams;
 
@@ -159,6 +170,7 @@ export const ViewBarDetails = ({
   const handleCancelClick = () => {
     if (isDefined(viewId)) {
       resetUnsavedViewStates(viewId);
+      toggleSoftDeleteFilterState(false);
     }
   };