From f332c3bee2cc5a415ef9ef2ef4017bfa2f251931 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 6 Sep 2023 10:37:29 +0200 Subject: [PATCH] Fix View update button not being displayed in View Bar (#1469) --- .../MultipleFiltersDropdownButton.tsx | 8 ++++---- .../components/SortAndFilterBar.tsx | 19 ++++++++++--------- .../components/SortDropdownButton.tsx | 9 --------- .../states/isViewBarExpandedScopedState.ts | 6 ++++++ .../states/sortAndFilterBarScopedState.ts | 6 ------ .../ui/table/components/EntityTableBody.tsx | 4 ++-- .../ui/table/components/EntityTableHeader.tsx | 14 +------------- .../modules/ui/table/hooks/useTableColumns.ts | 8 +------- .../table-header/components/TableHeader.tsx | 13 ++++++++++++- .../rules/matching-state-variable.js | 2 +- 10 files changed, 37 insertions(+), 52 deletions(-) create mode 100644 front/src/modules/ui/filter-n-sort/states/isViewBarExpandedScopedState.ts delete mode 100644 front/src/modules/ui/filter-n-sort/states/sortAndFilterBarScopedState.ts diff --git a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx index b3b26c405..7644ee0e5 100644 --- a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx +++ b/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 ( diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx index 421fd0956..01b66d1ff 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx +++ b/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 = { - canToggle?: boolean; + canPersistView?: boolean; context: Context; sorts: Array>; onRemoveSort: (sortId: SelectedSortType['key']) => void; @@ -99,7 +99,7 @@ const StyledAddFilterContainer = styled.div` `; function SortAndFilterBar({ - canToggle, + canPersistView, context, sorts, onRemoveSort, @@ -119,8 +119,8 @@ function SortAndFilterBar({ context, ); - const [sortAndFilterBar] = useRecoilScopedState( - sortAndFilterBarScopedState, + const [isViewBarExpanded] = useRecoilScopedState( + isViewBarExpandedScopedState, context, ); @@ -142,10 +142,11 @@ function SortAndFilterBar({ onCancelClick(); } - if ( - (!canToggle && !filtersWithDefinition.length && !sorts.length) || - !sortAndFilterBar - ) { + const shouldExpandViewBar = + canPersistView || + ((filtersWithDefinition.length || sorts.length) && isViewBarExpanded); + + if (!shouldExpandViewBar) { return null; } diff --git a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx index 382fd618d..db860dce9 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx +++ b/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({ availableSorts, onSortSelect, HotkeyScope, - context, }: OwnProps) { const theme = useTheme(); @@ -52,11 +49,6 @@ export function SortDropdownButton({ setSelectedSortDirection('asc'); }, []); - const [, setSortAndFilterBar] = useRecoilScopedState( - sortAndFilterBarScopedState, - context, - ); - function handleIsUnfoldedChange(newIsUnfolded: boolean) { if (newIsUnfolded) { setIsUnfolded(true); @@ -69,7 +61,6 @@ export function SortDropdownButton({ function handleAddSort(sort: SortType) { setIsUnfolded(false); onSortItemSelect(sort); - setSortAndFilterBar(true); } return ( diff --git a/front/src/modules/ui/filter-n-sort/states/isViewBarExpandedScopedState.ts b/front/src/modules/ui/filter-n-sort/states/isViewBarExpandedScopedState.ts new file mode 100644 index 000000000..f91684064 --- /dev/null +++ b/front/src/modules/ui/filter-n-sort/states/isViewBarExpandedScopedState.ts @@ -0,0 +1,6 @@ +import { atomFamily } from 'recoil'; + +export const isViewBarExpandedScopedState = atomFamily({ + key: 'isViewBarExpandedScopedState', + default: true, +}); diff --git a/front/src/modules/ui/filter-n-sort/states/sortAndFilterBarScopedState.ts b/front/src/modules/ui/filter-n-sort/states/sortAndFilterBarScopedState.ts deleted file mode 100644 index 34458b1d9..000000000 --- a/front/src/modules/ui/filter-n-sort/states/sortAndFilterBarScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const sortAndFilterBarScopedState = atomFamily({ - key: 'sortAndFilterBarScopedState', - default: false, -}); diff --git a/front/src/modules/ui/table/components/EntityTableBody.tsx b/front/src/modules/ui/table/components/EntityTableBody.tsx index a0a9d7082..533dea895 100644 --- a/front/src/modules/ui/table/components/EntityTableBody.tsx +++ b/front/src/modules/ui/table/components/EntityTableBody.tsx @@ -50,7 +50,7 @@ export function EntityTableBody() { } return ( - <> + {paddingTop > 0 && ( @@ -76,6 +76,6 @@ export function EntityTableBody() { )} - + ); } diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx index 703b72a56..feff50511 100644 --- a/front/src/modules/ui/table/components/EntityTableHeader.tsx +++ b/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({ diff --git a/front/src/modules/ui/table/hooks/useTableColumns.ts b/front/src/modules/ui/table/hooks/useTableColumns.ts index 9d040b9d6..04fbefe58 100644 --- a/front/src/modules/ui/table/hooks/useTableColumns.ts +++ b/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) => { @@ -37,9 +32,8 @@ export const useTableColumns = () => { ); setTableColumns(nextColumns); - setSortAndFilterBar(true); }, - [tableColumnsByKey, tableColumns, setTableColumns, setSortAndFilterBar], + [tableColumnsByKey, tableColumns, setTableColumns], ); return { handleColumnVisibilityChange }; diff --git a/front/src/modules/ui/table/table-header/components/TableHeader.tsx b/front/src/modules/ui/table/table-header/components/TableHeader.tsx index f915a8b44..255e40b99 100644 --- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx +++ b/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({ const canPersistTableColumns = useRecoilValue( canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]), ); + const canPersistFilters = useRecoilValue( + canPersistFiltersScopedSelector([tableScopeId, currentTableViewId]), + ); + + const canPersistSorts = useRecoilValue( + canPersistSortsScopedSelector([tableScopeId, currentTableViewId]), + ); const sortSelect = useCallback( (newSort: SelectedSortType) => { @@ -106,7 +115,9 @@ export function TableHeader({ } bottomComponent={