beautifying

Author: KittyJose

packages/tdb-dashboard/src/App.css

@@ -1212,7 +1212,7 @@ pre.CodeMirror-line  > span > span.cm-string {
   border: 1px solid #f5c2c7 !important;
 }
 
-.alert_more_info_border {
+.alert_danger_border {
   border: 1px solid #842029 !important;
 }
 

packages/tdb-dashboard/src/components/utils.js

@@ -322,7 +322,7 @@ export function sortAlphabetically (list, byID) {
     })
 }
 
-// function which displays CR Conflict errors
+// function which displays CR Conflict errors 
 export const getCRConflictError = (errorData) => {
     //const [showError, setShowError] = useState(false)
     let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request" 

packages/tdb-dashboard/src/hooks/DocumentControlContext.js

@@ -3,6 +3,9 @@ export const DocumentControlContext = React.createContext()
 export const DocumentControlObj = () => useContext(DocumentControlContext)
 import {WOQLClientObj} from '../init-woql-client'
 import * as CONST from "../components/constants"
+import { ErrorDisplay } from "../components/ErrorDisplay"
+import Stack from "react-bootstrap/Stack"
+
 
 export const DocumentControlProvider = ({children}) => {
 
@@ -37,6 +40,26 @@ export const DocumentControlProvider = ({children}) => {
 
 
 
+    // function to format and display errors in document Interface
+    function formatErrorMessages (error) {
+        let message = error["api:message"]
+        let errorElements = []
+        if(error["api:error"]) {
+            if(Array.isArray(error["api:error"]["api:witnesses"])) {
+                error["api:error"]["api:witnesses"].map(err => {
+                    errorElements.push(<Stack className="mb-3">
+                        <div className="fw-bold d-flex">
+                            {`${err["@type"]} on `}
+                            <pre className="alert_danger_border ml-1 p-1 rounded">{err["constraint_name"]}</pre>
+                        </div>
+                        <div>{err.message}</div>
+                    </Stack>)
+                })
+            }
+        }
+        return <ErrorDisplay errorData={errorElements} message={message}/>
+    }
+
     return (
         <DocumentControlContext.Provider
             value={{
@@ -46,7 +69,8 @@ export const DocumentControlProvider = ({children}) => {
                 jsonContent, 
                 setJsonContent,
                 showFrames, 
-                setShowFrames
+                setShowFrames,
+                formatErrorMessages
             }}
         >
             {children}

packages/tdb-dashboard/src/hooks/DocumentHook.js

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { ChangeRequest } from "./ChangeRequest";
 import { WOQLClientObj } from "../init-woql-client";
 
+
 // to be review this
 export function CheckStatusObj() {
     const {currentChangeRequest} = WOQLClientObj()

packages/tdb-dashboard/src/pages/DocumentNew.js

@@ -12,6 +12,7 @@ import Alert from 'react-bootstrap/Alert'
 import {DocumentControlObj} from "../hooks/DocumentControlContext"
 import {Loading} from "../components/Loading"
 import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
+import { Alerts } from "../components/Alerts"
 
 
 const checkIfPrefix =(id)=>{
@@ -52,6 +53,7 @@ const onSelect = async (inp, type) => {
     return results
 }
 
+
 const DisplayDocumentBody = ({setLoading, setErrorMsg}) => {
     const { 
         woqlClient, 
@@ -102,17 +104,44 @@ const DisplayDocumentBody = ({setLoading, setErrorMsg}) => {
     />
 }
 
+
+const FAKE_ERROR = {
+    "@type":"api:InsertDocumentErrorResponse",
+    "api:error": {
+      "@type":"api:SchemaCheckFailure",
+      "api:witnesses": [
+        {
+            "@type":"ConstraintFailure",
+            "constraint_name":"MidLifeInsurance",
+            "message":"Failed to satisfy: 12 > 30\n\n\n    In the Constraint:\n\n( 'Policy/3':'Policy'\n   ∧ 'Policy/3' =[insurance_product]> 'MidLifeInsurance/Mid-Life%20Insurance%20Product'\n   ∧ 'MidLifeInsurance/Mid-Life%20Insurance%20Product':'MidLifeInsurance'\n   ) ⇒\n    'Policy/3' =[customer]> 'Customer/Jill+Curry+2'\n     ∧ 'Customer/Jill+Curry+2' =[age]> 12\n     ∧ « 12 > 30\n     » ∧ 12 < 60\n    \n"
+        },
+        {
+            "@type":"ConstraintFailure",
+            "constraint_name":"Policy",
+            "message":"Failed to satisfy: 12 > 30\n\n\n    In the Constraint:\n\n( 'Policy/3':'Policy'\n   ∧ 'Policy/3' =[insurance_product]> 'MidLifeInsurance/Mid-Life%20Insurance%20Product'\n   ∧ 'MidLifeInsurance/Mid-Life%20Insurance%20Product':'MidLifeInsurance'\n   ) ⇒\n    'Policy/3' =[customer]> 'Customer/Jill+Curry+2'\n     ∧ 'Customer/Jill+Curry+2' =[age]> 12\n     ∧ « 12 > 30\n     » ∧ 12 < 60\n    \n"
+        }
+      ]
+    },
+    "api:message":"Schema check failure",
+    "api:status":"api:failure"
+}
+
 export const DocumentNew = () => {   
     const { 
         setChangeRequestBranch, branch,woqlClient
     } = WOQLClientObj()
 
+    const {
+        formatErrorMessages
+    } = DocumentControlObj()
+       
 
     const [showModal, setShowModal] = useState(false)
     const {type} = useParams()
 
     const [loading, setLoading]=useState(false)
-    const [errorMsg, setErrorMsg]=useState(false)
+    //const [errorMsg, setErrorMsg]=useState(false)
+    const [errorMsg, setErrorMsg]=useState(FAKE_ERROR)
 
     useEffect(() => {
         if(branch === "main"){
@@ -127,16 +156,17 @@ export const DocumentNew = () => {
        // setCurrentMode(currentMode)
     }
 
-    return <main className="content w-100 document__interface__main">      
-        {errorMsg && <Alert variant={"danger"} className="mr-3">
+    return <main className="content w-100 document__interface__main">     
+        {errorMsg && <Alerts message={formatErrorMessages(errorMsg)} type={CONST.TERMINUS_DANGER} onCancel={setErrorMsg}/>} 
+        {/*errorMsg && <Alert variant={"danger"} className="mr-3">
             {errorMsg}
-        </Alert>}
+        </Alert>*/}
         {showModal && <CreateChangeRequestModal showModal={showModal}
                 type={type} 
                 setShowModal={setShowModal} 
                 updateViewMode={updateViewMode}/>}
         {branch !== "main" &&    
-            <Card className="mr-3 bg-dark">
+            <Card className="bg-dark">
                 <Card.Header className="justify-content-between d-flex w-100 text-break">
                     <Header mode={CONST.CREATE_DOCUMENT} type={type}/>
                 </Card.Header>