From 64d7ab305164c9e4dc343471283a131a57bfd2be Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Tue, 13 Aug 2024 13:57:58 -0400 Subject: [PATCH 001/102] Update dataviews package version. --- client/package.json | 2 +- package.json | 2 +- yarn.lock | 87 +++++++++++++++++++++++++-------------------- 3 files changed, 51 insertions(+), 40 deletions(-) diff --git a/client/package.json b/client/package.json index 0f9e56a62bf335..c41abacb47ddaf 100644 --- a/client/package.json +++ b/client/package.json @@ -94,7 +94,7 @@ "@wordpress/components": "^28.2.0", "@wordpress/compose": "^7.2.0", "@wordpress/data": "^10.2.0", - "@wordpress/dataviews": "patch:@wordpress/dataviews@npm%3A0.4.1#~/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch", + "@wordpress/dataviews": "^4.1.0", "@wordpress/dom": "^4.2.0", "@wordpress/edit-post": "^8.2.0", "@wordpress/element": "^6.2.0", diff --git a/package.json b/package.json index 9515ed0329aa70..c970195b9a5da9 100644 --- a/package.json +++ b/package.json @@ -350,7 +350,7 @@ "@wordpress/customize-widgets": "5.2.0", "@wordpress/data-controls": "4.2.0", "@wordpress/data": "^10.2.0", - "@wordpress/dataviews": "patch:@wordpress/dataviews@npm%3A0.4.1#~/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch", + "@wordpress/dataviews": "^4.1.0", "@wordpress/date": "5.2.0", "@wordpress/dependency-extraction-webpack-plugin": "5.9.0", "@wordpress/deprecated": "4.2.0", diff --git a/yarn.lock b/yarn.lock index 699c609775d5f7..601c6e4a2fe89b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -63,6 +63,13 @@ __metadata: languageName: node linkType: hard +"@ariakit/core@npm:0.4.8": + version: 0.4.8 + resolution: "@ariakit/core@npm:0.4.8" + checksum: db0445ca7b81d0baa1d4f4799c27eab3ca3f45b47de97dda2b1050339ff6036a7a4bfba8131be5c2ba275135ad2c841e2fad53f25bbcea3f343cf6a8c1c8721c + languageName: node + linkType: hard + "@ariakit/react-core@npm:0.3.14": version: 0.3.14 resolution: "@ariakit/react-core@npm:0.3.14" @@ -77,6 +84,20 @@ __metadata: languageName: node linkType: hard +"@ariakit/react-core@npm:0.4.8": + version: 0.4.8 + resolution: "@ariakit/react-core@npm:0.4.8" + dependencies: + "@ariakit/core": "npm:0.4.8" + "@floating-ui/dom": "npm:^1.0.0" + use-sync-external-store: "npm:^1.2.0" + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: b63ed5a41ec533ee6183c505a385fe4b37e20c9dd85b48c77d7cc41514a06f7a5be344a94cd559d62d32aaf47343350f1743844e809c9415e241d137d9af58e4 + languageName: node + linkType: hard + "@ariakit/react@npm:^0.3.12": version: 0.3.14 resolution: "@ariakit/react@npm:0.3.14" @@ -89,6 +110,18 @@ __metadata: languageName: node linkType: hard +"@ariakit/react@npm:^0.4.7": + version: 0.4.8 + resolution: "@ariakit/react@npm:0.4.8" + dependencies: + "@ariakit/react-core": "npm:0.4.8" + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: c0a165d4bf144985492955c88a3d44dd5671e706f302b6ba32ba6ed6ec79ea7a91a32904a81549b5dfbe27d740b582549f54dd663ef3e9e88eae7eeacc862d7c + languageName: node + linkType: hard + "@automattic/accessible-focus@workspace:^, @automattic/accessible-focus@workspace:packages/accessible-focus": version: 0.0.0-use.local resolution: "@automattic/accessible-focus@workspace:packages/accessible-focus" @@ -9677,47 +9710,26 @@ __metadata: languageName: node linkType: hard -"@wordpress/dataviews@npm:0.4.1": - version: 0.4.1 - resolution: "@wordpress/dataviews@npm:0.4.1" - dependencies: - "@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" - classnames: "npm:^2.3.1" - remove-accents: "npm:^0.5.0" - peerDependencies: - react: ^18.0.0 - checksum: 00f5be7dc18de659bb52587380d5d88f0eda5fa99309bcc16bb02b9a4a7a51c82654bbf69aa0f7831e8f64df3e5c378d121874b795b7d3d60155d73a0f5adc1b - languageName: node - linkType: hard - -"@wordpress/dataviews@patch:@wordpress/dataviews@npm%3A0.4.1#~/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch": - version: 0.4.1 - resolution: "@wordpress/dataviews@patch:@wordpress/dataviews@npm%3A0.4.1#~/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch::version=0.4.1&hash=d91dff" +"@wordpress/dataviews@npm:^4.1.0": + version: 4.1.0 + resolution: "@wordpress/dataviews@npm:4.1.0" dependencies: + "@ariakit/react": "npm:^0.4.7" "@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" - classnames: "npm:^2.3.1" + "@wordpress/components": "npm:^28.5.0" + "@wordpress/compose": "npm:^7.5.0" + "@wordpress/data": "npm:^10.5.0" + "@wordpress/element": "npm:^6.5.0" + "@wordpress/i18n": "npm:^5.5.0" + "@wordpress/icons": "npm:^10.5.0" + "@wordpress/primitives": "npm:^4.5.0" + "@wordpress/private-apis": "npm:^1.5.0" + "@wordpress/warning": "npm:^3.5.0" + clsx: "npm:^2.1.1" remove-accents: "npm:^0.5.0" peerDependencies: react: ^18.0.0 - checksum: 757d69e92446b3d0a28b94c3cf2d3711a304c9949001392e2bb62f37409bee6561af5587df057a2296229f12b70210626d25db94280dfaa8b5f0789dd5131ddb + checksum: 77ae6bac38480a0d0cd2e94f9eb91c09550bd55ca66d7f33f3a06196438c588f3d74734cf5849bfc5db79bf4751c3154ed6bf2f5e85d0137ec77bdc02db86fea languageName: node linkType: hard @@ -9834,7 +9846,6 @@ __metadata: "@wordpress/core-commands": "npm:^1.2.0" "@wordpress/core-data": "npm:^7.2.0" "@wordpress/data": "npm:^10.2.0" - "@wordpress/dataviews": "npm:^2.2.0" "@wordpress/date": "npm:^5.2.0" "@wordpress/deprecated": "npm:^4.2.0" "@wordpress/dom": "npm:^4.2.0" @@ -12738,7 +12749,7 @@ __metadata: "@wordpress/components": "npm:^28.2.0" "@wordpress/compose": "npm:^7.2.0" "@wordpress/data": "npm:^10.2.0" - "@wordpress/dataviews": "patch:@wordpress/dataviews@npm%3A0.4.1#~/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch" + "@wordpress/dataviews": "npm:^4.1.0" "@wordpress/dom": "npm:^4.2.0" "@wordpress/edit-post": "npm:^8.2.0" "@wordpress/element": "npm:^6.2.0" From 265c222491b7d92896a9d7f6692984885df8667a Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Tue, 13 Aug 2024 14:02:55 -0400 Subject: [PATCH 002/102] Revert renovate lock. --- renovate.json5 | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/renovate.json5 b/renovate.json5 index b26ea154eb7ebe..dcd5e1d340edd2 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -77,12 +77,7 @@ enabled: false, }, ], - 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 - '@wordpress/dataviews', - ], + ignoreDeps: [ 'electron-builder' ], regexManagers: [ // Update the renovate-version in the action itself. // See also https://github.com/renovatebot/github-action/issues/756 From 00837eeae4d78cb22f102fdc36e57669d9afa139 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 10:50:52 +0200 Subject: [PATCH 003/102] Small style fixes --- client/hosting/sites/components/dotcom-style.scss | 12 +++++++----- client/hosting/sites/components/style.scss | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 7f14f2366db3dd..35e2c99e218c5b 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -571,12 +571,14 @@ flex-direction: column; height: 100%; - .dataviews-wrapper { - display: flex; - height: 100%; - overflow: hidden; - position: relative; + // This style should ideally be present in the package directly. + .dataviews-filters__container, + .dataviews__view-actions { + padding: 16px 48px; + box-sizing: border-box; + } + .dataviews-wrapper { .dataviews-pagination { margin: 0; position: relative; diff --git a/client/hosting/sites/components/style.scss b/client/hosting/sites/components/style.scss index f657e3ca0e4427..3c46c9d057350f 100644 --- a/client/hosting/sites/components/style.scss +++ b/client/hosting/sites/components/style.scss @@ -508,7 +508,7 @@ display: flex; flex: 1; height: 100%; - overflow: hidden; + overflow: auto; margin-top: 24px; } } From 9b5f39e436e85026495ca8ace43d3a8d51199a12 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 13:05:03 +0200 Subject: [PATCH 004/102] Update API and types --- .../import-from-wpcom-modal/table-content.tsx | 4 +- .../items-dashboard/items-dataviews/index.tsx | 14 +-- .../items-dataviews/interfaces.ts | 48 +--------- .../jetpack/jetpack-sites-dataviews.tsx | 89 +++++++++--------- .../sections/sites/sites-dataviews/index.tsx | 94 ++++++++++--------- .../sites/sites-dataviews/interfaces.ts | 6 +- .../sections/sites/sites-dataviews/types.d.ts | 1 - client/components/dataviews/types.d.ts | 1 - .../sites/components/sites-dashboard.tsx | 32 +++---- .../components/sites-dataviews/index.tsx | 36 ++++--- .../sites-dataviews/interfaces.ts | 15 +-- .../sites-overview/sites-dataviews/types.d.ts | 1 - 12 files changed, 156 insertions(+), 185 deletions(-) delete mode 100644 client/a8c-for-agencies/sections/sites/sites-dataviews/types.d.ts delete mode 100644 client/components/dataviews/types.d.ts delete mode 100644 client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/types.d.ts diff --git a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx index e4d5a9282e345e..7a42324fb5a329 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx +++ b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx @@ -2,11 +2,11 @@ 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 { 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 ) { 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 index d7b4307dc7c6ab..ea5f42f120e0d6 100644 --- 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,7 +24,7 @@ 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 @@ -31,18 +32,19 @@ const getIdByPath = ( item: object, path: string ) => { */ 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, }; }; @@ -85,7 +87,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP return (
{ items: T[] | undefined; pagination: DataViewsPaginationInfo; enableSearch?: boolean; searchLabel?: string; - fields: DataViewsColumn[]; - actions?: DataViewsAction[]; + fields: Field< T >[]; + actions?: Action< T >[]; getItemId?: ( item: T ) => string; itemFieldId?: string; // The field path to get the item id. Examples `id` or `site.blog_id` setDataViewsState: ( callback: ( prevState: DataViewsState ) => DataViewsState ) => void; @@ -14,36 +14,6 @@ export interface ItemsDataViewsType< T > { onSelectionChange?: ( item: T[] ) => void; } -export interface DataViewsColumn { - id: string; - enableHiding?: boolean; - enableSorting?: boolean; - elements?: { - value: number; - label: string; - }[]; - filterBy?: { - operators: string[]; - isPrimary?: boolean; - }; - type?: string; - header: ReactNode; - getValue?: ( item: any ) => string | boolean | number | undefined; - render?: ( item: any ) => ReactNode | null; -} - -export interface DataViewsAction { - id: string; - label: string; - isPrimary?: boolean; - icon?: string; - isEligible?: ( record: any ) => boolean; - isDestructive?: boolean; - callback?: () => void; - RenderModal?: ReactNode; - hideModalHeader?: boolean; -} - export interface DataViewsPaginationInfo { totalItems: number; totalPages: number; @@ -60,14 +30,6 @@ export interface DataViewsFilter { value: number; } -export interface DataViewsState { - type: 'table' | 'list' | 'grid'; - search: string; - filters: DataViewsFilter[]; - perPage: number; - page: number; - sort: DataViewsSort; - hiddenFields?: string[]; - layout: object; +export type DataViewsState = View & { selectedItem?: any | undefined; -} +}; diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index ed0718a5bdfd5d..e8180717716e9a 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -6,17 +6,13 @@ import { GuidedTourStep } from 'calypso/a8c-for-agencies/components/guided-tour- import { DATAVIEWS_LIST } from 'calypso/a8c-for-agencies/components/items-dashboard/constants'; import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews'; import { - DataViewsColumn, DataViewsState, ItemsDataViewsType, } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces'; import SiteSort from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/site-sort'; import SiteSetFavorite from 'calypso/a8c-for-agencies/sections/sites/site-set-favorite'; import SitesDashboardContext from 'calypso/a8c-for-agencies/sections/sites/sites-dashboard-context'; -import { - SiteInfo, - SitesDataViewsProps, -} from 'calypso/a8c-for-agencies/sections/sites/sites-dataviews/interfaces'; +import { SitesDataViewsProps } from 'calypso/a8c-for-agencies/sections/sites/sites-dataviews/interfaces'; import SiteDataField from 'calypso/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field'; import SiteStatusContent from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/site-status-content'; import { JETPACK_MANAGE_ONBOARDING_TOURS_EXAMPLE_SITE } from 'calypso/jetpack-cloud/sections/onboarding-tours/constants'; @@ -27,6 +23,7 @@ import SiteActions from '../../site-actions'; import { AllowedTypes, Site, SiteData } from '../../types'; import SiteErrorColumn from '../a4a/site-error-column'; import { A4A_PLUGIN_SLUG } from '../a4a/site-error-preview'; +import type { Field } from '@wordpress/dataviews'; import type { MouseEvent, KeyboardEvent } from 'react'; export const JetpackSitesDataViews = ( { @@ -51,7 +48,7 @@ export const JetpackSitesDataViews = ( { } return data?.total || 0; } )(); - const sitesPerPage = dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; + const sitesPerPage = dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; const totalPages = Math.ceil( totalSites / sitesPerPage ); const possibleSites = data?.sites ?? []; @@ -95,7 +92,7 @@ export const JetpackSitesDataViews = ( { ); const renderField = useCallback( - ( column: AllowedTypes, item: SiteInfo ) => { + ( column: AllowedTypes, item: SiteData ) => { if ( isLoading ) { return ; } @@ -132,15 +129,14 @@ export const JetpackSitesDataViews = ( { const [ pluginsRef, setPluginsRef ] = useState< HTMLElement | null >(); const [ actionsRef ] = useState< HTMLElement | null >(); - const fields = useMemo< DataViewsColumn[] >( + const fields = useMemo< Field< SiteData >[] >( () => [ { id: 'status', - header: translate( 'Status' ), - getValue: ( { item }: { item: SiteInfo } ) => + label: translate( 'Status' ), + getValue: ( { item }: { item: SiteData } ) => item.site.error || item.scan.status === 'critical', render: () => null, - type: 'enumeration', elements: [ { value: 1, label: translate( 'Needs Attention' ) }, { value: 2, label: translate( 'Backup Failed' ) }, @@ -151,14 +147,15 @@ export const JetpackSitesDataViews = ( { { value: 7, label: translate( 'Plugins Needing Updates' ) }, ], filterBy: { - operators: [ 'in' ], + operators: [ 'is' ], }, enableHiding: false, enableSorting: false, }, { id: 'site', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), - getValue: ( { item }: { item: SiteInfo } ) => item.site.value.url, - render: ( { item }: { item: SiteInfo } ): ReactNode => { + getValue: ( { item }: { item: SiteData } ) => item.site.value.url, + render: ( { item }: { item: SiteData } ): ReactNode => { if ( isLoading ) { return ; } @@ -213,7 +210,8 @@ export const JetpackSitesDataViews = ( { }, { id: 'stats', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: (
), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'stats', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'stats', item ), enableHiding: false, enableSorting: false, }, { id: 'boost', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), - getValue: ( { item }: { item: SiteInfo } ) => item.boost.status, - render: ( { item }: { item: SiteInfo } ) => renderField( 'boost', item ), + getValue: ( { item }: { item: SiteData } ) => item.boost.status, + render: ( { item }: { item: SiteData } ) => renderField( 'boost', item ), enableHiding: false, enableSorting: false, }, { id: 'backup', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'backup', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'backup', item ), enableHiding: false, enableSorting: false, }, { id: 'monitor', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'monitor', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'monitor', item ), enableHiding: false, enableSorting: false, }, { id: 'scan', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'scan', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'scan', item ), enableHiding: false, enableSorting: false, }, { id: 'plugins', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'plugin', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'plugin', item ), enableHiding: false, enableSorting: false, }, { id: 'favorite', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( ), - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -380,8 +384,8 @@ export const JetpackSitesDataViews = ( { }, { id: 'actions', - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -419,7 +423,8 @@ export const JetpackSitesDataViews = ( { ); }, - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( 0 ? dataViewsState.perPage : 20; + const sitesPerPage = dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; const totalPages = Math.ceil( totalSites / sitesPerPage ); const sites = useFormattedSites( data?.sites ?? [] ); @@ -57,7 +58,7 @@ const SitesDataViews = ( { ); const renderField = useCallback( - ( column: AllowedTypes, item: SiteInfo ) => { + ( column: AllowedTypes, item: SiteData ) => { if ( isLoading ) { return ; } @@ -88,15 +89,16 @@ const SitesDataViews = ( { const [ actionsRef, setActionsRef ] = useState< HTMLElement | null >(); // todo - refactor: extract fields, along actions, to the upper component - const fields = useMemo( + const fields = useMemo< Field< SiteData >[] >( () => [ { id: 'status', - header: translate( 'Status' ), - getValue: ( { item }: { item: SiteInfo } ) => + label: translate( 'Status' ), + getValue: ( { item }: { item: SiteData } ) => item.site.error || item.scan.status === 'critical', - render: () => {}, - type: 'enumeration', + render: () => { + return null; + }, elements: [ { value: 1, label: translate( 'Needs Attention' ) }, { value: 2, label: translate( 'Backup Failed' ) }, @@ -107,14 +109,15 @@ const SitesDataViews = ( { { value: 7, label: translate( 'Plugins Needing Updates' ) }, ], filterBy: { - operators: [ 'in' ], + operators: [ 'is' ], }, enableHiding: false, enableSorting: false, }, { id: 'site', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), - getValue: ( { item }: { item: SiteInfo } ) => item.site.value.url, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.site.value.url, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -150,7 +153,8 @@ const SitesDataViews = ( { }, { id: 'stats', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: (
), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'stats', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'stats', item ), enableHiding: false, enableSorting: false, }, { id: 'boost', + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. header: ( <> ), - getValue: ( { item }: { item: SiteInfo } ) => item.boost.status, - render: ( { item }: { item: SiteInfo } ) => renderField( 'boost', item ), + getValue: ( { item }: { item: SiteData } ) => item.boost.status, + render: ( { item }: { item: SiteData } ) => renderField( 'boost', item ), enableHiding: false, enableSorting: false, }, { id: 'backup', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'backup', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'backup', item ), enableHiding: false, enableSorting: false, }, { id: 'monitor', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'monitor', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'monitor', item ), enableHiding: false, enableSorting: false, }, { id: 'scan', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'scan', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'scan', item ), enableHiding: false, enableSorting: false, }, { id: 'plugins', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> ), getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'plugin', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'plugin', item ), enableHiding: false, enableSorting: false, }, { id: 'favorite', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( ), - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -309,8 +319,8 @@ const SitesDataViews = ( { }, { id: 'actions', - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -332,7 +342,8 @@ const SitesDataViews = ( {
); }, - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( { - item.id = item.site.value.blog_id; // setting the id because of a issue with the DataViews component - return item.id; + getItemId={ ( item: SiteData ) => { + return item.site.value.blog_id.toString(); } } onChangeView={ setDataViewsState } supportedLayouts={ [ 'table' ] } diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/interfaces.ts b/client/a8c-for-agencies/sections/sites/sites-dataviews/interfaces.ts index 777b046c3f08f4..ad5b5ef9755983 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/interfaces.ts +++ b/client/a8c-for-agencies/sections/sites/sites-dataviews/interfaces.ts @@ -1,5 +1,5 @@ import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces'; -import { Site, SiteData } from '../types'; +import { Site } from '../types'; export interface SitesDataResponse { sites: Array< Site >; @@ -19,7 +19,3 @@ export interface SitesDataViewsProps { dataViewsState: DataViewsState; onRefetchSite?: () => Promise< unknown >; } - -export interface SiteInfo extends SiteData { - id: number; -} diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/types.d.ts b/client/a8c-for-agencies/sections/sites/sites-dataviews/types.d.ts deleted file mode 100644 index 9d670dfed75ded..00000000000000 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@wordpress/dataviews'; diff --git a/client/components/dataviews/types.d.ts b/client/components/dataviews/types.d.ts deleted file mode 100644 index 9d670dfed75ded..00000000000000 --- a/client/components/dataviews/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@wordpress/dataviews'; diff --git a/client/hosting/sites/components/sites-dashboard.tsx b/client/hosting/sites/components/sites-dashboard.tsx index 134dc46eea0113..7efd7ea8374e93 100644 --- a/client/hosting/sites/components/sites-dashboard.tsx +++ b/client/hosting/sites/components/sites-dashboard.tsx @@ -143,16 +143,11 @@ const SitesDashboard = ( { page, perPage, search: search ?? '', - hiddenFields: [ - addDummyDataViewPrefix( 'site' ), - addDummyDataViewPrefix( 'last-publish' ), - addDummyDataViewPrefix( 'last-interacted' ), - addDummyDataViewPrefix( 'status' ), - ], + fields: [ 'site', 'plan', 'status', 'last-publish', 'stats', 'actions' ], filters: [ { field: addDummyDataViewPrefix( 'status' ), - operator: 'in', + operator: 'is', value: siteStatusGroups.find( ( item ) => item.slug === status )?.value || 1, }, ], @@ -201,7 +196,7 @@ const SitesDashboard = ( { // Get the status group slug. const statusSlug = useMemo( () => { - const statusFilter = dataViewsState.filters.find( + const statusFilter = dataViewsState.filters?.find( ( filter ) => filter.field === addDummyDataViewPrefix( 'status' ) ); const statusNumber = statusFilter?.value || 1; @@ -217,9 +212,9 @@ const SitesDashboard = ( { // Perform sorting actions const sortedSites = useSitesListSorting( currentStatusGroup, { - sortKey: siteSortingKeys.find( ( key ) => key.dataView === dataViewsState.sort.field ) + sortKey: siteSortingKeys.find( ( key ) => key.dataView === dataViewsState.sort?.field ) ?.sortKey as SitesSortKey, - sortOrder: dataViewsState.sort.direction || undefined, + sortOrder: dataViewsState.sort?.direction || undefined, } ); // Filter sites list by search query. @@ -227,10 +222,13 @@ const SitesDashboard = ( { search: dataViewsState.search, } ); - const paginatedSites = filteredSites.slice( - ( dataViewsState.page - 1 ) * dataViewsState.perPage, - dataViewsState.page * dataViewsState.perPage - ); + const paginatedSites = + dataViewsState.page && dataViewsState.perPage + ? filteredSites.slice( + ( dataViewsState.page - 1 ) * dataViewsState.perPage, + dataViewsState.page * dataViewsState.perPage + ) + : filteredSites; const onboardingTours = useOnboardingTours(); @@ -242,7 +240,7 @@ const SitesDashboard = ( { const queryParams = { search: dataViewsState.search?.trim(), status: statusSlug === DEFAULT_STATUS_GROUP ? undefined : statusSlug, - page: dataViewsState.page > 1 ? dataViewsState.page : undefined, + page: dataViewsState.page && dataViewsState.page > 1 ? dataViewsState.page : undefined, 'per-page': dataViewsState.perPage === DEFAULT_PER_PAGE ? undefined : dataViewsState.perPage, }; @@ -251,9 +249,9 @@ const SitesDashboard = ( { // Update site sorting preference on change useEffect( () => { - if ( dataViewsState.sort.field ) { + if ( dataViewsState.sort?.field ) { onSitesSortingChange( { - sortKey: siteSortingKeys.find( ( key ) => key.dataView === dataViewsState.sort.field ) + sortKey: siteSortingKeys.find( ( key ) => key.dataView === dataViewsState.sort?.field ) ?.sortKey as SitesSortKey, sortOrder: dataViewsState.sort.direction || 'asc', } ); diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index 842e7793b8bfc8..9259bd09eeb4d3 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/client/hosting/sites/components/sites-dataviews/index.tsx @@ -16,8 +16,8 @@ import { SiteStats } from './sites-site-stats'; import { SiteStatus } from './sites-site-status'; import { addDummyDataViewPrefix } from './utils'; import type { SiteExcerptData } from '@automattic/sites'; +import type { Field } from '@wordpress/dataviews'; import type { - DataViewsColumn, DataViewsPaginationInfo, DataViewsState, ItemsDataViewsType, @@ -116,11 +116,12 @@ const DotcomSitesDataViews = ( { const siteStatusGroups = useSiteStatusGroups(); // Generate DataViews table field-columns - const fields = useMemo< DataViewsColumn[] >( + const fields = useMemo< Field< SiteInfo >[] >( () => [ { id: 'site', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( { __( 'Plan' ) }, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: { __( 'Plan' ) }, render: ( { item }: { item: SiteInfo } ) => , enableHiding: false, enableSorting: false, @@ -148,7 +150,8 @@ const DotcomSitesDataViews = ( { }, { id: 'status', - header: { __( 'Status' ) }, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: { __( 'Status' ) }, render: ( { item }: { item: SiteInfo } ) => , enableHiding: false, enableSorting: false, @@ -156,7 +159,8 @@ const DotcomSitesDataViews = ( { }, { id: 'last-publish', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( { __( 'Stats' ) } @@ -187,7 +192,8 @@ const DotcomSitesDataViews = ( { }, { id: 'actions', - header: { __( 'Actions' ) }, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: { __( 'Actions' ) }, render: ( { item }: { item: SiteInfo } ) => , enableHiding: false, enableSorting: false, @@ -196,33 +202,35 @@ const DotcomSitesDataViews = ( { // Dummy fields to allow people to sort by them on mobile. { id: addDummyDataViewPrefix( 'site' ), - header: { __( 'Site' ) }, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: { __( 'Site' ) }, render: () => null, enableHiding: false, enableSorting: true, }, { id: addDummyDataViewPrefix( 'last-publish' ), - header: { __( 'Last Published' ) }, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: { __( 'Last Published' ) }, render: () => null, enableHiding: false, enableSorting: true, }, { id: addDummyDataViewPrefix( 'last-interacted' ), - header: __( 'Last Interacted' ), + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: __( 'Last Interacted' ), render: () => null, enableHiding: false, enableSorting: true, }, { id: addDummyDataViewPrefix( 'status' ), - header: __( 'Status' ), + label: __( 'Status' ), render: () => null, - type: 'enumeration', elements: siteStatusGroups, filterBy: { - operators: [ 'in' ], + operators: [ 'is' ], }, enableHiding: false, enableSorting: false, diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts index c10e1bfb8e77c8..640f214f6eacfe 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts @@ -1,4 +1,5 @@ -import { type DashboardSortInterface, Site, SiteData } from '../types'; +import { type Site, SiteData } from '../types'; +import type { View } from '@wordpress/dataviews'; export interface SitesDataResponse { sites: Array< Site >; @@ -24,17 +25,9 @@ export interface Filter { value: number; } -export interface SitesViewState { - type: 'table' | 'list' | 'grid'; - perPage: number; - page: number; - sort: DashboardSortInterface; - search: string; - filters: Filter[]; - hiddenFields: string[]; - layout: object; +export type SitesViewState = View & { selectedSite?: Site | undefined; -} +}; export interface SiteInfo extends SiteData { id: number; diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/types.d.ts b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/types.d.ts deleted file mode 100644 index 9d670dfed75ded..00000000000000 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@wordpress/dataviews'; From 7fa3b562ab71c95d182fbb85f880290a96257a8f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 13:11:58 +0200 Subject: [PATCH 005/102] Import root dataviews styles --- client/components/dataviews/style.scss | 6 +++++- client/hosting/sites/components/dotcom-style.scss | 7 ------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 4b7dafedb21d3e..6f93d575fe9524 100644 --- a/client/components/dataviews/style.scss +++ b/client/components/dataviews/style.scss @@ -1,7 +1,11 @@ @import "@wordpress/base-styles/breakpoints"; @import "@wordpress/base-styles/mixins"; +@import "@wordpress/dataviews/build-style/style.css"; .dataviews-wrapper { + // Maybe move upstream to the gutenberg repository + width: 100%; + tr.dataviews-view-table__row { background: var(--studio-white); @@ -9,7 +13,7 @@ opacity: 0; } .components-checkbox-control__input:checked, - .components-checkbox-control__input:indeterminate, { + .components-checkbox-control__input:indeterminate { opacity: 1; } diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 35e2c99e218c5b..035a8dc5e6ea9c 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -571,13 +571,6 @@ flex-direction: column; height: 100%; - // This style should ideally be present in the package directly. - .dataviews-filters__container, - .dataviews__view-actions { - padding: 16px 48px; - box-sizing: border-box; - } - .dataviews-wrapper { .dataviews-pagination { margin: 0; From 7c4f5dfa45a85621e740ce8b1c6eb1e5c693100f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 14:12:26 +0200 Subject: [PATCH 006/102] Update types and dataviews in a4a project --- .../components/items-dashboard/constants.ts | 1 - .../items-dashboard/items-dataviews/index.tsx | 2 +- .../items-dataviews/interfaces.ts | 4 +- .../sites/needs-setup-sites/table.tsx | 19 ++-- .../sites/sites-dashboard-provider.tsx | 21 ++++- .../sections/sites/sites-dashboard/index.tsx | 10 +- .../update-sites-dashboard-url.tsx | 8 +- .../sections/sites/sites-dataviews/index.tsx | 2 +- .../use-fetch-dashboard-sites.ts | 8 +- .../sites-overview/sites-dashboard-v2.tsx | 19 +++- .../sites-overview/sites-dataviews/index.tsx | 94 ++++++++++--------- .../sites-dataviews/interfaces.ts | 12 +-- .../agency-dashboard/sites-overview/types.ts | 3 +- 13 files changed, 110 insertions(+), 93 deletions(-) diff --git a/client/a8c-for-agencies/components/items-dashboard/constants.ts b/client/a8c-for-agencies/components/items-dashboard/constants.ts index 4a2938ac09a329..af095d7e9c8525 100644 --- 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 index ea5f42f120e0d6..41ea6c6ebc9764 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx @@ -103,7 +103,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP } onSelectionChange={ data.onSelectionChange } onChangeView={ data.setDataViewsState } - supportedLayouts={ [ 'table' ] } + defaultLayouts={ { table: {} } } actions={ data.actions } isLoading={ isLoading } /> diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts index 4054baa03ed888..8945fc71c1a291 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts @@ -1,4 +1,4 @@ -import type { View, Field, Action } from '@wordpress/dataviews'; +import type { View, Field, Action, SortDirection } from '@wordpress/dataviews'; export interface ItemsDataViewsType< T > { items: T[] | undefined; @@ -21,7 +21,7 @@ export interface DataViewsPaginationInfo { export interface DataViewsSort { field: string; - direction: 'asc' | 'desc' | ''; + direction: SortDirection; } export interface DataViewsFilter { diff --git a/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx b/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx index 6b1a3bf5ac1561..67aff62b12007a 100644 --- a/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx +++ b/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx @@ -5,6 +5,7 @@ import TextPlaceholder from 'calypso/a8c-for-agencies/components/text-placeholde import { DataViews } from 'calypso/components/dataviews'; import SiteSort from '../site-sort'; import PlanField, { AvailablePlans } from './plan-field'; +import type { Field } from '@wordpress/dataviews'; import './style.scss'; @@ -25,10 +26,11 @@ export default function NeedSetupTable( { }: Props ) { const translate = useTranslate(); - const fields = [ + const fields: Field< AvailablePlans >[] = [ { id: 'site', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( { translate( 'Site' ).toUpperCase() } @@ -54,24 +56,17 @@ export default function NeedSetupTable( { ]; return ( - + data={ isLoading ? [] : availablePlans } paginationInfo={ { totalItems: 1, totalPages: 1 } } fields={ fields } view={ { - filters: [], - sort: { - field: '', - direction: 'asc', - }, type: DATAVIEWS_TABLE, perPage: 1, page: 1, - hiddenFields: [], - layout: {}, } } search={ false } - supportedLayouts={ [ 'table' ] } + defaultLayouts={ { table: {} } } actions={ [] } isLoading={ false } /> diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx index e95388badb3fb4..6be4cc8d14c1de 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx @@ -11,6 +11,7 @@ import { } from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/types'; import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD, filtersMap } from './constants'; import SitesDashboardContext from './sites-dashboard-context'; +import type { Filter } from '@wordpress/dataviews'; interface Props { showOnlyFavoritesInitialState?: boolean; @@ -28,14 +29,14 @@ interface Props { featurePreview?: ReactNode | null; } -const buildFilters = ( { issueTypes }: { issueTypes: string } ) => { +const buildFilters = ( { issueTypes }: { issueTypes: string } ): Filter[] => { const issueTypesArray = issueTypes?.split( ',' ); return ( issueTypesArray?.map( ( issueType ) => { return { field: 'status', - operator: 'in', + operator: 'is', value: filtersMap.find( ( filterMap ) => filterMap.filterType === issueType )?.ref || 1, }; } ) || [] @@ -87,9 +88,19 @@ export const SitesDashboardProvider = ( { setCurrentLicenseInfo( null ); }; - initialDataViewsState.sort.field = DEFAULT_SORT_FIELD; - initialDataViewsState.sort.direction = DEFAULT_SORT_DIRECTION; - initialDataViewsState.hiddenFields = [ 'status' ]; + initialDataViewsState.sort = { + field: DEFAULT_SORT_FIELD, + direction: DEFAULT_SORT_DIRECTION, + }; + initialDataViewsState.fields = [ + 'site', + 'status', + 'boost', + 'backup', + 'monitor', + 'scan', + 'plugins', + ]; const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( { ...initialDataViewsState, diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx index 1c2864a477e13e..5e07ee609ae84e 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx @@ -108,8 +108,8 @@ export default function SitesDashboard() { const { data, isError, isLoading, refetch } = useFetchDashboardSites( { isPartnerOAuthTokenLoaded: false, - searchQuery: dataViewsState.search, - currentPage: dataViewsState.page, + searchQuery: dataViewsState?.search ?? '', + currentPage: dataViewsState.page ?? 1, filter: agencyDashboardFilter, sort: dataViewsState.sort, perPage: dataViewsState.perPage, @@ -156,11 +156,11 @@ export default function SitesDashboard() { const updatedUrl = updateSitesDashboardUrl( { category: category, setCategory: setCategory, - filters: dataViewsState.filters, + filters: dataViewsState.filters ?? [], selectedSite: dataViewsState.selectedItem, selectedSiteFeature: selectedSiteFeature, - search: dataViewsState.search, - currentPage: dataViewsState.page, + search: dataViewsState.search ?? '', + currentPage: dataViewsState.page ?? 1, sort: dataViewsState.sort, showOnlyFavorites, showOnlyDevelopmentSites, diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx index 34694ca4afad85..cd368cc71018ba 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx @@ -20,7 +20,7 @@ const buildQueryString = ( { filters: Filter[]; search: string; currentPage: number; - sort: DashboardSortInterface; + sort?: DashboardSortInterface; showOnlyFavorites?: boolean; showOnlyDevelopmentSites?: boolean; } ) => { @@ -36,8 +36,8 @@ const buildQueryString = ( { // ASC is the default sort direction for the URL if ( - sort.field !== DEFAULT_SORT_FIELD || - ( sort.field === DEFAULT_SORT_FIELD && sort.direction !== DEFAULT_SORT_DIRECTION ) + ( sort && sort.field !== DEFAULT_SORT_FIELD ) || + ( sort && sort.field === DEFAULT_SORT_FIELD && sort.direction !== DEFAULT_SORT_DIRECTION ) ) { urlQuery.set( 'sort_field', sort.field ); urlQuery.set( 'sort_direction', sort.direction ); @@ -83,7 +83,7 @@ export const updateSitesDashboardUrl = ( { selectedSiteFeature?: string; search: string; currentPage: number; - sort: DashboardSortInterface; + sort?: DashboardSortInterface; showOnlyFavorites?: boolean; showOnlyDevelopmentSites?: boolean; } ) => { diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx index f5bae16b08d643..b1d110909ef393 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx @@ -467,7 +467,7 @@ const SitesDataViews = ( { return item.site.value.blog_id.toString(); } } onChangeView={ setDataViewsState } - supportedLayouts={ [ 'table' ] } + defaultLayouts={ { table: {} } } actions={ [] } // Replace with actions when bulk selections are implemented. isLoading={ isLoading } /> diff --git a/client/data/agency-dashboard/use-fetch-dashboard-sites.ts b/client/data/agency-dashboard/use-fetch-dashboard-sites.ts index 763e870e16704e..44c390d9befeb0 100644 --- a/client/data/agency-dashboard/use-fetch-dashboard-sites.ts +++ b/client/data/agency-dashboard/use-fetch-dashboard-sites.ts @@ -24,7 +24,11 @@ const agencyDashboardFilterToQueryObject = ( filter: AgencyDashboardFilter ) => }; }; -const agencyDashboardSortToQueryObject = ( sort: DashboardSortInterface ) => { +const agencyDashboardSortToQueryObject = ( sort?: DashboardSortInterface ) => { + if ( ! sort ) { + return; + } + return { ...( sort?.field && { sort_field: sort.field } ), ...( sort?.direction && { sort_direction: sort.direction } ), @@ -36,7 +40,7 @@ export interface FetchDashboardSitesArgsInterface { searchQuery: string; currentPage: number; filter: AgencyDashboardFilter; - sort: DashboardSortInterface; + sort?: DashboardSortInterface; perPage?: number; agencyId?: number; } diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dashboard-v2.tsx b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dashboard-v2.tsx index ca87315ee85c7b..f555374a9d6486 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dashboard-v2.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dashboard-v2.tsx @@ -90,19 +90,28 @@ export default function SitesDashboardV2() { filter?.issueTypes?.map( ( issueType ) => { return { field: 'status', - operator: 'in', + operator: 'is', value: filtersMap.find( ( filterMap ) => filterMap.filterType === issueType )?.ref || 1, }; } ) || [], - hiddenFields: [ 'status' ], - layout: {}, + fields: [ + 'site', + 'stats', + 'boost', + 'backup', + 'monitor', + 'scan', + 'plugins', + 'favorite', + 'actions', + ], selectedSite: undefined, } ); const { data, isError, isLoading, refetch } = useFetchDashboardSites( { isPartnerOAuthTokenLoaded, searchQuery: search, - currentPage: sitesViewState.page, + currentPage: sitesViewState.page ?? 1, filter, sort, perPage: sitesViewState.perPage, @@ -148,7 +157,7 @@ export default function SitesDashboardV2() { if ( path === '/sites?issue_types=all_issues' ) { setSitesViewState( { ...sitesViewState, - filters: [ { field: 'status', operator: 'in', value: 1 } ], + filters: [ { field: 'status', operator: 'is', value: 1 } ], search: '', page: 1, } ); diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/index.tsx b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/index.tsx index 183d5786c782b2..43f3808d91d597 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/index.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/index.tsx @@ -13,8 +13,9 @@ import { JETPACK_MANAGE_ONBOARDING_TOURS_EXAMPLE_SITE } from 'calypso/jetpack-cl import TextPlaceholder from 'calypso/jetpack-cloud/sections/partner-portal/text-placeholder'; import SiteSetFavorite from '../site-set-favorite'; import SiteSort from '../site-sort'; -import { AllowedTypes, Site } from '../types'; -import { SitesDataViewsProps, SiteInfo } from './interfaces'; +import { AllowedTypes, Site, SiteData } from '../types'; +import { SitesDataViewsProps } from './interfaces'; +import type { Field } from '@wordpress/dataviews'; import './style.scss'; @@ -30,7 +31,8 @@ const SitesDataViews = ( { const translate = useTranslate(); const { showOnlyFavorites } = useContext( SitesDashboardContext ); const totalSites = showOnlyFavorites ? data?.totalFavorites || 0 : data?.total || 0; - const sitesPerPage = sitesViewState.perPage > 0 ? sitesViewState.perPage : 20; + const sitesPerPage = + sitesViewState.perPage && sitesViewState.perPage > 0 ? sitesViewState.perPage : 20; const totalPages = Math.ceil( totalSites / sitesPerPage ); const sites = useFormattedSites( data?.sites ?? [] ); @@ -46,7 +48,7 @@ const SitesDataViews = ( { ); const renderField = useCallback( - ( column: AllowedTypes, item: SiteInfo ) => { + ( column: AllowedTypes, item: SiteData ) => { if ( isLoading ) { return ; } @@ -67,15 +69,14 @@ const SitesDataViews = ( { ); // todo - refactor: extract fields, along actions, to the upper component - const fields = useMemo( + const fields = useMemo< Field< SiteData >[] >( () => [ { id: 'status', - header: translate( 'Status' ), - getValue: ( { item }: { item: SiteInfo } ) => + label: translate( 'Status' ), + getValue: ( { item }: { item: SiteData } ) => item.site.error || item.scan.status === 'critical', - render: () => {}, - type: 'enumeration', + render: () => null, elements: [ { value: 1, label: translate( 'Needs Attention' ) }, { value: 2, label: translate( 'Backup Failed' ) }, @@ -86,14 +87,15 @@ const SitesDataViews = ( { { value: 7, label: translate( 'Plugins Needing Updates' ) }, ], filterBy: { - operators: [ 'in' ], + operators: [ 'is' ], }, enableHiding: false, enableSorting: false, }, { id: 'site', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( <> @@ -102,8 +104,8 @@ const SitesDataViews = ( { ), - getValue: ( { item }: { item: SiteInfo } ) => item.site.value.url, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.site.value.url, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -121,63 +123,70 @@ const SitesDataViews = ( { }, { id: 'stats', - header: STATS, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: STATS, getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'stats', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'stats', item ), enableHiding: false, enableSorting: false, }, { id: 'boost', - header: BOOST, - getValue: ( { item }: { item: SiteInfo } ) => item.boost.status, - render: ( { item }: { item: SiteInfo } ) => renderField( 'boost', item ), + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: BOOST, + getValue: ( { item }: { item: SiteData } ) => item.boost.status, + render: ( { item }: { item: SiteData } ) => renderField( 'boost', item ), enableHiding: false, enableSorting: false, }, { id: 'backup', - header: BACKUP, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: BACKUP, getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'backup', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'backup', item ), enableHiding: false, enableSorting: false, }, { id: 'monitor', - header: MONITOR, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: MONITOR, getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'monitor', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'monitor', item ), enableHiding: false, enableSorting: false, }, { id: 'scan', - header: SCAN, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: SCAN, getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'scan', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'scan', item ), enableHiding: false, enableSorting: false, }, { id: 'plugins', - header: PLUGINS, + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: PLUGINS, getValue: () => '-', - render: ( { item }: { item: SiteInfo } ) => renderField( 'plugin', item ), + render: ( { item }: { item: SiteData } ) => renderField( 'plugin', item ), enableHiding: false, enableSorting: false, }, { id: 'favorite', - header: ( + // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. + label: ( ), - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -196,8 +205,8 @@ const SitesDataViews = ( { }, { id: 'actions', - getValue: ( { item }: { item: SiteInfo } ) => item.isFavorite, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteData } ) => item.isFavorite, + render: ( { item }: { item: SiteData } ) => { if ( isLoading ) { return ; } @@ -235,44 +244,44 @@ const SitesDataViews = ( { id: 'pause-monitor', label: translate( 'Pause Monitor' ), supportsBulk: true, - isEligible( site: SiteInfo ) { + isEligible( site: SiteData ) { return site.monitor.status === 'active'; }, callback() { - // todo: pause monitor. Param: sites: SiteInfo[] + // todo: pause monitor. Param: sites: SiteData[] }, }, { id: 'resume-monitor', label: translate( 'Resume Monitor' ), supportsBulk: true, - isEligible( site: SiteInfo ) { + isEligible( site: SiteData ) { return site.monitor.status === 'inactive'; }, callback() { - // todo: resume monitor. Param: sites: SiteInfo[] + // todo: resume monitor. Param: sites: SiteData[] }, }, { id: 'custom-notification', label: translate( 'Custom Notification' ), supportsBulk: true, - isEligible( site: SiteInfo ) { + isEligible( site: SiteData ) { return site.monitor.status === 'active'; }, callback() { - // todo: custom notification. Param: sites: SiteInfo[] + // todo: custom notification. Param: sites: SiteData[] }, }, { id: 'reset-notification', label: translate( 'Reset Notification' ), supportsBulk: true, - isEligible( site: SiteInfo ) { + isEligible( site: SiteData ) { return site.monitor.status === 'active'; }, callback() { - // todo: reset notification. Param: sites: SiteInfo[] + // todo: reset notification. Param: sites: SiteData[] }, }, ], @@ -317,12 +326,11 @@ const SitesDataViews = ( { view={ sitesViewState } search searchLabel={ translate( 'Search for sites' ) } - getItemId={ ( item: SiteInfo ) => { - item.id = item.site.value.blog_id; // setting the id because of a issue with the DataViews component - return item.id; + getItemId={ ( item: SiteData ) => { + return item.site.value.blog_id.toString(); } } onChangeView={ onSitesViewChange } - supportedLayouts={ [ 'table' ] } + defaultLayouts={ { table: {} } } actions={ [] } // Replace with actions when bulk selections are implemented. isLoading={ isLoading } /> diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts index 640f214f6eacfe..190e45ab8e83bf 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/interfaces.ts @@ -1,4 +1,4 @@ -import { type Site, SiteData } from '../types'; +import { type Site } from '../types'; import type { View } from '@wordpress/dataviews'; export interface SitesDataResponse { @@ -19,16 +19,6 @@ export interface SitesDataViewsProps { sitesViewState: SitesViewState; } -export interface Filter { - field: string; - operator: string; - value: number; -} - export type SitesViewState = View & { selectedSite?: Site | undefined; }; - -export interface SiteInfo extends SiteData { - id: number; -} diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts index b87fd3129fadce..aea3382bcca177 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts @@ -1,5 +1,6 @@ import { TranslateResult } from 'i18n-calypso'; import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types'; +import type { SortDirection } from '@wordpress/dataviews'; // All types based on which the data is populated on the agency dashboard table rows export type AllowedTypes = @@ -234,7 +235,7 @@ export type ActionEventNames = { export interface DashboardSortInterface { field: string; - direction: 'asc' | 'desc' | ''; + direction: SortDirection; } export interface DashboardOverviewContextInterface { path: string; From 3c4732eb08524473e6efbcbd8974817eea256c4c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 14:39:14 +0200 Subject: [PATCH 007/102] Fix preview --- .../sites/features/jetpack/jetpack-sites-dataviews.tsx | 1 + .../sections/sites/sites-dashboard/style.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index e8180717716e9a..41c113f9983725 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -86,6 +86,7 @@ export const JetpackSitesDataViews = ( { ...prevState, selectedItem: site, type: DATAVIEWS_LIST, + fields: [ 'site' ], } ) ); }, [ isNotProduction, setDataViewsState ] diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss index 00a852385c51ce..0633ebea2bdeab 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss @@ -346,7 +346,6 @@ overflow-y: auto; li { - padding: 8px 24px; border-bottom: 1px solid var(--color-accent-5); } @@ -394,6 +393,15 @@ } } + // Ideally instead of reusing the site name full field + // We should be setting a media field and a primary field. + .dataviews-view-list__media-wrapper { + display: none; + } + .dataviews-view-list__primary-field { + display: none; + } + .sites-overview__stats-trend, .sites-overview__column-action-button, .sites-overview__row-status, From 47a9bff517763a55e6867aebf9c6237958151da8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Aug 2024 16:29:34 +0200 Subject: [PATCH 008/102] Fix lock --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index 601c6e4a2fe89b..6c4b97f38b102b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13341,13 +13341,6 @@ __metadata: languageName: node linkType: hard -"classnames@npm:^2.3.1": - version: 2.3.2 - resolution: "classnames@npm:2.3.2" - checksum: cd50ead57b4f97436aaa9f9885c6926323efc7c2bea8e3d4eb10e4e972aa6a1cfca1c7a0e06f8a199ca7498d4339e30bb6002e589e61c9f21248cbf3e8b0b18d - languageName: node - linkType: hard - "clean-css@npm:4.2.x": version: 4.2.3 resolution: "clean-css@npm:4.2.3" From d7243396b48c37eb4644c80044d15c584b16e1cd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 12:18:53 +0200 Subject: [PATCH 009/102] Fix more type errors --- .../hooks/use-managed-sites-map.ts | 4 ---- .../wpcom-sites-table.tsx | 4 ---- .../items-dashboard/items-dataviews/index.tsx | 4 ++-- .../items-dataviews/interfaces.ts | 6 ----- .../items-dataviews/site-sort/index.tsx | 18 ++++++++------ .../hooks/use-no-active-site.ts | 4 ---- .../common/referral-details-table/index.tsx | 4 ++-- .../sites/needs-setup-sites/table.tsx | 2 ++ .../sections/sites/site-sort/index.tsx | 18 ++++++++------ .../sites-dashboard/get-selected-filters.tsx | 4 ++-- .../update-sites-dashboard-url.tsx | 5 ++-- .../sections/sites/sites-dataviews/index.tsx | 2 +- .../components/sites-dataviews/index.tsx | 22 +++++++++-------- .../components/sites-dataviews/interfaces.ts | 5 ---- .../sites-dataviews/sites-site-sort.tsx | 24 ++++++++++++------- .../sites-overview/site-sort/index.tsx | 18 ++++++++------ .../agency-dashboard/sites-overview/types.ts | 2 +- .../state/jetpack-agency-dashboard/actions.ts | 2 +- 18 files changed, 73 insertions(+), 75 deletions(-) delete mode 100644 client/hosting/sites/components/sites-dataviews/interfaces.ts diff --git a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts index 14a42f526230a9..adeaa27b17d5b6 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts +++ b/client/a8c-for-agencies/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/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx index c90731128f4fae..d31f4f8cfc2f37 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx +++ b/client/a8c-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: { 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 index 41ea6c6ebc9764..2c010d453c65c5 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx @@ -101,8 +101,8 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP return item.id; } ) } - onSelectionChange={ data.onSelectionChange } - onChangeView={ data.setDataViewsState } + onChangeSelection={ data.onSelectionChange } + onChangeView={ ( newView ) => data.setDataViewsState( () => newView ) } defaultLayouts={ { table: {} } } actions={ data.actions } isLoading={ isLoading } diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts index 8945fc71c1a291..4c7b5fe6801eb8 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts @@ -24,12 +24,6 @@ export interface DataViewsSort { direction: SortDirection; } -export interface DataViewsFilter { - field: string; - operator: string; - value: number; -} - export type DataViewsState = View & { selectedItem?: any | undefined; }; diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/site-sort/index.tsx b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/site-sort/index.tsx index c511c47daacb5a..8ed3d8937b2b6c 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/site-sort/index.tsx +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/site-sort/index.tsx @@ -33,20 +33,24 @@ export default function SiteSort( { } ) { const { dataViewsState, setDataViewsState } = useContext( SitesDashboardContext ); - const { field, direction } = dataViewsState.sort; + const { field, direction } = dataViewsState.sort ?? {}; const isDefault = field !== SITE_COLUMN_KEY_MAP?.[ columnKey ] || ! field || ! direction; const setSort = () => { - const updatedSort = { ...dataViewsState.sort }; + let updatedSort = dataViewsState.sort; if ( isDefault ) { - updatedSort.field = SITE_COLUMN_KEY_MAP?.[ columnKey ]; - updatedSort.direction = SORT_DIRECTION_ASC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_ASC, + }; } else if ( direction === SORT_DIRECTION_ASC ) { - updatedSort.direction = SORT_DIRECTION_DESC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_DESC, + }; } else if ( direction === SORT_DIRECTION_DESC ) { - updatedSort.field = ''; - updatedSort.direction = ''; + updatedSort = undefined; } setDataViewsState( ( sitesViewState ) => ( { diff --git a/client/a8c-for-agencies/hooks/use-no-active-site.ts b/client/a8c-for-agencies/hooks/use-no-active-site.ts index d8bd5d90322019..b17668ddd6f104 100644 --- a/client/a8c-for-agencies/hooks/use-no-active-site.ts +++ b/client/a8c-for-agencies/hooks/use-no-active-site.ts @@ -14,10 +14,6 @@ export default function useNoActiveSite() { showOnlyFavorites: false, showOnlyDevelopmentSites: false, }, - sort: { - field: '', - direction: '', - }, agencyId, } ); diff --git a/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx b/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx index 8c2032887a214a..c2a5b15834eeb1 100644 --- a/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx +++ b/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx @@ -2,13 +2,13 @@ import { useState } 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 type { ReferralPurchase } from '../../types'; -import type { DataViewsColumn } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces'; +import type { Field } from '@wordpress/dataviews'; import './style.scss'; interface Props { items: ReferralPurchase[]; // Update this when we have more types - fields: DataViewsColumn[]; + fields: Field< ReferralPurchase >[]; } export default function ReferralDetailsTable( { items, fields }: Props ) { diff --git a/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx b/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx index 67aff62b12007a..9435d06263d3c6 100644 --- a/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx +++ b/client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx @@ -65,10 +65,12 @@ export default function NeedSetupTable( { perPage: 1, page: 1, } } + onChangeView={ () => {} } search={ false } defaultLayouts={ { table: {} } } actions={ [] } isLoading={ false } + getItemId={ ( item: AvailablePlans ) => item.name } /> ); } diff --git a/client/a8c-for-agencies/sections/sites/site-sort/index.tsx b/client/a8c-for-agencies/sections/sites/site-sort/index.tsx index 6ab4f10c85f0ea..1fb27cf7cb1031 100644 --- a/client/a8c-for-agencies/sections/sites/site-sort/index.tsx +++ b/client/a8c-for-agencies/sections/sites/site-sort/index.tsx @@ -32,20 +32,24 @@ export default function SiteSort( { } ) { const { dataViewsState, setDataViewsState } = useContext( SitesDashboardContext ); - const { field, direction } = dataViewsState.sort; + const { field, direction } = dataViewsState.sort ?? {}; const isDefault = field !== SITE_COLUMN_KEY_MAP?.[ columnKey ] || ! field || ! direction; const setSort = () => { - const updatedSort = { ...dataViewsState.sort }; + let updatedSort = dataViewsState.sort; if ( isDefault ) { - updatedSort.field = SITE_COLUMN_KEY_MAP?.[ columnKey ]; - updatedSort.direction = SORT_DIRECTION_ASC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_ASC, + }; } else if ( direction === SORT_DIRECTION_ASC ) { - updatedSort.direction = SORT_DIRECTION_DESC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_ASC, + }; } else if ( direction === SORT_DIRECTION_DESC ) { - updatedSort.field = ''; - updatedSort.direction = ''; + updatedSort = undefined; } setDataViewsState( ( sitesViewState ) => ( { diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/get-selected-filters.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/get-selected-filters.tsx index ab799d83cf62d5..dc2c5dc0cc0609 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/get-selected-filters.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/get-selected-filters.tsx @@ -1,7 +1,7 @@ -import { DataViewsFilter } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces'; import { filtersMap } from '../constants'; +import type { Filter } from '@wordpress/dataviews'; -export function getSelectedFilters( filters: DataViewsFilter[] = [] ) { +export function getSelectedFilters( filters: Filter[] = [] ) { return ( filters?.map( ( filter ) => { const filterType = diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx index cd368cc71018ba..19bb57083807ad 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx @@ -1,5 +1,3 @@ -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, @@ -8,6 +6,7 @@ import { } from '../constants'; import { DashboardSortInterface, Site } from '../types'; import { getSelectedFilters } from './get-selected-filters'; +import type { Filter } from '@wordpress/dataviews'; const buildQueryString = ( { filters, @@ -78,7 +77,7 @@ export const updateSitesDashboardUrl = ( { }: { category?: string; setCategory: ( category: string ) => void; - filters: DataViewsFilter[]; + filters: Filter[]; selectedSite?: Site; selectedSiteFeature?: string; search: string; diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx index b1d110909ef393..c2054addf10554 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx @@ -466,7 +466,7 @@ const SitesDataViews = ( { getItemId={ ( item: SiteData ) => { return item.site.value.blog_id.toString(); } } - onChangeView={ setDataViewsState } + onChangeView={ ( view ) => setDataViewsState( () => view ) } defaultLayouts={ { table: {} } } actions={ [] } // Replace with actions when bulk selections are implemented. isLoading={ isLoading } diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index 9259bd09eeb4d3..d5119d8392a143 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/client/hosting/sites/components/sites-dataviews/index.tsx @@ -10,7 +10,6 @@ import { useSelector } from 'calypso/state'; import { getCurrentUserId } from 'calypso/state/current-user/selectors'; import ActionsField from './dataviews-fields/actions-field'; import SiteField from './dataviews-fields/site-field'; -import { SiteInfo } from './interfaces'; import { SiteSort } from './sites-site-sort'; import { SiteStats } from './sites-site-stats'; import { SiteStatus } from './sites-site-status'; @@ -116,7 +115,7 @@ const DotcomSitesDataViews = ( { const siteStatusGroups = useSiteStatusGroups(); // Generate DataViews table field-columns - const fields = useMemo< Field< SiteInfo >[] >( + const fields = useMemo< Field< SiteExcerptData >[] >( () => [ { id: 'site', @@ -132,8 +131,8 @@ const DotcomSitesDataViews = ( { ), width: getSiteNameColWidth( isDesktop, isWide ), - getValue: ( { item }: { item: SiteInfo } ) => item.URL, - render: ( { item }: { item: SiteInfo } ) => { + getValue: ( { item }: { item: SiteExcerptData } ) => item.URL, + render: ( { item }: { item: SiteExcerptData } ) => { return ; }, enableHiding: false, @@ -143,7 +142,9 @@ const DotcomSitesDataViews = ( { id: 'plan', // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. label: { __( 'Plan' ) }, - render: ( { item }: { item: SiteInfo } ) => , + render: ( { item }: { item: SiteExcerptData } ) => ( + + ), enableHiding: false, enableSorting: false, width: '100px', @@ -152,7 +153,7 @@ const DotcomSitesDataViews = ( { id: 'status', // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. label: { __( 'Status' ) }, - render: ( { item }: { item: SiteInfo } ) => , + render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, width: '116px', @@ -170,7 +171,7 @@ const DotcomSitesDataViews = ( { { __( 'Last Published' ) } ), - render: ( { item }: { item: SiteInfo } ) => + render: ( { item }: { item: SiteExcerptData } ) => item.options?.updated_at ? : '', enableHiding: false, enableSorting: false, @@ -185,7 +186,7 @@ const DotcomSitesDataViews = ( { { __( 'Stats' ) } ), - render: ( { item }: { item: SiteInfo } ) => , + render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, width: '80px', @@ -194,7 +195,7 @@ const DotcomSitesDataViews = ( { id: 'actions', // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. label: { __( 'Actions' ) }, - render: ( { item }: { item: SiteInfo } ) => , + render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, width: '48px', @@ -218,11 +219,11 @@ const DotcomSitesDataViews = ( { }, { id: addDummyDataViewPrefix( 'last-interacted' ), - // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. label: __( 'Last Interacted' ), render: () => null, enableHiding: false, enableSorting: true, + getValue: () => null, }, { id: addDummyDataViewPrefix( 'status' ), @@ -234,6 +235,7 @@ const DotcomSitesDataViews = ( { }, enableHiding: false, enableSorting: false, + getValue: () => null, }, ], [ diff --git a/client/hosting/sites/components/sites-dataviews/interfaces.ts b/client/hosting/sites/components/sites-dataviews/interfaces.ts deleted file mode 100644 index 12cbc0154eeb4e..00000000000000 --- a/client/hosting/sites/components/sites-dataviews/interfaces.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { SiteExcerptData } from '@automattic/sites'; - -export interface SiteInfo extends SiteExcerptData { - id: number; -} diff --git a/client/hosting/sites/components/sites-dataviews/sites-site-sort.tsx b/client/hosting/sites/components/sites-dataviews/sites-site-sort.tsx index ce2cf8e453e8b3..84aaacf363560f 100644 --- a/client/hosting/sites/components/sites-dataviews/sites-site-sort.tsx +++ b/client/hosting/sites/components/sites-dataviews/sites-site-sort.tsx @@ -31,20 +31,26 @@ export const SiteSort = ( { dataViewsState, setDataViewsState, }: SiteSortProps ) => { - const { field, direction } = dataViewsState.sort; - - const isDefault = removeDummyDataViewPrefix( field ) !== columnKey || ! field || ! direction; + const { field, direction } = dataViewsState.sort ?? {}; + const isDefault = ! field || removeDummyDataViewPrefix( field ) !== columnKey || ! direction; const setSort = () => { - const updatedSort = { ...dataViewsState.sort }; + let updatedSort = dataViewsState.sort; if ( isDefault ) { - updatedSort.field = addDummyDataViewPrefix( columnKey ); - updatedSort.direction = SORT_DIRECTION_ASC; + updatedSort = { + field: addDummyDataViewPrefix( columnKey ), + direction: SORT_DIRECTION_ASC, + }; } else if ( direction === SORT_DIRECTION_ASC ) { - updatedSort.direction = SORT_DIRECTION_DESC; + updatedSort = { + field: addDummyDataViewPrefix( columnKey ), + direction: SORT_DIRECTION_DESC, + }; } else if ( direction === SORT_DIRECTION_DESC ) { - updatedSort.field = addDummyDataViewPrefix( 'last-interacted' ); - updatedSort.direction = SORT_DIRECTION_DESC; + updatedSort = { + field: addDummyDataViewPrefix( 'last-interacted' ), + direction: SORT_DIRECTION_DESC, + }; } setDataViewsState( ( sitesViewState ) => ( { diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-sort/index.tsx b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-sort/index.tsx index f1e93fa002c206..3583d1007ec6be 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-sort/index.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-sort/index.tsx @@ -31,20 +31,24 @@ export default function SiteSort( { const { sort } = useContext( SitesOverviewContext ); const dispatch = useDispatch(); - const { field, direction } = sort; + const { field, direction } = sort ?? {}; const isDefault = field !== SITE_COLUMN_KEY_MAP?.[ columnKey ] || ! field || ! direction; const setSort = () => { - const updatedSort = { ...sort }; + let updatedSort = sort; if ( isDefault ) { - updatedSort.field = SITE_COLUMN_KEY_MAP?.[ columnKey ]; - updatedSort.direction = SORT_DIRECTION_ASC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_ASC, + }; } else if ( direction === SORT_DIRECTION_ASC ) { - updatedSort.direction = SORT_DIRECTION_DESC; + updatedSort = { + field: SITE_COLUMN_KEY_MAP?.[ columnKey ], + direction: SORT_DIRECTION_DESC, + }; } else if ( direction === SORT_DIRECTION_DESC ) { - updatedSort.field = ''; - updatedSort.direction = ''; + updatedSort = undefined; } dispatch( updateSort( updatedSort ) ); diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts index aea3382bcca177..739998c8bd70b5 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts @@ -246,7 +246,7 @@ export interface DashboardOverviewContextInterface { showOnlyFavorites: boolean; showOnlyDevelopmentSites: boolean; }; - sort: DashboardSortInterface; + sort?: DashboardSortInterface; showSitesDashboardV2: boolean; } diff --git a/client/state/jetpack-agency-dashboard/actions.ts b/client/state/jetpack-agency-dashboard/actions.ts index 11d5989087f41e..5f48ec9dbd7475 100644 --- a/client/state/jetpack-agency-dashboard/actions.ts +++ b/client/state/jetpack-agency-dashboard/actions.ts @@ -69,7 +69,7 @@ export const updateFilter = ( filter: AgencyDashboardFilterOption[] ) => () => { updateDashboardURLQueryArgs( { filter } ); }; -export const updateSort = ( sort: DashboardSortInterface ) => () => { +export const updateSort = ( sort?: DashboardSortInterface ) => () => { updateDashboardURLQueryArgs( { sort } ); }; From 7b7873dd3945b4628038ad6e79a155462449a6f0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 12:41:29 +0200 Subject: [PATCH 010/102] Remove status --- .../sections/sites/sites-dashboard-provider.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx index 6be4cc8d14c1de..a983780907a76e 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx @@ -92,15 +92,7 @@ export const SitesDashboardProvider = ( { field: DEFAULT_SORT_FIELD, direction: DEFAULT_SORT_DIRECTION, }; - initialDataViewsState.fields = [ - 'site', - 'status', - 'boost', - 'backup', - 'monitor', - 'scan', - 'plugins', - ]; + initialDataViewsState.fields = [ 'site', 'boost', 'backup', 'monitor', 'scan', 'plugins' ]; const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( { ...initialDataViewsState, From f94b890fc0485ce83c109dce264d6c7a686ffa4a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 12:41:40 +0200 Subject: [PATCH 011/102] More style fixes --- client/hosting/sites/components/dotcom-style.scss | 13 +++++++++---- client/hosting/sites/components/style.scss | 5 ----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 035a8dc5e6ea9c..de7f573beeac28 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -659,13 +659,18 @@ .dataviews-wrapper { width: 100%; - > * { - flex-grow: 1; - } - .dataviews-view-list { flex: 1; max-height: none; + + // Ideally instead of reusing the site name full field + // We should be setting a media field and a primary field. + .dataviews-view-list__media-wrapper { + display: none; + } + .dataviews-view-list__primary-field { + display: none; + } } .components-base-control { diff --git a/client/hosting/sites/components/style.scss b/client/hosting/sites/components/style.scss index 3c46c9d057350f..328e19eb3aca14 100644 --- a/client/hosting/sites/components/style.scss +++ b/client/hosting/sites/components/style.scss @@ -343,11 +343,6 @@ overflow-y: auto; max-height: calc(100vh - 300px); /* 300px is the size of all content above the dataview in list style, which includes our CTA elements, the pagination bottom bar, and an additional 20px margin. */ - li { - padding: 8px 24px; - border-bottom: 1px solid var(--color-accent-5); - } - .dataviews-view-list__fields { display: flex; justify-content: space-between; From da2e38e1b5930f43bc864bce38c2b6af82beb8ad Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 12:44:04 +0200 Subject: [PATCH 012/102] Remove patch --- ...press-dataviews-npm-0.4.1-2c01fa0792.patch | 87 ------------------- 1 file changed, 87 deletions(-) delete mode 100644 .yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch diff --git a/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch b/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch deleted file mode 100644 index ac1aef83914985..00000000000000 --- a/.yarn/patches/@wordpress-dataviews-npm-0.4.1-2c01fa0792.patch +++ /dev/null @@ -1,87 +0,0 @@ -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" -+ ); From 38b288c1223a5fa3f2ff390e3f8716b7c3d8bf46 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 12:51:52 +0200 Subject: [PATCH 013/102] Fix column widths --- .../sites/components/sites-dashboard.tsx | 36 ++++++++++++++++++- .../components/sites-dataviews/index.tsx | 30 +--------------- 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/client/hosting/sites/components/sites-dashboard.tsx b/client/hosting/sites/components/sites-dashboard.tsx index 7efd7ea8374e93..ff341dccf5b338 100644 --- a/client/hosting/sites/components/sites-dashboard.tsx +++ b/client/hosting/sites/components/sites-dashboard.tsx @@ -8,6 +8,8 @@ import { useSitesListSorting, } from '@automattic/sites'; import { GroupableSiteLaunchStatuses } from '@automattic/sites/src/use-sites-list-grouping'; +import { DESKTOP_BREAKPOINT, WIDE_BREAKPOINT } from '@automattic/viewport'; +import { useBreakpoint } from '@automattic/viewport-react'; import clsx from 'clsx'; import { translate } from 'i18n-calypso'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; @@ -97,7 +99,8 @@ const SitesDashboard = ( { selectedSiteFeaturePreview = undefined, }: SitesDashboardProps ) => { const [ initialSortApplied, setInitialSortApplied ] = useState( false ); - + const isWide = useBreakpoint( WIDE_BREAKPOINT ); + const isDesktop = useBreakpoint( DESKTOP_BREAKPOINT ); const { hasSitesSortingPreferenceLoaded, sitesSorting, onSitesSortingChange } = useSitesSorting(); const sitesFilterCallback = ( site: SiteExcerptData ) => { const { options } = site || {}; @@ -136,6 +139,15 @@ const SitesDashboard = ( { useShowSiteTransferredNotice(); const siteStatusGroups = useSiteStatusGroups(); + const getSiteNameColWidth = ( isDesktop: boolean, isWide: boolean ) => { + if ( isWide ) { + return '40%'; + } + if ( isDesktop ) { + return '50%'; + } + return '70%'; + }; // Create the DataViews state based on initial values const defaultDataViewsState = { @@ -153,6 +165,28 @@ const SitesDashboard = ( { ], selectedItem: selectedSite, type: selectedSite ? DATAVIEWS_LIST : DATAVIEWS_TABLE, + layout: { + styles: { + site: { + width: getSiteNameColWidth( isDesktop, isWide ), + }, + plan: { + width: '100px', + }, + status: { + width: '116px', + }, + 'last-publish': { + width: '120px', + }, + stats: { + width: '80px', + }, + actions: { + width: '48px', + }, + }, + }, } as DataViewsState; const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( defaultDataViewsState ); diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index d5119d8392a143..d89e59fecbf93f 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/client/hosting/sites/components/sites-dataviews/index.tsx @@ -1,5 +1,3 @@ -import { DESKTOP_BREAKPOINT, WIDE_BREAKPOINT } from '@automattic/viewport'; -import { useBreakpoint } from '@automattic/viewport-react'; import { useI18n } from '@wordpress/react-i18n'; import { useCallback, useEffect, useMemo, useState } from 'react'; import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews'; @@ -57,17 +55,6 @@ const DotcomSitesDataViews = ( { }: Props ) => { const { __ } = useI18n(); const userId = useSelector( getCurrentUserId ); - const isWide = useBreakpoint( WIDE_BREAKPOINT ); - const isDesktop = useBreakpoint( DESKTOP_BREAKPOINT ); - const getSiteNameColWidth = ( isDesktop: boolean, isWide: boolean ) => { - if ( isWide ) { - return '40%'; - } - if ( isDesktop ) { - return '50%'; - } - return '70%'; - }; const openSitePreviewPane = useCallback( ( site: SiteExcerptData ) => { @@ -130,7 +117,6 @@ const DotcomSitesDataViews = ( { { __( 'Site' ) } ), - width: getSiteNameColWidth( isDesktop, isWide ), getValue: ( { item }: { item: SiteExcerptData } ) => item.URL, render: ( { item }: { item: SiteExcerptData } ) => { return ; @@ -147,7 +133,6 @@ const DotcomSitesDataViews = ( { ), enableHiding: false, enableSorting: false, - width: '100px', }, { id: 'status', @@ -156,7 +141,6 @@ const DotcomSitesDataViews = ( { render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, - width: '116px', }, { id: 'last-publish', @@ -175,7 +159,6 @@ const DotcomSitesDataViews = ( { item.options?.updated_at ? : '', enableHiding: false, enableSorting: false, - width: '120px', }, { id: 'stats', @@ -189,7 +172,6 @@ const DotcomSitesDataViews = ( { render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, - width: '80px', }, { id: 'actions', @@ -198,7 +180,6 @@ const DotcomSitesDataViews = ( { render: ( { item }: { item: SiteExcerptData } ) => , enableHiding: false, enableSorting: false, - width: '48px', }, // Dummy fields to allow people to sort by them on mobile. { @@ -238,16 +219,7 @@ const DotcomSitesDataViews = ( { getValue: () => null, }, ], - [ - __, - openSitePreviewPane, - userId, - dataViewsState, - setDataViewsState, - isWide, - isDesktop, - siteStatusGroups, - ] + [ __, openSitePreviewPane, userId, dataViewsState, setDataViewsState, siteStatusGroups ] ); // Create the itemData packet state From 5b619860cb76e3d6ff9c25f5c7c68483854c2bca Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 13:15:55 +0200 Subject: [PATCH 014/102] Better styles --- client/components/dataviews/style.scss | 5 +++++ client/hosting/sites/components/dotcom-style.scss | 3 +-- .../sites-dataviews/dataviews-fields/site-field.tsx | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 6f93d575fe9524..4739f278d59c1c 100644 --- a/client/components/dataviews/style.scss +++ b/client/components/dataviews/style.scss @@ -80,6 +80,11 @@ .is-selected { background-color: var(--color-neutral-0); } + + // Needs to be moved upstream to the gutenberg repository. + .dataviews-view-list__item { + box-sizing: border-box; + } } .components-checkbox-control__input[type="checkbox"]:focus { diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index de7f573beeac28..9f86b38f54e349 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -206,7 +206,7 @@ } .sites-overview__content { - margin-top: 11px; + margin-top: 0; } @media (max-width: $break-wide) { @@ -419,7 +419,6 @@ } li { - border-bottom: 1px solid #f1f1f1 !important; cursor: pointer; } diff --git a/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx b/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx index 7deadde9cfe6a0..0b9c0c865929a1 100644 --- a/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx +++ b/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx @@ -35,7 +35,7 @@ type Props = { const SiteListTile = styled( ListTile )` gap: 0; margin-inline-end: 0; - width: 295px; + width: 280px; .preview-hidden & { gap: 12px; From 8e19870e0d07ee532b9380ee489f7fbeeca3d54f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 13:26:36 +0200 Subject: [PATCH 015/102] Fix empty properties section --- client/components/dataviews/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 4739f278d59c1c..7a4d59a8b6ccfc 100644 --- a/client/components/dataviews/style.scss +++ b/client/components/dataviews/style.scss @@ -204,3 +204,9 @@ display: none; } } + +// This should be moved to the gutenberg repository upstream. +// We should hide the "properties" section in the view config menu if empty. +.dataviews-settings-section:has(.dataviews-settings-section__content:empty) { + display: none; +} From 2b15db7cb0cbbc1b05e591653ce453ed61731f5c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2024 14:11:00 +0200 Subject: [PATCH 016/102] Fix scrolling and pagination --- .../items-dashboard/items-dataviews/index.tsx | 4 +-- .../items-dataviews/style.scss | 1 + .../sections/sites/sites-dashboard/style.scss | 29 +------------------ .../sections/sites/sites-dataviews/style.scss | 4 --- client/components/dataviews/style.scss | 5 ---- client/hosting/sites/components/style.scss | 27 ----------------- .../sites-overview/sites-dataviews/style.scss | 4 --- .../sites-overview/style-dashboard-v2.scss | 17 ----------- 8 files changed, 3 insertions(+), 88 deletions(-) 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 index 2c010d453c65c5..dd51405fc43d10 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx @@ -66,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 ) { diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss index a948592130a18c..f3e689f8fa5bf5 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss @@ -22,6 +22,7 @@ justify-content: space-between !important; padding: 12px 16px 12px 16px; margin-top: auto; + z-index: 1; .components-input-control__backdrop { border-color: var(--Gray-Gray-5, #dcdcde); diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss index 0633ebea2bdeab..2cb9666f34a867 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss @@ -221,26 +221,6 @@ overflow: hidden; } } - - .dataviews-view-table-wrapper { - flex: 1; - overflow-y: auto; - - table { - width: 100%; - max-width: 100vw; - } - - th[data-field-id="stats"], - th[data-field-id="boost"], - th[data-field-id="backup"], - th[data-field-id="monitor"], - th[data-field-id="scan"], - th[data-field-id="plugins"], - th[data-field-id="favorite"] { - display: none; - } - } } @media (max-width: $break-wide) { @@ -265,12 +245,6 @@ } @media (min-width: $break-large) { - &.sites-dashboard__layout { - .dataviews-view-table-wrapper { - overflow-y: auto; - } - } - &.sites-dashboard__layout:not(.preview-hidden) { .sites-overview { padding: 0; @@ -565,7 +539,6 @@ flex-direction: column; height: 100%; width: 100%; - overflow: hidden; > div[data-wp-component="VStack"] { align-items: stretch; @@ -597,7 +570,7 @@ display: flex; flex: 1; height: 100%; - overflow: hidden; + overflow: auto; } } diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/style.scss b/client/a8c-for-agencies/sections/sites/sites-dataviews/style.scss index 437ac2693715d2..667ff66fbccaf6 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/style.scss +++ b/client/a8c-for-agencies/sections/sites/sites-dataviews/style.scss @@ -243,10 +243,6 @@ .dataviews-loading p { display: none; } - - .dataviews-view-table-wrapper { - height: 0 !important; - } } .dataviews-wrapper:has(.dataviews-no-results) { diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 7a4d59a8b6ccfc..5f490f21e06ad9 100644 --- a/client/components/dataviews/style.scss +++ b/client/components/dataviews/style.scss @@ -189,11 +189,6 @@ .dataviews-loading p { display: none; } - - .dataviews-view-table-wrapper { - height: 0 !important; - } - .dataviews-pagination { display: none; } diff --git a/client/hosting/sites/components/style.scss b/client/hosting/sites/components/style.scss index 328e19eb3aca14..02ad98ee69b104 100644 --- a/client/hosting/sites/components/style.scss +++ b/client/hosting/sites/components/style.scss @@ -53,11 +53,6 @@ padding-inline-end: 16px; text-align: end; } - - .dataviews-view-table-wrapper { - overflow: auto; - } - @media (min-width: $break-large) { background: inherit; @@ -204,10 +199,6 @@ display: none; } - .dataviews-view-table-wrapper td:nth-child(n+2):nth-child(-n+5) { - display: none; - } - tr td:first-child { padding-inline-start: 8px; } @@ -225,24 +216,6 @@ overflow: hidden; } } - - .dataviews-view-table-wrapper { - flex: 1; - overflow-y: auto; - - table { - width: 100%; - max-width: 100vw; - } - - th[data-field-id="plan"], - th[data-field-id="status"], - th[data-field-id="last-publish"], - th[data-field-id="stats"] { - display: none; - } - - } } @media (max-width: $break-wide) { diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/style.scss b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/style.scss index 4b0b202a9a5a5b..88d357e374de56 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/style.scss +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/style.scss @@ -249,10 +249,6 @@ .dataviews-loading p { display: none; } - - .dataviews-view-table-wrapper { - height: 0 !important; - } } .dataviews-wrapper:has(.dataviews-no-results) { diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/style-dashboard-v2.scss b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/style-dashboard-v2.scss index ca703e7d1f720e..5c85fa9a4d87e9 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/style-dashboard-v2.scss +++ b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/style-dashboard-v2.scss @@ -146,23 +146,6 @@ tr td:last-child { padding-right: 8px; } - - .dataviews-view-table-wrapper { - table { - width: 100%; - max-width: 100vw; - } - - th[data-field-id="stats"], - th[data-field-id="boost"], - th[data-field-id="backup"], - th[data-field-id="monitor"], - th[data-field-id="scan"], - th[data-field-id="plugins"], - th[data-field-id="favorite"] { - display: none; - } - } } @media (max-width: $break-wide) { From 21e1730523aef41133f1daa5e0310308adbafb88 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 16 Aug 2024 14:30:45 -0400 Subject: [PATCH 017/102] Hide overflow and align padding to improve mobile view. --- client/components/dataviews/style.scss | 4 ++-- client/hosting/sites/components/sites-dataviews/style.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss index 5f490f21e06ad9..a8daf4914383f3 100644 --- a/client/components/dataviews/style.scss +++ b/client/components/dataviews/style.scss @@ -36,7 +36,7 @@ } th { - padding: 13px 4px 13px 48px; + padding: 13px 4px 13px 16px; border-bottom: 1px solid var(--color-neutral-5); font-size: rem(13px); font-weight: 400; @@ -44,7 +44,7 @@ } td { - padding: 16px 4px 16px 48px; + padding: 16px 4px 16px 16px; border-bottom: 1px solid var(--color-neutral-5); vertical-align: middle; diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss index c6fc14864ea5db..aadd003df388c2 100644 --- a/client/hosting/sites/components/sites-dataviews/style.scss +++ b/client/hosting/sites/components/sites-dataviews/style.scss @@ -15,6 +15,7 @@ flex-direction: row; padding-bottom: 8px; padding-top: 8px; + overflow: hidden; .button { margin: 0; From ad599401e5b5cc5972833f2be6f76d94d8f83897 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 16 Aug 2024 16:14:24 -0400 Subject: [PATCH 018/102] Override launch nag and site url link styles. --- client/hosting/sites/components/sites-dataviews/style.scss | 4 ++-- client/sites-dashboard/components/sites-site-launch-nag.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss index aadd003df388c2..67894b0bae0058 100644 --- a/client/hosting/sites/components/sites-dataviews/style.scss +++ b/client/hosting/sites/components/sites-dataviews/style.scss @@ -41,8 +41,8 @@ white-space: nowrap; } -.sites-dataviews__site-url, -.sites-dataviews__site-wp-admin-url { +.dataviews-view-table .sites-dataviews__site-url, +.dataviews-view-table .sites-dataviews__site-wp-admin-url { color: var(--color-neutral-70); font-size: rem(14px); font-weight: 400; diff --git a/client/sites-dashboard/components/sites-site-launch-nag.tsx b/client/sites-dashboard/components/sites-site-launch-nag.tsx index cb477210416be4..05387929222fa3 100644 --- a/client/sites-dashboard/components/sites-site-launch-nag.tsx +++ b/client/sites-dashboard/components/sites-site-launch-nag.tsx @@ -37,6 +37,7 @@ const SiteLaunchNagLink = styled.a( { fontSize: '12px', lineHeight: '16px', whiteSpace: 'nowrap', + color: 'var(--color-link) !important', } ); const SiteLaunchNagText = styled.span( { From ff750f5db9c412f98dd6c240ff5dffbcb03b2c20 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 16 Aug 2024 16:31:37 -0400 Subject: [PATCH 019/102] Override styles for the plan renew reminder. --- client/sites-dashboard/components/sites-plan-renew-nag.tsx | 4 +++- client/sites-dashboard/components/sites-site-plan.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/sites-dashboard/components/sites-plan-renew-nag.tsx b/client/sites-dashboard/components/sites-plan-renew-nag.tsx index 0bc361577f6bd4..72fae1cb4131f1 100644 --- a/client/sites-dashboard/components/sites-plan-renew-nag.tsx +++ b/client/sites-dashboard/components/sites-plan-renew-nag.tsx @@ -24,9 +24,11 @@ const PlanRenewContainer = styled.div( { const PlanRenewLink = styled.a( { whiteSpace: 'nowrap', - textDecoration: 'underline', + textDecoration: 'underline !important', fontSize: '12px', + fontWeight: '400 !important', paddingTop: '2px', + color: '#3858e9 !important', } ); const IconContainer = styled.div( { diff --git a/client/sites-dashboard/components/sites-site-plan.tsx b/client/sites-dashboard/components/sites-site-plan.tsx index 7fff2ea43d6e04..79dcacbd3b80cd 100644 --- a/client/sites-dashboard/components/sites-site-plan.tsx +++ b/client/sites-dashboard/components/sites-site-plan.tsx @@ -6,6 +6,7 @@ import type { SiteExcerptData } from '@automattic/sites'; const SitePlanContainer = styled.div` display: inline; + overflow: hidden; > * { vertical-align: middle; line-height: normal; From 6c987fdbdb788aab24c99b9c11c70ac30c2d4584 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 16 Aug 2024 17:32:44 -0400 Subject: [PATCH 020/102] Fix type error. --- .../components/sites-plan-renew-nag.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/sites-dashboard/components/sites-plan-renew-nag.tsx b/client/sites-dashboard/components/sites-plan-renew-nag.tsx index 72fae1cb4131f1..8f2561b7ea1237 100644 --- a/client/sites-dashboard/components/sites-plan-renew-nag.tsx +++ b/client/sites-dashboard/components/sites-plan-renew-nag.tsx @@ -22,14 +22,14 @@ const PlanRenewContainer = styled.div( { marginTop: '-2px', } ); -const PlanRenewLink = styled.a( { - whiteSpace: 'nowrap', - textDecoration: 'underline !important', - fontSize: '12px', - fontWeight: '400 !important', - paddingTop: '2px', - color: '#3858e9 !important', -} ); +const PlanRenewLink = styled.a` + white-space: nowrap; + text-decoration: underline !important; + font-size: 12px; + font-weight: 400 !important; + padding-top: 2px; + color: var( --color-link ) !important; +`; const IconContainer = styled.div( { color: '#ea303f', From cbc04ba354bb99bc372d79cd15a3c6c1c45d3b8c Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 16 Aug 2024 17:57:38 -0400 Subject: [PATCH 021/102] Style search input. --- client/hosting/sites/components/dotcom-style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 9f86b38f54e349..63c218d5ae5f44 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -232,7 +232,7 @@ } // Styles for actions (search, filters). -.dataviews-filters__view-actions { +.main.a4a-layout.sites-dashboard.sites-dashboard__layout { @include search-control-wpcom-styles; .components-search-control .components-input-control__container { From 86f3680ecd373910bf1c2cc51433567321b35922 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Mon, 19 Aug 2024 10:24:36 -0400 Subject: [PATCH 022/102] Remove dotcom-specific search styles. --- .../sites/components/dotcom-style.scss | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 63c218d5ae5f44..8e2899cb78c775 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -231,36 +231,6 @@ } } -// Styles for actions (search, filters). -.main.a4a-layout.sites-dashboard.sites-dashboard__layout { - @include search-control-wpcom-styles; - - .components-search-control .components-input-control__container { - width: 100%; - height: 40px; - flex: 1 1 auto; - flex-direction: row; - align-items: center; - // Places search above filters - z-index: 1; - margin-top: 2px; - - .components-input-control__input { - padding: 0 0 0 10px; - font-size: $font-body-small; - - &::placeholder { - color: var(--studio-gray-40); - } - } - - // Search icon - .components-input-control__suffix { - margin-right: 4px; - } - } -} - // Style the sortable table headers. .wpcom-site .dataviews-view-table .components-button.is-tertiary { &:active:not(:disabled), From 59c05aa2ea2a9987915283e516a2465c3ac6dab1 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Mon, 19 Aug 2024 15:12:47 -0400 Subject: [PATCH 023/102] Update the view fields based on useBreakpoint. --- client/hosting/sites/components/sites-dashboard.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/hosting/sites/components/sites-dashboard.tsx b/client/hosting/sites/components/sites-dashboard.tsx index ff341dccf5b338..100cfced867eef 100644 --- a/client/hosting/sites/components/sites-dashboard.tsx +++ b/client/hosting/sites/components/sites-dashboard.tsx @@ -149,13 +149,20 @@ const SitesDashboard = ( { return '70%'; }; + // Limit fields on breakpoints smaller than 960px wide. + const desktopFields = [ 'site', 'plan', 'status', 'last-publish', 'stats', 'actions' ]; + const mobileFields = [ 'site', 'actions' ]; + + const getFieldsByBreakpoint = ( isDesktop: boolean ) => + isDesktop ? desktopFields : mobileFields; + // Create the DataViews state based on initial values const defaultDataViewsState = { ...initialDataViewsState, page, perPage, search: search ?? '', - fields: [ 'site', 'plan', 'status', 'last-publish', 'stats', 'actions' ], + fields: getFieldsByBreakpoint( isDesktop ), filters: [ { field: addDummyDataViewPrefix( 'status' ), From bf4bf433b763ad307bcad23938f289d6eac063ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 20 Aug 2024 10:31:07 +0200 Subject: [PATCH 024/102] Consider list layout as well --- client/hosting/sites/components/sites-dataviews/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss index 67894b0bae0058..0e7fd27a3090af 100644 --- a/client/hosting/sites/components/sites-dataviews/style.scss +++ b/client/hosting/sites/components/sites-dataviews/style.scss @@ -41,6 +41,8 @@ white-space: nowrap; } +.dataviews-view-list .sites-dataviews__site-url, +.dataviews-view-list .sites-dataviews__site-wp-admin-url, .dataviews-view-table .sites-dataviews__site-url, .dataviews-view-table .sites-dataviews__site-wp-admin-url { color: var(--color-neutral-70); From 2859c38424135d33d9eae2dfda6d3a608e2dc207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 20 Aug 2024 12:18:12 +0200 Subject: [PATCH 025/102] Update header to label in a4a fields --- .../sections/sites/sites-dataviews/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx index c2054addf10554..6b74c0b16ae5c4 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx @@ -42,7 +42,8 @@ const SitesDataViews = ( { } return data?.total || 0; } )(); - const sitesPerPage = dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; + const sitesPerPage = + dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; const totalPages = Math.ceil( totalSites / sitesPerPage ); const sites = useFormattedSites( data?.sites ?? [] ); @@ -177,7 +178,7 @@ const SitesDataViews = ( { { id: 'boost', // @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements. - header: ( + label: ( <> Date: Thu, 22 Aug 2024 10:05:20 +0200 Subject: [PATCH 026/102] Make status filter primary --- client/hosting/sites/components/sites-dataviews/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index d89e59fecbf93f..e3987256682095 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/client/hosting/sites/components/sites-dataviews/index.tsx @@ -213,6 +213,7 @@ const DotcomSitesDataViews = ( { elements: siteStatusGroups, filterBy: { operators: [ 'is' ], + isPrimary: true, }, enableHiding: false, enableSorting: false, From 0a4e78548ee679bc8ecc072aa7fb3e064fdef3b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 22 Aug 2024 13:17:40 +0200 Subject: [PATCH 027/102] Fix color for disabled dataviews buttons --- .../items-dashboard/items-dataviews/style.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss index f3e689f8fa5bf5..7753fd32a54b42 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/style.scss @@ -36,3 +36,16 @@ bottom: 0; } } + +/* + * This is a hotfix for the the button disabled state. + * The button is getting a color that is almost identical to the active state. + * It needs to be looked at and fixed separately. + * See https://github.com/Automattic/wp-calypso/pull/93503#issuecomment-2304078241 + */ +.dataviews-wrapper .components-button.is-tertiary:visited, +.dataviews-wrapper .components-button.is-tertiary[disabled], +.dataviews-wrapper .components-button.is-tertiary:disabled, +.dataviews-wrapper .components-button.is-tertiary.disabled { + color: #949494; // Same as core https://github.com/WordPress/gutenberg/blob/2cbba93a29600f09f6f95c09f690576b90e79e9f/packages/components/src/button/style.scss#L125 +} From 6af0b8494c8a82431b422bccd9323b2db40fa449 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Thu, 22 Aug 2024 16:51:33 -0400 Subject: [PATCH 028/102] Fix code style issue. --- .../sites/features/jetpack/jetpack-sites-dataviews.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index 41c113f9983725..2be4f348aba4c2 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -48,7 +48,8 @@ export const JetpackSitesDataViews = ( { } return data?.total || 0; } )(); - const sitesPerPage = dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; + const sitesPerPage = + dataViewsState.perPage && dataViewsState.perPage > 0 ? dataViewsState.perPage : 20; const totalPages = Math.ceil( totalSites / sitesPerPage ); const possibleSites = data?.sites ?? []; From f78f6948824c72380bbe5f35380552d2d807c4b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 08:44:25 +0200 Subject: [PATCH 029/102] Make status filter primary in a4a --- .../sections/sites/features/jetpack/jetpack-sites-dataviews.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index 2be4f348aba4c2..ed1fc083e59772 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -150,6 +150,7 @@ export const JetpackSitesDataViews = ( { ], filterBy: { operators: [ 'is' ], + isPrimary: true, }, enableHiding: false, enableSorting: false, From 495d6dc082c4235e1c8a4fc965be10d91bc0d42b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:08:32 +0200 Subject: [PATCH 030/102] Update list of fields for a4a dataviews --- .../sections/sites/sites-dashboard-provider.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx index a983780907a76e..02d4865a45d344 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx @@ -92,7 +92,17 @@ export const SitesDashboardProvider = ( { field: DEFAULT_SORT_FIELD, direction: DEFAULT_SORT_DIRECTION, }; - initialDataViewsState.fields = [ 'site', 'boost', 'backup', 'monitor', 'scan', 'plugins' ]; + initialDataViewsState.fields = [ + 'site', + 'stats', + 'boost', + 'backup', + 'monitor', + 'scan', + 'plugins', + 'favorite', + 'actions', + ]; const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( { ...initialDataViewsState, From 7a9c97fb267889079f00c5ba77806c38940e3361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:25:10 +0200 Subject: [PATCH 031/102] Remove spacing that affect filter toggel --- .../sections/sites/sites-dashboard/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss index 2cb9666f34a867..6be45705d8737e 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/style.scss @@ -483,11 +483,6 @@ } } - .components-base-control { - width: 86%; - margin-right: 6px; - } - .site-preview__open { display: none; } From 063739cb823ed822335aa613dfa2757d4a8279d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:57:29 +0200 Subject: [PATCH 032/102] Extract defaultLayouts to ItemsData --- .../components/items-dashboard/items-dataviews/index.tsx | 2 +- .../components/items-dashboard/items-dataviews/interfaces.ts | 1 + .../sections/sites/features/jetpack/jetpack-sites-dataviews.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) 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 index dd51405fc43d10..3dca637f0336fa 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx @@ -101,7 +101,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP } onChangeSelection={ data.onSelectionChange } onChangeView={ ( newView ) => data.setDataViewsState( () => newView ) } - defaultLayouts={ { table: {} } } + defaultLayouts={ data.defaultLayouts } actions={ data.actions } isLoading={ isLoading } /> diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts index 4c7b5fe6801eb8..a4e3edf7336b94 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts @@ -12,6 +12,7 @@ export interface ItemsDataViewsType< T > { setDataViewsState: ( callback: ( prevState: DataViewsState ) => DataViewsState ) => void; dataViewsState: DataViewsState; onSelectionChange?: ( item: T[] ) => void; + defaultLayouts?: any; // TODO: improve this type } export interface DataViewsPaginationInfo { diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index ed1fc083e59772..a283262c23d457 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -475,6 +475,7 @@ export const JetpackSitesDataViews = ( { setDataViewsState: setDataViewsState, dataViewsState: dataViewsState, onSelectionChange: ( [ item ]: SiteData[] ) => openSitePreviewPane( item.site.value ), + defaultLayouts: { table: {} }, } ); useEffect( () => { From c24f9a8f01a48904fd8a2f679707d565c487a88d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:58:57 +0200 Subject: [PATCH 033/102] Remove field list --- .../sections/sites/features/jetpack/jetpack-sites-dataviews.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx index a283262c23d457..56d783b2fa4a05 100644 --- a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx +++ b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx @@ -87,7 +87,6 @@ export const JetpackSitesDataViews = ( { ...prevState, selectedItem: site, type: DATAVIEWS_LIST, - fields: [ 'site' ], } ) ); }, [ isNotProduction, setDataViewsState ] From 43390808fcfc0d8d10d8769e0eee624029327801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:13:44 +0200 Subject: [PATCH 034/102] 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. --- .../sites/sites-dashboard-provider.tsx | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx index 02d4865a45d344..fb7ba2b5ce5b2f 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx @@ -9,7 +9,7 @@ import { DashboardSortInterface, Site, } from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/types'; -import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD, filtersMap } from './constants'; +import { filtersMap } from './constants'; import SitesDashboardContext from './sites-dashboard-context'; import type { Filter } from '@wordpress/dataviews'; @@ -88,24 +88,19 @@ export const SitesDashboardProvider = ( { setCurrentLicenseInfo( null ); }; - initialDataViewsState.sort = { - field: DEFAULT_SORT_FIELD, - direction: DEFAULT_SORT_DIRECTION, - }; - initialDataViewsState.fields = [ - 'site', - 'stats', - 'boost', - 'backup', - 'monitor', - 'scan', - 'plugins', - 'favorite', - 'actions', - ]; - const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( { ...initialDataViewsState, + fields: [ + 'site', + 'stats', + 'boost', + 'backup', + 'monitor', + 'scan', + 'plugins', + 'favorite', + 'actions', + ], page: currentPage, search: searchQuery, sort, From dde58eee7809d1a953f36106d5721e381f414b72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:26:36 +0200 Subject: [PATCH 035/102] Only have table enabled for users --- .../import-from-wpcom-modal/table-content.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx index 7a42324fb5a329..df030a8c74c6fd 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx +++ b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx @@ -67,6 +67,7 @@ export default function WPCOMSitesTableContent( { items, fields }: Props ) { actions: [], dataViewsState: dataViewsState, setDataViewsState: setDataViewsState, + defaultLayouts: { table: {} }, } } /> ); From 61c7698d2939282633e566a6a1ee080155b43f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:36:03 +0200 Subject: [PATCH 036/102] Rename header to labels --- .../import-from-wpcom-modal/wpcom-sites-table.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx index d31f4f8cfc2f37..9b4a298921eb99 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx +++ b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx @@ -116,7 +116,7 @@ export default function WPCOMSitesTable( { ? [ { id: 'site', - header: ( + label: (
{ item.site }
), - width: '100%', enableHiding: false, enableSorting: false, }, @@ -150,7 +149,7 @@ export default function WPCOMSitesTable( { : [ { id: 'site', - header: ( + label: (
), - 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 } ) => , - width: '100%', enableHiding: false, enableSorting: false, }, @@ -203,6 +199,8 @@ export default function WPCOMSitesTable( { { isPending ? ( ) : ( + // @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 ) }
From 678d794d508efc52aef7237672c92442e9676d77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:48:05 +0200 Subject: [PATCH 037/102] Hide filter toggle --- .../import-from-wpcom-modal/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/style.scss b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/style.scss index 3909965e9e339e..a8199dc00a6e6b 100644 --- a/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/style.scss +++ b/client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/style.scss @@ -34,6 +34,15 @@ width: 800px; padding: 40px; } + + // TODO: to remove when using dataviews@4.2.0. + // This is because a bug in dataviews that shows + // the filter toggle even if there are no filters. + // The table in the modal does not declare any filters. + .dataviews-filters__visibility-toggle { + display: none !important; + } + } .import-from-wpcom-modal__title { From ce3a01a811979f5577c303f858edc0d90c5433cc Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Fri, 23 Aug 2024 13:30:45 -0400 Subject: [PATCH 038/102] Remove search control width to prevent new line. --- client/hosting/sites/components/dotcom-style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 8e2899cb78c775..936b7c5a5cbdb3 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -641,10 +641,6 @@ display: none; } } - - .components-base-control { - width: 85%; - } } .sites-a8c-for-agencies-banner-container { From b475361bf5258d12c9930b96575d080355a4f98a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 26 Aug 2024 10:23:36 +0200 Subject: [PATCH 039/102] Only have table enabled for hosting/sites --- client/hosting/sites/components/sites-dataviews/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx index e3987256682095..a435e5b56ef691 100644 --- a/client/hosting/sites/components/sites-dataviews/index.tsx +++ b/client/hosting/sites/components/sites-dataviews/index.tsx @@ -233,6 +233,7 @@ const DotcomSitesDataViews = ( { setDataViewsState: setDataViewsState, dataViewsState: dataViewsState, pagination: paginationInfo, + defaultLayouts: { table: {} }, } ); // Update the itemData packet From 274d3ce15b5608feff68d00750078ea428b2f299 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 26 Aug 2024 13:13:38 +0200 Subject: [PATCH 040/102] TeamList: only have table enabled --- .../a8c-for-agencies/sections/team/primary/team-list/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx index 7ed8dffd2fc9be..28a6af18fd69e0 100644 --- a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx +++ b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx @@ -156,6 +156,7 @@ export default function TeamList() { actions: [], setDataViewsState: setDataViewsState, dataViewsState: dataViewsState, + defaultLayouts: { table: {} }, } } /> From fbf38fbaaedf355ae142f1e7b0981ffa506d992d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 26 Aug 2024 13:17:20 +0200 Subject: [PATCH 041/102] TeamList: hide filter toggle --- .../sections/team/primary/team-list/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/style.scss b/client/a8c-for-agencies/sections/team/primary/team-list/style.scss index ae7f11d374d0d5..8cef543ca4371b 100644 --- a/client/a8c-for-agencies/sections/team/primary/team-list/style.scss +++ b/client/a8c-for-agencies/sections/team/primary/team-list/style.scss @@ -12,6 +12,14 @@ padding: 16px 48px; } + + // TODO: to remove when using dataviews@4.2.0. + // This is because a bug in dataviews that shows + // the filter toggle even if there are no filters. + // The table in the modal does not declare any filters. + .dataviews-filters__visibility-toggle { + display: none !important; + } } From a55433fe662052e893da896afe32f1ee97a600de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 26 Aug 2024 13:21:49 +0200 Subject: [PATCH 042/102] TeamList: switch header to label --- .../sections/team/primary/team-list/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx index 28a6af18fd69e0..b4abb973b163e1 100644 --- a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx +++ b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx @@ -74,7 +74,7 @@ export default function TeamList() { () => [ { id: 'user', - header: translate( 'User' ).toUpperCase(), + label: translate( 'User' ).toUpperCase(), render: ( { item }: { item: TeamMember } ): ReactNode => { return ; }, @@ -85,7 +85,7 @@ export default function TeamList() { ? [ { id: 'role', - header: translate( 'Role' ).toUpperCase(), + label: translate( 'Role' ).toUpperCase(), render: ( { item }: { item: TeamMember } ): ReactNode => { return ; }, @@ -94,7 +94,7 @@ export default function TeamList() { }, { id: 'added-date', - header: translate( 'Added' ).toUpperCase(), + label: translate( 'Added' ).toUpperCase(), render: ( { item }: { item: TeamMember } ): ReactNode => { return ; }, @@ -105,7 +105,7 @@ export default function TeamList() { : [] ), { id: 'actions', - header: '', + label: '', render: ( { item }: { item: TeamMember } ): ReactNode => { return ( Date: Mon, 26 Aug 2024 13:40:01 +0200 Subject: [PATCH 043/102] TeamList: move field.width to layout.styles.fieldId.width --- .../items-dashboard/items-dataviews/interfaces.ts | 1 + .../sections/team/primary/team-list/index.tsx | 12 ++++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts index a4e3edf7336b94..e8010d398991c6 100644 --- a/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts +++ b/client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts @@ -27,4 +27,5 @@ export interface DataViewsSort { export type DataViewsState = View & { selectedItem?: any | undefined; + layout?: any; // TODO: improve this type. }; diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx index b4abb973b163e1..457350b33a17bb 100644 --- a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx +++ b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx @@ -31,7 +31,16 @@ export default function TeamList() { const isDesktop = useDesktopBreakpoint(); - const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( initialDataViewsState ); + const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( { + ...initialDataViewsState, + layout: { + styles: { + actions: { + width: isDesktop ? '10%' : undefined, + }, + }, + }, + } ); const { members, hasMembers, isPending, refetch } = useMemberList(); @@ -114,7 +123,6 @@ export default function TeamList() { /> ); }, - width: isDesktop ? '40%' : undefined, enableHiding: false, enableSorting: false, }, From 03d37fe0eb89594b8fae5ccdcd746f358f05f499 Mon Sep 17 00:00:00 2001 From: cleacos Date: Mon, 26 Aug 2024 17:13:07 +0100 Subject: [PATCH 044/102] A4A: Remove the .is-hiding-navigation style, the navigation bar is not used. --- .../a8c-for-agencies/sections/sites/sites-dashboard/index.tsx | 4 +--- .../sections/sites/sites-dashboard/style.scss | 4 ---- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx index 5e07ee609ae84e..951a2f9363b489 100644 --- a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx +++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx @@ -274,9 +274,7 @@ export default function SitesDashboard() { } } > Date: Mon, 26 Aug 2024 17:54:24 +0100 Subject: [PATCH 045/102] A4A-Referrals: Hide the DataViews toolbar for Referrals tables --- .../sections/referrals/referrals-list/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss b/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss index dbbd4e1d3e87cc..0b22a3ba1c2c5f 100644 --- a/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss +++ b/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss @@ -13,3 +13,9 @@ } } + +// For now, we don't need the DataViews toolbar in this context. +.dataviews__view-actions, +.dataviews-view-list__media-wrapper { + display: none !important; +} From c627fab783e71fdee4cf85a4c4e901fe8a1624a3 Mon Sep 17 00:00:00 2001 From: cleacos Date: Mon, 26 Aug 2024 18:13:51 +0100 Subject: [PATCH 046/102] A4A-Team: Hide the DataViews toolbar for Team list table --- .../sections/team/primary/team-list/style.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/style.scss b/client/a8c-for-agencies/sections/team/primary/team-list/style.scss index 8cef543ca4371b..31976c0c205bcd 100644 --- a/client/a8c-for-agencies/sections/team/primary/team-list/style.scss +++ b/client/a8c-for-agencies/sections/team/primary/team-list/style.scss @@ -13,11 +13,10 @@ } - // TODO: to remove when using dataviews@4.2.0. - // This is because a bug in dataviews that shows - // the filter toggle even if there are no filters. - // The table in the modal does not declare any filters. - .dataviews-filters__visibility-toggle { + // For now, we don't need the DataViews toolbar in this context. + // todo: Remove this when we need to use the sorting, filtering or searching functionalities + .dataviews__view-actions, + .dataviews-view-list__media-wrapper { display: none !important; } } From 2d1edd0d6274dafc10677834a32f8e1b2be20bc1 Mon Sep 17 00:00:00 2001 From: cleacos Date: Mon, 26 Aug 2024 18:31:34 +0100 Subject: [PATCH 047/102] A4A-Referrals: Hide the DataViews toolbar for ReferralDetails table --- .../sections/referrals/referral-details/style.scss | 7 +++++++ .../sections/referrals/referrals-list/style.scss | 1 + 2 files changed, 8 insertions(+) diff --git a/client/a8c-for-agencies/sections/referrals/referral-details/style.scss b/client/a8c-for-agencies/sections/referrals/referral-details/style.scss index 68943618d6c528..8552489f63619a 100644 --- a/client/a8c-for-agencies/sections/referrals/referral-details/style.scss +++ b/client/a8c-for-agencies/sections/referrals/referral-details/style.scss @@ -29,3 +29,10 @@ width: auto; } } + +// For now, we don't need the DataViews toolbar in this context. +// todo: Remove this when we need to use the sorting, filtering or searching functionalities.dataviews__view-actions, +.dataviews__view-actions, +.dataviews-view-list__media-wrapper { + display: none !important; +} diff --git a/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss b/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss index 0b22a3ba1c2c5f..7b500f8092f848 100644 --- a/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss +++ b/client/a8c-for-agencies/sections/referrals/referrals-list/style.scss @@ -15,6 +15,7 @@ } // For now, we don't need the DataViews toolbar in this context. +// todo: Remove this when we need to use the sorting, filtering or searching functionalities.dataviews__view-actions, .dataviews__view-actions, .dataviews-view-list__media-wrapper { display: none !important; From 5c5e5c766c93277b5c848bc812002b38638db3c5 Mon Sep 17 00:00:00 2001 From: cleacos Date: Mon, 26 Aug 2024 18:34:14 +0100 Subject: [PATCH 048/102] A4A-Referrals: Set the defaultLayouts to table --- .../sections/referrals/common/referral-details-table/index.tsx | 1 + .../a8c-for-agencies/sections/referrals/referrals-list/index.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx b/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx index c2a5b15834eeb1..3ba1c697da01c6 100644 --- a/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx +++ b/client/a8c-for-agencies/sections/referrals/common/referral-details-table/index.tsx @@ -28,6 +28,7 @@ export default function ReferralDetailsTable( { items, fields }: Props ) { actions: [], dataViewsState: dataViewsState, setDataViewsState: setDataViewsState, + defaultLayouts: { table: {} }, } } />
diff --git a/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx b/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx index faf014892e6433..d8c0fd935c2fdb 100644 --- a/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx +++ b/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx @@ -236,6 +236,7 @@ export default function ReferralList( { actions: [], setDataViewsState: setDataViewsState, dataViewsState: dataViewsState, + defaultLayouts: { table: {} }, } } />
From 5470013ebdda07815ea0dbc6523b0ae4c5e93b1a Mon Sep 17 00:00:00 2001 From: cleacos Date: Mon, 26 Aug 2024 18:36:14 +0100 Subject: [PATCH 049/102] A4A-Referrals: Use label instead of header in fields definition. --- .../referrals/referral-details/purchases.tsx | 8 ++++---- .../sections/referrals/referrals-list/index.tsx | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/client/a8c-for-agencies/sections/referrals/referral-details/purchases.tsx b/client/a8c-for-agencies/sections/referrals/referral-details/purchases.tsx index 15159c54a51770..30628bab840cee 100644 --- a/client/a8c-for-agencies/sections/referrals/referral-details/purchases.tsx +++ b/client/a8c-for-agencies/sections/referrals/referral-details/purchases.tsx @@ -30,7 +30,7 @@ export default function ReferralPurchases( { purchases }: { purchases: ReferralP () => [ { id: 'product-details', - header: translate( 'Product Details' ).toUpperCase(), + label: translate( 'Product Details' ).toUpperCase(), getValue: () => '-', render: ( { item }: { item: ReferralPurchase } ): ReactNode => { return ; @@ -40,7 +40,7 @@ export default function ReferralPurchases( { purchases }: { purchases: ReferralP }, { id: 'assigned-to', - header: translate( 'Assigned to' ).toUpperCase(), + label: translate( 'Assigned to' ).toUpperCase(), getValue: () => '-', render: ( { item }: { item: ReferralPurchase } ): ReactNode => { return ( @@ -57,7 +57,7 @@ export default function ReferralPurchases( { purchases }: { purchases: ReferralP }, { id: 'date', - header: translate( 'Assigned on' ).toUpperCase(), + label: translate( 'Assigned on' ).toUpperCase(), getValue: () => '-', render: ( { item }: { item: ReferralPurchase } ): ReactNode => { return ; @@ -67,7 +67,7 @@ export default function ReferralPurchases( { purchases }: { purchases: ReferralP }, { id: 'total', - header: translate( 'Total' ).toUpperCase(), + label: translate( 'Total' ).toUpperCase(), getValue: () => '-', render: ( { item }: { item: ReferralPurchase } ): ReactNode => { return ; diff --git a/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx b/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx index d8c0fd935c2fdb..f1296a0e06da90 100644 --- a/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx +++ b/client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx @@ -49,7 +49,7 @@ export default function ReferralList( { // Show the client column as a button on mobile { id: 'client', - header: translate( 'Client' ).toUpperCase(), + label: translate( 'Client' ).toUpperCase(), getValue: () => '-', render: ( { item }: { item: Referral } ): ReactNode => (