Skip to content

Commit c0be52b

Browse files
KittyJoseKittyJose
committed
adding conflic errors and styling
1 parent cafa88a commit c0be52b

File tree

10 files changed

+146
-31
lines changed

10 files changed

+146
-31
lines changed

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1225,4 +1225,8 @@ pre.CodeMirror-line > span > span.cm-string {
12251225
border: 0;
12261226
border-radius: 0.375rem;
12271227
opacity: 0.4;
1228+
}
1229+
1230+
.alert_expand_icons {
1231+
margin-top: -20px;
12281232
}

‎packages/tdb-dashboard/src/components/ErrorDisplay.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, {useContext} from "react"
2+
import Accordion from 'react-bootstrap/Accordion';
3+
import { useAccordionButton } from 'react-bootstrap/AccordionButton';
4+
import Card from 'react-bootstrap/Card';
5+
import AccordionContext from 'react-bootstrap/AccordionContext';
6+
import * as CONST from "./constants"
7+
import { MdKeyboardArrowDown, MdKeyboardArrowRight } from "react-icons/md"
8+
9+
// function to show custom buttons on Show/Hide in Accordians
10+
function ToggleErrorDisplay({ children, eventKey, expandComponent, hideComponent, css }) {
11+
const { activeEventKey } = useContext(AccordionContext);
12+
13+
const onExpand = useAccordionButton(eventKey, () => {});
14+
15+
const isCurrentEventKey = activeEventKey === eventKey;
16+
17+
return (
18+
<button
19+
type="button"
20+
className={css}
21+
onClick={onExpand}
22+
>
23+
{ isCurrentEventKey ? hideComponent : expandComponent }
24+
</button>
25+
);
26+
}
27+
28+
// function displays accordians per property error
29+
/**
30+
*
31+
* @param {*} propertyName property name
32+
* @param {*} errorType error description per property
33+
* @param {*} message message per property
34+
* @returns
35+
*/
36+
export const DisplayErrorPerProperty = ({ propertyName, errorType, message }) => {
37+
return <Accordion className="bg-transparent border-0 w-100">
38+
<Accordion.Item eventKey={propertyName} className={"bg-transparent border-0 alert_danger_text"}>
39+
<div className="mb-3">
40+
<div className="fw-bold d-flex">
41+
<ToggleErrorDisplay eventKey={propertyName}
42+
css={CONST.ERROR_DOC_EXPAND_ICON_CLASSNAME}
43+
expandComponent={<MdKeyboardArrowRight/>}
44+
hideComponent={<MdKeyboardArrowDown/>}/>
45+
{errorType}
46+
<pre className="alert_danger_border ml-1 p-1 rounded">{propertyName}</pre>
47+
</div>
48+
</div>
49+
</Accordion.Item>
50+
<Accordion.Collapse eventKey={propertyName} className={"bg-transparent"}>
51+
<div style={{ whiteSpace: "pre-wrap" }}>{message}</div>
52+
</Accordion.Collapse>
53+
</Accordion>
54+
}
55+
56+
57+
// function display error messages
58+
export const ErrorDisplay = ({ errorData, message, css }) => {
59+
return <Accordion className="bg-transparent border-0 w-100">
60+
<Card className="bg-transparent border-0">
61+
<Card.Header className="bg-transparent">
62+
<span className="text-uppercase">{message} </span>
63+
<ToggleErrorDisplay eventKey="0" expandComponent={"More Info" } hideComponent={"Hide"} css={css}/>
64+
</Card.Header>
65+
<Accordion.Collapse eventKey="0">
66+
<Card.Body>
67+
{/*<pre>{JSON.stringify(errorData, null, 2)}</pre>*/}
68+
{errorData}
69+
</Card.Body>
70+
</Accordion.Collapse>
71+
</Card>
72+
</Accordion>
73+
}

‎packages/tdb-dashboard/src/components/JsonFrameViewer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export const JsonFrameViewer = ({jsonData, mode, setExtracted}) => {
6666
if(setExtracted) setExtracted(data)
6767
}
6868

69+
// onBlur
6970
return <React.Fragment>
7071
<CodeMirror
7172
value={JSON.stringify(data, null, 2)}

‎packages/tdb-dashboard/src/components/constants.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,3 +499,6 @@ export const DELETE="Delete"
499499
export const VIEW_LIST="List"
500500

501501

