Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Unify segment listing notices with automation listing

Browse Source 
[MAILPOET-5395]
This commit is contained in:
Jan Jakes
2024-04-09 16:48:21 +02:00
committed by Aschepikov
parent b2186232a9
commit c4bfc02d1d
6 changed files with 33 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
View File

@ -39,27 +39,10 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
gap: 16px;
grid-template-columns: 120px auto auto;
grid-template-rows: auto auto;
padding: 0 16px 16px;
.mailpoet-segments-listing-bulk-actions {
grid-column: 1/2;
grid-row: 2/2;
}
.mailpoet-segments-listing-notices__notice-list {
grid-column: 1/4;
grid-row: 1/1;
.components-notice {
margin: 0;
}
}
grid-template-columns: 120px auto;
padding: 16px;
.mailpoet-segments-listing-search {
grid-column: 2/3;
grid-row: 2/2;
max-width: 430px;
}

3
mailpoet/assets/js/src/segments/dynamic/list.tsx
View File

@ -2,6 +2,7 @@ import { HashRouter } from 'react-router-dom';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { ListingTabs } from './list/listing-tabs';
import { Notices } from './list/notices';
import * as ROUTES from '../routes';
import { plusIcon } from '../../common/button/icon/plus';
import { PageHeader } from '../../common/page-header';
@ -15,6 +16,8 @@ export function DynamicSegmentList(): JSX.Element {
return (
<HashRouter>
<TopBarWithBeamer hideScreenOptions />
<Notices />
<PageHeader heading={__('Segments', 'mailpoet')}>
<Button
href={`#${ROUTES.DYNAMIC_SEGMENT_TEMPLATES}`}

2
mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
View File

@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
import { DynamicSegment, DynamicSegmentAction } from 'segments/types';
import { getRow } from 'segments/dynamic/list/get-row';
import { BulkActions } from './bulk-actions';
import { DynamicSegmentsListNotices } from './notices';
import { ActionConfirm } from './action-confirm';
import { useSegmentsQuery, updateSegmentsQuery } from './query';
import useDebouncedInput from '../../../common/use-debounced-input';
@ -143,7 +142,6 @@ export function ListingTabContent({ tab }: ListingTableProps): JSX.Element {
return (
<>
<div className="mailpoet-segments-listing-header">
<DynamicSegmentsListNotices />
<BulkActions
tab={tab}
onClick={(selected, action) => {

44
mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
View File

@ -1,10 +1,8 @@
import { NoticeList, SnackbarList } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Notice } from '../../../notices/notice';
// See: https://github.com/WordPress/gutenberg/blob/5be0ec4153c3adf9f0f2513239f4f7a358ba7948/packages/editor/src/components/editor-notices/index.js
export function DynamicSegmentsListNotices(): JSX.Element {
export function Notices(): JSX.Element {
const { notices } = useSelect(
(select) => ({
notices: select(noticesStore).getNotices(),
@ -22,24 +20,30 @@ export function DynamicSegmentsListNotices(): JSX.Element {
({ isDismissible, type }) => !isDismissible && type === 'default',
);
const snackbarNotices = notices.filter(({ type }) => type === 'snackbar');
return (
<>
<NoticeList
notices={nonDismissibleNotices}
className="mailpoet-segments-listing-notices__notice-list"
/>
<NoticeList
notices={dismissibleNotices}
className="mailpoet-segments-listing-notices__notice-list"
onRemove={removeNotice}
/>
<SnackbarList
notices={snackbarNotices}
className="mailpoet-segments-listing-notices__notice-list"
onRemove={removeNotice}
/>
{nonDismissibleNotices
.reverse()
.map(({ id, status, content, __unstableHTML }) => (
<Notice key={id} renderInPlace type={status} timeout={false}>
{__unstableHTML ?? <p>{content}</p>}
</Notice>
))}
{dismissibleNotices
.reverse()
.map(({ id, status, content, __unstableHTML }) => (
<Notice
key={id}
type={status}
renderInPlace
timeout={false}
closable
onClose={() => removeNotice(id)}
>
{__unstableHTML ?? <p>{content}</p>}
</Notice>
))}
</>
);
}

6
mailpoet/tests/_support/AcceptanceTester.php
View File

@ -400,12 +400,6 @@ class AcceptanceTester extends \Codeception\Actor {
$this->click('.notice-dismiss');
}
public function waitForWooTableNoticeAndClose(string $text): void {
$i = $this;
$i->waitForText($text);
$i->click('button[aria-label="Dismiss this notice"]');
}
public function scrollToTop() {
return $this->scrollTo('#wpcontent');
}

8
mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php
View File

@ -131,7 +131,7 @@ class ManageSegmentsCest {
$i->wantTo('Trash existing segment');
$i->clickWooTableActionInsideMoreButton($segment->getName(), 'Move to trash', 'Trash');
$i->waitForWooTableNoticeAndClose('Segment moved to trash.');
$i->waitForNoticeAndClose('Segment moved to trash.');
$i->waitForText('No data to display');
$i->changeWooTableTab('trash');
@ -140,7 +140,7 @@ class ManageSegmentsCest {
$i->wantTo('Restore trashed segment');
$i->clickWooTableActionInsideMoreButton($segment->getName(), 'Restore', 'Restore');
$i->waitForWooTableNoticeAndClose('Segment restored.');
$i->waitForNoticeAndClose('Segment restored.');
$i->seeInCurrentURL(urlencode('group[trash]'));
$i->changeWooTableTab('all');
$i->waitForText($segment->getName());
@ -164,12 +164,12 @@ class ManageSegmentsCest {
$i->wantTo('Trash and delete existing segment');
$i->clickWooTableActionInsideMoreButton($segment1->getName(), 'Move to trash', 'Trash');
$i->waitForWooTableNoticeAndClose('Segment moved to trash.');
$i->waitForNoticeAndClose('Segment moved to trash.');
$i->waitForText('No data to display');
$i->changeWooTableTab('trash');
$i->waitForText($segment1->getName());
$i->clickWooTableActionInsideMoreButton($segment1->getName(), 'Delete permanently', 'Delete permanently');
$i->waitForWooTableNoticeAndClose('Segment permanently deleted.');
$i->waitForNoticeAndClose('Segment permanently deleted.');
$i->seeNoJSErrors();
}