Adds ISM Templates UI component (opensearch-project#55)

Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com>

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

@@ -0,0 +1,23 @@
+/*
+ * 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 ISMTemplates from "./ISMTemplates";
+import { DEFAULT_POLICY } from "../../utils/constants";
+
+describe("<ISMTemplates /> spec", () => {
+  it("renders the component", () => {
+    const { container } = render(<ISMTemplates policy={DEFAULT_POLICY} onChangePolicy={() => {}} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx

@@ -0,0 +1,132 @@
+/*
+ * 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 { EuiButton, EuiSpacer, EuiFlexGroup, EuiEmptyPrompt, EuiFlexItem, EuiText, EuiLink, EuiIcon } from "@elastic/eui";
+import { ContentPanel } from "../../../../components/ContentPanel";
+import "brace/theme/github";
+import "brace/mode/json";
+import { ISMTemplate as ISMTemplateData, Policy } from "../../../../../models/interfaces";
+import { DOCUMENTATION_URL } from "../../../../utils/constants";
+import { ISM_TEMPLATE_INPUT_MAX_WIDTH } from "../../utils/constants";
+import ISMTemplate from "../ISMTemplate";
+import { convertTemplatesToArray } from "../../utils/helpers";
+import { makeId } from "../../../../utils/helpers";
+
+interface ISMTemplatesProps {
+  policy: Policy;
+  onChangePolicy: (policy: Policy) => void;
+}
+
+const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
+  const templates = convertTemplatesToArray(policy.ism_template);
+  const addTemplateButton = (
+    <EuiButton
+      onClick={() => {
+        onChangePolicy({ ...policy, ism_template: [...templates, { index_patterns: [], priority: 1 }] });
+      }}
+      data-test-subj="ism-templates-add-template-button"
+    >
+      Add template
+    </EuiButton>
+  );
+  return (
+    <ContentPanel
+      bodyStyles={{ padding: "initial" }}
+      title={
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <h3>ISM template</h3>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              <i> - optional</i>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      titleSize="s"
+      subTitleText={
+        <EuiText size="s" style={{ padding: "5px 0px" }}>
+          <p style={{ color: "grey", fontWeight: 200 }}>
+            Specify an ISM template pattern that matches the index to apply the policy.{" "}
+            <EuiLink href={DOCUMENTATION_URL} target="_blank">
+              Learn more <EuiIcon type="popout" size="s" />
+            </EuiLink>
+          </p>
+        </EuiText>
+      }
+    >
+      <div style={{ padding: "10px 0px 0px 10px" }}>
+        {!!templates.length && (
+          <EuiFlexGroup gutterSize="l" alignItems="center">
+            <EuiFlexItem style={{ maxWidth: ISM_TEMPLATE_INPUT_MAX_WIDTH }}>
+              <EuiText>
+                <h5>Index patterns</h5>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <h5>Priority</h5>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+
+        {templates.map((template, idx) => (
+          <ISMTemplate
+            key={makeId()}
+            isFirst={!idx}
+            template={template}
+            onUpdateTemplate={(template: ISMTemplateData) => {
+              onChangePolicy({
+                ...policy,
+                ism_template: templates
+                  .slice(0, idx)
+                  .concat(template)
+                  .concat(templates.slice(idx + 1)),
+              });
+            }}
+            onRemoveTemplate={() => {
+              onChangePolicy({
+                ...policy,
+                ism_template: templates.slice(0, idx).concat(templates.slice(idx + 1)),
+              });
+            }}
+          />
+        ))}
+
+        {!templates.length ? (
+          <EuiEmptyPrompt
+            title={<h2>No ISM templates</h2>}
+            titleSize="s"
+            body={
+              <p>
+                Your policy currently has no ISM templates defined. Add ISM templates to automatically apply the policy to indices created
+                in the future.
+              </p>
+            }
+            actions={addTemplateButton}
+          />
+        ) : (
+          <>
+            <EuiSpacer />
+            {addTemplateButton}
+          </>
+        )}
+      </div>
+    </ContentPanel>
+  );
+};
+
+export default ISMTemplates;