502+
//ERROR MESSAGE CONSTANTS
503+
export const ERROR_MORE_INFO_CLASSNAME = "float-right alert_danger alert_danger_text rounded alert_danger_border"
504+
export const ERROR_DOC_EXPAND_ICON_CLASSNAME = "mr-4 alert_expand_icons bg-transparent border-0 alert_danger_text"

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
MERGED,
1818
SUBMITTED
1919
} from "./constants"
20-
import { ErrorDisplay } from "./ErrorDisplay"
2120

2221
export const isArray = (arr) => {
2322
if (!Array.isArray(arr) || !arr.length) {
@@ -324,20 +323,15 @@ export function sortAlphabetically (list, byID) {
324323

325324
// function which displays CR Conflict errors
326325
export const getCRConflictError = (errorData) => {
327-
//const [showError, setShowError] = useState(false)
328-
let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request"
329-
330-
return <ErrorDisplay errorData={errorData} message={message}/>
331326

332-
/*let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request"
327+
let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request"
333328
return <div className="w-100">
334329
<Stack direction="horizontal" gap={3} className="w-100">
335330
<div>{message}</div>
336-
<Button className="ms-auto btn btn-sm alert_danger alert_danger_text">More Info</Button>
337331
</Stack>
338332

339333
<pre>{JSON.stringify(errorData, null, 2)}</pre>
340-
</div>*/
334+
</div>
341335
}
342336

343337
export function decodeUrl(id){

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

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ export const DocumentControlObj = () => useContext(DocumentControlContext)
44
import {WOQLClientObj} from '../init-woql-client'
55
import * as CONST from "../components/constants"
66
import { ErrorDisplay } from "../components/ErrorDisplay"
7-
import Stack from "react-bootstrap/Stack"
8-
7+
import { DisplayErrorPerProperty } from "../components/ErrorDisplay"
98

109
export const DocumentControlProvider = ({children}) => {
1110

@@ -42,22 +41,47 @@ export const DocumentControlProvider = ({children}) => {
4241

4342
// function to format and display errors in document Interface
4443
function formatErrorMessages (error) {
44+
45+
if(!error.hasOwnProperty("api:message")) return error
46+
4547
let message = error["api:message"]
4648
let errorElements = []
4749
if(error["api:error"]) {
4850
if(Array.isArray(error["api:error"]["api:witnesses"])) {
4951
error["api:error"]["api:witnesses"].map(err => {
50-
errorElements.push(<Stack className="mb-3">
51-
<div className="fw-bold d-flex">
52-
{`${err["@type"]} on `}
53-
<pre className="alert_danger_border ml-1 p-1 rounded">{err["constraint_name"]}</pre>
54-
</div>
55-
<div>{err.message}</div>
56-
</Stack>)
57-
})
52+
53+
if(err.hasOwnProperty("constraint_name")) {
54+
// CONSTRAINT ERRORS
55+
let propertyName = err["constraint_name"]
56+
let errorType = `${err["@type"]} on `
57+
let message = err.message
58+
59+
errorElements.push(
60+
<DisplayErrorPerProperty propertyName={propertyName} message={message} errorType={errorType}/>
61+
)
62+
}
63+
else {
64+
if(err.hasOwnProperty("@type")) {
65+
errorElements.push(
66+
<pre>{JSON.stringify(err, null, 2)}</pre>
67+
)
68+
}
69+
else {
70+
// OTHER TYPE ERRORS
71+
for(let items in err) {
72+
let propertyName = items
73+
let errorType = err[propertyName].hasOwnProperty("@type") ? `${err[propertyName]["@type"]} on ` : `Error occured on`
74+
let message = JSON.stringify(err[propertyName], null, 2)
75+
errorElements.push(
76+
<DisplayErrorPerProperty propertyName={propertyName} message={message} errorType={errorType}/>
77+
)
78+
}
79+
}
80+
}
81+
})
5882
}
5983
}
60-
return <ErrorDisplay errorData={errorElements} message={message}/>
84+
return <ErrorDisplay errorData={errorElements} message={message} css={CONST.ERROR_MORE_INFO_CLASSNAME}/>
6185
}
6286

6387
return (

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@ export function CheckStatusObj() {
2323

2424
}
2525

26+
// function to set error
27+
function setErrorMessage(setErrorMsg, err) {
28+
if(setErrorMsg) {
29+
if(err.hasOwnProperty("data")) setErrorMsg(err.data)
30+
else setErrorMsg(err.message)
31+
}
32+
}
33+
2634
/**
2735
* Create a new document
2836
* @param {*} client TerminusDB Client
@@ -48,7 +56,7 @@ export function CreateDocumentHook(client,document, setLoading, setErrorMsg) {
4856
}
4957
catch(err){
5058
setLoading(false)
51-
if(setErrorMsg) setErrorMsg(err.message)
59+
setErrorMessage(setErrorMsg, err)
5260
}
5361
}
5462

@@ -115,7 +123,8 @@ export function GetDocumentHook(client, documentId, setData, setLoading, setErro
115123
}
116124
catch(err){
117125
if(setLoading) setLoading(false)
118-
if(setErrorMsg) setErrorMsg(err.message)
126+
setErrorMessage(setErrorMsg, err)
127+
//if(setErrorMsg) setErrorMsg(err.message)
119128
}
120129
}
121130

@@ -153,7 +162,8 @@ export function EditDocumentHook(client, extractedUpdate, setLoading, setErrorMs
153162
navigate(-1)
154163
}
155164
catch(err){
156-
setErrorMsg(err.message)
165+
//setErrorMsg(err.message)
166+
setErrorMessage(setErrorMsg, err)
157167
setLoading(false)
158168
}
159169
}

‎packages/tdb-dashboard/src/pages/DocumentEdit.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {DocumentControlObj} from "../hooks/DocumentControlContext"
1414
import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
1515
import {UTILS} from "@terminusdb/terminusdb-client"
1616
import {decodeUrl} from "../components/utils"
17+
import { Alerts } from "../components/Alerts"
1718

1819
const checkIfPrefix =(id)=>{
1920
if(id.indexOf(":")>-1){
@@ -116,6 +117,10 @@ export const DocumentEdit = () => {
116117
setChangeRequestBranch, branch
117118
} = WOQLClientObj()
118119

120+
const {
121+
formatErrorMessages
122+
} = DocumentControlObj()
123+
119124
const {type, id} = useParams()
120125
let documentID=decodeUrl(id)
121126
// constants to display document body in Form or JSON View
@@ -140,9 +145,10 @@ export const DocumentEdit = () => {
140145

141146
return <main className="content w-100 document__interface__main">
142147

143-
{errorMsg && <Alert variant={"danger"} className="mr-3">
148+
{/*errorMsg && <Alert variant={"danger"} className="mr-3">
144149
{errorMsg}
145-
</Alert>}
150+
</Alert>*/}
151+
{errorMsg && <Alerts message={formatErrorMessages(errorMsg)} type={CONST.TERMINUS_DANGER} onCancel={setErrorMsg}/>}
146152
{showModal && <CreateChangeRequestModal showModal={showModal}
147153
type={type}
148154
setShowModal={setShowModal}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,26 +105,26 @@ const DisplayDocumentBody = ({setLoading, setErrorMsg}) => {
105105
}
106106

107107

108-
const FAKE_ERROR = {
108+
/*const FAKE_ERROR = {
109109
"@type":"api:InsertDocumentErrorResponse",
110110
"api:error": {
111111
"@type":"api:SchemaCheckFailure",
112112
"api:witnesses": [
113113
{
114114
"@type":"ConstraintFailure",
115115
"constraint_name":"MidLifeInsurance",
116-
"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"
116+
"message":"Failed to satisfy: 12 > 30\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"
117117
},
118118
{
119119
"@type":"ConstraintFailure",
120120
"constraint_name":"Policy",
121-
"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"
121+
"message":"Failed to satisfy: 12 > 30\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"
122122
}
123123
]
124124
},
125125
"api:message":"Schema check failure",
126126
"api:status":"api:failure"
127-
}
127+
}*/
128128

129129
export const DocumentNew = () => {
130130
const {
@@ -140,8 +140,8 @@ export const DocumentNew = () => {
140140
const {type} = useParams()
141141

142142
const [loading, setLoading]=useState(false)
143-
//const [errorMsg, setErrorMsg]=useState(false)
144-
const [errorMsg, setErrorMsg]=useState(FAKE_ERROR)
143+
const [errorMsg, setErrorMsg]=useState(false)
144+
//const [errorMsg, setErrorMsg]=useState(FAKE_ERROR)
145145

146146
useEffect(() => {
147147
if(branch === "main"){

‎packages/tdb-documents-ui/src/documentTypeFrames/helpers.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export function displaySearchComponent(props, onSelect, linked, mode) {
160160

161161
// display only anyof properties here
162162
// schema appears twice in UI so we display empty div when props.schema has anyOf
163-
if(props.schema.hasOwnProperty("anyOf")) return <div/>
163+
if(props.hasOwnProperty("schema") && props.schema.hasOwnProperty("anyOf")) return <div/>
164164

165165

166166
const Selected = ({selected, mode}) => {

0 commit comments

Comments
 (0)