Adds modal for choosing between visual and json editor (#58)

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

public/components/CreatePolicyModal/CreatePolicyModal.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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, fireEvent } from "@testing-library/react";
+import CreatePolicyModal from "./CreatePolicyModal";
+import { historyMock } from "../../../test/mocks";
+
+describe("<CreatePolicyModal /> spec", () => {
+  it("renders the component", () => {
+    render(<CreatePolicyModal isEdit={false} history={historyMock} onClose={() => {}} onClickContinue={() => {}} />);
+    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // and our EuiOverlayMask element
+    expect(document.body.children).toHaveLength(2);
+    expect(document.body.children[1]).toMatchSnapshot();
+  });
+
+  it("renders the component w/ edit", () => {
+    render(<CreatePolicyModal isEdit={true} history={historyMock} onClose={() => {}} onClickContinue={() => {}} />);
+    // EuiOverlayMask appends an element to the body so we should have two, an empty div from react-test-library
+    // and our EuiOverlayMask element
+    expect(document.body.children).toHaveLength(2);
+    expect(document.body.children[1]).toMatchSnapshot();
+  });
+
+  it("calls onAction and onCLose when action button clicked", () => {
+    const onContinue = jest.fn();
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <CreatePolicyModal isEdit={false} history={historyMock} onClose={onClose} onClickContinue={onContinue} />
+    );
+
+    fireEvent.click(getByTestId("createPolicyModalContinueButton"));
+    expect(onContinue).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("calls close when close button clicked", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(<CreatePolicyModal isEdit={false} history={historyMock} onClose={onClose} onClickContinue={() => {}} />);
+
+    fireEvent.click(getByTestId("createPolicyModalCancelButton"));
+    expect(onClose).toHaveBeenCalled();
+  });
+});

public/components/CreatePolicyModal/CreatePolicyModal.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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, { useState } from "react";
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiFormRow,
+  EuiRadio,
+  EuiPanel,
+} from "@elastic/eui";
+import * as H from "history";
+
+interface CreatePolicyModalProps {
+  isEdit?: boolean;
+  history: H.History;
+  onClose: () => void;
+  onClickContinue: (visual: boolean) => void;
+}
+
+const CreatePolicyModal: React.SFC<CreatePolicyModalProps> = ({ isEdit = false, onClose, history, onClickContinue }) => {
+  const [visual, setVisual] = useState(true);
+  return (
+    <EuiOverlayMask>
+      {/*
+      // @ts-ignore */}
+      <EuiModal onCancel={onClose} onClose={onClose} maxWidth={600}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Configuration method</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiFlexGroup gutterSize="m" direction="column" style={{ margin: "-4px" }}>
+            <EuiFlexItem grow={false}>
+              <EuiText size="s" style={{ marginTop: 0 }}>
+                Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON.
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiPanel className={visual ? "selected-radio-panel" : ""}>
+                    <EuiFormRow
+                      helpText={`Use the visual editor to ${isEdit ? "update" : "create"} your policy${
+                        isEdit ? "" : " using pre-defined options."
+                      }`}
+                    >
+                      <EuiRadio
+                        id="create-policy-visual"
+                        label="Visual editor"
+                        checked={visual}
+                        onChange={(e) => setVisual(e.target.checked)}
+                        data-test-subj="createPolicyModalVisualRadio"
+                      />
+                    </EuiFormRow>
+                  </EuiPanel>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiPanel className={visual ? "" : "selected-radio-panel"}>
+                    <EuiFormRow helpText={`Use the JSON editor to ${isEdit ? "update" : "create or import"} your policy using JSON.`}>
+                      <EuiRadio
+                        id="create-policy-json"
+                        label="JSON editor"
+                        checked={!visual}
+                        onChange={(e) => setVisual(!e.target.checked)}
+                        data-test-subj="createPolicyModalJsonRadio"
+                      />
+                    </EuiFormRow>
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty onClick={onClose} data-test-subj="createPolicyModalCancelButton">
+                Cancel
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => {
+                  onClose();
+                  onClickContinue(visual);
+                }}
+                fill
+                data-test-subj="createPolicyModalContinueButton"
+              >
+                Continue
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
+
+export default CreatePolicyModal;