chore: Error Tab changes for Debugger

app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_All_Verb_spec.js

@@ -18,7 +18,7 @@ describe(
   "API Panel Test Functionality",
   { tags: ["@tag.Datasource", "@tag.Git", "@tag.AccessControl"] },
   function () {
-    const successMsg = "Executed successfully from user request";
+    const successMsg = "Successfully executed in ";
     afterEach(function () {
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",

app/client/cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js

@@ -9,6 +9,7 @@ import {
   dataSources,
   debuggerHelper,
 } from "../../../support/Objects/ObjectsCore";
+
 const commonlocators = require("../../../locators/commonlocators.json");
 
 describe(
@@ -70,7 +71,7 @@ describe(
       debuggerHelper.OpenDebugger();
       debuggerHelper.ClickLogsTab();
       debuggerHelper.DoesConsoleLogExist(
-        "Execution failed with status PE-STC-5000",
+        "Failed execution",
         true,
         "NoiseTestQuery",
       );

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1072,6 +1072,14 @@ const InputCursorMoveIcon = importSvg(
   async () => import("../__assets__/icons/ads/input-cursor-move.svg"),
 );
 
+const DebugIcon = importSvg(
+  async () => import("../__assets__/icons/ads/debug.svg"),
+);
+
+const ClearIcon = importSvg(
+  async () => import("../__assets__/icons/ads/clear.svg"),
+);
+
 const ContentTypeTable = importSvg(
   async () => import("../__assets__/icons/ads/content-type-table.svg"),
 );
@@ -1149,6 +1157,7 @@ const ICON_LOOKUP = {
   "check-line": CheckLineIcon,
   "chevron-left": ChevronLeft,
   "chevron-right": ChevronRight,
+  clear: ClearIcon,
   "close-circle": CloseCircleIcon,
   "close-circle-control": CloseCircleIcon,
   "close-circle-line": CloseCircleLineIcon,
@@ -1176,6 +1185,7 @@ const ICON_LOOKUP = {
   "datasource-v3": DatasourceV3Icon,
   "datasources-2": Datasources2,
   "decrease-control": DecreaseIcon,
+  debug: DebugIcon,
   "delete-bin-line": DeleteBinLineIcon,
   "delete-blank": DeleteBin7,
   "delete-column": DeleteColumnIcon,

app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponse.tsx

@@ -60,8 +60,6 @@ export const ResponseTabErrorDefaultMessage = styled.div`
   flex-shrink: 0;
 `;
 
-export const apiReactJsonProps = { ...reactJsonProps, collapsed: 0 };
-
 export function ApiResponse(props: {
   action: Action;
   actionResponse?: ActionResponse;
@@ -96,7 +94,14 @@ export function ApiResponse(props: {
   const { messages, pluginErrorDetails, request } = props.actionResponse;
 
   const runHasFailed = hasFailed(props.actionResponse);
-  const requestWithTimestamp = getUpdateTimestamp(request);
+  const requestWithTimestamp = {
+    error:
+      props.actionResponse.readableError ||
+      props.actionResponse.pluginErrorDetails?.downstreamErrorMessage ||
+      props.actionResponse.body ||
+      "An unexpected error occurred",
+    request: getUpdateTimestamp(request),
+  };
 
   return (
     <Flex flexDirection="column" h="100%" w="100%">
@@ -144,7 +149,7 @@ export function ApiResponse(props: {
           </ResponseTabErrorContent>
           {requestWithTimestamp && (
             <JsonWrapper className="t--debugger-log-state" onClick={noop}>
-              <ReactJson src={requestWithTimestamp} {...apiReactJsonProps} />
+              <ReactJson src={requestWithTimestamp} {...reactJsonProps} />
             </JsonWrapper>
           )}
         </ResponseTabErrorContainer>

app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/QueryResponseTab.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ReactJson from "react-json-view";
 import {
-  apiReactJsonProps,
   ResponseTabErrorContainer,
   ResponseTabErrorContent,
   ResponseTabErrorDefaultMessage,
@@ -12,7 +11,10 @@ import { NoResponse } from "../NoResponse";
 import LogAdditionalInfo from "components/editorComponents/Debugger/ErrorLogs/components/LogAdditionalInfo";
 import LogHelper from "components/editorComponents/Debugger/ErrorLogs/components/LogHelper";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
-import { JsonWrapper } from "components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData";
+import {
+  JsonWrapper,
+  reactJsonProps,
+} from "components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData";
 import {
   Callout,
   Menu,
@@ -190,8 +192,10 @@ export const QueryResponseTab = (props: Props) => {
   const currentContentType =
     selectedContentType || firstContentTypeOption?.value;
 
-  const responseState =
-    actionResponse && getUpdateTimestamp(actionResponse.request);
+  const responseState = {
+    error: errorMessage,
+    request: actionResponse && getUpdateTimestamp(actionResponse.request),
+  };
 
   const selectedTabIndex =
     responseDataTypes &&
@@ -366,7 +370,7 @@ export const QueryResponseTab = (props: Props) => {
                 className="t--debugger-log-state"
                 onClick={handleJsonWrapperClick}
               >
-                <ReactJson src={responseState} {...apiReactJsonProps} />
+                <ReactJson src={responseState} {...reactJsonProps} />
               </JsonWrapper>
             )}
           </ResponseTabErrorContainer>

app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx

@@ -142,17 +142,17 @@ function usePluginActionResponseTabs() {
 
   if (IDEViewMode === EditorViewMode.FullScreen) {
     tabs.push(
+      {
+        key: DEBUGGER_TAB_KEYS.LOGS_TAB,
+        title: createMessage(DEBUGGER_LOGS),
+        panelComponent: <DebuggerLogs searchQuery={action.name} />,
+      },
       {
         key: DEBUGGER_TAB_KEYS.ERROR_TAB,
         title: createMessage(DEBUGGER_ERRORS),
         count: errorCount,
         panelComponent: <ErrorLogs />,
       },
-      {
-        key: DEBUGGER_TAB_KEYS.LOGS_TAB,
-        title: createMessage(DEBUGGER_LOGS),
-        panelComponent: <DebuggerLogs searchQuery={action.name} />,
-      },
     );
   }
 

app/client/src/ce/constants/messages.ts

@@ -556,7 +556,7 @@ export const LOGS_FILTER_OPTION_CONSOLE = () => "Console logs";
 export const LOGS_FILTER_OPTION_SYSTEM = () => "System logs";
 export const NO_LOGS = () => "No logs to show";
 export const NO_ERRORS = () => "No signs of trouble here!";
-export const DEBUGGER_ERRORS = () => "Errors";
+export const DEBUGGER_ERRORS = () => "Linter";
 export const DEBUGGER_RESPONSE = () => "Response";
 export const DEBUGGER_HEADERS = () => "Headers";
 export const DEBUGGER_LOGS = () => "Logs";
@@ -629,8 +629,9 @@ export const EXPORT_DEFAULT_BEGINNING = () =>
   `Start object with export default`;
 export const ACTION_EXECUTION_FAILED = (actionName: string) =>
   `The action "${actionName}" has failed.`;
-export const JS_EXECUTION_SUCCESS = () => "JS Function executed successfully";
-export const JS_EXECUTION_FAILURE = () => "JS Function execution failed";
+export const JS_EXECUTION_TRIGGERED = () => "Function triggered";
+export const JS_EXECUTION_SUCCESS = () => "Function executed";
+export const JS_EXECUTION_FAILURE = () => "Function execution failed";
 export const JS_EXECUTION_FAILURE_TOASTER = () =>
   "There was an error while executing function";
 export const JS_SETTINGS_ONPAGELOAD = () => "Run function on page load (Beta)";

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -124,17 +124,17 @@ function ApiResponseView(props: Props) {
 
   if (ideViewMode === EditorViewMode.FullScreen) {
     tabs.push(
+      {
+        key: DEBUGGER_TAB_KEYS.LOGS_TAB,
+        title: createMessage(DEBUGGER_LOGS),
+        panelComponent: <DebuggerLogs searchQuery={currentActionConfig.name} />,
+      },
       {
         key: DEBUGGER_TAB_KEYS.ERROR_TAB,
         title: createMessage(DEBUGGER_ERRORS),
         count: errorCount,
         panelComponent: <ErrorLogs />,
       },
-      {
-        key: DEBUGGER_TAB_KEYS.LOGS_TAB,
-        title: createMessage(DEBUGGER_LOGS),
-        panelComponent: <DebuggerLogs searchQuery={currentActionConfig.name} />,
-      },
     );
   }
 

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

@@ -4,12 +4,32 @@ import type LOG_TYPE from "entities/AppsmithConsole/logtype";
 import type { Plugin } from "api/PluginApi";
 import { Link } from "@appsmith/ads";
 import type { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import styled from "styled-components";
+import { getTypographyByKey } from "@appsmith/ads-old";
 
 export enum DebuggerLinkUI {
   ENTITY_TYPE,
   ENTITY_NAME,
 }
 
+const Wrapper = styled.div`
+  .debugger-entity-link {
+    // TODO: unclear why this file and LogItem.tsx have different styles when they look so similar
+    ${getTypographyByKey("h6")}
+    font-weight: 400;
+    letter-spacing: -0.195px;
+    color: var(--ads-v2-color-fg-emphasis);
+    cursor: pointer;
+    text-decoration-line: underline;
+    flex-shrink: 0;
+    width: max-content;
+
+    > span {
+      font-size: 12px;
+    }
+  }
+`;
+
 export type EntityLinkProps = {
   uiComponent: DebuggerLinkUI;
   plugin?: Plugin;
@@ -48,12 +68,14 @@ export function DebuggerEntityLink(props: {
       );
     case DebuggerLinkUI.ENTITY_NAME:
       return (
-        <Link
-          className="debugger-entity-link t--debugger-log-entity-link"
-          onClick={handleClick}
-        >
-          {props.name}
-        </Link>
+        <Wrapper>
+          <Link
+            className="debugger-entity-link t--debugger-log-entity-link"
+            onClick={handleClick}
+          >
+            {props.name}:
+          </Link>
+        </Wrapper>
       );
     default:
       return null;

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

@@ -5,7 +5,7 @@ import { get, isUndefined } from "lodash";
 import { LOG_CATEGORY, Severity } from "entities/AppsmithConsole";
 import FilterHeader from "./FilterHeader";
 import { BlankState } from "./helpers";
-import LogItem, { getLogItemProps } from "./LogItem";
+import { LogItem, getLogItemProps } from "./LogItem";
 import { usePagination, useFilteredLogs } from "./hooks/debuggerHooks";
 import {
   createMessage,
@@ -24,21 +24,21 @@ import type { IconName } from "@blueprintjs/core";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { getDebuggerSelectedFilter } from "selectors/debuggerSelectors";
 import { setDebuggerSelectedFilter } from "actions/debuggerActions";
+import { BOTTOM_BAR_HEIGHT } from "components/BottomBar/constants";
 
-export const LIST_HEADER_HEIGHT = "38px";
+export const LIST_HEADER_HEIGHT = "52px";
 export const FOOTER_MARGIN = "40px";
 
 const ContainerWrapper = styled.div`
   overflow: hidden;
-  height: 100%;
+  height: calc(100% - ${BOTTOM_BAR_HEIGHT}px);
 `;
 
 export const ListWrapper = styled.div`
   overflow-wrap: anywhere;
   overflow: auto;
   height: calc(100% - ${LIST_HEADER_HEIGHT});
   ${thinScrollbar};
-  padding-bottom: 37px;
 `;
 
 interface Props {

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

@@ -13,12 +13,10 @@ import {
 } from "selectors/debuggerSelectors";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import Errors from "./Errors";
-import EntityDeps from "./EntityDependecies";
 import {
   createMessage,
   DEBUGGER_ERRORS,
   DEBUGGER_LOGS,
-  INSPECT_ENTITY,
 } from "ee/constants/messages";
 import { DEBUGGER_TAB_KEYS } from "./constants";
 import EntityBottomTabs from "../EntityBottomTabs";
@@ -48,21 +46,16 @@ function DebuggerTabs() {
   const onClose = () => dispatch(showDebugger(false));
 
   const DEBUGGER_TABS = [
-    {
-      key: DEBUGGER_TAB_KEYS.ERROR_TAB,
-      title: createMessage(DEBUGGER_ERRORS),
-      count: errorCount,
-      panelComponent: <Errors hasShortCut />,
-    },
     {
       key: DEBUGGER_TAB_KEYS.LOGS_TAB,
       title: createMessage(DEBUGGER_LOGS),
       panelComponent: <DebuggerLogs hasShortCut />,
     },
     {
-      key: DEBUGGER_TAB_KEYS.INSPECT_TAB,
-      title: createMessage(INSPECT_ENTITY),
-      panelComponent: <EntityDeps />,
+      key: DEBUGGER_TAB_KEYS.ERROR_TAB,
+      title: createMessage(DEBUGGER_ERRORS),
+      count: errorCount,
+      panelComponent: <Errors hasShortCut />,
     },
   ];
 

app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLog.tsx

@@ -10,18 +10,18 @@ import type { Log } from "entities/AppsmithConsole";
 import { setResponsePaneScrollPosition } from "actions/debuggerActions";
 import { useDispatch, useSelector } from "react-redux";
 import { getScrollPosition } from "selectors/debuggerSelectors";
+import { BOTTOM_BAR_HEIGHT } from "components/BottomBar/constants";
 
 const ContainerWrapper = styled.div`
   overflow: hidden;
-  height: 100%;
+  height: calc(100% - ${BOTTOM_BAR_HEIGHT}px);
 `;
 
 const ListWrapper = styled.div`
   overflow-wrap: anywhere;
   overflow: auto;
   ${thinScrollbar};
   height: 100%;
-  padding-bottom: 37px;
 `;
 
 // This component is used to render the error logs in the debugger.