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

Author: charlesBochet

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

@@ -9,7 +9,7 @@ import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { sortAndFilterBarScopedState } from '../states/sortAndFilterBarScopedState';
+import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 
 import DropdownButton from './DropdownButton';
@@ -76,14 +76,14 @@ export function MultipleFiltersDropdownButton({
 
   const setHotkeyScope = useSetHotkeyScope();
 
-  const [sortAndFilterBar, setSortAndFilterBar] = useRecoilScopedState(
-    sortAndFilterBarScopedState,
+  const [isViewBarExpanded, setIsViewBarExpanded] = useRecoilScopedState(
+    isViewBarExpandedScopedState,
     context,
   );
 
   function handleIsUnfoldedChange(unfolded: boolean) {
     if (unfolded && isPrimaryButton) {
-      setSortAndFilterBar(!sortAndFilterBar);
+      setIsViewBarExpanded(!isViewBarExpanded);
     }
 
     if (

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

@@ -12,7 +12,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { useRemoveFilter } from '../hooks/useRemoveFilter';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
-import { sortAndFilterBarScopedState } from '../states/sortAndFilterBarScopedState';
+import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { SelectedSortType } from '../types/interface';
 import { getOperandLabelShort } from '../utils/getOperandLabel';
@@ -21,7 +21,7 @@ import { FilterDropdownButton } from './FilterDropdownButton';
 import SortOrFilterChip from './SortOrFilterChip';
 
 type OwnProps<SortField> = {
-  canToggle?: boolean;
+  canPersistView?: boolean;
   context: Context<string | null>;
   sorts: Array<SelectedSortType<SortField>>;
   onRemoveSort: (sortId: SelectedSortType<SortField>['key']) => void;
@@ -99,7 +99,7 @@ const StyledAddFilterContainer = styled.div`
 `;
 
 function SortAndFilterBar<SortField>({
-  canToggle,
+  canPersistView,
   context,
   sorts,
   onRemoveSort,
@@ -119,8 +119,8 @@ function SortAndFilterBar<SortField>({
     context,
   );
 
-  const [sortAndFilterBar] = useRecoilScopedState(
-    sortAndFilterBarScopedState,
+  const [isViewBarExpanded] = useRecoilScopedState(
+    isViewBarExpandedScopedState,
     context,
   );
 
@@ -142,10 +142,11 @@ function SortAndFilterBar<SortField>({
     onCancelClick();
   }
 
-  if (
-    (!canToggle && !filtersWithDefinition.length && !sorts.length) ||
-    !sortAndFilterBar
-  ) {
+  const shouldExpandViewBar =
+    canPersistView ||
+    ((filtersWithDefinition.length || sorts.length) && isViewBarExpanded);
+
+  if (!shouldExpandViewBar) {
     return null;
   }
 

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

@@ -7,9 +7,7 @@ import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/Style
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconChevronDown } from '@/ui/icon';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { sortAndFilterBarScopedState } from '../states/sortAndFilterBarScopedState';
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '../types/interface';
 
@@ -31,7 +29,6 @@ export function SortDropdownButton<SortField>({
   availableSorts,
   onSortSelect,
   HotkeyScope,
-  context,
 }: OwnProps<SortField>) {
   const theme = useTheme();
 
@@ -52,11 +49,6 @@ export function SortDropdownButton<SortField>({
     setSelectedSortDirection('asc');
   }, []);
 
-  const [, setSortAndFilterBar] = useRecoilScopedState(
-    sortAndFilterBarScopedState,
-    context,
-  );
-
   function handleIsUnfoldedChange(newIsUnfolded: boolean) {
     if (newIsUnfolded) {
       setIsUnfolded(true);
@@ -69,7 +61,6 @@ export function SortDropdownButton<SortField>({
   function handleAddSort(sort: SortType<SortField>) {
     setIsUnfolded(false);
     onSortItemSelect(sort);
-    setSortAndFilterBar(true);
   }
 
   return (

front/src/modules/ui/filter-n-sort/states/isViewBarExpandedScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isViewBarExpandedScopedState = atomFamily<boolean, string>({
+  key: 'isViewBarExpandedScopedState',
+  default: true,
+});

front/src/modules/ui/filter-n-sort/states/sortAndFilterBarScopedState.ts

@@ -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/EntityTableBody.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/components/EntityTableHeader.tsx

@@ -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/hooks/useTableColumns.ts

@@ -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}

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

@@ -22,7 +22,7 @@ module.exports = {
             'useRecoilState',
             'useRecoilFamilyState',
             'useRecoilSelector',
-            'useRecoilScopedDate',
+            'useRecoilScopedState',
             'useRecoilScopedFamilyState',
             'useRecoilScopedSelector',
             'useRecoilValue',