Syntax Highlighting, Example Hello World policy

.dockerignore

@@ -5,6 +5,7 @@
 !hooks
 !package.json
 !pages
+!prism
 !providers
 !public
 !reducers

.eslintrc.js

@@ -26,4 +26,5 @@ module.exports = {
  rules: {
  "no-restricted-imports": [2, { patterns: ["../*"] }],
  },
+ ignorePatterns: ["prism/prism.js"],
 };

components/Code.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2021 The Rode Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import Prism from "prism/prism";
+import styles from "styles/modules/Typography.module.scss";
+
+// TODO: how to prevent non-highlighted code before highlight appears?
+const Code = (props) => {
+ const { code, language, className = "", ...otherProps } = props;
+
+ useEffect(() => {
+ Prism.highlightAll();
+ }, []);
+
+ return (
+ <pre className={`${styles.codeContainer} ${className}`} {...otherProps}>
+ <code className={`language-${language}`}>{code}</code>
+ </pre>
+ );
+};
+
+Code.propTypes = {
+ code: PropTypes.string.isRequired,
+ language: PropTypes.oneOf(["rego", "json"]).isRequired,
+ className: PropTypes.string,
+};
+
+export default Code;

components/CodeEditor.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright 2021 The Rode Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "styles/modules/Inputs.module.scss";
+import { useTheme } from "providers/theme";
+import Editor from "react-simple-code-editor";
+import Prism from "prism/prism";
+
+const CodeEditor = (props) => {
+ const {
+ name,
+ label,
+ onChange,
+ placeholder,
+ value = "",
+ required = false,
+ error,
+ ...otherProps
+ } = props;
+ const { theme } = useTheme();
+ const className = error ? styles.codeEditorError : styles.codeEditor;
+
+ return (
+ <div className={styles.outerWrapper}>
+ <div className={`${styles[theme]} ${styles.container}`}>
+ <label
+ htmlFor={name}
+ className={`${styles.label} ${required ? "required" : ""}`}
+ >
+ {label}
+ </label>
+ <Editor
+ name={name}
+ textareaId={name}
+ onValueChange={onChange}
+ placeholder={placeholder || label}
+ value={value}
+ tabSize={4}
+ className={className}
+ textareaClassName={className}
+ highlight={(code) => Prism.highlight(code, Prism.languages.rego)}
+ padding={16}
+ {...otherProps}
+ />
+ </div>
+ {error && <p className={styles.errorMessage}>{error}</p>}
+ </div>
+ );
+};
+
+CodeEditor.propTypes = {
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ value: PropTypes.string,
+ required: PropTypes.bool,
+ error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+ onChange: function (props) {
+ if (!props.disabled && !props.onChange) {
+ return new Error(
+ "The prop `onChange` is required in `CodeEditor` when the component is not disabled"
+ );
+ }
+ },
+};
+
+export default CodeEditor;

components/occurrences/OccurrenceCodeModal.js

@@ -20,6 +20,7 @@ import Button from "components/Button";
 import styles from "styles/modules/Modal.module.scss";
 import Modal from "components/Modal";
 import { copy } from "utils/shared-utils";
