Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews: Allow actions to be provided declaratively as a prop #55192

Merged
merged 4 commits into from
Oct 11, 2023
Merged

DataViews: Allow actions to be provided declaratively as a prop #55192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ac4f7b
DataViews: Allow actions to be provided declaratively as a prop
youknowriad Oct 10, 2023
cae8597
Restore PageActions component
youknowriad Oct 10, 2023
6171469
Rename variable
youknowriad Oct 10, 2023
e85d96a
Fix typo
youknowriad Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions packages/edit-site/src/components/actions/trash-post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/**
* WordPress dependencies
*/
import { useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { store as coreStore } from '@wordpress/core-data';
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
import { useMemo } from '@wordpress/element';

export default function useMoveToTrashAction() {
const { createSuccessNotice, createErrorNotice } =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking the actions would only be responsible for interacting with the data (remove, edit, etc.) and they'd have success and failure callbacks for the UI to handle them as it wishes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's hard for me at this point to know what actions are going to be about. I'm guessing actions can be anything that takes the current "item" as argument and do anything:

  • Export
  • Duplicate
  • Edit
  • Open modals (rename)
  • Download

I think it's very hard to predict what actions would want to have access to and what flows they will trigger.

Copy link

@spencerfinnell spencerfinnell Oct 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree -- I think it makes sense to let each action handle the complete process (including showing/changing UI) for the time being until more patterns are recognized.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actions will need to do more and in follow ups we will probably need to change label to be a component to be able to render modals, etc..

useDispatch( noticesStore );
const { deleteEntityRecord } = useDispatch( coreStore );

return useMemo(
() => ( {
id: 'move-to-trash',
label: __( 'Move to Trash' ),
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
async perform( post ) {
try {
await deleteEntityRecord(
'postType',
post.type,
post.id,
{},
{ throwOnError: true }
);
createSuccessNotice(
sprintf(
/* translators: The page's title. */
__( '"%s" moved to the Trash.' ),
decodeEntities( post.title.rendered )
),
{
type: 'snackbar',
id: 'edit-site-page-trashed',
}
);
} catch ( error ) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __(
'An error occurred while moving the page to the trash.'
);

createErrorNotice( errorMessage, { type: 'snackbar' } );
}
},
isDesctructive: true,
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
} ),
[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
);
}
51 changes: 50 additions & 1 deletion packages/edit-site/src/components/dataviews/dataviews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ import {
import {
__experimentalVStack as VStack,
__experimentalHStack as HStack,
VisuallyHidden,
DropdownMenu,
MenuGroup,
MenuItem,
} from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -24,8 +30,10 @@ import ListView from './list-view';
import { Pagination } from './pagination';
import ViewActions from './view-actions';
import TextFilter from './text-filter';
import { moreVertical } from '@wordpress/icons';

export default function DataViews( {
actions,
data,
fields,
view,
Expand All @@ -34,9 +42,50 @@ export default function DataViews( {
paginationInfo,
options: { pageCount },
} ) {
const columns = useMemo( () => {
const _columns = [ ...fields ];
if ( actions && actions.length ) {
_columns.push( {
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
id: 'actions',
cell: ( props ) => {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
>
{ () => (
<MenuGroup>
{ actions.map( ( action ) => (
<MenuItem
key={ action.id }
onClick={ () =>
action.perform(
props.row.original
)
}
isDestructive={
action.isDesctructive
}
>
{ action.label }
</MenuItem>
) ) }
</MenuGroup>
) }
</DropdownMenu>
);
},
enableHiding: false,
} );
}

return _columns;
}, [ fields, actions ] );

const dataView = useReactTable( {
data,
columns: fields,
columns,
manualSorting: true,
manualFiltering: true,
manualPagination: true,
Expand Down
8 changes: 1 addition & 7 deletions packages/edit-site/src/components/page-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons';
*/
import TrashPageMenuItem from './trash-page-menu-item';

export default function PageActions( {
postId,
className,
toggleProps,
onRemove,
} ) {
export default function PageActions( { postId, toggleProps, onRemove } ) {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
className={ className }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems PageActions with the className property was introduced a while ago at 375b16f Probably best to leave the component as it is?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not used in any of the usage of PageActions. a bit of cleanup :)

toggleProps={ toggleProps }
>
{ () => (
Expand Down
18 changes: 6 additions & 12 deletions packages/edit-site/src/components/page-pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
import {
VisuallyHidden,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
} from '@wordpress/components';
Expand All @@ -18,8 +17,8 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
*/
import Page from '../page';
import Link from '../routes/link';
import PageActions from '../page-actions';
import { DataViews } from '../dataviews';
import useTrashPostAction from '../actions/trash-post';

const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};
Expand Down Expand Up @@ -134,27 +133,22 @@ export default function PagePages() {
postStatuses[ props.row.original.status ] ??
props.row.original.status,
},
{
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
id: 'actions',
cell: ( props ) => {
const page = props.row.original;
return <PageActions postId={ page.id } />;
},
enableHiding: false,
},
],
[ postStatuses ]
);

const trashPostAction = useTrashPostAction();
const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );

// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
return (
<Page title={ __( 'Pages' ) }>
<DataViews
paginationInfo={ paginationInfo }
fields={ fields }
actions={ actions }
data={ pages || EMPTY_ARRAY }
isLoading={ isLoadingPages }
fields={ fields }
view={ view }
onChangeView={ setView }
options={ {
Expand Down
Loading