From d93439d54ed3f7c096241670030409503b1fbbca Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 15:37:25 -0800
Subject: [PATCH 1/6] Refactored the help text elements displayed when users
 access the destinations list page after destinations deprecation.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../EmptyDestinations/EmptyDestinations.js    |   34 +-
 .../FullPageNotificationsInfoCallOut.js       |   59 +
 .../FullPageNotificationsInfoCallOut.test.js  |   20 +
 ...lPageNotificationsInfoCallOut.test.js.snap |  138 +
 .../FullPageNotificationsInfoCallOut/index.js |    8 +
 .../NotificationsInfoCallOut.js               |   60 +-
 .../NotificationsInfoCallOut.test.js.snap     |   66 +-
 .../DestinationsList/DestinationsList.js      |  180 +-
 .../DestinationsList.test.js.snap             | 6746 +++++++++--------
 public/pages/Destinations/utils/constants.js  |    3 +
 10 files changed, 3919 insertions(+), 3395 deletions(-)
 create mode 100644 public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
 create mode 100644 public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
 create mode 100644 public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
 create mode 100644 public/pages/Destinations/components/FullPageNotificationsInfoCallOut/index.js

diff --git a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
index 0b6b4de9a..47d5388a4 100644
--- a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
+++ b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
@@ -5,11 +5,29 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { MANAGE_CHANNELS_PATH } from '../../../../CreateTrigger/utils/constants';
 
-const filterText =
-  'There are no destinations matching your applied filters. Reset your filters to view all destinations.';
-const emptyText = 'There are no existing destinations.';
+const filterText = (hasNotificationPlugin) =>
+  hasNotificationPlugin ? (
+    <>
+      <p>
+        There are no destinations matching your applied filters. Reset your filters to view all
+        destinations.
+      </p>
+      <p>
+        Migrated destinations can be found in&nbsp;
+        {<EuiLink href={MANAGE_CHANNELS_PATH}>Notifications</EuiLink>}
+      </p>
+    </>
+  ) : (
+    <p>
+      There are no destinations matching your applied filters. Reset your filters to view all
+      destinations.
+    </p>
+  );
+
+const emptyText = <p>There are no existing destinations.</p>;
 
 const resetFiltersButton = (resetFilters) => (
   <EuiButton fill onClick={resetFilters}>
@@ -22,14 +40,10 @@ const propTypes = {
   onResetFilters: PropTypes.func.isRequired,
 };
 
-const EmptyDestinations = ({ isFilterApplied, onResetFilters }) => (
+const EmptyDestinations = ({ hasNotificationPlugin, isFilterApplied, onResetFilters }) => (
   <EuiEmptyPrompt
     style={{ maxWidth: '45em' }}
-    body={
-      <EuiText>
-        <p>{isFilterApplied ? filterText : emptyText}</p>
-      </EuiText>
-    }
+    body={<EuiText>{isFilterApplied ? filterText(hasNotificationPlugin) : emptyText}</EuiText>}
     actions={isFilterApplied ? resetFiltersButton(onResetFilters) : undefined}
   />
 );
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
new file mode 100644
index 000000000..c3f41f9fc
--- /dev/null
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButton, EuiEmptyPrompt, EuiLink, EuiPanel, EuiText } from '@elastic/eui';
+import { MANAGE_CHANNELS_PATH } from '../../../CreateTrigger/utils/constants';
+import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
+
+const noNotificationsTitle = 'Destinations will become channels in Notifications';
+const noNotificationsText = (
+  <EuiText>
+    Destinations will be deprecated going forward. Install the Notifications plugin for a new
+    centralized place to manage your notification channels.
+  </EuiText>
+);
+const noNotificationsButton = (
+  <EuiButton
+    external
+    fill
+    href={NOTIFICATIONS_LEARN_MORE_HREF}
+    target={'_blank'}
+    iconSide={'right'}
+    iconType={'popout'}
+  >
+    View install instructions
+  </EuiButton>
+);
+
+const hasNotificationsTitle = 'Destinations have become channels in Notifications';
+const hasNotificationsText = (
+  <EuiText>
+    <p>
+      Your destinations have been migrated as channels in Notifications, a new centralized place to
+      manage your notification channels. Destinations will be deprecated going forward.&nbsp;
+      <EuiLink external href={NOTIFICATIONS_LEARN_MORE_HREF} target={'_blank'}>
+        Learn more
+      </EuiLink>
+    </p>
+  </EuiText>
+);
+const hasNotificationsButton = (
+  <EuiButton fill href={MANAGE_CHANNELS_PATH}>
+    View in Notifications
+  </EuiButton>
+);
+
+const FullPageNotificationsInfoCallOut = ({ hasNotificationPlugin }) => (
+  <EuiPanel>
+    <EuiEmptyPrompt
+      title={<h2>{hasNotificationPlugin ? hasNotificationsTitle : noNotificationsTitle}</h2>}
+      body={hasNotificationPlugin ? hasNotificationsText : noNotificationsText}
+      actions={hasNotificationPlugin ? hasNotificationsButton : noNotificationsButton}
+    />
+  </EuiPanel>
+);
+
+export default FullPageNotificationsInfoCallOut;
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
new file mode 100644
index 000000000..9b4562d50
--- /dev/null
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from 'enzyme';
+
+import FullPageNotificationsInfoCallOut from './FullPageNotificationsInfoCallOut';
+
+describe('FullPageNotificationsInfoCallOut', () => {
+  test('renders when Notifications plugin is installed', () => {
+    const component = <FullPageNotificationsInfoCallOut hasNotificationPlugin={true} />;
+    expect(render(component)).toMatchSnapshot();
+  });
+  test('renders when Notifications plugin is not installed', () => {
+    const component = <FullPageNotificationsInfoCallOut hasNotificationPlugin={false} />;
+    expect(render(component)).toMatchSnapshot();
+  });
+});
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
new file mode 100644
index 000000000..188b52294
--- /dev/null
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullPageNotificationsInfoCallOut renders when Notifications plugin is installed 1`] = `
+<div
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div
+    class="euiEmptyPrompt"
+  >
+    <h2
+      class="euiTitle euiTitle--medium"
+    >
+      Destinations have become channels in Notifications
+    </h2>
+    <span
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--medium"
+      >
+        <div
+          class="euiText euiText--medium"
+        >
+          <p>
+            Your destinations have been migrated as channels in Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward. 
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Learn more
+            </a>
+          </p>
+          <div>
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              EuiIconMock
+            </a>
+          </div>
+          <a
+            class="euiLink euiLink--primary"
+            href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <span
+              class="euiScreenReaderOnly"
+            >
+              (opens in a new tab or window)
+            </span>
+          </a>
+          <p />
+        </div>
+      </div>
+    </span>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <a
+      class="euiButton euiButton--primary euiButton--fill"
+      href="/app/notifications-dashboards#/channels"
+      rel="noreferrer"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <span
+          class="euiButton__text"
+        >
+          View in Notifications
+        </span>
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`FullPageNotificationsInfoCallOut renders when Notifications plugin is not installed 1`] = `
+<div
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div
+    class="euiEmptyPrompt"
+  >
+    <h2
+      class="euiTitle euiTitle--medium"
+    >
+      Destinations will become channels in Notifications
+    </h2>
+    <span
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--medium"
+      >
+        <div
+          class="euiText euiText--medium"
+        >
+          Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+        </div>
+      </div>
+    </span>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <a
+      class="euiButton euiButton--primary euiButton--fill"
+      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span
+        class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+      >
+        <div>
+          EuiIconMock
+        </div>
+        <span
+          class="euiButton__text"
+        >
+          View install instructions
+        </span>
+      </span>
+    </a>
+  </div>
+</div>
+`;
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/index.js b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/index.js
new file mode 100644
index 000000000..fb7c78790
--- /dev/null
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/index.js
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import FullPageNotificationsInfoCallOut from './FullPageNotificationsInfoCallOut';
+
+export default FullPageNotificationsInfoCallOut;
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
index 78091dc7d..86a5134fe 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -4,24 +4,62 @@
  */
 
 import React from 'react';
-import { EuiCallOut, EuiButton, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiButton, EuiLink, EuiSpacer } from '@elastic/eui';
 import { MANAGE_CHANNELS_PATH } from '../../../CreateTrigger/utils/constants';
+import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
+
+const noNotificationsTitle = 'Unable to send notifications. Notifications plugin is required.';
+const noNotificationsBodyText = (
+  <>
+    <p>
+      Destinations will be deprecated going forward. Install the Notifications plugin for a new
+      centralized place to manage your notification channels.
+    </p>
+    <p>
+      Existing destinations will be automatically migrated once Notifications plugin is installed.
+    </p>
+  </>
+);
+const noNotificationsButton = (
+  <EuiButton
+    external
+    href={NOTIFICATIONS_LEARN_MORE_HREF}
+    iconSide={'right'}
+    iconType={'popout'}
+    target={'_blank'}
+  >
+    View install instructions
+  </EuiButton>
+);
+
+const hasNotificationsTitle = 'Destinations have become channels in Notifications.';
+const hasNotificationsBodyText = (
+  <p>
+    Your destinations have been migrated to Notifications, a new centralized place to manage your
+    notification channels. Destinations will be deprecated going forward.&nbsp;
+    <EuiLink external href={NOTIFICATIONS_LEARN_MORE_HREF} target={'_blank'}>
+      Learn more
+    </EuiLink>
+  </p>
+);
+const hasNotificationsButton = (
+  <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
+);
 
 const NotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
   console.log(`NotificationsInfoCallOut: ${hasNotificationPlugin}`);
   return (
     <div>
-      <EuiCallOut title="Destinations have become channels in Notifications.">
-        <p>
-          Your destinations have been migrated to Notifications, a new centralized place to manage
-          your notification channels. Destinations will be deprecated going forward.
-          <EuiSpacer size="l" />
-          {hasNotificationPlugin && (
-            <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
-          )}
-        </p>
+      <EuiCallOut
+        color={hasNotificationPlugin ? 'primary' : 'danger'}
+        iconType={hasNotificationPlugin ? undefined : 'alert'}
+        title={hasNotificationPlugin ? hasNotificationsTitle : noNotificationsTitle}
+      >
+        {hasNotificationPlugin ? hasNotificationsBodyText : noNotificationsBodyText}
+        <EuiSpacer size={'l'} />
+        {hasNotificationPlugin ? hasNotificationsButton : noNotificationsButton}
       </EuiCallOut>
-      <EuiSpacer size="l" />
+      <EuiSpacer size={'l'} />
     </div>
   );
 };
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
index 0e03bbd9b..469fb7915 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
@@ -21,8 +21,39 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
         class="euiTextColor euiTextColor--default"
       >
         <p>
-          Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
+          Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward. 
+          <a
+            class="euiLink euiLink--primary"
+            href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more
+          </a>
         </p>
+        <div>
+          <a
+            class="euiLink euiLink--primary"
+            href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            EuiIconMock
+          </a>
+        </div>
+        <a
+          class="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+        <p />
         <div
           class="euiSpacer euiSpacer--l"
         />
@@ -41,7 +72,6 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
             </span>
           </span>
         </a>
-        <p />
       </div>
     </div>
   </div>
