A4A: Sites Dashboard - Update Dataviews version to latest

client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts

@@ -55,7 +55,7 @@ export interface DataViewsSort {
 export interface DataViewsFilter {
 	field: string;
 	operator: string;
-	value: number;
+	value: number | number[];
 }
 
 export interface DataViewsState {

client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss

@@ -3,6 +3,7 @@
 
 .dataviews-filters__view-actions {
 	margin-bottom: 8px;
+	padding-top: 2px;
 }
 
 .dataviews-pagination {
@@ -36,3 +37,121 @@
 		bottom: 0;
 	}
 }
+
+.sites-dashboard {
+	.dataviews-filter-summary__chip-container {
+		color: var(--color-primary-60);
+		height: 32px;
+		white-space: nowrap;
+		align-items: center;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		border: 0;
+		border-radius: 2px;
+		box-sizing: border-box;
+		cursor: pointer;
+		display: inline-flex;
+		font-family: inherit;
+		font-size: 0.813rem;  /* stylelint-disable-line */
+		font-weight: 400;
+		margin: 0;
+		padding: 6px 4px 6px 16px;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
+
+		.dataviews-filter-summary__chip-remove {
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+			fill: #757575;
+			margin-left: 4px;
+
+
+			svg {
+				height: 22px;
+				width: 22px;
+			}
+		}
+
+		.dataviews-filter-summary__chip-remove:hover {
+			color: var(--color-accent-60);
+		}
+	}
+
+	.dataviews-filter-summary__chip-container:hover:not(:disabled) {
+		box-shadow: inset 0 0 0 1px var(--color-neutral-20);
+		color: var(--color-accent-60);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+
+	.components-button.is-tertiary:not([aria-disabled="true"]) {
+		color: var(--color-primary-60);
+	}
+
+	.sites-overview__content .dataviews-wrapper .dataviews-view-list li div div[role="gridcell"] {
+		width: 100%;
+	}
+
+	.dataviews-wrapper {
+		overflow-y: auto;
+		max-height: calc(100vh - 210px);
+	}
+
+}
+
+.dataviews-filter-summary__popover {
+
+	.components-popover__content {
+		display: table;
+		border-collapse: collapse;
+		font-size: 0.813rem; /* stylelint-disable-line */
+		font-weight: 400;
+		border-radius: 4px;
+		box-shadow: rgb(221, 221, 221) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 0.7px 1px, rgba(0, 0, 0, 0.1) 0 1.2px 1.7px -0.2px, rgba(0, 0, 0, 0.1) 0 2.3px 3.3px -0.5px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		text-decoration: none;
+
+		.components-flex {
+
+			.dataviews-search-widget-listbox {
+
+				.dataviews-search-widget-listitem {
+					display: table-row;
+
+					span {
+						display: table-cell;
+						white-space: nowrap;
+						padding: 8px;
+						box-sizing: border-box;
+						vertical-align: middle;
+						height: 42px; /* Height calculation: 24px for the checked icon + 16px total padding (8px top + 8px bottom) + 2px for top and bottom margins (1px each) */
+					}
+
+					span:last-child {
+						padding-right: 20px;
+					}
+
+					.dataviews-search-widget-listitem-check {
+						padding-right: 0;
+					}
+
+					.dataviews-search-widget-listitem-check svg {
+						fill: #757575;
+						display: block;
+						margin-top: 1px;
+					}
+				}
+
+				.dataviews-search-widget-listitem:hover {
+					background: var(--color-sidebar-menu-hover-background);
+					color: var(--color-sidebar-menu-hover-text);
+				}
+			}
+		}
+	}
+}

client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx

@@ -93,7 +93,6 @@ export const JetpackSitesDataViews = ( {
 				getValue: ( { item }: { item: SiteInfo } ) =>
 					item.site.error || item.scan.status === 'critical',
 				render: () => null,
-				type: 'enumeration',
 				elements: [
 					{ value: 1, label: translate( 'Needs Attention' ) },
 					{ value: 2, label: translate( 'Backup Failed' ) },
@@ -104,7 +103,7 @@ export const JetpackSitesDataViews = ( {
 					{ value: 7, label: translate( 'Plugins Needing Updates' ) },
 				],
 				filterBy: {
-					operators: [ 'in' ],
+					operators: [ 'is' ],
 				},
 				enableHiding: false,
 				enableSorting: false,

client/a8c-for-agencies/sections/sites/features/jetpack/style.scss

@@ -7,5 +7,4 @@
 		padding: initial;
 		background: initial;
 	}
-
 }

client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx

@@ -34,7 +34,7 @@ const buildFilters = ( { issueTypes }: { issueTypes: string } ) => {
 		issueTypesArray?.map( ( issueType ) => {
 			return {
 				field: 'status',
-				operator: 'in',
+				operator: 'is',
 				value: filtersMap.find( ( filterMap ) => filterMap.filterType === issueType )?.ref || 1,
 			};
 		} ) || []

client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss

@@ -292,6 +292,7 @@
 				padding: 16px 0;
 				margin: 0;
 				display: flex;
+				justify-content: center;
 
 				.components-h-stack {
 					width: unset;
@@ -478,6 +479,7 @@
 		}
 
 		.dataviews-wrapper {
+
 			.components-button:focus:not(:disabled) {
 				box-shadow: 0 0 0 2px var(--color-primary-light);
 			}

client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx

@@ -1,5 +1,4 @@
 import { DataViewsFilter } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
-import { Filter } from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces';
 import {
 	A4A_SITES_DASHBOARD_DEFAULT_CATEGORY,
 	A4A_SITES_DASHBOARD_DEFAULT_FEATURE,
@@ -16,7 +15,7 @@ const buildQueryString = ( {
 	sort,
 	showOnlyFavorites,
 }: {
-	filters: Filter[];
+	filters: DataViewsFilter[];
 	search: string;
 	currentPage: number;
 	sort: DashboardSortInterface;

client/a8c-for-agencies/style.scss

@@ -215,10 +215,6 @@
 		border-color: var(--color-primary-60);
 	}
 
-	.components-button.is-tertiary {
-		color: var(--color-primary-60);
-	}
-
 	.button.is-borderless.is-primary.is-active,
 	.button.is-borderless.is-primary:active,
 	.button.is-borderless.is-primary:focus,

client/package.json

@@ -93,7 +93,7 @@
 		"@wordpress/components": "^27.5.0",
 		"@wordpress/compose": "^6.34.0",
 		"@wordpress/data": "^9.27.0",
-		"@wordpress/dataviews": "0.4.1",
+		"@wordpress/dataviews": "1.1.0",
 		"@wordpress/dom": "^3.57.0",
 		"@wordpress/edit-post": "^7.34.0",
 		"@wordpress/element": "^5.34.0",

client/sites-dashboard-v2/sites-dashboard.tsx

@@ -113,7 +113,7 @@ const SitesDashboardV2 = ( {
 				: [
 						{
 							field: 'status',
-							operator: 'in',
+							operator: 'is',
 							value: siteStatusGroups.find( ( item ) => item.slug === status )?.value || 1,
 						},
 				  ],

client/sites-dashboard-v2/sites-dataviews/index.tsx

@@ -193,10 +193,9 @@ const DotcomSitesDataViews = ( {
 				id: addDummyDataViewPrefix( 'status' ),
 				header: __( 'Status' ),
 				render: () => null,
-				type: 'enumeration',
 				elements: siteStatusGroups,
 				filterBy: {
-					operators: [ 'in' ],
+					operators: [ 'is' ],
 				},
 				enableHiding: false,
 				enableSorting: false,

package.json

@@ -342,7 +342,7 @@
 		"@wordpress/customize-widgets": "4.34.0",
 		"@wordpress/data-controls": "3.26.0",
 		"@wordpress/data": "^9.27.0",
-		"@wordpress/dataviews": "0.4.1",
+		"@wordpress/dataviews": "1.1.0",
 		"@wordpress/date": "4.57.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "5.7.0",
 		"@wordpress/deprecated": "3.57.0",

renovate.json5

@@ -79,8 +79,8 @@
 	],
 	ignoreDeps: [
 		'electron-builder',
-		// We're intentionally locking to v0.4.1, see https://github.com/Automattic/wp-calypso/pull/87956
-		// @TODO: Remove once updated to use the latest version
+		// We're intentionally locking to v1.1.0, see https://github.com/Automattic/wp-calypso/pull/89739
+		// @TODO: Remove once DataViews become more stable - it will be updated manually until then.
 		'@wordpress/dataviews',
 	],
 	regexManagers: [

yarn.lock

@@ -9496,25 +9496,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wordpress/dataviews@npm:0.4.1":
-  version: 0.4.1
-  resolution: "@wordpress/dataviews@npm:0.4.1"
+"@wordpress/dataviews@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@wordpress/dataviews@npm:1.1.0"
   dependencies:
+    "@ariakit/react": "npm:^0.3.12"
     "@babel/runtime": "npm:^7.16.0"
-    "@wordpress/a11y": "npm:^3.50.0"
-    "@wordpress/components": "npm:^25.16.0"
-    "@wordpress/compose": "npm:^6.27.0"
-    "@wordpress/element": "npm:^5.27.0"
-    "@wordpress/i18n": "npm:^4.50.0"
-    "@wordpress/icons": "npm:^9.41.0"
-    "@wordpress/keycodes": "npm:^3.50.0"
-    "@wordpress/primitives": "npm:^3.48.0"
-    "@wordpress/private-apis": "npm:^0.32.0"
+    "@wordpress/a11y": "npm:^3.57.0"
+    "@wordpress/components": "npm:^27.5.0"
+    "@wordpress/compose": "npm:^6.34.0"
+    "@wordpress/element": "npm:^5.34.0"
+    "@wordpress/i18n": "npm:^4.57.0"
+    "@wordpress/icons": "npm:^9.48.0"
+    "@wordpress/keycodes": "npm:^3.57.0"
+    "@wordpress/primitives": "npm:^3.55.0"
+    "@wordpress/private-apis": "npm:^0.39.0"
     classnames: "npm:^2.3.1"
     remove-accents: "npm:^0.5.0"
   peerDependencies:
     react: ^18.0.0
-  checksum: 00f5be7dc18de659bb52587380d5d88f0eda5fa99309bcc16bb02b9a4a7a51c82654bbf69aa0f7831e8f64df3e5c378d121874b795b7d3d60155d73a0f5adc1b
+  checksum: 4af360052c2dc88335612819276fdc4249e4e2df3d7454f78dbb6e38e94480f37406785cdda3cfbb13ce653ad5a9e10b696a869cba48bc7227f5aa02bc8937f9
   languageName: node
   linkType: hard
 
@@ -12421,7 +12422,7 @@ __metadata:
     "@wordpress/components": "npm:^27.5.0"
     "@wordpress/compose": "npm:^6.34.0"
     "@wordpress/data": "npm:^9.27.0"
-    "@wordpress/dataviews": "npm:0.4.1"
+    "@wordpress/dataviews": "npm:1.1.0"
     "@wordpress/dom": "npm:^3.57.0"
     "@wordpress/edit-post": "npm:^7.34.0"
     "@wordpress/element": "npm:^5.34.0"