Update the style and behavior of the green notification box in the UI

IDAES-UI/src/components/MessageBar/MessageBar.module.css

@@ -1,44 +1,49 @@
 .message_bar_container{
     position: fixed;
-    width: 100vw;
-    height:0px;
+    width: 250px;
+    height:25px;
+    min-width: fit-content;
     bottom: 0;
+    right: 0;
     z-index: 10000;
 }
 
 .messageBarTextContainer{
     position: absolute;
-    left: 50%;
-    top: 100%;
-    transform: translateX(-50%);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 300px;
-    height: 100px;
-    padding: 10px;
-    border-radius: 6px;
-    animation: messageBarShowUp .8s ease-in-out forwards;
+    animation: messageBarShowUp .5s ease-in-out forwards;
+    background-color: #333333;
+    border-radius: 1px solid blue;
+    border-top-left-radius: 5px;
 }
 
-.messageBarTextContainer >p{
+.messageBarTextContainer > p{
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
     color: white;
-    text-align: center;
+    text-wrap: nowrap;
+    border-top-left-radius: 20px;
+
 }
 
 @keyframes messageBarShowUp {
     1%{
-        top: 100%;
+        opacity: 0;
     }
 
     100%{
-        top:-120px;
+        opacity: 1;
     }
 }
 
 .bg_successful{
-    background-color: rgb(0, 158, 32);
+    background-color: #333333;
 }
 
 .bg_error{

IDAES-UI/src/components/MessageBar/MessageBarTemplateGenerator.tsx

@@ -1,50 +1,53 @@
 import css from "./MessageBar.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleCheck } from "@fortawesome/free-solid-svg-icons";
+export function messageBarTemplateGenerator(whichCalled: string, succeed: boolean, error?: any) {
 
-export function messageBarTemplateGenerator(whichCalled:string, succeed:boolean, error?:any){
-
-    let templateBgClass:string = "bg-successful";
+    let templateBgClass: string = "bg-successful";
     succeed ? templateBgClass = "bg-successful" : templateBgClass = "bg-error";
     // initial message and conditionally render message
-    let message:string = "loading...";
+    let message: string = "loading...";
 
     // refresh flowsheet
-    if(whichCalled == "refreshFS" && succeed){
+    if (whichCalled == "refreshFS" && succeed) {
         message = "Flowsheet refreshed.";
     }
 
-    if(whichCalled == "refreshFS" && !succeed){
+    if (whichCalled == "refreshFS" && !succeed) {
         message = "Flowsheet refresh failed! Please reload the page!";
     }
 
     // userSave flowsheet
-    if(whichCalled == "userSave" && succeed){
+    if (whichCalled == "userSave" && succeed) {
         message = "Flowsheet saved.";
     }
 
-    if(whichCalled == "userSave" && !succeed){
+    if (whichCalled == "userSave" && !succeed) {
         message = "Flowsheet save failed! Please restart the server!";
     }
 
     // diagnostics refresh
-    if(whichCalled == "diagnosticRefresh" && succeed){
+    if (whichCalled == "diagnosticRefresh" && succeed) {
         message = "Diagnostics refreshed.";
     }
 
-    if(whichCalled == "diagnosticRefresh" && !succeed){
+    if (whichCalled == "diagnosticRefresh" && !succeed) {
         message = "Diagnostics refresh failed! Please restart the server!";
     }
 
     // diagnostics fn run
-    if(whichCalled == "diagnosticFNRunError" && !succeed){
-        let currentError:string | undefined = undefined;
-        error ? message = error : message = `Run diagnostics failed, please check your python terminal.`
+    if (whichCalled == "diagnosticFNRunError" && !succeed) {
+        let currentError: string | undefined = undefined;
+        // error ? message = error : message = `
+        message = `Diagnostics failed, check your terminal.`;
     }
 
     // initial template
     const messageBarTemplate = `
         <div id='messageBarTextContainer' 
-            class="${css.messageBarTextContainer} ${succeed ? css.bg_successful : css.bg_error}"
+            class="${css.messageBarTextContainer} ${!succeed ? css.bg_error : css.bg_successful}"
         >
+            <i class="fa-solid fa-circle-check"></i>
             <p>${message}</p>
         </div>
     `;
@@ -54,14 +57,13 @@ export function messageBarTemplateGenerator(whichCalled:string, succeed:boolean,
     messageBarContainer.innerHTML = messageBarTemplate;
 
     // timeout 1.5 sec remove template 
-    const timeOut = setTimeout(()=>{
+    const timeOut = setTimeout(() => {
         const readMessageBarTemplate = document.getElementById('messageBarTextContainer');
-        console.log(readMessageBarTemplate)
-        if(readMessageBarTemplate){
+        if (readMessageBarTemplate) {
             messageBarContainer.removeChild(readMessageBarTemplate)
-        }else{
+        } else {
             console.log(`Child node message bar is not found!`)
         }
         clearTimeout(timeOut)
-    },3000)
+    }, 3000)
 }

IDAES-UI/src/diagnostics/Diagnostics.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState} from "react";
+import { useContext, useEffect, useState } from "react";
 import { AppContext } from "@/AppContext";
 import axios from "axios";
 import { messageBarTemplateGenerator } from "@/components/MessageBar/MessageBarTemplateGenerator";
@@ -9,60 +9,60 @@ import DiagnosticsDisplay from "./DiagnosticsDisplay";
 import "./Diagnostics.css";
 
 interface DiagnosticsDataInterface {
-    config: {key:any, value:any},
-    issues:{issues:any}
-    statistics:any
+    config: { key: any, value: any },
+    issues: { issues: any }
+    statistics: any
 }
 
-export default function Diagnostics(){
-    let {server_port, diagnosticsRefreshState} = useContext(AppContext);
+export default function Diagnostics() {
+    let { server_port, diagnosticsRefreshState } = useContext(AppContext);
     // this use to hold all diagnostic data fetched from api end point pass down to sub components
     const [diagnosticData, setDiagnosticsData] = useState<DiagnosticsDataInterface | null>(null);
     // use to hold which issue currently is displayed on screen setWhichIssue to update diagnostics display
-    const [whichIssue, setWhichIssue] = useState<string | null>("structural"); 
+    const [whichIssue, setWhichIssue] = useState<string | null>("structural");
 
-    const toggleIssueHandler = (issue:any) =>{
+    const toggleIssueHandler = (issue: any) => {
         // this function use in issues component's each issue tab
         // use for when each issue tab click and toggle current displayed issue
         setWhichIssue(issue)
     }
 
-    useEffect(()=>{
+    useEffect(() => {
         // const getDiagnosticUrl = `http://127.0.0.1:${server_port}/api/get_diagnostics`;
         const windowURL = new URL(window.location.href);
         const id = windowURL.searchParams.get("id");
         const getDiagnosticUrl = `http://localhost:${server_port}/diagnostics?id=${id}`;
 
-        const fetchDiagnosticData = async (url:string) =>{
+        const fetchDiagnosticData = async (url: string) => {
             // fetch diagnostic data from end point and update to state
-            try{
+            try {
                 const res = await axios.get(url);
                 const data = res.data
                 messageBarTemplateGenerator("diagnosticRefresh", true);
                 setDiagnosticsData(data);
-            }catch(error){
+            } catch (error) {
                 console.error("Fetch diagnostic data error", error)
                 messageBarTemplateGenerator("diagnosticRefresh", false);
             }
         }
         fetchDiagnosticData(getDiagnosticUrl);
     },
-    /**
-     * useEffect triggers:
-     * 1. onload
-     * 2. on diagnosticsRefreshState changed (click handler in mosaic to toggle this bool state)
-     */
-    [diagnosticsRefreshState]);
+        /**
+         * useEffect triggers:
+         * 1. onload
+         * 2. on diagnosticsRefreshState changed (click handler in mosaic to toggle this bool state)
+         */
+        [diagnosticsRefreshState]);
 
     return (
         <>
-            <DiagnosticHeader 
-                diagnosticData={diagnosticData} 
-                toggleIssue={toggleIssueHandler} 
+            <DiagnosticHeader
+                diagnosticData={diagnosticData}
+                toggleIssue={toggleIssueHandler}
                 whichIssue={whichIssue}
             />
-            <DiagnosticsDisplay 
-                diagnosticData={diagnosticData} 
+            <DiagnosticsDisplay
+                diagnosticData={diagnosticData}
                 whichIssue={whichIssue}
             />
         </>