@@ -54,15 +84,18 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
 exports[`NotificationsInfoCallOut renders when Notifications plugin is not installed 1`] = `
 <div>
   <div
-    class="euiCallOut euiCallOut--primary"
+    class="euiCallOut euiCallOut--danger"
   >
     <div
       class="euiCallOutHeader"
     >
+      <div>
+        EuiIconMock
+      </div>
       <span
         class="euiCallOutHeader__title"
       >
-        Destinations have become channels in Notifications.
+        Unable to send notifications. Notifications plugin is required.
       </span>
     </div>
     <div
@@ -72,12 +105,33 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is not insta
         class="euiTextColor euiTextColor--default"
       >
         <p>
-          Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
+          Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+        </p>
+        <p>
+          Existing destinations will be automatically migrated once Notifications plugin is installed.
         </p>
         <div
           class="euiSpacer euiSpacer--l"
         />
-        <p />
+        <a
+          class="euiButton euiButton--primary"
+          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+          >
+            <div>
+              EuiIconMock
+            </div>
+            <span
+              class="euiButton__text"
+            >
+              View install instructions
+            </span>
+          </span>
+        </a>
       </div>
     </div>
   </div>
diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
index f27b76179..9defd102f 100644
--- a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
+++ b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
@@ -5,7 +5,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiBasicTable, EuiHorizontalRule, EuiCallOut } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiCallOut,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import queryString from 'query-string';
 import _ from 'lodash';
 import ContentPanel from '../../../../components/ContentPanel';
@@ -26,7 +33,7 @@ import { getAllowList } from '../../utils/helpers';
 import { DESTINATION_TYPE } from '../../utils/constants';
 import { backendErrorNotification } from '../../../../utils/helpers';
 import NotificationsInfoCallOut from '../../components/NotificationsInfoCallOut';
-import NotificationsCallOut from '../../../CreateTrigger/components/NotificationsCallOut';
+import FullPageNotificationsInfoCallOut from '../../components/FullPageNotificationsInfoCallOut';
 
 class DestinationsList extends React.Component {
   constructor(props) {
@@ -279,6 +286,7 @@ class DestinationsList extends React.Component {
   render() {
     const { httpClient, notifications } = this.props;
     const {
+      destinations,
       destinationToDelete,
       page,
       queryParams: { size, search, type, sortDirection, sortField },
@@ -310,80 +318,106 @@ class DestinationsList extends React.Component {
             color="danger"
           />
         ) : null}
-        <NotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
-        {!hasNotificationPlugin && <NotificationsCallOut />}
-        <ContentPanel
-          bodyStyles={{ padding: 'initial' }}
-          title="Destinations (deprecated)"
-          actions={
-            <DestinationsActions
-              isEmailAllowed={this.isEmailAllowed()}
-              onClickManageSenders={() => {
-                this.setState({ showManageSenders: true });
-              }}
-              onClickManageEmailGroups={() => {
-                this.setState({ showManageEmailGroups: true });
-              }}
-            />
-          }
-        >
-          <DeleteConfirmation
-            isVisible={this.state.showDeleteConfirmation}
-            onCancel={() => {
-              this.setState({ showDeleteConfirmation: false });
-            }}
-            onConfirm={this.handleDeleteDestination}
-          />
 
-          <ManageSenders
-            httpClient={httpClient}
-            isEmailAllowed={this.isEmailAllowed()}
-            isVisible={this.state.showManageSenders}
-            onClickCancel={this.hideManageSendersModal}
-            onClickSave={this.hideManageSendersModal}
-            notifications={notifications}
-          />
+        {destinations.length > 0 ? (
+          <FullPageNotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
+        ) : (
+          <div>
+            <EuiTitle size={'l'}>
+              <h3>Destinations (deprecated)</h3>
+            </EuiTitle>
+            <EuiSpacer size={'l'} />
+            <NotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
+            <ContentPanel
+              bodyStyles={{ padding: 'initial' }}
+              title={
+                <div>
+                  <EuiTitle size={'s'} style={{ paddingBottom: '0px', marginBottom: '0px' }}>
+                    <h3>Destinations pending for migration</h3>
+                  </EuiTitle>
+                  {hasNotificationPlugin ? (
+                    <EuiText
+                      color={'subdued'}
+                      size={'s'}
+                      style={{ paddingTop: '0px', marginTop: '0px' }}
+                    >
+                      Destinations that are pending migration will continue to work.
+                    </EuiText>
+                  ) : null}
+                </div>
+              }
+              actions={
+                <DestinationsActions
+                  isEmailAllowed={this.isEmailAllowed()}
+                  onClickManageSenders={() => {
+                    this.setState({ showManageSenders: true });
+                  }}
+                  onClickManageEmailGroups={() => {
+                    this.setState({ showManageEmailGroups: true });
+                  }}
+                />
+              }
+            >
+              <DeleteConfirmation
+                isVisible={this.state.showDeleteConfirmation}
+                onCancel={() => {
+                  this.setState({ showDeleteConfirmation: false });
+                }}
+                onConfirm={this.handleDeleteDestination}
+              />
 
-          <ManageEmailGroups
-            httpClient={httpClient}
-            isEmailAllowed={this.isEmailAllowed()}
-            isVisible={this.state.showManageEmailGroups}
-            onClickCancel={this.hideManageEmailGroupsModal}
-            onClickSave={this.hideManageEmailGroupsModal}
-            notifications={notifications}
-          />
+              <ManageSenders
+                httpClient={httpClient}
+                isEmailAllowed={this.isEmailAllowed()}
+                isVisible={this.state.showManageSenders}
+                onClickCancel={this.hideManageSendersModal}
+                onClickSave={this.hideManageSendersModal}
+                notifications={notifications}
+              />
 
-          <DestinationsControls
-            activePage={page}
-            pageCount={Math.ceil(totalDestinations / size) || 1}
-            search={search}
-            type={type}
-            onSearchChange={this.handleSearchChange}
-            onTypeChange={this.handleTypeChange}
-            onPageClick={this.handlePageClick}
-            allowList={allowList}
-          />
-          <EuiHorizontalRule margin="xs" />
-          <EuiBasicTable
-            columns={this.columns}
-            hasActions={true}
-            isSelectable={true}
-            items={this.state.destinations}
-            pagination={pagination}
-            noItemsMessage={
-              isDestinationLoading ? (
-                'Loading destinations...'
-              ) : (
-                <EmptyDestinations
-                  isFilterApplied={isFilterApplied}
-                  onResetFilters={this.handleResetFilter}
-                />
-              )
-            }
-            onChange={this.handlePageChange}
-            sorting={sorting}
-          />
-        </ContentPanel>
+              <ManageEmailGroups
+                httpClient={httpClient}
+                isEmailAllowed={this.isEmailAllowed()}
+                isVisible={this.state.showManageEmailGroups}
+                onClickCancel={this.hideManageEmailGroupsModal}
+                onClickSave={this.hideManageEmailGroupsModal}
+                notifications={notifications}
+              />
+
+              <DestinationsControls
+                activePage={page}
+                pageCount={Math.ceil(totalDestinations / size) || 1}
+                search={search}
+                type={type}
+                onSearchChange={this.handleSearchChange}
+                onTypeChange={this.handleTypeChange}
+                onPageClick={this.handlePageClick}
+                allowList={allowList}
+              />
+              <EuiHorizontalRule margin="xs" />
+              <EuiBasicTable
+                columns={this.columns}
+                hasActions={true}
+                isSelectable={true}
+                items={destinations}
+                pagination={pagination}
+                noItemsMessage={
+                  isDestinationLoading ? (
+                    'Loading destinations...'
+                  ) : (
+                    <EmptyDestinations
+                      hasNotificationPlugin={hasNotificationPlugin}
+                      isFilterApplied={isFilterApplied}
+                      onResetFilters={this.handleResetFilter}
+                    />
+                  )
+                }
+                onChange={this.handlePageChange}
+                sorting={sorting}
+              />
+            </ContentPanel>
+          </div>
+        )}
       </React.Fragment>
     );
   }
diff --git a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
index 3cbd3af90..6f00b4478 100644
--- a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
+++ b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
@@ -47,41 +47,75 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
     }
   }
 >
-  <NotificationsInfoCallOut
-    hasNotificationPlugin={false}
-  >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
+  <div>
+    <EuiTitle
+      size="l"
+    >
+      <h3
+        className="euiTitle euiTitle--large"
       >
-        <div
-          className="euiCallOut euiCallOut--primary"
+        Destinations (deprecated)
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    >
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <NotificationsInfoCallOut
+      hasNotificationPlugin={false}
+    >
+      <div>
+        <EuiCallOut
+          color="danger"
+          iconType="alert"
+          title="Unable to send notifications. Notifications plugin is required."
         >
           <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
+            className="euiCallOut euiCallOut--danger"
           >
             <div
-              className="euiText euiText--small"
+              className="euiCallOutHeader"
             >
-              <EuiTextColor
-                color="default"
-                component="div"
+              <EuiIcon
+                aria-hidden="true"
+                className="euiCallOutHeader__icon"
+                color="inherit"
+                size="m"
+                type="alert"
               >
-                <div
-                  className="euiTextColor euiTextColor--default"
+                <div>
+                  EuiIconMock
+                </div>
+              </EuiIcon>
+              <span
+                className="euiCallOutHeader__title"
+              >
+                Unable to send notifications. Notifications plugin is required.
+              </span>
+            </div>
+            <EuiText
+              color="default"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small"
+              >
+                <EuiTextColor
+                  color="default"
+                  component="div"
                 >
-                  <p>
-                    Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+                    </p>
+                    <p>
+                      Existing destinations will be automatically migrated once Notifications plugin is installed.
+                    </p>
                     <EuiSpacer
                       size="l"
                     >
@@ -89,133 +123,117 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
                         className="euiSpacer euiSpacer--l"
                       />
                     </EuiSpacer>
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="l"
-      >
-        <div
-          className="euiSpacer euiSpacer--l"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsInfoCallOut>
-  <NotificationsCallOut>
-    <div>
-      <EuiCallOut
-        color="danger"
-        iconType="alert"
-        title="Notifications plugin is not installed"
-      >
-        <div
-          className="euiCallOut euiCallOut--danger"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <EuiIcon
-              aria-hidden="true"
-              className="euiCallOutHeader__icon"
-              color="inherit"
-              size="m"
-              type="alert"
-            >
-              <div>
-                EuiIconMock
-              </div>
-            </EuiIcon>
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Notifications plugin is not installed
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--default"
-                >
-                  <p>
-                    Install the notifications plugin in order to create and select channels to send out notifications.
-                     
-                    <EuiLink
+                    <EuiButton
                       external={true}
-                      href="#"
+                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                      iconSide="right"
+                      iconType="popout"
+                      target="_blank"
                     >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        element="a"
+                        external={true}
+                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                        iconSide="right"
+                        iconType="popout"
+                        isDisabled={false}
+                        rel="noopener noreferrer"
+                        target="_blank"
                       >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
+                        <a
+                          className="euiButton euiButton--primary"
+                          disabled={false}
+                          external={true}
+                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                          rel="noopener noreferrer"
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          target="_blank"
                         >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="popout"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="popout"
+                              >
+                                <div>
+                                  EuiIconMock
+                                </div>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                View install instructions
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </a>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiCallOut>
+        <EuiSpacer
+          size="l"
+        >
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+        </EuiSpacer>
+      </div>
+    </NotificationsInfoCallOut>
+    <ContentPanel
+      actions={
+        <DestinationsActions
+          isEmailAllowed={true}
+          onClickManageEmailGroups={[Function]}
+          onClickManageSenders={[Function]}
         />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={true}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
       }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
+      bodyStyles={
         Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
+          "padding": "initial",
         }
       }
+      title={
+        <div>
+          <EuiTitle
+            size="s"
+            style={
+              Object {
+                "marginBottom": "0px",
+                "paddingBottom": "0px",
+              }
+            }
+          >
+            <h3>
+              Destinations pending for migration
+            </h3>
+          </EuiTitle>
+        </div>
+      }
     >
-      <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      <EuiPanel
         style={
           Object {
             "paddingLeft": "0px",
@@ -223,839 +241,845 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
           }
         }
       >
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="spaceBetween"
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           style={
             Object {
-              "padding": "0px 10px",
+              "paddingLeft": "0px",
+              "paddingRight": "0px",
             }
           }
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceBetween"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
-              >
-                <EuiTitle
-                  size="l"
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style={
+                Object {
+                  "padding": "0px 10px",
+                }
+              }
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <h3
-                    className="euiTitle euiTitle--large"
+                  <EuiTitle
+                    size="l"
                   >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+                    <h3
+                      className="euiTitle euiTitle--large"
+                    >
+                      <div>
+                        <EuiTitle
+                          size="s"
+                          style={
+                            Object {
+                              "marginBottom": "0px",
+                              "paddingBottom": "0px",
+                            }
+                          }
+                        >
+                          <h3
+                            className="euiTitle euiTitle--small"
+                            style={
+                              Object {
+                                "marginBottom": "0px",
+                                "paddingBottom": "0px",
+                              }
+                            }
+                          >
+                            Destinations pending for migration
+                          </h3>
+                        </EuiTitle>
+                      </div>
+                    </h3>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <DestinationsActions
-                          isEmailAllowed={true}
-                          onClickManageEmailGroups={[Function]}
-                          onClickManageSenders={[Function]}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            justifyContent="spaceBetween"
+                          <DestinationsActions
+                            isEmailAllowed={true}
+                            onClickManageEmailGroups={[Function]}
+                            onClickManageSenders={[Function]}
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            <EuiFlexGroup
+                              alignItems="center"
+                              justifyContent="spaceBetween"
                             >
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downLeft"
-                                    button={
-                                      <EuiButton
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                      >
-                                        Actions
-                                      </EuiButton>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    id="destinationActionsPopover"
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownLeft"
-                                      id="destinationActionsPopover"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
+                                    <EuiPopover
+                                      anchorPosition="downLeft"
+                                      button={
                                         <EuiButton
                                           iconSide="right"
                                           iconType="arrowDown"
                                           onClick={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
-                                            disabled={false}
-                                            element="button"
+                                          Actions
+                                        </EuiButton>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      id="destinationActionsPopover"
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="none"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownLeft"
+                                        id="destinationActionsPopover"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor"
+                                        >
+                                          <EuiButton
                                             iconSide="right"
                                             iconType="arrowDown"
-                                            isDisabled={false}
                                             onClick={[Function]}
-                                            type="button"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               disabled={false}
+                                              element="button"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              isDisabled={false}
                                               onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="right"
-                                                iconType="arrowDown"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="arrowDown"
-                                                  >
-                                                    <div>
-                                                      EuiIconMock
-                                                    </div>
-                                                  </EuiIcon>
                                                   <span
-                                                    className="euiButton__text"
+                                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                   >
-                                                    Actions
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <div>
+                                                        EuiIconMock
+                                                      </div>
+                                                    </EuiIcon>
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Actions
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </DestinationsActions>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-        <EuiText
-          color="subdued"
-          size="xs"
-          style={
-            Object {
-              "padding": "0px 10px",
-            }
-          }
-        >
-          <div
-            className="euiText euiText--extraSmall"
+                                    </EuiPopover>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </DestinationsActions>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiText
+            color="subdued"
+            size="xs"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiTextColor
-              color="subdued"
-              component="div"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              />
-            </EuiTextColor>
-          </div>
-        </EuiText>
-        <EuiHorizontalRule
-          className=""
-          margin="xs"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-          />
-        </EuiHorizontalRule>
-        <div
-          style={
-            Object {
-              "padding": "initial",
-            }
-          }
-        >
-          <DeleteConfirmation
-            isVisible={false}
-            onCancel={[Function]}
-            onConfirm={[Function]}
-          />
-          <ManageSenders
-            httpClient={[MockFunction]}
-            isEmailAllowed={true}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <ManageEmailGroups
-            httpClient={[MockFunction]}
-            isEmailAllowed={true}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <DestinationsControls
-            activePage={0}
-            allowList={
-              Array [
-                "chime",
-                "slack",
-                "custom_webhook",
-                "email",
-              ]
-            }
-            onPageClick={[Function]}
-            onSearchChange={[Function]}
-            onTypeChange={[Function]}
-            pageCount={1}
-            search=""
-            type="ALL"
-          >
-            <EuiFlexGroup
+            <div
+              className="euiText euiText--extraSmall"
               style={
                 Object {
-                  "padding": "0px 5px",
+                  "padding": "0px 10px",
                 }
               }
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              <EuiTextColor
+                color="subdued"
+                component="div"
+              >
+                <div
+                  className="euiTextColor euiTextColor--subdued"
+                />
+              </EuiTextColor>
+            </div>
+          </EuiText>
+          <EuiHorizontalRule
+            className=""
+            margin="xs"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+            />
+          </EuiHorizontalRule>
+          <div
+            style={
+              Object {
+                "padding": "initial",
+              }
+            }
+          >
+            <DeleteConfirmation
+              isVisible={false}
+              onCancel={[Function]}
+              onConfirm={[Function]}
+            />
+            <ManageSenders
+              httpClient={[MockFunction]}
+              isEmailAllowed={true}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <ManageEmailGroups
+              httpClient={[MockFunction]}
+              isEmailAllowed={true}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <DestinationsControls
+              activePage={0}
+              allowList={
+                Array [
+                  "chime",
+                  "slack",
+                  "custom_webhook",
+                  "email",
+                ]
+              }
+              onPageClick={[Function]}
+              onSearchChange={[Function]}
+              onTypeChange={[Function]}
+              pageCount={1}
+              search=""
+              type="ALL"
+            >
+              <EuiFlexGroup
                 style={
                   Object {
                     "padding": "0px 5px",
                   }
                 }
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <EuiFieldSearch
-                      compressed={false}
-                      fullWidth={true}
-                      incremental={false}
-                      isClearable={true}
-                      isLoading={false}
-                      onChange={[Function]}
-                      placeholder="Search"
-                      value=""
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  style={
+                    Object {
+                      "padding": "0px 5px",
+                    }
+                  }
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
                     >
-                      <EuiFormControlLayout
+                      <EuiFieldSearch
                         compressed={false}
                         fullWidth={true}
-                        icon="search"
+                        incremental={false}
+                        isClearable={true}
                         isLoading={false}
+                        onChange={[Function]}
+                        placeholder="Search"
+                        value=""
                       >
-                        <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={true}
+                          icon="search"
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
                           >
-                            <EuiValidatableControl>
-                              <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                onChange={[Function]}
-                                onKeyUp={[Function]}
-                                placeholder="Search"
-                                type="search"
-                                value=""
-                              />
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon="search"
-                              isLoading={false}
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <div
-                                className="euiFormControlLayoutIcons"
-                              >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                              <EuiValidatableControl>
+                                <input
+                                  className="euiFieldSearch euiFieldSearch--fullWidth"
+                                  onChange={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
                                   type="search"
+                                  value=""
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon="search"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="search"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="search"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="search"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiFieldSearch>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiFieldSearch>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                   >
-                    <EuiSelect
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "All type",
-                            "value": "ALL",
-                          },
-                          Object {
-                            "text": "Amazon Chime",
-                            "value": "chime",
-                          },
-                          Object {
-                            "text": "Slack",
-                            "value": "slack",
-                          },
-                          Object {
-                            "text": "Custom webhook",
-                            "value": "custom_webhook",
-                          },
-                          Object {
-                            "text": "Email",
-                            "value": "email",
-                          },
-                        ]
-                      }
-                      value="ALL"
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All type",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "Amazon Chime",
+                              "value": "chime",
+                            },
+                            Object {
+                              "text": "Slack",
+                              "value": "slack",
+                            },
+                            Object {
+                              "text": "Custom webhook",
+                              "value": "custom_webhook",
+                            },
+                            Object {
+                              "text": "Email",
+                              "value": "email",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All type
-                                </option>
-                                <option
-                                  key="1"
-                                  value="chime"
-                                >
-                                  Amazon Chime
-                                </option>
-                                <option
-                                  key="2"
-                                  value="slack"
-                                >
-                                  Slack
-                                </option>
-                                <option
-                                  key="3"
-                                  value="custom_webhook"
-                                >
-                                  Custom webhook
-                                </option>
-                                <option
-                                  key="4"
-                                  value="email"
-                                >
-                                  Email
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All type
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="chime"
+                                  >
+                                    Amazon Chime
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="slack"
+                                  >
+                                    Slack
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="custom_webhook"
+                                  >
+                                    Custom webhook
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="email"
+                                  >
+                                    Email
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                  style={
-                    Object {
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                     style={
                       Object {
                         "justifyContent": "center",
                       }
                     }
                   >
-                    <EuiPagination
-                      activePage={0}
-                      onPageClick={[Function]}
-                      pageCount={1}
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      style={
+                        Object {
+                          "justifyContent": "center",
+                        }
+                      }
                     >
-                      <nav
-                        className="euiPagination"
+                      <EuiPagination
+                        activePage={0}
+                        onPageClick={[Function]}
+                        pageCount={1}
                       >
-                        <EuiI18n
-                          default="Previous page, {page}"
-                          token="euiPagination.previousPage"
-                          values={
-                            Object {
-                              "page": 0,
-                            }
-                          }
+                        <nav
+                          className="euiPagination"
                         >
                           <EuiI18n
-                            default="Previous page"
-                            token="euiPagination.disabledPreviousPage"
+                            default="Previous page, {page}"
+                            token="euiPagination.previousPage"
+                            values={
+                              Object {
+                                "page": 0,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Previous page"
-                              color="text"
-                              data-test-subj="pagination-button-previous"
-                              disabled={true}
-                              iconType="arrowLeft"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Previous page"
+                              token="euiPagination.disabledPreviousPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Previous page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-previous"
                                 disabled={true}
+                                iconType="arrowLeft"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowLeft"
+                                <button
+                                  aria-label="Previous page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-previous"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowLeft"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                        <ul
-                          className="euiPagination__list"
-                        >
-                          <PaginationButton
-                            key="0"
-                            pageIndex={0}
+                          <ul
+                            className="euiPagination__list"
                           >
-                            <li
-                              className="euiPagination__item"
+                            <PaginationButton
+                              key="0"
+                              pageIndex={0}
                             >
-                              <EuiPaginationButton
-                                hideOnMobile={true}
-                                isActive={true}
-                                onClick={[Function]}
-                                pageIndex={0}
-                                totalPages={1}
+                              <li
+                                className="euiPagination__item"
                               >
-                                <EuiI18n
-                                  default="Page {page} of {totalPages}"
-                                  token="euiPaginationButton.longPageString"
-                                  values={
-                                    Object {
-                                      "page": 1,
-                                      "totalPages": 1,
-                                    }
-                                  }
+                                <EuiPaginationButton
+                                  hideOnMobile={true}
+                                  isActive={true}
+                                  onClick={[Function]}
+                                  pageIndex={0}
+                                  totalPages={1}
                                 >
                                   <EuiI18n
-                                    default="Page {page}"
-                                    token="euiPaginationButton.shortPageString"
+                                    default="Page {page} of {totalPages}"
+                                    token="euiPaginationButton.longPageString"
                                     values={
                                       Object {
                                         "page": 1,
+                                        "totalPages": 1,
                                       }
                                     }
                                   >
-                                    <EuiButtonEmpty
-                                      aria-current={true}
-                                      aria-label="Page 1 of 1"
-                                      className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                      color="text"
-                                      data-test-subj="pagination-button-0"
-                                      isDisabled={true}
-                                      onClick={[Function]}
-                                      size="s"
+                                    <EuiI18n
+                                      default="Page {page}"
+                                      token="euiPaginationButton.shortPageString"
+                                      values={
+                                        Object {
+                                          "page": 1,
+                                        }
+                                      }
                                     >
-                                      <button
+                                      <EuiButtonEmpty
                                         aria-current={true}
                                         aria-label="Page 1 of 1"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        color="text"
                                         data-test-subj="pagination-button-0"
-                                        disabled={true}
+                                        isDisabled={true}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="left"
-                                          iconSize="m"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text",
-                                            }
-                                          }
+                                        <button
+                                          aria-current={true}
+                                          aria-label="Page 1 of 1"
+                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                          data-test-subj="pagination-button-0"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          type="button"
                                         >
-                                          <span
-                                            className="euiButtonContent euiButtonEmpty__content"
+                                          <EuiButtonContent
+                                            className="euiButtonEmpty__content"
+                                            iconSide="left"
+                                            iconSize="m"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text",
+                                              }
+                                            }
                                           >
                                             <span
-                                              className="euiButtonEmpty__text"
+                                              className="euiButtonContent euiButtonEmpty__content"
                                             >
-                                              1
+                                              <span
+                                                className="euiButtonEmpty__text"
+                                              >
+                                                1
+                                              </span>
                                             </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </EuiI18n>
                                   </EuiI18n>
-                                </EuiI18n>
-                              </EuiPaginationButton>
-                            </li>
-                          </PaginationButton>
-                        </ul>
-                        <EuiI18n
-                          default="Next page, {page}"
-                          token="euiPagination.nextPage"
-                          values={
-                            Object {
-                              "page": 2,
-                            }
-                          }
-                        >
+                                </EuiPaginationButton>
+                              </li>
+                            </PaginationButton>
+                          </ul>
                           <EuiI18n
-                            default="Next page"
-                            token="euiPagination.disabledNextPage"
+                            default="Next page, {page}"
+                            token="euiPagination.nextPage"
+                            values={
+                              Object {
+                                "page": 2,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Next page"
-                              color="text"
-                              data-test-subj="pagination-button-next"
-                              disabled={true}
-                              iconType="arrowRight"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Next page"
+                              token="euiPagination.disabledNextPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
+                                iconType="arrowRight"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowRight"
+                                <button
+                                  aria-label="Next page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-next"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowRight"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                      </nav>
-                    </EuiPagination>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </DestinationsControls>
-          <EuiHorizontalRule
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <EuiBasicTable
-            columns={
-              Array [
-                Object {
-                  "field": "name",
-                  "name": "Destination name",
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "type",
-                  "name": "Destination type",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "user",
-                  "name": "Last updated by",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
+                        </nav>
+                      </EuiPagination>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </DestinationsControls>
+            <EuiHorizontalRule
+              margin="xs"
+            >
+              <hr
+                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+              />
+            </EuiHorizontalRule>
+            <EuiBasicTable
+              columns={
+                Array [
+                  Object {
+                    "field": "name",
+                    "name": "Destination name",
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "type",
+                    "name": "Destination type",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "user",
+                    "name": "Last updated by",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "actions": Array [
+                      Object {
+                        "description": "View this destination.",
+                        "name": "View",
+                        "onClick": [Function],
+                      },
+                    ],
+                    "name": "Actions",
+                    "width": "35px",
+                  },
+                ]
+              }
+              hasActions={true}
+              isSelectable={true}
+              items={Array []}
+              noItemsMessage={
+                <EmptyDestinations
+                  hasNotificationPlugin={false}
+                  isFilterApplied={false}
+                  onResetFilters={[Function]}
+                />
+              }
+              onChange={[Function]}
+              pagination={
                 Object {
-                  "actions": Array [
-                    Object {
-                      "description": "View this destination.",
-                      "name": "View",
-                      "onClick": [Function],
-                    },
+                  "pageIndex": 0,
+                  "pageSize": 20,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    20,
+                    50,
                   ],
-                  "name": "Actions",
-                  "width": "35px",
-                },
-              ]
-            }
-            hasActions={true}
-            isSelectable={true}
-            items={Array []}
-            noItemsMessage={
-              <EmptyDestinations
-                isFilterApplied={false}
-                onResetFilters={[Function]}
-              />
-            }
-            onChange={[Function]}
-            pagination={
-              Object {
-                "pageIndex": 0,
-                "pageSize": 20,
-                "pageSizeOptions": Array [
-                  5,
-                  10,
-                  20,
-                  50,
-                ],
-                "totalItemCount": 0,
+                  "totalItemCount": 0,
+                }
               }
-            }
-            responsive={true}
-            sorting={
-              Object {
-                "sort": Object {
-                  "direction": "desc",
-                  "field": "name",
-                },
+              responsive={true}
+              sorting={
+                Object {
+                  "sort": Object {
+                    "direction": "desc",
+                    "field": "name",
+                  },
+                }
               }
-            }
-            tableLayout="fixed"
-          >
-            <div
-              className="euiBasicTable"
+              tableLayout="fixed"
             >
-              <div>
-                <EuiTableHeaderMobile>
-                  <div
-                    className="euiTableHeaderMobile"
-                  >
-                    <EuiFlexGroup
-                      alignItems="baseline"
-                      justifyContent="spaceBetween"
-                      responsive={false}
+              <div
+                className="euiBasicTable"
+              >
+                <div>
+                  <EuiTableHeaderMobile>
+                    <div
+                      className="euiTableHeaderMobile"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      <EuiFlexGroup
+                        alignItems="baseline"
+                        justifyContent="spaceBetween"
+                        responsive={false}
                       >
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <EuiTableSortMobile
-                              items={
-                                Array [
-                                  Object {
-                                    "isSortAscending": false,
-                                    "isSorted": true,
-                                    "key": "_data_s_name_0",
-                                    "name": "Destination name",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_type_1",
-                                    "name": "Destination type",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_user_2",
-                                    "name": "Last updated by",
-                                    "onSort": [Function],
-                                  },
-                                ]
-                              }
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <div
-                                className="euiTableSortMobile"
+                              <EuiTableSortMobile
+                                items={
+                                  Array [
+                                    Object {
+                                      "isSortAscending": false,
+                                      "isSorted": true,
+                                      "key": "_data_s_name_0",
+                                      "name": "Destination name",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_type_1",
+                                      "name": "Destination type",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_user_2",
+                                      "name": "Last updated by",
+                                      "onSort": [Function],
+                                    },
+                                  ]
+                                }
                               >
-                                <EuiPopover
-                                  anchorPosition="downRight"
-                                  button={
-                                    <EuiButtonEmpty
-                                      flush="right"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                      size="xs"
-                                    >
-                                      <EuiI18n
-                                        default="Sorting"
-                                        token="euiTableSortMobile.sorting"
-                                      />
-                                    </EuiButtonEmpty>
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="none"
+                                <div
+                                  className="euiTableSortMobile"
                                 >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownRight"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
+                                  <EuiPopover
+                                    anchorPosition="downRight"
+                                    button={
                                       <EuiButtonEmpty
                                         flush="right"
                                         iconSide="right"
@@ -1063,246 +1087,318 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
                                         onClick={[Function]}
                                         size="xs"
                                       >
-                                        <button
-                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                          disabled={false}
+                                        <EuiI18n
+                                          default="Sorting"
+                                          token="euiTableSortMobile.sorting"
+                                        />
+                                      </EuiButtonEmpty>
+                                    }
+                                    closePopover={[Function]}
+                                    display="inlineBlock"
+                                    hasArrow={true}
+                                    isOpen={false}
+                                    ownFocus={true}
+                                    panelPaddingSize="none"
+                                  >
+                                    <div
+                                      className="euiPopover euiPopover--anchorDownRight"
+                                    >
+                                      <div
+                                        className="euiPopover__anchor"
+                                      >
+                                        <EuiButtonEmpty
+                                          flush="right"
+                                          iconSide="right"
+                                          iconType="arrowDown"
                                           onClick={[Function]}
-                                          type="button"
+                                          size="xs"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="right"
-                                            iconSize="s"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
+                                          <button
+                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                            <EuiButtonContent
+                                              className="euiButtonEmpty__content"
+                                              iconSide="right"
+                                              iconSize="s"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButtonEmpty__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="s"
-                                                type="arrowDown"
-                                              >
-                                                <div>
-                                                  EuiIconMock
-                                                </div>
-                                              </EuiIcon>
                                               <span
-                                                className="euiButtonEmpty__text"
+                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                               >
-                                                <EuiI18n
-                                                  default="Sorting"
-                                                  token="euiTableSortMobile.sorting"
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="s"
+                                                  type="arrowDown"
+                                                >
+                                                  <div>
+                                                    EuiIconMock
+                                                  </div>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButtonEmpty__text"
                                                 >
-                                                  Sorting
-                                                </EuiI18n>
+                                                  <EuiI18n
+                                                    default="Sorting"
+                                                    token="euiTableSortMobile.sorting"
+                                                  >
+                                                    Sorting
+                                                  </EuiI18n>
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonEmpty>
+                                      </div>
                                     </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiTableSortMobile>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiTableHeaderMobile>
-                <EuiTable
-                  id="generated-id"
-                  responsive={true}
-                  tableLayout="fixed"
-                >
-                  <table
-                    className="euiTable euiTable--responsive"
+                                  </EuiPopover>
+                                </div>
+                              </EuiTableSortMobile>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiTableHeaderMobile>
+                  <EuiTable
                     id="generated-id"
-                    tabIndex={-1}
+                    responsive={true}
+                    tableLayout="fixed"
                   >
-                    <EuiScreenReaderOnly>
-                      <caption
-                        className="euiScreenReaderOnly euiTableCaption"
-                      >
-                        <EuiDelayRender
-                          delay={500}
-                        />
-                      </caption>
-                    </EuiScreenReaderOnly>
-                    <EuiTableHeader>
-                      <thead>
-                        <tr>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_name_0"
-                            isSortAscending={false}
-                            isSorted={true}
-                            key="_data_h_name_0"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="descending"
-                              className="euiTableHeaderCell"
+                    <table
+                      className="euiTable euiTable--responsive"
+                      id="generated-id"
+                      tabIndex={-1}
+                    >
+                      <EuiScreenReaderOnly>
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        >
+                          <EuiDelayRender
+                            delay={500}
+                          />
+                        </caption>
+                      </EuiScreenReaderOnly>
+                      <EuiTableHeader>
+                        <thead>
+                          <tr>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_name_0"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSortAscending={false}
+                              isSorted={true}
+                              key="_data_h_name_0"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="descending"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_name_0"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSortAscending={false}
-                                  isSorted={true}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSortAscending={false}
+                                    isSorted={true}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination name",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination name",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination name"
                                         >
-                                          Destination name
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                    <EuiIcon
-                                      className="euiTableSortIcon"
-                                      size="m"
-                                      type="sortDown"
-                                    >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_type_1"
-                            isSorted={false}
-                            key="_data_h_type_1"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination name"
+                                          >
+                                            Destination name
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                      <EuiIcon
+                                        className="euiTableSortIcon"
+                                        size="m"
+                                        type="sortDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_type_1"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSorted={false}
+                              key="_data_h_type_1"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_type_1"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination type",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination type",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination type"
                                         >
-                                          Destination type
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_user_2"
-                            isSorted={false}
-                            key="_data_h_user_2"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination type"
+                                          >
+                                            Destination type
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_user_2"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
+                              isSorted={false}
+                              key="_data_h_user_2"
+                              onSort={[Function]}
+                              width="100px"
+                            >
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_user_2"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
                                 }
-                              }
+                              >
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <CellContents
+                                    className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Last updated by",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Last updated by"
+                                          >
+                                            Last updated by
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="right"
+                              key="_actions_h_3"
+                              width="35px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                className="euiTableHeaderCell"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "35px",
+                                  }
+                                }
                               >
                                 <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                  showSortMsg={false}
                                 >
                                   <span
-                                    className="euiTableCellContent"
+                                    className="euiTableCellContent euiTableCellContent--alignRight"
                                   >
                                     <EuiInnerText>
                                       <EuiI18n
@@ -1311,166 +1407,122 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
                                         values={
                                           Object {
                                             "description": undefined,
-                                            "innerText": "Last updated by",
+                                            "innerText": "Actions",
                                           }
                                         }
                                       >
                                         <span
                                           className="euiTableCellContent__text"
-                                          title="Last updated by"
+                                          title="Actions"
                                         >
-                                          Last updated by
+                                          Actions
                                         </span>
                                       </EuiI18n>
                                     </EuiInnerText>
                                   </span>
                                 </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="right"
-                            key="_actions_h_3"
-                            width="35px"
-                          >
-                            <th
-                              className="euiTableHeaderCell"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "35px",
-                                }
-                              }
-                            >
-                              <CellContents
-                                className="euiTableCellContent euiTableCellContent--alignRight"
-                                showSortMsg={false}
-                              >
-                                <span
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                >
-                                  <EuiInnerText>
-                                    <EuiI18n
-                                      default="{innerText}; {description}"
-                                      token="euiTableHeaderCell.titleTextWithDesc"
-                                      values={
-                                        Object {
-                                          "description": undefined,
-                                          "innerText": "Actions",
-                                        }
-                                      }
-                                    >
-                                      <span
-                                        className="euiTableCellContent__text"
-                                        title="Actions"
-                                      >
-                                        Actions
-                                      </span>
-                                    </EuiI18n>
-                                  </EuiInnerText>
-                                </span>
-                              </CellContents>
-                            </th>
-                          </EuiTableHeaderCell>
-                        </tr>
-                      </thead>
-                    </EuiTableHeader>
-                    <EuiTableBody>
-                      <tbody>
-                        <EuiTableRow>
-                          <tr
-                            className="euiTableRow"
-                          >
-                            <EuiTableRowCell
-                              align="center"
-                              colSpan={4}
-                              isMobileFullWidth={true}
+                              </th>
+                            </EuiTableHeaderCell>
+                          </tr>
+                        </thead>
+                      </EuiTableHeader>
+                      <EuiTableBody>
+                        <tbody>
+                          <EuiTableRow>
+                            <tr
+                              className="euiTableRow"
                             >
-                              <td
-                                className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              <EuiTableRowCell
+                                align="center"
                                 colSpan={4}
-                                style={
-                                  Object {
-                                    "width": undefined,
-                                  }
-                                }
+                                isMobileFullWidth={true}
                               >
-                                <div
-                                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                                <td
+                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                                  colSpan={4}
+                                  style={
+                                    Object {
+                                      "width": undefined,
+                                    }
+                                  }
                                 >
-                                  <span
-                                    className="euiTableCellContent__text"
+                                  <div
+                                    className="euiTableCellContent euiTableCellContent--alignCenter"
                                   >
-                                    <EmptyDestinations
-                                      isFilterApplied={false}
-                                      onResetFilters={[Function]}
+                                    <span
+                                      className="euiTableCellContent__text"
                                     >
-                                      <EuiEmptyPrompt
-                                        body={
-                                          <EuiText>
-                                            <p>
-                                              There are no existing destinations.
-                                            </p>
-                                          </EuiText>
-                                        }
-                                        style={
-                                          Object {
-                                            "maxWidth": "45em",
-                                          }
-                                        }
+                                      <EmptyDestinations
+                                        hasNotificationPlugin={false}
+                                        isFilterApplied={false}
+                                        onResetFilters={[Function]}
                                       >
-                                        <div
-                                          className="euiEmptyPrompt"
+                                        <EuiEmptyPrompt
+                                          body={
+                                            <EuiText>
+                                              <p>
+                                                There are no existing destinations.
+                                              </p>
+                                            </EuiText>
+                                          }
                                           style={
                                             Object {
                                               "maxWidth": "45em",
                                             }
                                           }
                                         >
-                                          <EuiTextColor
-                                            color="subdued"
+                                          <div
+                                            className="euiEmptyPrompt"
+                                            style={
+                                              Object {
+                                                "maxWidth": "45em",
+                                              }
+                                            }
                                           >
-                                            <span
-                                              className="euiTextColor euiTextColor--subdued"
+                                            <EuiTextColor
+                                              color="subdued"
                                             >
-                                              <EuiText>
-                                                <div
-                                                  className="euiText euiText--medium"
-                                                >
-                                                  <EuiText>
-                                                    <div
-                                                      className="euiText euiText--medium"
-                                                    >
-                                                      <p>
-                                                        There are no existing destinations.
-                                                      </p>
-                                                    </div>
-                                                  </EuiText>
-                                                </div>
-                                              </EuiText>
-                                            </span>
-                                          </EuiTextColor>
-                                        </div>
-                                      </EuiEmptyPrompt>
-                                    </EmptyDestinations>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tr>
-                        </EuiTableRow>
-                      </tbody>
-                    </EuiTableBody>
-                  </table>
-                </EuiTable>
+                                              <span
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                <EuiText>
+                                                  <div
+                                                    className="euiText euiText--medium"
+                                                  >
+                                                    <EuiText>
+                                                      <div
+                                                        className="euiText euiText--medium"
+                                                      >
+                                                        <p>
+                                                          There are no existing destinations.
+                                                        </p>
+                                                      </div>
+                                                    </EuiText>
+                                                  </div>
+                                                </EuiText>
+                                              </span>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiEmptyPrompt>
+                                      </EmptyDestinations>
+                                    </span>
+                                  </div>
+                                </td>
+                              </EuiTableRowCell>
+                            </tr>
+                          </EuiTableRow>
+                        </tbody>
+                      </EuiTableBody>
+                    </table>
+                  </EuiTable>
+                </div>
               </div>
-            </div>
-          </EuiBasicTable>
+            </EuiBasicTable>
+          </div>
         </div>
-      </div>
-    </EuiPanel>
-  </ContentPanel>
+      </EuiPanel>
+    </ContentPanel>
+  </div>
 </DestinationsList>
 `;
 
