fix: allow access to the Update View button when a table column can be persisted (#1433)

Closes #1432

front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx

@@ -21,6 +21,7 @@ import { FilterDropdownButton } from './FilterDropdownButton';
 import SortOrFilterChip from './SortOrFilterChip';
 
 type OwnProps<SortField> = {
+  canToggle?: boolean;
   context: Context<string | null>;
   sorts: Array<SelectedSortType<SortField>>;
   onRemoveSort: (sortId: SelectedSortType<SortField>['key']) => void;
@@ -93,6 +94,7 @@ const StyledSeperator = styled.div`
 `;
 
 function SortAndFilterBar<SortField>({
+  canToggle,
   context,
   sorts,
   onRemoveSort,
@@ -136,7 +138,7 @@ function SortAndFilterBar<SortField>({
   }
 
   if (
-    (!filtersWithDefinition.length && !sorts.length) ||
+    (!canToggle && !filtersWithDefinition.length && !sorts.length) ||
     !isSortAndFilterBarOpen
   ) {
     return null;

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

@@ -3,6 +3,7 @@ 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';
@@ -88,6 +89,10 @@ export function EntityTableHeader() {
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
   );
+  const [, setIsSortAndFilterBarOpen] = useRecoilScopedState(
+    sortAndFilterBarScopedState,
+    TableRecoilScopeContext,
+  );
 
   const [initialPointerPositionX, setInitialPointerPositionX] = useState<
     number | null
@@ -128,13 +133,20 @@ export function EntityTableHeader() {
           );
 
           setColumns(nextColumns);
+          setIsSortAndFilterBarOpen(true);
         }
 
         set(resizeFieldOffsetState, 0);
         setInitialPointerPositionX(null);
         setResizedFieldKey(null);
       },
-    [resizedFieldKey, columnsByKey, columns, setColumns],
+    [
+      resizedFieldKey,
+      columnsByKey,
+      columns,
+      setColumns,
+      setIsSortAndFilterBarOpen,
+    ],
   );
 
   useTrackPointer({

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

@@ -1,6 +1,7 @@
 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';
 
@@ -18,6 +19,10 @@ export const useTableColumns = () => {
     tableColumnsByKeyScopedSelector,
     TableRecoilScopeContext,
   );
+  const [, setIsSortAndFilterBarOpen] = useRecoilScopedState(
+    sortAndFilterBarScopedState,
+    TableRecoilScopeContext,
+  );
 
   const handleColumnVisibilityChange = useCallback(
     (column: ColumnDefinition<ViewFieldMetadata>) => {
@@ -32,8 +37,14 @@ export const useTableColumns = () => {
           );
 
       setTableColumns(nextColumns);
+      setIsSortAndFilterBarOpen(true);
     },
-    [setTableColumns, tableColumns, tableColumnsByKey],
+    [
+      setIsSortAndFilterBarOpen,
+      setTableColumns,
+      tableColumns,
+      tableColumnsByKey,
+    ],
   );
 
   return { handleColumnVisibilityChange };

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -138,10 +138,7 @@ export function TableOptionsDropdownContent({
           const currentColumns = await snapshot.getPromise(
             tableColumnsScopedState(tableScopeId),
           );
-          set(
+          set(savedTableColumnsScopedState(viewToCreate.id), currentColumns);
-            savedTableColumnsScopedState(viewToCreate.id),
-            currentColumns.map((column) => ({ ...column, id: v4() })),
-          );
 
           const selectedFilters = await snapshot.getPromise(
             filtersScopedState(tableScopeId),

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

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
@@ -9,13 +10,19 @@ import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope'
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
 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';
+import { canPersistTableColumnsScopedSelector } from '../../states/selectors/canPersistTableColumnsScopedSelector';
+import {
+  currentTableViewIdState,
+  type TableView,
+} from '../../states/tableViewsState';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';
 
@@ -34,10 +41,19 @@ export function TableHeader<SortField>({
   onViewSubmit,
   onImport,
 }: OwnProps<SortField>) {
+  const tableScopeId = useContextScopeId(TableRecoilScopeContext);
+
+  const currentTableViewId = useRecoilScopedValue(
+    currentTableViewIdState,
+    TableRecoilScopeContext,
+  );
   const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
     sortsScopedState,
     TableRecoilScopeContext,
   );
+  const canPersistTableColumns = useRecoilValue(
+    canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]),
+  );
 
   const sortSelect = useCallback(
     (newSort: SelectedSortType<SortField>) => {
@@ -90,6 +106,7 @@ export function TableHeader<SortField>({
         }
         bottomComponent={
           <SortAndFilterBar
+            canToggle={canPersistTableColumns}
             context={TableRecoilScopeContext}
             sorts={sorts}
             onRemoveSort={sortUnselect}