Added PolicyDetails page (#62)

* Added PolicyDetails page

* Code cleanup, simplified page states, fixed error handling

Signed-off-by: Eric Lobdell <[email protected]>

* Fixed duplicate import, removed outdated test, updated policy detail test

Signed-off-by: Eric Lobdell <[email protected]>

Author: lobdelle

cypress/integration/policies_spec.js

@@ -188,4 +188,26 @@ describe("Policies", () => {
       });
     });
   });
+
+  describe("can be viewed", () => {
+    before(() => {
+      cy.deleteAllIndices();
+      cy.createPolicy(POLICY_ID, samplePolicy);
+    });
+
+    it("successfully", () => {
+      cy.contains(POLICY_ID);
+
+      cy.get(`[data-test-subj="policyLink_${POLICY_ID}"]`).click({ force: true });
+
+      cy.contains(POLICY_ID);
+      cy.contains(samplePolicy.policy.description);
+      samplePolicy.policy.states.forEach((state, i) => {
+        cy.contains(state.name);
+      });
+
+      cy.get(`[data-test-subj="viewButton"]`).click({ force: true });
+      cy.contains(`View JSON of ${POLICY_ID}`);
+    });
+  })
 });

cypress/support/index.js

@@ -53,3 +53,11 @@ if (Cypress.env("security_enabled")) {
   Cypress.env("opensearch", `http://${Cypress.env("opensearch_url")}`);
   Cypress.env("opensearch_dashboards", `http://${Cypress.env("opensearch_dashboards_url")}`);
 }
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', (err) => {
+    /* returning false here prevents Cypress from failing the test */
+    if (resizeObserverLoopErrRe.test(err.message)) {
+        return false
+    }
+})

public/pages/Main/Main.tsx

@@ -35,6 +35,7 @@ import Indices from "../Indices";
 import CreatePolicy from "../CreatePolicy";
 import VisualCreatePolicy from "../VisualCreatePolicy";
 import ChangePolicy from "../ChangePolicy";
+import PolicyDetails from "../PolicyDetails/containers/PolicyDetails";
 import Rollups from "../Rollups";
 import { ModalProvider, ModalRoot } from "../../components/Modal";
 import { ServicesConsumer } from "../../services";
@@ -48,7 +49,6 @@ import RollupDetails from "../RollupDetails/containers/RollupDetails";
 import { EditTransform, Transforms } from "../Transforms";
 import TransformDetails from "../Transforms/containers/Transforms/TransformDetails";
 import queryString from "query-string";
-import PolicyDetails from "../PolicyDetails/containers/PolicyDetails";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -76,6 +76,7 @@ const HIDDEN_NAV_ROUTES = [
   ROUTES.TRANSFORM_DETAILS,
   ROUTES.CREATE_POLICY,
   ROUTES.EDIT_POLICY,
+  ROUTES.POLICY_DETAILS,
   ROUTES.CHANGE_POLICY,
 ];
 
@@ -191,6 +192,14 @@ export default class Main extends Component<MainProps, object> {
                               </div>
                             )}
                           />
