From 58dee8375d317080102d8ef009c94cdea7883245 Mon Sep 17 00:00:00 2001
From: AWSHurneyt <hurneyt@amazon.com>
Date: Mon, 9 Jan 2023 16:33:53 -0800
Subject: [PATCH] Refactored the help text elements displayed when users access
 the destinations list page after destinations deprecation. (#413)

* Refactored the help text elements displayed when users access the destinations list page after destinations deprecation.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

* Refactored the help text elements displayed when users access the destinations list page after destinations deprecation.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

* Updated snapshot.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

* Updated button text.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

* Updated snapshot files.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

* Refactored landing page logic.

Signed-off-by: AWSHurneyt <hurneyt@amazon.com>

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             | 4243 ++---------------
 public/pages/Destinations/utils/constants.js  |    3 +
 10 files changed, 802 insertions(+), 4009 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 0a186fd61..fb8dfe1a2 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -4,23 +4,61 @@
  */
 
 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 in Notifications</EuiButton>
+);
 
 const 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.
-        </p>
-        <EuiSpacer size="l" />
-        {hasNotificationPlugin && (
-          <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
-        )}
+      <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 750bb13c6..c4f250a0f 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"
         />
@@ -37,7 +68,7 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
             <span
               class="euiButton__text"
             >
-              View Notifications
+              View in Notifications
             </span>
           </span>
         </a>
@@ -53,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
@@ -71,11 +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"
         />
+        <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 63452970b..abdde9279 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}
-          />
+        {isDestinationLoading || totalDestinations > 0 || isFilterApplied ? (
+          <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>
+        ) : (
+          <FullPageNotificationsInfoCallOut hasNotificationPlugin={hasNotificationPlugin} />
+        )}
       </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 60098e69b..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,1430 +47,155 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
     }
   }
 >
-  <NotificationsInfoCallOut
+  <FullPageNotificationsInfoCallOut
     hasNotificationPlugin={false}
   >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
-      >
-        <div
-          className="euiCallOut euiCallOut--primary"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="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.
-                  </p>
-                  <EuiSpacer
-                    size="l"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--l"
-                    />
-                  </EuiSpacer>
-                </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
-                      external={true}
-                      href="#"
-                    >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
-                      >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
-                        >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={true}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
-      }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
-        Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
-        }
-      }
-    >
+    <EuiPanel>
       <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",
-            }
+        <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="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
+            className="euiEmptyPrompt"
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                <EuiTitle
-                  size="l"
-                >
-                  <h3
-                    className="euiTitle euiTitle--large"
-                  >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <EuiFlexItem>
+                    <EuiText>
                       <div
-                        className="euiFlexItem"
+                        className="euiText euiText--medium"
                       >
-                        <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>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </EuiFlexItem>
+                    </EuiText>
                   </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",
-              }
-            }
-          >
-            <EuiTextColor
-              color="subdued"
-              component="div"
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
               <div
-                className="euiTextColor euiTextColor--subdued"
+                className="euiSpacer euiSpacer--l"
               />
-            </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",
-                }
-              }
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                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"
               >
-                <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}
+                <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 {
-                      "justifyContent": "center",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <EuiPagination
-                      activePage={0}
-                      onPageClick={[Function]}
-                      pageCount={1}
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <nav
-                        className="euiPagination"
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <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
-                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>
-                    </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"
+                        <div>
+                          EuiIconMock
+                        </div>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
                       >
-                        <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
-                                      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>
-        </div>
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiEmptyPrompt>
       </div>
     </EuiPanel>
-  </ContentPanel>
+  </FullPageNotificationsInfoCallOut>
 </DestinationsList>
 `;
 
@@ -1521,1288 +246,155 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
     }
   }
 >
-  <NotificationsInfoCallOut
+  <FullPageNotificationsInfoCallOut
     hasNotificationPlugin={false}
   >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
-      >
-        <div
-          className="euiCallOut euiCallOut--primary"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="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.
-                  </p>
-                  <EuiSpacer
-                    size="l"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--l"
-                    />
-                  </EuiSpacer>
-                </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
-                      external={true}
-                      href="#"
-                    >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
-                      >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
-                        >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={false}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
-      }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
-        Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
-        }
-      }
-    >
+    <EuiPanel>
       <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",
-            }
+        <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="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
+            className="euiEmptyPrompt"
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                <EuiTitle
-                  size="l"
-                >
-                  <h3
-                    className="euiTitle euiTitle--large"
-                  >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <EuiFlexItem>
+                    <EuiText>
                       <div
-                        className="euiFlexItem"
+                        className="euiText euiText--medium"
                       >
-                        <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>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </EuiFlexItem>
+                    </EuiText>
                   </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",
-              }
-            }
-          >
-            <EuiTextColor
-              color="subdued"
-              component="div"
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
               <div
-                className="euiTextColor euiTextColor--subdued"
+                className="euiSpacer euiSpacer--l"
               />
-            </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",
-                }
-              }
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                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"
               >
-                <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}
+                <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 {
-                      "justifyContent": "center",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <EuiPagination
-                      activePage={0}
-                      onPageClick={[Function]}
-                      pageCount={1}
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <nav
-                        className="euiPagination"
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <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
-                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>
-                    </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"
+                        <div>
+                          EuiIconMock
+                        </div>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
                       >
-                        <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
-                                      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>
-        </div>
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiEmptyPrompt>
       </div>
     </EuiPanel>
-  </ContentPanel>
+  </FullPageNotificationsInfoCallOut>
 </DestinationsList>
 `;
 
@@ -2853,1323 +445,154 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
     }
   }
 >
