feat: persist view filters and sorts on Update View button click (#1290)

* feat: add viewFilters table

Closes #1121

* feat: add Update View button + Create View dropdown

Closes #1124, #1289

* feat: add View Filter resolvers

* feat: persist view filters and sorts on Update View button click

Closes #1123

* refactor: code review

- Rename recoil selectors
- Rename filters `field` property to `key`

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -7,13 +7,14 @@ import type {
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
 import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
-import { sortScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
+import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TableOptionsDropdownButton } from '@/ui/table/options/components/TableOptionsDropdownButton';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
+import { TableUpdateViewButtonGroup } from '../../options/components/TableUpdateViewButtonGroup';
 import { TableViewsDropdownButton } from '../../options/components/TableViewsDropdownButton';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import type { TableView } from '../../states/tableViewsState';
@@ -24,8 +25,8 @@ type OwnProps<SortField> = {
   viewName: string;
   availableSorts?: Array<SortType<SortField>>;
   onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
-  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
   onViewsChange?: (views: TableView[]) => void;
+  onViewSubmit?: () => void;
   onImport?: () => void;
 };
 
@@ -33,30 +34,29 @@ export function TableHeader<SortField>({
   viewName,
   availableSorts,
   onColumnsChange,
-  onSortsUpdate,
   onViewsChange,
+  onViewSubmit,
   onImport,
 }: OwnProps<SortField>) {
   const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
-    sortScopedState,
+    sortsScopedState,
     TableRecoilScopeContext,
   );
-  const handleSortsUpdate = onSortsUpdate ?? setSorts;
 
   const sortSelect = useCallback(
     (newSort: SelectedSortType<SortField>) => {
       const newSorts = updateSortOrFilterByKey(sorts, newSort);
-      handleSortsUpdate(newSorts);
+      setSorts(newSorts);
     },
-    [handleSortsUpdate, sorts],
+    [setSorts, sorts],
   );
 
   const sortUnselect = useCallback(
     (sortKey: string) => {
       const newSorts = sorts.filter((sort) => sort.key !== sortKey);
-      handleSortsUpdate(newSorts);
+      setSorts(newSorts);
     },
-    [handleSortsUpdate, sorts],
+    [setSorts, sorts],
   );
 
   return (
@@ -65,7 +65,7 @@ export function TableHeader<SortField>({
         <TableViewsDropdownButton
           defaultViewName={viewName}
           onViewsChange={onViewsChange}
-          HotkeyScope={TableViewsHotkeyScope.Dropdown}
+          HotkeyScope={TableViewsHotkeyScope.ListDropdown}
         />
       }
       displayBottomBorder={false}
@@ -97,10 +97,14 @@ export function TableHeader<SortField>({
           context={TableRecoilScopeContext}
           sorts={sorts}
           onRemoveSort={sortUnselect}
-          onCancelClick={() => {
-            handleSortsUpdate([]);
-          }}
+          onCancelClick={() => setSorts([])}
           hasFilterButton
+          rightComponent={
+            <TableUpdateViewButtonGroup
+              onViewSubmit={onViewSubmit}
+              HotkeyScope={TableViewsHotkeyScope.CreateDropdown}
+            />
+          }
         />
       }
     />