diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js index 0ebaa373c3ef9..4f77a35c52d2e 100644 --- a/packages/dataviews/src/add-filter.js +++ b/packages/dataviews/src/add-filter.js @@ -23,6 +23,7 @@ const { DropdownMenuRadioItemV2: DropdownMenuRadioItem, DropdownMenuSeparatorV2: DropdownMenuSeparator, DropdownMenuItemLabelV2: DropdownMenuItemLabel, + DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText, } = unlock( componentsPrivateApis ); function WithSeparators( { children } ) { @@ -143,6 +144,13 @@ export default function AddFilter( { filters, view, onChangeView } ) { { element.label } + { !! element.description && ( + + { + element.description + } + + ) } ); } ) } diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index f09c15c8eb137..723fee5b3ee52 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -23,6 +23,7 @@ const { DropdownMenuItemV2: DropdownMenuItem, DropdownMenuSeparatorV2: DropdownMenuSeparator, DropdownMenuItemLabelV2: DropdownMenuItemLabel, + DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText, } = unlock( componentsPrivateApis ); const FilterText = ( { activeElement, filterInView, filter } ) => { @@ -126,6 +127,11 @@ export default function FilterSummary( { filter, view, onChangeView } ) { { element.label } + { !! element.description && ( + + { element.description } + + ) } ); } ) } diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js index bcc9df9ae327a..a101a07753990 100644 --- a/packages/dataviews/src/filters.js +++ b/packages/dataviews/src/filters.js @@ -40,10 +40,13 @@ const Filters = memo( function Filters( { fields, view, onChangeView } ) { switch ( field.type ) { case ENUMERATION_TYPE: + if ( ! field.elements?.length ) { + return; + } filters.push( { field: field.id, name: field.header, - elements: field.elements || [], + elements: field.elements, operators, isVisible: view.filters.some( ( f ) => diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js index e43c9744c560f..5ac4d1d42d573 100644 --- a/packages/dataviews/src/view-grid.js +++ b/packages/dataviews/src/view-grid.js @@ -87,7 +87,7 @@ export default function ViewGrid( { { field.header }
- { field.render( { item } ) } + { renderedValue }
); diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 0a7e29cd1068c..5bfcba5def4aa 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -26,6 +26,7 @@ const { DropdownMenuRadioItemV2: DropdownMenuRadioItem, DropdownMenuSeparatorV2: DropdownMenuSeparator, DropdownMenuItemLabelV2: DropdownMenuItemLabel, + DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText, } = unlock( componentsPrivateApis ); const sortArrows = { asc: '↑', desc: '↓' }; @@ -200,6 +201,11 @@ function HeaderMenu( { field, view, onChangeView } ) { { element.label } + { !! element.description && ( + + { element.description } + + ) } ); } ) } diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js index 0a7c9f204091b..c626336c4f498 100644 --- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js +++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js @@ -9,7 +9,7 @@ import { Flex, } from '@wordpress/components'; import { getQueryArgs } from '@wordpress/url'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useState, useMemo, @@ -46,6 +46,8 @@ import { TEMPLATE_PART_POST_TYPE, PATTERN_SYNC_TYPES, PATTERN_DEFAULT_CATEGORY, + ENUMERATION_TYPE, + OPERATOR_IN, } from '../../utils/constants'; import { exportJSONaction, @@ -76,13 +78,31 @@ const DEFAULT_VIEW = { search: '', page: 1, perPage: 20, - hiddenFields: [], + hiddenFields: [ 'sync-status' ], layout: { ...defaultConfigPerViewType[ LAYOUT_GRID ], }, filters: [], }; +const SYNC_FILTERS = [ + { + value: PATTERN_SYNC_TYPES.full, + label: _x( 'Synced', 'Option that shows all synchronized patterns' ), + description: __( 'Patterns that are kept in sync across the site.' ), + }, + { + value: PATTERN_SYNC_TYPES.unsynced, + label: _x( + 'Not synced', + 'Option that shows all patterns that are not synchronized' + ), + description: __( + 'Patterns that can be changed freely without affecting the site.' + ), + }, +]; + function Preview( { item, viewType } ) { const descriptionId = useId(); const isUserPattern = item.type === PATTERN_TYPES.user; @@ -204,27 +224,25 @@ export default function DataviewsPatterns() { const isUncategorizedThemePatterns = type === PATTERN_TYPES.theme && categoryId === 'uncategorized'; const previousCategoryId = usePrevious( categoryId ); + const viewSyncStatus = view.filters?.find( + ( { field } ) => field === 'sync-status' + )?.value; const { patterns, isResolving } = usePatterns( type, isUncategorizedThemePatterns ? '' : categoryId, { search: view.search, - // syncStatus: - // deferredSyncedFilter === 'all' - // ? undefined - // : deferredSyncedFilter, + syncStatus: viewSyncStatus, } ); - const fields = useMemo( - () => [ + const fields = useMemo( () => { + const _fields = [ { header: __( 'Preview' ), id: 'preview', render: ( { item } ) => ( ), - minWidth: 120, - maxWidth: 120, enableSorting: false, enableHiding: false, }, @@ -235,12 +253,36 @@ export default function DataviewsPatterns() { render: ( { item } ) => ( ), - maxWidth: 400, enableHiding: false, }, - ], - [ view.type, categoryId ] - ); + ]; + if ( type === PATTERN_TYPES.theme ) { + _fields.push( { + header: __( 'Sync Status' ), + id: 'sync-status', + render: ( { item } ) => { + // User patterns can have their sync statuses checked directly. + // Non-user patterns are all unsynced for the time being. + return ( + SYNC_FILTERS.find( + ( { value } ) => value === item.syncStatus + )?.label || + SYNC_FILTERS.find( + ( { value } ) => + value === PATTERN_SYNC_TYPES.unsynced + ).label + ); + }, + type: ENUMERATION_TYPE, + elements: SYNC_FILTERS, + filterBy: { + operators: [ OPERATOR_IN ], + }, + enableSorting: false, + } ); + } + return _fields; + }, [ view.type, categoryId, type ] ); // Reset the page number when the category changes. useEffect( () => { if ( previousCategoryId !== categoryId ) {