+import Code from "components/Code";
 
 const OccurrenceCodeModal = ({ json }) => {
  const [showCode, setShowCode] = useState(false);
@@ -39,9 +40,12 @@ const OccurrenceCodeModal = ({ json }) => {
  buttonType={"text"}
  className={styles.copyButton}
  />
- <pre data-testid="occurrenceJson" className={styles.jsonContainer}>
- <code id={"occurrenceData"}>{stringifiedJson}</code>
- </pre>
+ <Code
+ code={stringifiedJson}
+ language={"json"}
+ className={styles.jsonContainer}
+ data-testid={"occurrenceJson"}
+ />
  </Modal>
  <Button onClick={() => setShowCode(true)} label={"Show JSON"} />
  </>

components/playground/EvaluationResult.js

@@ -22,6 +22,7 @@ import { ICON_NAMES } from "utils/icon-utils";
 import Button from "components/Button";
 import Modal from "components/Modal";
 import { copy } from "utils/shared-utils";
+import Code from "components/Code";
 
 const EvaluationResult = ({ results }) => {
  const [showCode, setShowCode] = useState(false);
@@ -78,9 +79,12 @@ const EvaluationResult = ({ results }) => {
  buttonType={"text"}
  className={styles.copyButton}
  />
- <pre data-testid="codeBlock" className={styles.explanationJson}>
- <code>{formattedExplanation}</code>
- </pre>
+ <Code
+ code={formattedExplanation}
+ language={"json"}
+ className={styles.explanationJson}
+ data-testid="codeBlock"
+ />
  </Modal>
  </>
  );

components/policies/PolicyForm.js

@@ -16,7 +16,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Input from "components/Input";
-import TextArea from "components/TextArea";
 import Button from "components/Button";
 import styles from "styles/modules/Policy.module.scss";
 import { useTheme } from "providers/theme";
@@ -30,6 +29,7 @@ import { usePolicies } from "providers/policies";
 import { policyActions } from "reducers/policies";
 import Modal from "components/Modal";
 import PageHeader from "components/layout/PageHeader";
+import CodeEditor from "components/CodeEditor";
 
 const PolicyForm = ({
  title,
@@ -187,13 +187,13 @@ const PolicyForm = ({
  horizontal
  onBlur={validateField}
  />
- <TextArea
+ <CodeEditor
  name={"regoContent"}
  label={"Rego Policy Code"}
  value={regoContent}
- onChange={(event) => {
+ onChange={(value) => {
  setValidationResults(null);
- setRegoContent(event.target.value);
+ setRegoContent(value);
  }}
  error={errors.regoContent || validationResults?.isValid === false}
  required

components/policies/PolicyValidationResult.js

@@ -19,6 +19,7 @@ import PropTypes from "prop-types";
 import styles from "styles/modules/Policy.module.scss";
 import { ICON_NAMES } from "utils/icon-utils";
 import Icon from "components/Icon";
+import Code from "components/Code";
 
 const PolicyValidationResult = ({ validation }) => {
  if (!validation) {
@@ -39,9 +40,10 @@ const PolicyValidationResult = ({ validation }) => {
  <p>This policy failed validation.</p>
  </div>
  {validation.errors?.length ? (
- <pre>
- <code>{validation.errors}</code>
- </pre>
+ <Code
+ code={validation.errors.filter((error) => error.length)}
+ language={"json"}
+ />
  ) : null}
  </div>
  )}

cypress/integration/Policy.feature

@@ -26,17 +26,22 @@ Feature: Policies
  When I create the "New" policy
  Then I see "New" policy details
 
- Scenario Outline: Create policy - required fields
+ Scenario: Create policy - require name field
  Given I am on the "CreatePolicy" page
  When I click the "SavePolicy" button
- Then I see "<message>" message
- When I type "<text>" into "<input>" input
+ Then I see "PolicyNameRequired" message
+ When I type "name" into "PolicyName" input
  And I click the "SavePolicy" button
- Then I no longer see "<message>" message
- Scenarios:
- | message | text | input |
- | PolicyNameRequired | name | PolicyName |
- | PolicyRegoRequired | rego | PolicyRegoContent |
+ Then I no longer see "PolicyNameRequired" message
+
+ Scenario: Create policy - require rego content field
+ Given I am on the "CreatePolicy" page
+ When I clear the "PolicyRegoContent" input
+ When I click the "SavePolicy" button
+ Then I see "PolicyRegoRequired" message
+ When I type "text" into "PolicyRegoContent" input
+ And I click the "SavePolicy" button
+ Then I no longer see "PolicyRegoRequired" message
 
  Scenario Outline: Create policy - validating rego code
  Given I am on the "CreatePolicy" page

cypress/integration/common/common.js

@@ -39,6 +39,11 @@ When(/^I click the "([^"]*)" button$/, (buttonName) => {
  cy.get(selectors[button]).click();
 });
 
+When(/^I clear the "([^"]*)" input$/, (inputName) => {
+ const input = `${inputName}Input`;
+ cy.get(selectors[input]).clear();
+});
+
 When(/^I type "([^"]*)" into "([^"]*)" input$/, (text, inputName) => {
  const input = `${inputName}Input`;
  cy.get(selectors[input]).type(text);

jest-setup.js

@@ -17,6 +17,7 @@
 import "@testing-library/jest-dom";
 import "jest-chain";
 import Chance from "chance";
+import Prism from "prism/prism";
 
 // eslint-disable-next-line no-unused-vars
 const chance = new Chance();
@@ -25,3 +26,6 @@ const chance = new Chance();
 console.error = jest.fn();
 
 window.matchMedia = () => ({ matches: false });
+
+jest.mock("prism/prism");
+Prism.highlightAll = jest.fn();

package.json

@@ -22,6 +22,7 @@
  "prop-types": "^15.7.2",
  "react": "17.0.1",
  "react-dom": "17.0.1",
+ "react-simple-code-editor": "^0.11.0",
  "react-toastify": "^7.0.3",
  "sass": "^1.32.7",
  "swr": "^0.4.2",
@@ -56,7 +57,8 @@
  "!**/.jest/**",
  "!**test/**",
  "!coverage/**",
- "!cypress/**"
+ "!cypress/**",
+ "!prism/prism.js"
  ],
  "moduleNameMapper": {
  "\\.(css|scss|sass)$": "identity-obj-proxy"

pages/playground.js

@@ -15,7 +15,6 @@
  */
 
 import React, { useState, useEffect } from "react";
-import TextArea from "components/TextArea";
 import Button from "components/Button";
 import styles from "styles/modules/Playground.module.scss";
 import { useTheme } from "providers/theme";
@@ -28,6 +27,7 @@ import { policyActions } from "reducers/policies";
 import { useResources } from "providers/resources";
 import { resourceActions } from "reducers/resources";
 import PageHeader from "components/layout/PageHeader";
+import Code from "components/Code";
 
 const PolicyPlayground = () => {
  const { theme } = useTheme();
@@ -173,11 +173,9 @@ const PolicyPlayground = () => {
  <span className={styles.label}>Description</span>
  <span>{state.evaluationPolicy.description}</span>
  </p>
- <TextArea
- name={"regoContent"}
- label={"Rego Policy Code"}
- disabled
- value={state.evaluationPolicy.regoContent}
+ <Code
+ code={state.evaluationPolicy.regoContent}
+ language={"rego"}
  />
  <Button
  buttonType={"textDestructive"}

pages/policies/[id].js

@@ -26,6 +26,7 @@ import { usePolicy } from "hooks/usePolicy";
 import { usePolicies } from "providers/policies";
 import { policyActions } from "reducers/policies";
 import PageHeader from "components/layout/PageHeader";
+import Code from "components/Code";
 
 const Policy = () => {
  const router = useRouter();
@@ -75,9 +76,7 @@ const Policy = () => {
  />
  <div className={styles.regoContainer}>
  <p>Rego Policy Code</p>
- <pre>
- <code>{policy.regoContent}</code>
- </pre>
+ <Code code={policy.regoContent} language={"rego"} />
  </div>
  </>
  ) : (

pages/policies/new.js

@@ -15,6 +15,7 @@
  */
 import React from "react";
 import PolicyForm from "components/policies/PolicyForm";
+import { EXAMPLE_POLICY } from "utils/constants";
 
 const NewPolicy = () => {
  return (
@@ -24,6 +25,7 @@ const NewPolicy = () => {
  endpoint={"/api/policies"}
  verb={"create"}
  submitButtonText={"Save Policy"}
+ policy={{ regoContent: EXAMPLE_POLICY }}
  />
  );
 };