From 0f3e89c00311057e866e57a5ffb5999924e2365a Mon Sep 17 00:00:00 2001 From: Drew Baugher <46505179+dbbaughe@users.noreply.github.com> Date: Wed, 11 Aug 2021 17:33:55 -0700 Subject: [PATCH] Adds modal for choosing between visual and json editor (#58) Signed-off-by: Drew Baugher <46505179+dbbaughe@users.noreply.github.com> --- .../CreatePolicyModal.test.tsx | 54 +++ .../CreatePolicyModal/CreatePolicyModal.tsx | 119 +++++ .../CreatePolicyModal.test.tsx.snap | 453 ++++++++++++++++++ public/components/CreatePolicyModal/index.ts | 14 + test/mocks/historyMock.ts | 3 +- 5 files changed, 642 insertions(+), 1 deletion(-) create mode 100644 public/components/CreatePolicyModal/CreatePolicyModal.test.tsx create mode 100644 public/components/CreatePolicyModal/CreatePolicyModal.tsx create mode 100644 public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap create mode 100644 public/components/CreatePolicyModal/index.ts diff --git a/public/components/CreatePolicyModal/CreatePolicyModal.test.tsx b/public/components/CreatePolicyModal/CreatePolicyModal.test.tsx new file mode 100644 index 000000000..e87ce9ff2 --- /dev/null +++ b/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(" spec", () => { + it("renders the component", () => { + render( {}} 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( {}} 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( + + ); + + fireEvent.click(getByTestId("createPolicyModalContinueButton")); + expect(onContinue).toHaveBeenCalled(); + expect(onClose).toHaveBeenCalled(); + }); + + it("calls close when close button clicked", () => { + const onClose = jest.fn(); + const { getByTestId } = render( {}} />); + + fireEvent.click(getByTestId("createPolicyModalCancelButton")); + expect(onClose).toHaveBeenCalled(); + }); +}); diff --git a/public/components/CreatePolicyModal/CreatePolicyModal.tsx b/public/components/CreatePolicyModal/CreatePolicyModal.tsx new file mode 100644 index 000000000..3fdec8f51 --- /dev/null +++ b/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 = ({ isEdit = false, onClose, history, onClickContinue }) => { + const [visual, setVisual] = useState(true); + return ( + + {/* + // @ts-ignore */} + + + Configuration method + + + + + + + Choose how you would like to {isEdit ? "modify" : "define"} your policy, either using a visual editor or writing JSON. + + + + + + + + setVisual(e.target.checked)} + data-test-subj="createPolicyModalVisualRadio" + /> + + + + + + + setVisual(!e.target.checked)} + data-test-subj="createPolicyModalJsonRadio" + /> + + + + + + + + + + + + + Cancel + + + + { + onClose(); + onClickContinue(visual); + }} + fill + data-test-subj="createPolicyModalContinueButton" + > + Continue + + + + + + + ); +}; + +export default CreatePolicyModal; diff --git a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap new file mode 100644 index 000000000..41918dc97 --- /dev/null +++ b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap @@ -0,0 +1,453 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` spec renders the component 1`] = ` +
+