-  <NotificationsInfoCallOut
+  <FullPageNotificationsInfoCallOut
     hasNotificationPlugin={false}
   >
-    <div>
-      <EuiCallOut
-        title="Destinations have become channels in Notifications."
-      >
-        <div
-          className="euiCallOut euiCallOut--primary"
-        >
-          <div
-            className="euiCallOutHeader"
-          >
-            <span
-              className="euiCallOutHeader__title"
-            >
-              Destinations have become channels in Notifications.
-            </span>
-          </div>
-          <EuiText
-            color="default"
-            size="s"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <EuiTextColor
-                color="default"
-                component="div"
-              >
-                <div
-                  className="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.
-                  </p>
-                  <EuiSpacer
-                    size="l"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--l"
-                    />
-                  </EuiSpacer>
-                </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
-                      external={true}
-                      href="#"
-                    >
-                      <a
-                        className="euiLink euiLink--primary"
-                        href="#"
-                        rel="noreferrer"
-                      >
-                        Learn more
-                        <EuiIcon
-                          aria-label="External link"
-                          className="euiLink__externalIcon"
-                          size="s"
-                          type="popout"
-                        >
-                          <div>
-                            EuiIconMock
-                          </div>
-                        </EuiIcon>
-                      </a>
-                    </EuiLink>
-                    .
-                  </p>
-                </div>
-              </EuiTextColor>
-            </div>
-          </EuiText>
-        </div>
-      </EuiCallOut>
-      <EuiSpacer
-        size="m"
-      >
-        <div
-          className="euiSpacer euiSpacer--m"
-        />
-      </EuiSpacer>
-    </div>
-  </NotificationsCallOut>
-  <ContentPanel
-    actions={
-      <DestinationsActions
-        isEmailAllowed={false}
-        onClickManageEmailGroups={[Function]}
-        onClickManageSenders={[Function]}
-      />
-    }
-    bodyStyles={
-      Object {
-        "padding": "initial",
-      }
-    }
-    title="Destinations (deprecated)"
-  >
-    <EuiPanel
-      style={
-        Object {
-          "paddingLeft": "0px",
-          "paddingRight": "0px",
-        }
-      }
-    >
+    <EuiPanel>
       <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",
-            }
+        <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="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-            style={
-              Object {
-                "padding": "0px 10px",
-              }
-            }
+            className="euiEmptyPrompt"
           >
-            <EuiFlexItem>
-              <div
-                className="euiFlexItem"
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
               >
-                <EuiTitle
-                  size="l"
-                >
-                  <h3
-                    className="euiTitle euiTitle--large"
-                  >
-                    Destinations (deprecated)
-                  </h3>
-                </EuiTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+                Destinations will become channels in Notifications
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  justifyContent="spaceBetween"
+                <EuiSpacer
+                  size="m"
                 >
                   <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
                   >
-                    <EuiFlexItem>
+                    <EuiText>
                       <div
-                        className="euiFlexItem"
+                        className="euiText euiText--medium"
                       >
-                        <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>
+                        Destinations will be deprecated going forward. Install the Notifications plugin for a new centralized place to manage your notification channels.
                       </div>
-                    </EuiFlexItem>
+                    </EuiText>
                   </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",
-              }
-            }
-          >
-            <EuiTextColor
-              color="subdued"
-              component="div"
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
             >
               <div
-                className="euiTextColor euiTextColor--subdued"
+                className="euiSpacer euiSpacer--l"
               />
-            </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",
-                }
-              }
+            </EuiSpacer>
+            <EuiButton
+              external={true}
+              fill={true}
+              href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+              iconSide="right"
+              iconType="popout"
+              target="_blank"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                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"
               >
-                <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}
+                <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 {
-                      "justifyContent": "center",
+                      "minWidth": undefined,
                     }
                   }
+                  target="_blank"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
                       Object {
-                        "justifyContent": "center",
+                        "className": "euiButton__text",
                       }
                     }
                   >
-                    <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
-                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}
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
                       >
-                        <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>
-                    </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"
+                        <div>
+                          EuiIconMock
+                        </div>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
                       >
-                        <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
-                                      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>
-        </div>
+                        View install instructions
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </a>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiEmptyPrompt>
       </div>
     </EuiPanel>
-  </ContentPanel>
+  </FullPageNotificationsInfoCallOut>
 </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';