+                          <Route
+                            path={ROUTES.POLICY_DETAILS}
+                            render={(props: RouteComponentProps) => (
+                              <div style={{ padding: "25px 25px" }}>
+                                <PolicyDetails {...props} policyService={services.policyService} />
+                              </div>
+                            )}
+                          />
                           <Route
                             path={ROUTES.MANAGED_INDICES}
                             render={(props: RouteComponentProps) => (

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

@@ -1,4 +1,4 @@
-/*
+  /*
  * SPDX-License-Identifier: Apache-2.0
  *
  * The OpenSearch Contributors require contributions made to
@@ -63,6 +63,7 @@ function renderPoliciesWithRouter() {
                       />
                       <Route path={ROUTES.CREATE_POLICY} render={(props) => <div>Testing create policy</div>} />
                       <Route path={ROUTES.EDIT_POLICY} render={(props) => <div>Testing edit policy: {props.location.search}</div>} />
+                      <Route path={ROUTES.POLICY_DETAILS} render={(props) =><div>Testing policy details: {props.location.search}</div>} />
                       <Redirect from="/" to={ROUTES.INDEX_POLICIES} />
                     </Switch>
                   </ModalProvider>
@@ -189,41 +190,19 @@ describe("<IndexPolicies /> spec", () => {
     await waitFor(() => expect(queryByText(testPolicy.id)).toBeNull());
   });
 
-  it("can open and close a policy in modal", async () => {
+  it("can open a policy", async () => {
     const policies = [testPolicy];
     browserServicesMock.policyService.getPolicies = jest.fn().mockResolvedValue({
       ok: true,
       response: { policies, totalPolicies: 1 },
     });
-    const { getByText, queryByText, getByTestId } = renderPoliciesWithRouter();
+    const { getByText } = renderPoliciesWithRouter();
 
     await waitFor(() => getByText(testPolicy.id));
 
     userEvent.click(getByText(testPolicy.id));
 
-    // asserts that the policy description showed up in modal as the
-    // whole JSON is broken up between span elements
-    await waitFor(() => getByText(`"${testPolicy.policy.policy.description}"`));
-
-    userEvent.click(getByTestId("policyModalCloseButton"));
-
-    expect(queryByText(`"${testPolicy.policy.policy.description}"`)).toBeNull();
-  });
-
-  it("can go to edit a policy from modal", async () => {
-    const policies = [testPolicy];
-    browserServicesMock.policyService.getPolicies = jest.fn().mockResolvedValue({
-      ok: true,
-      response: { policies, totalPolicies: 1 },
-    });
-    const { getByText, getByTestId } = renderPoliciesWithRouter();
-
-    await waitFor(() => getByText(testPolicy.id));
-    userEvent.click(getByText(testPolicy.id));
-    await waitFor(() => getByTestId("policyModalEditButton"));
-    userEvent.click(getByTestId("policyModalEditButton"));
-
-    await waitFor(() => getByText(`Testing edit policy: ?id=${testPolicy.id}`));
+    await waitFor(() => getByText(`Testing policy details: ?id=${testPolicy.id}`));
   });
 
   it("sorts/paginates the table", async () => {

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

@@ -104,17 +104,9 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
         textOnly: true,
         width: "150px",
         render: (name: string, item: PolicyItem) => (
-          <ModalConsumer>
-            {({ onShow, onClose }) => (
-              <EuiLink
-                onClick={() =>
-                  onShow(PolicyModal, { policyId: item.id, policy: item.policy, onEdit: () => this.onClickModalEdit(item, onClose) })
-                }
-              >
-                {name}
-              </EuiLink>
-            )}
-          </ModalConsumer>
+          <EuiLink onClick={() => this.props.history.push(`${ROUTES.POLICY_DETAILS}?id=${name}`)} data-test-subj={`policyLink_${name}`}>
+            {name}
+          </EuiLink>
         ),
       },
       {

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

@@ -23,7 +23,8 @@ interface PolicySettingsProps {
   description: string;
   sequenceNumber: number;
   schemaVersion: number;
-  ismTemplates: ISMTemplate[];
+  ismTemplates: ISMTemplate[] | ISMTemplate | null;
+  onEdit: () => void;
 }
 
 interface PolicySettingsState {
@@ -59,6 +60,7 @@ export default class PolicySettings extends Component<PolicySettingsProps, Polic
       sequenceNumber,
       schemaVersion,
       ismTemplates,
+      onEdit,
     } = this.props;
 
     const {
@@ -95,7 +97,7 @@ export default class PolicySettings extends Component<PolicySettingsProps, Polic
     const pagination = {
       pageIndex: pageIndex,
       pageSize,
-      totalItemCount: ismTemplates.length,
+      totalItemCount: ismTemplates.length || 0,
       pageSizeOptions: [10, 20, 50],
       hidePerPageOptions: !showPerPageOptions,
     };
@@ -110,7 +112,7 @@ export default class PolicySettings extends Component<PolicySettingsProps, Polic
                   {
                     text: "Edit",
                     buttonProps: {
-                      onClick: () => {},
+                      onClick: () => onEdit(),
                     },
                   },
                 ]}