Show Selected Policy & Resource Details in playground (#95)

rode · May 27, 2021 · bae0599 · bae0599
1 parent 9bcd744
commit bae0599
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 70 deletions.
diff --git a/components/playground/EvaluationResult.js b/components/playground/EvaluationResult.js
@@ -35,39 +35,37 @@ const EvaluationResult = ({ results }) => {
 
  return (
  <>
- <div className={styles.evaluationResultsContainer}>
- {results.pass ? (
- <div className={styles.evaluationResults}>
- <Icon name={ICON_NAMES.BADGE_CHECK} size={"large"} />
- <p>The resource passed the policy.</p>
- </div>
- ) : (
- <div className={styles.failedEvaluationResults}>
- <Icon name={ICON_NAMES.EXCLAMATION} size={"large"} />
- <p>The resource failed the policy.</p>
- </div>
- )}
- <div className={styles.violations}>
- {results.result[0].violations.map((violation) => {
- const outcome = violation.pass ? "pass" : "fail";
- return (
- <React.Fragment key={violation.id}>
- <p className={`${styles.violationResult} ${styles[outcome]}`}>
- {outcome}
- </p>
- <p>
- {violation.message || "Rule message not specified in policy"}
- </p>
- </React.Fragment>
- );
- })}
+ {results.pass ? (
+ <div className={styles.evaluationResults}>
+ <Icon name={ICON_NAMES.BADGE_CHECK} size={"large"} />
+ <p>The resource passed the policy.</p>
  </div>
- <Button
- onClick={() => setShowCode(true)}
- label={"Show Full Evaluation"}
- buttonType={"text"}
- />
+ ) : (
+ <div className={styles.failedEvaluationResults}>
+ <Icon name={ICON_NAMES.EXCLAMATION} size={"large"} />
+ <p>The resource failed the policy.</p>
+ </div>
+ )}
+ <div className={styles.violations}>
+ {results.result[0].violations.map((violation) => {
+ const outcome = violation.pass ? "pass" : "fail";
+ return (
+ <React.Fragment key={violation.id}>
+ <p className={`${styles.violationResult} ${styles[outcome]}`}>
+ {outcome}
+ </p>
+ <p>
+ {violation.message || "Rule message not specified in policy"}
+ </p>
+ </React.Fragment>
+ );
+ })}
  </div>
+ <Button
+ onClick={() => setShowCode(true)}
+ label={"Show Full Evaluation"}
+ buttonType={"text"}
+ />
  <Modal
  title={"Evaluation Explanation"}
  onClose={() => setShowCode(false)}

diff --git a/components/playground/SelectedPolicy.js b/components/playground/SelectedPolicy.js
@@ -19,22 +19,26 @@ import PropTypes from "prop-types";
 import styles from "styles/modules/Playground.module.scss";
 import Code from "components/Code";
 import textStyles from "styles/modules/Typography.module.scss";
+import LabelWithValue from "components/LabelWithValue";
 
 const SelectedPolicy = (props) => {
  const { policy } = props;
 
  return (
  <>
- <p className={textStyles.label}>Rego Policy Code</p>
  {policy ? (
- <Code
- code={policy.regoContent}
- language={"rego"}
- className={styles.codeContent}
- data-testid={"regoPolicyCode"}
- />
+ <>
+ <LabelWithValue label={"Policy"} value={policy.name} />
+ <p className={textStyles.label}>Rego Policy Code</p>
+ <Code
+ code={policy.regoContent}
+ language={"rego"}
+ className={styles.codeContent}
+ data-testid={"regoPolicyCode"}
+ />
+ </>
  ) : (
- <p className={styles.selectToBeginText}>Select a policy to begin</p>
+ <p className={styles.selectToBeginText}>Search for a policy to begin</p>
  )}
  </>
  );

diff --git a/components/playground/SelectedResource.js b/components/playground/SelectedResource.js
@@ -21,6 +21,9 @@ import Code from "components/Code";
 import { useFetch } from "hooks/useFetch";
 import textStyles from "styles/modules/Typography.module.scss";
 import Loading from "components/Loading";
+import { getResourceDetails } from "utils/resource-utils";
+import LabelWithValue from "components/LabelWithValue";
+import ResourceVersion from "components/resources/ResourceVersion";
 
 const SelectedResource = (props) => {
  const { resourceUri } = props;
@@ -29,11 +32,18 @@ const SelectedResource = (props) => {
  resourceUri: resourceUri,
  });
 
+ const { resourceName, resourceVersion } = getResourceDetails(resourceUri);
+
  return (
  <>
- <p className={textStyles.label}>Occurrence Data</p>
  {resourceUri ? (
  <Loading loading={loading}>
+ <LabelWithValue label={"Resource"} value={resourceName} />
+ <LabelWithValue
+ label={"Version"}
+ value={<ResourceVersion version={resourceVersion} />}
+ />
+ <p className={textStyles.label}>Occurrence Data</p>
  <Code
  code={JSON.stringify(data?.originals, null, 2)}
  language={"json"}
@@ -42,7 +52,9 @@ const SelectedResource = (props) => {
  />
  </Loading>
  ) : (
- <p className={styles.selectToBeginText}>Select a resource to begin</p>
+ <p className={styles.selectToBeginText}>
+ Search for a resource to begin
+ </p>
  )}
  </>
  );

diff --git a/styles/modules/Playground.module.scss b/styles/modules/Playground.module.scss
@@ -28,7 +28,7 @@ $GAP: 1rem;
  display: inline-grid;
  grid-gap: $GAP;
  grid-template-columns: repeat(2, calc(50% - #{$GAP}));
- grid-template-rows: repeat(2, 50%);
+ grid-template-rows: 60% 40%;
  grid-template-areas:
  "left rightTop"
  "left rightBottom";
@@ -41,6 +41,8 @@ $GAP: 1rem;
 .sectionContainer {
  padding: 1rem;
  position: relative;
+ display: flex;
+ flex-direction: column;
 
  @include phoneAndSmaller {
  height: fit-content;
@@ -68,11 +70,13 @@ $GAP: 1rem;
 
 .evaluationContainer {
  @extend .sectionContainer;
+ max-height: 100%;
+ align-items: center;
+
  @include tabletAndLarger {
  grid-row: rightBottom;
  grid-column: rightBottom;
- display: flex;
- justify-content: center;
+ overflow: auto;
  }
 }
 
@@ -101,10 +105,6 @@ $GAP: 1rem;
  font-weight: 700;
 }
 
-.selectToBeginText {
- margin: 0.5rem 0 0 0.5rem;
-}
-
 .searchCard {
  width: $CARD_WIDTH;
  height: fit-content;
@@ -170,7 +170,7 @@ $GAP: 1rem;
 
 .codeContent {
  margin-top: 0.5rem;
- max-height: 95%;
+ max-height: 100%;
  height: fit-content;
  resize: vertical;
  overflow: auto;
@@ -203,19 +203,6 @@ $GAP: 1rem;
  }
 }
 
-.evaluationResultsContainer {
- width: fit-content;
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- align-items: center;
-
- > button {
- margin: 0.5rem auto;
- font-size: 0.85rem;
- }
-}
-
 .evaluationResults,
 .failedEvaluationResults {
  display: flex;

diff --git a/test/components/playground/SelectedPolicy.spec.js b/test/components/playground/SelectedPolicy.spec.js
@@ -43,9 +43,16 @@ describe("SelectedPolicy", () => {
  ).toBeInTheDocument();
  });
 
+ it("should render the policy name", () => {
+ expect(screen.getByText("Policy")).toBeInTheDocument();
+ expect(screen.getByText(policy.name)).toBeInTheDocument();
+ });
+
  it("should render the instructions if no policy is selected", () => {
  rerender(<SelectedPolicy policy={null} />);
 
- expect(screen.getByText(/select a policy to begin/i)).toBeInTheDocument();
+ expect(
+ screen.getByText(/search for a policy to begin/i)
+ ).toBeInTheDocument();
  });
 });
diff --git a/test/components/playground/SelectedResource.spec.js b/test/components/playground/SelectedResource.spec.js
@@ -18,14 +18,17 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import SelectedResource from "components/playground/SelectedResource";
 import { useFetch } from "hooks/useFetch";
+import { createMockResourceUri } from "test/testing-utils/mocks";
 
 jest.mock("hooks/useFetch");
 
 describe("SelectedResource", () => {
- let resourceUri, fetchResponse, rerender;
+ let resourceUri, name, version, fetchResponse, rerender;
 
  beforeEach(() => {
- resourceUri = chance.string();
+ name = chance.string();
+ version = chance.string();
+ resourceUri = createMockResourceUri(name, version);
  fetchResponse = {
  data: {
  originals: chance.string(),
@@ -44,10 +47,6 @@ describe("SelectedResource", () => {
  jest.resetAllMocks();
  });
 
- it("should render the occurrence data label", () => {
- expect(screen.getByText("Occurrence Data")).toBeInTheDocument();
- });
-
  it("should call to fetch the occurrence data when a resource is selected", () => {
  expect(useFetch)
  .toHaveBeenCalledTimes(1)
@@ -56,6 +55,20 @@ describe("SelectedResource", () => {
  });
  });
 
+ it("should render the resource name", () => {
+ expect(screen.getByText("Resource")).toBeInTheDocument();
+ expect(screen.getByText(name)).toBeInTheDocument();
+ });
+
+ it("should render the resource version", () => {
+ expect(screen.getByText("Version")).toBeInTheDocument();
+ expect(screen.getByText(version.substring(0, 12))).toBeInTheDocument();
+ });
+
+ it("should render the occurrence data label", () => {
+ expect(screen.getByText("Occurrence Data")).toBeInTheDocument();
+ });
+
  it("should render the loading indicator while fetching the occurrence data", () => {
  fetchResponse.loading = true;
  rerender(<SelectedResource resourceUri={resourceUri} />);
@@ -72,6 +85,8 @@ describe("SelectedResource", () => {
 
  it("should render the instructions if no resource is specified", () => {
  rerender(<SelectedResource resourceUri={null} />);
- expect(screen.getByText(/select a resource to begin/i)).toBeInTheDocument();
+ expect(
+ screen.getByText(/search for a resource to begin/i)
+ ).toBeInTheDocument();
  });
 });