Update dataviews package version to latest (#93503)

* Update dataviews package version. * Revert renovate lock. * Small style fixes * Update API and types * Import root dataviews styles * Update types and dataviews in a4a project * Fix preview * Fix lock * Fix more type errors * Remove status * More style fixes * Remove patch * Fix column widths * Better styles * Fix empty properties section * Fix scrolling and pagination * Hide overflow and align padding to improve mobile view. * Override launch nag and site url link styles. * Override styles for the plan renew reminder. * Fix type error. * Style search input. * Remove dotcom-specific search styles. * Update the view fields based on useBreakpoint. * Consider list layout as well * Update header to label in a4a fields * Make status filter primary * Fix color for disabled dataviews buttons * Fix code style issue. * Make status filter primary in a4a * Update list of fields for a4a dataviews * Remove spacing that affect filter toggel * Extract defaultLayouts to ItemsData * Remove field list * Do not modify global constant. The initialDataViewsState is a global constant that is imported from a few places. By setting the sort & fields in the sites-dashboard-provider, any place that uses the global constant will inherit them. We should not modify a global constant. If something is shared globally, use the context instead. * Only have table enabled for users * Rename header to labels * Hide filter toggle * Remove search control width to prevent new line. * Only have table enabled for hosting/sites * TeamList: only have table enabled * TeamList: hide filter toggle * TeamList: switch header to label * TeamList: move field.width to layout.styles.fieldId.width * A4A: Remove the .is-hiding-navigation style, the navigation bar is not used. * A4A-Referrals: Hide the DataViews toolbar for Referrals tables * A4A-Team: Hide the DataViews toolbar for Team list table * A4A-Referrals: Hide the DataViews toolbar for ReferralDetails table * A4A-Referrals: Set the defaultLayouts to table * A4A-Referrals: Use label instead of header in fields definition. * A4A-Referrals: Use the Field type for fields definition * Revert "A4A-Team: Hide the DataViews toolbar for Team list table" This reverts commit 17544e0. * Revert "A4A-Referrals: Hide the DataViews toolbar for ReferralDetails table" This reverts commit b8a5b74. * Revert "A4A-Referrals: Hide the DataViews toolbar for Referrals tables" This reverts commit 2746dab. * Centralize hotfixes into components/dataviews so they are straigtforward to find and remove * Referrals: hotfix for hiding filter toggle * A4A Referrals: hotfix for hiding sort direction control * A4A team: hotfix for hiding sort direction control * A4A Sites: hotfix for hiding sort direction control * Add comment explaining hotfix * A4A Team: add pagination * A4A Referrals: add pagination * A4A Referrals details: add pagination * A4A Sites Modal: add pagination * Update @wordpress/dataviews to latest version * Update yarn.lock * Remove hotfix to hide filter toggle that is part of dataviews 4.2 * Dotcom Sites: remove custom sort * Hotfix for filter count * A4A Sites: remove custom sort * A4A sites: add actions label * A4A Sites: remove background color for actions * A4A Referrals: remove background style for actions * A4A Referrals Details: hotfix for media placeholder to fill the whole media wrapper * A4A Referrals Details: hotfix for media field * A4A Referrals Details: remove custom spacing * ItemsDataViews: add missing props * A4A Referral Details: adapt selection (string) to openSitePreviewPanel input (Referral) * A4A Sites: fix favorite behaviour by making sure the queryKey is the same everywhere * Hotfix for filter chip summary: font-size * Add reference to upstream ticket * Hotfix for filter chip summary (font-size): consider filter with no set values as well * Do not override the filter toggle pressed status * A4A Referrals clients: hide sort control * A4A Referrals Client: configure dataviews * A4A: remove left margin in columns that makes them off center * A4A Referrals Client: stop infinite loop * Fix errors in TeamList component. * Fix type errors. * Fix type error in jetpack-sites-dataviews. * Update DataViews to 4.2.0 * Warning/Error row style fixes: padding styles * Set again the enable field to true for the useQuery of useFetchClientProduct * Pass false useFetchClientProducts( false ) in CancelSubscriptionConfirmationDialog * Show A4A fields based on breakpoint. * Show column headers for Dotcom. * Update fields & layout width on breakpoint changes * A4A Sites: update fields on breakpoint change * A4A Sites: hotfix for site notice * A4A Sites: improve spacing by removing custom styles * A4A Sites: improve actions padding in small viewports * A4A Sites: improve actions padding in large viewports * A4A Sites: add back shadow for action columns --------- Co-authored-by: Riad Benguella <[email protected]> Co-authored-by: André <[email protected]> Co-authored-by: cleacos <[email protected]>
Automattic · Sep 4, 2024 · cfb9373 · cfb9373
1 parent 34d3314
commit cfb9373
Show file tree

Hide file tree

Showing 61 changed files with 714 additions and 1,101 deletions.
diff --git a/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch b/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch
diff --git a/...ies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts b/...ies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts
@@ -14,10 +14,6 @@ export default function useManagedSitesMap( { size = 100 }: Props ) {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: '',
 		currentPage: 1,
-		sort: {
-			field: '',
-			direction: '',
-		},
 		perPage: size,
 		agencyId,
 		filter: {

diff --git a/...a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx b/...a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx
@@ -1,19 +1,24 @@
-import { useState, useEffect } from 'react';
+import { filterSortAndPaginate } from '@wordpress/dataviews';
+import { useMemo, useState, useEffect } from 'react';
 import { initialDataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
 import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews';
 import { SiteItem } from './wpcom-sites-table';
-import type { DataViewsColumn } from '../../items-dashboard/items-dataviews/interfaces';
+import type { Field } from '@wordpress/dataviews';
 
 interface Props {
 	items: SiteItem[];
-	fields: DataViewsColumn[];
+	fields: Field< any >[];
 }
 
 export default function WPCOMSitesTableContent( { items, fields }: Props ) {
 	const [ dataViewsState, setDataViewsState ] = useState( initialDataViewsState );
 
+	const { data, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( items, dataViewsState, fields );
+	}, [ items, dataViewsState, fields ] );
+
 	useEffect( () => {
-		if ( items.length ) {
+		if ( data.length ) {
 			const handleRowClick = ( event: Event ) => {
 				const target = event.target as HTMLElement;
 
@@ -51,22 +56,20 @@ export default function WPCOMSitesTableContent( { items, fields }: Props ) {
 				}
 			};
 		}
-	}, [ dataViewsState, items ] );
+	}, [ dataViewsState, data ] );
 
 	return (
 		<ItemsDataViews
 			data={ {
-				items,
+				items: data,
 				fields,
 				getItemId: ( item ) => `${ item.id }`,
-				pagination: {
-					totalItems: 1,
-					totalPages: 1,
-				},
+				pagination: paginationInfo,
 				enableSearch: false,
 				actions: [],
 				dataViewsState: dataViewsState,
 				setDataViewsState: setDataViewsState,
+				defaultLayouts: { table: {} },
 			} }
 		/>
 	);

diff --git a/...for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx b/...for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx
@@ -55,10 +55,6 @@ export default function WPCOMSitesTable( {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: '',
 		currentPage: 1,
-		sort: {
-			field: '',
-			direction: '',
-		},
 		perPage: 1,
 		agencyId,
 		filter: {
@@ -120,7 +116,7 @@ export default function WPCOMSitesTable( {
 				? [
 						{
 							id: 'site',
-							header: (
+							label: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -146,15 +142,14 @@ export default function WPCOMSitesTable( {
 									<span>{ item.site }</span>
 								</div>
 							),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 				  ]
 				: [
 						{
 							id: 'site',
-							header: (
+							label: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -175,26 +170,23 @@ export default function WPCOMSitesTable( {
 									disabled={ false }
 								/>
 							),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'date',
-							header: translate( 'Date' ).toUpperCase(),
+							label: translate( 'Date' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) =>
 								new Date( item.date ).toLocaleDateString(),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'type',
-							header: translate( 'Type' ).toUpperCase(),
+							label: translate( 'Type' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) => <TypeIcon siteId={ item.id } />,
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
@@ -207,6 +199,8 @@ export default function WPCOMSitesTable( {
 			{ isPending ? (
 				<WPCOMSitesTablePlaceholder />
 			) : (
+				// @ts-expect-error the error is because field.label types do not admit JSX.Elements.
+				// To remove when this is using [email protected]
 				<WPCOMSitesTableContent items={ items } fields={ fields } />
 			) }
 		</div>

diff --git a/client/a8c-for-agencies/components/items-dashboard/constants.ts b/client/a8c-for-agencies/components/items-dashboard/constants.ts
@@ -14,6 +14,5 @@ export const initialDataViewsState: DataViewsState = {
 	perPage: 50,
 	page: 1,
 	search: '',
-	hiddenFields: [],
 	layout: {},
 };
diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx
@@ -4,7 +4,8 @@ import { useTranslate } from 'i18n-calypso';
 import { ReactNode, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { DataViews } from 'calypso/components/dataviews';
-import { ItemsDataViewsType, DataViewsColumn } from './interfaces';
+import { ItemsDataViewsType } from './interfaces';
+import type { Field } from '@wordpress/dataviews';
 
 import './style.scss';
 
@@ -23,26 +24,27 @@ const getIdByPath = ( item: object, path: string ) => {
 /**
  * Create an item column for the DataViews component
  * @param id
- * @param header
+ * @param label
  * @param displayField
  * @param getValue
  * @param isSortable
  * @param canHide
  */
 export const createItemColumn = (
 	id: string,
-	header: ReactNode,
+	label: ReactNode,
 	displayField: () => ReactNode,
 	getValue: () => undefined,
 	isSortable: boolean = false,
 	canHide: boolean = false
-): DataViewsColumn => {
+): Field< any > => {
 	return {
 		id,
 		enableSorting: isSortable,
 		enableHiding: canHide,
 		getValue,
-		header,
+		// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
+		label,
 		render: displayField,
 	};
 };
@@ -64,9 +66,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 			! scrollContainerRef.current ||
 			previousDataViewsState?.type !== data.dataViewsState.type
 		) {
-			scrollContainerRef.current = document.querySelector(
-				'.dataviews-view-list, .dataviews-view-table-wrapper'
-			) as HTMLElement;
+			scrollContainerRef.current = document.querySelector( '.dataviews-view-list' ) as HTMLElement;
 		}
 
 		if ( ! previousDataViewsState?.selectedItem && data.dataViewsState.selectedItem ) {
@@ -85,12 +85,13 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 	return (
 		<div className={ className }>
 			<DataViews
-				data={ data.items }
-				paginationInfo={ data.pagination }
-				fields={ data.fields }
+				data={ data.items ?? [] }
 				view={ data.dataViewsState }
+				onChangeView={ ( newView ) => data.setDataViewsState( () => newView ) }
+				fields={ data.fields }
 				search={ data?.enableSearch ?? true }
 				searchLabel={ data.searchLabel ?? translate( 'Search' ) }
+				actions={ data.actions }
 				getItemId={
 					data.getItemId ??
 					( ( item: any ) => {
@@ -99,11 +100,12 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 						return item.id;
 					} )
 				}
-				onSelectionChange={ data.onSelectionChange }
-				onChangeView={ data.setDataViewsState }
-				supportedLayouts={ [ 'table' ] }
-				actions={ data.actions }
 				isLoading={ isLoading }
+				paginationInfo={ data.pagination }
+				defaultLayouts={ data.defaultLayouts }
+				selection={ data.selection }
+				onChangeSelection={ data.onSelectionChange }
+				header={ data.header }
 			/>
 			{ dataviewsWrapper &&
 				ReactDOM.createPortal(