Fixes policy details page

.github/workflows/cypress-workflow.yml

@@ -55,6 +55,7 @@ jobs:
       - name: Build job-scheduler
         working-directory: ./job-scheduler
         run: ./gradlew publishToMavenLocal -Dopensearch.version=${{ env.OPENSEARCH_VERSION }}
+      # dependencies: alerting-notification
       - name: Checkout alerting
         uses: actions/checkout@v2
         with:

models/interfaces.ts

@@ -95,7 +95,7 @@ export interface Policy {
   error_notification?: ErrorNotification | null;
   states: State[];
   ism_template?: ISMTemplate[] | ISMTemplate | null;
-  last_updated_time?: string;
+  last_updated_time?: number;
   schema_version?: number;
 }
 

public/components/JSONModal/JSONModal.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 JSONModal from "./JSONModal";
+import { DEFAULT_LEGACY_ERROR_NOTIFICATION } from "../../pages/VisualCreatePolicy/utils/constants";
+
+describe("<JSONModal /> spec", () => {
+  it("renders the component", () => {
+    render(
+      <JSONModal
+        title="Some modal title"
+        json={DEFAULT_LEGACY_ERROR_NOTIFICATION} // just some random json
+        onClose={() => {}}
+      />
+    );
+    // 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 close when close button clicked", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <JSONModal
+        title="Some modal title"
+        json={DEFAULT_LEGACY_ERROR_NOTIFICATION} // just some random json
+        onClose={onClose}
+      />
+    );
+
+    fireEvent.click(getByTestId("jsonModalCloseButton"));
+    expect(onClose).toHaveBeenCalled();
+  });
+});

public/components/JSONModal/JSONModal.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 {
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiCodeBlock,
+  EuiButtonEmpty,
+} from "@elastic/eui";
+
+interface JSONModalProps {
+  title: string;
+  json: object;
+  onClose: () => void;
+}
+
+const JSONModal: React.SFC<JSONModalProps> = ({ title, json, onClose }) => {
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={onClose} style={{ padding: "5px 30px" }}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiCodeBlock language="json" fontSize="m" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
+            {JSON.stringify(json, null, 4)}
+          </EuiCodeBlock>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onClose} data-test-subj="jsonModalCloseButton">
+            Close
+          </EuiButtonEmpty>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
+
+export default JSONModal;

public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<JSONModal /> spec renders the component 1`] = `
+<div
+  class="euiOverlayMask euiOverlayMask--aboveHeader"
+>
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="1"
+  />
+  <div
+    data-focus-lock-disabled="false"
+  >
+    <div
+      class="euiModal euiModal--maxWidth-default"
+      style="padding: 5px 30px;"
+      tabindex="0"
+    >
+      <button
+        aria-label="Closes this modal window"
+        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        type="button"
+      >
+        EuiIconMock
+      </button>
+      <div
+        class="euiModal__flex"
+      >
+        <div
+          class="euiModalHeader"
+        >
+          <div
+            class="euiModalHeader__title"
+          >
+            Some modal title
+          </div>
+        </div>
+        <div
+          class="euiModalBody"
+        >
+          <div
+            class="euiModalBody__overflow"
+          >
+            <div
+              class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingMedium euiCodeBlock--hasControls"
+              style="max-height: 600px;"
+            >
+              <pre
+                class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+                style="max-height: 600px;"
+              >
+                <code
+                  class="euiCodeBlock__code json hljs"
+                >
+                  {
+
+                  <span
+                    class="hljs-attr"
+                  >
+                    "destination"
+                  </span>
+                  : {
+
+                  <span
+                    class="hljs-attr"
+                  >
+                    "slack"
+                  </span>
+                  : {
+
+                  <span
+                    class="hljs-attr"
+                  >
+                    "url"
+                  </span>
+                  : 
+                  <span
+                    class="hljs-string"
+                  >
+                    "&lt;url&gt;"
+                  </span>
+
+        }
+    },
+
+                  <span
+                    class="hljs-attr"
+                  >
+                    "message_template"
+                  </span>
+                  : {
+
+                  <span
+                    class="hljs-attr"
+                  >
+                    "source"
+                  </span>
+                  : 
+                  <span
+                    class="hljs-string"
+                  >
+                    "The index {{ctx.index}} failed during policy execution."
+                  </span>
+
+    }
+}
+                </code>
+              </pre>
+              <div
+                class="euiCodeBlock__controls"
+              >
+                <button
+                  aria-label="Expand"
+                  class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
+                  type="button"
+                >
+                  EuiIconMock
+                </button>
+                <div
+                  class="euiCodeBlock__copyButton"
+                >
+                  <span
+                    class="euiToolTipAnchor"
+                  >
+                    <button
+                      aria-label="Copy"
+                      class="euiButtonIcon euiButtonIcon--text"
+                      type="button"
+                    >
+                      EuiIconMock
+                    </button>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiModalFooter"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            data-test-subj="jsonModalCloseButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Close
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;

public/components/JSONModal/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 JSONModal from "./JSONModal";
+
+export default JSONModal;

public/pages/Policies/containers/Policies/Policies.tsx

@@ -281,14 +281,14 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
         },
         modal: {
           onClickModal: (onShow: (component: any, props: object) => void) => () =>
-            onShow(CreatePolicyModal, { isEdit: true, history: this.props.history, onClickContinue: this.onClickEdit }),
+            onShow(CreatePolicyModal, { isEdit: true, onClickContinue: this.onClickEdit }),
         },
       },
       {
         text: "Create policy",
         modal: {
           onClickModal: (onShow: (component: any, props: object) => void) => () =>
-            onShow(CreatePolicyModal, { history: this.props.history, onClickContinue: this.onClickCreate }),
+            onShow(CreatePolicyModal, { onClickContinue: this.onClickCreate }),
         },
       },
     ];

public/pages/PolicyDetails/components/PolicySettings/PolicySettings.test.tsx

@@ -16,7 +16,7 @@ import PolicySettings from "./PolicySettings";
 
 describe("<PolicySettings /> spec", () => {
   beforeAll(() => {
-    jest.useFakeTimers('modern');
+    jest.useFakeTimers("modern");
     jest.setSystemTime(new Date(2021, 7, 1));
   });
 
@@ -28,13 +28,13 @@ describe("<PolicySettings /> spec", () => {
     const { container } = render(
       <PolicySettings
         policyId={"some_id"}
-        channelId={"some_channel_id"}
+        errorNotification={null}
         primaryTerm={1}
-        lastUpdated={new Date().toString()}
+        lastUpdated={new Date().valueOf()}
         description={"some description"}
         sequenceNumber={2}
-        schemaVersion={3}
         ismTemplates={[]}
+        onEdit={() => {}}
       />
     );