Refactored the help text elements displayed when users access the des…

…tinations 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>
opensearch-project · Jan 10, 2023 · 58dee83 · 58dee83
1 parent c1520c3
commit 58dee83
Show file tree

Hide file tree

Showing 10 changed files with 802 additions and 4,009 deletions.
diff --git 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/...tinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js b/...tinations/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/...ions/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js b/...ions/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/...lPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap b/...lPageNotificationsInfoCallOut/__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
@@ -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
@@ -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>
   );
 };