From c4bfc02d1d0b37b951a81e0636701fb249837bcc Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Tue, 9 Apr 2024 16:48:21 +0200
Subject: [PATCH] Unify segment listing notices with automation listing

[MAILPOET-5395]
---
 .../css/src/mailpoet-dynamic-segments.scss    | 21 +--------
 .../assets/js/src/segments/dynamic/list.tsx   |  3 ++
 .../dynamic/list/listing-tab-content.tsx      |  2 -
 .../js/src/segments/dynamic/list/notices.tsx  | 44 ++++++++++---------
 mailpoet/tests/_support/AcceptanceTester.php  |  6 ---
 .../Segments/ManageSegmentsCest.php           |  8 ++--
 6 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss b/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
index d734a37e03..b800406d0c 100644
--- a/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
+++ b/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
@@ -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;
   }
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/list.tsx b/mailpoet/assets/js/src/segments/dynamic/list.tsx
index bdb8424074..23a71cbacc 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list.tsx
@@ -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}`}
diff --git a/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx b/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
index 7254afc899..f11494eb1f 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
@@ -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) => {
diff --git a/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx b/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
index ced45f4c87..e498adb1c5 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
@@ -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>
+        ))}
     </>
   );
 }
diff --git a/mailpoet/tests/_support/AcceptanceTester.php b/mailpoet/tests/_support/AcceptanceTester.php
index f85764eb22..ec1fa23e46 100644
--- a/mailpoet/tests/_support/AcceptanceTester.php
+++ b/mailpoet/tests/_support/AcceptanceTester.php
@@ -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');
   }
diff --git a/mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php b/mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php
index 2ba750cdb4..acf124c804 100644
--- a/mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php
+++ b/mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php
@@ -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();
   }