beautifying message

Author: KittyJose

packages/tdb-dashboard/src/App.css

@@ -1201,3 +1201,28 @@ pre.CodeMirror-line  > span > span.cm-string {
     /* line-height: 1.5 !important; */
   min-height: 49px!important;
 }
+
+/** custom alert error message */
+.alert_danger_text {
+  color: #842029 !important;
+}
+
+.alert_danger {
+  background-color: #f8d7da !important;
+  border: 1px solid #f5c2c7 !important;
+}
+
+.alert_more_info_border {
+  border: 1px solid #842029 !important;
+}
+
+.alert_btn_close {
+  color: #842029 !important;
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  border: 0;
+  border-radius: 0.375rem;
+  opacity: 0.4;
+}

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

@@ -6,6 +6,24 @@ import {AiOutlineCheckCircle, AiOutlineWarning} from "react-icons/ai"
 import {BiErrorCircle} from "react-icons/bi"
 import {BsInfoCircle} from "react-icons/bs"
 import {queryTimeDisplay} from "./utils"
+import { FaTimes, FaExclamationTriangle } from "react-icons/fa"
+
+
+/**
+* 
+* @param {*} type document Type
+* @returns a close button icon
+*/
+const AlertCloseButton = ({ className,  onClick }) => { 
+    // on close button display document list table
+    return <Button variant="light" 
+        className={`${className} d-contents`}
+        style={{display: "contents"}}
+        tilte={`Close`}
+        onClick={onClick}>
+        <FaTimes/>
+    </Button>
+ }
 
 export const Alerts = ({message, type, onCancel, time}) => {
     const [hiddenAlerts, setHiddenAlerts] = React.useState([])
@@ -38,17 +56,18 @@ export const Alerts = ({message, type, onCancel, time}) => {
 
     if(type == TERMINUS_DANGER)
         return  <Alert
-            className="text-break"
-            variant="danger"
+            //className="text-break"
+            //variant="danger"
+            className="alert_danger alert_danger_text"
             show={shouldShowAlert("danger")}
             onClose={() => onClose("danger")}>
 
             <div className="d-flex justify-content-between">
-            <div>
-                <BiErrorCircle className="me-1" />
-                <strong>Error: </strong> {message}
-            </div>
-            <Button variant="close" size="xs" onClick={() => onClose("danger")} />
+                <div className="w-100">
+                    <FaExclamationTriangle className="me-1 mb-1" />
+                    <strong>Oops! Something went wrong.</strong> {message}
+                </div> 
+                <AlertCloseButton className={"alert_btn_close alert_danger_text"} onClick={() => onClose("danger")}/>
             </div>
         </Alert>
 

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

@@ -3,11 +3,12 @@ import {format, subSeconds} from "date-fns"
 //import deAT from 'date-fns/locale/de-AT/index'
 //import {XSD_DATA_TYPE_PREFIX, XDD_DATA_TYPE_PREFIX} from "./constants"
 import {FiCopy} from "react-icons/fi"
-import React from "react"
+import React, {useState} from "react"
 import {VscGitPullRequestDraft} from "react-icons/vsc"
 import {VscGitPullRequest} from "react-icons/vsc"
 import {VscCheck} from "react-icons/vsc" 
 import {AiOutlineCheck} from "react-icons/ai"
+import Stack from 'react-bootstrap/Stack';
 import Badge from "react-bootstrap/Badge"
 import Button from "react-bootstrap/Button"
 import {
@@ -16,6 +17,7 @@ import {
 	MERGED, 
 	SUBMITTED
 } from "./constants"
+import { ErrorDisplay } from "./ErrorDisplay"
 
 export const isArray = (arr) => {
     if (!Array.isArray(arr) || !arr.length) {
@@ -321,12 +323,21 @@ export function sortAlphabetically (list, byID) {
 }
 
 // function which displays CR Conflict errors
-export function getCRConflictError (errorData) {
-	let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request" 
-	return <div>
-		{message}
+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" 
+	
+    return <ErrorDisplay errorData={errorData} message={message}/>
+
+	/*let message = "It looks like there are conflicts, fix these conflicts and then update or exit the Change Request" 
+	return <div className="w-100">
+        <Stack direction="horizontal" gap={3} className="w-100">
+            <div>{message}</div>
+            <Button className="ms-auto btn btn-sm alert_danger alert_danger_text">More Info</Button>
+        </Stack>
+        
 		<pre>{JSON.stringify(errorData, null, 2)}</pre>
-	</div>
+	</div>*/
 }
 
 export function decodeUrl(id){

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

@@ -43,9 +43,9 @@ export function formatErrorMessage (err){
 	}else if(err.data){ 
 		if( err.data["api:message"] === "Incorrect authentication information"){
 			message =  "Incorrect authentication information, wrong username or password"
-		}else if (err.data["api:status"]==="api:conflict"){
+		}else if (err.data["api:status"]==="api:conflict") { 
 			message = getCRConflictError(err.data["api:witnesses"])
-		}else if (err.data["api:message"]=== "Schema check failure"){
+		}else if (err.data["api:message"]=== "Schema check failure") {
 			message = `${err.data["api:message"]} ${JSON.stringify(err.data["system:witnesses"], null, 2)}`
 		}else{
 			message = err.data["api:message"]

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

@@ -43,7 +43,7 @@ const CRAction = ({}) => {
         return <ChangeDiffComponent/>
 
     // if needRebase  
-    return <React.Fragment>
+    return <React.Fragment>  
         {errorMessage && <Alerts message={errorMessage} type={CONST.TERMINUS_DANGER} onCancel={setError}/>}
         <Card className="update__change__request__card">
             <Card.Header className="w-100">