From d1d3eb1421deb80313757a7d4c00633f652d5a2f Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Mon, 30 Aug 2021 16:23:12 +0530
Subject: [PATCH] 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
---
 .../Editor/LeftSidebar/SidebarDebugger.jsx    | 21 ++++++++++++++++---
 frontend/src/_styles/left-sidebar.scss        | 15 +++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
index d380fa0b5c..03422ca1b3 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
+++ b/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}
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index b808ac2065..9ba8721d1a 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/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);