@@ -1521,41 +1573,75 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
     }
   }
 >
-  <NotificationsInfoCallOut
-    hasNotificationPlugin={false}
-  >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
+  <div>
+    <EuiTitle
+      size="l"
+    >
+      <h3
+        className="euiTitle euiTitle--large"
       >
-        <div
-          className="euiCallOut euiCallOut--primary"
+        Destinations (deprecated)
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    >
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <NotificationsInfoCallOut
+      hasNotificationPlugin={false}
+    >
+      <div>
+        <EuiCallOut
+          color="danger"
+          iconType="alert"
+          title="Unable to send notifications. Notifications plugin is required."
         >
           <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
+            className="euiCallOut euiCallOut--danger"
           >
             <div
-              className="euiText euiText--small"
+              className="euiCallOutHeader"
             >
-              <EuiTextColor
-                color="default"
-                component="div"
+              <EuiIcon
+                aria-hidden="true"
+                className="euiCallOutHeader__icon"
+                color="inherit"
+                size="m"
+                type="alert"
               >
-                <div
-                  className="euiTextColor euiTextColor--default"
+                <div>
+                  EuiIconMock
+                </div>
+              </EuiIcon>
+              <span
+                className="euiCallOutHeader__title"
+              >
+                Unable to send notifications. Notifications plugin is required.
+              </span>
+            </div>
+            <EuiText
+              color="default"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small"
+              >
+                <EuiTextColor
+                  color="default"
+                  component="div"
                 >
-                  <p>
-                    Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+                    </p>
+                    <p>
+                      Existing destinations will be automatically migrated once Notifications plugin is installed.
+                    </p>
                     <EuiSpacer
                       size="l"
                     >
@@ -1563,133 +1649,117 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
                         className="euiSpacer euiSpacer--l"
                       />
                     </EuiSpacer>
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="l"
-      >
-        <div
-          className="euiSpacer euiSpacer--l"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsInfoCallOut>
-  <NotificationsCallOut>
-    <div>
-      <EuiCallOut
-        color="danger"
-        iconType="alert"
-        title="Notifications plugin is not installed"
-      >
-        <div
-          className="euiCallOut euiCallOut--danger"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <EuiIcon
-              aria-hidden="true"
-              className="euiCallOutHeader__icon"
-              color="inherit"
-              size="m"
-              type="alert"
-            >
-              <div>
-                EuiIconMock
-              </div>
-            </EuiIcon>
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Notifications plugin is not installed
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--default"
-                >
-                  <p>
-                    Install the notifications plugin in order to create and select channels to send out notifications.
-                     
-                    <EuiLink
+                    <EuiButton
                       external={true}
-                      href="#"
+                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                      iconSide="right"
+                      iconType="popout"
+                      target="_blank"
                     >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        element="a"
+                        external={true}
+                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                        iconSide="right"
+                        iconType="popout"
+                        isDisabled={false}
+                        rel="noopener noreferrer"
+                        target="_blank"
                       >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
+                        <a
+                          className="euiButton euiButton--primary"
+                          disabled={false}
+                          external={true}
+                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                          rel="noopener noreferrer"
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          target="_blank"
                         >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="popout"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="popout"
+                              >
+                                <div>
+                                  EuiIconMock
+                                </div>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                View install instructions
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </a>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiCallOut>
+        <EuiSpacer
+          size="l"
+        >
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+        </EuiSpacer>
+      </div>
+    </NotificationsInfoCallOut>
+    <ContentPanel
+      actions={
+        <DestinationsActions
+          isEmailAllowed={false}
+          onClickManageEmailGroups={[Function]}
+          onClickManageSenders={[Function]}
         />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={false}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
       }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
+      bodyStyles={
         Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
+          "padding": "initial",
         }
       }
+      title={
+        <div>
+          <EuiTitle
+            size="s"
+            style={
+              Object {
+                "marginBottom": "0px",
+                "paddingBottom": "0px",
+              }
+            }
+          >
+            <h3>
+              Destinations pending for migration
+            </h3>
+          </EuiTitle>
+        </div>
+      }
     >
-      <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      <EuiPanel
         style={
           Object {
             "paddingLeft": "0px",
@@ -1697,697 +1767,703 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
           }
         }
       >
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="spaceBetween"
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           style={
             Object {
-              "padding": "0px 10px",
+              "paddingLeft": "0px",
+              "paddingRight": "0px",
             }
           }
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceBetween"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
-              >
-                <EuiTitle
-                  size="l"
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style={
+                Object {
+                  "padding": "0px 10px",
+                }
+              }
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <h3
-                    className="euiTitle euiTitle--large"
+                  <EuiTitle
+                    size="l"
                   >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+                    <h3
+                      className="euiTitle euiTitle--large"
+                    >
+                      <div>
+                        <EuiTitle
+                          size="s"
+                          style={
+                            Object {
+                              "marginBottom": "0px",
+                              "paddingBottom": "0px",
+                            }
+                          }
+                        >
+                          <h3
+                            className="euiTitle euiTitle--small"
+                            style={
+                              Object {
+                                "marginBottom": "0px",
+                                "paddingBottom": "0px",
+                              }
+                            }
+                          >
+                            Destinations pending for migration
+                          </h3>
+                        </EuiTitle>
+                      </div>
+                    </h3>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <DestinationsActions
-                          isEmailAllowed={false}
-                          onClickManageEmailGroups={[Function]}
-                          onClickManageSenders={[Function]}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            justifyContent="spaceBetween"
+                          <DestinationsActions
+                            isEmailAllowed={false}
+                            onClickManageEmailGroups={[Function]}
+                            onClickManageSenders={[Function]}
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                            />
-                          </EuiFlexGroup>
-                        </DestinationsActions>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-        <EuiText
-          color="subdued"
-          size="xs"
-          style={
-            Object {
-              "padding": "0px 10px",
-            }
-          }
-        >
-          <div
-            className="euiText euiText--extraSmall"
+                            <EuiFlexGroup
+                              alignItems="center"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              />
+                            </EuiFlexGroup>
+                          </DestinationsActions>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiText
+            color="subdued"
+            size="xs"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiTextColor
-              color="subdued"
-              component="div"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              />
-            </EuiTextColor>
-          </div>
-        </EuiText>
-        <EuiHorizontalRule
-          className=""
-          margin="xs"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-          />
-        </EuiHorizontalRule>
-        <div
-          style={
-            Object {
-              "padding": "initial",
-            }
-          }
-        >
-          <DeleteConfirmation
-            isVisible={false}
-            onCancel={[Function]}
-            onConfirm={[Function]}
-          />
-          <ManageSenders
-            httpClient={[MockFunction]}
-            isEmailAllowed={false}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <ManageEmailGroups
-            httpClient={[MockFunction]}
-            isEmailAllowed={false}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <DestinationsControls
-            activePage={0}
-            allowList={Array []}
-            onPageClick={[Function]}
-            onSearchChange={[Function]}
-            onTypeChange={[Function]}
-            pageCount={1}
-            search=""
-            type="ALL"
-          >
-            <EuiFlexGroup
+            <div
+              className="euiText euiText--extraSmall"
               style={
                 Object {
-                  "padding": "0px 5px",
+                  "padding": "0px 10px",
                 }
               }
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              <EuiTextColor
+                color="subdued"
+                component="div"
+              >
+                <div
+                  className="euiTextColor euiTextColor--subdued"
+                />
+              </EuiTextColor>
+            </div>
+          </EuiText>
+          <EuiHorizontalRule
+            className=""
+            margin="xs"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+            />
+          </EuiHorizontalRule>
+          <div
+            style={
+              Object {
+                "padding": "initial",
+              }
+            }
+          >
+            <DeleteConfirmation
+              isVisible={false}
+              onCancel={[Function]}
+              onConfirm={[Function]}
+            />
+            <ManageSenders
+              httpClient={[MockFunction]}
+              isEmailAllowed={false}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <ManageEmailGroups
+              httpClient={[MockFunction]}
+              isEmailAllowed={false}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <DestinationsControls
+              activePage={0}
+              allowList={Array []}
+              onPageClick={[Function]}
+              onSearchChange={[Function]}
+              onTypeChange={[Function]}
+              pageCount={1}
+              search=""
+              type="ALL"
+            >
+              <EuiFlexGroup
                 style={
                   Object {
                     "padding": "0px 5px",
                   }
                 }
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <EuiFieldSearch
-                      compressed={false}
-                      fullWidth={true}
-                      incremental={false}
-                      isClearable={true}
-                      isLoading={false}
-                      onChange={[Function]}
-                      placeholder="Search"
-                      value=""
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  style={
+                    Object {
+                      "padding": "0px 5px",
+                    }
+                  }
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
                     >
-                      <EuiFormControlLayout
+                      <EuiFieldSearch
                         compressed={false}
                         fullWidth={true}
-                        icon="search"
+                        incremental={false}
+                        isClearable={true}
                         isLoading={false}
+                        onChange={[Function]}
+                        placeholder="Search"
+                        value=""
                       >
-                        <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={true}
+                          icon="search"
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
                           >
-                            <EuiValidatableControl>
-                              <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                onChange={[Function]}
-                                onKeyUp={[Function]}
-                                placeholder="Search"
-                                type="search"
-                                value=""
-                              />
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon="search"
-                              isLoading={false}
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <div
-                                className="euiFormControlLayoutIcons"
-                              >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                              <EuiValidatableControl>
+                                <input
+                                  className="euiFieldSearch euiFieldSearch--fullWidth"
+                                  onChange={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
                                   type="search"
+                                  value=""
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon="search"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="search"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="search"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="search"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiFieldSearch>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiFieldSearch>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                   >
-                    <EuiSelect
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "All type",
-                            "value": "ALL",
-                          },
-                        ]
-                      }
-                      value="ALL"
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All type",
+                              "value": "ALL",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All type
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All type
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                  style={
-                    Object {
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                     style={
                       Object {
                         "justifyContent": "center",
                       }
                     }
                   >
-                    <EuiPagination
-                      activePage={0}
-                      onPageClick={[Function]}
-                      pageCount={1}
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      style={
+                        Object {
+                          "justifyContent": "center",
+                        }
+                      }
                     >
-                      <nav
-                        className="euiPagination"
+                      <EuiPagination
+                        activePage={0}
+                        onPageClick={[Function]}
+                        pageCount={1}
                       >
-                        <EuiI18n
-                          default="Previous page, {page}"
-                          token="euiPagination.previousPage"
-                          values={
-                            Object {
-                              "page": 0,
-                            }
-                          }
+                        <nav
+                          className="euiPagination"
                         >
                           <EuiI18n
-                            default="Previous page"
-                            token="euiPagination.disabledPreviousPage"
+                            default="Previous page, {page}"
+                            token="euiPagination.previousPage"
+                            values={
+                              Object {
+                                "page": 0,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Previous page"
-                              color="text"
-                              data-test-subj="pagination-button-previous"
-                              disabled={true}
-                              iconType="arrowLeft"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Previous page"
+                              token="euiPagination.disabledPreviousPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Previous page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-previous"
                                 disabled={true}
+                                iconType="arrowLeft"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowLeft"
+                                <button
+                                  aria-label="Previous page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-previous"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowLeft"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                        <ul
-                          className="euiPagination__list"
-                        >
-                          <PaginationButton
-                            key="0"
-                            pageIndex={0}
+                          <ul
+                            className="euiPagination__list"
                           >
-                            <li
-                              className="euiPagination__item"
+                            <PaginationButton
+                              key="0"
+                              pageIndex={0}
                             >
-                              <EuiPaginationButton
-                                hideOnMobile={true}
-                                isActive={true}
-                                onClick={[Function]}
-                                pageIndex={0}
-                                totalPages={1}
+                              <li
+                                className="euiPagination__item"
                               >
-                                <EuiI18n
-                                  default="Page {page} of {totalPages}"
-                                  token="euiPaginationButton.longPageString"
-                                  values={
-                                    Object {
-                                      "page": 1,
-                                      "totalPages": 1,
-                                    }
-                                  }
+                                <EuiPaginationButton
+                                  hideOnMobile={true}
+                                  isActive={true}
+                                  onClick={[Function]}
+                                  pageIndex={0}
+                                  totalPages={1}
                                 >
                                   <EuiI18n
-                                    default="Page {page}"
-                                    token="euiPaginationButton.shortPageString"
+                                    default="Page {page} of {totalPages}"
+                                    token="euiPaginationButton.longPageString"
                                     values={
                                       Object {
                                         "page": 1,
+                                        "totalPages": 1,
                                       }
                                     }
                                   >
-                                    <EuiButtonEmpty
-                                      aria-current={true}
-                                      aria-label="Page 1 of 1"
-                                      className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                      color="text"
-                                      data-test-subj="pagination-button-0"
-                                      isDisabled={true}
-                                      onClick={[Function]}
-                                      size="s"
+                                    <EuiI18n
+                                      default="Page {page}"
+                                      token="euiPaginationButton.shortPageString"
+                                      values={
+                                        Object {
+                                          "page": 1,
+                                        }
+                                      }
                                     >
-                                      <button
+                                      <EuiButtonEmpty
                                         aria-current={true}
                                         aria-label="Page 1 of 1"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        color="text"
                                         data-test-subj="pagination-button-0"
-                                        disabled={true}
+                                        isDisabled={true}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="left"
-                                          iconSize="m"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text",
-                                            }
-                                          }
+                                        <button
+                                          aria-current={true}
+                                          aria-label="Page 1 of 1"
+                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                          data-test-subj="pagination-button-0"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          type="button"
                                         >
-                                          <span
-                                            className="euiButtonContent euiButtonEmpty__content"
+                                          <EuiButtonContent
+                                            className="euiButtonEmpty__content"
+                                            iconSide="left"
+                                            iconSize="m"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text",
+                                              }
+                                            }
                                           >
                                             <span
-                                              className="euiButtonEmpty__text"
+                                              className="euiButtonContent euiButtonEmpty__content"
                                             >
-                                              1
+                                              <span
+                                                className="euiButtonEmpty__text"
+                                              >
+                                                1
+                                              </span>
                                             </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </EuiI18n>
                                   </EuiI18n>
-                                </EuiI18n>
-                              </EuiPaginationButton>
-                            </li>
-                          </PaginationButton>
-                        </ul>
-                        <EuiI18n
-                          default="Next page, {page}"
-                          token="euiPagination.nextPage"
-                          values={
-                            Object {
-                              "page": 2,
-                            }
-                          }
-                        >
+                                </EuiPaginationButton>
+                              </li>
+                            </PaginationButton>
+                          </ul>
                           <EuiI18n
