Skip to content

Commit bb6ddc9

Browse files
rutviksavsanirutviksavsanintsekourasandrewserong
authored
Fix the dataviews experiment locked fields position on toggle. (#74326)
Co-authored-by: rutviksavsani <rutviksavsani@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
1 parent 12e68af commit bb6ddc9

2 files changed

Lines changed: 25 additions & 49 deletions

File tree

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
- DataViews: Combined field alignment in table layout. [#73908](https://github.com/WordPress/gutenberg/pull/73908)
2323
- DataViews: Fix table row multiselection in Firefox [#73945](https://github.com/WordPress/gutenberg/pull/73945)
2424
- DataViews: `filterSortAndPaginate()` will ignore sorting on non-sortable fields [#73950](https://github.com/WordPress/gutenberg/pull/73950)
25+
- DataViews: Fix locked fields order when toggling visibility in properties section. [#74326](https://github.com/WordPress/gutenberg/pull/74326)
2526

2627
### Enhancements
2728

‎packages/dataviews/src/components/dataviews-view-config/properties-section.tsx‎

Lines changed: 24 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -78,41 +78,26 @@ export function PropertiesSection( {
7878
field: descriptionField,
7979
isVisibleFlag: 'showDescription',
8080
},
81-
].filter( ( { field } ) => isDefined( field ) );
81+
].filter( ( { field } ) => isDefined( field ) ) as Array< {
82+
field: NormalizedField< any >;
83+
isVisibleFlag: string;
84+
} >;
8285
const visibleFieldIds = view.fields ?? [];
8386
const visibleRegularFieldsCount = regularFields.filter( ( f ) =>
8487
visibleFieldIds.includes( f.id )
8588
).length;
8689

87-
let visibleLockedFields = lockedFields.filter(
88-
( { field, isVisibleFlag } ) =>
90+
const visibleLockedFields = lockedFields.filter(
91+
( { isVisibleFlag } ) =>
8992
// @ts-expect-error
90-
isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
91-
) as Array< {
92-
field: NormalizedField< any >;
93-
isVisibleFlag: string;
94-
} >;
93+
view[ isVisibleFlag ] ?? true
94+
);
9595

9696
// If only one field (locked or regular) is visible, prevent it from being hidden
9797
const totalVisibleFields =
9898
visibleLockedFields.length + visibleRegularFieldsCount;
99-
if ( totalVisibleFields === 1 ) {
100-
if ( visibleLockedFields.length === 1 ) {
101-
visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
102-
...locked,
103-
field: { ...locked.field, enableHiding: false },
104-
} ) );
105-
}
106-
}
107-
108-
const hiddenLockedFields = lockedFields.filter(
109-
( { field, isVisibleFlag } ) =>
110-
// @ts-expect-error
111-
isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
112-
) as Array< {
113-
field: NormalizedField< any >;
114-
isVisibleFlag: string;
115-
} >;
99+
const isSingleVisibleLockedField =
100+
totalVisibleFields === 1 && visibleLockedFields.length === 1;
116101

117102
return (
118103
<Stack direction="column" className="dataviews-field-control">
@@ -126,32 +111,23 @@ export function PropertiesSection( {
126111
className="dataviews-view-config__properties"
127112
>
128113
<ItemGroup isBordered isSeparated size="medium">
129-
{ visibleLockedFields.map( ( { field, isVisibleFlag } ) => {
130-
return (
131-
<FieldItem
132-
key={ field.id }
133-
field={ field }
134-
isVisible
135-
onToggleVisibility={ () => {
136-
onChangeView( {
137-
...view,
138-
[ isVisibleFlag ]: false,
139-
} );
140-
} }
141-
/>
142-
);
143-
} ) }
114+
{ lockedFields.map( ( { field, isVisibleFlag } ) => {
115+
// @ts-expect-error
116+
const isVisible = view[ isVisibleFlag ] ?? true;
117+
const fieldToRender =
118+
isSingleVisibleLockedField && isVisible
119+
? { ...field, enableHiding: false }
120+
: field;
144121

145-
{ hiddenLockedFields.map( ( { field, isVisibleFlag } ) => {
146122
return (
147123
<FieldItem
148124
key={ field.id }
149-
field={ field }
150-
isVisible={ false }
125+
field={ fieldToRender }
126+
isVisible={ isVisible }
151127
onToggleVisibility={ () => {
152128
onChangeView( {
153129
...view,
154-
[ isVisibleFlag ]: true,
130+
[ isVisibleFlag ]: ! isVisible,
155131
} );
156132
} }
157133
/>
@@ -161,11 +137,10 @@ export function PropertiesSection( {
161137
{ regularFields.map( ( field ) => {
162138
// Check if this is the last visible field to prevent hiding
163139
const isVisible = visibleFieldIds.includes( field.id );
164-
const isLastVisible =
165-
totalVisibleFields === 1 && isVisible;
166-
const fieldToRender = isLastVisible
167-
? { ...field, enableHiding: false }
168-
: field;
140+
const fieldToRender =
141+
totalVisibleFields === 1 && isVisible
142+
? { ...field, enableHiding: false }
143+
: field;
169144

170145
return (
171146
<FieldItem

0 commit comments

Comments
 (0)