Feature: notification badge-indicator [debugger] (#616)

* debugger

* debugger.2

* empty options

* json styles

* positioning the divider for each queries

* refactored for generic cases

* bug fix: a single log for each datasource

* feature: notification-badge for debugger

* show badge when notification count is greater than 0

* notification badge

* removed

* not req for badge

* resolves

* badge styles

* edge case

frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx

@@ -10,6 +10,7 @@ export const LeftSidebarDebugger = ({ darkMode, components, errors }) => {
     const [open, trigger, content] = usePopover(false)
     const [currrentTab, setCurrentTab] = React.useState(1)
     const [errorLogs, setErrorLogs] = React.useState([])
+    const [unReadErrorCount, setUnReadErrorCount] = React.useState({read: 0, unread: 0})
 
     const switchCurrentTab = (tab) => {
         setCurrentTab(tab)
@@ -56,20 +57,39 @@ export const LeftSidebarDebugger = ({ darkMode, components, errors }) => {
         })
     },[errors])
 
+    React.useEffect(() => {
+        
+        if(open ===  false && errorLogs.length !== unReadErrorCount.read) {
+            const unReadErrors = errorLogs.length - unReadErrorCount.read
+            setUnReadErrorCount((prev) => {
+                let copy = JSON.parse(JSON.stringify(prev))
+                copy.unread = unReadErrors
+                return copy
+            })
+        } else {
+            setUnReadErrorCount((prev) => {
+                let copy = JSON.parse(JSON.stringify(prev))
+                copy.read = errorLogs.length
+                copy.unread = 0
+                return copy
+            })
+        }
+    },[errorLogs.length, open])
+
     return (
     <>
-      <LeftSidebarItem tip='Debugger' {...trigger} icon='debugger' className='left-sidebar-item' />
+      <LeftSidebarItem tip='Debugger' {...trigger} icon='debugger' className='left-sidebar-item' badge={true} count={unReadErrorCount.unread} />
       <div {...content} className={`card popover debugger-popover ${open ? 'show' : 'hide'}`} style={{minWidth:'180px', minHeight:'108px', maxWidth:'480px'}} >
           <div className="row-header">
               <div className="nav-header">
-                  <ul className="nav nav-tabs" data-bs-toggle="tabs">
+                  <ul className="nav nav-tabs" data-bs-toggle="tabs"> 
                       <li className="nav-item">
                           <a onClick={() => switchCurrentTab(1)} className={currrentTab === 1 ? "nav-link active" : "nav-link"}>
                               Errors
                           </a>
                       </li>
-                  </ul>
-              </div>
+                  </ul> 
+              </div> 
           </div>
         
         
@@ -147,4 +167,4 @@ function ErrorLogsComponent ({ errorProps, idx, darkMode }) {
 
 
 
-LeftSidebarDebugger.ErrorLogs = ErrorLogsComponent; 
+LeftSidebarDebugger.ErrorLogs = ErrorLogsComponent;

frontend/src/Editor/LeftSidebar/sidebar-item.js

@@ -2,7 +2,7 @@ import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 
-export const LeftSidebarItem = ({ tip = '', className, icon, text, onClick, ...rest }) => {
+export const LeftSidebarItem = ({ tip = '', className, icon, text, onClick, badge=false, count,...rest }) => {
 
   return (
     <OverlayTrigger
@@ -15,8 +15,28 @@ export const LeftSidebarItem = ({ tip = '', className, icon, text, onClick, ...r
     >
       <div {...rest} className={className} onClick={onClick && onClick}>
       {icon && <img className="svg-icon" src={`/assets/images/icons/editor/left-sidebar/${icon}.svg`} width="20" height="20" />}
+      {badge && <LeftSidebarItem.Badge count={count} /> }
       {text && text}
-    </div>
+      </div>
     </OverlayTrigger>
   )
 }
+
+function NotificationBadge({count}) {
+  const fontSize = count > 999 ? '7.5px' : '8.5px'
+  return (
+    <>
+      {count > 0 && (
+        <span 
+        class="badge bg-red rounded-circle debugger-badge p-0"
+        style={{fontSize: fontSize}}
+        >
+          {count > 999 ? `999+` : count}
+        </span>
+      )}
+    </>
+  )
+}
+
+
+LeftSidebarItem.Badge = NotificationBadge

frontend/src/_styles/left-sidebar.scss

@@ -14,6 +14,10 @@
 
     &:hover {
       transform: scale(1.2);
+
+      .debugger-badge {
+        display: none;
+      }
     }
   }
   .left-sidebar-stack-bottom {
@@ -48,11 +52,18 @@
       overflow: hidden;
     }
   }
-
   .iopen {
     transform: rotate(90deg);
     transition: 0.12s;
   }
+  .debugger-badge {
+    position: fixed;
+    margin-top: -0.82rem;
+    margin-left: -0.3rem;
+    height: 20px;
+    width: 20px;
+    font-weight: 400;
+  }
   .zoom-popover {
     top: 500px;
   }