diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx index 8a78fee849..19a1807915 100644 --- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx +++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx @@ -3,6 +3,7 @@ import { CommandMenuAIChatThreadsPage } from '@/command-menu/pages/AIChatThreads import { CommandMenuAskAIPage } from '@/command-menu/pages/ask-ai/components/CommandMenuAskAIPage'; import { CommandMenuCalendarEventPage } from '@/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage'; import { CommandMenuMessageThreadPage } from '@/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage'; +import { CommandMenuPageLayoutGraphFilter } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter'; import { CommandMenuPageLayoutGraphTypeSelect } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect'; import { CommandMenuPageLayoutIframeConfig } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeConfig'; import { CommandMenuPageLayoutWidgetTypeSelect } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect'; @@ -48,6 +49,10 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map< CommandMenuPages.PageLayoutGraphTypeSelect, , ], + [ + CommandMenuPages.PageLayoutGraphFilter, + , + ], [ CommandMenuPages.PageLayoutIframeConfig, , diff --git a/packages/twenty-front/src/modules/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader.tsx b/packages/twenty-front/src/modules/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader.tsx new file mode 100644 index 0000000000..00f9cdef08 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader.tsx @@ -0,0 +1,39 @@ +import styled from '@emotion/styled'; +import { IconChevronLeft } from 'twenty-ui/display'; +import { IconButton } from 'twenty-ui/input'; + +const StyledContainer = styled.div` + align-items: center; + display: flex; + + flex-direction: row; +`; + +const StyledTextContainer = styled.div` + color: ${({ theme }) => theme.font.color.primary}; + font-size: ${({ theme }) => theme.font.size.md}; + + padding-left: ${({ theme }) => theme.spacing(1)}; + padding-bottom: ${({ theme }) => theme.spacing(0.2)}; +`; + +type CommandMenuSubPageNavigationHeaderProps = { + title: string; + onBackClick: () => void; +}; + +export const CommandMenuSubPageNavigationHeader = ({ + onBackClick, + title, +}: CommandMenuSubPageNavigationHeaderProps) => { + return ( + + + {title} + + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFilters.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFilters.tsx new file mode 100644 index 0000000000..a2544f35f1 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFilters.tsx @@ -0,0 +1,67 @@ +import { CommandMenuSubPageNavigationHeader } from '@/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader'; +import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu'; +import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; +import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { AdvancedFilterCommandMenuContainer } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer'; +import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext'; +import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext'; +import { InputLabel } from '@/ui/input/components/InputLabel'; +import styled from '@emotion/styled'; +import { t } from '@lingui/core/macro'; +import { type PageLayoutWidget } from '~/generated/graphql'; + +const StyledChartFiltersPageContainer = styled.div` + display: flex; + flex-direction: column; + + gap: ${({ theme }) => theme.spacing(2)}; + + padding: ${({ theme }) => theme.spacing(3)}; +`; + +const StyledFiltersContainer = styled.div``; + +export const ChartFilters = ({ + objectMetadataItem, + widget, +}: { + objectMetadataItem: ObjectMetadataItem; + widget: PageLayoutWidget; +}) => { + const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu(); + + const handleBackClick = () => { + navigatePageLayoutCommandMenu({ + commandMenuPage: CommandMenuPages.PageLayoutGraphTypeSelect, + }); + }; + + const instanceId = `chart-filters-widget${widget.id}-${objectMetadataItem.id}`; + + return ( + + + + {t`Conditions`} + + + {}} + objectMetadataItem={objectMetadataItem} + isWorkflowFindRecords={false} + /> + {/* TODO: create chart record filter effect to persist filters + */} + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx index 5c51809bba..d06a8f68c8 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx @@ -1,8 +1,10 @@ import { CommandGroup } from '@/command-menu/components/CommandGroup'; +import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem'; import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown'; import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle'; import { CommandMenuList } from '@/command-menu/components/CommandMenuList'; import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId'; +import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu'; import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo'; import { ChartTypeSelectionSection } from '@/command-menu/pages/page-layout/components/ChartTypeSelectionSection'; import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation'; @@ -15,12 +17,14 @@ import { CHART_CONFIGURATION_SETTING_IDS, CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP, } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds'; +import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { t } from '@lingui/core/macro'; import { isNonEmptyString } from '@sniptt/guards'; +import { IconFilter } from 'twenty-ui/display'; import { BarChartGroupMode, @@ -31,6 +35,8 @@ import { export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => { const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo(); + const { navigateCommandMenu } = useNavigateCommandMenu(); + const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord(); const { updateCurrentWidgetConfig } = @@ -141,6 +147,32 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => { }); }; + const handleFilterSettingsClick = () => { + navigateCommandMenu({ + page: CommandMenuPages.PageLayoutGraphFilter, + pageTitle: t`Filters`, + pageIcon: IconFilter, + }); + }; + + if (item.id === CHART_CONFIGURATION_SETTING_IDS.FILTER) { + return ( + + + + ); + } + return item.isBoolean ? ( { + const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord(); + + const draftPageLayout = useRecoilComponentValue( + pageLayoutDraftComponentState, + pageLayoutId, + ); + + const pageLayoutEditingWidgetId = useRecoilComponentValue( + pageLayoutEditingWidgetIdComponentState, + pageLayoutId, + ); + + const widgetInEditMode = draftPageLayout.tabs + .flatMap((tab) => tab.widgets) + .find((widget) => widget.id === pageLayoutEditingWidgetId); + + const { objectMetadataItem } = useObjectMetadataItemById({ + objectId: widgetInEditMode?.objectMetadataId, + }); + + if (!isDefined(pageLayoutEditingWidgetId)) { + throw new Error('Widget ID must be present while editing the widget'); + } + + if (!isDefined(widgetInEditMode)) { + throw new Error( + `Widget with ID ${pageLayoutEditingWidgetId} not found in page layout`, + ); + } + + const theme = useTheme(); + + if ( + !isDefined(widgetInEditMode.configuration) || + !('graphType' in widgetInEditMode.configuration) + ) { + return null; + } + + const currentGraphType = widgetInEditMode.configuration.graphType; + const graphTypeLabel = t(GRAPH_TYPE_INFORMATION[currentGraphType].label); + + return ( + <> + + + + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx index 8addcd8ec9..173feb628d 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx @@ -67,7 +67,6 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => { } }} /> - ); diff --git a/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts b/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts index 30169741b8..24361da50d 100644 --- a/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts +++ b/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts @@ -17,5 +17,6 @@ export enum CommandMenuPages { ViewPreviousAIChats = 'view-previous-ai-chats', PageLayoutWidgetTypeSelect = 'page-layout-widget-type-select', PageLayoutGraphTypeSelect = 'page-layout-graph-type-select', + PageLayoutGraphFilter = 'page-layout-graph-filter', PageLayoutIframeConfig = 'page-layout-iframe-config', } diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn.tsx similarity index 72% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn.tsx index 08457589f4..76fd845ff8 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn.tsx @@ -7,4 +7,4 @@ const StyledColumn = styled.div` gap: ${({ theme }) => theme.spacing(1)}; `; -export const WorkflowAdvancedFilterDropdownColumn = StyledColumn; +export const AdvancedFilterCommandMenuColumn = StyledColumn; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer.tsx new file mode 100644 index 0000000000..ca985ddcbd --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer.tsx @@ -0,0 +1,100 @@ +import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { AdvancedFilterCommandMenuCreateRootFilterButton } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton'; +import { AdvancedFilterCommandMenuRecordFilterColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn'; +import { AdvancedFilterCommandMenuRecordFilterGroupColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupColumn'; +import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect'; +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 { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent'; +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import styled from '@emotion/styled'; +import { isDefined } from 'twenty-shared/utils'; + +const StyledContainer = styled.div` + align-items: start; + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledChildContainer = styled.div` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(6)}; + width: 100%; +`; + +export type AdvancedFilterCommandMenuContainerProps = { + readonly?: boolean; + onUpdate?: () => void; + objectMetadataItem: ObjectMetadataItem; + VariablePicker?: VariablePickerComponent; + isWorkflowFindRecords?: boolean; +}; + +export const AdvancedFilterCommandMenuContainer = ({ + readonly, + onUpdate, + objectMetadataItem, + VariablePicker, + isWorkflowFindRecords, +}: AdvancedFilterCommandMenuContainerProps) => { + const rootRecordFilterGroup = useRecoilComponentValue( + rootLevelRecordFilterGroupComponentSelector, + ); + + const { childRecordFiltersAndRecordFilterGroups } = + useChildRecordFiltersAndRecordFilterGroups({ + recordFilterGroupId: rootRecordFilterGroup?.id, + }); + + return ( + + {isDefined(rootRecordFilterGroup) ? ( + + + {childRecordFiltersAndRecordFilterGroups.map( + (recordFilterGroupChild, recordFilterGroupChildIndex) => + isRecordFilterGroupChildARecordFilterGroup( + recordFilterGroupChild, + ) ? ( + + ) : ( + + ), + )} + + {!readonly && ( + + )} + + ) : ( + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton.tsx similarity index 77% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton.tsx index b0fcbe1c95..d5ed396c93 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton.tsx @@ -1,4 +1,5 @@ -import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; +import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector'; +import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector'; import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup'; @@ -8,21 +9,36 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho import { useSetRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyState'; import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState'; import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; import { RecordFilterGroupLogicalOperator } from 'twenty-shared/types'; 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, + +export const AdvancedFilterCommandMenuCreateRootFilterButton = ({ + objectMetadataItem, }: { - defaultFieldMetadataItem: FieldMetadataItem; + objectMetadataItem: ObjectMetadataItem; }) => { const { readonly } = useContext(AdvancedFilterContext); const rootRecordFilterGroup = useRecoilComponentValue( rootLevelRecordFilterGroupComponentSelector, ); + const availableFieldMetadataItemsForFilter = useRecoilValue( + availableFieldMetadataItemsForFilterFamilySelector({ + objectMetadataItemId: objectMetadataItem.id, + }), + ); + + const defaultFieldMetadataItem = + availableFieldMetadataItemsForFilter.find( + (fieldMetadataItem) => + fieldMetadataItem.id === + objectMetadataItem?.labelIdentifierFieldMetadataId, + ) ?? availableFieldMetadataItemsForFilter[0]; + const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup(); const { upsertRecordFilter } = useUpsertRecordFilter(); diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled.tsx similarity index 70% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled.tsx index a0c1ff0c95..684eb00ce6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled.tsx @@ -1,13 +1,13 @@ import { useRecordFilterField } from '@/object-record/advanced-filter/hooks/useRecordFilterField'; import { SelectControl } from '@/ui/input/components/SelectControl'; -type WorkflowAdvancedFilterFieldSelectDisabledProps = { +type AdvancedFilterCommandMenuFieldSelectDisabledProps = { recordFilterId: string; }; -export const WorkflowAdvancedFilterFieldSelectDisabled = ({ +export const AdvancedFilterCommandMenuFieldSelectDisabled = ({ recordFilterId, -}: WorkflowAdvancedFilterFieldSelectDisabledProps) => { +}: AdvancedFilterCommandMenuFieldSelectDisabledProps) => { const { label, icon } = useRecordFilterField(recordFilterId); return ( diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell.tsx similarity index 92% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell.tsx index f073855bbf..9b20577f54 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell.tsx @@ -24,15 +24,15 @@ const StyledContainer = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; `; -type WorkflowAdvancedFilterLogicalOperatorCellProps = { +type AdvancedFilterCommandMenuLogicalOperatorCellProps = { index: number; recordFilterGroup: RecordFilterGroup; }; -export const WorkflowAdvancedFilterLogicalOperatorCell = ({ +export const AdvancedFilterCommandMenuLogicalOperatorCell = ({ index, recordFilterGroup, -}: WorkflowAdvancedFilterLogicalOperatorCellProps) => { +}: AdvancedFilterCommandMenuLogicalOperatorCellProps) => { const { readonly } = useContext(AdvancedFilterContext); return ( diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn.tsx similarity index 63% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn.tsx index c0298adff1..2fa8c4936d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn.tsx @@ -1,3 +1,9 @@ +import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn'; +import { AdvancedFilterCommandMenuFieldSelectDisabled } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled'; +import { AdvancedFilterCommandMenuLogicalOperatorCell } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell'; + +import { AdvancedFilterCommandMenuRecordFilterOperandSelect } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect'; +import { AdvancedFilterCommandMenuValueFormInput } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput'; import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton'; import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown'; import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; @@ -5,11 +11,6 @@ import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/obje import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup'; import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; -import { WorkflowAdvancedFilterDropdownColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn'; -import { WorkflowAdvancedFilterFieldSelectDisabled } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled'; -import { WorkflowAdvancedFilterValueFormInput } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput'; -import { WorkflowAdvancedFilterLogicalOperatorCell } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell'; -import { WorkflowAdvancedFilterRecordFilterOperandSelect } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect'; import styled from '@emotion/styled'; import { useContext } from 'react'; @@ -20,15 +21,17 @@ const StyledContainer = styled.div` gap: ${({ theme }) => theme.spacing(1)}; `; -export const WorkflowAdvancedFilterRecordFilterColumn = ({ - recordFilterGroup, - recordFilter, - recordFilterIndex, -}: { +type AdvancedFilterCommandMenuRecordFilterColumnProps = { recordFilterGroup: RecordFilterGroup; recordFilter: RecordFilter; recordFilterIndex: number; -}) => { +}; + +export const AdvancedFilterCommandMenuRecordFilterColumn = ({ + recordFilterGroup, + recordFilter, + recordFilterIndex, +}: AdvancedFilterCommandMenuRecordFilterColumnProps) => { const { readonly } = useContext(AdvancedFilterContext); return ( @@ -39,9 +42,9 @@ export const WorkflowAdvancedFilterRecordFilterColumn = ({ ), }} > - + - @@ -52,7 +55,7 @@ export const WorkflowAdvancedFilterRecordFilterColumn = ({ )} {readonly ? ( - ) : ( @@ -60,13 +63,13 @@ export const WorkflowAdvancedFilterRecordFilterColumn = ({ recordFilterId={recordFilter.id} /> )} - - - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupChildren.tsx similarity index 82% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupChildren.tsx index bf9be5e65b..335b4f6874 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupChildren.tsx @@ -1,8 +1,8 @@ +import { AdvancedFilterCommandMenuRecordFilterColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn'; import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect'; import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups'; import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; -import { WorkflowAdvancedFilterRecordFilterColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn'; import styled from '@emotion/styled'; import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -20,13 +20,13 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>` padding: ${({ theme }) => theme.spacing(2)}; `; -type WorkflowAdvancedFilterRecordFilterGroupChildrenProps = { +type AdvancedFilterCommandMenuRecordFilterGroupChildrenProps = { recordFilterGroupId: string; }; -export const WorkflowAdvancedFilterRecordFilterGroupChildren = ({ +export const AdvancedFilterCommandMenuRecordFilterGroupChildren = ({ recordFilterGroupId, -}: WorkflowAdvancedFilterRecordFilterGroupChildrenProps) => { +}: AdvancedFilterCommandMenuRecordFilterGroupChildrenProps) => { const { readonly } = useContext(AdvancedFilterContext); const { currentRecordFilterGroup, childRecordFilters } = useChildRecordFiltersAndRecordFilterGroups({ @@ -44,7 +44,7 @@ export const WorkflowAdvancedFilterRecordFilterGroupChildren = ({ return ( {childRecordFilters.map((childRecordFilter, childRecordFilterIndex) => ( - theme.spacing(1)}; `; -export const WorkflowAdvancedFilterRecordFilterGroupColumn = ({ +export const AdvancedFilterCommandMenuRecordFilterGroupColumn = ({ parentRecordFilterGroup, recordFilterGroup, recordFilterGroupIndex, @@ -26,9 +27,9 @@ export const WorkflowAdvancedFilterRecordFilterGroupColumn = ({ const { readonly } = useContext(AdvancedFilterContext); return ( - + - @@ -38,9 +39,9 @@ export const WorkflowAdvancedFilterRecordFilterGroupColumn = ({ /> )} - - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect.tsx similarity index 91% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect.tsx index db134d186d..9f27de297c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect.tsx @@ -9,13 +9,13 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; -type WorkflowAdvancedFilterRecordFilterOperandSelectProps = { +type AdvancedFilterCommandMenuRecordFilterOperandSelectProps = { recordFilterId: string; }; -export const WorkflowAdvancedFilterRecordFilterOperandSelect = ({ +export const AdvancedFilterCommandMenuRecordFilterOperandSelect = ({ recordFilterId, -}: WorkflowAdvancedFilterRecordFilterOperandSelectProps) => { +}: AdvancedFilterCommandMenuRecordFilterOperandSelectProps) => { const { readonly } = useContext(AdvancedFilterContext); const currentRecordFilters = useRecoilComponentValue( currentRecordFiltersComponentState, diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput.tsx similarity index 84% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput.tsx index 79ac405954..01f987a7e4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput.tsx @@ -7,17 +7,18 @@ import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/c import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; import { CURRENCIES } from '@/settings/data-model/constants/Currencies'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { useContext } from 'react'; import { type JsonValue } from 'type-fest'; -export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ +export const AdvancedFilterCommandMenuValueFormCompositeFieldInput = ({ recordFilter, onChange, }: { recordFilter: RecordFilter; onChange: (newValue: JsonValue) => void; }) => { + const { VariablePicker } = useContext(AdvancedFilterContext); + const subFieldNameUsedInDropdown = useRecoilComponentValue( subFieldNameUsedInDropdownComponentState, ); @@ -33,14 +34,14 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ ) : ( ) @@ -49,7 +50,7 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ @@ -57,7 +58,7 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ ) : null @@ -66,14 +67,14 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ ) : ( ) @@ -81,7 +82,7 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({ )} diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput.tsx similarity index 85% rename from packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput.tsx rename to packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput.tsx index c17f446a92..6b6d61b9f5 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput.tsx @@ -1,4 +1,5 @@ import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition'; +import { AdvancedFilterCommandMenuValueFormCompositeFieldInput } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput'; import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; import { shouldShowFilterTextInput } from '@/object-record/advanced-filter/utils/shouldShowFilterTextInput'; import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue'; @@ -14,29 +15,26 @@ import { type FieldSelectMetadata, } from '@/object-record/record-field/ui/types/FieldMetadata'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; -import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { WorkflowAdvancedFilterValueFormCompositeFieldInput } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput'; -import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { isObject, isString } from '@sniptt/guards'; import { useContext } from 'react'; import { FieldMetadataType } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { type JsonValue } from 'type-fest'; -export const WorkflowAdvancedFilterValueFormInput = ({ +export const AdvancedFilterCommandMenuValueFormInput = ({ recordFilterId, }: { recordFilterId: string; }) => { - const { readonly } = useContext(AdvancedFilterContext); + const { readonly, VariablePicker, objectMetadataItem } = useContext( + AdvancedFilterContext, + ); const currentRecordFilters = useRecoilComponentValue( currentRecordFiltersComponentState, ); - const { objectMetadataItem } = useRecordIndexContextOrThrow(); - const subFieldNameUsedInDropdown = useRecoilComponentValue( subFieldNameUsedInDropdownComponentState, ); @@ -104,14 +102,14 @@ export const WorkflowAdvancedFilterValueFormInput = ({ defaultValue={recordFilter.value} onChange={handleChange} readonly={readonly} - VariablePicker={WorkflowVariablePicker} + VariablePicker={VariablePicker} /> ); } if (isDefined(subFieldNameUsedInDropdown)) { return ( - @@ -129,7 +127,7 @@ export const WorkflowAdvancedFilterValueFormInput = ({ defaultValue={recordFilter.value} onChange={handleChange} readonly={readonly} - VariablePicker={WorkflowVariablePicker} + VariablePicker={VariablePicker} options={metadata?.options ?? []} /> ); @@ -148,9 +146,7 @@ export const WorkflowAdvancedFilterValueFormInput = ({ onChange={handleChange} readonly={readonly} // VariablePicker is not supported for date filters yet - VariablePicker={ - isFilterableByDateValue ? undefined : WorkflowVariablePicker - } + VariablePicker={isFilterableByDateValue ? undefined : VariablePicker} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx index 725f7eac50..f685ad2298 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx @@ -2,7 +2,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; -import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; @@ -13,19 +12,22 @@ import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataIte import { AdvancedFilterFieldSelectSearchInput } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput'; import { useAdvancedFilterFieldSelectDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterFieldSelectDropdown'; import { useSelectFieldUsedInAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useSelectFieldUsedInAdvancedFilterDropdown'; +import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem'; import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState'; import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType'; import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; -import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext'; +import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel'; import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; +import { shouldDisplayFormField } from '@/workflow/workflow-steps/workflow-actions/utils/shouldDisplayFormField'; import { useLingui } from '@lingui/react/macro'; +import { useContext } from 'react'; import { getFilterTypeFromFieldType } from 'twenty-shared/utils'; type AdvancedFilterFieldSelectMenuProps = { @@ -35,8 +37,6 @@ type AdvancedFilterFieldSelectMenuProps = { export const AdvancedFilterFieldSelectMenu = ({ recordFilterId, }: AdvancedFilterFieldSelectMenuProps) => { - const { recordIndexId } = useRecordIndexContextOrThrow(); - const { closeAdvancedFilterFieldSelectDropdown, advancedFilterFieldSelectDropdownId, @@ -46,13 +46,27 @@ export const AdvancedFilterFieldSelectMenu = ({ objectFilterDropdownSearchInputComponentState, ); - const { filterableFieldMetadataItems } = - useFilterableFieldMetadataItemsInRecordIndexContext(); + const { isWorkflowFindRecords, objectMetadataItem } = useContext( + AdvancedFilterContext, + ); + + const { + filterableFieldMetadataItems: filterableFieldMetadataItemsForRecordIndex, + } = useFilterableFieldMetadataItems(objectMetadataItem.id); + + const filterableFieldMetadataItems = isWorkflowFindRecords + ? filterableFieldMetadataItemsForRecordIndex.filter((fieldMetadataItem) => + shouldDisplayFormField({ + fieldMetadataItem, + actionType: 'FIND_RECORDS', + }), + ) + : filterableFieldMetadataItemsForRecordIndex; const visibleRecordFields = useRecoilComponentValue( visibleRecordFieldsComponentSelector, - recordIndexId, ); + const visibleFieldMetadataItemIds = visibleRecordFields.map( (recordField) => recordField.fieldMetadataItemId, ); diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts b/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts index d175fb5147..cf22eeb6d5 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts @@ -1,9 +1,13 @@ +import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent'; import { createContext } from 'react'; type AdvancedFilterContextType = { onUpdate?: () => void; isWorkflowFindRecords?: boolean; readonly?: boolean; + VariablePicker?: VariablePickerComponent; + objectMetadataItem: ObjectMetadataItem; }; export const AdvancedFilterContext = createContext( diff --git a/packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext.ts b/packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext.ts index 43c1309d98..7475f6197c 100644 --- a/packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext.ts @@ -1,25 +1,12 @@ -import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { shouldDisplayFormField } from '@/workflow/workflow-steps/workflow-actions/utils/shouldDisplayFormField'; -import { useContext } from 'react'; export const useFilterableFieldMetadataItemsInRecordIndexContext = () => { const { objectMetadataItem } = useRecordIndexContextOrThrow(); - const { isWorkflowFindRecords } = useContext(AdvancedFilterContext); - const { - filterableFieldMetadataItems: filterableFieldMetadataItemsForRecordIndex, - } = useFilterableFieldMetadataItems(objectMetadataItem.id); - - const filterableFieldMetadataItems = isWorkflowFindRecords - ? filterableFieldMetadataItemsForRecordIndex.filter((fieldMetadataItem) => - shouldDisplayFormField({ - fieldMetadataItem, - actionType: 'FIND_RECORDS', - }), - ) - : filterableFieldMetadataItemsForRecordIndex; + const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems( + objectMetadataItem.id, + ); return { filterableFieldMetadataItems }; }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterColumn.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterColumn.tsx index 81868bc6bf..5774ffcfdf 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterColumn.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterColumn.tsx @@ -1,10 +1,10 @@ +import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn'; import { WorkflowStepFilterFieldSelect } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterFieldSelect'; import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterLogicalOperatorCell'; import { WorkflowStepFilterOperandSelect } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterOperandSelect'; import { WorkflowStepFilterOptionsDropdown } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterOptionsDropdown'; import { WorkflowStepFilterValueInput } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterValueInput'; import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/workflow-actions/filter-action/states/context/WorkflowStepFilterContext'; -import { WorkflowAdvancedFilterDropdownColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn'; import styled from '@emotion/styled'; import { useContext } from 'react'; import { type StepFilter, type StepFilterGroup } from 'twenty-shared/types'; @@ -30,7 +30,7 @@ export const WorkflowStepFilterColumn = ({ const { readonly } = useContext(WorkflowStepFilterContext); return ( - + - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupColumn.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupColumn.tsx index bf7b15ac7a..d4072478ac 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupColumn.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupColumn.tsx @@ -1,8 +1,8 @@ +import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn'; import { WorkflowStepFilterGroupChildren } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupChildren'; import { WorkflowStepFilterGroupOptionsDropdown } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterGroupOptionsDropdown'; import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterLogicalOperatorCell'; import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/workflow-actions/filter-action/states/context/WorkflowStepFilterContext'; -import { WorkflowAdvancedFilterDropdownColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn'; import styled from '@emotion/styled'; import { useContext } from 'react'; import { type StepFilterGroup } from 'twenty-shared/types'; @@ -28,7 +28,7 @@ export const WorkflowStepFilterGroupColumn = ({ const { readonly } = useContext(WorkflowStepFilterContext); return ( - + - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx index 00f628d971..0987163766 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx @@ -1,39 +1,16 @@ -import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect'; -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 { AdvancedFilterCommandMenuContainer } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer'; import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; -import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; -import { WorkflowAdvancedFilterRecordFilterColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn'; -import { WorkflowAdvancedFilterRecordFilterGroupColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupColumn'; + import { type 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 styled from '@emotion/styled'; -import { useRecoilCallback, useRecoilValue } from 'recoil'; -import { - computeRecordGqlOperationFilter, - isDefined, -} from 'twenty-shared/utils'; +import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; -const StyledContainer = styled.div` - align-items: start; - display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing(2)}; -`; - -const StyledChildContainer = styled.div` - display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing(6)}; - width: 100%; -`; +import { useRecoilCallback } from 'recoil'; +import { computeRecordGqlOperationFilter } from 'twenty-shared/utils'; export const WorkflowFindRecordsFilters = ({ objectMetadataItem, @@ -44,28 +21,6 @@ export const WorkflowFindRecordsFilters = ({ onChange: (filter: FindRecordsActionFilter) => void; readonly?: boolean; }) => { - const rootRecordFilterGroup = useRecoilComponentValue( - rootLevelRecordFilterGroupComponentSelector, - ); - - const { childRecordFiltersAndRecordFilterGroups } = - useChildRecordFiltersAndRecordFilterGroups({ - recordFilterGroupId: rootRecordFilterGroup?.id, - }); - - const availableFieldMetadataItemsForFilter = useRecoilValue( - availableFieldMetadataItemsForFilterFamilySelector({ - objectMetadataItemId: objectMetadataItem.id, - }), - ); - - const defaultFieldMetadataItem = - availableFieldMetadataItemsForFilter.find( - (fieldMetadataItem) => - fieldMetadataItem.id === - objectMetadataItem?.labelIdentifierFieldMetadataId, - ) ?? availableFieldMetadataItemsForFilter[0]; - const currentRecordFilterGroupsCallbackState = useRecoilComponentCallbackState(currentRecordFilterGroupsComponentState); @@ -110,48 +65,12 @@ export const WorkflowFindRecordsFilters = ({ ); return ( - - {isDefined(rootRecordFilterGroup) ? ( - - - {childRecordFiltersAndRecordFilterGroups.map( - (recordFilterGroupChild, recordFilterGroupChildIndex) => - isRecordFilterGroupChildARecordFilterGroup( - recordFilterGroupChild, - ) ? ( - - ) : ( - - ), - )} - - {!readonly && ( - - )} - - ) : ( - - )} - + ); };