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

Jump to bottom

DataViews: Update all templates page #55848

Merged
merged 8 commits into from
Nov 9, 2023
Merged

DataViews: Update all templates page #55848

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e84460
[Data views]: Update `all templates` page
ntsekouras Nov 3, 2023
c183519
feedback part 1
ntsekouras Nov 7, 2023
dfe075b
simple remove action
ntsekouras Nov 7, 2023
14d39b9
Allow actions to use a Modal
ntsekouras Nov 8, 2023
885cdea
support only list view for first iteration
ntsekouras Nov 8, 2023
d9cb65d
remove leftovers since only supporting list view type
ntsekouras Nov 8, 2023
7f8ee09
refactor item actions
ntsekouras Nov 9, 2023
a99c4d4
fix action item on click callback
ntsekouras Nov 9, 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
2 changes: 2 additions & 0 deletions 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 @@ -43,6 +43,7 @@ export default function DataViews( {
data,
isLoading = false,
paginationInfo,
supportedViewTypes,
} ) {
const ViewComponent = viewTypeMap[ view.type ];
const _fields = useMemo( () => {
Expand Down Expand Up @@ -74,6 +75,7 @@ export default function DataViews( {
fields={ fields }
view={ view }
onChangeView={ onChangeView }
supportedViewTypes={ supportedViewTypes }
/>
</HStack>
</HStack>
Expand Down
76 changes: 63 additions & 13 deletions packages/edit-site/src/components/dataviews/item-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,67 @@ import {
MenuGroup,
MenuItem,
Button,
Modal,
__experimentalHStack as HStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { useMemo, useState } from '@wordpress/element';
import { moreVertical } from '@wordpress/icons';

function PrimaryActionTrigger( { action, onClick } ) {
return (
<Button
label={ action.label }
icon={ action.icon }
isDestructive={ action.isDestructive }
size="compact"
onClick={ onClick }
/>
);
}

function SecondaryActionTrigger( { action, onClick } ) {
return (
<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
{ action.label }
</MenuItem>
);
}

function MaybeWithModal( { action, item } ) {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const actionTriggerProps = {
action,
onClick: action.modalProps ? setIsModalOpen : action.perform,
};
const ActionTrigger = action.isPrimary
? PrimaryActionTrigger
: SecondaryActionTrigger;
if ( ! action.modalProps ) {
return <ActionTrigger { ...actionTriggerProps } />;
}
const { ModalContent, ...modalProps } = action.modalProps;
return (
<>
<ActionTrigger { ...actionTriggerProps } />
{ isModalOpen && (
<Modal
{ ...modalProps }
onRequestClose={ () => {
setIsModalOpen( false );
} }
__experimentalHideHeader={ ! modalProps.title }
>
<ModalContent
item={ item }
setIsModalOpen={ setIsModalOpen }
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
/>
</Modal>
) }
</>
);
}

export default function ItemActions( { item, actions } ) {
const { primaryActions, secondaryActions } = useMemo( () => {
return actions.reduce(
Expand All @@ -38,27 +93,22 @@ export default function ItemActions( { item, actions } ) {
<HStack justify="flex-end">
{ !! primaryActions.length &&
primaryActions.map( ( action ) => (
<Button
label={ action.label }
<MaybeWithModal
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
key={ action.id }
icon={ action.icon }
onClick={ () => action.perform( item ) }
isDestructive={ action.isDestructive }
size="compact"
action={ action }
item={ item }
/>
) ) }
{ !! secondaryActions.length && (
<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
{ () => (
<MenuGroup>
{ secondaryActions.map( ( action ) => (
<MenuItem
<MaybeWithModal
key={ action.id }
onClick={ () => action.perform( item ) }
isDestructive={ action.isDestructive }
>
{ action.label }
</MenuItem>
action={ action }
item={ item }
/>
) ) }
</MenuGroup>
) }
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
td,
th {
padding: $grid-unit-15;
&:last-child {
[data-field-id="actions"] {
text-align: right;
}
}
Expand Down
28 changes: 23 additions & 5 deletions packages/edit-site/src/components/dataviews/view-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,17 @@ const availableViews = [
},
];

function ViewTypeMenu( { view, onChangeView } ) {
const activeView = availableViews.find( ( v ) => view.type === v.id );
function ViewTypeMenu( { view, onChangeView, supportedViewTypes } ) {
Copy link
Member

Choose a reason for hiding this comment

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

I only have naming suggestions:

  • Using "layout" instead of "view type" everywhere:
    • We expose it as "Layout" in the UI, so it's better to be coherent with that – it also communicates intent better than type, IMO.
    • Some changes would be: ViewTypeMenu to LayoutMenu, availableViews to availableLayouts, etc.
    • I understand there's previous code, so unrelated changes could be done separately, not in this PR.
  • supportedViewTypes prop to layouts. Introduced in this PR, so we can do it here already.

let _availableViews = availableViews;
if ( supportedViewTypes ) {
Copy link
Member

Choose a reason for hiding this comment

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

What do you think of reusing the same array as in?

if ( layouts ) {
  avaliableLayouts = availableLayouts.filter( ... );
}

An alternative would be to do the following name changes:

  • availableViews => layouts
  • _availableViews => availableLayouts

Copy link
Member

Choose a reason for hiding this comment

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

I actually like the alternative naming best (layouts/availableLayouts).

Copy link
Member

Choose a reason for hiding this comment

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

Ah, but then it conflicts with the prop. Perhaps?

let availableLayouts = defaultLayouts;
if ( layouts ) {
  availableLayouts = defaultLayouts.filter( ... );
}

Copy link
Member

Choose a reason for hiding this comment

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

Naming 😅

Copy link
Contributor

Choose a reason for hiding this comment

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

We do have view type in some places style, we might need to think that properly. I'm not entirely sure "layout" is the right word in the "code" at least. For user facing things it's fine. But I kind of like the "block" / "block type" and "view" / "view type" parallel.

Anyway, we need to make a decision and stick with it but it's probably one for a separate PR.

_availableViews = _availableViews.filter( ( _view ) =>
supportedViewTypes.includes( _view.id )
);
}
if ( _availableViews.length === 1 ) {
return null;
}
const activeView = _availableViews.find( ( v ) => view.type === v.id );
return (
<DropdownSubMenuV2
trigger={
Expand All @@ -61,7 +70,7 @@ function ViewTypeMenu( { view, onChangeView } ) {
</DropdownSubMenuTriggerV2>
}
>
{ availableViews.map( ( availableView ) => {
{ _availableViews.map( ( availableView ) => {
return (
<DropdownMenuItemV2
key={ availableView.id }
Expand Down Expand Up @@ -265,7 +274,12 @@ function SortMenu( { fields, view, onChangeView } ) {
);
}

export default function ViewActions( { fields, view, onChangeView } ) {
export default function ViewActions( {
fields,
view,
onChangeView,
supportedViewTypes,
} ) {
return (
<DropdownMenuV2
label={ __( 'Actions' ) }
Expand All @@ -277,7 +291,11 @@ export default function ViewActions( { fields, view, onChangeView } ) {
}
>
<DropdownMenuGroupV2>
<ViewTypeMenu view={ view } onChangeView={ onChangeView } />
<ViewTypeMenu
view={ view }
onChangeView={ onChangeView }
supportedViewTypes={ supportedViewTypes }
/>
<SortMenu
fields={ fields }
view={ view }
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/dataviews/view-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ function ViewList( {
* @return {Array} The transformed TanStack column filters.
*/
const toTanStackColumnFilters = ( filters ) =>
filters.map( ( filter ) => ( {
filters?.map( ( filter ) => ( {
[ filter.field + ':' + filter.operator ]: filter.value,
} ) );

Expand Down Expand Up @@ -475,6 +475,7 @@ function ViewList( {
header.column.columnDef
.maxWidth || undefined,
} }
data-field-id={ header.id }
>
<HeaderMenu
dataView={ dataView }
Expand Down
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/page-main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
import PagePatterns from '../page-patterns';
import PageTemplateParts from '../page-template-parts';
import PageTemplates from '../page-templates';
import DataviewsTemplates from '../page-templates/dataviews-templates';
import PagePages from '../page-pages';
import { unlock } from '../../lock-unlock';

Expand All @@ -20,7 +21,11 @@ export default function PageMain() {
} = useLocation();

if ( path === '/wp_template/all' ) {
return <PageTemplates />;
return window?.__experimentalAdminViews ? (
<DataviewsTemplates />
) : (
<PageTemplates />
);
} else if ( path === '/wp_template_part/all' ) {
return <PageTemplateParts />;
} else if ( path === '/patterns' ) {
Expand Down
Loading
Loading