Revert "Update dataviews package version to latest (#93503)"

This reverts commit cfb9373.
Automattic · Sep 4, 2024 · 2cc3c2c · 2cc3c2c
1 parent cfb9373
commit 2cc3c2c
Show file tree

Hide file tree

Showing 61 changed files with 1,101 additions and 714 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
@@ -0,0 +1,87 @@
+diff --git a/build/lock-unlock.js b/build/lock-unlock.js
+index b1e3c1e3b950c7d3095876fdf32dc9d0094a8f7a..3885591aaed7c99d345b7428a57b9b7dcbb982dd 100644
+--- a/build/lock-unlock.js
++++ b/build/lock-unlock.js
+@@ -1,7 +1,7 @@
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+-  value: true
++  value: true,
+ });
+ exports.unlock = exports.lock = void 0;
+ var _privateApis = require("@wordpress/private-apis");
+@@ -9,10 +9,11 @@ var _privateApis = require("@wordpress/private-apis");
+  * WordPress dependencies
+  */
+
+-const {
+-  lock,
+-  unlock
+-} = (0, _privateApis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/dataviews');
++const { lock, unlock } = (0,
++_privateApis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
++  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
++  "@wordpress/dataviews"
++);
+ exports.unlock = unlock;
+ exports.lock = lock;
+ //# sourceMappingURL=lock-unlock.js.map
+diff --git a/build/lock-unlock.js.map b/build/lock-unlock.js.map
+index b20c8e5e5cc50b108035dbfb4c765b354835476a..3edcce8eed204c1da1a55175bb617fb66c89d8a9 100644
+--- a/build/lock-unlock.js.map
++++ b/build/lock-unlock.js.map
+@@ -1 +1 @@
+-{"version":3,"names":["_privateApis","require","lock","unlock","__dangerousOptInToUnstableAPIsOnlyForCoreModules","exports"],"sources":["@wordpress/dataviews/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5B,IAAAC,6DAAgD,EAC/C,iHAAiH,EACjH,sBACD,CAAC;AAACC,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA"}
+\ No newline at end of file
++{"version":3,"names":["_privateApis","require","lock","unlock","__dangerousOptInToUnstableAPIsOnlyForCoreModules","exports"],"sources":["@wordpress/dataviews/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5B,IAAAC,6DAAgD,EAC/C,iHAAiH,EACjH,sBACD,CAAC;AAACC,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA"}
+\ No newline at end of file
+diff --git a/build-module/lock-unlock.js b/build-module/lock-unlock.js
+index 79b912f8d2976acba70c34235d856368bf906425..0c778415d2bcf2ee21fab94d5518d123730c6623 100644
+--- a/build-module/lock-unlock.js
++++ b/build-module/lock-unlock.js
+@@ -1,9 +1,10 @@
+ /**
+  * WordPress dependencies
+  */
+-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+-export const {
+-  lock,
+-  unlock
+-} = __dangerousOptInToUnstableAPIsOnlyForCoreModules('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/dataviews');
++import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
++export const { lock, unlock } =
++  __dangerousOptInToUnstableAPIsOnlyForCoreModules(
++    "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
++    "@wordpress/dataviews"
++  );
+ //# sourceMappingURL=lock-unlock.js.map
+diff --git a/build-module/lock-unlock.js.map b/build-module/lock-unlock.js.map
+index 36173786489d0182174357e2b57e4e3351f50055..28dc0b6ae24f362442a98877134784a19bc2fc7f 100644
+--- a/build-module/lock-unlock.js.map
++++ b/build-module/lock-unlock.js.map
+@@ -1 +1 @@
+-{"version":3,"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"sources":["@wordpress/dataviews/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAgD,QAAQ,yBAAyB;AAE1F,OAAO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5BF,gDAAgD,CAC/C,iHAAiH,EACjH,sBACD,CAAC"}
+\ No newline at end of file
++{"version":3,"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"sources":["@wordpress/dataviews/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAgD,QAAQ,yBAAyB;AAE1F,OAAO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5BF,gDAAgD,CAC/C,iHAAiH,EACjH,sBACD,CAAC"}
+\ No newline at end of file
+diff --git a/src/lock-unlock.js b/src/lock-unlock.js
+index 18318773cefefee8becd93b68574d2b8659b5707..bf7fc262ddb2b241de42ab70ab207c34ccf487a6 100644
+--- a/src/lock-unlock.js
++++ b/src/lock-unlock.js
+@@ -1,10 +1,10 @@
+ /**
+  * WordPress dependencies
+  */
+-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
++import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
+
+ export const { lock, unlock } =
+-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+-		'@wordpress/dataviews'
+-	);
++  __dangerousOptInToUnstableAPIsOnlyForCoreModules(
++    "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
++    "@wordpress/dataviews"
++  );
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,6 +14,10 @@ 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,24 +1,19 @@
-import { filterSortAndPaginate } from '@wordpress/dataviews';
-import { useMemo, useState, useEffect } from 'react';
+import { 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 { Field } from '@wordpress/dataviews';
+import type { DataViewsColumn } from '../../items-dashboard/items-dataviews/interfaces';
 
 interface Props {
 	items: SiteItem[];
-	fields: Field< any >[];
+	fields: DataViewsColumn[];
 }
 
 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 ( data.length ) {
+		if ( items.length ) {
 			const handleRowClick = ( event: Event ) => {
 				const target = event.target as HTMLElement;
 
@@ -56,20 +51,22 @@ export default function WPCOMSitesTableContent( { items, fields }: Props ) {
 				}
 			};
 		}
-	}, [ dataViewsState, data ] );
+	}, [ dataViewsState, items ] );
 
 	return (
 		<ItemsDataViews
 			data={ {
-				items: data,
+				items,
 				fields,
 				getItemId: ( item ) => `${ item.id }`,
-				pagination: paginationInfo,
+				pagination: {
+					totalItems: 1,
+					totalPages: 1,
+				},
 				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,6 +55,10 @@ export default function WPCOMSitesTable( {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: '',
 		currentPage: 1,
+		sort: {
+			field: '',
+			direction: '',
+		},
 		perPage: 1,
 		agencyId,
 		filter: {
@@ -116,7 +120,7 @@ export default function WPCOMSitesTable( {
 				? [
 						{
 							id: 'site',
-							label: (
+							header: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -142,14 +146,15 @@ export default function WPCOMSitesTable( {
 									<span>{ item.site }</span>
 								</div>
 							),
+							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 				  ]
 				: [
 						{
 							id: 'site',
-							label: (
+							header: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -170,23 +175,26 @@ export default function WPCOMSitesTable( {
 									disabled={ false }
 								/>
 							),
+							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'date',
-							label: translate( 'Date' ).toUpperCase(),
+							header: translate( 'Date' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) =>
 								new Date( item.date ).toLocaleDateString(),
+							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'type',
-							label: translate( 'Type' ).toUpperCase(),
+							header: translate( 'Type' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) => <TypeIcon siteId={ item.id } />,
+							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
@@ -199,8 +207,6 @@ 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 dataviews@4.2.0
 				<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,5 +14,6 @@ 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,8 +4,7 @@ import { useTranslate } from 'i18n-calypso';
 import { ReactNode, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { DataViews } from 'calypso/components/dataviews';
-import { ItemsDataViewsType } from './interfaces';
-import type { Field } from '@wordpress/dataviews';
+import { ItemsDataViewsType, DataViewsColumn } from './interfaces';
 
 import './style.scss';
 
@@ -24,27 +23,26 @@ const getIdByPath = ( item: object, path: string ) => {
 /**
  * Create an item column for the DataViews component
  * @param id
- * @param label
+ * @param header
  * @param displayField
  * @param getValue
  * @param isSortable
  * @param canHide
  */
 export const createItemColumn = (
 	id: string,
-	label: ReactNode,
+	header: ReactNode,
 	displayField: () => ReactNode,
 	getValue: () => undefined,
 	isSortable: boolean = false,
 	canHide: boolean = false
-): Field< any > => {
+): DataViewsColumn => {
 	return {
 		id,
 		enableSorting: isSortable,
 		enableHiding: canHide,
 		getValue,
-		// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
-		label,
+		header,
 		render: displayField,
 	};
 };
@@ -66,7 +64,9 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 			! scrollContainerRef.current ||
 			previousDataViewsState?.type !== data.dataViewsState.type
 		) {
-			scrollContainerRef.current = document.querySelector( '.dataviews-view-list' ) as HTMLElement;
+			scrollContainerRef.current = document.querySelector(
+				'.dataviews-view-list, .dataviews-view-table-wrapper'
+			) as HTMLElement;
 		}
 
 		if ( ! previousDataViewsState?.selectedItem && data.dataViewsState.selectedItem ) {
@@ -85,13 +85,12 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 	return (
 		<div className={ className }>
 			<DataViews
-				data={ data.items ?? [] }
-				view={ data.dataViewsState }
-				onChangeView={ ( newView ) => data.setDataViewsState( () => newView ) }
+				data={ data.items }
+				paginationInfo={ data.pagination }
 				fields={ data.fields }
+				view={ data.dataViewsState }
 				search={ data?.enableSearch ?? true }
 				searchLabel={ data.searchLabel ?? translate( 'Search' ) }
-				actions={ data.actions }
 				getItemId={
 					data.getItemId ??
 					( ( item: any ) => {
@@ -100,12 +99,11 @@ 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(