Add error boundary to common components

[MAILPOET-4706]

mailpoet/assets/js/src/common/categories/categories.tsx

@@ -6,7 +6,7 @@ type Props = {
   active: string;
 };
 
-export function Categories({ onSelect, categories, active }: Props) {
+function Categories({ onSelect, categories, active }: Props) {
   const cats = categories.map((category) => (
     <CategoriesItem
       {...category}
@@ -18,3 +18,6 @@ export function Categories({ onSelect, categories, active }: Props) {
 
   return <div className="mailpoet-categories">{cats}</div>;
 }
+
+Categories.displayName = 'Categories';
+export { Categories };

mailpoet/assets/js/src/common/listings/newsletter_status.tsx

@@ -63,7 +63,7 @@ type NewsletterStatusProps = {
   status?: string;
 };
 
-export function NewsletterStatus({
+function NewsletterStatus({
   scheduledFor,
   processed,
   total,
@@ -150,3 +150,6 @@ export function NewsletterStatus({
     </div>
   );
 }
+
+NewsletterStatus.displayName = 'NewsletterStatus';
+export { NewsletterStatus };

mailpoet/assets/js/src/common/premium_modal/index.tsx

@@ -23,6 +23,7 @@ import {
   UtmParams,
 } from './upgrade_info';
 import { storeName } from '../../automation/editor/store';
+import { withBoundary } from '../error_boundary';
 
 export const premiumValidAndActive =
   premiumFeaturesEnabled && MailPoet.premiumActive;
@@ -51,11 +52,7 @@ const getCta = (state: State, upgradeInfo: UpgradeInfo): string => {
   return cta;
 };
 
-export function PremiumModal({
-  children,
-  tracking,
-  ...props
-}: Props): JSX.Element {
+function PremiumModal({ children, tracking, ...props }: Props): JSX.Element {
   const [state, setState] = useState<State>();
   const upgradeInfo = useUpgradeInfo(tracking);
 
@@ -129,8 +126,11 @@ export function PremiumModal({
   );
 }
 
+PremiumModal.displayName = 'PremiumModal';
+
 type EditProps = Omit<Props, 'onRequestClose'>;
-export function PremiumModalForStepEdit({
+
+function PremiumModalForStepEdit({
   children,
   ...props
 }: EditProps): JSX.Element {
@@ -157,3 +157,12 @@ export function PremiumModalForStepEdit({
     </PremiumModal>
   );
 }
+
+PremiumModalForStepEdit.displayName = 'PremiumModalForStepEdit';
+const PremiumModalForStepEditWithBoundary = withBoundary(
+  PremiumModalForStepEdit,
+);
+export {
+  PremiumModal,
+  PremiumModalForStepEditWithBoundary as PremiumModalForStepEdit,
+};

mailpoet/assets/js/src/common/sender_email_address_warning.jsx

@@ -163,5 +163,5 @@ SenderEmailAddressWarning.defaultProps = {
   showSenderDomainWarning: false,
   onSuccessfulEmailOrDomainAuthorization: noop,
 };
-
+SenderEmailAddressWarning.displayName = 'SenderEmailAddressWarning';
 export { SenderEmailAddressWarning };

mailpoet/assets/js/src/common/top_bar/top_bar.tsx

@@ -5,6 +5,7 @@ import { withFeatureAnnouncement } from 'announcements/with_feature_announcement
 import { MailPoetLogoResponsive } from './mailpoet_logo_responsive';
 import { BeamerIcon } from './beamer_icon';
 import { ScreenOptionsFix } from './screen_options_fix';
+import { withBoundary } from '../error_boundary';
 
 type Props = {
   children?: ReactNode;
@@ -57,4 +58,5 @@ export function TopBar({
   );
 }
 
-export const TopBarWithBeamer = withFeatureAnnouncement(TopBar);
+TopBar.displayName = 'TopBar';
+export const TopBarWithBeamer = withFeatureAnnouncement(withBoundary(TopBar));

mailpoet/assets/js/src/listing/bulk_actions.jsx

@@ -2,6 +2,7 @@ import { Component } from 'react';
 
 import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
+import { withBoundary } from '../common';
 
 class ListingBulkActions extends Component {
   constructor(props) {
@@ -109,5 +110,6 @@ ListingBulkActions.propTypes = {
   selected_ids: PropTypes.arrayOf(PropTypes.number).isRequired,
   onBulkAction: PropTypes.func.isRequired,
 };
-
-export { ListingBulkActions };
+ListingBulkActions.displayName = 'ListingBulkActions';
+const ListingBulkActionsWithBoundary = withBoundary(ListingBulkActions);
+export { ListingBulkActionsWithBoundary as ListingBulkActions };

mailpoet/assets/js/src/listing/filters.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'common/button/button.tsx';
 import { MailPoet } from 'mailpoet';
 import { Select } from 'common/form/select/select.tsx';
+import { withBoundary } from '../common';
 
 class ListingFilters extends Component {
   componentDidUpdate() {
@@ -100,5 +101,6 @@ ListingFilters.propTypes = {
 ListingFilters.defaultProps = {
   onBeforeSelectFilter: undefined,
 };
-
-export { ListingFilters };
+ListingFilters.displayName = 'ListingFilters';
+const ListingFiltersWithBoundary = withBoundary(ListingFilters);
+export { ListingFiltersWithBoundary as ListingFilters };

mailpoet/assets/js/src/listing/listing.jsx

@@ -13,6 +13,7 @@ import { ListingItems } from 'listing/listing_items.jsx';
 import { MailerError } from 'listing/notices.jsx';
 import { withRouter } from 'react-router-dom';
 import { GlobalContext } from 'context/index.jsx';
+import { withBoundary } from '../common';
 
 class ListingComponent extends Component {
   constructor(props) {
@@ -792,4 +793,4 @@ ListingComponent.defaultProps = {
 
 ListingComponent.displayName = 'Listing';
 
-export const Listing = withRouter(ListingComponent);
+export const Listing = withRouter(withBoundary(ListingComponent));

mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx

@@ -2,8 +2,9 @@ import ReactStringReplace from 'react-string-replace';
 import ReactHtmlParser from 'react-html-parser';
 import { MailPoet } from 'mailpoet';
 import { Notice } from 'notices/notice';
+import { withBoundary } from 'common';
 
-export function EmailVolumeLimitNotice(): JSX.Element {
+function EmailVolumeLimitNotice(): JSX.Element {
   if (!MailPoet.emailVolumeLimitReached) return null;
 
   const title = MailPoet.I18n.t('emailVolumeLimitNoticeTitle').replace(
@@ -72,3 +73,7 @@ export function EmailVolumeLimitNotice(): JSX.Element {
     </Notice>
   );
 }
+
+EmailVolumeLimitNotice.displayName = 'EmailVolumeLimitNotice';
+const EmailVolumeLimitNoticeWithBoundary = withBoundary(EmailVolumeLimitNotice);
+export { EmailVolumeLimitNoticeWithBoundary as EmailVolumeLimitNotice };

mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx

@@ -7,10 +7,7 @@ type Props = {
   subscribersCount: number;
 };
 
-export function InvalidMssKeyNotice({
-  mssKeyInvalid,
-  subscribersCount,
-}: Props) {
+function InvalidMssKeyNotice({ mssKeyInvalid, subscribersCount }: Props) {
   if (!mssKeyInvalid) return null;
   return (
     <Notice type="error" timeout={false} closable={false} renderInPlace>
@@ -39,3 +36,6 @@ export function InvalidMssKeyNotice({
     </Notice>
   );
 }
+
+InvalidMssKeyNotice.displayName = 'InvalidMssKeyNotice';
+export { InvalidMssKeyNotice };

mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx

@@ -2,7 +2,7 @@ import ReactStringReplace from 'react-string-replace';
 import { MailPoet } from 'mailpoet';
 import { Notice } from 'notices/notice.tsx';
 
-export function SubscribersLimitNotice() {
+function SubscribersLimitNotice() {
   if (!MailPoet.subscribersLimitReached) return null;
   const hasValidApiKey = MailPoet.hasValidApiKey;
   const title = MailPoet.I18n.t('subscribersLimitNoticeTitle').replace(
@@ -73,3 +73,6 @@ export function SubscribersLimitNotice() {
     </Notice>
   );
 }
+
+SubscribersLimitNotice.displayName = 'SubscribersLimitNotice';
+export { SubscribersLimitNotice };

mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx

@@ -10,7 +10,7 @@ type Props = {
   apiVersion: string;
 };
 
-export function TransactionalEmailsProposeOptInNotice({
+function TransactionalEmailsProposeOptInNotice({
   mailpoetInstalledDaysAgo,
   sendTransactionalEmails,
   mtaMethod,
@@ -68,3 +68,7 @@ export function TransactionalEmailsProposeOptInNotice({
     </Notice>
   );
 }
+
+TransactionalEmailsProposeOptInNotice.displayName =
+  'TransactionalEmailsProposeOptInNotice';
+export { TransactionalEmailsProposeOptInNotice };