From 43c70b394dacad6f61cf505b555c4ab07bdfe61b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 4 Sep 2023 15:30:22 +0300 Subject: [PATCH 01/17] Experiment DataTable component(pages+templates list) --- package-lock.json | 46 ++++ .../block-library/src/template-part/index.js | 16 ++ packages/edit-site/package.json | 1 + .../src/components/datatable/context.js | 8 + .../datatable-global-search-input.js | 18 ++ .../datatable/datatable-pagination.js | 83 +++++++ .../datatable/datatable-provider.js | 73 ++++++ .../components/datatable/datatable-rows.js | 130 ++++++++++ .../datatable/datatable-text-filter.js | 43 ++++ .../src/components/datatable/index.js | 5 + .../src/components/page-main/index.js | 3 + .../src/components/page-pages/index.js | 232 ++++++++++++++++++ .../src/components/page-templates/index.js | 132 ++++++---- .../index.js | 19 ++ .../sidebar-navigation-screen-pages/index.js | 11 +- .../edit-site/src/components/sidebar/index.js | 4 + .../edit-site/src/utils/get-is-list-page.js | 5 +- 17 files changed, 778 insertions(+), 51 deletions(-) create mode 100644 packages/edit-site/src/components/datatable/context.js create mode 100644 packages/edit-site/src/components/datatable/datatable-global-search-input.js create mode 100644 packages/edit-site/src/components/datatable/datatable-pagination.js create mode 100644 packages/edit-site/src/components/datatable/datatable-provider.js create mode 100644 packages/edit-site/src/components/datatable/datatable-rows.js create mode 100644 packages/edit-site/src/components/datatable/datatable-text-filter.js create mode 100644 packages/edit-site/src/components/datatable/index.js create mode 100644 packages/edit-site/src/components/page-pages/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pages-list/index.js diff --git a/package-lock.json b/package-lock.json index f5bc339dc15fef..3e61da1f729668 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13942,6 +13942,37 @@ "resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.1.0.tgz", "integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==" }, + "node_modules/@tanstack/react-table": { + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.3.tgz", + "integrity": "sha512-Ng9rdm3JPoSCi6cVZvANsYnF+UoGVRxflMb270tVj0+LjeT/ZtZ9ckxF6oLPLcKesza6VKBqtdF9mQ+vaz24Aw==", + "dependencies": { + "@tanstack/table-core": "8.9.3" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.3.tgz", + "integrity": "sha512-NpHZBoHTfqyJk0m/s/+CSuAiwtebhYK90mDuf5eylTvgViNOujiaOaxNDxJkQQAsVvHWZftUGAx1EfO1rkKtLg==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", @@ -56752,6 +56783,7 @@ "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "^7.16.0", + "@tanstack/react-table": "^8.9.3", "@wordpress/a11y": "file:../a11y", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", @@ -67814,6 +67846,19 @@ "resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.1.0.tgz", "integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==" }, + "@tanstack/react-table": { + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.3.tgz", + "integrity": "sha512-Ng9rdm3JPoSCi6cVZvANsYnF+UoGVRxflMb270tVj0+LjeT/ZtZ9ckxF6oLPLcKesza6VKBqtdF9mQ+vaz24Aw==", + "requires": { + "@tanstack/table-core": "8.9.3" + } + }, + "@tanstack/table-core": { + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.3.tgz", + "integrity": "sha512-NpHZBoHTfqyJk0m/s/+CSuAiwtebhYK90mDuf5eylTvgViNOujiaOaxNDxJkQQAsVvHWZftUGAx1EfO1rkKtLg==" + }, "@testing-library/dom": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", @@ -69876,6 +69921,7 @@ "version": "file:packages/edit-site", "requires": { "@babel/runtime": "^7.16.0", + "@tanstack/react-table": "^8.9.3", "@wordpress/a11y": "file:../a11y", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js index c64f093427f95f..0b6ae67e7d843d 100644 --- a/packages/block-library/src/template-part/index.js +++ b/packages/block-library/src/template-part/index.js @@ -86,5 +86,21 @@ export const init = () => { } ); + // TODO: of course remove this... Just testing to add the filter once. + // addFilter( + // 'siteEditor.pageListColumns', + // 'my/unique-filter', + // ( columns ) => { + // return [ + // { + // header: 'Status', + // id: 'status', + // cell: ( props ) => props.row.original.status, + // }, + // ...columns, + // ]; + // } + // ); + return initBlock( { name, metadata, settings } ); }; diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 3441b79ff9dd4f..1c88ecdecec86b 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -27,6 +27,7 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.16.0", + "@tanstack/react-table": "^8.9.3", "@wordpress/a11y": "file:../a11y", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", diff --git a/packages/edit-site/src/components/datatable/context.js b/packages/edit-site/src/components/datatable/context.js new file mode 100644 index 00000000000000..3e2aac8ca540c8 --- /dev/null +++ b/packages/edit-site/src/components/datatable/context.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +const DataTableContext = createContext( {} ); +export const useDataTableContext = () => useContext( DataTableContext ); +export default DataTableContext; diff --git a/packages/edit-site/src/components/datatable/datatable-global-search-input.js b/packages/edit-site/src/components/datatable/datatable-global-search-input.js new file mode 100644 index 00000000000000..418841ee31b02f --- /dev/null +++ b/packages/edit-site/src/components/datatable/datatable-global-search-input.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import DataTableTextFilter from './datatable-text-filter'; +import { useDataTableContext } from './context'; + +// type DataTableTextFilterProps = { +// className: string; +// searchLabel: string; +// onChange: any; +// }; + +export default function DataTableGlobalSearchInput( props ) { + const table = useDataTableContext(); + return ( + + ); +} diff --git a/packages/edit-site/src/components/datatable/datatable-pagination.js b/packages/edit-site/src/components/datatable/datatable-pagination.js new file mode 100644 index 00000000000000..1f9bba55c53794 --- /dev/null +++ b/packages/edit-site/src/components/datatable/datatable-pagination.js @@ -0,0 +1,83 @@ +/** + * WordPress dependencies + */ +import { + chevronRightSmall, + chevronRight, + chevronLeftSmall, + chevronLeft, +} from '@wordpress/icons'; +import { + Button, + SelectControl, + __experimentalHStack as HStack, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { useDataTableContext } from './context'; + +// type DataTablePaginationProps = { +// className?: string; +// totalItems: number; +// }; + +// TODO: break into smaller components. +// TODO: translatable and a11y +export default function DataTablePagination( { + // If passed, use it as it's for controlled pagination. + totalItems, +} ) { + const table = useDataTableContext(); + return ( + + + + { `${ + totalItems || table.getCoreRowModel().rows.length + } items` } + + From 3a17d35cecb8e5e38203319e8aea65b3d34479ff Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 15 Sep 2023 17:27:19 +0100 Subject: [PATCH 10/17] Remove margin on per page control --- packages/edit-site/src/components/datatable/datatable-actions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/datatable/datatable-actions.js b/packages/edit-site/src/components/datatable/datatable-actions.js index 47b12faaa126fb..4145c625737f18 100644 --- a/packages/edit-site/src/components/datatable/datatable-actions.js +++ b/packages/edit-site/src/components/datatable/datatable-actions.js @@ -39,6 +39,7 @@ export function DataTablePageSizeControl() { const table = useDataTableContext(); return ( Date: Fri, 15 Sep 2023 17:44:43 +0100 Subject: [PATCH 11/17] Rows per page prefix --- .../edit-site/src/components/datatable/datatable-actions.js | 6 +++++- packages/edit-site/src/components/datatable/style.scss | 5 +++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/datatable/datatable-actions.js b/packages/edit-site/src/components/datatable/datatable-actions.js index 4145c625737f18..c68e65bb208282 100644 --- a/packages/edit-site/src/components/datatable/datatable-actions.js +++ b/packages/edit-site/src/components/datatable/datatable-actions.js @@ -6,6 +6,7 @@ import { Icon, SelectControl, privateApis as componentsPrivateApis, + __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, } from '@wordpress/components'; import { chevronRightSmall, @@ -37,11 +38,14 @@ const PAGE_SIZE_VALUES = [ 2, 5, 20, 50 ]; export function DataTablePageSizeControl() { const table = useDataTableContext(); + const prefix = __( 'Rows per page:' ); return ( { prefix } } value={ table.getState().pagination.pageSize } options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( { value: pageSize, diff --git a/packages/edit-site/src/components/datatable/style.scss b/packages/edit-site/src/components/datatable/style.scss index 15c4acb6703469..5ea4ee9a4bf185 100644 --- a/packages/edit-site/src/components/datatable/style.scss +++ b/packages/edit-site/src/components/datatable/style.scss @@ -4,3 +4,8 @@ padding: $grid-unit-10; } } + +.edit-site-table__per-page-control-prefix { + color: $gray-700; + text-wrap: nowrap; +} \ No newline at end of file From e5d3677323520fd30336ab8c5c722cb95087c500 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 15 Sep 2023 17:45:11 +0100 Subject: [PATCH 12/17] Typo --- .../edit-site/src/components/datatable/datatable-actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/datatable/datatable-actions.js b/packages/edit-site/src/components/datatable/datatable-actions.js index c68e65bb208282..b3a3c28f9db7e1 100644 --- a/packages/edit-site/src/components/datatable/datatable-actions.js +++ b/packages/edit-site/src/components/datatable/datatable-actions.js @@ -71,7 +71,7 @@ function DataTablePageSizeMenu() { } > - { __( 'Row per page' ) } + { __( 'Rows per page' ) } } > From 8ab62f9ff2a753fb143f9e7c81758ed239eb525b Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 15 Sep 2023 19:45:06 +0100 Subject: [PATCH 13/17] Make prefix a label --- .../edit-site/src/components/datatable/datatable-actions.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/datatable/datatable-actions.js b/packages/edit-site/src/components/datatable/datatable-actions.js index b3a3c28f9db7e1..6a49b27c43b905 100644 --- a/packages/edit-site/src/components/datatable/datatable-actions.js +++ b/packages/edit-site/src/components/datatable/datatable-actions.js @@ -42,10 +42,8 @@ export function DataTablePageSizeControl() { return ( { prefix } } + prefix={ { prefix } } value={ table.getState().pagination.pageSize } options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( { value: pageSize, From 9aa10afff1b3ce1fc9e6ea59ed41856e0fa0f74e Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 15 Sep 2023 20:44:29 +0100 Subject: [PATCH 14/17] Update AddedBy() --- packages/edit-site/src/components/list/added-by.js | 12 ++++-------- packages/edit-site/src/components/list/style.scss | 8 ++++---- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js index 4edc41b0518626..bb67fbcfa43821 100644 --- a/packages/edit-site/src/components/list/added-by.js +++ b/packages/edit-site/src/components/list/added-by.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Icon, __experimentalHStack as HStack } from '@wordpress/components'; +import { __experimentalHStack as HStack } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useState } from '@wordpress/element'; @@ -180,20 +180,16 @@ export default function AddedBy( { postId, showIsCustomizedInfo = true, } ) { - const { text, icon, imageUrl, isCustomized } = useAddedBy( + const { text, imageUrl, isCustomized } = useAddedBy( postType, postId ); return ( - { imageUrl ? ( + { imageUrl ? - ) : ( -
- -
- ) } + : '' } { text } { showIsCustomizedInfo && isCustomized && ( diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index 0979b7ac7e3a6a..e14cb8602adbd3 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -165,12 +165,12 @@ overflow: hidden; border-radius: 100%; background: $gray-800; - width: $grid-unit-40; - height: $grid-unit-40; + width: $grid-unit-30; + height: $grid-unit-30; img { - width: $grid-unit-40; - height: $grid-unit-40; + width: $grid-unit-30; + height: $grid-unit-30; object-fit: cover; opacity: 0; transition: opacity 0.1s linear; From 53603846edf3874c409e01a8237a8fbc4a219302 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 18 Sep 2023 13:07:29 +0300 Subject: [PATCH 15/17] small cleanup --- .../components/datatable/datatable-actions.js | 37 +++++++++++-------- .../datatable/datatable-provider.js | 2 + .../components/datatable/datatable-rows.js | 15 +++++++- .../edit-site/src/components/list/added-by.js | 9 +---- .../src/components/page-pages/index.js | 12 ++---- 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/edit-site/src/components/datatable/datatable-actions.js b/packages/edit-site/src/components/datatable/datatable-actions.js index 6a49b27c43b905..07b15642d6261c 100644 --- a/packages/edit-site/src/components/datatable/datatable-actions.js +++ b/packages/edit-site/src/components/datatable/datatable-actions.js @@ -43,7 +43,14 @@ export function DataTablePageSizeControl() { { prefix } } + prefix={ + + { prefix } + + } value={ table.getState().pagination.pageSize } options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( { value: pageSize, @@ -114,10 +121,10 @@ function DataTableColumnsVisibilityMenu() { } > - { hideableColumns?.map( ( column, i ) => { + { hideableColumns?.map( ( column ) => { return ( } @@ -135,6 +142,16 @@ function DataTableColumnsVisibilityMenu() { ); } +// function ResetControl( { onSelect } ) { +// return ( +// +// +// { __( 'Reset' ) } +// +// +// ); +// } + export default function DataTableActions( { className, // TODO: check if we need something fixed here and use props @@ -146,10 +163,7 @@ export default function DataTableActions( { label={ __( 'Actions' ) } className={ className } trigger={ - @@ -161,15 +175,6 @@ export default function DataTableActions( { ) } - { /* - Do we need a Reset after all? If yes, what should reset? - TODO: disable or not render if nothing to reset.. - table.resetColumnVisibility() } - > - { __( 'Reset' ) } - - */ } ); } diff --git a/packages/edit-site/src/components/datatable/datatable-provider.js b/packages/edit-site/src/components/datatable/datatable-provider.js index 2d32d7f3491351..553ebc1f4205fa 100644 --- a/packages/edit-site/src/components/datatable/datatable-provider.js +++ b/packages/edit-site/src/components/datatable/datatable-provider.js @@ -69,6 +69,8 @@ export default function DataTable( { data, columns, options = {}, children } ) { ), enableSorting: false, enableHiding: false, + width: 35, + maxWidth: 35, }, ...columns, ]; diff --git a/packages/edit-site/src/components/datatable/datatable-rows.js b/packages/edit-site/src/components/datatable/datatable-rows.js index 9c6d08fb00e425..862880f8bb076d 100644 --- a/packages/edit-site/src/components/datatable/datatable-rows.js +++ b/packages/edit-site/src/components/datatable/datatable-rows.js @@ -51,6 +51,14 @@ function DataTableRows( { header.isPlaceholder ? null : ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions @@ -92,9 +100,12 @@ function DataTableRows( { flexRender( diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js index bb67fbcfa43821..3bef4e90f64d1b 100644 --- a/packages/edit-site/src/components/list/added-by.js +++ b/packages/edit-site/src/components/list/added-by.js @@ -180,16 +180,11 @@ export default function AddedBy( { postId, showIsCustomizedInfo = true, } ) { - const { text, imageUrl, isCustomized } = useAddedBy( - postType, - postId - ); + const { text, imageUrl, isCustomized } = useAddedBy( postType, postId ); return ( - { imageUrl ? - - : '' } + { !! imageUrl && } { text } { showIsCustomizedInfo && isCustomized && ( diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 871223b32596b8..760537915a0941 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -128,9 +128,7 @@ export default function PagePages() { cell: ( props ) => { const page = props.row.original; return ( - + ); }, - maxSize: 400, + maxWidth: 400, sortingFn: 'alphanumeric', enableHiding: false, - // TODO: check about footers.. - // footer: ( props ) => props.column.id, }, { header: __( 'Author' ), @@ -215,9 +211,7 @@ export default function PagePages() { meta: { resetQuery: setResetQuery }, } } > - + From b3e1ef11d06eb954b94f4623dd0c2570fc43d40e Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 20 Sep 2023 14:34:23 +0100 Subject: [PATCH 16/17] compact search input --- .../edit-site/src/components/datatable/datatable-text-filter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/datatable/datatable-text-filter.js b/packages/edit-site/src/components/datatable/datatable-text-filter.js index 0937472489efc9..b2b1ea4f3dbdc0 100644 --- a/packages/edit-site/src/components/datatable/datatable-text-filter.js +++ b/packages/edit-site/src/components/datatable/datatable-text-filter.js @@ -38,6 +38,7 @@ export default function DataTableTextFilter( { value={ search } label={ searchLabel } placeholder={ searchLabel } + size='compact' /> ); } From 13f2dc9eb8d136af7de71fd659c0f944d16b5226 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 22 Sep 2023 12:50:12 +0300 Subject: [PATCH 17/17] lint issue --- .../datatable/datatable-text-filter.js | 2 +- .../src/components/datatable/style.scss | 2 +- .../src/components/page-templates/index.js | 17 +++++++++-------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/datatable/datatable-text-filter.js b/packages/edit-site/src/components/datatable/datatable-text-filter.js index b2b1ea4f3dbdc0..23002d1b783b84 100644 --- a/packages/edit-site/src/components/datatable/datatable-text-filter.js +++ b/packages/edit-site/src/components/datatable/datatable-text-filter.js @@ -38,7 +38,7 @@ export default function DataTableTextFilter( { value={ search } label={ searchLabel } placeholder={ searchLabel } - size='compact' + size="compact" /> ); } diff --git a/packages/edit-site/src/components/datatable/style.scss b/packages/edit-site/src/components/datatable/style.scss index 5ea4ee9a4bf185..063c7cbfcc7050 100644 --- a/packages/edit-site/src/components/datatable/style.scss +++ b/packages/edit-site/src/components/datatable/style.scss @@ -8,4 +8,4 @@ .edit-site-table__per-page-control-prefix { color: $gray-700; text-wrap: nowrap; -} \ No newline at end of file +} diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 28c9a65ef126df..8f6d16d463fde0 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -6,7 +6,7 @@ import { __experimentalHeading as Heading, __experimentalVStack as VStack, __experimentalHStack as HStack, - __experimentalText as Text + __experimentalText as Text, } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState, useMemo } from '@wordpress/element'; @@ -37,9 +37,7 @@ function TemplateTitle( props ) { const template = props.row.original; const { isCustomized } = useAddedBy( template.type, template.id ); return ( - + { isCustomized && ( - + { template.type === 'wp_template' ? _x( 'Customized', 'template' ) : _x( 'Customized', 'template part' ) } @@ -143,9 +146,7 @@ export default function PageTemplates() { isTemplateRevertable( template ), } } > - +