feedback

packages/dataviews/src/add-filter.js

@@ -20,10 +20,7 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function AddFilter(
-	{ filters, view, onChangeView, setOpenFilterOnMount },
-	ref
-) {
+function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
 	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
 		return null;
 	}
@@ -49,7 +46,7 @@ function AddFilter(
 					<DropdownMenuItem
 						key={ filter.field }
 						onClick={ () => {
-							setOpenFilterOnMount( filter.field );
+							setOpenedFilter( filter.field );
 							onChangeView( {
 								...view,
 								page: 1,

packages/dataviews/src/dataviews.js

@@ -37,7 +37,7 @@ export default function DataViews( {
 	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
-	const [ openFilterOnMount, setOpenFilterOnMount ] = useState( null );
+	const [ openedFilter, setOpenedFilter ] = useState( null );
 
 	useEffect( () => {
 		if (
@@ -115,8 +115,8 @@ export default function DataViews( {
 						fields={ _fields }
 						view={ view }
 						onChangeView={ onChangeView }
-						openFilterOnMount={ openFilterOnMount }
-						setOpenFilterOnMount={ setOpenFilterOnMount }
+						openedFilter={ openedFilter }
+						setOpenedFilter={ setOpenedFilter }
 					/>
 				</HStack>
 				<ViewComponent
@@ -131,7 +131,7 @@ export default function DataViews( {
 					onDetailsChange={ onDetailsChange }
 					selection={ selection }
 					deferredRendering={ deferredRendering }
-					setOpenFilterOnMount={ setOpenFilterOnMount }
+					setOpenedFilter={ setOpenedFilter }
 				/>
 				<Pagination
 					view={ view }

packages/dataviews/src/filter-summary.js

@@ -148,7 +148,7 @@ function ResetFilter( { filter, view, onChangeView, addFilterRef } ) {
 
 export default function FilterSummary( {
 	addFilterRef,
-	openFilterOnMount,
+	openedFilter,
 	...commonProps
 } ) {
 	const toggleRef = useRef();
@@ -159,7 +159,7 @@ export default function FilterSummary( {
 	);
 	return (
 		<Dropdown
-			defaultOpen={ openFilterOnMount === filter.field }
+			defaultOpen={ openedFilter === filter.field }
 			contentClassName="dataviews-filter-summary__popover"
 			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
 			onClose={ () => {

packages/dataviews/src/filters.js

@@ -16,8 +16,8 @@ const Filters = memo( function Filters( {
 	fields,
 	view,
 	onChangeView,
-	openFilterOnMount,
-	setOpenFilterOnMount,
+	openedFilter,
+	setOpenedFilter,
 } ) {
 	const addFilterRef = useRef();
 	const filters = [];
@@ -57,15 +57,24 @@ const Filters = memo( function Filters( {
 		}
 	} );
 	// Sort filters by primary property. We need the primary filters to be first.
-	filters.sort( ( a, b ) => b.isPrimary - a.isPrimary ); // Type coercion to numbers.
+	// Then we sort by name.
+	filters.sort( ( a, b ) => {
+		if ( a.isPrimary && ! b.isPrimary ) {
+			return -1;
+		}
+		if ( ! a.isPrimary && b.isPrimary ) {
+			return 1;
+		}
+		return a.name.localeCompare( b.name );
+	} );
 	const addFilter = (
 		<AddFilter
 			key="add-filter"
 			filters={ filters }
 			view={ view }
 			onChangeView={ onChangeView }
 			ref={ addFilterRef }
-			setOpenFilterOnMount={ setOpenFilterOnMount }
+			setOpenedFilter={ setOpenedFilter }
 		/>
 	);
 	const filterComponents = [
@@ -81,7 +90,7 @@ const Filters = memo( function Filters( {
 					view={ view }
 					onChangeView={ onChangeView }
 					addFilterRef={ addFilterRef }
-					openFilterOnMount={ openFilterOnMount }
+					openedFilter={ openedFilter }
 				/>
 			);
 		} ),

packages/dataviews/src/view-table.js

@@ -66,7 +66,7 @@ const sanitizeOperators = ( field ) => {
 };
 
 const HeaderMenu = forwardRef( function HeaderMenu(
-	{ field, view, onChangeView, onHide, setOpenFilterOnMount },
+	{ field, view, onChangeView, onHide, setOpenedFilter },
 	ref
 ) {
 	const isHidable = field.enableHiding !== false;
@@ -151,7 +151,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 						<DropdownMenuItem
 							prefix={ <Icon icon={ funnel } /> }
 							onClick={ () => {
-								setOpenFilterOnMount( field.id );
+								setOpenedFilter( field.id );
 								onChangeView( {
 									...view,
 									page: 1,
@@ -226,7 +226,7 @@ function ViewTable( {
 	deferredRendering,
 	selection,
 	onSelectionChange,
-	setOpenFilterOnMount,
+	setOpenedFilter,
 } ) {
 	const hasBulkActions = actions?.some( ( action ) => action.supportsBulk );
 	const headerMenuRefs = useRef( new Map() );
@@ -337,9 +337,7 @@ function ViewTable( {
 									view={ view }
 									onChangeView={ onChangeView }
 									onHide={ onHide }
-									setOpenFilterOnMount={
-										setOpenFilterOnMount
-									}
+									setOpenedFilter={ setOpenedFilter }
 								/>
 							</th>
 						) ) }