-                            default="Next page"
-                            token="euiPagination.disabledNextPage"
+                            default="Next page, {page}"
+                            token="euiPagination.nextPage"
+                            values={
+                              Object {
+                                "page": 2,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Next page"
-                              color="text"
-                              data-test-subj="pagination-button-next"
-                              disabled={true}
-                              iconType="arrowRight"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Next page"
+                              token="euiPagination.disabledNextPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
+                                iconType="arrowRight"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowRight"
+                                <button
+                                  aria-label="Next page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-next"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowRight"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                      </nav>
-                    </EuiPagination>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </DestinationsControls>
-          <EuiHorizontalRule
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <EuiBasicTable
-            columns={
-              Array [
-                Object {
-                  "field": "name",
-                  "name": "Destination name",
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "type",
-                  "name": "Destination type",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "user",
-                  "name": "Last updated by",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
+                        </nav>
+                      </EuiPagination>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </DestinationsControls>
+            <EuiHorizontalRule
+              margin="xs"
+            >
+              <hr
+                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+              />
+            </EuiHorizontalRule>
+            <EuiBasicTable
+              columns={
+                Array [
+                  Object {
+                    "field": "name",
+                    "name": "Destination name",
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "type",
+                    "name": "Destination type",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "user",
+                    "name": "Last updated by",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "actions": Array [
+                      Object {
+                        "description": "View this destination.",
+                        "name": "View",
+                        "onClick": [Function],
+                      },
+                    ],
+                    "name": "Actions",
+                    "width": "35px",
+                  },
+                ]
+              }
+              hasActions={true}
+              isSelectable={true}
+              items={Array []}
+              noItemsMessage={
+                <EmptyDestinations
+                  hasNotificationPlugin={false}
+                  isFilterApplied={false}
+                  onResetFilters={[Function]}
+                />
+              }
+              onChange={[Function]}
+              pagination={
                 Object {
-                  "actions": Array [
-                    Object {
-                      "description": "View this destination.",
-                      "name": "View",
-                      "onClick": [Function],
-                    },
+                  "pageIndex": 0,
+                  "pageSize": 20,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    20,
+                    50,
                   ],
-                  "name": "Actions",
-                  "width": "35px",
-                },
-              ]
-            }
-            hasActions={true}
-            isSelectable={true}
-            items={Array []}
-            noItemsMessage={
-              <EmptyDestinations
-                isFilterApplied={false}
-                onResetFilters={[Function]}
-              />
-            }
-            onChange={[Function]}
-            pagination={
-              Object {
-                "pageIndex": 0,
-                "pageSize": 20,
-                "pageSizeOptions": Array [
-                  5,
-                  10,
-                  20,
-                  50,
-                ],
-                "totalItemCount": 0,
+                  "totalItemCount": 0,
+                }
               }
-            }
-            responsive={true}
-            sorting={
-              Object {
-                "sort": Object {
-                  "direction": "desc",
-                  "field": "name",
-                },
+              responsive={true}
+              sorting={
+                Object {
+                  "sort": Object {
+                    "direction": "desc",
+                    "field": "name",
+                  },
+                }
               }
-            }
-            tableLayout="fixed"
-          >
-            <div
-              className="euiBasicTable"
+              tableLayout="fixed"
             >
-              <div>
-                <EuiTableHeaderMobile>
-                  <div
-                    className="euiTableHeaderMobile"
-                  >
-                    <EuiFlexGroup
-                      alignItems="baseline"
-                      justifyContent="spaceBetween"
-                      responsive={false}
+              <div
+                className="euiBasicTable"
+              >
+                <div>
+                  <EuiTableHeaderMobile>
+                    <div
+                      className="euiTableHeaderMobile"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      <EuiFlexGroup
+                        alignItems="baseline"
+                        justifyContent="spaceBetween"
+                        responsive={false}
                       >
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <EuiTableSortMobile
-                              items={
-                                Array [
-                                  Object {
-                                    "isSortAscending": false,
-                                    "isSorted": true,
-                                    "key": "_data_s_name_0",
-                                    "name": "Destination name",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_type_1",
-                                    "name": "Destination type",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_user_2",
-                                    "name": "Last updated by",
-                                    "onSort": [Function],
-                                  },
-                                ]
-                              }
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <div
-                                className="euiTableSortMobile"
+                              <EuiTableSortMobile
+                                items={
+                                  Array [
+                                    Object {
+                                      "isSortAscending": false,
+                                      "isSorted": true,
+                                      "key": "_data_s_name_0",
+                                      "name": "Destination name",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_type_1",
+                                      "name": "Destination type",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_user_2",
+                                      "name": "Last updated by",
+                                      "onSort": [Function],
+                                    },
+                                  ]
+                                }
                               >
-                                <EuiPopover
-                                  anchorPosition="downRight"
-                                  button={
-                                    <EuiButtonEmpty
-                                      flush="right"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                      size="xs"
-                                    >
-                                      <EuiI18n
-                                        default="Sorting"
-                                        token="euiTableSortMobile.sorting"
-                                      />
-                                    </EuiButtonEmpty>
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="none"
+                                <div
+                                  className="euiTableSortMobile"
                                 >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownRight"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
+                                  <EuiPopover
+                                    anchorPosition="downRight"
+                                    button={
                                       <EuiButtonEmpty
                                         flush="right"
                                         iconSide="right"
@@ -2395,246 +2471,318 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
                                         onClick={[Function]}
                                         size="xs"
                                       >
-                                        <button
-                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                          disabled={false}
+                                        <EuiI18n
+                                          default="Sorting"
+                                          token="euiTableSortMobile.sorting"
+                                        />
+                                      </EuiButtonEmpty>
+                                    }
+                                    closePopover={[Function]}
+                                    display="inlineBlock"
+                                    hasArrow={true}
+                                    isOpen={false}
+                                    ownFocus={true}
+                                    panelPaddingSize="none"
+                                  >
+                                    <div
+                                      className="euiPopover euiPopover--anchorDownRight"
+                                    >
+                                      <div
+                                        className="euiPopover__anchor"
+                                      >
+                                        <EuiButtonEmpty
+                                          flush="right"
+                                          iconSide="right"
+                                          iconType="arrowDown"
                                           onClick={[Function]}
-                                          type="button"
+                                          size="xs"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="right"
-                                            iconSize="s"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
+                                          <button
+                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                            <EuiButtonContent
+                                              className="euiButtonEmpty__content"
+                                              iconSide="right"
+                                              iconSize="s"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButtonEmpty__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="s"
-                                                type="arrowDown"
-                                              >
-                                                <div>
-                                                  EuiIconMock
-                                                </div>
-                                              </EuiIcon>
                                               <span
-                                                className="euiButtonEmpty__text"
+                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                               >
-                                                <EuiI18n
-                                                  default="Sorting"
-                                                  token="euiTableSortMobile.sorting"
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="s"
+                                                  type="arrowDown"
+                                                >
+                                                  <div>
+                                                    EuiIconMock
+                                                  </div>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButtonEmpty__text"
                                                 >
-                                                  Sorting
-                                                </EuiI18n>
+                                                  <EuiI18n
+                                                    default="Sorting"
+                                                    token="euiTableSortMobile.sorting"
+                                                  >
+                                                    Sorting
+                                                  </EuiI18n>
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonEmpty>
+                                      </div>
                                     </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiTableSortMobile>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiTableHeaderMobile>
-                <EuiTable
-                  id="generated-id"
-                  responsive={true}
-                  tableLayout="fixed"
-                >
-                  <table
-                    className="euiTable euiTable--responsive"
+                                  </EuiPopover>
+                                </div>
+                              </EuiTableSortMobile>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiTableHeaderMobile>
+                  <EuiTable
                     id="generated-id"
-                    tabIndex={-1}
+                    responsive={true}
+                    tableLayout="fixed"
                   >
-                    <EuiScreenReaderOnly>
-                      <caption
-                        className="euiScreenReaderOnly euiTableCaption"
-                      >
-                        <EuiDelayRender
-                          delay={500}
-                        />
-                      </caption>
-                    </EuiScreenReaderOnly>
-                    <EuiTableHeader>
-                      <thead>
-                        <tr>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_name_0"
-                            isSortAscending={false}
-                            isSorted={true}
-                            key="_data_h_name_0"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="descending"
-                              className="euiTableHeaderCell"
+                    <table
+                      className="euiTable euiTable--responsive"
+                      id="generated-id"
+                      tabIndex={-1}
+                    >
+                      <EuiScreenReaderOnly>
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        >
+                          <EuiDelayRender
+                            delay={500}
+                          />
+                        </caption>
+                      </EuiScreenReaderOnly>
+                      <EuiTableHeader>
+                        <thead>
+                          <tr>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_name_0"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSortAscending={false}
+                              isSorted={true}
+                              key="_data_h_name_0"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="descending"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_name_0"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSortAscending={false}
-                                  isSorted={true}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSortAscending={false}
+                                    isSorted={true}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination name",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination name",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination name"
                                         >
-                                          Destination name
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                    <EuiIcon
-                                      className="euiTableSortIcon"
-                                      size="m"
-                                      type="sortDown"
-                                    >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_type_1"
-                            isSorted={false}
-                            key="_data_h_type_1"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination name"
+                                          >
+                                            Destination name
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                      <EuiIcon
+                                        className="euiTableSortIcon"
+                                        size="m"
+                                        type="sortDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_type_1"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSorted={false}
+                              key="_data_h_type_1"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_type_1"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination type",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination type",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination type"
                                         >
-                                          Destination type
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_user_2"
-                            isSorted={false}
-                            key="_data_h_user_2"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination type"
+                                          >
+                                            Destination type
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_user_2"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
+                              isSorted={false}
+                              key="_data_h_user_2"
+                              onSort={[Function]}
+                              width="100px"
+                            >
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_user_2"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
                                 }
-                              }
+                              >
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <CellContents
+                                    className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Last updated by",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Last updated by"
+                                          >
+                                            Last updated by
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="right"
+                              key="_actions_h_3"
+                              width="35px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                className="euiTableHeaderCell"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "35px",
+                                  }
+                                }
                               >
                                 <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                  showSortMsg={false}
                                 >
                                   <span
-                                    className="euiTableCellContent"
+                                    className="euiTableCellContent euiTableCellContent--alignRight"
                                   >
                                     <EuiInnerText>
                                       <EuiI18n
@@ -2643,166 +2791,122 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
                                         values={
                                           Object {
                                             "description": undefined,
-                                            "innerText": "Last updated by",
+                                            "innerText": "Actions",
                                           }
                                         }
                                       >
                                         <span
                                           className="euiTableCellContent__text"
-                                          title="Last updated by"
+                                          title="Actions"
                                         >
-                                          Last updated by
+                                          Actions
                                         </span>
                                       </EuiI18n>
                                     </EuiInnerText>
                                   </span>
                                 </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="right"
-                            key="_actions_h_3"
-                            width="35px"
-                          >
-                            <th
-                              className="euiTableHeaderCell"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "35px",
-                                }
-                              }
-                            >
-                              <CellContents
-                                className="euiTableCellContent euiTableCellContent--alignRight"
-                                showSortMsg={false}
-                              >
-                                <span
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                >
-                                  <EuiInnerText>
-                                    <EuiI18n
-                                      default="{innerText}; {description}"
-                                      token="euiTableHeaderCell.titleTextWithDesc"
-                                      values={
-                                        Object {
-                                          "description": undefined,
-                                          "innerText": "Actions",
-                                        }
-                                      }
-                                    >
-                                      <span
-                                        className="euiTableCellContent__text"
-                                        title="Actions"
-                                      >
-                                        Actions
-                                      </span>
-                                    </EuiI18n>
-                                  </EuiInnerText>
-                                </span>
-                              </CellContents>
-                            </th>
-                          </EuiTableHeaderCell>
-                        </tr>
-                      </thead>
-                    </EuiTableHeader>
-                    <EuiTableBody>
-                      <tbody>
-                        <EuiTableRow>
-                          <tr
-                            className="euiTableRow"
-                          >
-                            <EuiTableRowCell
-                              align="center"
-                              colSpan={4}
-                              isMobileFullWidth={true}
+                              </th>
+                            </EuiTableHeaderCell>
+                          </tr>
+                        </thead>
+                      </EuiTableHeader>
+                      <EuiTableBody>
+                        <tbody>
+                          <EuiTableRow>
+                            <tr
+                              className="euiTableRow"
                             >
-                              <td
-                                className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              <EuiTableRowCell
+                                align="center"
                                 colSpan={4}
-                                style={
-                                  Object {
-                                    "width": undefined,
-                                  }
-                                }
+                                isMobileFullWidth={true}
                               >
-                                <div
-                                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                                <td
+                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                                  colSpan={4}
+                                  style={
+                                    Object {
+                                      "width": undefined,
+                                    }
+                                  }
                                 >
-                                  <span
-                                    className="euiTableCellContent__text"
+                                  <div
+                                    className="euiTableCellContent euiTableCellContent--alignCenter"
                                   >
-                                    <EmptyDestinations
-                                      isFilterApplied={false}
-                                      onResetFilters={[Function]}
+                                    <span
+                                      className="euiTableCellContent__text"
                                     >
-                                      <EuiEmptyPrompt
-                                        body={
-                                          <EuiText>
-                                            <p>
-                                              There are no existing destinations.
-                                            </p>
-                                          </EuiText>
-                                        }
-                                        style={
-                                          Object {
-                                            "maxWidth": "45em",
-                                          }
-                                        }
+                                      <EmptyDestinations
+                                        hasNotificationPlugin={false}
+                                        isFilterApplied={false}
+                                        onResetFilters={[Function]}
                                       >
-                                        <div
-                                          className="euiEmptyPrompt"
+                                        <EuiEmptyPrompt
+                                          body={
+                                            <EuiText>
+                                              <p>
+                                                There are no existing destinations.
+                                              </p>
+                                            </EuiText>
+                                          }
                                           style={
                                             Object {
                                               "maxWidth": "45em",
                                             }
                                           }
                                         >
-                                          <EuiTextColor
-                                            color="subdued"
+                                          <div
+                                            className="euiEmptyPrompt"
+                                            style={
+                                              Object {
+                                                "maxWidth": "45em",
+                                              }
+                                            }
                                           >
-                                            <span
-                                              className="euiTextColor euiTextColor--subdued"
+                                            <EuiTextColor
+                                              color="subdued"
                                             >
-                                              <EuiText>
-                                                <div
-                                                  className="euiText euiText--medium"
-                                                >
-                                                  <EuiText>
-                                                    <div
-                                                      className="euiText euiText--medium"
-                                                    >
-                                                      <p>
-                                                        There are no existing destinations.
-                                                      </p>
-                                                    </div>
-                                                  </EuiText>
-                                                </div>
-                                              </EuiText>
-                                            </span>
-                                          </EuiTextColor>
-                                        </div>
-                                      </EuiEmptyPrompt>
-                                    </EmptyDestinations>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tr>
-                        </EuiTableRow>
-                      </tbody>
-                    </EuiTableBody>
-                  </table>
-                </EuiTable>
+                                              <span
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                <EuiText>
+                                                  <div
+                                                    className="euiText euiText--medium"
+                                                  >
+                                                    <EuiText>
+                                                      <div
+                                                        className="euiText euiText--medium"
+                                                      >
+                                                        <p>
+                                                          There are no existing destinations.
+                                                        </p>
+                                                      </div>
+                                                    </EuiText>
+                                                  </div>
+                                                </EuiText>
+                                              </span>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiEmptyPrompt>
+                                      </EmptyDestinations>
+                                    </span>
+                                  </div>
+                                </td>
+                              </EuiTableRowCell>
+                            </tr>
+                          </EuiTableRow>
+                        </tbody>
+                      </EuiTableBody>
+                    </table>
+                  </EuiTable>
+                </div>
               </div>
-            </div>
-          </EuiBasicTable>
+            </EuiBasicTable>
+          </div>
         </div>
