DataViews: Add user input filter (#103276)

* Add userInput property to FilterByConfig and NormalizedFilter interfaces

This update introduces a new optional property, userInput, to both the FilterByConfig and NormalizedFilter interfaces, allowing filters to accept user input. Additionally, a type property is added to NormalizedFilter for better field type specification.

* Add UserInputWidget component for filter input handling

This commit introduces the UserInputWidget component, which allows users to input values for filters in the dataviews. It includes a SingleInputSummary for managing single selection operators and utilizes a debounced input for better performance. The component integrates with existing filter logic to update the view's filters based on user input.

* Enhance FilterSummary to support UserInputWidget for dynamic filtering

This update modifies the FilterSummary component to conditionally render the UserInputWidget based on the userInput property of filters. It also adjusts the logic for determining active elements to accommodate user input, ensuring a seamless integration with existing filter functionalities. Additionally, the useFilters hook is updated to handle the new userInput property, and styles are added for the UserInputWidget.

* Refine operator filtering logic in sanitizeOperators function

This update enhances the sanitizeOperators function to specifically filter operators for integer fields. Additionally, the logic in the column header menu is adjusted to allow adding filters based on user input or existing elements, improving the overall filtering capabilities in the dataviews.

* Add filterBy configuration for integer fields to support user input

This update introduces a filterBy property for integer fields in the fixtures, allowing the use of specific operators and enabling user input for filtering. This enhancement aligns with previous updates to improve filtering capabilities in the dataviews.

* Refactor UserInputWidget to streamline filter handling

This update refines the UserInputWidget component by renaming the currentFilter to activeFilter for clarity and consistency. The applyFilterChange function is simplified to directly handle the new value logic, enhancing readability. Additionally, the SingleInputSummary component is updated to ensure it only renders when an active filter is present and valid, improving the overall user experience in managing filters.

* Refactor filtering components to enhance user input handling

* Update SearchWidget to refine integer filter handling

This change modifies the SearchWidget component to ensure that the InputWidget is only rendered for integer filters when no elements are present. This adjustment enhances the filtering logic and improves user experience by preventing unnecessary input fields from appearing.

* Add changelog

* Enhance filter functionality by adding user input support based on the Edit

Update changelog to reflect this change.

* Refactor input and search widgets to utilize fields prop for improved functionality

* Fix type

* Fix types

* Rename FilterSummary component to Filter

* Fix types

* Pass all filter data to Edit

* Revert filter.elements type and check length instead

* Update filterBy property to be required and initialize with default operators in field types

* Change variable name

* Fix lint

Author: chihsuan

client/sites/components/sites-dataviews/index.tsx

@@ -17,7 +17,7 @@ import SiteField from './dataviews-fields/site-field';
 import SiteIcon from './site-icon';
 import { SiteStats } from './sites-site-stats';
 import { SiteStatus } from './sites-site-status';
-import type { View } from '@wordpress/dataviews';
+import type { View } from '@automattic/dataviews';
 import './style.scss';
 import './dataview-style.scss';
 

packages/dataviews/CHANGELOG.automattic.md

@@ -10,6 +10,7 @@
 - Add `renderItemLink` prop support in the `DataViews` component. It replaces `onClickItem`prop and allows integration with router libraries.
 - Enhance filter component styles.
 - Adds new story that combines DataViews and DataForm.
+- Add user input filter support based on the `Edit` property of the field type definitions.
 
 ## 0.1.1
 

packages/dataviews/src/components/dataviews-filters/filter-summary.tsx renamed to packages/dataviews/src/components/dataviews-filters/filter.tsx

@@ -27,6 +27,7 @@ const SPACE = ' ';
  * Internal dependencies
  */
 import SearchWidget from './search-widget';
+import InputWidget from './input-widget';
 import {
 	OPERATORS,
 	OPERATOR_IS,
@@ -42,6 +43,7 @@ import type {
 	Operator,
 	Option,
 	View,
+	NormalizedField,
 } from '../../types';
 
 interface FilterTextProps {
@@ -56,9 +58,10 @@ interface OperatorSelectorProps {
 	onChangeView: ( view: View ) => void;
 }
 
-interface FilterSummaryProps extends OperatorSelectorProps {
+interface FilterProps extends OperatorSelectorProps {
 	addFilterRef: RefObject< HTMLButtonElement >;
 	openedFilter: string | null;
+	fields: NormalizedField< any >[];
 }
 
 const FilterText = ( {
@@ -226,22 +229,36 @@ function OperatorSelector( {
 	);
 }
 
-export default function FilterSummary( {
+export default function Filter( {
 	addFilterRef,
 	openedFilter,
+	fields,
 	...commonProps
-}: FilterSummaryProps ) {
+}: FilterProps ) {
 	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
-	const activeElements = filter.elements.filter( ( element ) => {
-		if ( filter.singleSelection ) {
-			return element.value === filterInView?.value;
-		}
-		return filterInView?.value?.includes( element.value );
-	} );
+
+	let activeElements: Option[] = [];
+
+	if ( filter.elements.length > 0 ) {
+		activeElements = filter.elements.filter( ( element ) => {
+			if ( filter.singleSelection ) {
+				return element.value === filterInView?.value;
+			}
+			return filterInView?.value?.includes( element.value );
+		} );
+	} else if ( filterInView?.value !== undefined ) {
+		activeElements = [
+			{
+				value: filterInView.value,
+				label: filterInView.value,
+			},
+		];
+	}
+
 	const isPrimary = filter.isPrimary;
 	const hasValues = filterInView?.value !== undefined;
 	const canResetOrRemove = ! isPrimary || hasValues;
@@ -330,7 +347,17 @@ export default function FilterSummary( {
 				return (
 					<VStack spacing={ 0 } justify="flex-start">
 						<OperatorSelector { ...commonProps } />
-						<SearchWidget { ...commonProps } />
+						{ commonProps.filter.elements.length > 0 ? (
+							<SearchWidget
+								{ ...commonProps }
+								filter={ {
+									...commonProps.filter,
+									elements: commonProps.filter.elements,
+								} }
+							/>
+						) : (
+							<InputWidget { ...commonProps } fields={ fields } />
+						) }
 					</VStack>
 				);
 			} }

packages/dataviews/src/components/dataviews-filters/index.tsx

@@ -16,7 +16,7 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import FilterSummary from './filter-summary';
+import Filter from './filter';
 import { default as AddFilter, AddFilterMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
@@ -28,7 +28,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	return useMemo( () => {
 		const filters: NormalizedFilter[] = [];
 		fields.forEach( ( field ) => {
-			if ( ! field.elements?.length ) {
+			if ( ! field.elements?.length && ! field.Edit ) {
 				return;
 			}
 
@@ -41,7 +41,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 			filters.push( {
 				field: field.id,
 				name: field.label,
-				elements: field.elements,
+				elements: field.elements ?? [],
 				singleSelection: operators.some( ( op ) =>
 					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
 				),
@@ -195,10 +195,11 @@ function Filters( { className }: { className?: string } ) {
 	const filterComponents = [
 		...visibleFilters.map( ( filter ) => {
 			return (
-				<FilterSummary
+				<Filter
 					key={ filter.field }
 					filter={ filter }
 					view={ view }
+					fields={ fields }
 					onChangeView={ onChangeView }
 					addFilterRef={ addFilterRef }
 					openedFilter={ openedFilter }

packages/dataviews/src/components/dataviews-filters/input-widget.tsx

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { View, NormalizedFilter, NormalizedField } from '../../types';
+
+interface UserInputWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< any >[];
+}
+
+export default function InputWidget( {
+	filter,
+	view,
+	onChangeView,
+	fields,
+}: UserInputWidgetProps ) {
+	const currentFilter = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+	if ( ! currentFilter ) {
+		return null;
+	}
+
+	const field = fields.find( ( f ) => f.id === filter.field );
+	if ( ! field || ! field.Edit ) {
+		return null;
+	}
+
+	const currentValue = currentFilter.value;
+
+	const data = useMemo( () => {
+		return ( view.filters ?? [] ).reduce(
+			( acc, f ) => {
+				acc[ f.field ] = f.value;
+				return acc;
+			},
+			{} as Record< string, any >
+		);
+	}, [ view.filters ] );
+
+	const handleChange = useCallback(
+		( data: Record< string, any > ) => {
+			const nextValue = data[ field.id ];
+			if ( nextValue === currentValue ) {
+				return;
+			}
+
+			onChangeView( {
+				...view,
+				filters: ( view.filters ?? [] ).map( ( _filter ) =>
+					_filter.field === filter.field
+						? {
+								..._filter,
+								operator:
+									currentFilter.operator ||
+									filter.operators[ 0 ],
+								value: nextValue,
+						  }
+						: _filter
+				),
+			} );
+		},
+		[ currentValue, field, onChangeView, view, filter, currentFilter ]
+	);
+
+	return (
+		<div className="dataviews-filters__user-input-widget">
+			<field.Edit
+				data={ data }
+				field={ field }
+				onChange={ handleChange }
+			/>
+		</div>
+	);
+}

packages/dataviews/src/components/dataviews-filters/search-widget.tsx

@@ -18,11 +18,19 @@ import { search, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import type { Filter, NormalizedFilter, View } from '../../types';
+import type {
+	Filter,
+	NormalizedFilter,
+	View,
+	NormalizedField,
+	Option,
+} from '../../types';
 
 interface SearchWidgetProps {
 	view: View;
-	filter: NormalizedFilter;
+	filter: NormalizedFilter & {
+		elements: Option[];
+	};
 	onChangeView: ( view: View ) => void;
 }
 

packages/dataviews/src/components/dataviews-filters/style.scss

@@ -36,7 +36,8 @@
 .dataviews-filters__summary-operators-container {
 	padding: $grid-unit-10 $grid-unit-20;
 
-	&:has(+ .dataviews-filters__search-widget-listbox) {
+	&:has(+ .dataviews-filters__search-widget-listbox),
+	&:has(+ .dataviews-filters__user-input-widget) {
 		border-bottom: 1px solid $gray-200;
 	}
 
@@ -375,3 +376,11 @@
 .dataviews-search {
 	width: fit-content;
 }
+
+.dataviews-filters__user-input-widget {
+	padding: $grid-unit-20;
+
+	.components-input-control__prefix {
+		padding-left: $grid-unit-10;
+	}
+}

packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx

@@ -7,15 +7,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { Field } from '../../types';
 import type { SetSelection } from '../../private-types';
+import type { NormalizedField } from '../../types';
 
 interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
-	titleField?: Field< Item >;
+	titleField?: NormalizedField< Item >;
 	disabled: boolean;
 }
 

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -79,7 +79,7 @@ export default function FormRegularField< Item >( {
 		( fieldDef ) => fieldDef.id === field.id
 	);
 
-	if ( ! fieldDefinition ) {
+	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
 		return null;
 	}
 	if ( labelPosition === 'side' ) {

packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx

@@ -84,11 +84,12 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	operators = sanitizeOperators( field );
 	// Filter can be added:
 	// 1. If the field is not already part of a view's filters.
-	// 2. If the field meets the type and operator requirements.
-	// 3. If it's not primary. If it is, it should be already visible.
+	// 2. If the field has elements or Edit property.
+	// 3. If the field meets the type and operator requirements.
+	// 4. If it's not primary. If it is, it should be already visible.
 	canAddFilter =
 		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-		!! field.elements?.length &&
+		!! ( field.elements?.length || field.Edit ) &&
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
 

packages/dataviews/src/field-types/boolean.tsx

@@ -9,9 +9,11 @@ import { __ } from '@wordpress/i18n';
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
+	Operator,
 	ValidationContext,
 } from '../types';
 import { renderFromElements } from '../utils';
+import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	const boolA = Boolean( a );
@@ -38,6 +40,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
+const operators: Operator[] = [ OPERATOR_IS, OPERATOR_IS_NOT ];
+
 export default {
 	sort,
 	isValid,
@@ -58,4 +62,7 @@ export default {
 		return null;
 	},
 	enableSorting: true,
+	filterBy: {
+		operators,
+	},
 };

packages/dataviews/src/field-types/datetime.tsx

@@ -5,8 +5,10 @@ import type {
 	DataViewRenderFieldProps,
 	SortDirection,
 	ValidationContext,
+	Operator,
 } from '../types';
 import { renderFromElements } from '../utils';
+import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
@@ -26,6 +28,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
+const operators: Operator[] = [ OPERATOR_IS, OPERATOR_IS_NOT ];
+
 export default {
 	sort,
 	isValid,
@@ -36,4 +40,7 @@ export default {
 			: field.getValue( { item } );
 	},
 	enableSorting: true,
+	filterBy: {
+		operators,
+	},
 };