fix: styling

frontend/src/AppBuilder/_stores/slices/eventsSlice.js

@@ -444,7 +444,7 @@ export const createEventsSlice = (set, get) => ({
           component: `[Page ${pageName}] [Component ${componentName}] [Event ${event?.eventId}] [Action ${event.actionId}]`,
           page: `[Page ${pageName}] [Event ${event.eventId}] [Action ${event.actionId}]`,
           query: `[Query ${getQueryName()}] [Event ${event.eventId}] [Action ${event.actionId}]`,
-          customLog: `${event.description}`,
+          customLog: `${event.key}`,
         };
 
         return headerMap[source] || '';
@@ -472,6 +472,7 @@ export const createEventsSlice = (set, get) => ({
           description: JSON.stringify(error.message, null, 2),
           ...(event.component === 'component' && componentId && { componentId: componentId }),
         },
+        description: event?.description,
         errorTarget: constructErrorTarget(),
         options: options,
         strace: 'app_level',
@@ -1110,7 +1111,8 @@ export const createEventsSlice = (set, get) => ({
         const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
         const event = {
           actionId: 'log-info',
-          description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
+          key: `${query.name}, Line ${lineNumber - 2}`,
+          description: log,
           eventType: 'customLog',
           query,
         };
@@ -1125,7 +1127,8 @@ export const createEventsSlice = (set, get) => ({
         const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
         const event = {
           actionId: 'log-error',
-          description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
+          key: `${query.name}, Line ${lineNumber - 2}`,
+          description: log,
           eventType: 'customLog',
           query,
         };
@@ -1140,7 +1143,8 @@ export const createEventsSlice = (set, get) => ({
         const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
         const event = {
           actionId: 'log',
-          description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
+          key: `${query.name}, Line ${lineNumber - 2}`,
+          description: log,
           eventType: 'customLog',
           query,
         };

frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js

@@ -810,7 +810,7 @@ export const createQueryPanelSlice = (set, get) => ({
             logLevel: result?.status === 'failed' ? 'error' : 'success',
             type: 'transformation',
             kind: query.kind,
-            key: query.name,
+            key: `${query.name}, transformation, line ${result?.data?.lineNumber}`,
             message: result?.message,
             error: result?.data,
             isTransformation: true,
@@ -981,12 +981,12 @@ export const createQueryPanelSlice = (set, get) => ({
 
         //Proxy Func required to get current execution line number from stack to log in debugger
 
-        const proxiedComponents = createProxy(resolvedState?.components, 'components');
-        const proxiedGlobals = createProxy(resolvedState?.globals, 'globals');
-        const proxiedConstants = createProxy(resolvedState?.constants, 'constants');
-        const proxiedVariables = createProxy(resolvedState?.variables, 'variables');
+        const proxiedComponents = createProxy(deepClone(resolvedState?.components), 'components');
+        const proxiedGlobals = createProxy(deepClone(resolvedState?.globals), 'globals');
+        const proxiedConstants = createProxy(deepClone(resolvedState?.constants), 'constants');
+        const proxiedVariables = createProxy(deepClone(resolvedState?.variables), 'variables');
         const proxiedPage = createProxy(deepClone(resolvedState?.page, 'page'));
-        const proxiedQueriesInResolvedState = createProxy(queriesInResolvedState, 'queries');
+        const proxiedQueriesInResolvedState = createProxy(deepClone(queriesInResolvedState), 'queries');
         const proxiedFormattedParams = createProxy(
           !_.isEmpty(proxiedFormattedParams) ? [proxiedFormattedParams] : [],
           'params'

frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx

@@ -87,12 +87,12 @@ function Logs({ logProps, idx }) {
       <p
         className="m-0 d-flex"
         onClick={(e) => {
-          setOpen((prev) => !prev);
+          logProps?.type !== 'Custom Log' && setOpen((prev) => !prev);
         }}
         style={{ pointerEvents: logProps?.isQuerySuccessLog ? 'none' : 'default', position: 'relative' }}
       >
         <span className={cx('position-absolute')} style={defaultStyles}>
-          <SolidIcon name="rightarrrow" fill={`var(--icons-strong)`} width="16" />
+          {logProps?.type !== 'Custom Log' && <SolidIcon name="rightarrrow" fill={`var(--icons-strong)`} width="16" />}
         </span>
         <span className="w-100" style={{ paddingTop: '8px', paddingBottom: '8px', paddingLeft: '20px' }}>
           {logProps.type === 'navToDisablePage' ? (
@@ -104,7 +104,9 @@ function Logs({ logProps, idx }) {
                 <small className="text-slate-10 text-right ">{moment(logProps?.timestamp).fromNow()}</small>
               </div>
               {logProps?.type === 'Custom Log' && (
-                <div className="error-target-custom-log cursor-pointer">Custom Log</div>
+                <div className="error-target-custom-log cursor-pointer">
+                  <SolidIcon name="code" fill={`var(--purple11)`} width="15" /> Custom Log
+                </div>
               )}
               <div className={`d-flex justify-content-between align-items-center ${!open && 'text-truncate'}`}>
                 <span
@@ -115,14 +117,14 @@ function Logs({ logProps, idx }) {
                   <HighlightSecondWord text={title} />
                 </span>
               </div>
+              {logProps?.type == 'Custom Log' && <div className="font-weight-500">{message}</div>}
               <span
                 className={cx('font-weight-500', {
                   'text-tomato-9': !logProps?.isQuerySuccessLog,
                   'color-light-green': logProps?.isQuerySuccessLog,
                 })}
               >
-                {message}
-                {logProps?.error?.lineNumber ? `, Line ${logProps.error.lineNumber}` : ''}
+                {logProps?.type !== 'Custom Log' && message}
               </span>
             </>
           )}

frontend/src/_styles/left-sidebar.scss

@@ -261,10 +261,16 @@
   }
 
   .error-target-custom-log {
+    display: flex;
+    align-items: center;
     margin-top: 5px;
     background: var(--purple5) !important;
     color: var(--purple11);
     width: fit-content;
+
+    svg {
+      margin-right: 1px;
+    }
   }
 }
 

frontend/src/_ui/Icon/solidIcons/Code.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Code = ({ fill = 'var(--purple11)', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.05619 2.62763C4.45804 2.22576 5.0031 2 5.57142 2H14.1428C14.3323 2 14.514 2.07525 14.6479 2.20921L20.3623 7.9235C20.4961 8.05744 20.5714 8.23913 20.5714 8.42857V19.8571C20.5714 20.4254 20.3457 20.9706 19.9438 21.3724C19.542 21.7743 18.9968 22 18.4286 22H5.57142C5.00309 22 4.45804 21.7743 4.05619 21.3724C3.65433 20.9706 3.42856 20.4254 3.42856 19.8571V4.14286C3.42856 3.57454 3.65433 3.02949 4.05619 2.62763ZM10.6147 10.5281C11.0332 10.9465 11.0332 11.6249 10.6147 12.0433L8.51521 14.1429L10.6147 16.2424C11.0332 16.6609 11.0332 17.3391 10.6147 17.7576C10.1963 18.176 9.51793 18.176 9.09951 17.7576L6.24237 14.9005C5.82396 14.4821 5.82396 13.8037 6.24237 13.3852L9.09951 10.5281C9.51793 10.1097 10.1963 10.1097 10.6147 10.5281ZM13.3852 12.0433C12.9668 11.6249 12.9668 10.9465 13.3852 10.5281C13.8036 10.1097 14.482 10.1097 14.9005 10.5281L17.7576 13.3852C18.176 13.8037 18.176 14.4821 17.7576 14.9005L14.9005 17.7576C14.482 18.176 13.8036 18.176 13.3852 17.7576C12.9668 17.3391 12.9668 16.6609 13.3852 16.2424L15.4848 14.1429L13.3852 12.0433Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Code;

frontend/src/_ui/Icon/solidIcons/index.js

@@ -229,6 +229,7 @@ import CalendarSmall from './CalendarSmall.jsx';
 import UserGroupsGrey from './UserGroupsGrey.jsx';
 import AppLimitSvg from './AppLimitSvg.jsx';
 import NewTabSmall from './NewTabSmall.jsx';
+import Code from './Code.jsx';
 
 const Icon = (props) => {
   switch (props.name) {
@@ -308,6 +309,8 @@ const Icon = (props) => {
       return <CircularToggleEnabled {...props} />;
     case 'clearrectangle':
       return <ClearRectangle {...props} />;
+    case 'code':
+      return <Code {...props} />;
     case 'clock':
       return <Clock {...props} />;
     case 'column':