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

Build column design for advanced filters (#12534)

Browse Source 
Figma
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=45225-472099&p=f&m=dev

A few design items need to be discussed with product (font, add filter
button...) to be consistent with existing advanced filter dropdown. I
will also add stories.

<img width="495" alt="Capture d’écran 2025-06-11 à 11 11 03"
src="https://github.com/user-attachments/assets/1fa2fa1e-b4b1-4456-9f9e-81083b0caac6"
/>
This commit is contained in:
Thomas Trompette
2025-06-11 14:01:00 +02:00
committed by GitHub
parent beba4b8313
commit ee7d4380d1
23 changed files with 453 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownColumn.tsx Normal file
View File

@ -0,0 +1,10 @@
import styled from '@emotion/styled';
const StyledColumn = styled.div`
display: flex;
flex-direction: column;
width: 100%;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const AdvancedFilterDropdownColumn = StyledColumn;

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

@ -1,15 +1,18 @@
import { AdvancedFilterLogicalOperatorDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import styled from '@emotion/styled';
import { useContext } from 'react';
import { capitalize } from 'twenty-shared/utils';
const StyledText = styled.div`
const StyledText = styled.div<{ noPadding?: boolean }>`
height: ${({ theme }) => theme.spacing(8)};
display: flex;
align-items: center;
padding-left: ${({ theme }) => theme.spacing(2.25)};
padding-left: ${({ theme, noPadding }) =>
noPadding ? 0 : theme.spacing(2.25)};
`;
const StyledContainer = styled.div`
@ -27,18 +30,22 @@ type AdvancedFilterLogicalOperatorCellProps = {
export const AdvancedFilterLogicalOperatorCell = ({
index,
recordFilterGroup,
}: AdvancedFilterLogicalOperatorCellProps) => (
<StyledContainer>
{index === 0 ? (
<StyledText>Where</StyledText>
) : index === 1 ? (
<AdvancedFilterLogicalOperatorDropdown
recordFilterGroup={recordFilterGroup}
/>
) : (
<StyledText>
{capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
</StyledText>
)}
</StyledContainer>
);
}: AdvancedFilterLogicalOperatorCellProps) => {
const { isColumn } = useContext(AdvancedFilterContext);
return (
<StyledContainer>
{index === 0 ? (
<StyledText noPadding={isColumn}>Where</StyledText>
) : index === 1 ? (
<AdvancedFilterLogicalOperatorDropdown
recordFilterGroup={recordFilterGroup}
/>
) : (
<StyledText noPadding={isColumn}>
{capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
</StyledText>
)}
</StyledContainer>
);
};

36
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilter.tsx Normal file
View File

@ -0,0 +1,36 @@
import { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useContext } from 'react';
export const AdvancedFilterRecordFilter = ({
recordFilterGroup,
recordFilter,
recordFilterIndex,
VariablePicker,
}: {
recordFilterGroup: RecordFilterGroup;
recordFilter: RecordFilter;
recordFilterIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
const { isColumn } = useContext(AdvancedFilterContext);
return isColumn ? (
<AdvancedFilterRecordFilterColumn
recordFilterGroup={recordFilterGroup}
recordFilter={recordFilter}
recordFilterIndex={recordFilterIndex}
VariablePicker={VariablePicker}
/>
) : (
<AdvancedFilterRecordFilterRow
recordFilterGroup={recordFilterGroup}
recordFilter={recordFilter}
recordFilterIndex={recordFilterIndex}
/>
);
};

63
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn.tsx Normal file
View File

@ -0,0 +1,63 @@
import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton';
import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import styled from '@emotion/styled';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const AdvancedFilterRecordFilterColumn = ({
recordFilterGroup,
recordFilter,
recordFilterIndex,
VariablePicker,
}: {
recordFilterGroup: RecordFilterGroup;
recordFilter: RecordFilter;
recordFilterIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
return (
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{
instanceId: getAdvancedFilterObjectFilterDropdownComponentInstanceId(
recordFilter.id,
),
}}
>
<AdvancedFilterDropdownColumn>
<StyledContainer>
<AdvancedFilterLogicalOperatorCell
index={recordFilterIndex}
recordFilterGroup={recordFilterGroup}
/>
<AdvancedFilterRecordFilterOptionsDropdown
recordFilterId={recordFilter.id}
/>
</StyledContainer>
<AdvancedFilterFieldSelectDropdownButton
recordFilterId={recordFilter.id}
/>
<AdvancedFilterRecordFilterOperandSelect
recordFilterId={recordFilter.id}
/>
<AdvancedFilterValueFormInput
recordFilterId={recordFilter.id}
VariablePicker={VariablePicker}
/>
</AdvancedFilterDropdownColumn>
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};

36
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup.tsx Normal file
View File

@ -0,0 +1,36 @@
import { AdvancedFilterRecordFilterGroupColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn';
import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { useContext } from 'react';
export const AdvancedFilterRecordFilterGroup = ({
parentRecordFilterGroup,
recordFilterGroup,
recordFilterGroupIndex,
VariablePicker,
}: {
parentRecordFilterGroup: RecordFilterGroup;
recordFilterGroup: RecordFilterGroup;
recordFilterGroupIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
const { isColumn } = useContext(AdvancedFilterContext);
return isColumn ? (
<AdvancedFilterRecordFilterGroupColumn
parentRecordFilterGroup={parentRecordFilterGroup}
recordFilterGroup={recordFilterGroup}
recordFilterGroupIndex={recordFilterGroupIndex}
VariablePicker={VariablePicker}
/>
) : (
<AdvancedFilterRecordFilterGroupRow
parentRecordFilterGroup={parentRecordFilterGroup}
recordFilterGroup={recordFilterGroup}
recordFilterGroupIndex={recordFilterGroupIndex}
VariablePicker={VariablePicker}
/>
);
};

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

@ -1,5 +1,5 @@
import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
@ -45,7 +45,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
return (
<StyledContainer isGrayBackground={hasParentRecordFilterGroup}>
{childRecordFilters.map((childRecordFilter, childRecordFilterIndex) => (
<AdvancedFilterRecordFilterRow
<AdvancedFilterRecordFilter
key={childRecordFilter.id}
recordFilter={childRecordFilter}
recordFilterIndex={childRecordFilterIndex}

44
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn.tsx Normal file
View File

@ -0,0 +1,44 @@
import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
import { AdvancedFilterRecordFilterGroupChildren } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren';
import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import styled from '@emotion/styled';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const AdvancedFilterRecordFilterGroupColumn = ({
parentRecordFilterGroup,
recordFilterGroup,
recordFilterGroupIndex,
VariablePicker,
}: {
parentRecordFilterGroup: RecordFilterGroup;
recordFilterGroup: RecordFilterGroup;
recordFilterGroupIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
return (
<AdvancedFilterDropdownColumn>
<StyledContainer>
<AdvancedFilterLogicalOperatorCell
index={recordFilterGroupIndex}
recordFilterGroup={parentRecordFilterGroup}
/>
<AdvancedFilterRecordFilterGroupOptionsDropdown
recordFilterGroupId={recordFilterGroup.id}
/>
</StyledContainer>
<AdvancedFilterRecordFilterGroupChildren
recordFilterGroupId={recordFilterGroup.id}
VariablePicker={VariablePicker}
/>
</AdvancedFilterDropdownColumn>
);
};

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

@ -1,4 +1,5 @@
import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand';
import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
@ -16,11 +17,12 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import styled from '@emotion/styled';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui/navigation';
const StyledContainer = styled.div`
width: 100px;
const StyledContainer = styled.div<{ isColumn?: boolean }>`
width: ${({ isColumn }) => (isColumn ? 'auto' : '100px')};
`;
type AdvancedFilterRecordFilterOperandSelectProps = {
@ -36,6 +38,8 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
currentRecordFiltersComponentState,
);
const { isColumn } = useContext(AdvancedFilterContext);
const filter = currentRecordFilters.find(
(recordFilter) => recordFilter.id === recordFilterId,
);
@ -82,7 +86,7 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
}
return (
<StyledContainer>
<StyledContainer isColumn={isColumn}>
<Dropdown
dropdownId={dropdownId}
clickableComponent={

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

@ -3,25 +3,20 @@ import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advance
import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
import { AdvancedFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueInput';
import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { isDefined } from 'twenty-shared/utils';
export const AdvancedFilterRecordFilterRow = ({
recordFilterGroup,
recordFilter,
recordFilterIndex,
VariablePicker,
}: {
recordFilterGroup: RecordFilterGroup;
recordFilter: RecordFilter;
recordFilterIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
return (
<ObjectFilterDropdownComponentInstanceContext.Provider
@ -36,20 +31,14 @@ export const AdvancedFilterRecordFilterRow = ({
index={recordFilterIndex}
recordFilterGroup={recordFilterGroup}
/>
<AdvancedFilterFieldSelectDropdownButton
recordFilterId={recordFilter.id}
/>
<AdvancedFilterRecordFilterOperandSelect
recordFilterId={recordFilter.id}
/>
{isDefined(VariablePicker) ? (
<AdvancedFilterValueFormInput
recordFilterId={recordFilter.id}
VariablePicker={VariablePicker}
/>
) : (
<AdvancedFilterValueInput recordFilterId={recordFilter.id} />
)}
<AdvancedFilterValueInput recordFilterId={recordFilter.id} />
<AdvancedFilterRecordFilterOptionsDropdown
recordFilterId={recordFilter.id}
/>

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

@ -1,7 +1,7 @@
import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';
import { AdvancedFilterRecordFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup';
import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
import { ADVANCED_FILTER_DROPDOWN_CONTENT_WIDTH } from '@/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
@ -45,14 +45,14 @@ export const AdvancedFilterRootRecordFilterGroup = () => {
isRecordFilterGroupChildARecordFilterGroup(
recordFilterGroupChild,
) ? (
<AdvancedFilterRecordFilterGroupRow
<AdvancedFilterRecordFilterGroup
key={recordFilterGroupChild.id}
parentRecordFilterGroup={rootRecordFilterGroup}
recordFilterGroup={recordFilterGroupChild}
recordFilterGroupIndex={recordFilterGroupChildIndex}
/>
) : (
<AdvancedFilterRecordFilterRow
<AdvancedFilterRecordFilter
key={recordFilterGroupChild.id}
recordFilterGroup={rootRecordFilterGroup}
recordFilter={recordFilterGroupChild}

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

@ -10,12 +10,12 @@ import { JsonValue } from 'type-fest';
export const AdvancedFilterValueFormCompositeFieldInput = ({
recordFilter,
VariablePicker,
onChange,
VariablePicker,
}: {
recordFilter: RecordFilter;
VariablePicker: VariablePickerComponent;
onChange: (newValue: JsonValue) => void;
VariablePicker?: VariablePickerComponent;
}) => {
const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
subFieldNameUsedInDropdownComponentState,
@ -25,8 +25,8 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
return (
<>
{filterType === 'ADDRESS' &&
(subFieldNameUsedInDropdown === 'addressCountry' ? (
{filterType === 'ADDRESS' ? (
subFieldNameUsedInDropdown === 'addressCountry' ? (
<FormCountrySelectInput
selectedCountryName={recordFilter.value}
onChange={onChange}
@ -38,9 +38,9 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
onChange={onChange}
VariablePicker={VariablePicker}
/>
))}
{filterType === 'CURRENCY' &&
(recordFilter.subFieldName === 'currencyCode' ? (
)
) : filterType === 'CURRENCY' ? (
recordFilter.subFieldName === 'currencyCode' ? (
<FormCountryCodeSelectInput
selectedCountryCode={recordFilter.value}
onChange={onChange}
@ -52,7 +52,28 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
onChange={onChange}
VariablePicker={VariablePicker}
/>
) : null)}
) : null
) : filterType === 'PHONES' ? (
recordFilter.subFieldName === 'primaryPhoneNumber' ? (
<FormNumberFieldInput
defaultValue={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
) : (
<FormTextFieldInput
defaultValue={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
)
) : (
<FormTextFieldInput
defaultValue={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
)}
</>
);
};

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

@ -1,10 +1,13 @@
import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
@ -15,12 +18,14 @@ export const AdvancedFilterValueFormInput = ({
VariablePicker,
}: {
recordFilterId: string;
VariablePicker: VariablePickerComponent;
VariablePicker?: VariablePickerComponent;
}) => {
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
subFieldNameUsedInDropdownComponentState,
);
@ -35,9 +40,20 @@ export const AdvancedFilterValueFormInput = ({
useApplyObjectFilterDropdownFilterValue();
const handleChange = (newValue: JsonValue) => {
applyObjectFilterDropdownFilterValue(newValue as string);
applyObjectFilterDropdownFilterValue(String(newValue));
};
const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const fieldDefinition = fieldMetadataItemUsedInDropdown
? formatFieldMetadataItemAsFieldDefinition({
field: fieldMetadataItemUsedInDropdown,
objectMetadataItem: objectMetadataItem,
})
: null;
if (isDisabled) {
return null;
}
@ -57,7 +73,7 @@ export const AdvancedFilterValueFormInput = ({
field={{
type: recordFilter.type as FieldMetadataType,
label: '',
metadata: {} as FieldMetadata,
metadata: fieldDefinition?.metadata as FieldMetadata,
}}
defaultValue={recordFilter.value}
onChange={handleChange}

7
packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useDefaultFieldMetadataItemForFilter.ts
View File

@ -1,3 +1,4 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@ -7,11 +8,13 @@ import { isDefined } from 'twenty-shared/utils';
export const useDefaultFieldMetadataItemForFilter = () => {
const { currentView } = useGetCurrentViewOnly();
const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
const objectMetadataId = currentView?.objectMetadataId;
const objectMetadataId =
currentView?.objectMetadataId ?? activeObjectMetadataItems[0]?.id;
if (!isDefined(objectMetadataId)) {
throw new Error('Object metadata id is missing from current view');
throw new Error('Could not find default object metadata item for filter');
}
const { objectMetadataItem } = useObjectMetadataItemById({

1
packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts
View File

@ -2,6 +2,7 @@ import { createContext } from 'react';
type AdvancedFilterContextType = {
onUpdate?: () => void;
isColumn?: boolean;
};
export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(

4
packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
View File

@ -10,11 +10,11 @@ import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-typ
import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
import { FormPhoneFieldInput } from '@/object-record/record-field/form-types/components/FormPhoneFieldInput';
import { FormRawJsonFieldInput } from '@/object-record/record-field/form-types/components/FormRawJsonFieldInput';
import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
import { FormRichTextV2FieldInput } from '@/object-record/record-field/form-types/components/FormRichTextV2FieldInput';
import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { FormUuidFieldInput } from '@/object-record/record-field/form-types/components/FormUuidFieldInput';
import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import {
@ -42,11 +42,11 @@ import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/is
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldPhones } from '@/object-record/record-field/types/guards/isFieldPhones';
import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
import { isFieldRichTextV2 } from '@/object-record/record-field/types/guards/isFieldRichTextV2';
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
import { isFieldUuid } from '@/object-record/record-field/types/guards/isFieldUuid';
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
import { JsonValue } from 'type-fest';
type FormFieldInputProps = {

2
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepNodeDetail.tsx
View File

@ -5,9 +5,9 @@ import { WorkflowDiagramRunStatus } from '@/workflow/workflow-diagram/types/Work
import { WorkflowActionServerlessFunction } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowActionServerlessFunction';
import { WorkflowEditActionCreateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord';
import { WorkflowEditActionDeleteRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { WorkflowEditActionSendEmail } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail';
import { WorkflowEditActionUpdateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
import { WorkflowEditActionFormFiller } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller';
import { WorkflowEditTriggerCronForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm';
import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm';

2
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
View File

@ -4,9 +4,9 @@ import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrTh
import { WorkflowActionServerlessFunction } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowActionServerlessFunction';
import { WorkflowEditActionCreateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord';
import { WorkflowEditActionDeleteRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { WorkflowEditActionSendEmail } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail';
import { WorkflowEditActionUpdateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
import { WorkflowEditActionFormBuilder } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder';
import { WorkflowEditTriggerCronForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm';
import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm';

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionFindRecords.stories.tsx
View File

@ -1,7 +1,8 @@
import { WorkflowFindRecordsAction } from '@/workflow/types/Workflow';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -10,7 +11,6 @@ import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorato
import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
const DEFAULT_ACTION = {
id: getWorkflowNodeIdMock(),

11
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts
View File

@ -23,10 +23,9 @@ export const RECORD_ACTIONS: Array<{
type: 'DELETE_RECORD',
icon: 'IconTrash',
},
// TODO: Add search records action
// {
// label: 'Search Records',
// type: 'FIND_RECORDS',
// icon: 'IconSearch',
// },
{
label: 'Search Records',
type: 'FIND_RECORDS',
icon: 'IconSearch',
},
];

74
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords.tsx → packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx
View File

@ -11,12 +11,14 @@ import { RecordFilterGroup } from '@/object-record/record-filter-group/types/Rec
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
import { WorkflowFindRecordFilters } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFilters';
import { WorkflowFindRecordFiltersEffect } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFiltersEffect';
import { WorkflowFindRecordsFilters } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters';
import { WorkflowFindRecordsFiltersEffect } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFiltersEffect';
import { useActionHeaderTypeOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionHeaderTypeOrThrow';
import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionIconColorOrThrow';
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
@ -52,6 +54,7 @@ export const WorkflowEditActionFindRecords = ({
actionOptions,
}: WorkflowEditActionFindRecordsProps) => {
const { getIcon } = useIcons();
const { t } = useLingui();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
@ -116,7 +119,7 @@ export const WorkflowEditActionFindRecords = ({
const headerIcon = getActionIcon(action.type);
const headerIconColor = useActionIconColorOrThrow(action.type);
const headerType = useActionHeaderTypeOrThrow(action.type);
const instanceId = `workflow-edit-action-record-find-records-${action.id}`;
const instanceId = `workflow-edit-action-record-find-records-${action.id}-${formData.objectName}`;
return (
<>
@ -161,42 +164,45 @@ export const WorkflowEditActionFindRecords = ({
<HorizontalSeparator noMargin />
{isDefined(selectedObjectMetadataItem) && (
<RecordIndexContextProvider
value={{
indexIdentifierUrl: () => '',
onIndexRecordsLoaded: () => {},
objectNamePlural: selectedObjectMetadataItem.labelPlural,
objectNameSingular: selectedObjectMetadataItem.nameSingular,
objectMetadataItem: selectedObjectMetadataItem,
recordIndexId: instanceId,
objectPermissionsByObjectMetadataId,
}}
>
<RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId }}
<div>
<InputLabel>{t`Conditions`}</InputLabel>
<RecordIndexContextProvider
value={{
indexIdentifierUrl: () => '',
onIndexRecordsLoaded: () => {},
objectNamePlural: selectedObjectMetadataItem.labelPlural,
objectNameSingular: selectedObjectMetadataItem.nameSingular,
objectMetadataItem: selectedObjectMetadataItem,
recordIndexId: instanceId,
objectPermissionsByObjectMetadataId,
}}
>
<RecordFiltersComponentInstanceContext.Provider
<RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId }}
>
<WorkflowFindRecordFilters
objectMetadataItem={selectedObjectMetadataItem}
onChange={(filter: FindRecordsActionFilter) => {
const newFormData: FindRecordsFormData = {
...formData,
filter,
};
<RecordFiltersComponentInstanceContext.Provider
value={{ instanceId }}
>
<WorkflowFindRecordsFilters
objectMetadataItem={selectedObjectMetadataItem}
onChange={(filter: FindRecordsActionFilter) => {
const newFormData: FindRecordsFormData = {
...formData,
filter,
};
setFormData(newFormData);
setFormData(newFormData);
saveAction(newFormData);
}}
/>
<WorkflowFindRecordFiltersEffect
defaultValue={formData.filter}
/>
</RecordFiltersComponentInstanceContext.Provider>
</RecordFilterGroupsComponentInstanceContext.Provider>
</RecordIndexContextProvider>
saveAction(newFormData);
}}
/>
<WorkflowFindRecordsFiltersEffect
defaultValue={formData.filter}
/>
</RecordFiltersComponentInstanceContext.Provider>
</RecordFilterGroupsComponentInstanceContext.Provider>
</RecordIndexContextProvider>
</div>
)}
<FormNumberFieldInput

74
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx Normal file
View File

@ -0,0 +1,74 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
import { isDefined } from 'twenty-shared/utils';
import { IconFilter } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { v4 } from 'uuid';
export const WorkflowFindRecordsAddFilterButton = ({
defaultFieldMetadataItem,
}: {
defaultFieldMetadataItem: FieldMetadataItem;
}) => {
const rootRecordFilterGroup = useRecoilComponentValueV2(
rootLevelRecordFilterGroupComponentSelector,
);
const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup();
const { upsertRecordFilter } = useUpsertRecordFilter();
const { createEmptyRecordFilterFromFieldMetadataItem } =
useCreateEmptyRecordFilterFromFieldMetadataItem();
const setHasInitializedCurrentRecordFilters =
useSetRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordFiltersComponentFamilyState,
{},
);
const addRootRecordFilterGroup = () => {
const alreadyHasAdvancedFilterGroup = isDefined(rootRecordFilterGroup);
if (!alreadyHasAdvancedFilterGroup) {
setHasInitializedCurrentRecordFilters(false);
const newRecordFilterGroup = {
id: v4(),
logicalOperator: RecordFilterGroupLogicalOperator.AND,
};
upsertRecordFilterGroup(newRecordFilterGroup);
if (!isDefined(defaultFieldMetadataItem)) {
throw new Error('Missing default filter definition');
}
const { newRecordFilter } = createEmptyRecordFilterFromFieldMetadataItem(
defaultFieldMetadataItem,
);
newRecordFilter.recordFilterGroupId = newRecordFilterGroup.id;
upsertRecordFilter(newRecordFilter);
}
};
return (
<Button
Icon={IconFilter}
size="small"
variant="secondary"
accent="default"
onClick={addRootRecordFilterGroup}
ariaLabel="Add filter"
title="Add filter"
/>
);
};

115
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFilters.tsx → packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx
View File

@ -1,40 +1,40 @@
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
import { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
import { AdvancedFilterRecordFilterGroupColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { isRecordFilterGroupChildARecordFilterGroup } from '@/object-record/advanced-filter/utils/isRecordFilterGroupChildARecordFilterGroup';
import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeRecordGqlOperationFilter';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
import { WorkflowFindRecordsAddFilterButton } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton';
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconFilter } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { v4 } from 'uuid';
const StyledContainer = styled.div`
align-items: start;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(1)};
`;
export const WorkflowFindRecordFilters = ({
const StyledChildContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)};
width: 100%;
`;
export const WorkflowFindRecordsFilters = ({
objectMetadataItem,
onChange,
}: {
@ -50,13 +50,6 @@ export const WorkflowFindRecordFilters = ({
recordFilterGroupId: rootRecordFilterGroup?.id,
});
const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup();
const { upsertRecordFilter } = useUpsertRecordFilter();
const { createEmptyRecordFilterFromFieldMetadataItem } =
useCreateEmptyRecordFilterFromFieldMetadataItem();
const availableFieldMetadataItemsForFilter = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
@ -70,31 +63,6 @@ export const WorkflowFindRecordFilters = ({
objectMetadataItem?.labelIdentifierFieldMetadataId,
) ?? availableFieldMetadataItemsForFilter[0];
const addRootRecordFilterGroup = () => {
const alreadyHasAdvancedFilterGroup = isDefined(rootRecordFilterGroup);
if (!alreadyHasAdvancedFilterGroup) {
const newRecordFilterGroup = {
id: v4(),
logicalOperator: RecordFilterGroupLogicalOperator.AND,
};
upsertRecordFilterGroup(newRecordFilterGroup);
if (!isDefined(defaultFieldMetadataItem)) {
throw new Error('Missing default filter definition');
}
const { newRecordFilter } = createEmptyRecordFilterFromFieldMetadataItem(
defaultFieldMetadataItem,
);
newRecordFilter.recordFilterGroupId = newRecordFilterGroup.id;
upsertRecordFilter(newRecordFilter);
}
};
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
@ -142,45 +110,42 @@ export const WorkflowFindRecordFilters = ({
<AdvancedFilterContext.Provider
value={{
onUpdate,
isColumn: true,
}}
>
{isDefined(rootRecordFilterGroup) ? (
<StyledContainer>
{childRecordFiltersAndRecordFilterGroups.map(
(recordFilterGroupChild, recordFilterGroupChildIndex) =>
isRecordFilterGroupChildARecordFilterGroup(
recordFilterGroupChild,
) ? (
<AdvancedFilterRecordFilterGroupRow
key={recordFilterGroupChild.id}
parentRecordFilterGroup={rootRecordFilterGroup}
recordFilterGroup={recordFilterGroupChild}
recordFilterGroupIndex={recordFilterGroupChildIndex}
VariablePicker={WorkflowVariablePicker}
/>
) : (
<AdvancedFilterRecordFilterRow
key={recordFilterGroupChild.id}
recordFilterGroup={rootRecordFilterGroup}
recordFilter={recordFilterGroupChild}
recordFilterIndex={recordFilterGroupChildIndex}
VariablePicker={WorkflowVariablePicker}
/>
),
)}
<StyledChildContainer>
{childRecordFiltersAndRecordFilterGroups.map(
(recordFilterGroupChild, recordFilterGroupChildIndex) =>
isRecordFilterGroupChildARecordFilterGroup(
recordFilterGroupChild,
) ? (
<AdvancedFilterRecordFilterGroupColumn
key={recordFilterGroupChild.id}
parentRecordFilterGroup={rootRecordFilterGroup}
recordFilterGroup={recordFilterGroupChild}
recordFilterGroupIndex={recordFilterGroupChildIndex}
VariablePicker={WorkflowVariablePicker}
/>
) : (
<AdvancedFilterRecordFilterColumn
key={recordFilterGroupChild.id}
recordFilterGroup={rootRecordFilterGroup}
recordFilter={recordFilterGroupChild}
recordFilterIndex={recordFilterGroupChildIndex}
VariablePicker={WorkflowVariablePicker}
/>
),
)}
</StyledChildContainer>
<AdvancedFilterAddFilterRuleSelect
recordFilterGroup={rootRecordFilterGroup}
/>
</StyledContainer>
) : (
<Button
Icon={IconFilter}
size="small"
variant="secondary"
accent="default"
onClick={addRootRecordFilterGroup}
ariaLabel="Add filter"
title="Add filter"
<WorkflowFindRecordsAddFilterButton
defaultFieldMetadataItem={defaultFieldMetadataItem}
/>
)}
</AdvancedFilterContext.Provider>

12
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFiltersEffect.tsx → packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFiltersEffect.tsx
View File

@ -5,11 +5,11 @@ import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const WorkflowFindRecordFiltersEffect = ({
export const WorkflowFindRecordsFiltersEffect = ({
defaultValue,
}: {
defaultValue?: FindRecordsActionFilter;
@ -52,8 +52,8 @@ export const WorkflowFindRecordFiltersEffect = ({
isDefined(defaultValue?.recordFilters)
) {
setCurrentRecordFilters(defaultValue.recordFilters ?? []);
setHasInitializedCurrentRecordFilters(true);
setShouldSetAdvancedFilterDropdownStates(true);
setHasInitializedCurrentRecordFilters(true);
}
}, [
setCurrentRecordFilters,
@ -65,10 +65,10 @@ export const WorkflowFindRecordFiltersEffect = ({
useEffect(() => {
if (
!hasInitializedCurrentRecordFilterGroups &&
isDefined(defaultValue?.recordFilterGroups)
isDefined(defaultValue?.recordFilterGroups) &&
defaultValue.recordFilterGroups.length > 0
) {
setCurrentRecordFilterGroups(defaultValue.recordFilterGroups ?? []);
setCurrentRecordFilterGroups(defaultValue.recordFilterGroups);
setHasInitializedCurrentRecordFilterGroups(true);
}
}, [