admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Clean up object record filter (#9550)

Browse Source 
Last clean up of object dropdown filter states v1. 

Removed old state scope context component.
This commit is contained in:
Lucas Bordeau
2025-01-10 18:37:29 +01:00
committed by GitHub
parent 4efa959401
commit ed51bff2f4
12 changed files with 44 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/activities/tasks/components/ObjectTasks.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
const StyledContainer = styled.div`
display: flex;
@ -19,9 +19,11 @@ export const ObjectTasks = ({
}) => {
return (
<StyledContainer>
<ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: 'entity-tasks-filter-scope' }}
>
<TaskGroups targetableObjects={[targetableObject]} />
</ObjectFilterDropdownScope>
</ObjectFilterDropdownComponentInstanceContext.Provider>
</StyledContainer>
);
};

8
packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx
View File

@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@ -15,9 +15,11 @@ const meta: Meta<typeof TaskGroups> = {
component: TaskGroups,
decorators: [
(Story) => (
<ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: 'entity-tasks-filter-scope' }}
>
<Story />
</ObjectFilterDropdownScope>
</ObjectFilterDropdownComponentInstanceContext.Provider>
),
ComponentWithRouterDecorator,
ComponentWithRecoilScopeDecorator,

8
packages/twenty-front/src/modules/activities/tasks/hooks/__tests__/useTasks.test.tsx
View File

@ -4,7 +4,7 @@ import { RecoilRoot } from 'recoil';
import { useActivities } from '@/activities/hooks/useActivities';
import { useTasks } from '@/activities/tasks/hooks/useTasks';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
const tasks = [
{
@ -46,9 +46,11 @@ jest.mock('@/activities/hooks/useActivities', () => ({
const Wrapper = ({ children }: { children: ReactNode }) => (
<RecoilRoot>
<ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: 'entity-tasks-filter-scope' }}
>
{children}
</ObjectFilterDropdownScope>
</ObjectFilterDropdownComponentInstanceContext.Provider>
</RecoilRoot>
);

8
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilter.tsx
View File

@ -2,7 +2,7 @@ import { AdvancedFilterViewFilterFieldSelect } from '@/object-record/advanced-fi
import { AdvancedFilterViewFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect';
import { AdvancedFilterViewFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput';
import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { configurableViewFilterOperands } from '@/object-record/object-filter-dropdown/utils/configurableViewFilterOperands';
import styled from '@emotion/styled';
@ -32,7 +32,9 @@ export const AdvancedFilterViewFilter = ({
}
return (
<ObjectFilterDropdownScope filterScopeId={filter.id}>
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: filter.id }}
>
<StyledRow>
<AdvancedFilterViewFilterFieldSelect viewFilterId={filter.id} />
<AdvancedFilterViewFilterOperandSelect viewFilterId={filter.id} />
@ -42,6 +44,6 @@ export const AdvancedFilterViewFilter = ({
)}
</StyledValueDropdownContainer>
</StyledRow>
</ObjectFilterDropdownScope>
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};

13
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton.tsx
View File

@ -1,4 +1,3 @@
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
@ -33,13 +32,11 @@ export const ObjectFilterDropdownButton = ({
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: filterDropdownId }}
>
<ObjectFilterDropdownScope filterScopeId={filterDropdownId}>
{hasOnlyOneEntityFilter ? (
<SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
) : (
<MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
)}
</ObjectFilterDropdownScope>
{hasOnlyOneEntityFilter ? (
<SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
) : (
<MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
)}
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};

5
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
View File

@ -4,7 +4,6 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
@ -115,9 +114,7 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
value={{ instanceId: instanceId, onColumnsChange: () => {} }}
>
<ViewComponentInstanceContext.Provider value={{ instanceId }}>
<ObjectFilterDropdownScope filterScopeId={instanceId}>
<Story />
</ObjectFilterDropdownScope>
<Story />
</ViewComponentInstanceContext.Provider>
</RecordTableComponentInstanceContext.Provider>
</ObjectFilterDropdownComponentInstanceContext.Provider>

66
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdownStates.ts
View File

@ -1,66 +0,0 @@
import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
import { onFilterSelectComponentState } from '@/object-record/object-filter-dropdown/states/onFilterSelectComponentState';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
export const useFilterDropdownStates = (componentInstanceId: string) => {
const filterDefinitionUsedInDropdownState =
filterDefinitionUsedInDropdownComponentState.atomFamily({
instanceId: componentInstanceId,
});
const objectFilterDropdownSearchInputState =
objectFilterDropdownSearchInputComponentState.atomFamily({
instanceId: componentInstanceId,
});
const objectFilterDropdownSelectedRecordIdsState =
objectFilterDropdownSelectedRecordIdsComponentState.atomFamily({
instanceId: componentInstanceId,
});
const objectFilterDropdownSelectedOptionValuesState =
objectFilterDropdownSelectedOptionValuesComponentState.atomFamily({
instanceId: componentInstanceId,
});
const selectedFilterState = selectedFilterComponentState.atomFamily({
instanceId: componentInstanceId,
});
const selectedOperandInDropdownState =
selectedOperandInDropdownComponentState.atomFamily({
instanceId: componentInstanceId,
});
const onFilterSelectState = onFilterSelectComponentState.atomFamily({
instanceId: componentInstanceId,
});
const advancedFilterViewFilterGroupIdState =
advancedFilterViewFilterGroupIdComponentState.atomFamily({
instanceId: componentInstanceId,
});
const advancedFilterViewFilterIdState =
advancedFilterViewFilterIdComponentState.atomFamily({
instanceId: componentInstanceId,
});
return {
filterDefinitionUsedInDropdownState,
objectFilterDropdownSearchInputState,
objectFilterDropdownSelectedRecordIdsState,
objectFilterDropdownSelectedOptionValuesState,
selectedFilterState,
selectedOperandInDropdownState,
onFilterSelectState,
advancedFilterViewFilterGroupIdState,
advancedFilterViewFilterIdState,
};
};

11
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts
View File

@ -18,30 +18,37 @@ type SelectFilterParams = {
filterDefinition: FilterDefinition;
};
export const useSelectFilterDefinitionUsedInDropdown = () => {
export const useSelectFilterDefinitionUsedInDropdown = (
componentInstanceId?: string,
) => {
const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
filterDefinitionUsedInDropdownComponentState,
componentInstanceId,
);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
componentInstanceId,
);
const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
objectFilterDropdownSearchInputComponentState,
componentInstanceId,
);
const advancedFilterViewFilterGroupId = useRecoilComponentValueV2(
advancedFilterViewFilterGroupIdComponentState,
componentInstanceId,
);
const advancedFilterViewFilterId = useRecoilComponentValueV2(
advancedFilterViewFilterIdComponentState,
componentInstanceId,
);
const setHotkeyScope = useSetHotkeyScope();
const { applyRecordFilter } = useApplyRecordFilter();
const { applyRecordFilter } = useApplyRecordFilter(componentInstanceId);
const selectFilterDefinitionUsedInDropdown = ({
filterDefinition,

25
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSetFilterDefinitionUsedInDropdownInScope.ts
View File

@ -1,25 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { filterDefinitionUsedInDropdownComponentState } from '../states/filterDefinitionUsedInDropdownComponentState';
import { FilterDefinition } from '../types/FilterDefinition';
export const useSetFilterDefinitionUsedInDropdownInScope = () => {
const setFilterDefinitionUsedInDropdownInScope = useRecoilCallback(
({ set }) =>
(
componentInstanceId: string,
filterDefinition: FilterDefinition | null,
) => {
const filterDefinitionUsedInDropdownState =
filterDefinitionUsedInDropdownComponentState.atomFamily({
instanceId: componentInstanceId,
});
set(filterDefinitionUsedInDropdownState, filterDefinition);
},
[],
);
return {
setFilterDefinitionUsedInDropdownInScope,
};
};

21
packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope.tsx
View File

@ -1,21 +0,0 @@
import { ReactNode } from 'react';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
type ObjectFilterDropdownScopeProps = {
children: ReactNode;
filterScopeId: string;
};
export const ObjectFilterDropdownScope = ({
children,
filterScopeId,
}: ObjectFilterDropdownScopeProps) => {
return (
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: filterScopeId }}
>
{children}
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};

13
packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnFilter.ts
View File

@ -3,7 +3,7 @@ import { v4 } from 'uuid';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useSetFilterDefinitionUsedInDropdownInScope } from '@/object-record/object-filter-dropdown/hooks/useSetFilterDefinitionUsedInDropdownInScope';
import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
@ -50,8 +50,8 @@ export const useHandleToggleColumnFilter = ({
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
const { setFilterDefinitionUsedInDropdownInScope } =
useSetFilterDefinitionUsedInDropdownInScope();
const { selectFilterDefinitionUsedInDropdown } =
useSelectFilterDefinitionUsedInDropdown(viewBarId);
const handleToggleColumnFilter = useCallback(
async (fieldMetadataId: string) => {
@ -94,10 +94,7 @@ export const useHandleToggleColumnFilter = ({
await upsertCombinedViewFilter(newFilter);
setFilterDefinitionUsedInDropdownInScope(
newFilter.id,
filterDefinition,
);
selectFilterDefinitionUsedInDropdown({ filterDefinition });
}
openDropdown(existingViewFilter?.id ?? newFilterId);
@ -106,7 +103,7 @@ export const useHandleToggleColumnFilter = ({
openDropdown,
columnDefinitions,
upsertCombinedViewFilter,
setFilterDefinitionUsedInDropdownInScope,
selectFilterDefinitionUsedInDropdown,
currentViewWithCombinedFiltersAndSorts,
availableFilterDefinitions,
],

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

@ -3,7 +3,7 @@ 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 { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
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';
@ -226,9 +226,9 @@ export const ViewBarDetails = ({
defaultViewFilters,
availableFilterDefinitions,
).map((viewFilter) => (
<ObjectFilterDropdownScope
<ObjectFilterDropdownComponentInstanceContext.Provider
key={viewFilter.id}
filterScopeId={viewFilter.id}
value={{ instanceId: viewFilter.id }}
>
<DropdownScope dropdownScopeId={viewFilter.id}>
<ViewBarFilterEffect filterDropdownId={viewFilter.id} />
@ -240,7 +240,7 @@ export const ViewBarDetails = ({
viewFilterDropdownId={viewFilter.id}
/>
</DropdownScope>
</ObjectFilterDropdownScope>
</ObjectFilterDropdownComponentInstanceContext.Provider>
))}
</StyledChipcontainer>
{hasFilterButton && (