Current workspace member filter (#8016)

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/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>
+  );
+};

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

@@ -2,16 +2,27 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { ObjectFilterDropdownRecordPinnedItems } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems';
+import { CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID } from '@/object-record/object-filter-dropdown/constants/CurrentWorkspaceMemberSelectableItemId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
 import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { RelationFilterValue } from '@/views/view-filter-value/types/RelationFilterValue';
+import { relationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/relationFilterValueSchema';
+import { IconUserCircle } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
-export const EMPTY_FILTER_VALUE = '[]';
+export const EMPTY_FILTER_VALUE: string = JSON.stringify({
+  isCurrentWorkspaceMemberSelected: false,
+  selectedRecordIds: [],
+} satisfies RelationFilterValue);
+
 export const MAX_RECORDS_TO_DISPLAY = 3;
 
 type ObjectFilterDropdownRecordSelectProps = {
@@ -54,9 +65,27 @@ export const ObjectFilterDropdownRecordSelect = ({
 
   const selectedFilter = useRecoilValue(selectedFilterState);
 
+  const { isCurrentWorkspaceMemberSelected, selectedRecordIds } =
+    relationFilterValueSchema
+      .catch({
+        isCurrentWorkspaceMemberSelected: false,
+        selectedRecordIds: [],
+      })
+      .parse(selectedFilter?.value);
+
   const objectNameSingular =
     filterDefinitionUsedInDropdown?.relationObjectMetadataNameSingular;
 
+  if (!isDefined(objectNameSingular)) {
+    throw new Error('relationObjectMetadataNameSingular is not defined');
+  }
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: objectNameSingular,
+  });
+
+  const objectLabelPlural = objectMetadataItem?.labelPlural;
+
   if (!isDefined(objectNameSingular)) {
     throw new Error('objectNameSingular is not defined');
   }
@@ -69,27 +98,53 @@ export const ObjectFilterDropdownRecordSelect = ({
       limit: 10,
     });
 
+  const currentWorkspaceMemberSelectableItem: SelectableItem = {
+    id: CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID,
+    name: 'Me',
+    isSelected: isCurrentWorkspaceMemberSelected,
+    AvatarIcon: IconUserCircle,
+  };
+
+  const pinnedSelectableItems: SelectableItem[] =
+    objectNameSingular === 'workspaceMember'
+      ? [currentWorkspaceMemberSelectableItem]
+      : [];
+
+  const filteredPinnedSelectableItems = pinnedSelectableItems.filter((item) =>
+    item.name
+      .toLowerCase()
+      .includes(objectFilterDropdownSearchInput.toLowerCase()),
+  );
+
   const handleMultipleRecordSelectChange = (
-    recordToSelect: SelectableItem,
-    newSelectedValue: boolean,
+    itemToSelect: SelectableItem,
+    isNewSelectedValue: boolean,
   ) => {
     if (loading) {
       return;
     }
 
-    const newSelectedRecordIds = newSelectedValue
-      ? [...objectFilterDropdownSelectedRecordIds, recordToSelect.id]
-      : objectFilterDropdownSelectedRecordIds.filter(
-          (id) => id !== recordToSelect.id,
-        );
+    const isItemCurrentWorkspaceMember =
+      itemToSelect.id === CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID;
 
-    if (newSelectedRecordIds.length === 0) {
-      emptyFilterButKeepDefinition();
-      deleteCombinedViewFilter(fieldId);
-      return;
-    }
+    const selectedRecordIdsWithAddedRecord = [
+      ...objectFilterDropdownSelectedRecordIds,
+      itemToSelect.id,
+    ];
+    const selectedRecordIdsWithRemovedRecord =
+      objectFilterDropdownSelectedRecordIds.filter(
+        (id) => id !== itemToSelect.id,
+      );
+
+    const newSelectedRecordIds = isItemCurrentWorkspaceMember
+      ? objectFilterDropdownSelectedRecordIds
+      : isNewSelectedValue
+        ? selectedRecordIdsWithAddedRecord
+        : selectedRecordIdsWithRemovedRecord;
 
-    setObjectFilterDropdownSelectedRecordIds(newSelectedRecordIds);
+    const newIsCurrentWorkspaceMemberSelected = isItemCurrentWorkspaceMember
+      ? isNewSelectedValue
+      : isCurrentWorkspaceMemberSelected;
 
     const selectedRecordNames = [
       ...recordsToSelect,
@@ -103,19 +158,32 @@ export const ObjectFilterDropdownRecordSelect = ({
       .filter((record) => newSelectedRecordIds.includes(record.id))
       .map((record) => record.name);
 
+    const selectedPinnedItemNames = newIsCurrentWorkspaceMemberSelected
+      ? [currentWorkspaceMemberSelectableItem.name]
+      : [];
+
+    const selectedItemNames = [
+      ...selectedPinnedItemNames,
+      ...selectedRecordNames,
+    ];
+
     const filterDisplayValue =
-      selectedRecordNames.length > MAX_RECORDS_TO_DISPLAY
-        ? `${selectedRecordNames.length} companies`
-        : selectedRecordNames.join(', ');
+      selectedItemNames.length > MAX_RECORDS_TO_DISPLAY
+        ? `${selectedItemNames.length} ${objectLabelPlural.toLowerCase()}`
+        : selectedItemNames.join(', ');
 
     if (
       isDefined(filterDefinitionUsedInDropdown) &&
       isDefined(selectedOperandInDropdown)
     ) {
       const newFilterValue =
-        newSelectedRecordIds.length > 0
-          ? JSON.stringify(newSelectedRecordIds)
-          : EMPTY_FILTER_VALUE;
+        newSelectedRecordIds.length > 0 || newIsCurrentWorkspaceMemberSelected
+          ? JSON.stringify({
+              isCurrentWorkspaceMemberSelected:
+                newIsCurrentWorkspaceMemberSelected,
+              selectedRecordIds: newSelectedRecordIds,
+            } satisfies RelationFilterValue)
+          : '';
 
       const viewFilter =
         currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
@@ -139,15 +207,26 @@ export const ObjectFilterDropdownRecordSelect = ({
   };
 
   return (
-    <MultipleSelectDropdown
-      selectableListId="object-filter-record-select-id"
-      hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
-      itemsToSelect={recordsToSelect}
-      filteredSelectedItems={filteredSelectedRecords}
-      selectedItems={selectedRecords}
-      onChange={handleMultipleRecordSelectChange}
-      searchFilter={objectFilterDropdownSearchInput}
-      loadingItems={loading}
-    />
+    <>
+      {filteredPinnedSelectableItems.length > 0 && (
+        <>
+          <ObjectFilterDropdownRecordPinnedItems
+            selectableItems={filteredPinnedSelectableItems}
+            onChange={handleMultipleRecordSelectChange}
+          />
+          <DropdownMenuSeparator />
+        </>
+      )}
+      <MultipleSelectDropdown
+        selectableListId="object-filter-record-select-id"
+        hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
+        itemsToSelect={recordsToSelect}
+        filteredSelectedItems={filteredSelectedRecords}
+        selectedItems={selectedRecords}
+        onChange={handleMultipleRecordSelectChange}
+        searchFilter={objectFilterDropdownSearchInput}
+        loadingItems={loading}
+      />
+    </>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/CurrentWorkspaceMemberSelectableItemId.ts

@@ -0,0 +1,2 @@
+export const CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID =
+  'CURRENT_WORKSPACE_MEMBER';

packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAggregateRecordsForRecordBoardColumn.ts

@@ -3,6 +3,7 @@ import { RecordBoardContext } from '@/object-record/record-board/contexts/Record
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
 import { buildRecordGqlFieldsAggregateForRecordBoard } from '@/object-record/record-board/record-board-column/utils/buildRecordGqlFieldsAggregateForRecordBoard';
 import { computeAggregateValueAndLabel } from '@/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel';
+import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
@@ -53,7 +54,11 @@ export const useAggregateRecordsForRecordBoardColumn = () => {
   );
 
   const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
+
+  const { filterValueDependencies } = useFilterValueDependencies();
+
   const requestFilters = computeViewRecordGqlOperationFilter(
+    filterValueDependencies,
     recordIndexFilters,
     objectMetadataItem.fields,
     recordIndexViewFilterGroups,

packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterValueDependencies.ts

@@ -0,0 +1,16 @@
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { FilterValueDependencies } from '@/object-record/record-filter/types/FilterValueDependencies';
+import { useRecoilValue } from 'recoil';
+
+export const useFilterValueDependencies = (): {
+  filterValueDependencies: FilterValueDependencies;
+} => {
+  const { id: currentWorkspaceMemberId } =
+    useRecoilValue(currentWorkspaceMemberState) ?? {};
+
+  return {
+    filterValueDependencies: {
+      currentWorkspaceMemberId,
+    },
+  };
+};