Feat: Advanced filter

packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts

@@ -24,6 +24,7 @@ export enum CoreObjectNameSingular {
   View = 'view',
   ViewField = 'viewField',
   ViewFilter = 'viewFilter',
+  ViewFilterGroup = 'viewFilterGroup',
   ViewSort = 'viewSort',
   Webhook = 'webhook',
   WorkspaceMember = 'workspaceMember',

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx

@@ -0,0 +1,166 @@
+import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { useCurrentViewViewFilterGroup } from '@/object-record/advanced-filter/hooks/useCurrentViewViewFilterGroup';
+import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useUpsertCombinedViewFilterGroup';
+import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
+import { LightButton } from '@/ui/input/button/components/LightButton';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
+import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
+import { ViewFilter } from '@/views/types/ViewFilter';
+import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
+import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
+import { useCallback } from 'react';
+import { IconLibraryPlus, IconPlus, isDefined } from 'twenty-ui';
+import { v4 } from 'uuid';
+
+type AdvancedFilterAddFilterRuleSelectProps = {
+  parentViewFilterGroupId?: string;
+};
+
+export const AdvancedFilterAddFilterRuleSelect = ({
+  parentViewFilterGroupId,
+}: AdvancedFilterAddFilterRuleSelectProps) => {
+  const { currentViewFilterGroup, childViewFiltersAndViewFilterGroups } =
+    useCurrentViewViewFilterGroup({
+      parentViewFilterGroupId,
+    });
+
+  const dropdownId = `advanced-filter-add-filter-rule-${currentViewFilterGroup?.id}`;
+
+  const { currentViewId } = useGetCurrentView();
+
+  const { upsertCombinedViewFilterGroup } = useUpsertCombinedViewFilterGroup();
+  const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters();
+
+  const lastChildRule: ViewFilter | ViewFilterGroup | undefined =
+    childViewFiltersAndViewFilterGroups[
+      childViewFiltersAndViewFilterGroups.length - 1
+    ];
+
+  const newPositionInViewFilterGroup = isDefined(lastChildRule)
+    ? (lastChildRule.positionInViewFilterGroup ?? 0) + 1
+    : 0;
+
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+  const objectMetadataId =
+    currentViewWithCombinedFiltersAndSorts?.objectMetadataId;
+  const { objectMetadataItem } = useObjectMetadataItemById({
+    objectId: objectMetadataId ?? null,
+  });
+
+  const availableFilterDefinitions = useRecoilComponentValueV2(
+    availableFilterDefinitionsComponentState,
+  );
+
+  const getDefaultFilterDefinition = useCallback(() => {
+    const defaultFilterDefinition =
+      availableFilterDefinitions.find(
+        (filterDefinition) =>
+          filterDefinition.fieldMetadataId ===
+          objectMetadataItem?.labelIdentifierFieldMetadataId,
+      ) ?? availableFilterDefinitions?.[0];
+
+    if (!defaultFilterDefinition) {
+      throw new Error('Missing default filter definition');
+    }
+
+    return defaultFilterDefinition;
+  }, [availableFilterDefinitions, objectMetadataItem]);
+
+  const handleAddFilter = () => {
+    closeDropdown();
+
+    const defaultFilterDefinition = getDefaultFilterDefinition();
+
+    upsertCombinedViewFilter({
+      id: v4(),
+      fieldMetadataId: defaultFilterDefinition.fieldMetadataId,
+      operand: getOperandsForFilterDefinition(defaultFilterDefinition)[0],
+      definition: defaultFilterDefinition,
+      value: '',
+      displayValue: '',
+      viewFilterGroupId: currentViewFilterGroup?.id,
+      positionInViewFilterGroup: newPositionInViewFilterGroup,
+    });
+  };
+
+  const handleAddFilterGroup = () => {
+    closeDropdown();
+
+    if (!currentViewId) {
+      throw new Error('Missing view id');
+    }
+
+    const newViewFilterGroup = {
+      id: v4(),
+      viewId: currentViewId,
+      logicalOperator: ViewFilterGroupLogicalOperator.AND,
+      parentViewFilterGroupId: currentViewFilterGroup?.id,
+      positionInViewFilterGroup: newPositionInViewFilterGroup,
+    };
+
+    upsertCombinedViewFilterGroup(newViewFilterGroup);
+
+    const defaultFilterDefinition = getDefaultFilterDefinition();
+
+    upsertCombinedViewFilter({
+      id: v4(),
+      fieldMetadataId: defaultFilterDefinition.fieldMetadataId,
+      operand: getOperandsForFilterDefinition(defaultFilterDefinition)[0],
+      definition: defaultFilterDefinition,
+      value: '',
+      displayValue: '',
+      viewFilterGroupId: newViewFilterGroup.id,
+      positionInViewFilterGroup: newPositionInViewFilterGroup,
+    });
+  };
+
+  const isFilterRuleGroupOptionVisible = !isDefined(parentViewFilterGroupId);
+
+  if (!isFilterRuleGroupOptionVisible) {
+    return (
+      <LightButton
+        Icon={IconPlus}
+        title="Add filter rule"
+        onClick={handleAddFilter}
+      />
+    );
+  }
+
+  return (
+    <Dropdown
+      disableBlur
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightButton Icon={IconPlus} title="Add filter rule" />
+      }
+      dropdownComponents={
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            LeftIcon={IconPlus}
+            text="Add rule"
+            onClick={handleAddFilter}
+          />
+          {isFilterRuleGroupOptionVisible && (
+            <MenuItem
+              LeftIcon={IconLibraryPlus}
+              text="Add rule group"
+              onClick={handleAddFilterGroup}
+            />
+          )}
+        </DropdownMenuItemsContainer>
+      }
+      dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }}
+      dropdownOffset={{ y: 8, x: 0 }}
+      dropdownPlacement="bottom-start"
+    />
+  );
+};

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