-      </div>
-    </EuiPanel>
-  </ContentPanel>
+      </EuiPanel>
+    </ContentPanel>
+  </div>
 </DestinationsList>
 `;
 
@@ -2853,41 +2957,75 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
     }
   }
 >
-  <NotificationsInfoCallOut
-    hasNotificationPlugin={false}
-  >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
+  <div>
+    <EuiTitle
+      size="l"
+    >
+      <h3
+        className="euiTitle euiTitle--large"
       >
-        <div
-          className="euiCallOut euiCallOut--primary"
+        Destinations (deprecated)
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    >
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <NotificationsInfoCallOut
+      hasNotificationPlugin={false}
+    >
+      <div>
+        <EuiCallOut
+          color="danger"
+          iconType="alert"
+          title="Unable to send notifications. Notifications plugin is required."
         >
           <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
+            className="euiCallOut euiCallOut--danger"
           >
             <div
-              className="euiText euiText--small"
+              className="euiCallOutHeader"
             >
-              <EuiTextColor
-                color="default"
-                component="div"
+              <EuiIcon
+                aria-hidden="true"
+                className="euiCallOutHeader__icon"
+                color="inherit"
+                size="m"
+                type="alert"
               >
-                <div
-                  className="euiTextColor euiTextColor--default"
+                <div>
+                  EuiIconMock
+                </div>
+              </EuiIcon>
+              <span
+                className="euiCallOutHeader__title"
+              >
+                Unable to send notifications. Notifications plugin is required.
+              </span>
+            </div>
+            <EuiText
+              color="default"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small"
+              >
+                <EuiTextColor
+                  color="default"
+                  component="div"
                 >
-                  <p>
-                    Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
+                  <div
+                    className="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+                    </p>
+                    <p>
+                      Existing destinations will be automatically migrated once Notifications plugin is installed.
+                    </p>
                     <EuiSpacer
                       size="l"
                     >
@@ -2895,867 +3033,857 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
                         className="euiSpacer euiSpacer--l"
                       />
                     </EuiSpacer>
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="l"
-      >
-        <div
-          className="euiSpacer euiSpacer--l"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsInfoCallOut>
-  <NotificationsCallOut>
-    <div>
-      <EuiCallOut
-        color="danger"
-        iconType="alert"
-        title="Notifications plugin is not installed"
-      >
-        <div
-          className="euiCallOut euiCallOut--danger"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <EuiIcon
-              aria-hidden="true"
-              className="euiCallOutHeader__icon"
-              color="inherit"
-              size="m"
-              type="alert"
-            >
-              <div>
-                EuiIconMock
-              </div>
-            </EuiIcon>
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Notifications plugin is not installed
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--default"
-                >
-                  <p>
-                    Install the notifications plugin in order to create and select channels to send out notifications.
-                     
-                    <EuiLink
+                    <EuiButton
                       external={true}
-                      href="#"
+                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                      iconSide="right"
+                      iconType="popout"
+                      target="_blank"
                     >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        element="a"
+                        external={true}
+                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                        iconSide="right"
+                        iconType="popout"
+                        isDisabled={false}
+                        rel="noopener noreferrer"
+                        target="_blank"
                       >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
+                        <a
+                          className="euiButton euiButton--primary"
+                          disabled={false}
+                          external={true}
+                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                          rel="noopener noreferrer"
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          target="_blank"
                         >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="popout"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="popout"
+                              >
+                                <div>
+                                  EuiIconMock
+                                </div>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                View install instructions
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </a>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiCallOut>
+        <EuiSpacer
+          size="l"
+        >
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+        </EuiSpacer>
+      </div>
+    </NotificationsInfoCallOut>
+    <ContentPanel
+      actions={
+        <DestinationsActions
+          isEmailAllowed={false}
+          onClickManageEmailGroups={[Function]}
+          onClickManageSenders={[Function]}
         />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={false}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
       }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
+      bodyStyles={
         Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
+          "padding": "initial",
         }
       }
-    >
-      <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-        style={
-          Object {
-            "paddingLeft": "0px",
-            "paddingRight": "0px",
-          }
+      title={
+        <div>
+          <EuiTitle
+            size="s"
+            style={
+              Object {
+                "marginBottom": "0px",
+                "paddingBottom": "0px",
+              }
+            }
+          >
+            <h3>
+              Destinations pending for migration
+            </h3>
+          </EuiTitle>
+        </div>
+      }
+    >
+      <EuiPanel
+        style={
+          Object {
+            "paddingLeft": "0px",
+            "paddingRight": "0px",
+          }
         }
       >
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="spaceBetween"
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           style={
             Object {
-              "padding": "0px 10px",
+              "paddingLeft": "0px",
+              "paddingRight": "0px",
             }
           }
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceBetween"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
-              >
-                <EuiTitle
-                  size="l"
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style={
+                Object {
+                  "padding": "0px 10px",
+                }
+              }
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <h3
-                    className="euiTitle euiTitle--large"
+                  <EuiTitle
+                    size="l"
                   >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+                    <h3
+                      className="euiTitle euiTitle--large"
+                    >
+                      <div>
+                        <EuiTitle
+                          size="s"
+                          style={
+                            Object {
+                              "marginBottom": "0px",
+                              "paddingBottom": "0px",
+                            }
+                          }
+                        >
+                          <h3
+                            className="euiTitle euiTitle--small"
+                            style={
+                              Object {
+                                "marginBottom": "0px",
+                                "paddingBottom": "0px",
+                              }
+                            }
+                          >
+                            Destinations pending for migration
+                          </h3>
+                        </EuiTitle>
+                      </div>
+                    </h3>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <DestinationsActions
-                          isEmailAllowed={false}
-                          onClickManageEmailGroups={[Function]}
-                          onClickManageSenders={[Function]}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            justifyContent="spaceBetween"
+                          <DestinationsActions
+                            isEmailAllowed={false}
+                            onClickManageEmailGroups={[Function]}
+                            onClickManageSenders={[Function]}
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                            />
-                          </EuiFlexGroup>
-                        </DestinationsActions>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-        <EuiText
-          color="subdued"
-          size="xs"
-          style={
-            Object {
-              "padding": "0px 10px",
-            }
-          }
-        >
-          <div
-            className="euiText euiText--extraSmall"
+                            <EuiFlexGroup
+                              alignItems="center"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              />
+                            </EuiFlexGroup>
+                          </DestinationsActions>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiText
+            color="subdued"
+            size="xs"
             style={
               Object {
                 "padding": "0px 10px",
               }
             }
           >
-            <EuiTextColor
-              color="subdued"
-              component="div"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              />
-            </EuiTextColor>
-          </div>
-        </EuiText>
-        <EuiHorizontalRule
-          className=""
-          margin="xs"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-          />
-        </EuiHorizontalRule>
-        <div
-          style={
-            Object {
-              "padding": "initial",
-            }
-          }
-        >
-          <DeleteConfirmation
-            isVisible={false}
-            onCancel={[Function]}
-            onConfirm={[Function]}
-          />
-          <ManageSenders
-            httpClient={[MockFunction]}
-            isEmailAllowed={false}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <ManageEmailGroups
-            httpClient={[MockFunction]}
-            isEmailAllowed={false}
-            isVisible={false}
-            onClickCancel={[Function]}
-            onClickSave={[Function]}
-          />
-          <DestinationsControls
-            activePage={0}
-            allowList={
-              Array [
-                "chime",
-                "slack",
-                "custom_webhook",
-              ]
-            }
-            onPageClick={[Function]}
-            onSearchChange={[Function]}
-            onTypeChange={[Function]}
-            pageCount={1}
-            search=""
-            type="ALL"
-          >
-            <EuiFlexGroup
+            <div
+              className="euiText euiText--extraSmall"
               style={
                 Object {
-                  "padding": "0px 5px",
+                  "padding": "0px 10px",
                 }
               }
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              <EuiTextColor
+                color="subdued"
+                component="div"
+              >
+                <div
+                  className="euiTextColor euiTextColor--subdued"
+                />
+              </EuiTextColor>
+            </div>
+          </EuiText>
+          <EuiHorizontalRule
+            className=""
+            margin="xs"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+            />
+          </EuiHorizontalRule>
+          <div
+            style={
+              Object {
+                "padding": "initial",
+              }
+            }
+          >
+            <DeleteConfirmation
+              isVisible={false}
+              onCancel={[Function]}
+              onConfirm={[Function]}
+            />
+            <ManageSenders
+              httpClient={[MockFunction]}
+              isEmailAllowed={false}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <ManageEmailGroups
+              httpClient={[MockFunction]}
+              isEmailAllowed={false}
+              isVisible={false}
+              onClickCancel={[Function]}
+              onClickSave={[Function]}
+            />
+            <DestinationsControls
+              activePage={0}
+              allowList={
+                Array [
+                  "chime",
+                  "slack",
+                  "custom_webhook",
+                ]
+              }
+              onPageClick={[Function]}
+              onSearchChange={[Function]}
+              onTypeChange={[Function]}
+              pageCount={1}
+              search=""
+              type="ALL"
+            >
+              <EuiFlexGroup
                 style={
                   Object {
                     "padding": "0px 5px",
                   }
                 }
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <EuiFieldSearch
-                      compressed={false}
-                      fullWidth={true}
-                      incremental={false}
-                      isClearable={true}
-                      isLoading={false}
-                      onChange={[Function]}
-                      placeholder="Search"
-                      value=""
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  style={
+                    Object {
+                      "padding": "0px 5px",
+                    }
+                  }
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
                     >
-                      <EuiFormControlLayout
+                      <EuiFieldSearch
                         compressed={false}
                         fullWidth={true}
-                        icon="search"
+                        incremental={false}
+                        isClearable={true}
                         isLoading={false}
+                        onChange={[Function]}
+                        placeholder="Search"
+                        value=""
                       >
-                        <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={true}
+                          icon="search"
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
                           >
-                            <EuiValidatableControl>
-                              <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                onChange={[Function]}
-                                onKeyUp={[Function]}
-                                placeholder="Search"
-                                type="search"
-                                value=""
-                              />
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon="search"
-                              isLoading={false}
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <div
-                                className="euiFormControlLayoutIcons"
-                              >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                              <EuiValidatableControl>
+                                <input
+                                  className="euiFieldSearch euiFieldSearch--fullWidth"
+                                  onChange={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
                                   type="search"
+                                  value=""
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon="search"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="search"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="search"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="search"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiFieldSearch>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiFieldSearch>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                   >
-                    <EuiSelect
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "All type",
-                            "value": "ALL",
-                          },
-                          Object {
-                            "text": "Amazon Chime",
-                            "value": "chime",
-                          },
-                          Object {
-                            "text": "Slack",
-                            "value": "slack",
-                          },
-                          Object {
-                            "text": "Custom webhook",
-                            "value": "custom_webhook",
-                          },
-                        ]
-                      }
-                      value="ALL"
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All type",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "Amazon Chime",
+                              "value": "chime",
+                            },
+                            Object {
+                              "text": "Slack",
+                              "value": "slack",
+                            },
+                            Object {
+                              "text": "Custom webhook",
+                              "value": "custom_webhook",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All type
-                                </option>
-                                <option
-                                  key="1"
-                                  value="chime"
-                                >
-                                  Amazon Chime
-                                </option>
-                                <option
-                                  key="2"
-                                  value="slack"
-                                >
-                                  Slack
-                                </option>
-                                <option
-                                  key="3"
-                                  value="custom_webhook"
-                                >
-                                  Custom webhook
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All type
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="chime"
+                                  >
+                                    Amazon Chime
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="slack"
+                                  >
+                                    Slack
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="custom_webhook"
+                                  >
+                                    Custom webhook
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="m"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                  style={
-                    Object {
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                     style={
                       Object {
                         "justifyContent": "center",
                       }
                     }
                   >
-                    <EuiPagination
-                      activePage={0}
-                      onPageClick={[Function]}
-                      pageCount={1}
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      style={
+                        Object {
+                          "justifyContent": "center",
+                        }
+                      }
                     >
-                      <nav
-                        className="euiPagination"
+                      <EuiPagination
+                        activePage={0}
+                        onPageClick={[Function]}
+                        pageCount={1}
                       >
-                        <EuiI18n
-                          default="Previous page, {page}"
-                          token="euiPagination.previousPage"
-                          values={
-                            Object {
-                              "page": 0,
-                            }
-                          }
+                        <nav
+                          className="euiPagination"
                         >
                           <EuiI18n
-                            default="Previous page"
-                            token="euiPagination.disabledPreviousPage"
+                            default="Previous page, {page}"
+                            token="euiPagination.previousPage"
+                            values={
+                              Object {
+                                "page": 0,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Previous page"
-                              color="text"
-                              data-test-subj="pagination-button-previous"
-                              disabled={true}
-                              iconType="arrowLeft"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Previous page"
+                              token="euiPagination.disabledPreviousPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Previous page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-previous"
                                 disabled={true}
+                                iconType="arrowLeft"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowLeft"
+                                <button
+                                  aria-label="Previous page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-previous"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowLeft"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                        <ul
-                          className="euiPagination__list"
-                        >
-                          <PaginationButton
-                            key="0"
-                            pageIndex={0}
+                          <ul
+                            className="euiPagination__list"
                           >
-                            <li
-                              className="euiPagination__item"
+                            <PaginationButton
+                              key="0"
+                              pageIndex={0}
                             >
-                              <EuiPaginationButton
-                                hideOnMobile={true}
-                                isActive={true}
-                                onClick={[Function]}
-                                pageIndex={0}
-                                totalPages={1}
+                              <li
+                                className="euiPagination__item"
                               >
-                                <EuiI18n
-                                  default="Page {page} of {totalPages}"
-                                  token="euiPaginationButton.longPageString"
-                                  values={
-                                    Object {
-                                      "page": 1,
-                                      "totalPages": 1,
-                                    }
-                                  }
+                                <EuiPaginationButton
+                                  hideOnMobile={true}
+                                  isActive={true}
+                                  onClick={[Function]}
+                                  pageIndex={0}
+                                  totalPages={1}
                                 >
                                   <EuiI18n
-                                    default="Page {page}"
-                                    token="euiPaginationButton.shortPageString"
+                                    default="Page {page} of {totalPages}"
+                                    token="euiPaginationButton.longPageString"
                                     values={
                                       Object {
                                         "page": 1,
+                                        "totalPages": 1,
                                       }
                                     }
                                   >
-                                    <EuiButtonEmpty
-                                      aria-current={true}
-                                      aria-label="Page 1 of 1"
-                                      className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                      color="text"
-                                      data-test-subj="pagination-button-0"
-                                      isDisabled={true}
-                                      onClick={[Function]}
-                                      size="s"
+                                    <EuiI18n
+                                      default="Page {page}"
+                                      token="euiPaginationButton.shortPageString"
+                                      values={
+                                        Object {
+                                          "page": 1,
+                                        }
+                                      }
                                     >
-                                      <button
+                                      <EuiButtonEmpty
                                         aria-current={true}
                                         aria-label="Page 1 of 1"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        color="text"
                                         data-test-subj="pagination-button-0"
-                                        disabled={true}
+                                        isDisabled={true}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="left"
-                                          iconSize="m"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text",
-                                            }
-                                          }
+                                        <button
+                                          aria-current={true}
+                                          aria-label="Page 1 of 1"
+                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                          data-test-subj="pagination-button-0"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          type="button"
                                         >
-                                          <span
-                                            className="euiButtonContent euiButtonEmpty__content"
+                                          <EuiButtonContent
+                                            className="euiButtonEmpty__content"
+                                            iconSide="left"
+                                            iconSize="m"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text",
+                                              }
+                                            }
                                           >
                                             <span
-                                              className="euiButtonEmpty__text"
+                                              className="euiButtonContent euiButtonEmpty__content"
                                             >
-                                              1
+                                              <span
+                                                className="euiButtonEmpty__text"
+                                              >
+                                                1
+                                              </span>
                                             </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </EuiI18n>
                                   </EuiI18n>
-                                </EuiI18n>
-                              </EuiPaginationButton>
-                            </li>
-                          </PaginationButton>
-                        </ul>
-                        <EuiI18n
-                          default="Next page, {page}"
-                          token="euiPagination.nextPage"
-                          values={
-                            Object {
-                              "page": 2,
-                            }
-                          }
-                        >
+                                </EuiPaginationButton>
+                              </li>
+                            </PaginationButton>
+                          </ul>
                           <EuiI18n
-                            default="Next page"
-                            token="euiPagination.disabledNextPage"
+                            default="Next page, {page}"
+                            token="euiPagination.nextPage"
+                            values={
+                              Object {
+                                "page": 2,
+                              }
+                            }
                           >
-                            <EuiButtonIcon
-                              aria-label="Next page"
-                              color="text"
-                              data-test-subj="pagination-button-next"
-                              disabled={true}
-                              iconType="arrowRight"
-                              onClick={[Function]}
+                            <EuiI18n
+                              default="Next page"
+                              token="euiPagination.disabledNextPage"
                             >
-                              <button
+                              <EuiButtonIcon
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                color="text"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
+                                iconType="arrowRight"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowRight"
+                                <button
+                                  aria-label="Next page"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  data-test-subj="pagination-button-next"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div>
-                                    EuiIconMock
-                                  </div>
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowRight"
+                                  >
+                                    <div>
+                                      EuiIconMock
+                                    </div>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
                           </EuiI18n>
-                        </EuiI18n>
-                      </nav>
-                    </EuiPagination>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </DestinationsControls>
-          <EuiHorizontalRule
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <EuiBasicTable
-            columns={
-              Array [
-                Object {
-                  "field": "name",
-                  "name": "Destination name",
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "type",
-                  "name": "Destination type",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
-                Object {
-                  "field": "user",
-                  "name": "Last updated by",
-                  "render": [Function],
-                  "sortable": true,
-                  "textOnly": true,
-                  "truncateText": true,
-                  "width": "100px",
-                },
+                        </nav>
+                      </EuiPagination>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </DestinationsControls>
+            <EuiHorizontalRule
+              margin="xs"
+            >
+              <hr
+                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+              />
+            </EuiHorizontalRule>
+            <EuiBasicTable
+              columns={
+                Array [
+                  Object {
+                    "field": "name",
+                    "name": "Destination name",
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "type",
+                    "name": "Destination type",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "field": "user",
+                    "name": "Last updated by",
+                    "render": [Function],
+                    "sortable": true,
+                    "textOnly": true,
+                    "truncateText": true,
+                    "width": "100px",
+                  },
+                  Object {
+                    "actions": Array [
+                      Object {
+                        "description": "View this destination.",
+                        "name": "View",
+                        "onClick": [Function],
+                      },
+                    ],
+                    "name": "Actions",
+                    "width": "35px",
+                  },
+                ]
+              }
+              hasActions={true}
+              isSelectable={true}
+              items={Array []}
+              noItemsMessage={
+                <EmptyDestinations
+                  hasNotificationPlugin={false}
+                  isFilterApplied={false}
+                  onResetFilters={[Function]}
+                />
+              }
+              onChange={[Function]}
+              pagination={
                 Object {
-                  "actions": Array [
-                    Object {
-                      "description": "View this destination.",
-                      "name": "View",
-                      "onClick": [Function],
-                    },
+                  "pageIndex": 0,
+                  "pageSize": 20,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    20,
+                    50,
                   ],
-                  "name": "Actions",
-                  "width": "35px",
-                },
-              ]
-            }
-            hasActions={true}
-            isSelectable={true}
-            items={Array []}
-            noItemsMessage={
-              <EmptyDestinations
-                isFilterApplied={false}
-                onResetFilters={[Function]}
-              />
-            }
-            onChange={[Function]}
-            pagination={
-              Object {
-                "pageIndex": 0,
-                "pageSize": 20,
-                "pageSizeOptions": Array [
-                  5,
-                  10,
-                  20,
-                  50,
-                ],
-                "totalItemCount": 0,
+                  "totalItemCount": 0,
+                }
               }
-            }
-            responsive={true}
-            sorting={
-              Object {
-                "sort": Object {
-                  "direction": "desc",
-                  "field": "name",
-                },
+              responsive={true}
+              sorting={
+                Object {
+                  "sort": Object {
+                    "direction": "desc",
+                    "field": "name",
+                  },
+                }
               }
-            }
-            tableLayout="fixed"
-          >
-            <div
-              className="euiBasicTable"
+              tableLayout="fixed"
             >
-              <div>
-                <EuiTableHeaderMobile>
-                  <div
-                    className="euiTableHeaderMobile"
-                  >
-                    <EuiFlexGroup
-                      alignItems="baseline"
-                      justifyContent="spaceBetween"
-                      responsive={false}
+              <div
+                className="euiBasicTable"
+              >
+                <div>
+                  <EuiTableHeaderMobile>
+                    <div
+                      className="euiTableHeaderMobile"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      <EuiFlexGroup
+                        alignItems="baseline"
+                        justifyContent="spaceBetween"
+                        responsive={false}
                       >
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          />
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <EuiTableSortMobile
-                              items={
-                                Array [
-                                  Object {
-                                    "isSortAscending": false,
-                                    "isSorted": true,
-                                    "key": "_data_s_name_0",
-                                    "name": "Destination name",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_type_1",
-                                    "name": "Destination type",
-                                    "onSort": [Function],
-                                  },
-                                  Object {
-                                    "isSortAscending": undefined,
-                                    "isSorted": false,
-                                    "key": "_data_s_user_2",
-                                    "name": "Last updated by",
-                                    "onSort": [Function],
-                                  },
-                                ]
-                              }
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <div
-                                className="euiTableSortMobile"
+                              <EuiTableSortMobile
+                                items={
+                                  Array [
+                                    Object {
+                                      "isSortAscending": false,
+                                      "isSorted": true,
+                                      "key": "_data_s_name_0",
+                                      "name": "Destination name",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_type_1",
+                                      "name": "Destination type",
+                                      "onSort": [Function],
+                                    },
+                                    Object {
+                                      "isSortAscending": undefined,
+                                      "isSorted": false,
+                                      "key": "_data_s_user_2",
+                                      "name": "Last updated by",
+                                      "onSort": [Function],
+                                    },
+                                  ]
+                                }
                               >
-                                <EuiPopover
-                                  anchorPosition="downRight"
-                                  button={
-                                    <EuiButtonEmpty
-                                      flush="right"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                      size="xs"
-                                    >
-                                      <EuiI18n
-                                        default="Sorting"
-                                        token="euiTableSortMobile.sorting"
-                                      />
-                                    </EuiButtonEmpty>
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="none"
+                                <div
+                                  className="euiTableSortMobile"
                                 >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownRight"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
+                                  <EuiPopover
+                                    anchorPosition="downRight"
+                                    button={
                                       <EuiButtonEmpty
                                         flush="right"
                                         iconSide="right"
@@ -3763,246 +3891,318 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
                                         onClick={[Function]}
                                         size="xs"
                                       >
-                                        <button
-                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                          disabled={false}
+                                        <EuiI18n
+                                          default="Sorting"
+                                          token="euiTableSortMobile.sorting"
+                                        />
+                                      </EuiButtonEmpty>
+                                    }
+                                    closePopover={[Function]}
+                                    display="inlineBlock"
+                                    hasArrow={true}
+                                    isOpen={false}
+                                    ownFocus={true}
+                                    panelPaddingSize="none"
+                                  >
+                                    <div
+                                      className="euiPopover euiPopover--anchorDownRight"
+                                    >
+                                      <div
+                                        className="euiPopover__anchor"
+                                      >
+                                        <EuiButtonEmpty
+                                          flush="right"
+                                          iconSide="right"
+                                          iconType="arrowDown"
                                           onClick={[Function]}
-                                          type="button"
+                                          size="xs"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="right"
-                                            iconSize="s"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
+                                          <button
+                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                            <EuiButtonContent
+                                              className="euiButtonEmpty__content"
+                                              iconSide="right"
+                                              iconSize="s"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButtonEmpty__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="s"
-                                                type="arrowDown"
-                                              >
-                                                <div>
-                                                  EuiIconMock
-                                                </div>
-                                              </EuiIcon>
                                               <span
-                                                className="euiButtonEmpty__text"
+                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                               >
-                                                <EuiI18n
-                                                  default="Sorting"
-                                                  token="euiTableSortMobile.sorting"
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="s"
+                                                  type="arrowDown"
                                                 >
-                                                  Sorting
-                                                </EuiI18n>
+                                                  <div>
+                                                    EuiIconMock
+                                                  </div>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButtonEmpty__text"
+                                                >
+                                                  <EuiI18n
+                                                    default="Sorting"
+                                                    token="euiTableSortMobile.sorting"
+                                                  >
+                                                    Sorting
+                                                  </EuiI18n>
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonEmpty>
+                                      </div>
                                     </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiTableSortMobile>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiTableHeaderMobile>
-                <EuiTable
-                  id="generated-id"
-                  responsive={true}
-                  tableLayout="fixed"
-                >
-                  <table
-                    className="euiTable euiTable--responsive"
+                                  </EuiPopover>
+                                </div>
+                              </EuiTableSortMobile>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiTableHeaderMobile>
+                  <EuiTable
                     id="generated-id"
-                    tabIndex={-1}
+                    responsive={true}
+                    tableLayout="fixed"
                   >
-                    <EuiScreenReaderOnly>
-                      <caption
-                        className="euiScreenReaderOnly euiTableCaption"
-                      >
-                        <EuiDelayRender
-                          delay={500}
-                        />
-                      </caption>
-                    </EuiScreenReaderOnly>
-                    <EuiTableHeader>
-                      <thead>
-                        <tr>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_name_0"
-                            isSortAscending={false}
-                            isSorted={true}
-                            key="_data_h_name_0"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="descending"
-                              className="euiTableHeaderCell"
+                    <table
+                      className="euiTable euiTable--responsive"
+                      id="generated-id"
+                      tabIndex={-1}
+                    >
+                      <EuiScreenReaderOnly>
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        >
+                          <EuiDelayRender
+                            delay={500}
+                          />
+                        </caption>
+                      </EuiScreenReaderOnly>
+                      <EuiTableHeader>
+                        <thead>
+                          <tr>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_name_0"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSortAscending={false}
+                              isSorted={true}
+                              key="_data_h_name_0"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="descending"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_name_0"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSortAscending={false}
-                                  isSorted={true}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSortAscending={false}
+                                    isSorted={true}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination name",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination name",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination name"
                                         >
-                                          Destination name
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                    <EuiIcon
-                                      className="euiTableSortIcon"
-                                      size="m"
-                                      type="sortDown"
-                                    >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_type_1"
-                            isSorted={false}
-                            key="_data_h_type_1"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination name"
+                                          >
+                                            Destination name
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                      <EuiIcon
+                                        className="euiTableSortIcon"
+                                        size="m"
+                                        type="sortDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_type_1"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
-                                }
-                              }
+                              isSorted={false}
+                              key="_data_h_type_1"
+                              onSort={[Function]}
+                              width="100px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_type_1"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
+                                }
                               >
-                                <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
+                                  <CellContents
                                     className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
                                   >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Destination type",
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Destination type",
+                                            }
                                           }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Destination type"
                                         >
-                                          Destination type
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="left"
-                            data-test-subj="tableHeaderCell_user_2"
-                            isSorted={false}
-                            key="_data_h_user_2"
-                            onSort={[Function]}
-                            width="100px"
-                          >
-                            <th
-                              aria-live="polite"
-                              aria-sort="none"
-                              className="euiTableHeaderCell"
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Destination type"
+                                          >
+                                            Destination type
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="left"
                               data-test-subj="tableHeaderCell_user_2"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "100px",
+                              isSorted={false}
+                              key="_data_h_user_2"
+                              onSort={[Function]}
+                              width="100px"
+                            >
+                              <th
+                                aria-live="polite"
+                                aria-sort="none"
+                                className="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_user_2"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "100px",
+                                  }
                                 }
-                              }
+                              >
+                                <button
+                                  className="euiTableHeaderButton"
+                                  data-test-subj="tableHeaderSortButton"
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <CellContents
+                                    className="euiTableCellContent"
+                                    isSorted={false}
+                                    showSortMsg={true}
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <EuiInnerText>
+                                        <EuiI18n
+                                          default="{innerText}; {description}"
+                                          token="euiTableHeaderCell.titleTextWithDesc"
+                                          values={
+                                            Object {
+                                              "description": undefined,
+                                              "innerText": "Last updated by",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiTableCellContent__text"
+                                            title="Last updated by"
+                                          >
+                                            Last updated by
+                                          </span>
+                                        </EuiI18n>
+                                      </EuiInnerText>
+                                    </span>
+                                  </CellContents>
+                                </button>
+                              </th>
+                            </EuiTableHeaderCell>
+                            <EuiTableHeaderCell
+                              align="right"
+                              key="_actions_h_3"
+                              width="35px"
                             >
-                              <button
-                                className="euiTableHeaderButton"
-                                data-test-subj="tableHeaderSortButton"
-                                onClick={[Function]}
-                                type="button"
+                              <th
+                                className="euiTableHeaderCell"
+                                role="columnheader"
+                                scope="col"
+                                style={
+                                  Object {
+                                    "width": "35px",
+                                  }
+                                }
                               >
                                 <CellContents
-                                  className="euiTableCellContent"
-                                  isSorted={false}
-                                  showSortMsg={true}
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                  showSortMsg={false}
                                 >
                                   <span
-                                    className="euiTableCellContent"
+                                    className="euiTableCellContent euiTableCellContent--alignRight"
                                   >
                                     <EuiInnerText>
                                       <EuiI18n
@@ -4011,165 +4211,121 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
                                         values={
                                           Object {
                                             "description": undefined,
-                                            "innerText": "Last updated by",
+                                            "innerText": "Actions",
                                           }
                                         }
                                       >
                                         <span
                                           className="euiTableCellContent__text"
-                                          title="Last updated by"
+                                          title="Actions"
                                         >
-                                          Last updated by
+                                          Actions
                                         </span>
                                       </EuiI18n>
                                     </EuiInnerText>
                                   </span>
                                 </CellContents>
-                              </button>
-                            </th>
-                          </EuiTableHeaderCell>
-                          <EuiTableHeaderCell
-                            align="right"
-                            key="_actions_h_3"
-                            width="35px"
-                          >
-                            <th
-                              className="euiTableHeaderCell"
-                              role="columnheader"
-                              scope="col"
-                              style={
-                                Object {
-                                  "width": "35px",
-                                }
-                              }
-                            >
-                              <CellContents
-                                className="euiTableCellContent euiTableCellContent--alignRight"
-                                showSortMsg={false}
-                              >
-                                <span
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                >
-                                  <EuiInnerText>
-                                    <EuiI18n
-                                      default="{innerText}; {description}"
-                                      token="euiTableHeaderCell.titleTextWithDesc"
-                                      values={
-                                        Object {
-                                          "description": undefined,
-                                          "innerText": "Actions",
-                                        }
-                                      }
-                                    >
-                                      <span
-                                        className="euiTableCellContent__text"
-                                        title="Actions"
-                                      >
-                                        Actions
-                                      </span>
-                                    </EuiI18n>
-                                  </EuiInnerText>
-                                </span>
-                              </CellContents>
-                            </th>
-                          </EuiTableHeaderCell>
-                        </tr>
-                      </thead>
-                    </EuiTableHeader>
-                    <EuiTableBody>
-                      <tbody>
-                        <EuiTableRow>
-                          <tr
-                            className="euiTableRow"
-                          >
-                            <EuiTableRowCell
-                              align="center"
-                              colSpan={4}
-                              isMobileFullWidth={true}
+                              </th>
+                            </EuiTableHeaderCell>
+                          </tr>
+                        </thead>
+                      </EuiTableHeader>
+                      <EuiTableBody>
+                        <tbody>
+                          <EuiTableRow>
+                            <tr
+                              className="euiTableRow"
                             >
-                              <td
-                                className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              <EuiTableRowCell
+                                align="center"
                                 colSpan={4}
-                                style={
-                                  Object {
-                                    "width": undefined,
-                                  }
-                                }
+                                isMobileFullWidth={true}
                               >
-                                <div
-                                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                                <td
+                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                                  colSpan={4}
+                                  style={
+                                    Object {
+                                      "width": undefined,
+                                    }
+                                  }
                                 >
-                                  <span
-                                    className="euiTableCellContent__text"
+                                  <div
+                                    className="euiTableCellContent euiTableCellContent--alignCenter"
                                   >
-                                    <EmptyDestinations
-                                      isFilterApplied={false}
-                                      onResetFilters={[Function]}
+                                    <span
+                                      className="euiTableCellContent__text"
                                     >
-                                      <EuiEmptyPrompt
-                                        body={
-                                          <EuiText>
-                                            <p>
-                                              There are no existing destinations.
-                                            </p>
-                                          </EuiText>
-                                        }
-                                        style={
-                                          Object {
-                                            "maxWidth": "45em",
-                                          }
-                                        }
+                                      <EmptyDestinations
+                                        hasNotificationPlugin={false}
+                                        isFilterApplied={false}
+                                        onResetFilters={[Function]}
                                       >
-                                        <div
-                                          className="euiEmptyPrompt"
+                                        <EuiEmptyPrompt
+                                          body={
+                                            <EuiText>
+                                              <p>
+                                                There are no existing destinations.
+                                              </p>
+                                            </EuiText>
+                                          }
                                           style={
                                             Object {
                                               "maxWidth": "45em",
                                             }
                                           }
                                         >
-                                          <EuiTextColor
-                                            color="subdued"
+                                          <div
+                                            className="euiEmptyPrompt"
+                                            style={
+                                              Object {
+                                                "maxWidth": "45em",
+                                              }
+                                            }
                                           >
-                                            <span
-                                              className="euiTextColor euiTextColor--subdued"
+                                            <EuiTextColor
+                                              color="subdued"
                                             >
-                                              <EuiText>
-                                                <div
-                                                  className="euiText euiText--medium"
-                                                >
-                                                  <EuiText>
-                                                    <div
-                                                      className="euiText euiText--medium"
-                                                    >
-                                                      <p>
-                                                        There are no existing destinations.
-                                                      </p>
-                                                    </div>
-                                                  </EuiText>
-                                                </div>
-                                              </EuiText>
-                                            </span>
-                                          </EuiTextColor>
-                                        </div>
-                                      </EuiEmptyPrompt>
-                                    </EmptyDestinations>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tr>
-                        </EuiTableRow>
-                      </tbody>
-                    </EuiTableBody>
-                  </table>
-                </EuiTable>
+                                              <span
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                <EuiText>
+                                                  <div
+                                                    className="euiText euiText--medium"
+                                                  >
+                                                    <EuiText>
+                                                      <div
+                                                        className="euiText euiText--medium"
+                                                      >
+                                                        <p>
+                                                          There are no existing destinations.
+                                                        </p>
+                                                      </div>
+                                                    </EuiText>
+                                                  </div>
+                                                </EuiText>
+                                              </span>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiEmptyPrompt>
+                                      </EmptyDestinations>
+                                    </span>
+                                  </div>
+                                </td>
+                              </EuiTableRowCell>
+                            </tr>
+                          </EuiTableRow>
+                        </tbody>
+                      </EuiTableBody>
+                    </table>
+                  </EuiTable>
+                </div>
               </div>
-            </div>
-          </EuiBasicTable>
+            </EuiBasicTable>
+          </div>
         </div>
-      </div>
-    </EuiPanel>
-  </ContentPanel>
+      </EuiPanel>
+    </ContentPanel>
+  </div>
 </DestinationsList>
 `;
