Adds legacy notification UI input (#42)

Signed-off-by: Drew Baugher <[email protected]>

public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.test.tsx

@@ -0,0 +1,29 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import LegacyNotification from "./LegacyNotification";
+import { DEFAULT_LEGACY_ERROR_NOTIFICATION } from "../../utils/constants";
+
+describe("<LegacyNotification /> spec", () => {
+  it("renders the component", () => {
+    const { container } = render(
+      <LegacyNotification
+        notificationJsonString={JSON.stringify(DEFAULT_LEGACY_ERROR_NOTIFICATION)}
+        onChangeNotificationJsonString={() => {}}
+        onSwitchToChannels={() => {}}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx

@@ -0,0 +1,62 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from "react";
+import { EuiFormRow, EuiCodeEditor, EuiCallOut, EuiButton, EuiSpacer } from "@elastic/eui";
+import "brace/theme/github";
+import "brace/mode/json";
+import { DarkModeConsumer } from "../../../../components/DarkMode";
+
+interface LegacyNotificationProps {
+  notificationJsonString: string;
+  onChangeNotificationJsonString: (str: string) => void;
+  onSwitchToChannels: () => void;
+  actionNotification?: boolean;
+}
+
+const LegacyNotification = ({
+  notificationJsonString,
+  onChangeNotificationJsonString,
+  onSwitchToChannels,
+  actionNotification = false,
+}: LegacyNotificationProps) => {
+  return (
+    <>
+      <EuiCallOut title="Update your notifications to use Channel ID" iconType="iInCircle" size="s">
+        <p>
+          Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you
+          will lose your current error notification settings.
+        </p>
+        <EuiButton onClick={onSwitchToChannels}>Switch to using Channel ID</EuiButton>
+      </EuiCallOut>
+      <EuiSpacer size="m" />
+      <EuiFormRow isInvalid={false} error={null} style={{ maxWidth: "100%" }}>
+        <DarkModeConsumer>
+          {(isDarkMode) => (
+            <EuiCodeEditor
+              mode="json"
+              theme={isDarkMode ? "sense-dark" : "github"}
+              width="100%"
+              value={notificationJsonString}
+              onChange={onChangeNotificationJsonString}
+              setOptions={{ fontSize: "14px" }}
+              aria-label="Code Editor"
+              height="300px"
+              data-test-subj={actionNotification ? "create-policy-action-legacy-notification" : "create-policy-legacy-notification"}
+            />
+          )}
+        </DarkModeConsumer>
+      </EuiFormRow>
+    </>
+  );
+};
+
+export default LegacyNotification;

public/pages/VisualCreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LegacyNotification /> spec renders the component 1`] = `
+<div
+  class="euiCallOut euiCallOut--primary euiCallOut--small"
+>
+  <div
+    class="euiCallOutHeader"
+  >
+    EuiIconMock
+    <span
+      class="euiCallOutHeader__title"
+    >
+      Update your notifications to use Channel ID
+    </span>
+  </div>
+  <div
+    class="euiText euiText--extraSmall"
+  >
+    <p>
+      Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you will lose your current error notification settings.
+    </p>
+    <button
+      class="euiButton euiButton--primary"
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <span
+          class="euiButton__text"
+        >
+          Switch to using Channel ID
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;

public/pages/VisualCreatePolicy/components/LegacyNotification/index.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import LegacyNotification from "./LegacyNotification";
+
+export default LegacyNotification;

public/pages/VisualCreatePolicy/utils/constants.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+export const DEFAULT_LEGACY_ERROR_NOTIFICATION = {
+  destination: {
+    slack: {
+      url: "<url>",
+    },
+  },
+  message_template: {
+    source: "The index {{ctx.index}} failed during policy execution.",
+  },
+};