Show lint errors in the debugger

app/client/src/components/editorComponents/Debugger/index.tsx

@@ -13,7 +13,7 @@ import { getTypographyByKey } from "constants/DefaultTheme";
 import { Layers } from "constants/Layers";
 import { stopEventPropagation } from "utils/AppsmithUtils";
 
-const Container = styled.div<{ errorCount: number }>`
+const Container = styled.div<{ errorCount: number; warningCount: number }>`
   z-index: ${Layers.debugger};
   background-color: ${(props) =>
     props.theme.colors.debugger.floatingButton.background};
@@ -40,8 +40,10 @@ const Container = styled.div<{ errorCount: number }>`
     height: 16px;
     padding: ${(props) => props.theme.spaces[1]}px;
     background-color: ${(props) =>
-      !!props.errorCount
-        ? props.theme.colors.debugger.floatingButton.errorCount
+      props.errorCount + props.warningCount > 0
+        ? props.errorCount === 0
+          ? props.theme.colors.debugger.floatingButton.warningCount
+          : props.theme.colors.debugger.floatingButton.errorCount
         : props.theme.colors.debugger.floatingButton.noErrorCount};
     border-radius: 10px;
     position: absolute;
@@ -55,9 +57,16 @@ const Container = styled.div<{ errorCount: number }>`
 
 function Debugger() {
   const dispatch = useDispatch();
-  const errorCount = useSelector(
-    (state: AppState) => Object.keys(state.ui.debugger.errors).length,
-  );
+  const messageCounters = useSelector((state) => {
+    const errorKeys = Object.keys(state.ui.debugger.errors);
+    const warnings = errorKeys.filter((key: string) => key.includes("warning"))
+      .length;
+    const errors = errorKeys.length - warnings;
+    return { errors, warnings };
+  });
+
+  const totalMessageCount = messageCounters.errors + messageCounters.warnings;
+
   const showDebugger = useSelector(
     (state: AppState) => state.ui.debugger.isOpen,
   );
@@ -74,14 +83,15 @@ function Debugger() {
     return (
       <Container
         className="t--debugger"
-        errorCount={errorCount}
+        errorCount={messageCounters.errors}
         onClick={onClick}
+        warningCount={messageCounters.warnings}
       >
         <Icon name="bug" size={IconSize.XL} />
-        <div className="debugger-count">{errorCount}</div>
+        <div className="debugger-count">{totalMessageCount}</div>
       </Container>
     );
-  return <DebuggerTabs defaultIndex={errorCount ? 0 : 1} />;
+  return <DebuggerTabs defaultIndex={totalMessageCount ? 0 : 1} />;
 }
 
 export default Debugger;

app/client/src/constants/DefaultTheme.tsx

@@ -1056,6 +1056,7 @@ type ColorType = {
       shadow: string;
       errorCount: string;
       noErrorCount: string;
+      warningCount: string;
     };
     blankState: {
       shortcut: string;
@@ -1706,6 +1707,7 @@ export const dark: ColorType = {
       shadow: "0px 12px 28px -6px rgba(0, 0, 0, 0.32)",
       errorCount: "#F22B2B",
       noErrorCount: "#03B365",
+      warningCount: "#DCAD00",
     },
     inspectElement: {
       color: "#D4D4D4",
@@ -2182,6 +2184,7 @@ export const light: ColorType = {
       shadow: "0px 12px 28px -6px rgba(0, 0, 0, 0.32)",
       errorCount: "#F22B2B",
       noErrorCount: "#03B365",
+      warningCount: "#DCAD00",
     },
     inspectElement: {
       color: "#090707",

app/client/src/entities/AppsmithConsole/logtype.ts

@@ -5,6 +5,7 @@ enum LOG_TYPE {
   ACTION_EXECUTION_SUCCESS,
   ENTITY_DELETED,
   EVAL_ERROR,
+  EVAL_WARNING,
   ACTION_UPDATE,
 }
 

app/client/src/sagas/PostEvaluationSagas.ts

@@ -1,4 +1,4 @@
-import { ENTITY_TYPE, Message } from "entities/AppsmithConsole";
+import { ENTITY_TYPE, Message, Severity } from "entities/AppsmithConsole";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
 import {
   getEntityNameAndPropertyPath,
@@ -72,80 +72,103 @@ function getLatestEvalPropertyErrors(
         entity,
         getEvalValuePath(evaluatedPath, false),
       );
-      const evalErrors = allEvalErrors.filter(
-        (error) => error.errorType !== PropertyEvaluationErrorType.LINT,
-      );
+      const evalErrors: EvaluationError[] = [];
+      const evalWarnings: EvaluationError[] = [];
+
+      for (const err of allEvalErrors) {
+        if (err.severity === Severity.WARNING) {
+          evalWarnings.push(err);
+        }
+        if (err.severity === Severity.ERROR) {
+          evalErrors.push(err);
+        }
+      }
+
       const idField = isWidget(entity) ? entity.widgetId : entity.actionId;
       const nameField = isWidget(entity) ? entity.widgetName : entity.name;
       const entityType = isWidget(entity)
         ? ENTITY_TYPE.WIDGET
         : ENTITY_TYPE.ACTION;
-      const debuggerKey = idField + "-" + propertyPath;
+      const debuggerKeys = [
+        {
+          key: `${idField}-${propertyPath}`,
+          errors: evalErrors,
+        },
+        {
+          key: `${idField}-${propertyPath}-warning`,
+          errors: evalWarnings,
+          isWarning: true,
+        },
+      ];
       // if dataTree has error but debugger does not -> add
       // if debugger has error and data tree has error -> update error
       // if debugger has error but data tree does not -> remove
       // if debugger or data tree does not have an error -> no change
 
-      if (evalErrors.length) {
-        // TODO Rank and set the most critical error
-        const error = evalErrors[0];
-        const errorMessages = evalErrors.map((e) => ({
-          message: e.errorMessage,
-        }));
+      for (const { errors, isWarning, key: debuggerKey } of debuggerKeys) {
+        if (errors.length) {
+          // TODO Rank and set the most critical error
+          const error = errors[0];
+          const { errorType, severity } = error;
+          const errorMessages = errors.map((e) => ({
+            message: e.errorMessage,
+          }));
 
-        if (!(debuggerKey in updatedDebuggerErrors)) {
-          store.dispatch(
-            logDebuggerErrorAnalytics({
-              eventName: "DEBUGGER_NEW_ERROR",
-              entityId: idField,
-              entityName: nameField,
-              entityType,
-              propertyPath,
-              errorMessages,
-            }),
-          );
-        }
+          if (!isWarning && !(debuggerKey in updatedDebuggerErrors)) {
+            store.dispatch(
+              logDebuggerErrorAnalytics({
+                eventName: "DEBUGGER_NEW_ERROR",
+                entityId: idField,
+                entityName: nameField,
+                entityType,
+                propertyPath,
+                errorMessages,
+              }),
+            );
+          }
 
-        const analyticsData = isWidget(entity)
-          ? {
-              widgetType: entity.type,
-            }
-          : {};
+          const analyticsData = isWidget(entity)
+            ? {
+                widgetType: entity.type,
+              }
+            : {};
 
-        // Add or update
-        updatedDebuggerErrors[debuggerKey] = {
-          logType: LOG_TYPE.EVAL_ERROR,
-          text: PropertyEvalErrorTypeDebugMessage[error.errorType](
-            propertyPath,
-          ),
-          messages: errorMessages,
-          severity: error.severity,
-          timestamp: moment().format("hh:mm:ss"),
-          source: {
-            id: idField,
-            name: nameField,
-            type: entityType,
-            propertyPath: propertyPath,
-          },
-          state: {
-            [propertyPath]: evaluatedValue,
-          },
-          analytics: analyticsData,
-        };
-      } else if (debuggerKey in updatedDebuggerErrors) {
-        store.dispatch(
-          logDebuggerErrorAnalytics({
-            eventName: "DEBUGGER_RESOLVED_ERROR",
-            entityId: idField,
-            entityName: nameField,
-            entityType,
-            propertyPath:
-              updatedDebuggerErrors[debuggerKey].source?.propertyPath ?? "",
-            errorMessages: updatedDebuggerErrors[debuggerKey].messages ?? [],
-          }),
-        );
-        // Remove
-        delete updatedDebuggerErrors[debuggerKey];
+          // Add or update
+          updatedDebuggerErrors[debuggerKey] = {
+            logType: isWarning ? LOG_TYPE.EVAL_WARNING : LOG_TYPE.EVAL_ERROR,
+            text: PropertyEvalErrorTypeDebugMessage[errorType](propertyPath),
+            messages: errorMessages,
+            severity,
+            timestamp: moment().format("hh:mm:ss"),
+            source: {
+              id: idField,
+              name: nameField,
+              type: entityType,
+              propertyPath: propertyPath,
+            },
+            state: {
+              [propertyPath]: evaluatedValue,
+            },
+            analytics: analyticsData,
+          };
+        } else if (debuggerKey in updatedDebuggerErrors) {
+          if (!isWarning) {
+            store.dispatch(
+              logDebuggerErrorAnalytics({
+                eventName: "DEBUGGER_RESOLVED_ERROR",
+                entityId: idField,
+                entityName: nameField,
+                entityType,
+                propertyPath:
+                  updatedDebuggerErrors[debuggerKey].source?.propertyPath ?? "",
+                errorMessages:
+                  updatedDebuggerErrors[debuggerKey].messages ?? [],
+              }),
+            );
+          }
+          // Remove
+          delete updatedDebuggerErrors[debuggerKey];
+        }
       }
     }
   }