diff --git a/public/pages/Destinations/utils/constants.js b/public/pages/Destinations/utils/constants.js
index 16d497c49..adef6a9bc 100644
--- a/public/pages/Destinations/utils/constants.js
+++ b/public/pages/Destinations/utils/constants.js
@@ -18,3 +18,6 @@ export const DESTINATION_OPTIONS = [
 ];
 
 export const ALLOW_LIST_SETTING_PATH = 'plugins.alerting.destination.allow_list';
+
+export const NOTIFICATIONS_LEARN_MORE_HREF =
+  'https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations';

From 77295abcfe82fc868911adea05b0089d7f1e1478 Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 16:54:25 -0800
Subject: [PATCH 2/6] Refactored the help text elements displayed when users
 access the destinations list page after destinations deprecation.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../containers/DestinationsList/DestinationsList.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
index 9defd102f..8ddd7be40 100644
--- a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
+++ b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
@@ -319,7 +319,7 @@ class DestinationsList extends React.Component {
           />
         ) : null}
 
-        {destinations.length > 0 ? (
+        {destinations.length === 0 ? (
           <FullPageNotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
         ) : (
           <div>

From 1f29c0d40326737ee101c5455f4b2007ef9bf35f Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 17:12:47 -0800
Subject: [PATCH 3/6] Updated snapshot.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../DestinationsList.test.js.snap             | 4447 ++---------------
 1 file changed, 357 insertions(+), 4090 deletions(-)

diff --git a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
index 6f00b4478..57f722ef9 100644
--- a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
+++ b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
@@ -47,1482 +47,155 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
     }
   }
 >
-  <div>
-    <EuiTitle
-      size="l"
-    >
-      <h3
-        className="euiTitle euiTitle--large"
-      >
-        Destinations (deprecated)
-      </h3>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    >
+  <FullPageNotificationsInfoCallOut
+    hasNotificationPlugin={false}
+  >
+    <EuiPanel>
       <div
-        className="euiSpacer euiSpacer--l"
-      />
-    </EuiSpacer>
-    <NotificationsInfoCallOut
-      hasNotificationPlugin={false}
-    >
-      <div>
-        <EuiCallOut
-          color="danger"
-          iconType="alert"
-          title="Unable to send notifications. Notifications plugin is required."
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
+            >
+              View install instructions
+            </EuiButton>
+          }
+          body={
+            <EuiText>
+              Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+            </EuiText>
+          }
+          title={
+            <h2>
+              Destinations will become channels in Notifications
+            </h2>
+          }
         >
           <div
-            className="euiCallOut euiCallOut--danger"
+            className="euiEmptyPrompt"
           >
-            <div
-              className="euiCallOutHeader"
+            <EuiTitle
+              size="m"
             >
-              <EuiIcon
-                aria-hidden="true"
-                className="euiCallOutHeader__icon"
-                color="inherit"
-                size="m"
-                type="alert"
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                <div>
-                  EuiIconMock
-                </div>
-              </EuiIcon>
-              <span
-                className="euiCallOutHeader__title"
-              >
-                Unable to send notifications. Notifications plugin is required.
-              </span>
-            </div>
-            <EuiText
-              color="default"
-              size="s"
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiText euiText--small"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiTextColor
-                  color="default"
-                  component="div"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiTextColor euiTextColor--default"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <p>
-                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
-                    </p>
-                    <p>
-                      Existing destinations will be automatically migrated once Notifications plugin is installed.
-                    </p>
-                    <EuiSpacer
-                      size="l"
-                    >
+                    <EuiText>
                       <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
-                    <EuiButton
-                      external={true}
-                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                      iconSide="right"
-                      iconType="popout"
-                      target="_blank"
-                    >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
-                        element="a"
-                        external={true}
-                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                        iconSide="right"
-                        iconType="popout"
-                        isDisabled={false}
-                        rel="noopener noreferrer"
-                        target="_blank"
+                        className="euiText euiText--medium"
                       >
-                        <a
-                          className="euiButton euiButton--primary"
-                          disabled={false}
-                          external={true}
-                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                          rel="noopener noreferrer"
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
-                          target="_blank"
-                        >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="right"
-                            iconType="popout"
-                            textProps={
-                              Object {
-                                "className": "euiButton__text",
-                              }
-                            }
-                          >
-                            <span
-                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                            >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="popout"
-                              >
-                                <div>
-                                  EuiIconMock
-                                </div>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                View install instructions
-                              </span>
-                            </span>
-                          </EuiButtonContent>
-                        </a>
-                      </EuiButtonDisplay>
-                    </EuiButton>
-                  </div>
-                </EuiTextColor>
-              </div>
-            </EuiText>
-          </div>
-        </EuiCallOut>
-        <EuiSpacer
-          size="l"
-        >
-          <div
-            className="euiSpacer euiSpacer--l"
-          />
-        </EuiSpacer>
-      </div>
-    </NotificationsInfoCallOut>
-    <ContentPanel
-      actions={
-        <DestinationsActions
-          isEmailAllowed={true}
-          onClickManageEmailGroups={[Function]}
-          onClickManageSenders={[Function]}
-        />
-      }
-      bodyStyles={
-        Object {
-          "padding": "initial",
-        }
-      }
-      title={
-        <div>
-          <EuiTitle
-            size="s"
-            style={
-              Object {
-                "marginBottom": "0px",
-                "paddingBottom": "0px",
-              }
-            }
-          >
-            <h3>
-              Destinations pending for migration
-            </h3>
-          </EuiTitle>
-        </div>
-      }
-    >
-      <EuiPanel
-        style={
-          Object {
-            "paddingLeft": "0px",
-            "paddingRight": "0px",
-          }
-        }
-      >
-        <div
-          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-          style={
-            Object {
-              "paddingLeft": "0px",
-              "paddingRight": "0px",
-            }
-          }
-        >
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="spaceBetween"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
-            >
-              <EuiFlexItem>
-                <div
-                  className="euiFlexItem"
-                >
-                  <EuiTitle
-                    size="l"
-                  >
-                    <h3
-                      className="euiTitle euiTitle--large"
-                    >
-                      <div>
-                        <EuiTitle
-                          size="s"
-                          style={
-                            Object {
-                              "marginBottom": "0px",
-                              "paddingBottom": "0px",
-                            }
-                          }
-                        >
-                          <h3
-                            className="euiTitle euiTitle--small"
-                            style={
-                              Object {
-                                "marginBottom": "0px",
-                                "paddingBottom": "0px",
-                              }
-                            }
-                          >
-                            Destinations pending for migration
-                          </h3>
-                        </EuiTitle>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </h3>
-                  </EuiTitle>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <div
-                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                >
-                  <EuiFlexGroup
-                    alignItems="center"
-                    justifyContent="spaceBetween"
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <EuiFlexItem>
-                        <div
-                          className="euiFlexItem"
-                        >
-                          <DestinationsActions
-                            isEmailAllowed={true}
-                            onClickManageEmailGroups={[Function]}
-                            onClickManageSenders={[Function]}
-                          >
-                            <EuiFlexGroup
-                              alignItems="center"
-                              justifyContent="spaceBetween"
-                            >
-                              <div
-                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              >
-                                <EuiFlexItem>
-                                  <div
-                                    className="euiFlexItem"
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="downLeft"
-                                      button={
-                                        <EuiButton
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          onClick={[Function]}
-                                        >
-                                          Actions
-                                        </EuiButton>
-                                      }
-                                      closePopover={[Function]}
-                                      display="inlineBlock"
-                                      hasArrow={true}
-                                      id="destinationActionsPopover"
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelPaddingSize="none"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorDownLeft"
-                                        id="destinationActionsPopover"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <EuiButton
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            onClick={[Function]}
-                                          >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
-                                              disabled={false}
-                                              element="button"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              isDisabled={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <button
-                                                className="euiButton euiButton--primary"
-                                                disabled={false}
-                                                onClick={[Function]}
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
-                                                type="button"
-                                              >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="right"
-                                                  iconType="arrowDown"
-                                                  textProps={
-                                                    Object {
-                                                      "className": "euiButton__text",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                                                  >
-                                                    <EuiIcon
-                                                      className="euiButtonContent__icon"
-                                                      color="inherit"
-                                                      size="m"
-                                                      type="arrowDown"
-                                                    >
-                                                      <div>
-                                                        EuiIconMock
-                                                      </div>
-                                                    </EuiIcon>
-                                                    <span
-                                                      className="euiButton__text"
-                                                    >
-                                                      Actions
-                                                    </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </div>
-                                </EuiFlexItem>
-                              </div>
-                            </EuiFlexGroup>
-                          </DestinationsActions>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </div>
-              </EuiFlexItem>
-            </div>
-          </EuiFlexGroup>
-          <EuiText
-            color="subdued"
-            size="xs"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiText euiText--extraSmall"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
-              <EuiTextColor
-                color="subdued"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--subdued"
-                />
-              </EuiTextColor>
-            </div>
-          </EuiText>
-          <EuiHorizontalRule
-            className=""
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <div
-            style={
-              Object {
-                "padding": "initial",
-              }
-            }
-          >
-            <DeleteConfirmation
-              isVisible={false}
-              onCancel={[Function]}
-              onConfirm={[Function]}
-            />
-            <ManageSenders
-              httpClient={[MockFunction]}
-              isEmailAllowed={true}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <ManageEmailGroups
-              httpClient={[MockFunction]}
-              isEmailAllowed={true}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <DestinationsControls
-              activePage={0}
-              allowList={
-                Array [
-                  "chime",
-                  "slack",
-                  "custom_webhook",
-                  "email",
-                ]
-              }
-              onPageClick={[Function]}
-              onSearchChange={[Function]}
-              onTypeChange={[Function]}
-              pageCount={1}
-              search=""
-              type="ALL"
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <EuiFlexGroup
-                style={
-                  Object {
-                    "padding": "0px 5px",
-                  }
-                }
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                element="a"
+                external={true}
+                fill={true}
+                href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                <a
+                  className="euiButton euiButton--primary euiButton--fill"
+                  disabled={false}
+                  external={true}
+                  href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  rel="noopener noreferrer"
                   style={
                     Object {
-                      "padding": "0px 5px",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiFieldSearch
-                        compressed={false}
-                        fullWidth={true}
-                        incremental={false}
-                        isClearable={true}
-                        isLoading={false}
-                        onChange={[Function]}
-                        placeholder="Search"
-                        value=""
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={true}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <input
-                                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                                  onChange={[Function]}
-                                  onKeyUp={[Function]}
-                                  placeholder="Search"
-                                  type="search"
-                                  value=""
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon="search"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="search"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="search"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldSearch>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiSelect
-                        onChange={[Function]}
-                        options={
-                          Array [
-                            Object {
-                              "text": "All type",
-                              "value": "ALL",
-                            },
-                            Object {
-                              "text": "Amazon Chime",
-                              "value": "chime",
-                            },
-                            Object {
-                              "text": "Slack",
-                              "value": "slack",
-                            },
-                            Object {
-                              "text": "Custom webhook",
-                              "value": "custom_webhook",
-                            },
-                            Object {
-                              "text": "Email",
-                              "value": "email",
-                            },
-                          ]
-                        }
-                        value="ALL"
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={false}
-                          icon={
-                            Object {
-                              "side": "right",
-                              "type": "arrowDown",
-                            }
-                          }
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <select
-                                  className="euiSelect"
-                                  onChange={[Function]}
-                                  onMouseUp={[Function]}
-                                  value="ALL"
-                                >
-                                  <option
-                                    key="0"
-                                    value="ALL"
-                                  >
-                                    All type
-                                  </option>
-                                  <option
-                                    key="1"
-                                    value="chime"
-                                  >
-                                    Amazon Chime
-                                  </option>
-                                  <option
-                                    key="2"
-                                    value="slack"
-                                  >
-                                    Slack
-                                  </option>
-                                  <option
-                                    key="3"
-                                    value="custom_webhook"
-                                  >
-                                    Custom webhook
-                                  </option>
-                                  <option
-                                    key="4"
-                                    value="email"
-                                  >
-                                    Email
-                                  </option>
-                                </select>
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="arrowDown"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="arrowDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiSelect>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "justifyContent": "center",
-                        }
-                      }
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <EuiPagination
-                        activePage={0}
-                        onPageClick={[Function]}
-                        pageCount={1}
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <nav
-                          className="euiPagination"
-                        >
-                          <EuiI18n
-                            default="Previous page, {page}"
-                            token="euiPagination.previousPage"
-                            values={
-                              Object {
-                                "page": 0,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Previous page"
-                              token="euiPagination.disabledPreviousPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Previous page"
-                                color="text"
-                                data-test-subj="pagination-button-previous"
-                                disabled={true}
-                                iconType="arrowLeft"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Previous page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-previous"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowLeft"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                          <ul
-                            className="euiPagination__list"
-                          >
-                            <PaginationButton
-                              key="0"
-                              pageIndex={0}
-                            >
-                              <li
-                                className="euiPagination__item"
-                              >
-                                <EuiPaginationButton
-                                  hideOnMobile={true}
-                                  isActive={true}
-                                  onClick={[Function]}
-                                  pageIndex={0}
-                                  totalPages={1}
-                                >
-                                  <EuiI18n
-                                    default="Page {page} of {totalPages}"
-                                    token="euiPaginationButton.longPageString"
-                                    values={
-                                      Object {
-                                        "page": 1,
-                                        "totalPages": 1,
-                                      }
-                                    }
-                                  >
-                                    <EuiI18n
-                                      default="Page {page}"
-                                      token="euiPaginationButton.shortPageString"
-                                      values={
-                                        Object {
-                                          "page": 1,
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonEmpty
-                                        aria-current={true}
-                                        aria-label="Page 1 of 1"
-                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                        color="text"
-                                        data-test-subj="pagination-button-0"
-                                        isDisabled={true}
-                                        onClick={[Function]}
-                                        size="s"
-                                      >
-                                        <button
-                                          aria-current={true}
-                                          aria-label="Page 1 of 1"
-                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                          data-test-subj="pagination-button-0"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="left"
-                                            iconSize="m"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonEmpty__content"
-                                            >
-                                              <span
-                                                className="euiButtonEmpty__text"
-                                              >
-                                                1
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
-                                    </EuiI18n>
-                                  </EuiI18n>
-                                </EuiPaginationButton>
-                              </li>
-                            </PaginationButton>
-                          </ul>
-                          <EuiI18n
-                            default="Next page, {page}"
-                            token="euiPagination.nextPage"
-                            values={
-                              Object {
-                                "page": 2,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Next page"
-                              token="euiPagination.disabledNextPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Next page"
-                                color="text"
-                                data-test-subj="pagination-button-next"
-                                disabled={true}
-                                iconType="arrowRight"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Next page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-next"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                        </nav>
-                      </EuiPagination>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </DestinationsControls>
-            <EuiHorizontalRule
-              margin="xs"
-            >
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-              />
-            </EuiHorizontalRule>
-            <EuiBasicTable
-              columns={
-                Array [
-                  Object {
-                    "field": "name",
-                    "name": "Destination name",
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "type",
-                    "name": "Destination type",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "user",
-                    "name": "Last updated by",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "actions": Array [
-                      Object {
-                        "description": "View this destination.",
-                        "name": "View",
-                        "onClick": [Function],
-                      },
-                    ],
-                    "name": "Actions",
-                    "width": "35px",
-                  },
-                ]
-              }
-              hasActions={true}
-              isSelectable={true}
-              items={Array []}
-              noItemsMessage={
-                <EmptyDestinations
-                  hasNotificationPlugin={false}
-                  isFilterApplied={false}
-                  onResetFilters={[Function]}
-                />
-              }
-              onChange={[Function]}
-              pagination={
-                Object {
-                  "pageIndex": 0,
-                  "pageSize": 20,
-                  "pageSizeOptions": Array [
-                    5,
-                    10,
-                    20,
-                    50,
-                  ],
-                  "totalItemCount": 0,
-                }
-              }
-              responsive={true}
-              sorting={
-                Object {
-                  "sort": Object {
-                    "direction": "desc",
-                    "field": "name",
-                  },
-                }
-              }
-              tableLayout="fixed"
-            >
-              <div
-                className="euiBasicTable"
-              >
-                <div>
-                  <EuiTableHeaderMobile>
-                    <div
-                      className="euiTableHeaderMobile"
-                    >
-                      <EuiFlexGroup
-                        alignItems="baseline"
-                        justifyContent="spaceBetween"
-                        responsive={false}
-                      >
-                        <div
-                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                        >
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiTableSortMobile
-                                items={
-                                  Array [
-                                    Object {
-                                      "isSortAscending": false,
-                                      "isSorted": true,
-                                      "key": "_data_s_name_0",
-                                      "name": "Destination name",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_type_1",
-                                      "name": "Destination type",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_user_2",
-                                      "name": "Last updated by",
-                                      "onSort": [Function],
-                                    },
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="euiTableSortMobile"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downRight"
-                                    button={
-                                      <EuiButtonEmpty
-                                        flush="right"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                        size="xs"
-                                      >
-                                        <EuiI18n
-                                          default="Sorting"
-                                          token="euiTableSortMobile.sorting"
-                                        />
-                                      </EuiButtonEmpty>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
-                                  >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownRight"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
-                                        <EuiButtonEmpty
-                                          flush="right"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <button
-                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                            disabled={false}
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiButtonContent
-                                              className="euiButtonEmpty__content"
-                                              iconSide="right"
-                                              iconSize="s"
-                                              iconType="arrowDown"
-                                              textProps={
-                                                Object {
-                                                  "className": "euiButtonEmpty__text",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                              >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="s"
-                                                  type="arrowDown"
-                                                >
-                                                  <div>
-                                                    EuiIconMock
-                                                  </div>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButtonEmpty__text"
-                                                >
-                                                  <EuiI18n
-                                                    default="Sorting"
-                                                    token="euiTableSortMobile.sorting"
-                                                  >
-                                                    Sorting
-                                                  </EuiI18n>
-                                                </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonEmpty>
-                                      </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiTableSortMobile>
-                            </div>
-                          </EuiFlexItem>
+                        <div>
+                          EuiIconMock
                         </div>
-                      </EuiFlexGroup>
-                    </div>
-                  </EuiTableHeaderMobile>
-                  <EuiTable
-                    id="generated-id"
-                    responsive={true}
-                    tableLayout="fixed"
-                  >
-                    <table
-                      className="euiTable euiTable--responsive"
-                      id="generated-id"
-                      tabIndex={-1}
-                    >
-                      <EuiScreenReaderOnly>
-                        <caption
-                          className="euiScreenReaderOnly euiTableCaption"
-                        >
-                          <EuiDelayRender
-                            delay={500}
-                          />
-                        </caption>
-                      </EuiScreenReaderOnly>
-                      <EuiTableHeader>
-                        <thead>
-                          <tr>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_name_0"
-                              isSortAscending={false}
-                              isSorted={true}
-                              key="_data_h_name_0"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="descending"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_name_0"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSortAscending={false}
-                                    isSorted={true}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination name",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination name"
-                                          >
-                                            Destination name
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                      <EuiIcon
-                                        className="euiTableSortIcon"
-                                        size="m"
-                                        type="sortDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_type_1"
-                              isSorted={false}
-                              key="_data_h_type_1"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_type_1"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination type",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination type"
-                                          >
-                                            Destination type
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_user_2"
-                              isSorted={false}
-                              key="_data_h_user_2"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_user_2"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Last updated by",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Last updated by"
-                                          >
-                                            Last updated by
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="right"
-                              key="_actions_h_3"
-                              width="35px"
-                            >
-                              <th
-                                className="euiTableHeaderCell"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "35px",
-                                  }
-                                }
-                              >
-                                <CellContents
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                  showSortMsg={false}
-                                >
-                                  <span
-                                    className="euiTableCellContent euiTableCellContent--alignRight"
-                                  >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Actions",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Actions"
-                                        >
-                                          Actions
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </th>
-                            </EuiTableHeaderCell>
-                          </tr>
-                        </thead>
-                      </EuiTableHeader>
-                      <EuiTableBody>
-                        <tbody>
-                          <EuiTableRow>
-                            <tr
-                              className="euiTableRow"
-                            >
-                              <EuiTableRowCell
-                                align="center"
-                                colSpan={4}
-                                isMobileFullWidth={true}
-                              >
-                                <td
-                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                                  colSpan={4}
-                                  style={
-                                    Object {
-                                      "width": undefined,
-                                    }
-                                  }
-                                >
-                                  <div
-                                    className="euiTableCellContent euiTableCellContent--alignCenter"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <EmptyDestinations
-                                        hasNotificationPlugin={false}
-                                        isFilterApplied={false}
-                                        onResetFilters={[Function]}
-                                      >
-                                        <EuiEmptyPrompt
-                                          body={
-                                            <EuiText>
-                                              <p>
-                                                There are no existing destinations.
-                                              </p>
-                                            </EuiText>
-                                          }
-                                          style={
-                                            Object {
-                                              "maxWidth": "45em",
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiEmptyPrompt"
-                                            style={
-                                              Object {
-                                                "maxWidth": "45em",
-                                              }
-                                            }
-                                          >
-                                            <EuiTextColor
-                                              color="subdued"
-                                            >
-                                              <span
-                                                className="euiTextColor euiTextColor--subdued"
-                                              >
-                                                <EuiText>
-                                                  <div
-                                                    className="euiText euiText--medium"
-                                                  >
-                                                    <EuiText>
-                                                      <div
-                                                        className="euiText euiText--medium"
-                                                      >
-                                                        <p>
-                                                          There are no existing destinations.
-                                                        </p>
-                                                      </div>
-                                                    </EuiText>
-                                                  </div>
-                                                </EuiText>
-                                              </span>
-                                            </EuiTextColor>
-                                          </div>
-                                        </EuiEmptyPrompt>
-                                      </EmptyDestinations>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tr>
-                          </EuiTableRow>
-                        </tbody>
-                      </EuiTableBody>
-                    </table>
-                  </EuiTable>
-                </div>
-              </div>
-            </EuiBasicTable>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
           </div>
-        </div>
-      </EuiPanel>
-    </ContentPanel>
-  </div>
+        </EuiEmptyPrompt>
+      </div>
+    </EuiPanel>
+  </FullPageNotificationsInfoCallOut>
 </DestinationsList>
 `;
 
@@ -1573,1340 +246,155 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
     }
   }
 >
-  <div>
-    <EuiTitle
-      size="l"
-    >
-      <h3
-        className="euiTitle euiTitle--large"
-      >
-        Destinations (deprecated)
-      </h3>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    >
+  <FullPageNotificationsInfoCallOut
+    hasNotificationPlugin={false}
+  >
+    <EuiPanel>
       <div
-        className="euiSpacer euiSpacer--l"
-      />
-    </EuiSpacer>
-    <NotificationsInfoCallOut
-      hasNotificationPlugin={false}
-    >
-      <div>
-        <EuiCallOut
-          color="danger"
-          iconType="alert"
-          title="Unable to send notifications. Notifications plugin is required."
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
+            >
+              View install instructions
+            </EuiButton>
+          }
+          body={
+            <EuiText>
+              Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+            </EuiText>
+          }
+          title={
+            <h2>
+              Destinations will become channels in Notifications
+            </h2>
+          }
         >
           <div
-            className="euiCallOut euiCallOut--danger"
+            className="euiEmptyPrompt"
           >
-            <div
-              className="euiCallOutHeader"
+            <EuiTitle
+              size="m"
             >
-              <EuiIcon
-                aria-hidden="true"
-                className="euiCallOutHeader__icon"
-                color="inherit"
-                size="m"
-                type="alert"
-              >
-                <div>
-                  EuiIconMock
-                </div>
-              </EuiIcon>
-              <span
-                className="euiCallOutHeader__title"
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                Unable to send notifications. Notifications plugin is required.
-              </span>
-            </div>
-            <EuiText
-              color="default"
-              size="s"
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiText euiText--small"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiTextColor
-                  color="default"
-                  component="div"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiTextColor euiTextColor--default"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <p>
-                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
-                    </p>
-                    <p>
-                      Existing destinations will be automatically migrated once Notifications plugin is installed.
-                    </p>
-                    <EuiSpacer
-                      size="l"
-                    >
+                    <EuiText>
                       <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
-                    <EuiButton
-                      external={true}
-                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                      iconSide="right"
-                      iconType="popout"
-                      target="_blank"
-                    >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
-                        element="a"
-                        external={true}
-                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                        iconSide="right"
-                        iconType="popout"
-                        isDisabled={false}
-                        rel="noopener noreferrer"
-                        target="_blank"
+                        className="euiText euiText--medium"
                       >
-                        <a
-                          className="euiButton euiButton--primary"
-                          disabled={false}
-                          external={true}
-                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                          rel="noopener noreferrer"
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
-                          target="_blank"
-                        >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="right"
-                            iconType="popout"
-                            textProps={
-                              Object {
-                                "className": "euiButton__text",
-                              }
-                            }
-                          >
-                            <span
-                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                            >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="popout"
-                              >
-                                <div>
-                                  EuiIconMock
-                                </div>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                View install instructions
-                              </span>
-                            </span>
-                          </EuiButtonContent>
-                        </a>
-                      </EuiButtonDisplay>
-                    </EuiButton>
-                  </div>
-                </EuiTextColor>
-              </div>
-            </EuiText>
-          </div>
-        </EuiCallOut>
-        <EuiSpacer
-          size="l"
-        >
-          <div
-            className="euiSpacer euiSpacer--l"
-          />
-        </EuiSpacer>
-      </div>
-    </NotificationsInfoCallOut>
-    <ContentPanel
-      actions={
-        <DestinationsActions
-          isEmailAllowed={false}
-          onClickManageEmailGroups={[Function]}
-          onClickManageSenders={[Function]}
-        />
-      }
-      bodyStyles={
-        Object {
-          "padding": "initial",
-        }
-      }
-      title={
-        <div>
-          <EuiTitle
-            size="s"
-            style={
-              Object {
-                "marginBottom": "0px",
-                "paddingBottom": "0px",
-              }
-            }
-          >
-            <h3>
-              Destinations pending for migration
-            </h3>
-          </EuiTitle>
-        </div>
-      }
-    >
-      <EuiPanel
-        style={
-          Object {
-            "paddingLeft": "0px",
-            "paddingRight": "0px",
-          }
-        }
-      >
-        <div
-          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-          style={
-            Object {
-              "paddingLeft": "0px",
-              "paddingRight": "0px",
-            }
-          }
-        >
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="spaceBetween"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
-            >
-              <EuiFlexItem>
-                <div
-                  className="euiFlexItem"
-                >
-                  <EuiTitle
-                    size="l"
-                  >
-                    <h3
-                      className="euiTitle euiTitle--large"
-                    >
-                      <div>
-                        <EuiTitle
-                          size="s"
-                          style={
-                            Object {
-                              "marginBottom": "0px",
-                              "paddingBottom": "0px",
-                            }
-                          }
-                        >
-                          <h3
-                            className="euiTitle euiTitle--small"
-                            style={
-                              Object {
-                                "marginBottom": "0px",
-                                "paddingBottom": "0px",
-                              }
-                            }
-                          >
-                            Destinations pending for migration
-                          </h3>
-                        </EuiTitle>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </h3>
-                  </EuiTitle>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <div
-                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                >
-                  <EuiFlexGroup
-                    alignItems="center"
-                    justifyContent="spaceBetween"
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <EuiFlexItem>
-                        <div
-                          className="euiFlexItem"
-                        >
-                          <DestinationsActions
-                            isEmailAllowed={false}
-                            onClickManageEmailGroups={[Function]}
-                            onClickManageSenders={[Function]}
-                          >
-                            <EuiFlexGroup
-                              alignItems="center"
-                              justifyContent="spaceBetween"
-                            >
-                              <div
-                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              />
-                            </EuiFlexGroup>
-                          </DestinationsActions>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </div>
-              </EuiFlexItem>
-            </div>
-          </EuiFlexGroup>
-          <EuiText
-            color="subdued"
-            size="xs"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiText euiText--extraSmall"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
-              <EuiTextColor
-                color="subdued"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--subdued"
-                />
-              </EuiTextColor>
-            </div>
-          </EuiText>
-          <EuiHorizontalRule
-            className=""
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <div
-            style={
-              Object {
-                "padding": "initial",
-              }
-            }
-          >
-            <DeleteConfirmation
-              isVisible={false}
-              onCancel={[Function]}
-              onConfirm={[Function]}
-            />
-            <ManageSenders
-              httpClient={[MockFunction]}
-              isEmailAllowed={false}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <ManageEmailGroups
-              httpClient={[MockFunction]}
-              isEmailAllowed={false}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <DestinationsControls
-              activePage={0}
-              allowList={Array []}
-              onPageClick={[Function]}
-              onSearchChange={[Function]}
-              onTypeChange={[Function]}
-              pageCount={1}
-              search=""
-              type="ALL"
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <EuiFlexGroup
-                style={
-                  Object {
-                    "padding": "0px 5px",
-                  }
-                }
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                element="a"
+                external={true}
+                fill={true}
+                href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                <a
+                  className="euiButton euiButton--primary euiButton--fill"
+                  disabled={false}
+                  external={true}
+                  href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  rel="noopener noreferrer"
                   style={
                     Object {
-                      "padding": "0px 5px",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiFieldSearch
-                        compressed={false}
-                        fullWidth={true}
-                        incremental={false}
-                        isClearable={true}
-                        isLoading={false}
-                        onChange={[Function]}
-                        placeholder="Search"
-                        value=""
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={true}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <input
-                                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                                  onChange={[Function]}
-                                  onKeyUp={[Function]}
-                                  placeholder="Search"
-                                  type="search"
-                                  value=""
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon="search"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="search"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="search"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldSearch>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiSelect
-                        onChange={[Function]}
-                        options={
-                          Array [
-                            Object {
-                              "text": "All type",
-                              "value": "ALL",
-                            },
-                          ]
-                        }
-                        value="ALL"
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={false}
-                          icon={
-                            Object {
-                              "side": "right",
-                              "type": "arrowDown",
-                            }
-                          }
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <select
-                                  className="euiSelect"
-                                  onChange={[Function]}
-                                  onMouseUp={[Function]}
-                                  value="ALL"
-                                >
-                                  <option
-                                    key="0"
-                                    value="ALL"
-                                  >
-                                    All type
-                                  </option>
-                                </select>
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="arrowDown"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="arrowDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiSelect>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "justifyContent": "center",
-                        }
-                      }
-                    >
-                      <EuiPagination
-                        activePage={0}
-                        onPageClick={[Function]}
-                        pageCount={1}
-                      >
-                        <nav
-                          className="euiPagination"
-                        >
-                          <EuiI18n
-                            default="Previous page, {page}"
-                            token="euiPagination.previousPage"
-                            values={
-                              Object {
-                                "page": 0,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Previous page"
-                              token="euiPagination.disabledPreviousPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Previous page"
-                                color="text"
-                                data-test-subj="pagination-button-previous"
-                                disabled={true}
-                                iconType="arrowLeft"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Previous page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-previous"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowLeft"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                          <ul
-                            className="euiPagination__list"
-                          >
-                            <PaginationButton
-                              key="0"
-                              pageIndex={0}
-                            >
-                              <li
-                                className="euiPagination__item"
-                              >
-                                <EuiPaginationButton
-                                  hideOnMobile={true}
-                                  isActive={true}
-                                  onClick={[Function]}
-                                  pageIndex={0}
-                                  totalPages={1}
-                                >
-                                  <EuiI18n
-                                    default="Page {page} of {totalPages}"
-                                    token="euiPaginationButton.longPageString"
-                                    values={
-                                      Object {
-                                        "page": 1,
-                                        "totalPages": 1,
-                                      }
-                                    }
-                                  >
-                                    <EuiI18n
-                                      default="Page {page}"
-                                      token="euiPaginationButton.shortPageString"
-                                      values={
-                                        Object {
-                                          "page": 1,
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonEmpty
-                                        aria-current={true}
-                                        aria-label="Page 1 of 1"
-                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                        color="text"
-                                        data-test-subj="pagination-button-0"
-                                        isDisabled={true}
-                                        onClick={[Function]}
-                                        size="s"
-                                      >
-                                        <button
-                                          aria-current={true}
-                                          aria-label="Page 1 of 1"
-                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                          data-test-subj="pagination-button-0"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="left"
-                                            iconSize="m"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonEmpty__content"
-                                            >
-                                              <span
-                                                className="euiButtonEmpty__text"
-                                              >
-                                                1
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
-                                    </EuiI18n>
-                                  </EuiI18n>
-                                </EuiPaginationButton>
-                              </li>
-                            </PaginationButton>
-                          </ul>
-                          <EuiI18n
-                            default="Next page, {page}"
-                            token="euiPagination.nextPage"
-                            values={
-                              Object {
-                                "page": 2,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Next page"
-                              token="euiPagination.disabledNextPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Next page"
-                                color="text"
-                                data-test-subj="pagination-button-next"
-                                disabled={true}
-                                iconType="arrowRight"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Next page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-next"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                        </nav>
-                      </EuiPagination>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </DestinationsControls>
-            <EuiHorizontalRule
-              margin="xs"
-            >
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-              />
-            </EuiHorizontalRule>
-            <EuiBasicTable
-              columns={
-                Array [
-                  Object {
-                    "field": "name",
-                    "name": "Destination name",
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "type",
-                    "name": "Destination type",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "user",
-                    "name": "Last updated by",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "actions": Array [
-                      Object {
-                        "description": "View this destination.",
-                        "name": "View",
-                        "onClick": [Function],
-                      },
-                    ],
-                    "name": "Actions",
-                    "width": "35px",
-                  },
-                ]
-              }
-              hasActions={true}
-              isSelectable={true}
-              items={Array []}
-              noItemsMessage={
-                <EmptyDestinations
-                  hasNotificationPlugin={false}
-                  isFilterApplied={false}
-                  onResetFilters={[Function]}
-                />
-              }
-              onChange={[Function]}
-              pagination={
-                Object {
-                  "pageIndex": 0,
-                  "pageSize": 20,
-                  "pageSizeOptions": Array [
-                    5,
-                    10,
-                    20,
-                    50,
-                  ],
-                  "totalItemCount": 0,
-                }
-              }
-              responsive={true}
-              sorting={
-                Object {
-                  "sort": Object {
-                    "direction": "desc",
-                    "field": "name",
-                  },
-                }
-              }
-              tableLayout="fixed"
-            >
-              <div
-                className="euiBasicTable"
-              >
-                <div>
-                  <EuiTableHeaderMobile>
-                    <div
-                      className="euiTableHeaderMobile"
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <EuiFlexGroup
-                        alignItems="baseline"
-                        justifyContent="spaceBetween"
-                        responsive={false}
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <div
-                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                        >
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiTableSortMobile
-                                items={
-                                  Array [
-                                    Object {
-                                      "isSortAscending": false,
-                                      "isSorted": true,
-                                      "key": "_data_s_name_0",
-                                      "name": "Destination name",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_type_1",
-                                      "name": "Destination type",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_user_2",
-                                      "name": "Last updated by",
-                                      "onSort": [Function],
-                                    },
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="euiTableSortMobile"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downRight"
-                                    button={
-                                      <EuiButtonEmpty
-                                        flush="right"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                        size="xs"
-                                      >
-                                        <EuiI18n
-                                          default="Sorting"
-                                          token="euiTableSortMobile.sorting"
-                                        />
-                                      </EuiButtonEmpty>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
-                                  >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownRight"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
-                                        <EuiButtonEmpty
-                                          flush="right"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <button
-                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                            disabled={false}
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiButtonContent
-                                              className="euiButtonEmpty__content"
-                                              iconSide="right"
-                                              iconSize="s"
-                                              iconType="arrowDown"
-                                              textProps={
-                                                Object {
-                                                  "className": "euiButtonEmpty__text",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                              >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="s"
-                                                  type="arrowDown"
-                                                >
-                                                  <div>
-                                                    EuiIconMock
-                                                  </div>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButtonEmpty__text"
-                                                >
-                                                  <EuiI18n
-                                                    default="Sorting"
-                                                    token="euiTableSortMobile.sorting"
-                                                  >
-                                                    Sorting
-                                                  </EuiI18n>
-                                                </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonEmpty>
-                                      </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiTableSortMobile>
-                            </div>
-                          </EuiFlexItem>
+                        <div>
+                          EuiIconMock
                         </div>
-                      </EuiFlexGroup>
-                    </div>
-                  </EuiTableHeaderMobile>
-                  <EuiTable
-                    id="generated-id"
-                    responsive={true}
-                    tableLayout="fixed"
-                  >
-                    <table
-                      className="euiTable euiTable--responsive"
-                      id="generated-id"
-                      tabIndex={-1}
-                    >
-                      <EuiScreenReaderOnly>
-                        <caption
-                          className="euiScreenReaderOnly euiTableCaption"
-                        >
-                          <EuiDelayRender
-                            delay={500}
-                          />
-                        </caption>
-                      </EuiScreenReaderOnly>
-                      <EuiTableHeader>
-                        <thead>
-                          <tr>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_name_0"
-                              isSortAscending={false}
-                              isSorted={true}
-                              key="_data_h_name_0"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="descending"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_name_0"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSortAscending={false}
-                                    isSorted={true}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination name",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination name"
-                                          >
-                                            Destination name
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                      <EuiIcon
-                                        className="euiTableSortIcon"
-                                        size="m"
-                                        type="sortDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_type_1"
-                              isSorted={false}
-                              key="_data_h_type_1"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_type_1"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination type",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination type"
-                                          >
-                                            Destination type
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_user_2"
-                              isSorted={false}
-                              key="_data_h_user_2"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_user_2"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Last updated by",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Last updated by"
-                                          >
-                                            Last updated by
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="right"
-                              key="_actions_h_3"
-                              width="35px"
-                            >
-                              <th
-                                className="euiTableHeaderCell"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "35px",
-                                  }
-                                }
-                              >
-                                <CellContents
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                  showSortMsg={false}
-                                >
-                                  <span
-                                    className="euiTableCellContent euiTableCellContent--alignRight"
-                                  >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Actions",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Actions"
-                                        >
-                                          Actions
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </th>
-                            </EuiTableHeaderCell>
-                          </tr>
-                        </thead>
-                      </EuiTableHeader>
-                      <EuiTableBody>
-                        <tbody>
-                          <EuiTableRow>
-                            <tr
-                              className="euiTableRow"
-                            >
-                              <EuiTableRowCell
-                                align="center"
-                                colSpan={4}
-                                isMobileFullWidth={true}
-                              >
-                                <td
-                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                                  colSpan={4}
-                                  style={
-                                    Object {
-                                      "width": undefined,
-                                    }
-                                  }
-                                >
-                                  <div
-                                    className="euiTableCellContent euiTableCellContent--alignCenter"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <EmptyDestinations
-                                        hasNotificationPlugin={false}
-                                        isFilterApplied={false}
-                                        onResetFilters={[Function]}
-                                      >
-                                        <EuiEmptyPrompt
-                                          body={
-                                            <EuiText>
-                                              <p>
-                                                There are no existing destinations.
-                                              </p>
-                                            </EuiText>
-                                          }
-                                          style={
-                                            Object {
-                                              "maxWidth": "45em",
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiEmptyPrompt"
-                                            style={
-                                              Object {
-                                                "maxWidth": "45em",
-                                              }
-                                            }
-                                          >
-                                            <EuiTextColor
-                                              color="subdued"
-                                            >
-                                              <span
-                                                className="euiTextColor euiTextColor--subdued"
-                                              >
-                                                <EuiText>
-                                                  <div
-                                                    className="euiText euiText--medium"
-                                                  >
-                                                    <EuiText>
-                                                      <div
-                                                        className="euiText euiText--medium"
-                                                      >
-                                                        <p>
-                                                          There are no existing destinations.
-                                                        </p>
-                                                      </div>
-                                                    </EuiText>
-                                                  </div>
-                                                </EuiText>
-                                              </span>
-                                            </EuiTextColor>
-                                          </div>
-                                        </EuiEmptyPrompt>
-                                      </EmptyDestinations>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tr>
-                          </EuiTableRow>
-                        </tbody>
-                      </EuiTableBody>
-                    </table>
-                  </EuiTable>
-                </div>
-              </div>
-            </EuiBasicTable>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
           </div>
-        </div>
-      </EuiPanel>
-    </ContentPanel>
-  </div>
+        </EuiEmptyPrompt>
+      </div>
+    </EuiPanel>
+  </FullPageNotificationsInfoCallOut>
 </DestinationsList>
 `;
 
@@ -2957,1375 +445,154 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
     }
   }
 >
-  <div>
-    <EuiTitle
-      size="l"
-    >
-      <h3
-        className="euiTitle euiTitle--large"
-      >
-        Destinations (deprecated)
-      </h3>
-    </EuiTitle>
-    <EuiSpacer
-      size="l"
-    >
+  <FullPageNotificationsInfoCallOut
+    hasNotificationPlugin={false}
+  >
+    <EuiPanel>
       <div
-        className="euiSpacer euiSpacer--l"
-      />
-    </EuiSpacer>
-    <NotificationsInfoCallOut
-      hasNotificationPlugin={false}
-    >
-      <div>
-        <EuiCallOut
-          color="danger"
-          iconType="alert"
-          title="Unable to send notifications. Notifications plugin is required."
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
+            >
+              View install instructions
+            </EuiButton>
+          }
+          body={
+            <EuiText>
+              Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
+            </EuiText>
+          }
+          title={
+            <h2>
+              Destinations will become channels in Notifications
+            </h2>
+          }
         >
           <div
-            className="euiCallOut euiCallOut--danger"
+            className="euiEmptyPrompt"
           >
-            <div
-              className="euiCallOutHeader"
+            <EuiTitle
+              size="m"
             >
-              <EuiIcon
-                aria-hidden="true"
-                className="euiCallOutHeader__icon"
-                color="inherit"
-                size="m"
-                type="alert"
-              >
-                <div>
-                  EuiIconMock
-                </div>
-              </EuiIcon>
-              <span
-                className="euiCallOutHeader__title"
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                Unable to send notifications. Notifications plugin is required.
-              </span>
-            </div>
-            <EuiText
-              color="default"
-              size="s"
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiText euiText--small"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiTextColor
-                  color="default"
-                  component="div"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiTextColor euiTextColor--default"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <p>
-                      Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
-                    </p>
-                    <p>
-                      Existing destinations will be automatically migrated once Notifications plugin is installed.
-                    </p>
-                    <EuiSpacer
-                      size="l"
-                    >
+                    <EuiText>
                       <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
-                    <EuiButton
-                      external={true}
-                      href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                      iconSide="right"
-                      iconType="popout"
-                      target="_blank"
-                    >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
-                        element="a"
-                        external={true}
-                        href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                        iconSide="right"
-                        iconType="popout"
-                        isDisabled={false}
-                        rel="noopener noreferrer"
-                        target="_blank"
+                        className="euiText euiText--medium"
                       >
-                        <a
-                          className="euiButton euiButton--primary"
-                          disabled={false}
-                          external={true}
-                          href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
-                          rel="noopener noreferrer"
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
-                          target="_blank"
-                        >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="right"
-                            iconType="popout"
-                            textProps={
-                              Object {
-                                "className": "euiButton__text",
-                              }
-                            }
-                          >
-                            <span
-                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                            >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="popout"
-                              >
-                                <div>
-                                  EuiIconMock
-                                </div>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                View install instructions
-                              </span>
-                            </span>
-                          </EuiButtonContent>
-                        </a>
-                      </EuiButtonDisplay>
-                    </EuiButton>
-                  </div>
-                </EuiTextColor>
-              </div>
-            </EuiText>
-          </div>
-        </EuiCallOut>
-        <EuiSpacer
-          size="l"
-        >
-          <div
-            className="euiSpacer euiSpacer--l"
-          />
-        </EuiSpacer>
-      </div>
-    </NotificationsInfoCallOut>
-    <ContentPanel
-      actions={
-        <DestinationsActions
-          isEmailAllowed={false}
-          onClickManageEmailGroups={[Function]}
-          onClickManageSenders={[Function]}
-        />
-      }
-      bodyStyles={
-        Object {
-          "padding": "initial",
-        }
-      }
-      title={
-        <div>
-          <EuiTitle
-            size="s"
-            style={
-              Object {
-                "marginBottom": "0px",
-                "paddingBottom": "0px",
-              }
-            }
-          >
-            <h3>
-              Destinations pending for migration
-            </h3>
-          </EuiTitle>
-        </div>
-      }
-    >
-      <EuiPanel
-        style={
-          Object {
-            "paddingLeft": "0px",
-            "paddingRight": "0px",
-          }
-        }
-      >
-        <div
-          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-          style={
-            Object {
-              "paddingLeft": "0px",
-              "paddingRight": "0px",
-            }
-          }
-        >
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="spaceBetween"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
-            >
-              <EuiFlexItem>
-                <div
-                  className="euiFlexItem"
-                >
-                  <EuiTitle
-                    size="l"
-                  >
-                    <h3
-                      className="euiTitle euiTitle--large"
-                    >
-                      <div>
-                        <EuiTitle
-                          size="s"
-                          style={
-                            Object {
-                              "marginBottom": "0px",
-                              "paddingBottom": "0px",
-                            }
-                          }
-                        >
-                          <h3
-                            className="euiTitle euiTitle--small"
-                            style={
-                              Object {
-                                "marginBottom": "0px",
-                                "paddingBottom": "0px",
-                              }
-                            }
-                          >
-                            Destinations pending for migration
-                          </h3>
-                        </EuiTitle>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </h3>
-                  </EuiTitle>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <div
-                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                >
-                  <EuiFlexGroup
-                    alignItems="center"
-                    justifyContent="spaceBetween"
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <EuiFlexItem>
-                        <div
-                          className="euiFlexItem"
-                        >
-                          <DestinationsActions
-                            isEmailAllowed={false}
-                            onClickManageEmailGroups={[Function]}
-                            onClickManageSenders={[Function]}
-                          >
-                            <EuiFlexGroup
-                              alignItems="center"
-                              justifyContent="spaceBetween"
-                            >
-                              <div
-                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              />
-                            </EuiFlexGroup>
-                          </DestinationsActions>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </div>
-              </EuiFlexItem>
-            </div>
-          </EuiFlexGroup>
-          <EuiText
-            color="subdued"
-            size="xs"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
-          >
-            <div
-              className="euiText euiText--extraSmall"
-              style={
-                Object {
-                  "padding": "0px 10px",
-                }
-              }
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
-              <EuiTextColor
-                color="subdued"
-                component="div"
-              >
-                <div
-                  className="euiTextColor euiTextColor--subdued"
-                />
-              </EuiTextColor>
-            </div>
-          </EuiText>
-          <EuiHorizontalRule
-            className=""
-            margin="xs"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-          </EuiHorizontalRule>
-          <div
-            style={
-              Object {
-                "padding": "initial",
-              }
-            }
-          >
-            <DeleteConfirmation
-              isVisible={false}
-              onCancel={[Function]}
-              onConfirm={[Function]}
-            />
-            <ManageSenders
-              httpClient={[MockFunction]}
-              isEmailAllowed={false}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <ManageEmailGroups
-              httpClient={[MockFunction]}
-              isEmailAllowed={false}
-              isVisible={false}
-              onClickCancel={[Function]}
-              onClickSave={[Function]}
-            />
-            <DestinationsControls
-              activePage={0}
-              allowList={
-                Array [
-                  "chime",
-                  "slack",
-                  "custom_webhook",
-                ]
-              }
-              onPageClick={[Function]}
-              onSearchChange={[Function]}
-              onTypeChange={[Function]}
-              pageCount={1}
-              search=""
-              type="ALL"
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <EuiFlexGroup
-                style={
-                  Object {
-                    "padding": "0px 5px",
-                  }
-                }
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                element="a"
+                external={true}
+                fill={true}
+                href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                <a
+                  className="euiButton euiButton--primary euiButton--fill"
+                  disabled={false}
+                  external={true}
+                  href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  rel="noopener noreferrer"
                   style={
                     Object {
-                      "padding": "0px 5px",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiFieldSearch
-                        compressed={false}
-                        fullWidth={true}
-                        incremental={false}
-                        isClearable={true}
-                        isLoading={false}
-                        onChange={[Function]}
-                        placeholder="Search"
-                        value=""
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={true}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <input
-                                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                                  onChange={[Function]}
-                                  onKeyUp={[Function]}
-                                  placeholder="Search"
-                                  type="search"
-                                  value=""
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon="search"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="search"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="search"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldSearch>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiSelect
-                        onChange={[Function]}
-                        options={
-                          Array [
-                            Object {
-                              "text": "All type",
-                              "value": "ALL",
-                            },
-                            Object {
-                              "text": "Amazon Chime",
-                              "value": "chime",
-                            },
-                            Object {
-                              "text": "Slack",
-                              "value": "slack",
-                            },
-                            Object {
-                              "text": "Custom webhook",
-                              "value": "custom_webhook",
-                            },
-                          ]
-                        }
-                        value="ALL"
-                      >
-                        <EuiFormControlLayout
-                          compressed={false}
-                          fullWidth={false}
-                          icon={
-                            Object {
-                              "side": "right",
-                              "type": "arrowDown",
-                            }
-                          }
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayout"
-                          >
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl>
-                                <select
-                                  className="euiSelect"
-                                  onChange={[Function]}
-                                  onMouseUp={[Function]}
-                                  value="ALL"
-                                >
-                                  <option
-                                    key="0"
-                                    value="ALL"
-                                  >
-                                    All type
-                                  </option>
-                                  <option
-                                    key="1"
-                                    value="chime"
-                                  >
-                                    Amazon Chime
-                                  </option>
-                                  <option
-                                    key="2"
-                                    value="slack"
-                                  >
-                                    Slack
-                                  </option>
-                                  <option
-                                    key="3"
-                                    value="custom_webhook"
-                                  >
-                                    Custom webhook
-                                  </option>
-                                </select>
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons
-                                compressed={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                >
-                                  <EuiFormControlLayoutCustomIcon
-                                    size="m"
-                                    type="arrowDown"
-                                  >
-                                    <span
-                                      className="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <EuiIcon
-                                        aria-hidden="true"
-                                        className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
-                                        type="arrowDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </EuiFormControlLayoutCustomIcon>
-                                </div>
-                              </EuiFormControlLayoutIcons>
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiSelect>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "justifyContent": "center",
-                        }
-                      }
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <EuiPagination
-                        activePage={0}
-                        onPageClick={[Function]}
-                        pageCount={1}
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <nav
-                          className="euiPagination"
-                        >
-                          <EuiI18n
-                            default="Previous page, {page}"
-                            token="euiPagination.previousPage"
-                            values={
-                              Object {
-                                "page": 0,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Previous page"
-                              token="euiPagination.disabledPreviousPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Previous page"
-                                color="text"
-                                data-test-subj="pagination-button-previous"
-                                disabled={true}
-                                iconType="arrowLeft"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Previous page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-previous"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowLeft"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                          <ul
-                            className="euiPagination__list"
-                          >
-                            <PaginationButton
-                              key="0"
-                              pageIndex={0}
-                            >
-                              <li
-                                className="euiPagination__item"
-                              >
-                                <EuiPaginationButton
-                                  hideOnMobile={true}
-                                  isActive={true}
-                                  onClick={[Function]}
-                                  pageIndex={0}
-                                  totalPages={1}
-                                >
-                                  <EuiI18n
-                                    default="Page {page} of {totalPages}"
-                                    token="euiPaginationButton.longPageString"
-                                    values={
-                                      Object {
-                                        "page": 1,
-                                        "totalPages": 1,
-                                      }
-                                    }
-                                  >
-                                    <EuiI18n
-                                      default="Page {page}"
-                                      token="euiPaginationButton.shortPageString"
-                                      values={
-                                        Object {
-                                          "page": 1,
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonEmpty
-                                        aria-current={true}
-                                        aria-label="Page 1 of 1"
-                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                        color="text"
-                                        data-test-subj="pagination-button-0"
-                                        isDisabled={true}
-                                        onClick={[Function]}
-                                        size="s"
-                                      >
-                                        <button
-                                          aria-current={true}
-                                          aria-label="Page 1 of 1"
-                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                          data-test-subj="pagination-button-0"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="left"
-                                            iconSize="m"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonEmpty__content"
-                                            >
-                                              <span
-                                                className="euiButtonEmpty__text"
-                                              >
-                                                1
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
-                                    </EuiI18n>
-                                  </EuiI18n>
-                                </EuiPaginationButton>
-                              </li>
-                            </PaginationButton>
-                          </ul>
-                          <EuiI18n
-                            default="Next page, {page}"
-                            token="euiPagination.nextPage"
-                            values={
-                              Object {
-                                "page": 2,
-                              }
-                            }
-                          >
-                            <EuiI18n
-                              default="Next page"
-                              token="euiPagination.disabledNextPage"
-                            >
-                              <EuiButtonIcon
-                                aria-label="Next page"
-                                color="text"
-                                data-test-subj="pagination-button-next"
-                                disabled={true}
-                                iconType="arrowRight"
-                                onClick={[Function]}
-                              >
-                                <button
-                                  aria-label="Next page"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-next"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div>
-                                      EuiIconMock
-                                    </div>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
-                        </nav>
-                      </EuiPagination>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </DestinationsControls>
-            <EuiHorizontalRule
-              margin="xs"
-            >
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-              />
-            </EuiHorizontalRule>
-            <EuiBasicTable
-              columns={
-                Array [
-                  Object {
-                    "field": "name",
-                    "name": "Destination name",
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "type",
-                    "name": "Destination type",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "field": "user",
-                    "name": "Last updated by",
-                    "render": [Function],
-                    "sortable": true,
-                    "textOnly": true,
-                    "truncateText": true,
-                    "width": "100px",
-                  },
-                  Object {
-                    "actions": Array [
-                      Object {
-                        "description": "View this destination.",
-                        "name": "View",
-                        "onClick": [Function],
-                      },
-                    ],
-                    "name": "Actions",
-                    "width": "35px",
-                  },
-                ]
-              }
-              hasActions={true}
-              isSelectable={true}
-              items={Array []}
-              noItemsMessage={
-                <EmptyDestinations
-                  hasNotificationPlugin={false}
-                  isFilterApplied={false}
-                  onResetFilters={[Function]}
-                />
-              }
-              onChange={[Function]}
-              pagination={
-                Object {
-                  "pageIndex": 0,
-                  "pageSize": 20,
-                  "pageSizeOptions": Array [
-                    5,
-                    10,
-                    20,
-                    50,
-                  ],
-                  "totalItemCount": 0,
-                }
-              }
-              responsive={true}
-              sorting={
-                Object {
-                  "sort": Object {
-                    "direction": "desc",
-                    "field": "name",
-                  },
-                }
-              }
-              tableLayout="fixed"
-            >
-              <div
-                className="euiBasicTable"
-              >
-                <div>
-                  <EuiTableHeaderMobile>
-                    <div
-                      className="euiTableHeaderMobile"
-                    >
-                      <EuiFlexGroup
-                        alignItems="baseline"
-                        justifyContent="spaceBetween"
-                        responsive={false}
-                      >
-                        <div
-                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                        >
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
-                          >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiTableSortMobile
-                                items={
-                                  Array [
-                                    Object {
-                                      "isSortAscending": false,
-                                      "isSorted": true,
-                                      "key": "_data_s_name_0",
-                                      "name": "Destination name",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_type_1",
-                                      "name": "Destination type",
-                                      "onSort": [Function],
-                                    },
-                                    Object {
-                                      "isSortAscending": undefined,
-                                      "isSorted": false,
-                                      "key": "_data_s_user_2",
-                                      "name": "Last updated by",
-                                      "onSort": [Function],
-                                    },
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="euiTableSortMobile"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downRight"
-                                    button={
-                                      <EuiButtonEmpty
-                                        flush="right"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                        size="xs"
-                                      >
-                                        <EuiI18n
-                                          default="Sorting"
-                                          token="euiTableSortMobile.sorting"
-                                        />
-                                      </EuiButtonEmpty>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
-                                  >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownRight"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
-                                        <EuiButtonEmpty
-                                          flush="right"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <button
-                                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                            disabled={false}
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiButtonContent
-                                              className="euiButtonEmpty__content"
-                                              iconSide="right"
-                                              iconSize="s"
-                                              iconType="arrowDown"
-                                              textProps={
-                                                Object {
-                                                  "className": "euiButtonEmpty__text",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                              >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="s"
-                                                  type="arrowDown"
-                                                >
-                                                  <div>
-                                                    EuiIconMock
-                                                  </div>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButtonEmpty__text"
-                                                >
-                                                  <EuiI18n
-                                                    default="Sorting"
-                                                    token="euiTableSortMobile.sorting"
-                                                  >
-                                                    Sorting
-                                                  </EuiI18n>
-                                                </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonEmpty>
-                                      </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiTableSortMobile>
-                            </div>
-                          </EuiFlexItem>
+                        <div>
+                          EuiIconMock
                         </div>
-                      </EuiFlexGroup>
-                    </div>
-                  </EuiTableHeaderMobile>
-                  <EuiTable
-                    id="generated-id"
-                    responsive={true}
-                    tableLayout="fixed"
-                  >
-                    <table
-                      className="euiTable euiTable--responsive"
-                      id="generated-id"
-                      tabIndex={-1}
-                    >
-                      <EuiScreenReaderOnly>
-                        <caption
-                          className="euiScreenReaderOnly euiTableCaption"
-                        >
-                          <EuiDelayRender
-                            delay={500}
-                          />
-                        </caption>
-                      </EuiScreenReaderOnly>
-                      <EuiTableHeader>
-                        <thead>
-                          <tr>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_name_0"
-                              isSortAscending={false}
-                              isSorted={true}
-                              key="_data_h_name_0"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="descending"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_name_0"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSortAscending={false}
-                                    isSorted={true}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination name",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination name"
-                                          >
-                                            Destination name
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                      <EuiIcon
-                                        className="euiTableSortIcon"
-                                        size="m"
-                                        type="sortDown"
-                                      >
-                                        <div>
-                                          EuiIconMock
-                                        </div>
-                                      </EuiIcon>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_type_1"
-                              isSorted={false}
-                              key="_data_h_type_1"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_type_1"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Destination type",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Destination type"
-                                          >
-                                            Destination type
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="left"
-                              data-test-subj="tableHeaderCell_user_2"
-                              isSorted={false}
-                              key="_data_h_user_2"
-                              onSort={[Function]}
-                              width="100px"
-                            >
-                              <th
-                                aria-live="polite"
-                                aria-sort="none"
-                                className="euiTableHeaderCell"
-                                data-test-subj="tableHeaderCell_user_2"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "100px",
-                                  }
-                                }
-                              >
-                                <button
-                                  className="euiTableHeaderButton"
-                                  data-test-subj="tableHeaderSortButton"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <CellContents
-                                    className="euiTableCellContent"
-                                    isSorted={false}
-                                    showSortMsg={true}
-                                  >
-                                    <span
-                                      className="euiTableCellContent"
-                                    >
-                                      <EuiInnerText>
-                                        <EuiI18n
-                                          default="{innerText}; {description}"
-                                          token="euiTableHeaderCell.titleTextWithDesc"
-                                          values={
-                                            Object {
-                                              "description": undefined,
-                                              "innerText": "Last updated by",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiTableCellContent__text"
-                                            title="Last updated by"
-                                          >
-                                            Last updated by
-                                          </span>
-                                        </EuiI18n>
-                                      </EuiInnerText>
-                                    </span>
-                                  </CellContents>
-                                </button>
-                              </th>
-                            </EuiTableHeaderCell>
-                            <EuiTableHeaderCell
-                              align="right"
-                              key="_actions_h_3"
-                              width="35px"
-                            >
-                              <th
-                                className="euiTableHeaderCell"
-                                role="columnheader"
-                                scope="col"
-                                style={
-                                  Object {
-                                    "width": "35px",
-                                  }
-                                }
-                              >
-                                <CellContents
-                                  className="euiTableCellContent euiTableCellContent--alignRight"
-                                  showSortMsg={false}
-                                >
-                                  <span
-                                    className="euiTableCellContent euiTableCellContent--alignRight"
-                                  >
-                                    <EuiInnerText>
-                                      <EuiI18n
-                                        default="{innerText}; {description}"
-                                        token="euiTableHeaderCell.titleTextWithDesc"
-                                        values={
-                                          Object {
-                                            "description": undefined,
-                                            "innerText": "Actions",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiTableCellContent__text"
-                                          title="Actions"
-                                        >
-                                          Actions
-                                        </span>
-                                      </EuiI18n>
-                                    </EuiInnerText>
-                                  </span>
-                                </CellContents>
-                              </th>
-                            </EuiTableHeaderCell>
-                          </tr>
-                        </thead>
-                      </EuiTableHeader>
-                      <EuiTableBody>
-                        <tbody>
-                          <EuiTableRow>
-                            <tr
-                              className="euiTableRow"
-                            >
-                              <EuiTableRowCell
-                                align="center"
-                                colSpan={4}
-                                isMobileFullWidth={true}
-                              >
-                                <td
-                                  className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                                  colSpan={4}
-                                  style={
-                                    Object {
-                                      "width": undefined,
-                                    }
-                                  }
-                                >
-                                  <div
-                                    className="euiTableCellContent euiTableCellContent--alignCenter"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <EmptyDestinations
-                                        hasNotificationPlugin={false}
-                                        isFilterApplied={false}
-                                        onResetFilters={[Function]}
-                                      >
-                                        <EuiEmptyPrompt
-                                          body={
-                                            <EuiText>
-                                              <p>
-                                                There are no existing destinations.
-                                              </p>
-                                            </EuiText>
-                                          }
-                                          style={
-                                            Object {
-                                              "maxWidth": "45em",
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiEmptyPrompt"
-                                            style={
-                                              Object {
-                                                "maxWidth": "45em",
-                                              }
-                                            }
-                                          >
-                                            <EuiTextColor
-                                              color="subdued"
-                                            >
-                                              <span
-                                                className="euiTextColor euiTextColor--subdued"
-                                              >
-                                                <EuiText>
-                                                  <div
-                                                    className="euiText euiText--medium"
-                                                  >
-                                                    <EuiText>
-                                                      <div
-                                                        className="euiText euiText--medium"
-                                                      >
-                                                        <p>
-                                                          There are no existing destinations.
-                                                        </p>
-                                                      </div>
-                                                    </EuiText>
-                                                  </div>
-                                                </EuiText>
-                                              </span>
-                                            </EuiTextColor>
-                                          </div>
-                                        </EuiEmptyPrompt>
-                                      </EmptyDestinations>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tr>
-                          </EuiTableRow>
-                        </tbody>
-                      </EuiTableBody>
-                    </table>
-                  </EuiTable>
-                </div>
-              </div>
-            </EuiBasicTable>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
           </div>
-        </div>
-      </EuiPanel>
-    </ContentPanel>
-  </div>
+        </EuiEmptyPrompt>
+      </div>
+    </EuiPanel>
+  </FullPageNotificationsInfoCallOut>
 </DestinationsList>
 `;

From b208bd3a6848b63fb5e55557b3d9bddd64e6ae49 Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 17:47:33 -0800
Subject: [PATCH 4/6] Updated button text.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../NotificationsInfoCallOut/NotificationsInfoCallOut.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
index 86a5134fe..09f606eb6 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -43,7 +43,7 @@ const hasNotificationsBodyText = (
   </p>
 );
 const hasNotificationsButton = (
-  <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
+  <EuiButton href={MANAGE_CHANNELS_PATH}>View in Notifications</EuiButton>
 );
 
 const NotificationsInfoCallOut = ({ hasNotificationPlugin }) => {

From 4d988e7cc9ae3314f3cf8d6c3222f04e3ddfba0d Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 17:59:47 -0800
Subject: [PATCH 5/6] Updated snapshot files.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../__snapshots__/NotificationsInfoCallOut.test.js.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
index 469fb7915..c4f250a0f 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
@@ -68,7 +68,7 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
             <span
               class="euiButton__text"
             >
-              View Notifications
+              View in Notifications
             </span>
           </span>
         </a>

From 5c57f84ccb4f3c5ebbbc2c8dcfe78375d1e99938 Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Thu, 8 Dec 2022 19:27:06 -0800
Subject: [PATCH 6/6] Refactored landing page logic.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../containers/DestinationsList/DestinationsList.js         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
index 8ddd7be40..6669f8d5e 100644
--- a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
+++ b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
@@ -319,9 +319,7 @@ class DestinationsList extends React.Component {
           />
         ) : null}
 
-        {destinations.length === 0 ? (
-          <FullPageNotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
-        ) : (
+        {isDestinationLoading || totalDestinations > 0 || isFilterApplied ? (
           <div>
             <EuiTitle size={'l'}>
               <h3>Destinations (deprecated)</h3>
@@ -417,6 +415,8 @@ class DestinationsList extends React.Component {
               />
             </ContentPanel>
           </div>
+        ) : (
+          <FullPageNotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
         )}
       </React.Fragment>
     );