some validation for gist input

sites/shared/components/workbench/edit.js

@@ -3,6 +3,8 @@ import hljs from 'highlight.js/lib/common'
 import defaultSettings from './default-settings'
 import validateGist from './gist-validator'
 import { useEffect, useState, useRef } from 'react'
+import Json from 'shared/components/json-highlight.js'
+import Popout from 'shared/components/popout.js'
 
 const countLines = (txt) => txt.split('\n').length
 const Edit = (props) => {
@@ -11,6 +13,7 @@ const Edit = (props) => {
   const inputRef = useRef(null)
   const [gistAsYaml, setGistAsYaml] = useState(null)
   const [numLines, setNumLines] = useState(0)
+  const [error, setError] = useState(null)
 
   useEffect(() => {
     setGistAsYaml(yaml.dump(gist))
@@ -19,10 +22,16 @@ const Edit = (props) => {
     if (gistAsYaml) setNumLines(countLines(gistAsYaml))
   }, [gistAsYaml])
 
-  const onChange = (e) => {
+  const onSave = () => {
+    setError(null)
     const editedAsJson = yaml.load(inputRef.current.value)
-    if (validateGist(editedAsJson, design).valid) {
+    const validation = validateGist(editedAsJson, design)
+    if (validation.valid) {
       setGist({ ...defaultSettings, ...editedAsJson, design: gist.design })
+    } else {
+      const newError = JSON.stringify(validation.errors, null, 2)
+      const newErrorHighlight = hljs.highlight(newError, { language: 'json' })
+      setError(newError)
     }
   }
 
@@ -32,7 +41,18 @@ const Edit = (props) => {
 
   return (
     <div className="max-w-screen-xl m-auto h-screen form-control">
-      <h1>Edit Pattern Configuration</h1>
+      <h2>Edit Pattern Configuration</h2>
+
+      {error ? (
+        <Popout warning>
+          <h3> Issues with input </h3>
+          <p> Your input wasn't saved due to the following errors: </p>
+          <pre
+            className="language-json hljs text-base lg:text-lg whitespace-pre overflow-scroll pr-4"
+            dangerouslySetInnerHTML={{ __html: error }}
+          ></pre>
+        </Popout>
+      ) : null}
       <div
         id="editor"
         className="h-3/5 mb-8 overflow-auto p-1 outline-1 outline-primary outline focus-within:outline-primary-focus focus-within:outline-2 rounded"
@@ -56,7 +76,7 @@ const Edit = (props) => {
           />
         </div>
       </div>
-      <button className="btn btn-primary" onClick={onChange}>
+      <button className="btn btn-primary" onClick={onSave}>
         {' '}
         Save{' '}
       </button>