Added ability to edit filter and sort chip directly (#2968)

* - Added EditableSortChip
- Fixed EditableFilterChip onRemove not closing

* Added missing script in dependencies

* Linted files

* Finished fixing lint

packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx

@@ -3,19 +3,21 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
-import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
-import { IconArrowDown, IconArrowUp } from '@/ui/display/icon/index';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
+import { EditableSortChip } from '@/views/components/EditableSortChip';
+import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
 import { useViewBar } from '@/views/hooks/useViewBar';
 
 import { useViewScopedStates } from '../hooks/internal/useViewScopedStates';
 
-import SortOrFilterChip from './SortOrFilterChip';
-
 export type ViewBarDetailsProps = {
   hasFilterButton?: boolean;
   rightComponent?: ReactNode;
   filterDropdownId?: string;
+  viewBarId: string;
 };
 
 const StyledBar = styled.div`
@@ -90,6 +92,7 @@ export const ViewBarDetails = ({
   hasFilterButton = false,
   rightComponent,
   filterDropdownId,
+  viewBarId,
 }: ViewBarDetailsProps) => {
   const {
     currentViewSortsState,
@@ -98,7 +101,6 @@ export const ViewBarDetails = ({
     canPersistSortsSelector,
     isViewBarExpandedState,
   } = useViewScopedStates();
-  const { icons } = useLazyLoadIcons();
 
   const currentViewSorts = useRecoilValue(currentViewSortsState);
   const currentViewFilters = useRecoilValue(currentViewFiltersState);
@@ -106,7 +108,7 @@ export const ViewBarDetails = ({
   const canPersistSorts = useRecoilValue(canPersistSortsSelector);
   const isViewBarExpanded = useRecoilValue(isViewBarExpandedState);
 
-  const { resetViewBar, removeViewSort, removeViewFilter } = useViewBar();
+  const { resetViewBar } = useViewBar();
 
   const canPersistView = canPersistFilters || canPersistSorts;
 
@@ -114,6 +116,10 @@ export const ViewBarDetails = ({
     resetViewBar();
   };
 
+  const { upsertViewFilter } = useViewBar({
+    viewBarId: viewBarId,
+  });
+
   const shouldExpandViewBar =
     canPersistView ||
     ((currentViewSorts?.length || currentViewFilters?.length) &&
@@ -128,36 +134,32 @@ export const ViewBarDetails = ({
       <StyledFilterContainer>
         <StyledChipcontainer>
           {currentViewSorts?.map((sort) => {
-            return (
-              <SortOrFilterChip
-                key={sort.fieldMetadataId}
-                testId={sort.fieldMetadataId}
-                labelValue={sort.definition.label}
-                Icon={sort.direction === 'desc' ? IconArrowDown : IconArrowUp}
-                isSort
-                onRemove={() => removeViewSort(sort.fieldMetadataId)}
-              />
-            );
+            return <EditableSortChip viewSort={sort} />;
           })}
           {!!currentViewSorts?.length && !!currentViewFilters?.length && (
             <StyledSeperatorContainer>
               <StyledSeperator />
             </StyledSeperatorContainer>
           )}
-          {currentViewFilters?.map((filter) => {
+          {currentViewFilters?.map((viewFilter) => {
             return (
-              <SortOrFilterChip
-                key={filter.fieldMetadataId}
-                testId={filter.fieldMetadataId}
-                labelKey={filter.definition.label}
-                labelValue={`${getOperandLabelShort(filter.operand)} ${
-                  filter.displayValue
-                }`}
-                Icon={icons[filter.definition.iconName]}
-                onRemove={() => {
-                  removeViewFilter(filter.fieldMetadataId);
-                }}
-              />
+              <ObjectFilterDropdownScope
+                filterScopeId={viewFilter.fieldMetadataId}
+              >
+                <DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
+                  <ViewBarFilterEffect
+                    filterDropdownId={viewFilter.fieldMetadataId}
+                    onFilterSelect={upsertViewFilter}
+                  />
+                  <EditableFilterDropdownButton
+                    viewFilter={viewFilter}
+                    hotkeyScope={{
+                      scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
+                    }}
+                    viewFilterDropdownId={viewFilter.fieldMetadataId}
+                  />
+                </DropdownScope>
+              </ObjectFilterDropdownScope>
             );
           })}
         </StyledChipcontainer>