Fix View update button not being displayed in View Bar (#1469)

front/src/modules/ui/table/components/EntityTableBody.tsx

@@ -50,7 +50,7 @@ export function EntityTableBody() {
   }
 
   return (
-    <>
+    <tbody>
       {paddingTop > 0 && (
         <tr>
           <StyledSpace top={paddingTop} />
@@ -76,6 +76,6 @@ export function EntityTableBody() {
           <StyledSpace bottom={paddingBottom} />
         </tr>
       )}
-    </>
+    </tbody>
   );
 }

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { sortAndFilterBarScopedState } from '@/ui/filter-n-sort/states/sortAndFilterBarScopedState';
 import { IconPlus } from '@/ui/icon';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -91,10 +90,6 @@ export function EntityTableHeader() {
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
   );
-  const [, setSortAndFilterBar] = useRecoilScopedState(
-    sortAndFilterBarScopedState,
-    TableRecoilScopeContext,
-  );
 
   const [initialPointerPositionX, setInitialPointerPositionX] = useState<
     number | null
@@ -135,20 +130,13 @@ export function EntityTableHeader() {
           );
 
           setTableColumns(nextColumns);
-          setSortAndFilterBar(true);
         }
 
         set(resizeFieldOffsetState, 0);
         setInitialPointerPositionX(null);
         setResizedFieldKey(null);
       },
-    [
-      resizedFieldKey,
-      tableColumnsByKey,
-      tableColumns,
-      setTableColumns,
-      setSortAndFilterBar,
-    ],
+    [resizedFieldKey, tableColumnsByKey, tableColumns, setTableColumns],
   );
 
   useTrackPointer({

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
-import { sortAndFilterBarScopedState } from '@/ui/filter-n-sort/states/sortAndFilterBarScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
@@ -19,10 +18,6 @@ export const useTableColumns = () => {
     tableColumnsByKeyScopedSelector,
     TableRecoilScopeContext,
   );
-  const [, setSortAndFilterBar] = useRecoilScopedState(
-    sortAndFilterBarScopedState,
-    TableRecoilScopeContext,
-  );
 
   const handleColumnVisibilityChange = useCallback(
     (column: ColumnDefinition<ViewFieldMetadata>) => {
@@ -37,9 +32,8 @@ export const useTableColumns = () => {
           );
 
       setTableColumns(nextColumns);
-      setSortAndFilterBar(true);
     },
-    [tableColumnsByKey, tableColumns, setTableColumns, setSortAndFilterBar],
+    [tableColumnsByKey, tableColumns, setTableColumns],
   );
 
   return { handleColumnVisibilityChange };

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

@@ -5,6 +5,8 @@ import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-co
 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 { canPersistFiltersScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistFiltersScopedSelector';
+import { canPersistSortsScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistSortsScopedSelector';
 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';
@@ -54,6 +56,13 @@ export function TableHeader<SortField>({
   const canPersistTableColumns = useRecoilValue(
     canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]),
   );
+  const canPersistFilters = useRecoilValue(
+    canPersistFiltersScopedSelector([tableScopeId, currentTableViewId]),
+  );
+
+  const canPersistSorts = useRecoilValue(
+    canPersistSortsScopedSelector([tableScopeId, currentTableViewId]),
+  );
 
   const sortSelect = useCallback(
     (newSort: SelectedSortType<SortField>) => {
@@ -106,7 +115,9 @@ export function TableHeader<SortField>({
         }
         bottomComponent={
           <SortAndFilterBar
-            canToggle={canPersistTableColumns}
+            canPersistView={
+              canPersistTableColumns || canPersistFilters || canPersistSorts
+            }
             context={TableRecoilScopeContext}
             sorts={sorts}
             onRemoveSort={sortUnselect}