Feature: clear button debugger (#624)

* 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

* clear button: debugger

* json alignment

frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx

@@ -16,6 +16,14 @@ export const LeftSidebarDebugger = ({ darkMode, components, errors }) => {
         setCurrentTab(tab)
     }
 
+    const clearErrorLogs = () => {
+        setUnReadErrorCount(() => {
+            return { read: 0, unread: 0 }
+        })
+
+        setErrorLogs(() => [])
+    }
+
     React.useEffect(() => {
         
         setErrorLogs(prev => {
@@ -82,12 +90,19 @@ export const LeftSidebarDebugger = ({ darkMode, components, errors }) => {
       <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 d-flex justify-content-between" data-bs-toggle="tabs"> 
                       <li className="nav-item">
                           <a onClick={() => switchCurrentTab(1)} className={currrentTab === 1 ? "nav-link active" : "nav-link"}>
                               Errors
                           </a>
                       </li>
+                      {errorLogs.length > 0 && (
+                        <li>
+                            <button onClick={clearErrorLogs} type="button" className="btn btn-light btn-sm m-1 py-1" aria-label="clear button">
+                                <span className="text-muted">clear</span>
+                            </button>
+                        </li> 
+                       )}
                   </ul> 
               </div> 
           </div>
@@ -135,7 +150,7 @@ function ErrorLogsComponent ({ errorProps, idx, darkMode }) {
                         src={errorProps.options.data}
                         theme={darkMode ? 'shapeshifter' : 'rjv-default'}
                         name={errorProps.options.name}
-                        style={{ fontSize: '0.7rem', paddingLeft:'0.35rem' }}
+                        style={{ fontSize: '0.7rem', paddingLeft:'0.17rem' }}
                         enableClipboard={false}
                         displayDataTypes={false}
                         collapsed={true}
@@ -149,7 +164,7 @@ function ErrorLogsComponent ({ errorProps, idx, darkMode }) {
                         src={errorProps.response.data}
                         theme={darkMode ? 'shapeshifter' : 'rjv-default'}
                         name={errorProps.response.name}
-                        style={{ fontSize: '0.7rem', paddingLeft:'0.35rem' }}
+                        style={{ fontSize: '0.7rem', paddingLeft:'0.17rem' }}
                         enableClipboard={false}
                         displayDataTypes={false}
                         collapsed={true}

frontend/src/_styles/left-sidebar.scss

@@ -51,6 +51,21 @@
       transition: max-height 0.25s cubic-bezier(0.5, 0, 0.1, 1);
       overflow: hidden;
     }
+
+    .react-json-view {
+      .object-key-val {
+        margin-top: 0;
+      }
+      .icon-container + span  {
+        margin-top: -0.14rem;
+        + span {
+          transform: translateY(-0.2rem);
+        }
+      }        
+      .brace-row > span {
+        transform: translateY(-0.2rem)
+      }
+    }
   }
   .iopen {
     transform: rotate(90deg);