Current workspace member filter (twentyhq#8016) (twentyhq#9182)

New branch based on feedback in PR twentyhq#8950 and issue twentyhq#8016

---------

Co-authored-by: ad-elias <[email protected]>
Co-authored-by: Lucas Bordeau <[email protected]>

Author: 3 people

packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/hooks/useDeleteMultipleRecordsAction.tsx

@@ -15,6 +15,7 @@ import { DELETE_MAX_COUNT } from '@/object-record/constants/DeleteMaxCount';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
 import { FilterOperand } from '@/object-record/object-filter-dropdown/types/FilterOperand';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
@@ -52,10 +53,13 @@ export const useDeleteMultipleRecordsAction = ({
     contextStoreFiltersComponentState,
   );
 
+  const { filterValueDependencies } = useFilterValueDependencies();
+
   const graphqlFilter = computeContextStoreFilters(
     contextStoreTargetedRecordsRule,
     contextStoreFilters,
     objectMetadataItem,
+    filterValueDependencies,
   );
 
   const deletedAtFieldMetadata = objectMetadataItem.fields.find(

packages/twenty-front/src/modules/context-store/hooks/useFindManyRecordsSelectedInContextStore.ts

@@ -4,6 +4,7 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const useFindManyRecordsSelectedInContextStore = ({
@@ -30,10 +31,13 @@ export const useFindManyRecordsSelectedInContextStore = ({
     instanceId,
   );
 
+  const { filterValueDependencies } = useFilterValueDependencies();
+
   const queryFilter = computeContextStoreFilters(
     contextStoreTargetedRecordsRule,
     contextStoreFilters,
     objectMetadataItem,
+    filterValueDependencies,
   );
 
   const { records, loading, totalCount } = useFindManyRecords({

packages/twenty-front/src/modules/context-store/utils/__tests__/computeContextStoreFilters.test.ts

@@ -1,14 +1,20 @@
 import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { FilterValueDependencies } from '@/object-record/record-filter/types/FilterValueDependencies';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { expect } from '@storybook/test';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+
 describe('computeContextStoreFilters', () => {
   const personObjectMetadataItem = generatedMockObjectMetadataItems.find(
     (item) => item.nameSingular === 'person',
   )!;
 
+  const mockFilterValueDependencies: FilterValueDependencies = {
+    currentWorkspaceMemberId: '32219445-f587-4c40-b2b1-6d3205ed96da',
+  };
+
   it('should work for selection mode', () => {
     const contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule = {
       mode: 'selection',
@@ -19,6 +25,7 @@ describe('computeContextStoreFilters', () => {
       contextStoreTargetedRecordsRule,
       [],
       personObjectMetadataItem,
+      mockFilterValueDependencies,
     );
 
     expect(filters).toEqual({
@@ -61,6 +68,7 @@ describe('computeContextStoreFilters', () => {
       contextStoreTargetedRecordsRule,
       contextStoreFilters,
       personObjectMetadataItem,
+      mockFilterValueDependencies,
     );
 
     expect(filters).toEqual({

packages/twenty-front/src/modules/context-store/utils/computeContextStoreFilters.ts

@@ -2,19 +2,22 @@ import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextS
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { FilterValueDependencies } from '@/object-record/record-filter/types/FilterValueDependencies';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { makeAndFilterVariables } from '@/object-record/utils/makeAndFilterVariables';
 
 export const computeContextStoreFilters = (
   contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule,
   contextStoreFilters: Filter[],
   objectMetadataItem: ObjectMetadataItem,
+  filterValueDependencies: FilterValueDependencies,
 ) => {
   let queryFilter: RecordGqlOperationFilter | undefined;
 
   if (contextStoreTargetedRecordsRule.mode === 'exclusion') {
     queryFilter = makeAndFilterVariables([
       computeViewRecordGqlOperationFilter(
+        filterValueDependencies,
         contextStoreFilters,
         objectMetadataItem?.fields ?? [],
         [],
@@ -39,6 +42,7 @@ export const computeContextStoreFilters = (
             },
           }
         : computeViewRecordGqlOperationFilter(
+            filterValueDependencies,
             contextStoreFilters,
             objectMetadataItem?.fields ?? [],
             [],

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -8,10 +8,10 @@ import { InternalDatePicker } from '@/ui/input/components/internal/date/componen
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/utils/computeVariableDateViewFilterValue';
 import {
+  resolveDateViewFilterValue,
   VariableDateViewFilterValueDirection,
   VariableDateViewFilterValueUnit,
 } from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
-import { resolveFilterValue } from '@/views/view-filter-value/utils/resolveFilterValue';
 import { useState } from 'react';
 import { isDefined } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -37,7 +37,7 @@ export const ObjectFilterDropdownDateInput = () => {
     | undefined;
 
   const initialFilterValue = selectedFilter
-    ? resolveFilterValue(selectedFilter)
+    ? resolveDateViewFilterValue(selectedFilter)
     : null;
   const [internalDate, setInternalDate] = useState<Date | null>(
     initialFilterValue instanceof Date ? initialFilterValue : null,
@@ -98,7 +98,7 @@ export const ObjectFilterDropdownDateInput = () => {
     selectedOperandInDropdown === ViewFilterOperand.IsRelative;
 
   const resolvedValue = selectedFilter
-    ? resolveFilterValue(selectedFilter)
+    ? resolveDateViewFilterValue(selectedFilter)
     : null;
 
   const relativeDate =

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx

@@ -0,0 +1,45 @@
+import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
+import { SelectableItem } from '@/object-record/select/types/SelectableItem';
+import styled from '@emotion/styled';
+import { MenuItemMultiSelectAvatar } from 'twenty-ui';
+
+const StyledPinnedItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const ObjectFilterDropdownRecordPinnedItems = (props: {
+  selectableItems: SelectableItem[];
+  onChange: (
+    selectableItem: SelectableItem,
+    isNewCheckedValue: boolean,
+  ) => void;
+}) => {
+  return (
+    <StyledPinnedItemsContainer>
+      {props.selectableItems.map((selectableItem) => {
+        return (
+          <MenuItemMultiSelectAvatar
+            key={selectableItem.id}
+            selected={selectableItem.isSelected}
+            onSelectChange={(newCheckedValue) => {
+              props.onChange(selectableItem, newCheckedValue);
+            }}
+            avatar={
+              <StyledMultipleSelectDropdownAvatarChip
+                className="avatar-icon-container"
+                name={selectableItem.name}
+                avatarUrl={selectableItem.avatarUrl}
+                LeftIcon={selectableItem.AvatarIcon}
+                avatarType={selectableItem.avatarType}
+                isIconInverted={selectableItem.isIconInverted}
+                placeholderColorSeed={selectableItem.id}
+              />
+            }
+          />
+        );
+      })}
+    </StyledPinnedItemsContainer>
+  );
+};