@@ -0,0 +1,41 @@
+import { AdvancedFilterLogicalOperatorDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown';
+import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
+import styled from '@emotion/styled';
+import { capitalize } from '~/utils/string/capitalize';
+
+const StyledText = styled.div`
+  height: ${({ theme }) => theme.spacing(8)};
+  display: flex;
+  align-items: center;
+`;
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  min-width: ${({ theme }) => theme.spacing(20)};
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+type AdvancedFilterLogicalOperatorCellProps = {
+  index: number;
+  viewFilterGroup: ViewFilterGroup;
+};
+
+export const AdvancedFilterLogicalOperatorCell = ({
+  index,
+  viewFilterGroup,
+}: AdvancedFilterLogicalOperatorCellProps) => (
+  <StyledContainer>
+    {index === 0 ? (
+      <StyledText>Where</StyledText>
+    ) : index === 1 ? (
+      <AdvancedFilterLogicalOperatorDropdown
+        viewFilterGroup={viewFilterGroup}
+      />
+    ) : (
+      <StyledText>
+        {capitalize(viewFilterGroup.logicalOperator.toLowerCase())}
+      </StyledText>
+    )}
+  </StyledContainer>
+);

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx

@@ -0,0 +1,33 @@
+import { ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS } from '@/object-record/advanced-filter/constants/AdvancedFilterLogicalOperatorOptions';
+import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useUpsertCombinedViewFilterGroup';
+import { Select } from '@/ui/input/components/Select';
+import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
+import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
+
+type AdvancedFilterLogicalOperatorDropdownProps = {
+  viewFilterGroup: ViewFilterGroup;
+};
+
+export const AdvancedFilterLogicalOperatorDropdown = ({
+  viewFilterGroup,
+}: AdvancedFilterLogicalOperatorDropdownProps) => {
+  const { upsertCombinedViewFilterGroup } = useUpsertCombinedViewFilterGroup();
+
+  const handleChange = (value: ViewFilterGroupLogicalOperator) => {
+    upsertCombinedViewFilterGroup({
+      ...viewFilterGroup,
+      logicalOperator: value,
+    });
+  };
+
+  return (
+    <Select
+      disableBlur
+      fullWidth
+      dropdownId={`advanced-filter-logical-operator-${viewFilterGroup.id}`}
+      value={viewFilterGroup.logicalOperator}
+      onChange={handleChange}
+      options={ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx

@@ -0,0 +1,75 @@
+import { AdvancedFilterRuleOptionsDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdownButton';
+import { useCurrentViewViewFilterGroup } from '@/object-record/advanced-filter/hooks/useCurrentViewViewFilterGroup';
+import { useDeleteCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useDeleteCombinedViewFilterGroup';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
+import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
+import { isDefined } from 'twenty-ui';
+
+type AdvancedFilterRuleOptionsDropdownProps = {
+  parentViewFilterGroupId?: string;
+} & (
+  | {
+      viewFilterId: string;
+      viewFilterGroupId?: never;
+    }
+  | {
+      viewFilterId?: never;
+      viewFilterGroupId: string;
+    }
+);
+
+export const AdvancedFilterRuleOptionsDropdown = ({
+  parentViewFilterGroupId,
+  viewFilterId,
+  viewFilterGroupId,
+}: AdvancedFilterRuleOptionsDropdownProps) => {
+  const dropdownId = `advanced-filter-rule-options-${viewFilterId ?? viewFilterGroupId}`;
+
+  const { deleteCombinedViewFilter } = useDeleteCombinedViewFilters();
+  const { deleteCombinedViewFilterGroup } = useDeleteCombinedViewFilterGroup();
+
+  const { currentViewFilterGroup, childViewFiltersAndViewFilterGroups } =
+    useCurrentViewViewFilterGroup({
+      parentViewFilterGroupId: parentViewFilterGroupId,
+    });
+
+  const handleRemove = () => {
+    if (isDefined(viewFilterId)) {
+      deleteCombinedViewFilter(viewFilterId);
+
+      const isOnlyViewFilterInGroup =
+        childViewFiltersAndViewFilterGroups.length === 1;
+
+      if (isOnlyViewFilterInGroup && isDefined(parentViewFilterGroupId)) {
+        deleteCombinedViewFilterGroup(parentViewFilterGroupId);
+      }
+    } else if (isDefined(currentViewFilterGroup)) {
+      deleteCombinedViewFilterGroup(currentViewFilterGroup.id);
+    } else {
+      throw new Error('No view filter or view filter group to remove');
+    }
+  };
+
+  const removeButtonLabel = viewFilterId ? 'Remove rule' : 'Remove rule group';
+
+  return (
+    <Dropdown
+      disableBlur
+      dropdownId={dropdownId}
+      clickableComponent={
+        <AdvancedFilterRuleOptionsDropdownButton dropdownId={dropdownId} />
+      }
+      dropdownComponents={
+        <DropdownMenuItemsContainer>
+          <MenuItem text={removeButtonLabel} onClick={handleRemove} />
+        </DropdownMenuItemsContainer>
+      }
+      dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }}
+      dropdownOffset={{ y: 8, x: 0 }}
+      dropdownPlacement="bottom-start"
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdownButton.tsx

@@ -0,0 +1,26 @@
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { IconDotsVertical } from 'twenty-ui';
+
+type AdvancedFilterRuleOptionsDropdownButtonProps = {
+  dropdownId: string;
+};
+
+export const AdvancedFilterRuleOptionsDropdownButton = ({
+  dropdownId,
+}: AdvancedFilterRuleOptionsDropdownButtonProps) => {
+  const { toggleDropdown } = useDropdown(dropdownId);
+
+  const handleClick = () => {
+    toggleDropdown();
+  };
+
+  return (
+    <IconButton
+      aria-label="Filter rule options"
+      variant="tertiary"
+      Icon={IconDotsVertical}
+      onClick={handleClick}
+    />
+  );
+};

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

@@ -0,0 +1,43 @@
+import { AdvancedFilterViewFilterFieldSelect } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect';
+import { AdvancedFilterViewFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect';
+import { AdvancedFilterViewFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput';
+import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter';
+import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { configurableViewFilterOperands } from '@/object-record/object-filter-dropdown/utils/configurableViewFilterOperands';
+import styled from '@emotion/styled';
+
+const StyledValueDropdownContainer = styled.div`
+  flex: 3;
+`;
+
+const StyledRow = styled.div`
+  flex: 1;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+type AdvancedFilterViewFilterProps = {
+  viewFilterId: string;
+};
+
+export const AdvancedFilterViewFilter = ({
+  viewFilterId,
+}: AdvancedFilterViewFilterProps) => {
+  const filter = useCurrentViewFilter({ viewFilterId });
+
+  return (
+    <ObjectFilterDropdownScope filterScopeId={filter.id}>
+      <StyledRow>
+        <AdvancedFilterViewFilterFieldSelect viewFilterId={filter.id} />
+        <AdvancedFilterViewFilterOperandSelect viewFilterId={filter.id} />
+        <StyledValueDropdownContainer>
+          {configurableViewFilterOperands.has(filter.operand) && (
+            <AdvancedFilterViewFilterValueInput viewFilterId={filter.id} />
+          )}
+        </StyledValueDropdownContainer>
+      </StyledRow>
+    </ObjectFilterDropdownScope>
+  );
+};