From b218663e7ee62c67b4889ec1665a3ad5f94fd754 Mon Sep 17 00:00:00 2001
From: Sam Najian <sam.najian@automattic.com>
Date: Mon, 28 Nov 2022 14:23:37 +0100
Subject: [PATCH] Add error boundary to segments/segments.jsx

[MAILPOET-4706]
---
 .../assets/js/src/common/tabs/routed_tabs.tsx     |  4 +++-
 mailpoet/assets/js/src/notices/notice.tsx         | 13 ++++++++-----
 .../assets/js/src/segments/dynamic/editor.tsx     |  1 +
 mailpoet/assets/js/src/segments/dynamic/list.jsx  |  2 ++
 mailpoet/assets/js/src/segments/form.jsx          |  2 ++
 mailpoet/assets/js/src/segments/list.jsx          |  2 ++
 mailpoet/assets/js/src/segments/segments.jsx      | 15 +++++++++------
 7 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx b/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
index 95094a0405..8c7dedf225 100644
--- a/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
+++ b/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-router-dom';
 import { noop } from 'lodash';
 
-import { Tabs, Props as TabProps } from './tabs';
+import { Props as TabProps, Tabs } from './tabs';
 
 function RouterAwareTabs(
   props: TabProps & {
@@ -105,4 +105,6 @@ function RoutedTabs({
   );
 }
 
+RoutedTabs.displayName = 'RoutedTabs';
+
 export { RoutedTabs };
diff --git a/mailpoet/assets/js/src/notices/notice.tsx b/mailpoet/assets/js/src/notices/notice.tsx
index b958918613..f8624316fc 100644
--- a/mailpoet/assets/js/src/notices/notice.tsx
+++ b/mailpoet/assets/js/src/notices/notice.tsx
@@ -1,13 +1,14 @@
 import {
-  useState,
-  useRef,
+  ReactNode,
   useCallback,
   useEffect,
   useLayoutEffect,
-  ReactNode,
+  useRef,
+  useState,
 } from 'react';
 import ReactDOM from 'react-dom';
 import { MailPoet } from 'mailpoet';
+import { withBoundary } from 'common';
 
 type Props = {
   type: 'success' | 'info' | 'warning' | 'error';
@@ -86,6 +87,7 @@ function Notice({
     document.getElementById('mailpoet_notices'),
   );
 }
+
 Notice.defaultProps = {
   timeout: 10000,
   scroll: false,
@@ -94,5 +96,6 @@ Notice.defaultProps = {
   onDisplay: undefined,
   onClose: undefined,
 };
-
-export { Notice };
+Notice.displayName = 'Notice';
+const NoticeWithBoundary = withBoundary(Notice);
+export { NoticeWithBoundary as Notice };
diff --git a/mailpoet/assets/js/src/segments/dynamic/editor.tsx b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
index 3c6d75c56a..d75e345fb9 100644
--- a/mailpoet/assets/js/src/segments/dynamic/editor.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
@@ -40,3 +40,4 @@ export function Editor(): JSX.Element {
     </>
   );
 }
+Editor.displayName = 'SegmentEditor';
diff --git a/mailpoet/assets/js/src/segments/dynamic/list.jsx b/mailpoet/assets/js/src/segments/dynamic/list.jsx
index b97c2bfd98..4a5b3588ef 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list.jsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list.jsx
@@ -225,4 +225,6 @@ DynamicSegmentListComponent.propTypes = {
   }).isRequired,
 };
 
+DynamicSegmentListComponent.displayName = 'DynamicSegmentList';
+
 export const DynamicSegmentList = withRouter(DynamicSegmentListComponent);
diff --git a/mailpoet/assets/js/src/segments/form.jsx b/mailpoet/assets/js/src/segments/form.jsx
index 9da319f62d..a6c0559c6f 100644
--- a/mailpoet/assets/js/src/segments/form.jsx
+++ b/mailpoet/assets/js/src/segments/form.jsx
@@ -78,4 +78,6 @@ SegmentForm.propTypes = {
   }).isRequired,
 };
 
+SegmentForm.displayName = 'SegmentForm';
+
 export { SegmentForm };
diff --git a/mailpoet/assets/js/src/segments/list.jsx b/mailpoet/assets/js/src/segments/list.jsx
index e4d4bf1919..186c9a690b 100644
--- a/mailpoet/assets/js/src/segments/list.jsx
+++ b/mailpoet/assets/js/src/segments/list.jsx
@@ -374,4 +374,6 @@ SegmentListComponent.propTypes = {
   }).isRequired,
 };
 
+SegmentListComponent.displayName = 'SegmentList';
+
 export const SegmentList = withRouter(SegmentListComponent);
diff --git a/mailpoet/assets/js/src/segments/segments.jsx b/mailpoet/assets/js/src/segments/segments.jsx
index 563cf8ce54..c552a556c6 100644
--- a/mailpoet/assets/js/src/segments/segments.jsx
+++ b/mailpoet/assets/js/src/segments/segments.jsx
@@ -8,6 +8,7 @@ import { SegmentList } from 'segments/list.jsx';
 import { SegmentForm } from 'segments/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
 import { Notices } from 'notices/notices.jsx';
+import { withBoundary } from 'common';
 import { Editor } from './dynamic/editor';
 import { DynamicSegmentList } from './dynamic/list.jsx';
 import { ListHeading } from './heading';
@@ -39,6 +40,8 @@ function Tabs() {
   );
 }
 
+Tabs.displayName = 'SegmentTabs';
+
 function App() {
   return (
     <GlobalContext.Provider value={useGlobalContextValue(window)}>
@@ -46,12 +49,12 @@ function App() {
         <Notices />
         <Switch>
           <Route exact path="/" render={() => <Redirect to="/lists" />} />
-          <Route path="/new" component={SegmentForm} />
-          <Route path="/edit/:id" component={SegmentForm} />
-          <Route path="/new-segment" component={Editor} />
-          <Route path="/edit-segment/:id" component={Editor} />
-          <Route path="/segments/(.*)?" component={Tabs} />
-          <Route path="/lists/(.*)?" component={Tabs} />
+          <Route path="/new" render={withBoundary(SegmentForm)} />
+          <Route path="/edit/:id" render={withBoundary(SegmentForm)} />
+          <Route path="/new-segment" render={withBoundary(Editor)} />
+          <Route path="/edit-segment/:id" render={withBoundary(Editor)} />
+          <Route path="/segments/(.*)?" render={withBoundary(Tabs)} />
+          <Route path="/lists/(.*)?" render={withBoundary(Tabs)} />
         </Switch>
       </HashRouter>
     </GlobalContext.Provider>